/* ===================================================================== Yakclick — Brand Design System (tokens) --------------------------------------------------------------------- Direction: "the ledger". Ink on paper, ruled hairlines, running index numbers, tabular figures. One saturated blue (#2870E8, from the logo) spent on a few decisive moments; green (#1F8A5B) is reserved for "live / running / success". Everything else is ink and paper. Every token below is consumed by site.css, home.css and admin.css. Existing names (--yc-blue, --yc-surface, --yc-line …) are kept on purpose — admin.css relies on them. New tokens are additive. ===================================================================== */ /* ---- Self-hosted fonts only (no CDN; CSP-safe) ---- */ @font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/inter-400.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/inter-500.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/inter-600.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/inter-700.woff2") format("woff2"); } @font-face { font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/jakarta-700.woff2") format("woff2"); } @font-face { font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:800; font-display:swap; src:url("/fonts/jakarta-800.woff2") format("woff2"); } /* Metric-matched local fallbacks: while a webfont is still on the wire the page lays out in Arial scaled to the same advance widths and vertical metrics, so the swap does not reflow the hero (this was the largest layout shift on every throttled load). Values from fontaine/capsize. */ @font-face { font-family:"Inter Fallback"; src:local("Arial"), local("Liberation Sans"); size-adjust:107.12%; ascent-override:90.44%; descent-override:22.52%; line-gap-override:0%; } @font-face { font-family:"Jakarta Fallback"; src:local("Arial"), local("Liberation Sans"); size-adjust:104.5%; ascent-override:101%; descent-override:26.5%; line-gap-override:0%; } /* Vazirmatn carries Dari and Pashto (full Arabic-script coverage incl. Pashto letters) */ @font-face { font-family:"Vazirmatn"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/vazir-400.woff2") format("woff2"); unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0020-007F; } @font-face { font-family:"Vazirmatn"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/vazir-700.woff2") format("woff2"); unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0020-007F; } :root { color-scheme: light; /* ---- Brand ---- */ --yc-blue: #2870E8; --yc-blue-600: #1B54C0; --yc-blue-700: #163F94; --yc-blue-300: #6E9DF2; --yc-blue-tint: #EAF1FD; --yc-green: #1F8A5B; --yc-green-tint: #E6F4EC; /* Text-safe accents: the brand blue is 4.4:1 on paper and the green 4.3:1 on white, both a hair under AA for small type. These are what small accent TEXT uses; fills keep the brand values. */ --yc-blue-text: #1B54C0; --yc-green-text: #1B7D52; --yc-ink: #0F1520; /* ---- Paper & ink (light) ---- Paper is warm, not clinical white: #FBFAF7. Cards sit on pure white so they lift by a hair without a shadow. Ink is near-black with a whisper of blue. */ --yc-bg: #FBFAF7; --yc-paper: #FBFAF7; --yc-surface: #FFFFFF; --yc-surface-2: #F3F2EE; --yc-surface-3: #EAE9E3; --yc-text: #12151C; --yc-text-soft: #4A4F5B; --yc-text-faint: #626B7A; /* 4.8:1 on the tint band, 5.4:1 on white — the old #7C8290 failed AA everywhere */ --yc-line: #E1E0DA; --yc-line-soft: #ECEBE6; --yc-line-strong: #C9C8C1; --yc-ink-fg: #F4F5F7; /* text on ink */ --yc-ink-soft: #A8B2C3; /* muted text on ink */ --yc-ink-line: rgba(255,255,255,.10); /* ---- Semantic ---- */ --yc-success: var(--yc-green); --yc-warning: #B4791A; --yc-danger: #C6392E; /* ---- Gradients (kept for admin.css + product pages) ---- */ --yc-grad-accent: linear-gradient(135deg, var(--yc-blue) 0%, var(--yc-blue-300) 100%); --yc-grad-deep: linear-gradient(135deg, var(--yc-blue-600) 0%, var(--yc-blue) 100%); --yc-grad-card: linear-gradient(135deg, color-mix(in srgb, var(--yc-blue) 6%, var(--yc-surface)) 0%, var(--yc-surface) 58%); --yc-grad-band: linear-gradient(180deg, color-mix(in srgb, var(--yc-blue) 5%, var(--yc-surface-2)) 0%, var(--yc-surface-2) 46%); /* ---- Typography ---- */ --yc-font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --yc-font-head: "Plus Jakarta Sans", "Jakarta Fallback", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --yc-font-mono: ui-monospace, "Cascadia Code", "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, monospace; --yc-font-rtl: "Vazirmatn", "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif; /* Fluid type scale — a 1.2 minor-third at 360px growing to ~1.25 at 1440px. */ --yc-fs-2xs: 0.75rem; /* 12 */ --yc-fs-xs: 0.8125rem; /* 13 */ --yc-fs-sm: 0.9375rem; /* 15 */ --yc-fs-base: 1rem; /* 16 */ --yc-fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17–19 */ --yc-fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* 20–24 */ --yc-fs-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); /* 24–32 */ --yc-fs-3xl: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem); /* 30–44 */ --yc-fs-4xl: clamp(2.375rem, 1.6rem + 3.2vw, 4.25rem); /* 38–68 */ --yc-fs-5xl: clamp(2.75rem, 1.5rem + 5vw, 5.75rem); /* 44–92 display */ --yc-lh-tight: 1.02; --yc-lh-snug: 1.15; --yc-lh-body: 1.6; --yc-track-display: -0.035em; --yc-track-head: -0.022em; --yc-track-label: 0.12em; /* ---- Spacing (4px base) ---- */ --yc-sp-1: 4px; --yc-sp-2: 8px; --yc-sp-3: 12px; --yc-sp-4: 16px; --yc-sp-5: 20px; --yc-sp-6: 24px; --yc-sp-8: 32px; --yc-sp-10: 40px; --yc-sp-12: 48px; --yc-sp-16: 64px; --yc-section: clamp(64px, 9vw, 136px); /* vertical rhythm between bands */ --yc-section-sm: clamp(40px, 6vw, 88px); --yc-gutter: clamp(20px, 4vw, 64px); --yc-container: 1440px; --yc-container-narrow: 880px; --yc-measure: 62ch; /* ---- Shape ---- */ --yc-radius-xs: 4px; --yc-radius-sm: 8px; --yc-radius: 12px; --yc-radius-lg: 20px; --yc-radius-xl: 28px; --yc-radius-pill: 999px; /* ---- Elevation: hairlines first, shadows only for floating things ---- */ --yc-shadow-sm: 0 1px 2px rgba(18,21,28,.05); --yc-shadow: 0 4px 14px rgba(18,21,28,.07), 0 1px 3px rgba(18,21,28,.05); --yc-shadow-lg: 0 28px 70px rgba(18,21,28,.14), 0 4px 12px rgba(18,21,28,.06); --yc-shadow-blue: 0 14px 34px rgba(40,112,232,.26); /* ---- Motion ---- */ --yc-ease: cubic-bezier(.22,.61,.36,1); --yc-ease-out: cubic-bezier(.16,1,.3,1); --yc-ease-in: cubic-bezier(.7,0,.84,0); --yc-dur-fast: 140ms; --yc-dur: 240ms; --yc-dur-slow: 560ms; --yc-reveal-y: 22px; /* pass 5 — motion system */ --yc-ease-spring: cubic-bezier(.34,1.4,.64,1); /* small overshoot: press states, tab indicator */ --yc-ease-magnet: cubic-bezier(.2,.8,.2,1); /* magnetic buttons returning home */ --yc-dur-reveal: 720ms; /* clip / mask reveals (longer than a fade) */ --yc-stagger: 70ms; /* ---- Focus ring ---- */ --yc-focus: 0 0 0 3px var(--yc-bg), 0 0 0 5px var(--yc-blue); /* ---- Bootstrap 5 overrides (admin + legacy) ---- */ --bs-primary: var(--yc-blue); --bs-primary-rgb: 40,112,232; --bs-link-color: var(--yc-blue-600); --bs-link-hover-color: var(--yc-blue-700); --bs-body-font-family: var(--yc-font-sans); --bs-body-color: var(--yc-text); --bs-body-bg: var(--yc-bg); --bs-border-color: var(--yc-line); --bs-border-radius: var(--yc-radius); } /* ---- Dark: deep ink, not grey. Blue lifts a step for contrast on dark. ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --yc-bg: #0B0F17; --yc-paper: #0B0F17; --yc-surface: #121826; --yc-surface-2: #182033; --yc-surface-3: #202A40; --yc-text: #EEF1F7; --yc-text-soft: #B4BDCD; --yc-text-faint: #7F8A9E; --yc-line: #26304A; --yc-line-soft: #1D2538; --yc-line-strong:#354162; --yc-blue: #4E86F0; --yc-blue-600: #6E9DF2; --yc-blue-700: #8AB0F6; --yc-blue-tint: #16223D; --yc-green: #3FBF86; --yc-green-tint: #12291F; --yc-blue-text: #7FAAF5; --yc-green-text: #4FCB95; --yc-ink: #05080E; --yc-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --yc-shadow: 0 4px 14px rgba(0,0,0,.45); --yc-shadow-lg: 0 28px 70px rgba(0,0,0,.6); --yc-shadow-blue:0 14px 34px rgba(78,134,240,.32); --bs-primary-rgb: 78,134,240; --bs-body-color: #EEF1F7; --bs-body-bg: #0B0F17; } } :root[data-theme="dark"] { color-scheme: dark; --yc-bg: #0B0F17; --yc-paper: #0B0F17; --yc-surface: #121826; --yc-surface-2: #182033; --yc-surface-3: #202A40; --yc-text: #EEF1F7; --yc-text-soft: #B4BDCD; --yc-text-faint: #7F8A9E; --yc-line: #26304A; --yc-line-soft: #1D2538; --yc-line-strong:#354162; --yc-blue: #4E86F0; --yc-blue-600: #6E9DF2; --yc-blue-700: #8AB0F6; --yc-blue-tint: #16223D; --yc-green: #3FBF86; --yc-blue-text:#7FAAF5; --yc-green-text:#4FCB95; --yc-green-tint: #12291F; --yc-ink: #05080E; --yc-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --yc-shadow: 0 4px 14px rgba(0,0,0,.45); --yc-shadow-lg: 0 28px 70px rgba(0,0,0,.6); --yc-shadow-blue:0 14px 34px rgba(78,134,240,.32); --bs-primary-rgb: 78,134,240; --bs-body-color: #EEF1F7; --bs-body-bg: #0B0F17; } :root[data-theme="light"] { color-scheme: light; --yc-bg:#FBFAF7; --yc-paper:#FBFAF7; --yc-surface:#FFFFFF; --yc-surface-2:#F3F2EE; --yc-surface-3:#EAE9E3; --yc-text:#12151C; --yc-text-soft:#4A4F5B; --yc-text-faint:#626B7A; --yc-line:#E1E0DA; --yc-line-soft:#ECEBE6; --yc-line-strong:#C9C8C1; --yc-blue:#2870E8; --yc-blue-600:#1B54C0; --yc-blue-700:#163F94; --yc-blue-tint:#EAF1FD; --yc-green:#1F8A5B; --yc-blue-text:#1B54C0; --yc-green-text:#1B7D52; --yc-green-tint:#E6F4EC; --yc-ink:#0F1520; --yc-shadow-sm:0 1px 2px rgba(18,21,28,.05); --yc-shadow:0 4px 14px rgba(18,21,28,.07), 0 1px 3px rgba(18,21,28,.05); --yc-shadow-lg:0 28px 70px rgba(18,21,28,.14), 0 4px 12px rgba(18,21,28,.06); --yc-shadow-blue:0 14px 34px rgba(40,112,232,.26); --bs-primary-rgb:40,112,232; --bs-body-color:#12151C; --bs-body-bg:#FBFAF7; } /* ---- Motion off: collapse every duration, keep state changes instant ---- Keyed off , never off the OS prefers-reduced-motion query: motion on this site is on by default and only the footer switch turns it off. See the contract at the top of js/site.js and the pre-paint script in Views/Shared/_Layout.cshtml. ---- */ :root[data-motion="off"] { --yc-dur-fast: 0ms; --yc-dur: 0ms; --yc-dur-slow: 0ms; --yc-dur-reveal: 0ms; --yc-stagger: 0ms; --yc-reveal-y: 0px; } /* ---- Scrollbars --------------------------------------------------------------- One thin rail everywhere: the page, any scrolling panel, and the horizontal rails (sliders, tab strips). The colours are token references, so both themes follow without a second set of rules. Styling lives in site.css. ---- */ :root { --yc-scroll-size: 8px; --yc-scroll-track: transparent; --yc-scroll-thumb: color-mix(in srgb, var(--yc-line-strong) 88%, transparent); --yc-scroll-thumb-hover: var(--yc-text-faint); --yc-scroll-radius: 999px; }