/* ========================================================================== Karnaa — landing page styles Themes: [data-theme="light"] / [data-theme="dark"] on Direction: [dir="rtl"] on for Persian ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root { /* Brand constants — identical in both themes */ --forest: #072A1B; --forest-2: #0C3A26; --forest-3: #0F4A31; --gold: #E9B44C; --gold-soft: #F2C976; --gold-deep: #C08320; --green: #2F7D52; --green-soft: #4FA476; /* Type */ --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fs-hero: clamp(2.25rem, 1.35rem + 3.9vw, 4.1rem); --fs-h2: clamp(1.65rem, 1.1rem + 2.2vw, 2.6rem); --fs-h3: clamp(1.05rem, .95rem + .45vw, 1.3rem); --fs-lede: clamp(.98rem, .93rem + .28vw, 1.12rem); --fs-body: .95rem; --fs-small: .82rem; /* Space & shape */ --wrap: 1200px; --gut: clamp(1.15rem, 4vw, 2.5rem); --sec-y: clamp(3.5rem, 7vw, 6.5rem); --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px; --ease: cubic-bezier(.22, .61, .36, 1); } /* Light is the *default*, not a variant. With JavaScript off no data-theme attribute is ever set, so the tokens must resolve without one. */ :root, [data-theme="light"] { --bg: #F5F4EF; --surface: #FFFFFF; --surface-2: #FBFAF6; --soft: #FBFAF5; /* alternating section background */ --ink: #0E1F17; --ink-2: #56675D; --ink-3: #7C8A82; --line: #E3E1D8; --line-soft: #EEEDE6; --shadow: 0 1px 2px rgba(7, 42, 27, .05), 0 10px 30px -12px rgba(7, 42, 27, .16); --shadow-lg: 0 24px 60px -24px rgba(7, 42, 27, .3); --accent-green: var(--green); /* eyebrows, ticks, stat icons */ --num: var(--gold-deep); /* package number ring */ } /* Explicit dark choice from the toggle. */ [data-theme="dark"] { --bg: #05170F; --surface: #0B261A; --surface-2: #0E2E20; --soft: #0E2E20; --ink: #E9F1EB; --ink-2: #9FB4A8; --ink-3: #7D9188; --line: rgba(255, 255, 255, .11); --line-soft: rgba(255, 255, 255, .07); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 34px -14px rgba(0, 0, 0, .6); --shadow-lg: 0 26px 64px -26px rgba(0, 0, 0, .75); --accent-green: var(--green-soft); --num: var(--gold); } /* No JavaScript, but the visitor's OS prefers dark. The :not() means an explicit choice from the toggle always wins over the system preference. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #05170F; --surface: #0B261A; --surface-2: #0E2E20; --soft: #0E2E20; --ink: #E9F1EB; --ink-2: #9FB4A8; --ink-3: #7D9188; --line: rgba(255, 255, 255, .11); --line-soft: rgba(255, 255, 255, .07); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 34px -14px rgba(0, 0, 0, .6); --shadow-lg: 0 26px 64px -26px rgba(0, 0, 0, .75); --accent-green: var(--green-soft); --num: var(--gold); } } /* Per-script font fallbacks */ [lang="fa"] { --font: "Vazirmatn", "IRANSans", Tahoma, sans-serif; } [lang="zh-Hans"] { --font: "Plus Jakarta Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; } [lang="hi"] { --font: "Plus Jakarta Sans", "Noto Sans Devanagari", "Nirmala UI", system-ui, sans-serif; } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-block-start: 90px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } h1, h2, h3 { line-height: 1.15; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Icons: stroke-based, inherit colour */ .ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .skip-link { position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 200; background: var(--gold); color: var(--forest); padding: .7rem 1.1rem; border-radius: var(--r-sm); font-weight: 700; transition: top .2s var(--ease); } .skip-link:focus { top: 1rem; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } /* ---------- 3. Shared pieces ---------- */ .eyebrow { font-size: var(--fs-small); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .eyebrow-gold { color: var(--gold); } .eyebrow-green { color: var(--accent-green); text-align: center; } .section { padding-block: var(--sec-y); } .section-title { font-size: var(--fs-h2); text-align: center; margin-block: .5rem 0; } .section-lede { text-align: center; color: var(--ink-2); font-size: var(--fs-lede); max-width: 62ch; margin: 1rem auto 0; } .accent { color: var(--gold); font-style: normal; position: relative; display: inline-block; } .underline { display: block; width: 100%; height: 10px; margin-block-start: -2px; fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; } /* Buttons */ .btn { --btn-py: .85rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: var(--btn-py) 1.35rem; border-radius: var(--r-sm); font-weight: 700; font-size: .92rem; line-height: 1.2; border: 1.5px solid transparent; transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); text-align: center; } .btn .ic { width: 1.05em; height: 1.05em; stroke-width: 2; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-gold { background: var(--gold); color: #17321F; box-shadow: 0 8px 22px -10px rgba(233, 180, 76, .8); } .btn-gold:hover { background: var(--gold-soft); } .btn-ghost { border-color: currentColor; color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--bg); } .btn-outline { border-color: rgba(255, 255, 255, .35); color: #fff; } .btn-outline:hover { border-color: var(--gold); color: var(--gold); } .btn-sm { --btn-py: .6rem; padding-inline: 1.05rem; font-size: .87rem; } .btn-block { width: 100%; } /* Arrows point the other way in RTL */ [dir="rtl"] .btn .ic { transform: scaleX(-1); } /* ---------- 4. Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--forest) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block-end: 1px solid rgba(255, 255, 255, .07); } .header-inner { display: flex; align-items: center; gap: 1rem; min-height: 72px; } .brand { display: inline-flex; align-items: center; gap: .6rem; flex: none; } .brand-mark { width: 34px; height: 34px; color: var(--gold); } .brand-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: #fff; } .nav { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.6rem); margin-inline: auto; } .nav-link { position: relative; color: rgba(255, 255, 255, .78); font-size: .9rem; font-weight: 600; padding-block: .5rem; transition: color .18s var(--ease); } .nav-link:hover { color: #fff; } .nav-link.is-active { color: var(--gold); } .nav-link.is-active::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--gold); border-radius: 2px; } .header-actions { display: flex; align-items: center; gap: .5rem; flex: none; } .theme-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-pill); color: rgba(255, 255, 255, .85); font-size: .78rem; font-weight: 600; transition: border-color .18s var(--ease), color .18s var(--ease); } .theme-btn:hover { border-color: var(--gold); color: var(--gold); } .theme-btn .ic { width: 1rem; height: 1rem; } .menu-btn { display: none; color: #fff; padding: .4rem; } .menu-btn .ic { width: 1.5rem; height: 1.5rem; } /* ---------- 5. Hero ---------- */ .hero { position: relative; background: linear-gradient(178deg, var(--forest) 0%, #04180F 100%); color: #fff; padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; overflow: hidden; } .hero-glow { position: absolute; inset-inline-end: -10%; top: -15%; width: min(760px, 90vw); aspect-ratio: 1; background: radial-gradient(circle, rgba(47, 125, 82, .38) 0%, transparent 62%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .hero-title { font-size: var(--fs-hero); margin-block-start: 1rem; letter-spacing: -.035em; } .hero-title span, .hero-title em { display: block; } .hero-title .underline { max-width: 6.5ch; } .hero-lede { margin-block-start: 1.5rem; max-width: 46ch; color: rgba(255, 255, 255, .76); font-size: var(--fs-lede); } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 2rem; } .hero .btn-ghost { border-color: rgba(255, 255, 255, .4); color: #fff; } .hero .btn-ghost:hover { background: #fff; color: var(--forest); } .trust { display: flex; align-items: center; gap: .85rem; margin-block-start: 2.25rem; flex-wrap: wrap; } .avatars { display: flex; } .avatar { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--forest); margin-inline-start: -10px; background: radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .95) 0 22%, transparent 23%), radial-gradient(ellipse at 50% 105%, rgba(255, 255, 255, .95) 0 42%, transparent 43%), linear-gradient(145deg, hsl(calc(140 + var(--a) * 28) 34% 46%), hsl(calc(120 + var(--a) * 30) 30% 32%)); } .avatar:first-child { margin-inline-start: 0; } .stars { display: flex; gap: 1px; color: var(--gold); } .stars .ic { width: 1rem; height: 1rem; fill: var(--gold); stroke-width: 1; } .trust-text p { font-size: var(--fs-small); color: rgba(255, 255, 255, .7); } /* --- Signature: the orbit --- */ .orbit { display: grid; place-items: center; } .orbit-stage { position: relative; width: min(100%, 460px); aspect-ratio: 1; } .orbit-rings { position: absolute; inset: 0; width: 100%; height: 100%; } .ring { fill: none; stroke: rgba(233, 180, 76, .22); stroke-width: 1; } .ring.r2 { stroke: rgba(233, 180, 76, .3); stroke-dasharray: 2 7; } .ring.r3 { stroke: rgba(47, 125, 82, .5); } .ring.r4 { stroke: rgba(233, 180, 76, .38); stroke-dasharray: 1 5; } .spark { fill: var(--gold); stroke: none; } .spark-group { transform-origin: 200px 200px; animation: spin 46s linear infinite; } .orbit-rings .r2 { transform-origin: 200px 200px; animation: spin 90s linear infinite reverse; } @keyframes spin { to { transform: rotate(360deg); } } /* Inset on all four sides = perfectly centred without transforms, which keeps the float animation identical in LTR and RTL. */ .orbit-core { position: absolute; inset: 30%; width: auto; height: auto; filter: drop-shadow(0 14px 34px rgba(233, 180, 76, .38)); animation: float 7s ease-in-out infinite; } @keyframes float { 50% { transform: translateY(-10px); } } .node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 8.5rem; text-align: center; transform: translate(-50%, -50%); } .node .ic { width: 1.5rem; height: 1.5rem; color: var(--gold); } .node b { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .82); line-height: 1.35; } .node.n1 { inset-inline-start: 50%; top: 1%; } .node.n2 { inset-inline-start: 88%; top: 32%; } .node.n3 { inset-inline-start: 79%; top: 84%; } .node.n4 { inset-inline-start: 21%; top: 84%; } .node.n5 { inset-inline-start: 12%; top: 32%; } /* --- Value bar --- */ .values { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-md); background: rgba(255, 255, 255, .04); overflow: hidden; } .value { display: flex; gap: .7rem; align-items: flex-start; padding: 1.15rem 1.15rem; border-inline-end: 1px solid rgba(255, 255, 255, .1); } .value:last-child { border-inline-end: 0; } .value .ic { width: 1.65rem; height: 1.65rem; color: var(--gold); margin-block-start: .1rem; } .value h2 { font-size: .92rem; font-weight: 700; letter-spacing: -.01em; } .value p { font-size: .78rem; color: rgba(255, 255, 255, .66); margin-block-start: .2rem; } /* ---------- 6. Packages ---------- */ .packages { background: var(--bg); } .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-block-start: clamp(2rem, 4vw, 3rem); } .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.5rem 1.35rem 0; box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); } .card-top { display: flex; align-items: center; justify-content: space-between; } .card-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--forest); color: var(--gold); } .card-icon .ic { width: 1.4rem; height: 1.4rem; } .card-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); color: var(--num); font-weight: 700; font-size: .84rem; } .card-title { font-size: var(--fs-h3); margin-block-start: 1.1rem; } .card-desc { color: var(--ink-2); font-size: .87rem; margin-block-start: .5rem; } .feats { margin-block-start: 1.1rem; display: grid; gap: .55rem; } .feats li { display: flex; align-items: flex-start; gap: .5rem; font-size: .84rem; color: var(--ink-2); flex-wrap: wrap; } .feats .ic { width: 1.05rem; height: 1.05rem; color: var(--accent-green); margin-block-start: .18rem; } .feats span { flex: 1; min-width: 0; } .pill { font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--green); color: #fff; padding: .12rem .4rem; border-radius: 4px; align-self: flex-start; margin-block-start: .15rem; } .card-foot { margin-block-start: auto; padding-block: 1.35rem 1.35rem; text-align: center; } .price { display: flex; align-items: baseline; justify-content: center; gap: .3rem; flex-wrap: wrap; } .price .amount { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; } .price .cur { font-size: .8rem; color: var(--ink-2); font-weight: 600; } .price .per { font-size: .78rem; color: var(--ink-3); width: 100%; } .tag { margin-block-start: .8rem; background: color-mix(in srgb, var(--gold) 26%, transparent); color: var(--ink); border-radius: var(--r-sm); padding: .5rem .6rem; font-size: .74rem; font-weight: 700; } /* --- Bundle --- */ .bundle { margin-block-start: 1.5rem; background: linear-gradient(120deg, var(--forest) 0%, #0A3524 100%); color: #fff; border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.1rem); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1.25rem 1.5rem; box-shadow: var(--shadow-lg); } .bundle-icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold); } .bundle-icon .ic { width: 2rem; height: 2rem; } .bundle-copy h3 { font-size: clamp(1.05rem, .9rem + .7vw, 1.45rem); } .bundle-copy p { color: rgba(255, 255, 255, .7); font-size: .87rem; margin-block-start: .3rem; } .bundle-price { text-align: end; } .bundle-price .amount { display: block; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); font-weight: 800; color: var(--gold); letter-spacing: -.03em; } .bundle-price .cur { font-size: .78rem; color: rgba(255, 255, 255, .65); } .bundle-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; padding-block-start: 1.25rem; border-block-start: 1px solid rgba(255, 255, 255, .12); } .bundle-tags li { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: rgba(255, 255, 255, .82); } .bundle-tags .ic { width: 1.1rem; height: 1.1rem; color: var(--gold); } /* ---------- 7. Process ---------- */ .process { background: var(--soft); } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-block-start: clamp(2rem, 4vw, 3rem); } .step { text-align: center; position: relative; } /* Dotted connector between steps (desktop only) */ .step:not(:last-child)::after { content: ""; position: absolute; top: 34px; inset-inline-start: calc(50% + 46px); inset-inline-end: calc(-50% + 46px); border-block-start: 2px dashed color-mix(in srgb, var(--ink-3) 55%, transparent); } .step-icon { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin-inline: auto; border-radius: 50%; background: var(--forest); color: var(--gold); } .step-icon .ic { width: 1.9rem; height: 1.9rem; } .step-num { position: absolute; top: -4px; inset-inline-end: -12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); color: var(--ink); border: 1px solid var(--line); font-size: .78rem; font-weight: 700; } .step h3 { font-size: var(--fs-h3); margin-block-start: 1rem; } .step p { font-size: .85rem; color: var(--ink-2); margin-block-start: .45rem; max-width: 24ch; margin-inline: auto; } /* ---------- 8. Stats ---------- */ .stats { background: var(--bg); } .stats-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .stats-head .eyebrow { text-align: start; } .stats-title { text-align: start; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem); margin-block-start: .8rem; } .stats-title .underline { max-width: 9ch; } .stat-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .stat { text-align: center; padding-inline: .5rem; border-inline-start: 1px solid var(--line); } .stat:first-child { border-inline-start: 0; } .stat .ic { width: 1.7rem; height: 1.7rem; color: var(--accent-green); margin-inline: auto; } .stat-num { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; margin-block-start: .35rem; } .stat dd { font-size: .78rem; color: var(--ink-2); margin-block-start: .2rem; } /* ---------- 9. Contact ---------- */ .contact { background: var(--soft); } .contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .contact-title { text-align: start; } .contact-title span, .contact-title em { display: inline; } .contact-lede { color: var(--ink-2); font-size: var(--fs-lede); margin-block-start: 1rem; max-width: 40ch; } .contact-links { margin-block-start: 1.75rem; display: grid; gap: .7rem; } .contact-links li { display: flex; align-items: center; gap: .6rem; font-weight: 600; } .contact-links .ic { color: var(--gold); } .contact-links a:hover { color: var(--gold); } .form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow); display: grid; gap: 1rem; } .field { display: grid; gap: .35rem; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .field label { font-size: .82rem; font-weight: 700; } .opt { font-weight: 500; color: var(--ink-3); font-size: .75rem; } .field input, .field select, .field textarea { width: 100%; padding: .72rem .85rem; background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-sm); font-size: .9rem; transition: border-color .16s var(--ease), background-color .16s var(--ease); } .field textarea { resize: vertical; min-height: 110px; } .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 1rem center, right .68rem center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-inline-end: 2.2rem; } [dir="rtl"] .field select { background-position: left 1rem center, left .68rem center; padding-inline-end: .85rem; padding-inline-start: 2.2rem; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: var(--surface); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #D9534F; } .err { font-size: .76rem; color: #D9534F; font-weight: 600; } /* Honeypot — clipped rather than pushed off-screen. A negative offset here would extend the RTL scroll area by ~10000px. */ .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; } .form-note { font-size: .76rem; color: var(--ink-3); text-align: center; } .form-status { font-size: .87rem; font-weight: 600; text-align: center; border-radius: var(--r-sm); } .form-status:not(:empty) { padding: .75rem .9rem; } .form-status.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--accent-green); } .form-status.bad { background: rgba(217, 83, 79, .13); color: #D9534F; } /* Submit button loading state */ .spinner { display: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid rgba(23, 50, 31, .3); border-top-color: #17321F; animation: spin .7s linear infinite; } .btn.is-loading { pointer-events: none; opacity: .8; } .btn.is-loading .spinner { display: block; } .btn.is-loading .btn-arrow { display: none; } /* ---------- 10. CTA band ---------- */ .cta-band { background: linear-gradient(120deg, var(--forest) 0%, #04180F 100%); color: #fff; padding-block: clamp(2.5rem, 5vw, 3.75rem); } .cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2rem; align-items: center; } .cta-title { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.3rem); } .cta-inner p { color: rgba(255, 255, 255, .7); margin-block-start: .5rem; max-width: 44ch; font-size: .92rem; } .cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; } /* ---------- 11. Footer ---------- */ .site-footer { background: #04150E; color: #fff; padding-block: 2.25rem 1.75rem; } .footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.25rem; } .footer-brand { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .footer-tag { font-size: .78rem; color: rgba(255, 255, 255, .58); line-height: 1.45; } .socials { display: flex; gap: .6rem; justify-content: center; } .socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .8); transition: border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); } .socials a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); } .copyright { font-size: .78rem; color: rgba(255, 255, 255, .55); text-align: end; } /* --- Language flags --- */ .lang-bar { margin-block-start: 1.75rem; padding-block-start: 1.5rem; border-block-start: 1px solid rgba(255, 255, 255, .1); text-align: center; } .lang-label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); } .langs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-block-start: .9rem; } .lang { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-pill); color: rgba(255, 255, 255, .72); font-size: .82rem; font-weight: 600; transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease); } .lang:hover { border-color: var(--gold); color: #fff; } .lang[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 15%, transparent); color: #fff; } .flag { width: 26px; height: 17px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); } /* ---------- 12. Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ========================================================================== 13. Responsive ========================================================================== */ @media (max-width: 1080px) { .values { grid-template-columns: repeat(3, 1fr); } .value:nth-child(3) { border-inline-end: 0; } .value:nth-child(-n+3) { border-block-end: 1px solid rgba(255, 255, 255, .1); } .cards { grid-template-columns: repeat(2, 1fr); } .bundle { grid-template-columns: auto minmax(0, 1fr); } .bundle-price { grid-column: 1 / -1; text-align: start; } .bundle > .btn { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 940px) { /* Header → mobile drawer */ .nav { position: fixed; inset-block-start: 72px; inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; background: var(--forest); border-block-end: 1px solid rgba(255, 255, 255, .1); padding: .5rem var(--gut) 1.25rem; transform: translateY(-130%); transition: transform .3s var(--ease); max-height: calc(100dvh - 72px); overflow-y: auto; } .nav.is-open { transform: translateY(0); } .nav-link { padding-block: .85rem; border-block-end: 1px solid rgba(255, 255, 255, .07); font-size: 1rem; } .nav-link.is-active::after { display: none; } .menu-btn { display: grid; place-items: center; } .nav-cta { display: none; } .theme-btn-text { display: none; } .theme-btn { padding: .45rem; } .header-actions { margin-inline-start: auto; } /* Hero → single column, orbit under copy */ .hero-grid { grid-template-columns: 1fr; } .orbit { order: 2; } .orbit-stage { width: min(100%, 400px); } .hero-copy { order: 1; } .stats-grid { grid-template-columns: 1fr; } .stats-head .eyebrow, .stats-title { text-align: center; } .stats-title .underline { margin-inline: auto; } .contact-grid { grid-template-columns: 1fr; } .contact-title { text-align: center; } .contact-lede { margin-inline: auto; text-align: center; } .contact-links { justify-items: center; } .cta-inner { grid-template-columns: 1fr; text-align: center; } .cta-inner p { margin-inline: auto; } .cta-actions { justify-content: center; } .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; } .footer-brand { flex-direction: column; gap: .5rem; } .footer-tag { text-align: center; } .copyright { text-align: center; } /* Steps: 2×2, drop the connectors */ .steps { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } .step::after { display: none !important; } } @media (max-width: 680px) { html { scroll-padding-block-start: 78px; } .values { grid-template-columns: 1fr; } .value { border-inline-end: 0; border-block-end: 1px solid rgba(255, 255, 255, .1); } .value:last-child { border-block-end: 0; } .cards { grid-template-columns: 1fr; } .bundle { grid-template-columns: 1fr; text-align: center; justify-items: center; } .bundle-price { text-align: center; } .bundle > .btn { justify-self: stretch; } .bundle-tags { gap: .75rem 1.25rem; } .bundle-tags li { font-size: .78rem; } .stat-list { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; } .stat { border-inline-start: 0; } .stat:nth-child(2n) { border-inline-start: 1px solid var(--line); } .field-row { grid-template-columns: 1fr; } .hero-actions .btn, .cta-actions .btn { flex: 1 1 100%; } /* Orbit gets tight on small screens — shrink labels */ .node { width: 6.6rem; } .node b { font-size: .58rem; letter-spacing: .06em; } .node .ic { width: 1.2rem; height: 1.2rem; } .node.n2 { inset-inline-start: 86%; } .node.n5 { inset-inline-start: 14%; } } @media (max-width: 400px) { .brand-name { font-size: 1.15rem; } .node { width: 5.4rem; } .node b { font-size: .52rem; } } /* ---------- 14. Motion & print ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } .btn:hover, .card:hover, .socials a:hover { transform: none; } } @media print { .site-header, .cta-band, .lang-bar, .form, .orbit { display: none; } body { background: #fff; color: #000; } }