/* Classical — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Instrument+Sans:wght@400;500;600&display=swap'); :root { --color-bg: #0f1730; --color-surface: #16204a; --color-text: #f4f5fa; --color-accent: #ff8a4c; --color-accent-2: #ff8a4c; --color-divider: color-mix(in srgb, #f4f5fa 18%, transparent); /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the same step of any role matches the others in visual value. */ --color-neutral-100: #1a2340; --color-neutral-200: #232d4f; --color-neutral-300: #2f3a5e; --color-neutral-400: #4a5578; --color-neutral-500: #6b7594; --color-neutral-600: #9098b3; --color-neutral-700: #b7bdd0; --color-neutral-800: #d8dbe8; --color-neutral-900: #f4f5fa; --color-accent-100: #3a2211; --color-accent-200: #5c3417; --color-accent-300: #8c4c1e; --color-accent-400: #c1651f; --color-accent-500: #ff8a4c; --color-accent-600: #ffa066; --color-accent-700: #ffb98c; --color-accent-800: #ffd6b3; --color-accent-900: #ffe9d6; --color-accent-2-100: #3a2211; --color-accent-2-200: #5c3417; --color-accent-2-300: #8c4c1e; --color-accent-2-400: #c1651f; --color-accent-2-500: #ff8a4c; --color-accent-2-600: #ffa066; --color-accent-2-700: #ffb98c; --color-accent-2-800: #ffd6b3; --color-accent-2-900: #ffe9d6; --font-heading: "Archivo", system-ui, sans-serif; --font-heading-weight: 800; --font-body: "Instrument Sans", system-ui, sans-serif; --space-1: 4.6px; --space-2: 9.2px; --space-3: 13.8px; --space-4: 18.4px; --space-6: 27.6px; --space-8: 36.8px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px; /* Elevation — derived from the ground: soft ink-tinted shadows on a light theme, a hairline edge + ambient darkness on a dark one. */ --shadow-sm: 0 1px 2px color-mix(in srgb, #000 30%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #000 34%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #000 44%, transparent); } /* Clair option — a crisp, cool-neutral light alternative (distinct from the warm cream/sepia tones), cycled in before the default dark ground. */ html[data-theme="clair"] { --color-bg: #f7f7f8; --color-surface: #ececef; --color-text: #17181d; --color-accent: #b6672c; --color-accent-2: #b6672c; --color-divider: color-mix(in srgb, #17181d 12%, transparent); --color-neutral-100: #f3f3f5; --color-neutral-200: #e7e7ea; --color-neutral-300: #d3d3d9; --color-neutral-400: #aeaeb8; --color-neutral-500: #86868f; --color-neutral-600: #63636b; --color-neutral-700: #46464d; --color-neutral-800: #2b2b30; --color-neutral-900: #17181d; --color-accent-100: #f7e6d2; --color-accent-200: #f0cda3; --color-accent-300: #e2a86a; --color-accent-400: #cf8a45; --color-accent-500: #b6672c; --color-accent-600: #99551f; --color-accent-700: #7a4318; --color-accent-800: #5c3211; --color-accent-900: #3a2211; --color-accent-2-100: #f7e6d2; --color-accent-2-200: #f0cda3; --color-accent-2-300: #e2a86a; --color-accent-2-400: #cf8a45; --color-accent-2-500: #b6672c; --color-accent-2-600: #99551f; --color-accent-2-700: #7a4318; --color-accent-2-800: #5c3211; --color-accent-2-900: #3a2211; --shadow-sm: 0 1px 2px color-mix(in srgb, #17181d 8%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #17181d 12%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #17181d 18%, transparent); } html[data-theme="clair"] .plate { border-color: var(--color-surface); } /* Cream option — a lighter, warmer alternative palette the visitor can pick instead of the site's default dark ground. Toggled via [data-theme="cream"] on by theme-toggle.js; falls back silently if unset. */ html[data-theme="cream"] { --color-bg: #f7f2e6; --color-surface: #efe6d1; --color-text: #29231a; --color-accent: #b6672c; --color-accent-2: #b6672c; --color-divider: color-mix(in srgb, #29231a 14%, transparent); --color-neutral-100: #f4efe0; --color-neutral-200: #ece2cb; --color-neutral-300: #ddd0b2; --color-neutral-400: #c2b28e; --color-neutral-500: #9c8b68; --color-neutral-600: #786a4d; --color-neutral-700: #574c37; --color-neutral-800: #3a3123; --color-neutral-900: #211b12; --color-accent-100: #f7e5cd; --color-accent-200: #efcb9e; --color-accent-300: #e0a563; --color-accent-400: #cc8641; --color-accent-500: #b6672c; --color-accent-600: #97531f; --color-accent-700: #784118; --color-accent-800: #593010; --color-accent-900: #38200f; --color-accent-2-100: #f7e5cd; --color-accent-2-200: #efcb9e; --color-accent-2-300: #e0a563; --color-accent-2-400: #cc8641; --color-accent-2-500: #b6672c; --color-accent-2-600: #97531f; --color-accent-2-700: #784118; --color-accent-2-800: #593010; --color-accent-2-900: #38200f; --shadow-sm: 0 1px 2px color-mix(in srgb, #29231a 10%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #29231a 14%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #29231a 20%, transparent); } html[data-theme="cream"] .plate { border-color: var(--color-surface); } /* Sepia option — a second warm alternative, higher-contrast than cream. */ html[data-theme="sepia"] { --color-bg: #efe3cd; --color-surface: #e4d3ae; --color-text: #241a0d; --color-accent: #8a4a1c; --color-accent-2: #8a4a1c; --color-divider: color-mix(in srgb, #241a0d 18%, transparent); --color-neutral-100: #ebdcc0; --color-neutral-200: #e0cba3; --color-neutral-300: #cdb27f; --color-neutral-400: #ab8c5c; --color-neutral-500: #83693f; --color-neutral-600: #614d2d; --color-neutral-700: #453620; --color-neutral-800: #2c2113; --color-neutral-900: #1a1409; --color-accent-100: #f0dcbf; --color-accent-200: #e3bd85; --color-accent-300: #cf9752; --color-accent-400: #ac6f2e; --color-accent-500: #8a4a1c; --color-accent-600: #6e3b16; --color-accent-700: #542c10; --color-accent-800: #3b1f0b; --color-accent-900: #241207; --color-accent-2-100: #f0dcbf; --color-accent-2-200: #e3bd85; --color-accent-2-300: #cf9752; --color-accent-2-400: #ac6f2e; --color-accent-2-500: #8a4a1c; --color-accent-2-600: #6e3b16; --color-accent-2-700: #542c10; --color-accent-2-800: #3b1f0b; --color-accent-2-900: #241207; --shadow-sm: 0 1px 2px color-mix(in srgb, #241a0d 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #241a0d 18%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #241a0d 26%, transparent); } html[data-theme="sepia"] .plate { border-color: var(--color-surface); } /* Amande option — a soft almond-green alternative. */ html[data-theme="amande"] { --color-bg: #f2f5ea; --color-surface: #e6ecd6; --color-text: #20261a; --color-accent: #5f7a3d; --color-accent-2: #5f7a3d; --color-divider: color-mix(in srgb, #20261a 18%, transparent); --color-neutral-100: #e9efdb; --color-neutral-200: #dbe4c4; --color-neutral-300: #c3d1a0; --color-neutral-400: #a2b878; --color-neutral-500: #7e9757; --color-neutral-600: #5f7a3d; --color-neutral-700: #435728; --color-neutral-800: #2c3a19; --color-neutral-900: #1a230f; --color-accent-100: #e6edd4; --color-accent-200: #c9d9a3; --color-accent-300: #a7c072; --color-accent-400: #82a34c; --color-accent-500: #5f7a3d; --color-accent-600: #4c6230; --color-accent-700: #3a4a25; --color-accent-800: #29341a; --color-accent-900: #19200f; --color-accent-2-100: #e6edd4; --color-accent-2-200: #c9d9a3; --color-accent-2-300: #a7c072; --color-accent-2-400: #82a34c; --color-accent-2-500: #5f7a3d; --color-accent-2-600: #4c6230; --color-accent-2-700: #3a4a25; --color-accent-2-800: #29341a; --color-accent-2-900: #19200f; --shadow-sm: 0 1px 2px color-mix(in srgb, #20261a 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #20261a 18%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #20261a 26%, transparent); } html[data-theme="amande"] .plate { border-color: var(--color-surface); } /* Rose option — a soft pastel-pink alternative. */ html[data-theme="rose"] { --color-bg: #faf1f2; --color-surface: #f2dfe2; --color-text: #2b171a; --color-accent: #a85a72; --color-accent-2: #a85a72; --color-divider: color-mix(in srgb, #2b171a 18%, transparent); --color-neutral-100: #f5e3e6; --color-neutral-200: #edd0d5; --color-neutral-300: #ddadb6; --color-neutral-400: #c48594; --color-neutral-500: #a5657a; --color-neutral-600: #834f60; --color-neutral-700: #613a47; --color-neutral-800: #40262f; --color-neutral-900: #26161a; --color-accent-100: #f6e1e7; --color-accent-200: #e9bccb; --color-accent-300: #d493ab; --color-accent-400: #bf6e8d; --color-accent-500: #a85a72; --color-accent-600: #86485c; --color-accent-700: #653645; --color-accent-800: #45252f; --color-accent-900: #29161c; --color-accent-2-100: #f6e1e7; --color-accent-2-200: #e9bccb; --color-accent-2-300: #d493ab; --color-accent-2-400: #bf6e8d; --color-accent-2-500: #a85a72; --color-accent-2-600: #86485c; --color-accent-2-700: #653645; --color-accent-2-800: #45252f; --color-accent-2-900: #29161c; --shadow-sm: 0 1px 2px color-mix(in srgb, #2b171a 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2b171a 18%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2b171a 26%, transparent); } html[data-theme="rose"] .plate { border-color: var(--color-surface); } /* — theme switch control, injected by theme-toggle.js next to .nav-brand — */ .theme-switch { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--space-2); padding: 6px 12px; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: transparent; color: var(--color-text); cursor: pointer; font-family: var(--font-body); font-size: 13px; line-height: 1; } .theme-switch:hover { border-color: var(--color-accent); } .theme-switch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .theme-switch svg { width: 14px; height: 14px; flex: none; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); } .plate{filter:sepia(0.22) saturate(0.82) contrast(1.05);box-sizing:border-box; border:6px solid var(--color-surface);outline:1px solid var(--color-divider)} /* ══════════════════════════════════════════════════════════════════════════ Components — built with the tokens above. Plain CSS on plain HTML: no JavaScript, no build step. Each class is documented in readme.md and demonstrated in foundations/ and components/. ══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-size: 18px; line-height: 1.6; font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } h1 { font-size: 56px; } h2 { font-size: 40px; } h3 { font-size: 28px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 14px; } h6 { letter-spacing: 0.08em; text-transform: uppercase; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent); text-underline-offset: 3px; } img { display: block; max-width: 100%; } figure { margin: 0; } figcaption { font-size: 12px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 85%, transparent); } .text-muted { color: color-mix(in srgb, var(--color-text) 85%, transparent); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* — rules — */ .hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); } /* — buttons — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px — the pair sits side by side in sign-up rows */ background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); } .btn svg { display: block; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary { color: var(--color-accent); border-color: var(--color-accent); } .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); } .btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .btn-ghost { color: var(--color-accent); padding-inline: var(--space-2); border-color: transparent; } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } .btn-icon { width: 36px; height: 36px; padding: 0; } .btn-block { width: 100%; margin-top: var(--space-2); } /* — forms — */ .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 88%, transparent); } .input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: transparent; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } textarea.input { min-height: 90px; resize: vertical; } .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); } .radio:hover .dot { border-color: var(--color-accent); } .radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); } .radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; } .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; } .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); } .seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; } /* — cards — */ .card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-divider); transition: border-color .15s ease; } details.card > summary { list-style: none; } details.card:hover, a.card:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-divider)); } .card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); } .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; line-height: 1.2; } .card-body { margin: 0; font-size: 16px; opacity: 0.97; flex: 1; } .card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 82%, transparent); } .elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); } /* — tags — */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); } .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); } .tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); } /* — navigation — */ .nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); } .nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; } .nav a { color: inherit; text-decoration: none; font-size: 14px; } .nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); } /* — tables — */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); } .table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); } .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } /* — dialog — */ .dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); } .dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider); } .dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; } .dialog-body { font-size: 15px; opacity: 0.97; } .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); } @media print { .nav, .btn-secondary, footer { display: none !important; } .print-header { display: block !important; margin-bottom: var(--space-4); } .print-only { display: block !important; } .no-print { display: none !important; } section { padding: 0 !important; max-width: none !important; } [style*="position:sticky"] { position: static !important; } [style*="grid-template-columns:0.85fr"] { display: block !important; } [style*="filter:blur"] { filter: none !important; pointer-events: auto !important; user-select: auto !important; } .card { break-inside: avoid; box-shadow: none !important; } .elev-sm, .elev-md { box-shadow: none !important; } } .print-only { display: none; } .help-dot { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:var(--color-neutral-300); color:var(--color-text); font-size:10px; font-weight:700; cursor:help; margin-left:4px; vertical-align:middle; } /* launch: responsive */ @media (max-width: 900px) { .nav { flex-wrap: wrap; row-gap: var(--space-2); padding-left: var(--space-3); padding-right: var(--space-3); } .nav .btn { margin-left: 0 !important; } [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } [style*="max-width:1120px"], [style*="max-width:820px"] { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; } h1 { font-size: clamp(28px, 7vw, 40px) !important; } h2 { font-size: clamp(22px, 5.5vw, 30px) !important; } section[style*="height:72vh"] { height: auto !important; min-height: 0 !important; padding: var(--space-8) 0 !important; } } @media (max-width: 620px) { .btn { min-height: 44px; } .input { min-height: 44px; } .nav { gap: var(--space-2); } .nav form { width: 100%; margin-left: 0 !important; order: 10; } .nav form .input { width: 100% !important; } .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } [style*="grid-template-columns:220px 1fr"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:1fr 100px 100px auto"] { grid-template-columns: 1fr !important; } input.input[style*="width:"], select.input[style*="width:"] { width: 100% !important; max-width: 100% !important; } }