ondc-code-generator 0.0.1

package/generated/L1-validations/page/style.css

@@ -0,0 +1,225 @@
+/* RESET AND BASE STYLES */
+:root {
+	--accent: #2563eb;
+	--accent-light: #93c5fd;
+	--background: #ffffff;
+	--text: #1e293b;
+	--text-light: #475569;
+	--border: #e2e8f0;
+	--border-dark: #cbd5e1;
+	--code-bg: #f1f5f9;
+	--radius: 0.5rem;
+	--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+body {
+	font-family: "Inter", system-ui, sans-serif;
+	background-color: var(--background);
+	color: var(--text);
+	line-height: 1.7;
+	padding: 3rem 1rem;
+	max-width: 900px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+}
+
+/* IMPROVED TYPOGRAPHY */
+h2 {
+	color: var(--text);
+	font-weight: 700;
+	margin: 3rem 0 1.5rem;
+	padding-bottom: 1rem;
+	border-bottom: 2px solid var(--border);
+	position: relative;
+	font-size: 1.75rem;
+}
+
+h2::after {
+	content: "";
+	position: absolute;
+	bottom: -2px;
+	left: 0;
+	width: 4rem;
+	height: 2px;
+	background: var(--accent);
+}
+
+/* STRUCTURED LIST HIERARCHY */
+ul {
+	padding-left: 1.25rem;
+	position: relative;
+}
+
+ul > li {
+	margin-bottom: 1.25rem;
+	position: relative;
+}
+
+/* Nested list indentation */
+ul ul {
+	padding-left: 2rem;
+}
+ul ul ul {
+	padding-left: 2.5rem;
+}
+
+li > p {
+	margin: 0.75rem 0;
+	padding: 1.25rem;
+	background: var(--background);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	transition: all 0.2s ease;
+	position: relative;
+	break-inside: avoid;
+}
+
+li > p:hover {
+	border-color: var(--accent-light);
+	box-shadow: var(--shadow);
+}
+
+/* COLLAPSIBLE ENHANCEMENTS */
+li.collapsible > p {
+	cursor: pointer;
+	padding-left: 3rem;
+	font-weight: 500;
+	background: linear-gradient(
+		to right,
+		var(--accent-light) 0.5rem,
+		var(--background) 0.5rem
+	);
+}
+
+li.collapsible > p::before {
+	content: "▾";
+	position: absolute;
+	left: 1rem;
+	top: 50%;
+	transform: translateY(-50%);
+	color: var(--accent);
+	font-size: 1.1em;
+	transition: transform 0.2s ease;
+}
+
+li.collapsible.collapsed > p::before {
+	transform: translateY(-50%) rotate(-90deg);
+}
+
+li.collapsible > p:hover {
+	background: linear-gradient(
+		to right,
+		var(--accent) 0.5rem,
+		var(--background) 0.5rem
+	);
+}
+
+li.collapsible > p:hover::before {
+	color: var(--text);
+}
+
+/* NESTED CONTENT VISUALIZATION */
+ul ul li > p {
+	border-left: 3px solid var(--border-dark);
+	margin-left: -1.25rem;
+	padding-left: 2rem;
+}
+
+ul ul ul li > p {
+	border-left-style: dashed;
+}
+
+/* CODE & TECHNICAL ELEMENTS */
+code {
+	font-family: "JetBrains Mono", monospace;
+	background: var(--code-bg);
+	padding: 0.2em 0.4em;
+	border-radius: 0.25em;
+	font-size: 0.9em;
+}
+
+pre {
+	background: var(--code-bg);
+	padding: 1.5rem;
+	border-radius: var(--radius);
+	overflow-x: auto;
+	margin: 1.5rem 0;
+	box-shadow: var(--shadow);
+}
+
+/* INTERACTIVE ELEMENTS */
+details {
+	margin: 1rem 0;
+	background: var(--background);
+	border-radius: var(--radius);
+	box-shadow: var(--shadow);
+}
+
+details > summary {
+	padding: 1.25rem;
+	cursor: pointer;
+	font-weight: 600;
+	color: var(--accent);
+	list-style: none;
+}
+
+details > summary::-webkit-details-marker {
+	display: none;
+}
+
+details[open] > summary {
+	border-bottom: 1px solid var(--border);
+	margin-bottom: 1rem;
+}
+
+/* TABLE OF CONTENTS NAVIGATION */
+.toc {
+	position: fixed;
+	top: 2rem;
+	right: 2rem;
+	background: white;
+	padding: 1.5rem;
+	border-radius: var(--radius);
+	box-shadow: var(--shadow);
+	max-width: 250px;
+}
+
+.toc ul {
+	list-style: none;
+	padding-left: 0;
+	margin: 0;
+}
+
+.toc li {
+	margin: 0.5rem 0;
+}
+
+.toc a {
+	text-decoration: none;
+	color: var(--text-light);
+	transition: color 0.2s ease;
+}
+
+.toc a:hover {
+	color: var(--accent);
+}
+
+/* RESPONSIVE ADJUSTMENTS */
+@media (max-width: 768px) {
+	body {
+		padding: 1.5rem 1rem;
+		font-size: 0.9375rem;
+	}
+
+	.toc {
+		position: static;
+		max-width: 100%;
+		margin-bottom: 2rem;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	* {
+		transition: none !important;
+	}
+}