/* Synclature — 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=Montserrat:wght@600;700;800&family=Karla:wght@400;500;600;700&display=swap'); :root { --color-bg: #FAFBFB; --color-surface: #F1F4F5; --color-text: #221F1F; --color-accent: #1895CF; --color-accent-2: #FCAA18; --color-divider: color-mix(in srgb, #221F1F 14%, transparent); /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the same step of any role matches the others in visual value. Accent is the cube-blue from the Synclature mark; accent-2 is the mark's orange. */ --color-neutral-100: #F7F7F7; --color-neutral-200: #EAEAEA; --color-neutral-300: #D2D2D2; --color-neutral-400: #ACACAC; --color-neutral-500: #848484; --color-neutral-600: #616161; --color-neutral-700: #454545; --color-neutral-800: #2E2C2C; --color-neutral-900: #221F1F; --color-accent-100: #E5F4FC; --color-accent-200: #C2E8F8; --color-accent-300: #8FD6F1; --color-accent-400: #3FBBEE; --color-accent-500: #1895CF; --color-accent-600: #0F7BAC; --color-accent-700: #0B6088; --color-accent-800: #0A4863; --color-accent-900: #0B2E3D; --color-accent-2-100: #FFF3DC; --color-accent-2-200: #FFE2AC; --color-accent-2-300: #FFCB6E; --color-accent-2-400: #FDBB40; --color-accent-2-500: #FCAA18; --color-accent-2-600: #D78A0F; --color-accent-2-700: #A76B0D; --color-accent-2-800: #784D0D; --color-accent-2-900: #492E09; /* Ink — the navy stationery color, kept as a dark inverse ground (dividers, footers, the deck's section breaks) in both themes; body text uses the mark's charcoal (light theme) or near-white (dark theme). */ --color-ink: #083947; --color-ink-700: #0B4A5B; /* Supplementary voices, for semantic/status use only (never as a brand lead). Success draws on the teal from the Synclature stationery — a natural analogous partner to the mark's blue; danger is a warm red-orange, distinct from the amber, for alerts and destructive actions. */ --color-success-100: #E1F3EE; --color-success-500: #1F8A70; /* @kind color */ --color-success-700: #145E4C; /* @kind color */ --color-danger-100: #FBE7E4; --color-danger-500: #D6493B; /* @kind color */ --color-danger-700: #9B3128; /* @kind color */ /* The mark's two cube facets as a signature gradient — used sparingly (the primary button, the deck's dark dividers), never as a page wash. */ --gradient-brand: linear-gradient(135deg, #3FBBEE 0%, #1895CF 100%); /* @kind color */ --gradient-brand-dark: linear-gradient(135deg, #0A4863 0%, #0B2E3D 100%); /* @kind color */ --font-heading: "Montserrat", system-ui, sans-serif; --font-heading-weight: 700; --font-body: "Karla", system-ui, sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* Elevation — derived from the ink: soft charcoal-tinted shadows tuned to the light ground; the dark theme below overrides these to a deeper key. */ --shadow-sm: 0 1px 2px color-mix(in srgb, #221F1F 12%, transparent); --shadow-md: 0 4px 14px color-mix(in srgb, #221F1F 15%, transparent); --shadow-lg: 0 16px 40px color-mix(in srgb, #221F1F 22%, transparent); /* Panel — the raised-surface color for cards, inputs and dialogs. White on the light theme, a lifted dark tone on the dark theme; always a step above --color-surface. */ --color-panel: #fff; } /* Dark theme — opt in per-page or per-section with data-theme="dark" on , , or any container; every component below reads the same token names, so nothing needs a second class. The mark's charcoal wordmark flips to white on dark grounds — swap in assets/logo-dark.png (or logo-tagline-dark.png) wherever a light-theme logo would otherwise sit on a dark surface. */ [data-theme="dark"] { --color-bg: #14181A; --color-surface: #1D2225; --color-panel: #20262A; --color-text: #F3F5F5; --color-divider: color-mix(in srgb, #F3F5F5 16%, transparent); --color-accent: #3FBBEE; --color-accent-2: #FDBB40; --color-success-500: #2FA98A; --color-danger-500: #E5695C; --shadow-sm: 0 1px 2px color-mix(in srgb, black 45%, transparent); --shadow-md: 0 4px 14px color-mix(in srgb, black 50%, transparent); --shadow-lg: 0 16px 40px color-mix(in srgb, black 60%, transparent); } 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); } /* Image treatment — clean and crisp, never desaturated: a rounded frame and a soft shadow, so photography reads as confident, not decorative. */ .framed { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } /* ══════════════════════════════════════════════════════════════════════════ 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: 15px; line-height: 1.55; font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--space-2); } h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; } h4 { font-size: 20px; } h5 { font-size: 16px; font-weight: 600; } h6 { font-size: 13px; font-weight: 600; } h6 { letter-spacing: 0.08em; text-transform: uppercase; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent-600); text-underline-offset: 3px; } a:hover { color: var(--color-accent); } img { display: block; max-width: 100%; } figure { margin: 0; } figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); } .text-muted { color: color-mix(in srgb, var(--color-text) 55%, 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-body); font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.4); border-radius: var(--radius-md); } .btn svg { display: block; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--gradient-brand); color: #fff; } .btn-primary:hover { background: var(--color-accent-600); } .btn-primary:active { background: var(--color-accent-700); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); } .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 12%, transparent); } .btn-ghost { color: var(--color-accent-600); padding-inline: var(--space-2); } .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; font-weight: 600; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .input { width: 100%; min-height: 38px; padding: 6px 12px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-panel); border: 1px solid var(--color-divider); border-radius: var(--radius-sm); } .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-sm); } .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; } .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); } .seg-opt:has(input:checked) { background: var(--color-accent); color: #fff; } .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 6%, 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-4); border-radius: var(--radius-lg); background: var(--color-panel); border: 1px solid var(--color-divider); } .card-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-600); } .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.25; } .card-body { margin: 0; font-size: 13px; opacity: 0.78; flex: 1; } .card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, 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; font-weight: 600; letter-spacing: 0.02em; padding: 3px 10px; border-radius: var(--radius-sm); } .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-200); color: var(--color-neutral-800); } .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-600); } .tag-success { background: var(--color-success-100); color: var(--color-success-700); } .tag-danger { background: var(--color-danger-100); color: var(--color-danger-700); } /* — 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; color: var(--color-text); } .nav a { color: inherit; text-decoration: none; font-size: 14px; font-weight: 600; } .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: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); } .table td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } .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-ink) 55%, 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-panel); box-shadow: var(--shadow-lg); } .dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; } .dialog-body { font-size: 14px; opacity: 0.85; } .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); } /* — checkbox & switch — */ .checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .checkbox input, .switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .checkbox .box { width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1.5px solid var(--color-divider); display: grid; place-items: center; } .checkbox:hover .box { border-color: var(--color-accent); } .checkbox input:checked + .box { border-color: var(--color-accent); background: var(--color-accent); } .checkbox input:checked + .box::after { content: ''; width: 8px; height: 5px; margin-bottom: 2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .checkbox input:indeterminate + .box { border-color: var(--color-accent); background: var(--color-accent); } .checkbox input:indeterminate + .box::after { content: ''; width: 8px; height: 2px; background: #fff; border: 0; } .checkbox input:focus-visible + .box { outline: 2px solid var(--color-accent); outline-offset: 2px; } .switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .switch .track { width: 36px; height: 20px; flex: none; border-radius: 999px; position: relative; background: var(--color-neutral-300); transition: background 0.15s ease; } .switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.15s ease; } .switch input:checked + .track { background: var(--color-accent); } .switch input:checked + .track::after { transform: translateX(16px); } .switch input:focus-visible + .track { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* — progress — */ .progress { height: 8px; border-radius: 999px; background: var(--color-surface); overflow: hidden; } .progress-bar { height: 100%; border-radius: inherit; background: var(--gradient-brand); } .progress-bar.success { background: var(--color-success-500); } .progress-bar.danger { background: var(--color-danger-500); } /* — alert — */ .alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 13px; line-height: 1.5; } .alert svg { flex: none; margin-top: 2px; } .alert-title { display: block; font-weight: 700; font-size: 13px; margin-bottom: 2px; } .alert-info { background: var(--color-accent-100); color: var(--color-accent-800); } .alert-success { background: var(--color-success-100); color: var(--color-success-700); } .alert-warning { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } .alert-danger { background: var(--color-danger-100); color: var(--color-danger-700); } /* — tooltip — */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--color-ink); color: #fff; font-size: 12px; font-weight: 500; padding: 5px 9px; border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: var(--shadow-md); z-index: 10; transition: opacity 0.12s ease, transform 0.12s ease; } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* — avatar — */ .avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: #fff; background: var(--color-accent-600); } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-sm { width: 24px; height: 24px; font-size: 10px; } .avatar-lg { width: 44px; height: 44px; font-size: 15px; } .avatar-group { display: flex; } .avatar-group .avatar { margin-left: -8px; border: 2px solid var(--color-panel); } .avatar-group .avatar:first-child { margin-left: 0; } /* — accordion — native

, no script — */ .accordion-item { border-bottom: 1px solid var(--color-divider); } .accordion-item:first-child { border-top: 1px solid var(--color-divider); } .accordion-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-1); cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; } .accordion-trigger::-webkit-details-marker { display: none; } .accordion-trigger .chevron { flex: none; transition: transform 0.15s ease; } .accordion-item[open] .accordion-trigger .chevron { transform: rotate(180deg); } .accordion-content { padding: 0 var(--space-1) var(--space-3); font-size: 13px; opacity: 0.78; } /* — tabs — radio inputs drive panel + trigger state, no script — */ .tab-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .tab-list { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--color-divider); } .tab-trigger { padding: var(--space-2) 0; margin-bottom: -1px; font-size: 14px; font-weight: 600; color: var(--color-text); opacity: 0.6; border-bottom: 2px solid transparent; cursor: pointer; } .tab-trigger:hover { opacity: 0.85; } .tab-panel { display: none; padding-top: var(--space-4); font-size: 13px; } .tab-input:nth-of-type(1):checked ~ .tab-list .tab-trigger:nth-child(1), .tab-input:nth-of-type(2):checked ~ .tab-list .tab-trigger:nth-child(2), .tab-input:nth-of-type(3):checked ~ .tab-list .tab-trigger:nth-child(3), .tab-input:nth-of-type(4):checked ~ .tab-list .tab-trigger:nth-child(4) { opacity: 1; color: var(--color-accent-600); border-bottom-color: var(--color-accent); } .tab-input:nth-of-type(1):checked ~ .tab-panel:nth-of-type(1), .tab-input:nth-of-type(2):checked ~ .tab-panel:nth-of-type(2), .tab-input:nth-of-type(3):checked ~ .tab-panel:nth-of-type(3), .tab-input:nth-of-type(4):checked ~ .tab-panel:nth-of-type(4) { display: block; }