/* ══════════════════════════════════════════════════════════════════ Unitech Design System — tokens Ported from the Claude Design project `Homepage-Final.dc.html`. The source computed its palette at runtime from a THEMES object; here the two themes are static: light on :root, dark under [data-theme="dark"] on . ══════════════════════════════════════════════════════════════════ */ /* ── Webfonts: Vazirmatn (Persian + Latin), JetBrains Mono (technical) ── Both are variable fonts — one file per subset covers every weight. */ @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/vazirmatn-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/vazirmatn-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/vazirmatn-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ── Brand primitives ─────────────────────────────────────────── */ --red: #E31F26; /* Unitech red — the single accent */ --red-bright: #EE4A50; --red-deep: #C4161C; --red-ink: #B8171D; --navy: #1B3A6A; /* Unitech navy — primary surface colour */ --navy-deep: #12274A; --navy-ink: #0A2540; --navy-lift: #24497F; --navy-step: #27508A; --white: #FFFFFF; --ink-900: #060C17; /* dark page ground */ --ink-800: #0A1526; --ink-700: #050A12; --mist-50: #F6F9FC; /* light page ground */ --mist-100: #F4F7FB; --mist-200: #E9F0F8; --mist-300: #E3E8EE; --mist-400: #D5DDE8; --mist-500: #C7D2E4; --slate-600: #697386; --slate-700: #425466; --slate-800: #2A3140; /* ── Typography ───────────────────────────────────────────────── */ --font-fa: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* the source design is typed on a half-pixel scale — kept verbatim */ --fs-hero: 56px; --fs-h2: 42px; --fs-h2-cta: 36px; --fs-h3: 19px; --fs-lead: 17.5px; --fs-body: 16.5px; --fs-body-sm: 14.5px; --fs-card: 13.5px; --fs-meta: 12.5px; --fs-mono: 11.5px; --fs-micro: 10.5px; --lh-hero: 1.24; --lh-h2: 1.3; --lh-body: 1.95; --lh-card: 2; --tracking-hero: -0.03em; --tracking-h2: -0.025em; /* ── Layout ───────────────────────────────────────────────────── */ /* The source design has no border-box reset, so its `max-width: 1300px` is the CONTENT width and the 40px gutters sit outside it. This sheet is border-box throughout, so the shell carries the gutters inside and `--shell`/`--shell-hero` add them back. */ --container: 1300px; --container-hero: 1020px; --shell: calc(var(--container) + 2 * var(--gutter)); --shell-hero: calc(var(--container-hero) + 2 * var(--gutter)); --gutter: 40px; --nav-h: 80px; --nav-h-stuck: 62px; --section-y: 72px; --section-y-end: 76px; /* ── Radii, motion ────────────────────────────────────────────── */ --radius-7: 7px; --radius-9: 9px; --radius-10: 10px; --radius-12: 12px; --radius-14: 14px; --radius-16: 16px; --radius-18: 18px; --radius-pill: 100px; --ease: cubic-bezier(.22, .61, .36, 1); /* ══════════════════════════════════════════════════════════════ THEME — light (default) ══════════════════════════════════════════════════════════════ */ --page: #F6F9FC; --nav: #FFFFFFF2; /* opaque counterpart of --nav, for the full-width mobile menu panel: a translucent sheet works over a thin sticky bar, not over hero art */ --nav-solid: #FFFFFF; --s1: #FFFFFFF2; --s2: #F6F9FCF2; --deep: linear-gradient(160deg, #0A2540 0%, #1B3A6A 70%, #24497F 100%); --card: #FFFFFFF7; --cardh: #FFFFFF; --panel: #FFFFFFFA; --bd: #E3E8EE; --bd2: #D5DDE8; --bdw: #EDF1F6; --tx: #425466; --txs: #0A2540; --txm: #697386; --chip: #F6F9FC; --nvy: #1B3A6A; --ring: #C7D2E4; --cardShadow: 0 2px 5px -1px #32325d1a, 0 1px 3px -1px #0000001f; --cardShadowH: 0 13px 27px -5px #32325d40, 0 8px 16px -8px #0000002e; --shadow: 0 15px 35px #32325d1f, 0 5px 15px #00000014; --deepTx: #C7D6EA; --deepTxs: #FFFFFF; --deepBd: #FFFFFF2E; --quizCard: #FFFFFF; --quizBd: #E3E8EE; --quizTx: #697386; --quizTxs: #0A2540; --ctaBand: linear-gradient(160deg, #0A2540 0%, #1B3A6A 70%, #24497F 100%); --footer: #FFFFFFF7; --footerBd: #E3E8EE; --footerTx: #697386; --footerTxs: #0A2540; --eyebrow: #C4161C; /* Hero — the three frames underneath need a heavier scrim than a plain wash, so the veil, the graph paper and the centre bloom are each their own themed layer. */ --heroVeil: linear-gradient(150deg, #E4EDF9CC 0%, #F2F7FDBF 44%, #FBFDFFC7 76%, #FFFFFFD6 100%); --heroBloom: radial-gradient(46% 50% at 50% 42%, #FFFFFFE6 0%, #FFFFFFA6 42%, #FFFFFF00 74%); --heroGridLine: #1B3A6A14; --pillBg: #FFFFFFCC; --pillBd: #E3E8EE; /* Primary CTA */ --ctaBg: linear-gradient(180deg, #27508A 0%, #1B3A6A 100%); --ctaFg: #FFFFFF; /* Numbered badges, tags, pillar codes — one trio reused throughout */ --badge-bg: #E9F0F8; --badge-bd: #C6D8EE; --badge-tx: #1B3A6A; /* Model rail */ --lineGrad: linear-gradient(270deg, #5C8AC8 0%, #35619C 30%, #1B3A6A 58%, #8F2A2E 82%, #E31F26 100%); --step-active-bd: #EFB9BB; --step-ring: #F4F7FB; /* Quiz answer buttons */ --btn-idle-bg: #FFFFFF; --btn-idle-bd: #DDE4EE; --btn-idle-tx: #6E737B; --btn-yes-soft-bg: #EAF0F8; --btn-yes-soft-bd: #1B3A6A47; --btn-yes-soft-tx: #16305A; --btn-yes-bg: #1B3A6A; --btn-yes-bd: #1B3A6A; --btn-yes-tx: #FFFFFF; --btn-no-bg: #FDECEC; --btn-no-bd: #E9BDBF; --btn-no-tx: #B8171D; --ladder-on: #1B3A6A; /* Hero mesh — rgb triplets, so the canvas can apply its own alpha */ --net-link: 27, 58, 106; --net-hot: 227, 31, 38; /* Contact page — the masthead wash, and the form card's own ground */ --cmastWash: linear-gradient(150deg, #F0F5FB 0%, #F7FAFD 46%, #FDFEFF 78%, #FFFFFF 100%); --formCard: #F8FAFD; --formBd: #DCE4EE; --formPlaceholder: #8A93A0; --chipOn: #F2F6FC; --rolesDoc: #FAFCFE; --doneBg: #EAF5F1; --doneTx: #12795A; /* About page */ --amastBg: linear-gradient(180deg, #F1F6FC 0%, #F8FAFD 58%, #FFFFFF 100%); --amastPill: #FFFFFFD9; --s1-solid: #FFFFFF; --codeTx: #9AA7B8; --codeTxm: #A6B1BF; --lrowBd: #E0E6EF; } /* ══════════════════════════════════════════════════════════════════ THEME — dark ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --page: #060C17; --nav: #060C17E6; --nav-solid: #0B1626; --s1: #0A1526D4; --s2: #060C17D4; --deep: linear-gradient(180deg, #12274AE0 0%, #0A1526E0 100%); --card: #0B1626E6; --cardh: #101F35F2; --panel: #0B1626F2; --bd: #FFFFFF14; --bd2: #FFFFFF24; --bdw: #FFFFFF0D; --tx: #B9C6DA; --txs: #FFFFFF; --txm: #8FA3BF; --chip: #FFFFFF12; --nvy: #8FB4DA; --ring: #FFFFFF2E; --cardShadow: 0 1px 2px #00000033; --cardShadowH: 0 18px 40px #00000059; --shadow: 0 30px 70px #00000066; --deepTx: #C3D0E4; --deepTxs: #FFFFFF; --deepBd: #FFFFFF1F; --quizCard: #FFFFFF0F; --quizBd: #FFFFFF29; --quizTx: #C3D0E4; --quizTxs: #FFFFFF; --ctaBand: linear-gradient(180deg, #0A1526E0 0%, #1B3A6AE6 100%); --footer: #050A12E6; --footerBd: #FFFFFF14; --footerTx: #8FA3BF; --footerTxs: #FFFFFF; --eyebrow: #FF9A9F; --heroVeil: linear-gradient(150deg, #060C17E0 0%, #0A1526D9 44%, #060C17E6 100%); --heroBloom: radial-gradient(46% 50% at 50% 42%, #060C17D9 0%, #060C1799 42%, #060C1700 74%); --heroGridLine: #FFFFFF12; --pillBg: #FFFFFF0F; --pillBd: #FFFFFF24; --ctaBg: linear-gradient(180deg, #F2F6FC 0%, #DCE6F4 100%); --ctaFg: #12274A; --badge-bg: #1B3A6A47; --badge-bd: #6E9AD44D; --badge-tx: #AECAEA; --lineGrad: linear-gradient(270deg, #7FA8DC 0%, #4D79B4 30%, #2C4E82 58%, #B0343A 82%, #E31F26 100%); --step-active-bd: #E31F2680; --step-ring: #0A1526; --btn-idle-bg: #FFFFFF14; --btn-idle-bd: #FFFFFF2E; --btn-idle-tx: #C7D4E6; --btn-yes-soft-bg: #FFFFFF14; --btn-yes-soft-bd: #FFFFFF2E; --btn-yes-soft-tx: #C7D4E6; --btn-yes-bg: #FFFFFF; --btn-yes-bd: #FFFFFF; --btn-yes-tx: #12274A; --btn-no-bg: #E31F2633; --btn-no-bd: #E31F2680; --btn-no-tx: #FF9EA2; --ladder-on: #FFFFFF; --net-link: 150, 185, 230; --net-hot: 255, 105, 112; --cmastWash: linear-gradient(150deg, #0A1626 0%, #08111F 46%, #070E19 78%, #060C17 100%); --formCard: #0B1626F2; --formBd: #21324C; --formPlaceholder: #64748B; --chipOn: #14294A; --rolesDoc: #0D1B2FF2; --doneBg: #0E2A22; --doneTx: #4ED0A5; --amastBg: linear-gradient(180deg, #08101E 0%, #070D18 58%, #060C17 100%); --amastPill: #101F35E6; --s1-solid: #0A1526; --codeTx: #64748B; --codeTxm: #5C6B85; --lrowBd: #1A2942; }