/* ============================================================ VARISYA — design system Three directions × light/dark, driven by data attributes: Accent can be overridden inline (--accent) by the Tweaks panel. ============================================================ */ /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1; transition: background-color .5s ease, color .5s ease; } img { display: block; max-width: 100%; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } ::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); } /* ============================================================ TOKENS — defaults (overridden per direction below) ============================================================ */ :root { --maxw: 1180px; --gutter: 40px; --font-display: "Newsreader", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --radius-sm: 4px; --radius: 8px; --radius-lg: 16px; --ease: cubic-bezier(.4, 0, .15, 1); } /* ---------- LEDGER (editorial / ink-on-paper) ---------- */ [data-direction="ledger"] { --font-display: "Newsreader", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "IBM Plex Mono", monospace; --radius-sm: 2px; --radius: 4px; --radius-lg: 8px; --display-weight: 500; --display-spacing: -0.018em; --display-style: normal; --eyebrow-spacing: 0.18em; --shadow: 0 1px 2px rgba(30,25,18,.05); --shadow-lg: 0 18px 50px -24px rgba(30,25,18,.30); --card-border-w: 1px; } [data-direction="ledger"][data-mode="light"] { --bg: #FBFAF6; --surface: #FFFFFF; --surface-2: #F4F1EA; --ink: #1B1A17; --ink-soft: #4A463F; --ink-faint: #8C8579; --line: #E5E0D5; --line-strong: #D7D0C1; --accent: #7A2230; --accent-ink: #FFFFFF; --accent-soft: #F5E8E7; --recommend-bg: #1B1A17; --recommend-ink: #FBFAF6; } [data-direction="ledger"][data-mode="dark"] { --bg: #15130E; --surface: #1F1C16; --surface-2: #29251C; --ink: #F3EFE6; --ink-soft: #BFB8A8; --ink-faint: #847C6C; --line: #322D23; --line-strong: #443E30; --accent: #CB7079; --accent-ink: #1B1A17; --accent-soft: #2C2018; --recommend-bg: #F3EFE6; --recommend-ink: #15130E; --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 22px 60px -26px rgba(0,0,0,.7); } /* ---------- ENTERPRISE (technical / trustworthy) ---------- */ [data-direction="enterprise"] { --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", monospace; --radius-sm: 6px; --radius: 11px; --radius-lg: 18px; --display-weight: 600; --display-spacing: -0.022em; --display-style: normal; --eyebrow-spacing: 0.14em; --shadow: 0 1px 2px rgba(13,20,34,.06), 0 2px 6px rgba(13,20,34,.04); --shadow-lg: 0 28px 60px -30px rgba(13,20,34,.34); --card-border-w: 1px; } [data-direction="enterprise"][data-mode="light"] { --bg: #F5F7FA; --surface: #FFFFFF; --surface-2: #EDF1F6; --ink: #0D1422; --ink-soft: #46506A; --ink-faint: #8A93A8; --line: #E2E7EF; --line-strong: #D2D9E4; --accent: #2C49F0; --accent-ink: #FFFFFF; --accent-soft: #E8ECFE; --recommend-bg: #0D1422; --recommend-ink: #F5F7FA; } [data-direction="enterprise"][data-mode="dark"] { --bg: #0A0E18; --surface: #121826; --surface-2: #1A2234; --ink: #EAEEF6; --ink-soft: #97A3BC; --ink-faint: #5C6883; --line: #222B3E; --line-strong: #303A52; --accent: #6E86FF; --accent-ink: #0A0E18; --accent-soft: #161E33; --recommend-bg: #EAEEF6; --recommend-ink: #0A0E18; --shadow: 0 1px 2px rgba(0,0,0,.5); --shadow-lg: 0 30px 64px -30px rgba(0,0,0,.75); } /* ---------- ATELIER (warm premium / quiet luxury) ---------- */ [data-direction="atelier"] { --font-display: "Spectral", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "IBM Plex Mono", monospace; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --display-weight: 500; --display-spacing: -0.01em; --display-style: normal; --eyebrow-spacing: 0.2em; --shadow: 0 2px 4px rgba(40,30,18,.05); --shadow-lg: 0 30px 70px -34px rgba(60,40,20,.34); --card-border-w: 1px; } [data-direction="atelier"][data-mode="light"] { --bg: #F1EBE1; --surface: #FBF7F0; --surface-2: #E9E0D2; --ink: #211C16; --ink-soft: #574E42; --ink-faint: #9B8E7C; --line: #DDD2C2; --line-strong: #CDBFAB; --accent: #B0542F; --accent-ink: #FBF7F0; --accent-soft: #EFE1D4; --recommend-bg: #211C16; --recommend-ink: #F1EBE1; } [data-direction="atelier"][data-mode="dark"] { --bg: #19150F; --surface: #231E17; --surface-2: #2E2719; --ink: #F1E9DC; --ink-soft: #C3B6A2; --ink-faint: #897B66; --line: #352D21; --line-strong: #483D2C; --accent: #D67E52; --accent-ink: #19150F; --accent-soft: #2A2114; --recommend-bg: #F1E9DC; --recommend-ink: #19150F; --shadow: 0 2px 4px rgba(0,0,0,.4); --shadow-lg: 0 32px 72px -34px rgba(0,0,0,.7); } /* ============================================================ LAYOUT PRIMITIVES ============================================================ */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(72px, 9vw, 132px); } .section--tight { padding-block: clamp(48px, 6vw, 84px); } .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--eyebrow-spacing); text-transform: uppercase; color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); opacity: .6; } .eyebrow--center::before { display: none; } h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); line-height: 1.04; color: var(--ink); text-wrap: balance; } .display { font-size: clamp(40px, 6.4vw, 82px); line-height: 1.0; } .display em { font-style: italic; font-weight: inherit; color: var(--accent); } [data-direction="enterprise"] .display em { font-style: normal; } .h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; } .h3 { font-size: clamp(20px, 2vw, 25px); line-height: 1.18; letter-spacing: -0.01em; } .lede { font-size: clamp(17px, 1.45vw, 20px); color: var(--ink-soft); line-height: 1.6; max-width: 56ch; text-wrap: pretty; } .muted { color: var(--ink-soft); } .faint { color: var(--ink-faint); } .mono { font-family: var(--font-mono); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; padding: 13px 22px; border-radius: var(--radius); border: 1px solid transparent; transition: transform .18s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); } .btn--primary:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn--ghost:hover { border-color: var(--ink); background: var(--surface-2); } .btn--ink { background: var(--ink); color: var(--bg); } .btn--ink:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); } .btn--sm { padding: 9px 15px; font-size: 13.5px; } .btn--lg { padding: 16px 28px; font-size: 16px; } .btn .arrow { transition: transform .22s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s ease, background-color .3s ease; } .nav.is-stuck { border-color: var(--line); } .nav__inner { max-width: var(--maxw); margin-inline: auto; padding: 15px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav__links { display: flex; align-items: center; gap: 30px; } .nav__link { font-size: 14.5px; color: var(--ink-soft); font-weight: 500; position: relative; transition: color .18s ease; } .nav__link:hover { color: var(--ink); } .nav__link::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 1.5px; width: 0; background: var(--accent); transition: width .22s var(--ease); } .nav__link:hover::after { width: 100%; } .nav__right { display: flex; align-items: center; gap: 14px; } @media (max-width: 860px) { .nav__links { display: none; } } /* Wordmark */ .wordmark { display: inline-flex; align-items: center; gap: 11px; } .wordmark__mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--accent); } .wordmark__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 22px; letter-spacing: -0.01em; color: var(--ink); } [data-direction="enterprise"] .wordmark__name { font-weight: 600; letter-spacing: -0.03em; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; overflow: hidden; padding-top: clamp(60px, 8vw, 104px); } .hero__grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 64px; align-items: center; } @media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: 44px; } } .hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--ink-soft); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; align-items: center; } .hero__note { font-size: 13.5px; color: var(--ink-faint); margin-top: 18px; } /* Hero visual — a stylised product window */ .hero__visual { position: relative; } .window { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .window__bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .window__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--line-strong); } .window__title { margin-left: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); } .window__body { padding: 18px; display: grid; gap: 12px; } .statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; background: var(--bg); } .stat__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .stat__v { font-family: var(--font-mono); font-size: 22px; color: var(--ink); margin-top: 6px; font-weight: 500; } .stat__v small { color: var(--accent); font-size: 13px; } .ledger-lines { display: grid; gap: 9px; padding-top: 4px; } .ledger-line { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding-bottom: 9px; border-bottom: 1px dashed var(--line); } .ledger-line:last-child { border-bottom: none; } .ll-label { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-soft); } .ll-chip { width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; } .ll-chip svg { width: 13px; height: 13px; } .ll-amt { font-family: var(--font-mono); font-size: 13px; color: var(--ink); white-space: nowrap; } .float-badge { position: absolute; left: -18px; bottom: -20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 12px 15px; display: flex; align-items: center; gap: 11px; } @media (max-width: 520px){ .float-badge { display: none; } } .float-badge .dot { width: 9px; height: 9px; border-radius: 999px; background: #2BB673; box-shadow: 0 0 0 4px color-mix(in srgb,#2BB673 22%,transparent); } .float-badge b { font-size: 13.5px; } .float-badge span { font-size: 12px; color: var(--ink-faint); } /* ============================================================ MARQUEE / TRUST STRIP ============================================================ */ .strip { border-block: 1px solid var(--line); background: var(--surface); } .strip__inner { max-width: var(--maxw); margin-inline: auto; padding: 22px var(--gutter); display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: space-between; } .strip__label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } .strip__items { display: flex; gap: 28px; flex-wrap: wrap; } .strip__item { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-soft); font-weight: 500; } .strip__item svg { width: 17px; height: 17px; color: var(--accent); } /* ============================================================ SECTION HEADER ============================================================ */ .shead { max-width: 640px; } .shead--center { margin-inline: auto; text-align: center; } .shead .h2 { margin-top: 16px; } .shead .lede { margin-top: 18px; } .shead--center .lede { margin-inline: auto; } /* ============================================================ PRODUCTS ============================================================ */ .products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 52px; } @media (max-width: 760px){ .products { grid-template-columns: 1fr; } } .pcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 28px 26px; overflow: hidden; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } .pcard:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-lg); } .pcard__top { display: flex; align-items: center; justify-content: space-between; } .pcard__icon { width: 46px; height: 46px; border-radius: var(--radius); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); transition: background-color .25s, color .25s; } .pcard:hover .pcard__icon { background: var(--accent); color: var(--accent-ink); } .pcard__icon svg { width: 23px; height: 23px; } .pcard__num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); letter-spacing: .05em; } .pcard__name { margin-top: 20px; font-family: var(--font-display); font-size: 24px; font-weight: var(--display-weight); letter-spacing: -0.01em; } .pcard__desc { margin-top: 9px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; } .pcard__tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; } .minitag { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; } /* ============================================================ MODEL (two columns: customization + support) + included grid ============================================================ */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 50px; } @media (max-width: 820px){ .split { grid-template-columns: 1fr; } } .feat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; } .feat__icon { width: 44px; height: 44px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; } .feat__icon svg { width: 22px; height: 22px; } .feat__title { margin-top: 20px; font-family: var(--font-display); font-size: 23px; font-weight: var(--display-weight); } .feat__body { margin-top: 10px; font-size: 15px; color: var(--ink-soft); } .incl { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; } @media (max-width: 820px){ .incl { grid-template-columns: 1fr; } } .incl__panel { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 30px; background: var(--surface); } .incl__panel--alt { background: var(--surface-2); } .incl__h { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); } .incl__list { margin-top: 18px; display: grid; gap: 13px; } .incl__item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--ink-soft); } .incl__item b { color: var(--ink); font-weight: 600; } .tick, .cost { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; flex: none; margin-top: 1px; } .tick { background: var(--accent-soft); color: var(--accent); } .cost { background: var(--surface-2); color: var(--ink-faint); border: 1px solid var(--line); } .incl__panel--alt .cost { background: var(--surface); } .tick svg, .cost svg { width: 12px; height: 12px; } /* ============================================================ PRICING ============================================================ */ .pricing__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .layout-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 2px; } .layout-toggle button { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; color: var(--ink-faint); font-weight: 500; transition: all .2s var(--ease); } .layout-toggle button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } /* --- Cards layout --- */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; align-items: start; } @media (max-width: 920px){ .tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } } .tier { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px; display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .tier--reco { border-color: transparent; box-shadow: var(--shadow-lg); outline: 1.5px solid var(--accent); outline-offset: -1.5px; } @media (min-width: 921px){ .tier--reco { transform: scale(1.035); } .tier--reco:hover { transform: scale(1.035) translateY(-4px); } } .tier__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; font-weight: 500; white-space: nowrap; } .tier__name { font-family: var(--font-display); font-size: 22px; font-weight: var(--display-weight); } .tier__for { margin-top: 6px; font-size: 13.5px; color: var(--ink-faint); min-height: 38px; } .tier__price { margin-top: 18px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; } .tier__amt { font-family: var(--font-mono); font-size: 34px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; } .tier__per { font-size: 13.5px; color: var(--ink-faint); } .tier__from { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); height: 16px; } .tier__cta { margin-top: 22px; } .tier__cta .btn { width: 100%; } .tier__feats { margin-top: 24px; display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 22px; } .tier__feat { display: grid; grid-template-columns: 20px 1fr; gap: 11px; font-size: 14px; color: var(--ink-soft); align-items: start; } .tier__feat b { color: var(--ink); font-weight: 600; } .tier__feat .tick { width: 19px; height: 19px; } .tier__feat .tick svg { width: 11px; height: 11px; } /* --- Comparison table layout --- */ .compare { margin-top: 44px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); } .compare__scroll { overflow-x: auto; } table.ctable { width: 100%; border-collapse: collapse; min-width: 720px; } .ctable th, .ctable td { text-align: left; padding: 18px 22px; vertical-align: top; border-bottom: 1px solid var(--line); } .ctable thead th { position: sticky; top: 0; background: var(--surface); } .ctable thead .c-axis { width: 26%; } .ctable .c-tier { font-family: var(--font-display); font-size: 19px; font-weight: var(--display-weight); } .ctable .c-reco-col { background: var(--accent-soft); } .ctable .c-price { font-family: var(--font-mono); font-size: 15px; color: var(--ink); margin-top: 4px; font-weight: 500; } .ctable .c-per { color: var(--ink-faint); font-size: 12px; } .ctable .c-axis-label { font-weight: 600; color: var(--ink); font-size: 14px; } .ctable .c-axis-sub { color: var(--ink-faint); font-size: 12.5px; margin-top: 3px; font-family: var(--font-mono); letter-spacing: .03em; } .ctable td { font-size: 14px; color: var(--ink-soft); } .ctable td b { color: var(--ink); font-weight: 600; } .ctable tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); } .ctable tbody tr:hover td.c-reco-col { background: var(--accent-soft); } .ctable .c-badge { display: inline-block; margin-top: 6px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; } .ctable tfoot td { border-bottom: none; padding-top: 22px; } .pricing__notes { margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 820px){ .pricing__notes { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px){ .pricing__notes { grid-template-columns: 1fr; } } .pnote { display: flex; gap: 11px; align-items: start; font-size: 13px; color: var(--ink-soft); line-height: 1.5; } .pnote svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 2px; } /* ============================================================ CTA BAND ============================================================ */ .ctaband { position: relative; overflow: hidden; } .ctaband__inner { background: var(--recommend-bg); color: var(--recommend-ink); border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 76px); display: grid; grid-template-columns: 1.2fr auto; gap: 40px; align-items: center; position: relative; overflow: hidden; } @media (max-width: 760px){ .ctaband__inner { grid-template-columns: 1fr; gap: 28px; } } .ctaband h2 { color: var(--recommend-ink); font-size: clamp(28px, 3.6vw, 44px); } .ctaband p { color: color-mix(in srgb, var(--recommend-ink) 72%, transparent); margin-top: 14px; font-size: 16px; max-width: 46ch; } .ctaband__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .btn--on-dark { background: var(--recommend-ink); color: var(--recommend-bg); } .btn--on-dark:hover { transform: translateY(-1px); } .ctaband__email { font-family: var(--font-mono); font-size: 13px; color: color-mix(in srgb, var(--recommend-ink) 64%, transparent); text-align: center; } .ctaband__email a { color: var(--recommend-ink); border-bottom: 1px solid color-mix(in srgb, var(--recommend-ink) 40%, transparent); } .glow { position: absolute; width: 460px; height: 460px; border-radius: 999px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent), transparent 68%); right: -120px; top: -160px; pointer-events: none; opacity: .55; } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--line); } .footer__inner { max-width: var(--maxw); margin-inline: auto; padding: 56px var(--gutter) 44px; } .footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; } @media (max-width: 760px){ .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; } } .footer__about { font-size: 14px; color: var(--ink-soft); margin-top: 18px; max-width: 34ch; line-height: 1.6; } .footer__col h4 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; } .footer__col ul { list-style: none; margin-top: 16px; display: grid; gap: 11px; } .footer__col a { font-size: 14px; color: var(--ink-soft); transition: color .18s; } .footer__col a:hover { color: var(--accent); } .footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer__bottom span { font-size: 12.5px; color: var(--ink-faint); } /* ============================================================ MODAL ============================================================ */ .modal-root { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; } .modal-scrim { position: absolute; inset: 0; background: color-mix(in srgb, #0a0a0a 56%, transparent); backdrop-filter: blur(4px); } .modal { position: relative; width: min(520px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 34px; animation: pop .34s var(--ease); max-height: 92vh; overflow-y: auto; } @keyframes pop { from { transform: translateY(14px) scale(.985); } to { transform: none; } } .modal__close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: var(--ink-faint); transition: background .18s, color .18s; } .modal__close:hover { background: var(--surface-2); color: var(--ink); } .modal__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .modal h3 { margin-top: 12px; font-size: 26px; } .modal__sub { margin-top: 10px; font-size: 14.5px; color: var(--ink-soft); } .form { margin-top: 24px; display: grid; gap: 15px; } .field { display: grid; gap: 7px; } .field label { font-size: 13px; font-weight: 600; color: var(--ink); } .field label .req { color: var(--accent); } .field input, .field textarea, .field select { font: inherit; font-size: 14.5px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); transition: border-color .18s, box-shadow .18s; width: 100%; } .field textarea { resize: vertical; min-height: 84px; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .field.row2 { grid-template-columns: 1fr 1fr; display: grid; gap: 12px; } .field--err input, .field--err textarea { border-color: #D14343; } .field__err { font-size: 12px; color: #D14343; } .modal__foot { margin-top: 22px; } .modal__foot .btn { width: 100%; } .modal__fine { margin-top: 14px; font-size: 12px; color: var(--ink-faint); text-align: center; } .modal__success { text-align: center; padding: 14px 0; } .modal__success .ok { width: 64px; height: 64px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 20px; } .modal__success .ok svg { width: 30px; height: 30px; } /* reveal-on-scroll — neutralised: content is always visible. (Entrance animations are intentionally omitted; the preview engine freezes CSS animations, so "animate from hidden" would risk blank sections.) */ .reveal { opacity: 1; } /* utility */ .center { text-align: center; } .mt-s { margin-top: 14px; } .mt-m { margin-top: 26px; } .mt-l { margin-top: 44px; } .divider { height: 1px; background: var(--line); border: none; }