:root{ /* ── DAYLIGHT SILK reskin ──────────────────────────────────────────────── The page lives on ONE silk canvas that grades dark↔light (background.js u_light). Colour therefore is GLOBAL: theme tokens on , flipped by body[data-nav="light"], everything transitioning on one shared tempo. Legacy monochrome names (--text/--white/--grey/--faint/--hair/...) are REPOINTED at the theme tokens so all downstream usage follows the grade automatically. */ --milk:#F1F0E6; --milk-2:rgba(241,240,230,.68); --milk-3:rgba(241,240,230,.42); --ink:#12241A; --ink-2:rgba(18,36,26,.64); --ink-3:rgba(18,36,26,.42); --tdur:.5s; --teas:cubic-bezier(.33,1,.42,1); /* the one theme tempo */ } body{ /* DARK grade — hero + the nights */ --tx:var(--milk); --tx-2:var(--milk-2); --tx-3:var(--milk-3); --acc:#6FCF97; /* readable mid-green accent */ --up:#5FBF8C; --dn:#E58C77; /* market colours keep their meaning*/ --edge:rgba(241,240,230,.26); --edge-soft:rgba(241,240,230,.10); --hover-tint:rgba(241,240,230,.10); --logo-tint:none; /* white lockup as shipped */ --plogo:grayscale(1) brightness(0) invert(1) opacity(.92); /* ONE action pairing per grade: deep GREEN + WHITE on the dark grades */ --btn-bg:#14603C; --btn-fg:#FFFFFF; --btn-bg-h:#1A7449; --btn-bd:rgba(255,255,255,.14); --btn-lift:0 14px 30px -16px rgba(0,0,0,.55); --card:rgba(14,28,21,.52); --card-pop:rgba(18,38,28,.62); --chip:rgba(241,240,230,.07); --num:var(--milk); /* the big money figures */ --sel-bg:#14603C; --sel-fg:#FFFFFF; --menu:rgba(10,16,13,.96); /* floating panels (lang dropdown) */ --sheet-veil:rgba(6,10,8,.45); /* mobile nav sheet's floor shading */ --ground:#0B0F0D; /* flat fallback under the canvas */ } body[data-nav="light"]{ /* daylight = warm SAND, not white — white actions need ground to stand on */ --tx:var(--ink); --tx-2:var(--ink-2); --tx-3:var(--ink-3); --acc:#9E5D13; --up:#1B7F52; --dn:#A0523E; --edge:rgba(18,36,26,.20); --edge-soft:rgba(18,36,26,.09); --hover-tint:rgba(18,36,26,.06); --logo-tint:brightness(0); /* same white PNG, inked black */ --plogo:grayscale(1) brightness(.42) contrast(1.15); /* ...and WHITE + BLACK over daylight. The white stays pure — it is the ACTION; separation comes from the ground being properly deep sand. */ --btn-bg:#FFFFFF; --btn-fg:#10231A; --btn-bg-h:#F1EADA; --btn-bd:rgba(16,35,26,.3); --btn-lift:0 12px 28px -14px rgba(18,36,26,.45); --card:rgba(252,246,232,.82); --card-pop:rgba(245,228,192,.88); --chip:rgba(252,247,235,.85); --num:#143D28; /* deep evergreen numerals on sand */ --sel-bg:#12241A; --sel-fg:#FFFFFF; --menu:rgba(250,244,232,.97); --sheet-veil:rgba(18,36,26,.05); --ground:#DFD0AC; } /* Legacy monochrome names → theme. IMPORTANT: declared on BODY, not :root — custom properties substitute per element, and --tx only exists from body down; at :root `--text:var(--tx)` would compute to empty (→ black text). */ body{ --gold-deep:var(--edge-soft); --gold:#C9A14C; --gold-cta:var(--tx); --gold-bright:var(--tx); --gold-light:var(--tx); --amber:var(--tx-2); --text:var(--tx); --text-2:var(--tx-2); --muted:var(--tx-3); --hairline:var(--edge); --hairline-soft:var(--edge-soft); --white:var(--tx); --white-hair:var(--edge-soft); --glint:var(--tx-3); --white-glow:var(--edge-soft); --grey:var(--tx-2); --faint:var(--tx-3); --hair:var(--edge); } :root{ --bg:#070A0B; --bg-2:#0A0E0F; --panel:#0C1113; --green:#0E1315; --green-rich:#141A1C; --oxblood:#0A0E0F; --font-display:'Outfit', 'Golos Text', system-ui, sans-serif; --font-body:'Golos Text', system-ui, sans-serif; --foil:none; --ease-doc:cubic-bezier(.22,1,.36,1); } /* gold stays a true whisper: logo lockup + the star glyphs only */ body{ --gold:var(--tx-3); --gold-whisper:#C9A14C; } .masthead__brand{ --gold:#C9A14C; } .record__stars svg{ stroke:#C9A14C !important; } .review__stars{ color:#D7B25C !important; } :root{ --maxw: 1180px; --maxw-wide: 1320px; --measure: 64ch; --row-gap: 24px; --sect-pad: clamp(44px, 6vh, 72px); /* Daylight: a section should FIT one screen */ --gutter: clamp(20px, 4.2vw, 56px); --nav-h: 72px; --radius: 14px; --radius-sm: 9px; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --gold-cta-fill: linear-gradient(160deg,#FFFFFF,#F6F8F7 55%,#D7DAD9); --fs-display: clamp(3rem, 6.2vw + 0.6rem, 6rem); --fs-h2: clamp(2.1rem, 2.1vw + 1.2rem, 3rem); /* Outfit sits wider than the old serif */ --fs-h3: clamp(1.3125rem, .6vw + 1.15rem, 1.5rem); --fs-body: clamp(1.0625rem, .3vw + 1rem, 1.1875rem); --fs-lead: clamp(1.05rem, .45vw + .95rem, 1.25rem); --fs-small: .875rem; --fs-card: clamp(3.25rem, 8.5vw + .5rem, 8.25rem); --fs-mega: clamp(4.5rem, 13vw, 9rem); --fs-giga: clamp(4rem, 10vw, 7.5rem); --fs-step: clamp(5.5rem, 12vw, 11rem); --tracking-label: 0.18em; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; } body{ margin:0; } h1,h2,h3,h4,p,figure,blockquote{ margin:0; } ul,ol{ margin:0; padding:0; list-style:none; } img,svg,canvas{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button,input,select,textarea{ font:inherit; color:inherit; } button{ background:none; border:0; cursor:pointer; } :focus-visible{ outline:1px solid rgba(246,248,247,.5); outline-offset:2px; border-radius:4px; } ::selection{ background:rgba(246,248,247,.16); color:var(--white); } ::-moz-selection{ background:rgba(246,248,247,.16); color:var(--white); } body{ min-height:100vh; color:var(--text); font-family:var(--font-body), system-ui, "Segoe UI", sans-serif; font-size:var(--fs-body); line-height:1.6; font-weight:500; background:var(--ground); transition:color var(--tdur) var(--teas), background-color var(--tdur) var(--teas); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* every plain text element rides the theme tempo; elements that declare their own transition shorthand later (links, buttons, chrome) override this */ h1,h2,h3,h4,p,li,dt,dd,small,blockquote,figcaption,span,strong,em,a{ transition:color var(--tdur) var(--teas); } .site-bg{ position:fixed; inset:0; z-index:-2; pointer-events:none; background:var(--ground); transition:background-color var(--tdur) var(--teas); } /* ── Ambient silk background (gated to intro completion via background.js) ── */ #pt-bg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; pointer-events:none; opacity:0; transition:opacity 1.2s ease .2s; } body.bg-on #pt-bg{ opacity:1; } /* scrims retired: with the global grade, text colour always matches the canvas — a flat dark rectangle would fight the daylight sections */ section.pt-scrim{ position:relative; } section.pt-scrim::before{ display:none; } @media (prefers-reduced-motion: reduce){ #pt-bg{ transition:none; } } .atmosphere{ display:none; } .atmosphere--legacy{ position:fixed; inset:-15%; z-index:-1; pointer-events:none; contain:strict; } .atmo-beam{ position:absolute; width:160vmax; height:160vmax; left:50%; top:50%; margin:-80vmax 0 0 -80vmax; border-radius:50%; opacity:.11; transform:translate(22vw,-18vh) scale(.85); background:radial-gradient(closest-side, rgba(246,248,247,.085) 0%, rgba(246,248,247,.05) 26%, rgba(20,26,28,.045) 52%, rgba(7,10,11,0) 72%); } .atmo-fill{ position:absolute; width:120vmax; height:120vmax; left:-40vmax; bottom:-50vmax; border-radius:50%; background:radial-gradient(closest-side, rgba(20,26,28,.10), rgba(20,26,28,0) 70%); } .atmo-vignette{ position:absolute; inset:0; opacity:.7; background:radial-gradient(120% 90% at 50% 42%, rgba(10,14,16,0) 55%, rgba(10,14,16,.28) 82%, rgba(4,6,7,.5) 100%); } html.intro-active body::after{ opacity:0; } body::after{ content:""; position:fixed; inset:0; z-index:5; pointer-events:none; transition:opacity 1.8s var(--ease) .4s; opacity:.022; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } h1,h2,h3,.t-display{ font-family:var(--font-display), Georgia, serif; font-weight:600; line-height:1.04; letter-spacing:-.02em; color:var(--text); } h1{ font-size:var(--fs-display); } h2{ font-size:var(--fs-h2); } h3{ font-size:var(--fs-h3); } strong{ font-weight:600; } .eyebrow{ font-family:var(--font-body); font-size:var(--fs-small); font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--gold); } .placeholder-note{ color:var(--muted); font-size:var(--fs-small); letter-spacing:.04em; font-style:italic; } .container{ width:min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline:auto; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .hairline{ border:0; height:1px; background:var(--hairline); margin:0; } .skip-link{ position:absolute; left:12px; top:-48px; z-index:1000; background:var(--panel); color:var(--text); padding:10px 16px; border-radius:var(--radius-sm); border:1px solid var(--hairline); transition:top .2s var(--ease); } .skip-link:focus{ top:12px; } .site-main,.nav,.footer{ position:relative; z-index:2; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.85em 1.6em; border-radius:999px; font-weight:600; font-size:.95rem; letter-spacing:.01em; border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); will-change:transform; } .btn--gold{ background:transparent; color:var(--white); border:1px solid var(--hair); } .btn--gold:hover{ box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 16px 40px -14px rgba(246,248,247,.7); } .btn--ghost{ color:var(--text-2); border-color:var(--hairline); background:rgba(255,255,255,.015); } .btn--ghost:hover{ border-color:rgba(246,248,247,.34); color:var(--text); } .masthead{ position:fixed; inset:0 0 auto 0; z-index:100; padding-block:24px; background:transparent; /* the panel + its shadow ride the ONE theme tempo (--tdur/--teas) so the masthead lands with the ticker, the folio and the silk — not .1s early */ transition:background-color var(--tdur) var(--teas), box-shadow var(--tdur) var(--teas), padding .4s cubic-bezier(.23,1,.32,1); } .masthead::before{ display:none; } .masthead__thread{ position:absolute; top:0; left:0; right:0; height:1.5px; display:block; background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright)); transform:scaleX(0); transform-origin:left; } .masthead__in{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.5rem; padding-inline:max(48px, env(safe-area-inset-left)); } .masthead.is-scrolled{ padding-block:14px; background:rgba(7,12,10,.72); -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15); box-shadow:0 10px 30px -24px rgba(0,0,0,.5); } body[data-nav="light"] .masthead.is-scrolled{ background:rgba(232,216,182,.88); box-shadow:0 10px 30px -24px rgba(18,36,26,.4); } /* the lockup follows the grade: white as shipped, inked black over daylight */ .brand__img{ filter:var(--logo-tint); transition:filter var(--tdur) var(--teas); } html.intro-active .masthead.is-scrolled{ -webkit-backdrop-filter:none; backdrop-filter:none; } .masthead__brand{ display:flex; flex-direction:column; gap:3px; justify-self:start; } .brand{ display:inline-flex; align-items:center; gap:2px; height:auto; position:relative; } .brand__img{ height:38px; width:auto; display:block; } @media (prefers-reduced-motion: no-preference){ html.no-intro .masthead .brand__img{ animation:brandFade .9s var(--ease) .12s both; } } @keyframes brandFade{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } } .brand__powered{ font-family:var(--font-body); font-weight:400; font-size:10.5px; letter-spacing:.03em; line-height:1.2; color:var(--muted); white-space:nowrap; transition:opacity .6s var(--ease); } .brand__pelliron{ color:var(--gold); border-bottom:1px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease); } .brand__pelliron:hover{ color:var(--gold-light); border-bottom-color:var(--gold-deep); } .toc{ display:flex; align-items:center; gap:40px; justify-self:center; } .toc__link{ display:inline-flex; align-items:baseline; font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); padding-block:.3em; transition:color .2s var(--ease); background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px; transition:color .2s var(--ease), background-size .35s var(--ease-doc); } .toc__no{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:11px; color:var(--gold); margin-right:6px; transition:color .18s var(--ease); } .toc__link:hover{ color:var(--text); background-size:100% 1px; } .toc__link:hover .toc__no{ color:var(--gold-light); } .toc__link.is-spy{ color:var(--text); } .toc__link.is-spy .toc__no{ color:var(--gold-light); } .masthead__actions{ display:flex; align-items:center; gap:1.2rem; justify-self:end; } .lang{ display:flex; align-items:center; gap:14px; } .lang__opt{ font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.10em; text-transform:uppercase; color:var(--muted); position:relative; padding-block:.35em; transition:color .2s var(--ease); } .lang__opt:hover{ color:var(--text-2); } .lang__opt.is-active{ color:var(--gold-light); } .lang__opt.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(246,248,247,.4); } .langdrop{ position:relative; transition:opacity .6s var(--ease); } .langdrop__btn{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.10em; text-transform:uppercase; color:var(--text-2); padding:.45em .2em; transition:color .2s var(--ease); } .langdrop__btn:hover{ color:var(--text); } .langdrop__btn svg{ color:var(--gold); transition:transform .25s var(--ease); } .langdrop.is-open .langdrop__btn{ color:var(--gold-light); } .langdrop.is-open .langdrop__btn svg{ transform:rotate(180deg); } .langdrop__menu{ position:absolute; top:calc(100% + 10px); right:0; z-index:130; display:flex; flex-direction:column; gap:1px; min-width:96px; padding:5px; background:var(--menu); border:1px solid var(--hairline); border-radius:9px; box-shadow:0 18px 44px -18px rgba(0,0,0,.4), inset 0 1px 0 var(--edge-soft); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transform-origin:top right; transition:opacity .2s var(--ease), transform .2s var(--ease-out), visibility 0s .2s, background-color var(--tdur) var(--teas), border-color var(--tdur) var(--teas); } .langdrop.is-open .langdrop__menu{ opacity:1; visibility:visible; transform:none; transition:opacity .2s var(--ease), transform .2s var(--ease-out); } .langdrop__menu .lang__opt{ text-align:left; padding:.55em .75em; border-radius:6px; color:var(--muted); transition:color .15s var(--ease), background-color .15s var(--ease); } .langdrop__menu .lang__opt:hover{ color:var(--text); background:var(--hover-tint); } .langdrop__menu .lang__opt.is-active{ color:var(--gold-light); } .langdrop__menu .lang__opt.is-active::after{ display:none; } .langdrop--up .langdrop__menu{ top:auto; bottom:calc(100% + 10px); transform:translateY(6px) scale(.98); transform-origin:bottom right; } .langdrop--up.is-open .langdrop__menu{ transform:none; } .folio__langdrop .langdrop__btn{ font-size:10.5px; padding:.3em .2em; color:var(--muted); } .folio__langdrop .langdrop__btn:hover{ color:var(--text-2); } /* Daylight actions: CREAM fill on both grades (never green). On the light grade the fill barely separates from the canvas, so the theme's firmer --btn-bd outline + --btn-lift shadow do the work there. */ .btn-cta{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-body); font-weight:600; font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; padding:12px 22px; border-radius:11px; background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd); box-shadow:var(--btn-lift); position:relative; isolation:isolate; transition:background var(--tdur) var(--teas), color var(--tdur) var(--teas), border-color var(--tdur) var(--teas), box-shadow var(--tdur) var(--teas), transform .15s var(--ease); } .btn-cta:hover{ background:var(--btn-bg-h); color:var(--btn-fg); } .btn-cta:active{ transform:translateY(1px); } .btn-cta--fill{ background:var(--btn-bg); } .btn-cta--fill:hover{ background:var(--btn-bg-h); } .masthead__menu{ display:none; font-family:var(--font-body); font-weight:600; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); } .masthead__menu-close{ display:none; } .masthead.nav--open .masthead__menu-open{ display:none; } .masthead.nav--open .masthead__menu-close{ display:inline; } .sheet{ display:none; } @media (max-width:960px){ .masthead{ padding-block:16px; } .masthead__in{ padding-inline:max(24px, env(safe-area-inset-left)); } .toc, .masthead .langdrop, .masthead__auth{ display:none; } .masthead__menu{ display:inline-flex; } .brand__powered{ white-space:normal; max-width:62vw; font-size:9.5px; line-height:1.25; } .sheet{ display:flex; position:fixed; inset:0; z-index:-1; flex-direction:column; justify-content:center; gap:2rem; padding:96px max(24px, env(safe-area-inset-left)) 48px; background:var(--ground); opacity:0; pointer-events:none; visibility:hidden; transition:opacity .3s var(--ease), visibility 0s .3s, background-color var(--tdur) var(--teas); } .sheet::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(120% 60% at 50% 115%, var(--sheet-veil), transparent 60%); } .masthead.nav--open .sheet{ opacity:1; pointer-events:auto; visibility:visible; transition:opacity .3s var(--ease), visibility 0s 0s; } /* menu open: force off the backdrop-filter — it would make the masthead the containing block for the fixed .sheet (shrinking it to the bar) — and beat .is-scrolled (later in source) */ .masthead.nav--open{ background:var(--ground) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } .sheet__toc{ display:flex; flex-direction:column; gap:1.2rem; } .sheet__link{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem,9vw,3.5rem); line-height:1.05; color:var(--text); opacity:0; transform:translateY(28px); transition:opacity .5s var(--ease-doc), transform .5s var(--ease-doc); } .masthead.nav--open .sheet__link{ opacity:1; transform:none; } .masthead.nav--open .sheet__link:nth-child(1){ transition-delay:.05s; } .masthead.nav--open .sheet__link:nth-child(2){ transition-delay:.10s; } .masthead.nav--open .sheet__link:nth-child(3){ transition-delay:.15s; } .masthead.nav--open .sheet__link:nth-child(4){ transition-delay:.20s; } .sheet__no{ font-family:var(--font-display); font-style:italic; font-size:.45em; color:var(--gold); margin-right:.5em; vertical-align:.5em; } .sheet__cta{ width:100%; padding:16px 22px; } .sheet__lang{ gap:0; } .sheet__lang .lang__opt{ flex:1; text-align:center; padding-block:.8em; font-size:13px; } .sheet__lang .lang__opt + .lang__opt{ border-left:1px solid var(--hairline-soft); } html.reduced .sheet, html.reduced .sheet__link{ transition:opacity .18s linear; transform:none; } } .site-main{ display:block; } .act{ position:relative; isolation:isolate; padding-block:var(--sect-pad); perspective:1200px; perspective-origin:50% 50%; } .act__inner{ width:min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline:auto; position:relative; } .act--plans .act__inner{ width:min(100% - (var(--gutter) * 2), var(--maxw-wide)); } .act__inner .placeholder-note{ margin-top:1rem; } .act__wm{ display:none; } .footer{ border-top:1px solid var(--hairline); padding-block:clamp(2.5rem,6vh,4rem); background:linear-gradient(180deg, transparent, rgba(7,10,11,.6)); } .footer__grid{ display:grid; gap:2rem clamp(2rem,5vw,4rem); grid-template-columns:1fr; } @media (min-width:760px){ .footer__grid{ grid-template-columns:1.4fr 1fr auto; align-items:start; } } .footer__brand .brand-wordmark{ font-size:1.4rem; } .footer__links{ display:flex; flex-direction:column; gap:.6rem; color:var(--text-2); } .footer__links a:hover{ color:var(--text); } .footer__lang{ display:flex; gap:.2rem; } .footer__risk{ grid-column:1/-1; max-width:80ch; padding-top:1.4rem; border-top:1px solid var(--hairline-soft); } .why-grid{ display:grid; gap:clamp(1rem,2.4vw,1.7rem); grid-template-columns:1fr; } @media (min-width:760px){ .why-grid{ grid-template-columns:repeat(3,1fr); } } .benefit{ position:relative; overflow:hidden; padding:1.9rem 1.6rem; border-radius:var(--radius); border:1px solid var(--hairline); background:linear-gradient(180deg, rgba(12,17,19,.6), rgba(10,14,16,.45)); } .benefit::before{ content:""; position:absolute; right:-25%; bottom:-40%; width:65%; height:65%; background:radial-gradient(circle, rgba(246,248,247,.10), transparent 70%); pointer-events:none; } .benefit__icon{ display:inline-flex; width:52px; height:52px; color:var(--gold); margin-bottom:1.1rem; } .benefit__icon svg{ width:100%; height:100%; } .benefit__title{ font-size:1.18rem; margin-bottom:.7rem; line-height:1.25; } .benefit__desc{ color:var(--text-2); font-size:.95rem; } .rule__inner{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; } .rule__seal{ position:absolute; top:-8px; right:0; width:clamp(86px,11vw,132px); color:var(--gold); opacity:.55; } .rule__seal svg{ width:100%; height:auto; } @media (max-width:760px){ .rule__seal{ position:static; margin:0 auto .6rem; } } .rule__statement{ display:flex; flex-direction:column; align-items:center; gap:.3rem; margin:clamp(1.4rem,4vw,2.6rem) 0; } .rule__eyebrow{ font-size:var(--fs-small); letter-spacing:.26em; text-transform:uppercase; color:var(--gold); } .rule__big{ font-family:var(--font-display); font-weight:300; line-height:.9; font-size:clamp(5rem,18vw,11rem); background:linear-gradient(160deg,#FFFFFF,#F6F8F7 55%,#C9CFCD); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 12px 44px rgba(246,248,247,.28)); } .rule__pct{ font-size:.5em; vertical-align:super; } .rule__phase{ font-size:1.05rem; color:var(--text-2); letter-spacing:.04em; } .rule__grid{ display:grid; gap:.7rem; grid-template-columns:1fr; width:min(100%,640px); } @media (min-width:680px){ .rule__grid{ grid-template-columns:repeat(2,1fr); } } .rule__item{ padding:.85rem .9rem; border:1px solid var(--edge-soft); border-radius:var(--radius-sm); background:transparent; transition:border-color var(--tdur) var(--teas); } .rule__item dt{ font-size:var(--fs-small); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.45rem; } .rule__item dd{ margin:0; font-family:var(--font-display); font-weight:600; font-size:1.55rem; color:var(--gold-light); } .partners-grid{ display:grid; gap:clamp(1rem,3vw,1.8rem); grid-template-columns:1fr; } @media (min-width:720px){ .partners-grid{ grid-template-columns:1fr 1fr; } } .partner-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.1rem; padding:clamp(1.5rem,3vw,2.2rem); border:1px solid var(--edge); border-radius:var(--radius); background:var(--card); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); transition:background var(--tdur) var(--teas), border-color var(--tdur) var(--teas); } .partner-card__logo{ display:flex; align-items:center; justify-content:center; min-height:110px; } .partner-card__logo img{ width:auto; height:auto; max-width:320px; max-height:104px; object-fit:contain; } .partner-card__logo--pelliron img{ max-width:190px; max-height:190px; } .partner-card__text{ color:var(--text-2); font-size:var(--fs-body); line-height:1.55; max-width:42ch; } .partners__about{ margin-top:clamp(1.6rem,4vh,2.8rem); max-width:74ch; margin-inline:auto; } .partners__about p{ color:var(--text-2); font-size:var(--fs-body); line-height:1.62; text-align:center; } .reviews__grid{ display:grid; gap:clamp(1rem,2vw,1.5rem); grid-template-columns:1fr; } .review{ display:flex; flex-direction:column; gap:.7rem; padding:1.5rem 1.4rem; border:1px solid var(--hairline); border-radius:var(--radius); background:linear-gradient(180deg, rgba(12,17,19,.55), rgba(10,14,16,.5)); } .review__stars{ color:#D7B25C; letter-spacing:.12em; font-size:.85rem; } .review__ttl{ font-size:1.02rem; line-height:1.3; } .review__txt{ flex:1; color:var(--text-2); font-size:.88rem; line-height:1.55; } .review__author{ color:var(--muted); font-size:.8rem; } .review__author strong{ color:var(--text-2); font-weight:600; } .cta__title span{ color:var(--gold-light); } .cta__actions{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:.8rem; } .cta__signup, .cta__login{ min-width:140px; } .masthead__auth{ display:flex; flex-direction:row; align-items:center; gap:.5rem; } .sheet__login{ display:block; text-align:center; margin-top:.7rem; font-family:var(--font-body); font-weight:500; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); transition:color .2s var(--ease); } .sheet__login:hover{ color:var(--gold-light); } @media (min-width:760px){ .footer__grid{ grid-template-columns:1.6fr 1fr 1.7fr; } } .footer__about{ margin-top:1rem; color:var(--muted); font-size:.9rem; max-width:42ch; } .footer__col{ display:flex; flex-direction:column; gap:.6rem; } .footer__colttl{ margin-bottom:.4rem; font-family:var(--font-body); font-weight:600; font-size:var(--fs-small); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); } .footer__col a{ color:var(--text-2); } .footer__col a:hover{ color:var(--text); } .footer__disclaimer{ color:var(--muted); font-size:.82rem; line-height:1.6; } .footer__bar{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--hairline-soft); } .footer__copy{ display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.85rem; } .brand-wordmark--sm{ font-size:1rem; } .sound-toggle{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; color:var(--muted); border-radius:8px; transition:color .2s var(--ease); } .sound-toggle:hover{ color:var(--text-2); } .sound-toggle svg{ width:18px; height:18px; } .sound-toggle .sound-on{ opacity:0; } .sound-toggle.is-on{ color:var(--gold-cta); } .sound-toggle.is-on .sound-on{ opacity:1; } .sound-toggle.is-on .sound-off{ opacity:0; } .btn--gold{ position:relative; overflow:hidden; } .btn--gold > *{ position:relative; z-index:1; } .btn--gold::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(110deg, transparent 36%, rgba(246,248,247,.45) 50%, transparent 64%); transform:translateX(-130%); transition:transform .6s var(--ease); } .btn--gold:hover::after{ transform:translateX(130%); } .fly-bill{ position:fixed; z-index:200; display:grid; place-items:center; border-radius:6px; pointer-events:none; font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--gold-light); background:linear-gradient(135deg, var(--green-rich), var(--green)); border:1px solid var(--gold); box-shadow:0 14px 30px -10px rgba(0,0,0,.7); will-change:transform; } .act--rule{ min-height:0; display:flex; flex-direction:column; justify-content:center; } .rule__veil{ display:none; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:1; background:radial-gradient(120% 90% at 50% 50%, rgba(4,6,7,.28), rgba(4,6,7,.08) 70%, transparent 100%); -webkit-mask-image:linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image:linear-gradient(transparent, #000 22%, #000 78%, transparent); } .act--rule .tc, .act--rule .rule__grid, .act--rule .rule__seal{ position:relative; z-index:1; } .rule__statement{ position:relative; z-index:3; } .rule__glow{ position:absolute; left:50%; top:50%; width:130%; height:260%; transform:translate(-50%,-50%); z-index:-1; pointer-events:none; background:radial-gradient(closest-side, rgba(246,248,247,.20), transparent 70%); opacity:.35; transition:opacity .3s var(--ease-out); } .is-lit .rule__glow{ opacity:.5; } .rule__underline{ display:none; } html:not(.reduced) .rule__underline{ opacity:0; transform:scaleX(.5); transform-origin:center; transition:opacity .3s var(--ease-out) .1s, transform .3s var(--ease-out) .1s; } html:not(.reduced) .is-lit .rule__underline{ opacity:1; transform:scaleX(1); } .char{ display:inline-block; will-change:transform; } .plans{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; align-items:stretch; perspective:1200px; } /* theme-aware glass: cream cards in daylight, dark glass at night — the card MATERIAL follows the grade so a light slab never floats on the dark canvas */ .plan{ position:relative; isolation:isolate; border-radius:14px; padding:22px 22px 20px; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--edge); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); box-shadow:0 22px 46px -26px rgba(0,0,0,.35); transition:transform .3s var(--ease-doc), box-shadow .3s var(--ease-doc), background var(--tdur) var(--teas), border-color var(--tdur) var(--teas); } .plan::before{ display:none; } .plan::after{ display:none; } .plan__engrave{ position:absolute; left:0; right:0; top:0; height:110px; width:100%; z-index:-1; opacity:.55; pointer-events:none; -webkit-mask-image:linear-gradient(#000 55%, transparent); mask-image:linear-gradient(#000 55%, transparent); transition:opacity .45s var(--ease); } .plan__wm{ font-family:var(--font-display); font-weight:600; font-size:140px; fill:none; stroke:var(--edge-soft); stroke-width:.75px; } .plan__stamp{ position:absolute; right:14px; top:14px; width:64px; height:64px; color:var(--gold); opacity:.18; pointer-events:none; } .plan__corner{ position:absolute; font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--tx-3); pointer-events:none; } .plan__corner--tl{ top:16px; left:18px; } .plan__corner--br{ bottom:14px; right:18px; transform:rotate(180deg); } .plan__tier{ font-family:var(--font-body); font-weight:500; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-top:30px; } .plan__price{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; font-size:clamp(2.1rem,2.6vw,2.7rem); line-height:1; color:var(--num); font-variant-numeric:tabular-nums; margin-top:8px; transition:color var(--tdur) var(--teas); } .plan__price sup{ font-size:.5em; vertical-align:.55em; color:var(--tx-3); margin-right:.06em; } .plan__price--custom{ font-size:clamp(1.9rem,2.2vw,2.4rem); line-height:1.1; font-style:italic; display:flex; align-items:center; min-height:clamp(2.75rem,3.2vw,3.5rem); } .plan__rule{ width:26px; height:1px; border:0; background:var(--gold-deep); margin:18px 0 4px; } .plan__specs{ flex:1; display:flex; flex-direction:column; margin:0 0 20px; } .spec{ display:flex; align-items:baseline; gap:8px; min-height:42px; padding-block:7px; border-bottom:1px solid var(--hairline-soft); } .spec dt{ font-family:var(--font-body); font-weight:500; font-size:12.5px; line-height:1.45; color:var(--muted); } .spec__lead{ flex:1; min-width:14px; align-self:center; height:0; border-bottom:0; } .spec dd{ margin:0; font-family:var(--font-body); font-weight:600; font-size:13px; line-height:1.45; color:var(--text-2); text-align:right; font-variant-numeric:tabular-nums; } .spec dd.is-key{ color:var(--gold-light); } .spec dd.is-muted{ color:var(--muted); font-weight:400; } .spec--stack{ display:block; min-height:72px; } .spec--stack dd{ text-align:left; margin-top:4px; font-weight:500; } .spec__hint{ display:block; font-weight:400; font-size:11.5px; line-height:1.4; color:var(--muted); margin-top:2px; } .plan__cta{ margin-top:auto; width:100%; min-height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; font-family:var(--font-body); font-weight:600; font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--btn-fg); background:var(--btn-bg); border:1px solid var(--btn-bd); position:relative; isolation:isolate; transition:background var(--tdur) var(--teas), color var(--tdur) var(--teas), border-color var(--tdur) var(--teas), transform .09s linear; } .plan__cta:hover{ background:var(--btn-bg-h); color:var(--btn-fg); } .plan__cta--fill{ background:var(--btn-bg); } .plan__cta--fill:hover{ background:var(--btn-bg-h); } .plan__cta:active{ transform:translateY(1px); } .plan__spot{ position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; background:radial-gradient(220px at var(--mx,50%) var(--my,50%), rgba(246,248,247,.06), transparent 70%); transition:opacity .2s linear; pointer-events:none; } .plan.is-hover{ transform:translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); box-shadow:0 30px 60px -28px rgba(0,0,0,.65), 0 0 0 1px rgba(246,248,247,.10), 0 0 44px -14px rgba(246,248,247,.16); } .plan.is-hover .plan__engrave{ opacity:.9; } .plan.is-hover .plan__spot{ opacity:1; } .plan.is-selected{ box-shadow:0 0 0 1px var(--gold-cta), 0 24px 60px -30px rgba(246,248,247,.4); } .plan--popular{ background:var(--card-pop); border:1px solid var(--btn-bd); box-shadow:0 28px 70px -36px rgba(0,0,0,.5); } .plan__ribbon{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:6px 14px; white-space:nowrap; border-radius:9px; font-family:var(--font-body); font-weight:600; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--btn-fg); background:var(--btn-bg); border:1px solid var(--btn-bd); transition:background var(--tdur) var(--teas), color var(--tdur) var(--teas); } .plan--custom{ border:1px dashed rgba(246,248,247,.22); } @media (max-width:1279px) and (min-width:720px){ .plans{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:719px){ .plans{ grid-template-columns:1fr; gap:16px; } } html.intro-active .masthead{ z-index:970; pointer-events:none; } html.intro-active .masthead .brand, html.intro-active .masthead .brand__powered, html.intro-active .toc__link, html.intro-active .masthead .langdrop, html.intro-active .masthead .lang__opt, html.intro-active .masthead__auth, html.intro-active .masthead__menu, html.intro-active .sound-toggle{ opacity:0; } html.intro-active .folio{ z-index:940; pointer-events:none; } html.intro-active .folio > *{ opacity:0; } html.intro-active .folio::before{ transform:scaleX(var(--folio-line,0)); } html.intro-active .site-main{ z-index:960; } html.intro-active .site-bg{ background:#000; } /* match the clip's pure-black bg through the dissolve — silk + green fade in afterwards */ html.intro-active .skip-link{ visibility:hidden; } @keyframes introBackstop{ to{ opacity:1; } } @keyframes introBackstopShow{ to{ visibility:visible; } } html.intro-active .masthead .brand, html.intro-active .masthead .brand__powered, html.intro-active .toc__link, html.intro-active .masthead .langdrop, html.intro-active .masthead .lang__opt, html.intro-active .masthead__auth, html.intro-active .masthead__menu, html.intro-active .sound-toggle, html.intro-active .folio > *{ animation:introBackstop .6s ease-out var(--backstop-delay,9s) forwards; } html{ scrollbar-gutter:stable; } html.intro-lock{ overflow:hidden; } :root{ --subfooter-h:44px; } .folio{ position:fixed; left:0; right:0; bottom:0; z-index:90; height:var(--subfooter-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding-inline:max(var(--gutter), env(safe-area-inset-left)); background:rgba(7,12,10,.65); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-size:12px; transition:transform .26s var(--ease), opacity .24s var(--ease), background-color var(--tdur) var(--teas); } body[data-nav="light"] .folio{ background:rgba(232,216,182,.88); } html.intro-active .folio{ -webkit-backdrop-filter:none; backdrop-filter:none; } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .folio{ background:rgba(7,10,11,.94); } body[data-nav="light"] .folio{ background:rgba(250,246,235,.96); } } .folio::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--hairline); transform-origin:right; } .folio__left{ display:flex; align-items:center; gap:1.2rem; color:var(--muted); font-family:var(--font-body); font-weight:400; } .folio__chapter{ display:flex; align-items:baseline; gap:.45em; opacity:0; transition:opacity .3s var(--ease); } .folio__chapter.is-set{ opacity:1; } .folio__no{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:13px; color:var(--gold); } .folio__slash{ color:var(--gold-deep); } .folio__name{ font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); transition:opacity .3s var(--ease); } .folio__right{ display:flex; align-items:center; gap:1.4rem; justify-self:end; } .folio__risk{ color:var(--muted); border-bottom:1px dotted rgba(150,152,151,.5); transition:color .2s var(--ease); } .folio__risk:hover{ color:var(--text); } .folio__lang .lang__opt{ font-size:10.5px; } .folio.is-docked{ opacity:0; pointer-events:none; } .folio.is-hidden{ transform:translateY(100%); } body{ padding-bottom:var(--subfooter-h); } @media (max-width:760px){ .folio{ height:40px; grid-template-columns:auto 1fr auto; font-size:11px; } .folio__copy{ display:none; } .folio__lang{ display:none; } } .eyebrow{ font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); } .btn{ font-family:var(--font-body); font-weight:600; font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; border-radius:6px; } .btn--gold{ color:var(--white); background:transparent; box-shadow:inset 0 1px 0 var(--glint), inset 0 -1px 0 rgba(0,0,0,.28), 0 10px 28px -14px rgba(246,248,247,.5); } .btn--gold:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.28), 0 16px 40px -14px rgba(246,248,247,.6); } .btn--gold:active{ transform:translateY(1px); } .rule__statement em, .rule__big em{ font-style:italic; background:var(--foil); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .rule__seal-rosette{ position:absolute; left:50%; top:50%; width:280px; height:280px; transform:translate(-50%,-50%); color:var(--gold); opacity:.06; pointer-events:none; } .footer{ position:relative; overflow:clip; background:transparent; } .footer::after{ display:none; } /* the silk runs to the very end — no dark pool stain */ .footer > *{ position:relative; z-index:1; } .footer__watermark{ position:absolute; left:50%; top:46%; width:320px; height:320px; transform:translate(-50%,-50%); color:var(--gold); opacity:.06; pointer-events:none; z-index:0; } .footer__top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; padding-top:clamp(56px,8vw,104px); } .brand--lg{ height:auto; gap:3px; } .brand--lg .brand__img{ height:54px; } .footer__lang .lang__opt{ text-transform:none; letter-spacing:.04em; font-size:13px; } .footer__no{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:11px; color:var(--gold); margin-right:8px; } .footer__col a{ display:block; font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); padding-block:.45em; transition:color .2s var(--ease); } .footer__col a:hover{ color:var(--text); } .footer__colttl{ font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:.9rem; } .footer__disclaimer{ font-size:12.5px; line-height:1.7; color:var(--muted); max-width:72ch; } .footer__copy{ font-size:12px; color:var(--muted); } .footer__contact{ display:inline-block; margin-top:1.1rem; font-family:var(--font-body); font-size:.95rem; letter-spacing:.02em; color:var(--gold-light); border-bottom:1px solid var(--hairline); padding-bottom:3px; transition:color .2s var(--ease), border-color .2s var(--ease); } .footer__contact:hover{ color:var(--gold-bright); border-color:var(--gold); } .benefit{ position:relative; isolation:isolate; border-radius:14px; background:var(--card); border:1px solid var(--edge); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); transition:background var(--tdur) var(--teas), border-color var(--tdur) var(--teas); } .benefit::before{ display:none; } .benefit::after{ display:none; } .awaiting-copy{ display:none; } html.qa .awaiting-copy{ display:block; position:absolute; right:-1rem; top:0; transform:rotate(90deg); transform-origin:top right; font-family:var(--font-body); font-weight:600; font-size:10px; letter-spacing:.3em; color:var(--amber); opacity:.8; } .leader{ position:relative; height:0; pointer-events:none; } .act--about{ padding-top:clamp(28px,5vh,68px); } .leader__spill{ display:none; } .about__block{ position:relative; max-width:min(880px,100%); margin-inline:auto; text-align:left; } .about__lead{ max-width:44ch; margin:clamp(1.6rem,3vw,2.6rem) auto clamp(2.8rem,5vw,4rem); text-align:center; font-size:clamp(18px,1.5vw,22px); line-height:1.6; font-weight:400; color:var(--tx-2); letter-spacing:.002em; } .about__list{ list-style:none; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.2rem,4vw,3.4rem) clamp(2.6rem,5vw,4.6rem); } @media (max-width:680px){ .about__list{ grid-template-columns:1fr; } } .about__list li{ position:relative; padding-top:1.5rem; border-top:1px solid var(--hairline); font-size:var(--fs-body); line-height:1.62; color:var(--grey); } .about__list li::before{ display:none; } .about__list strong{ display:block; margin-bottom:.5rem; font-family:var(--font-display); font-weight:500; font-size:1.4rem; line-height:1.22; letter-spacing:-.005em; color:var(--white); } .about__close{ max-width:54ch; margin:clamp(2.8rem,5vw,4rem) auto 0; text-align:center; font-size:var(--fs-body); line-height:1.55; color:var(--grey); font-style:italic; } .about__body{ font-size:var(--fs-lead); line-height:1.55; font-weight:520; color:var(--text-2); text-align:left; } .how__steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:0; align-items:start; max-width:920px; margin-inline:auto; } .step{ position:relative; display:grid; grid-template-rows:auto auto auto; justify-items:center; align-content:start; row-gap:clamp(1rem,2.4vh,1.5rem); padding-block:.5rem; padding-inline:clamp(.4rem,2vw,1.4rem); text-align:center; } .step__no{ font-family:var(--font-display); font-weight:400; font-style:italic; font-size:clamp(3rem,5vw,4.6rem); line-height:.9; letter-spacing:.01em; } /* connected node sitting on a hairline rail that links the three steps */ .step__node{ position:relative; width:100%; height:12px; display:grid; place-items:center; } .step__node::before{ content:""; position:absolute; top:50%; left:0; right:0; height:1px; transform:translateY(-50%); background:var(--edge-soft); } .step:first-child .step__node::before{ left:50%; } .step:last-child .step__node::before{ right:50%; } .step__node::after{ content:""; position:relative; z-index:1; width:9px; height:9px; border-radius:50%; background:var(--grey); transition:background-color .45s var(--ease), box-shadow .45s var(--ease); } .step:last-child .step__node::after{ background:var(--white); box-shadow:0 0 14px rgba(246,248,247,.45); } .step:hover .step__node::after{ background:var(--white); } .step__title{ font-family:var(--font-body); font-weight:600; font-size:var(--fs-h3); color:var(--text); } .step__body{ font-size:var(--fs-body); color:var(--text-2); max-width:52ch; } .tc{ display:flex; flex-direction:column; align-items:center; text-align:center; margin:0 0 clamp(18px,2.8vh,30px); } .tc__meta{ display:none; } .tc__no{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:14px; color:var(--gold-light); } .tc__rule{ display:none; } .tc__punch{ width:28px; height:28px; color:var(--gold); opacity:.35; flex:0 0 auto; } .tc__head{ font-family:var(--font-display); font-weight:500; font-size:var(--fs-h2); line-height:1.04; letter-spacing:-.01em; max-width:24ch; text-wrap:balance; color:var(--text); } .tc__head em{ font-style:normal; background:none; -webkit-text-fill-color:currentColor; color:var(--acc); } .tc__lead{ margin-top:clamp(1rem,2.4vh,1.6rem); font-size:var(--fs-lead); font-weight:520; color:var(--text-2); max-width:52ch; margin-inline:auto; } .benefit{ padding:1.4rem 1.4rem; } .benefit__title{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-h3); } .benefit__desc{ font-size:var(--fs-body); } .rule__big{ font-size:var(--fs-mega); line-height:.85; background:none; -webkit-text-fill-color:currentColor; color:var(--tx); font-weight:700; } .rule__grid dd{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.75rem,2vw,2.25rem); color:var(--gold-light); } .rule__grid dt{ font-size:var(--fs-small); font-weight:570; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--muted); } .record{ position:relative; margin-bottom:clamp(1.6rem,3.5vh,2.6rem); } .record__flank{ display:flex; justify-content:space-between; align-items:baseline; gap:2rem; margin-bottom:.6rem; font-family:var(--font-body); font-weight:570; font-size:var(--fs-small); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--muted); } .record__flank span:last-child{ text-align:right; } .record__flank strong{ color:var(--text-2); } .record__giga{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-giga); line-height:.9; letter-spacing:-.03em; text-align:center; background:none; -webkit-text-fill-color:currentColor; color:var(--num); transition:color var(--tdur) var(--teas); font-variant-numeric:tabular-nums; } .record__giga .digit{ display:inline-block; min-width:.62ch; text-align:center; } .reviews__marquee{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .reviews__track{ display:flex; flex-wrap:nowrap; gap:20px; width:max-content; } .reviews__track[data-cloned]{ will-change:transform; animation:reviewsMarquee var(--rev-dur,60s) linear infinite; } .reviews__marquee:hover .reviews__track[data-cloned]{ animation-play-state:paused; } .reviews__track .review{ flex:0 0 clamp(280px,23vw,338px); padding:1.35rem 1.3rem; border:1px solid var(--edge); border-radius:14px; background:var(--card); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); transition:background var(--tdur) var(--teas), border-color var(--tdur) var(--teas); } @keyframes reviewsMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @keyframes reviewsMarqueeRtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } } @media (prefers-reduced-motion: reduce){ .reviews__marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; } .reviews__track{ animation:none; } } .benefit__note{ display:block; margin-top:.7rem; font-size:.78rem; line-height:1.4; color:var(--muted); opacity:.6; } .review__ttl{ font-family:var(--font-body); font-weight:700; font-size:1.0625rem; } .review__txt{ font-size:var(--fs-body); } .sheet-cert{ position:relative; isolation:isolate; border-radius:14px; overflow:hidden; width:min(100%,460px); margin-inline:auto; padding:clamp(1.8rem,3vw,2.4rem); background:var(--card); border:1px solid var(--edge); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); transition:background var(--tdur) var(--teas), border-color var(--tdur) var(--teas); } .sheet-cert::before{ display:none; } .sheet-cert__watermark{ position:absolute; left:50%; top:50%; width:240px; height:240px; transform:translate(-50%,-50%); color:var(--gold); opacity:.06; pointer-events:none; z-index:-1; } .sheet-cert__corner{ position:absolute; font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--tx-3); pointer-events:none; } .sheet-cert__corner--tl{ top:16px; left:18px; } .sheet-cert__corner--br{ bottom:14px; right:18px; transform:rotate(180deg); } .cta__title span{ background:none; -webkit-text-fill-color:currentColor; color:var(--acc); } .lead{ font-size:var(--fs-lead); font-weight:520; line-height:1.55; color:var(--text-2); } @media (max-width:900px){ .how__steps{ grid-template-columns:1fr; row-gap:2rem; } .step{ grid-template-rows:auto auto; } .step__node{ display:none; } .step + .step{ border-left:0; border-top:1px solid var(--hairline-soft); padding-left:0; padding-top:2rem; } } @media (max-width:760px){ .act{ perspective:none; } .leader{ height:0; } html.intro-active .act--about{ opacity:0; } .act--about{ transition:opacity .85s var(--ease) .4s; } .step__no{ font-size:clamp(3.5rem,14vw,5rem); } .record__flank{ flex-direction:column; gap:.3rem; align-items:center; text-align:center; } .record__flank span:last-child{ text-align:center; } .record__giga{ font-size:23vw; } .sheet-cert{ padding:1rem .85rem; } .act__wm{ font-size:clamp(9rem,38vw,13rem); } } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } html, body{ overflow-x:clip; } @supports (padding:max(0px)){ .footer__bar{ padding-bottom:max(0px, env(safe-area-inset-bottom)); } } :focus-visible{ outline:1px solid rgba(246,248,247,.5); outline-offset:2px; border-radius:6px; } .plan:focus-within{ outline:1px solid rgba(246,248,247,.5); outline-offset:4px; } .skip-link{ z-index:1000; } @media (max-width:760px){ .masthead__menu{ min-height:44px; padding-inline:.6em; } .sound-toggle{ width:44px; height:44px; } .lang__opt{ min-width:40px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } .footer__col a{ padding-block:.45em; } .plan__cta{ min-height:48px; } } @media (orientation:landscape) and (max-height:540px){ .act{ min-height:auto; padding-block:clamp(48px,12vh,90px); } } @media (max-width:400px){ :root{ --gutter:18px; } .rule__big{ font-size:clamp(4rem,26vw,7rem); } } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .masthead.is-scrolled{ background:rgba(7,10,11,.94); } } html[lang="ar"]{ --font-display:'Amiri', 'Cormorant', Georgia, serif; --font-body:'Noto Sans Arabic', 'Golos Text', system-ui, sans-serif; } html[lang="ar"] .tc__head{ letter-spacing:0; } html[dir="rtl"] .brand, html[dir="rtl"] .plan__price, html[dir="rtl"] .plan__price sup, html[dir="rtl"] .rule__big, html[dir="rtl"] .rule__pct, html[dir="rtl"] .rule__grid dd, html[dir="rtl"] .record__giga, html[dir="rtl"] .record__count, html[dir="rtl"] [data-langdrop-current], html[dir="rtl"] .lang__opt, html[dir="rtl"] .folio__copy{ direction:ltr; unicode-bidi:isolate; } html[dir="rtl"] .langdrop__menu{ right:auto; left:0; transform-origin:top left; } html[dir="rtl"] .langdrop--up .langdrop__menu{ right:auto; left:0; transform-origin:bottom left; } html[dir="rtl"] .langdrop__menu .lang__opt{ text-align:right; } html[dir="rtl"] .spec dd{ text-align:left; } html[dir="rtl"] .spec--stack dd{ text-align:right; } html[dir="rtl"] .record__flank span:last-child{ text-align:left; } html[dir="rtl"] .about__block, html[dir="rtl"] .about__body{ text-align:right; } /* lead + closing line stay centred in both directions (their own text-align wins) */ html[dir="rtl"] .plan__corner--tl{ left:auto; right:18px; } html[dir="rtl"] .plan__corner--br{ right:auto; left:18px; } html[dir="rtl"] .plan__stamp{ right:auto; left:14px; } html[dir="rtl"] .rule__seal{ right:auto; left:0; } html[dir="rtl"] .sheet-cert__corner--tl{ left:auto; right:18px; } html[dir="rtl"] .sheet-cert__corner--br{ right:auto; left:18px; } html[dir="rtl"] .benefit::before{ right:auto; left:-25%; } html[dir="rtl"] .reviews__track[data-cloned]{ animation-name:reviewsMarqueeRtl; } html[dir="rtl"] .intro__skip{ right:auto; left:2rem; } html[dir="rtl"] .toc__no{ margin-right:0; margin-left:6px; } html[dir="rtl"] .sheet__no{ margin-right:0; margin-left:.5em; } html[dir="rtl"] .footer__no{ margin-right:0; margin-left:8px; } html[dir="rtl"] .sheet__lang .lang__opt + .lang__opt{ border-left:0; border-right:1px solid var(--hairline-soft); } html[dir="rtl"] .btn--gold::after{ transform:translateX(130%); } html[dir="rtl"] .btn--gold:hover::after{ transform:translateX(-130%); } .act--faqcta{ padding-block:clamp(40px,7vh,88px); } .faqcta{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:clamp(1.4rem,4vw,3rem); flex-wrap:wrap; width:min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline:auto; padding:clamp(1.5rem,3vw,2.2rem); border-radius:var(--radius); background:var(--card); border:1px solid var(--edge); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); transition:background var(--tdur) var(--teas), border-color var(--tdur) var(--teas); } .faqcta::before{ display:none; } .faqcta__punch{ position:absolute; right:-26px; top:50%; transform:translateY(-50%); width:230px; height:230px; color:var(--gold); opacity:.05; pointer-events:none; z-index:-1; } .faqcta__txt{ flex:1 1 300px; min-width:0; } .faqcta__title{ margin:0; font-family:var(--font-display); font-weight:500; letter-spacing:-.01em; font-size:clamp(1.7rem,2.2vw + 1rem,2.6rem); line-height:1.05; color:var(--text); } .faqcta__lead{ margin:.55rem 0 0; color:var(--text-2); font-size:var(--fs-lead); line-height:1.45; max-width:48ch; } .faqcta__btn{ flex:0 0 auto; } @media (max-width:620px){ .faqcta{ flex-direction:column; align-items:flex-start; } .faqcta__btn{ width:100%; } } html[dir="rtl"] .faqcta__punch{ right:auto; left:-26px; } .tc__head{ color:var(--white); } .plan__price{ color:var(--num); } /* deep evergreen numerals on cream; milk at night */ /* ── Monochrome reskin: strip banknote + trading-illustration ornament ── */ .tc__punch, .about__chart, .step__icon, .benefit__icon, .act__art, .plan__engrave, .plan__stamp, .plan__corner, .plan__wm, .rule__seal, .rule__seal-rosette, .rule__underline, .platform-screen__chart, .record__stars, .faqcta__punch, .sheet-cert__watermark, .sheet-cert__corner, .footer__watermark{ display:none !important; } .cta__title{ color:var(--white); } .rule__big{ background:none; color:var(--white); -webkit-text-fill-color:var(--white); filter:drop-shadow(0 10px 40px var(--white-glow)); } .rule__statement em, .rule__big em{ background:none; color:var(--white); -webkit-text-fill-color:var(--white); } .record__giga{ background:none; color:var(--white); -webkit-text-fill-color:var(--white); } .step__no{ background:none; color:rgba(246,248,247,.42); -webkit-text-fill-color:currentColor; } .cta__title span{ background:none; color:var(--gold-bright); -webkit-text-fill-color:var(--gold-bright); } .rule__seal, .rule__seal-rosette, .rule__glow{ display:none; } .faqcta__punch, .footer__watermark, .sheet-cert__watermark{ display:none; } .plan:not(.plan--popular) .plan__engrave, .plan:not(.plan--popular) .plan__corner, .plan:not(.plan--popular)::before, .plan:not(.plan--popular)::after{ display:none; } .benefit::before, .benefit::after{ display:none; } .plan__rule{ background:var(--white-hair); } .toc__no, .sheet__no, .folio__no, .footer__no, .faqcta__title, .rule__item dd, .rule__grid dd{ font-family:var(--font-body); } .ticker{ position:fixed; left:0; right:0; top:0; z-index:101; height:44px; overflow:hidden; background:rgba(7,10,11,.6); border-bottom:1px solid rgba(246,248,247,.07); -webkit-backdrop-filter:blur(16px) saturate(1.02); backdrop-filter:blur(16px) saturate(1.02); opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .5s var(--ease), transform .5s var(--ease); -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } .ticker.is-shown{ opacity:1; transform:none; pointer-events:auto; } /* custom FX marquee (ticker.js): seamless -50% loop that never stops; static under reduced-motion. (No hover-pause: the strip is pinned at top:0, so hovering it must not halt the loop.) */ .ticker__track, .ticker__set, .ticker__unit{ display:flex; align-items:center; height:100%; } .ticker__track{ width:max-content; will-change:transform; animation:tickerScroll var(--ticker-dur,40s) linear infinite; } .ticker__item{ display:flex; align-items:baseline; gap:.58em; white-space:nowrap; padding:0 clamp(1.3rem,2.3vw,2.3rem); border-right:1px solid var(--hair); } .ticker__sym{ font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); } .ticker__px{ font-family:var(--font-body); font-size:12.5px; font-weight:500; color:var(--white); font-variant-numeric:tabular-nums; letter-spacing:.01em; } .ticker__chg{ font-size:10px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:.02em; } .ticker__chg--up{ color:var(--up); transition:color var(--tdur) var(--teas); } .ticker__chg--down{ color:var(--dn); transition:color var(--tdur) var(--teas); } @keyframes tickerScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } html.intro-active .ticker{ opacity:0; } /* ticker push: `top` gets its own quick curve, but the PANEL colour + shadow stay on the shared theme tempo — they must land with the ticker, not before */ .masthead{ transition:background-color var(--tdur) var(--teas), box-shadow var(--tdur) var(--teas), padding .4s cubic-bezier(.23,1,.32,1), top .35s cubic-bezier(.23,1,.32,1); } .masthead.is-pushed{ top:44px; } @media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; } } @media (max-width:760px){ .ticker{ height:40px; } .ticker__item{ padding:0 1.2rem; } .ticker__px{ font-size:12px; } .masthead.is-pushed{ top:40px; } } .act__art{ position:absolute; pointer-events:none; z-index:0; color:var(--gold); } .act--about .act__inner, .act--why .act__inner, .act--reviews .act__inner{ z-index:1; } .act__art--candles{ height:auto; } .act--about .act__art--candles{ left:50%; top:50%; transform:translate(-50%,-50%); width:min(680px,90%); opacity:.11; } .act--why .act__art--wide{ left:50%; bottom:0; transform:translateX(-50%); width:min(840px,96%); opacity:.05; } .how__steps{ position:relative; } .how__rail{ display:none; } /* replaced by per-step connected nodes (.step__node) */ .step{ z-index:1; } .step__icon{ position:relative; display:inline-flex; width:66px; height:66px; align-items:center; justify-content:center; margin:0 auto 1rem; border-radius:50%; border:1px solid var(--hairline); background:radial-gradient(circle at 50% 36%, #0C1113, #080B0C); color:var(--gold-light); } .step__icon svg{ width:30px; height:30px; } .platform-screen{ position:relative; margin:0 auto clamp(2rem,4vw,3rem); max-width:580px; border:1px solid var(--hairline); border-radius:12px; overflow:hidden; background:linear-gradient(168deg,#0C1113,#080B0C); box-shadow:0 34px 80px -46px rgba(0,0,0,.7); } /* MT5 slot: empty placeholder frame (real screenshot pending); dev-only marker in QA */ .platform-screen::after{ content:""; display:block; min-height:clamp(170px,26vw,300px); } html.qa .platform-screen::after{ content:"MT5 screenshot slot \2014 pending"; display:flex; align-items:center; justify-content:center; color:var(--faint); font-family:var(--font-body); font-size:var(--fs-small); letter-spacing:.2em; text-transform:uppercase; } .platform-screen__bar{ display:flex; gap:7px; padding:12px 15px; border-bottom:1px solid var(--hairline-soft); } .platform-screen__bar span{ width:9px; height:9px; border-radius:50%; background:var(--gold-deep); opacity:.55; } .platform-screen__chart{ display:block; width:100%; height:auto; padding:26px clamp(20px,4vw,44px) 30px; color:var(--gold); } .platform-screen__chart .ps-line{ color:var(--gold-light); } .act__art--quote{ width:clamp(60px,7vw,104px); opacity:.16; left:5%; top:12%; } .record__stars{ display:flex; justify-content:center; margin-bottom:.6rem; } .record__stars svg{ width:clamp(150px,20vw,196px); height:auto; fill:none; stroke:var(--gold-bright); stroke-width:1.6; stroke-linejoin:round; } @media (max-width:760px){ .how__rail{ display:none; } .act--about .act__art--candles{ width:min(420px,88%); opacity:.08; } .act__art--quote{ top:5%; opacity:.12; } } html[dir="rtl"] .act__art--quote{ left:auto; right:5%; transform:scaleX(-1); } .about__chart{ display:block; width:min(100%,440px); height:auto; margin:1.5rem auto 1.7rem; color:var(--gold); opacity:.7; } .about__chart .ps-line{ color:var(--gold-light); } /* Mobile: rely on the menu sheet for auth — hide the cramped masthead Sign Up/Log in (the sheet already carries them). Fixes a source-order override of the @media(960) hide. */ @media (max-width:960px){ .masthead__auth{ display:none; } } /* ════ Prototype header + hero (propten-bill-depth-final.html) — flat monochrome ════ Applied as overrides on the existing markup so the language switcher, mobile menu, scroll-spy, intro reveal, and the video->bill dissolve all keep working. Header kept fixed (floats over the full-height hero) per CLAUDE.md "masthead floats over". */ .masthead{ padding:22px 44px; background:transparent; } .masthead.is-scrolled{ padding-block:14px; background:rgba(7,10,11,.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .masthead::before, .masthead__thread{ display:none; } .masthead__in{ display:flex; align-items:center; gap:28px; padding:0; } .masthead__brand{ flex-direction:row; align-items:center; gap:9px; } .brand{ gap:0; } .brand__img{ height:27px; opacity:.92; } .brand__powered{ margin:0; max-width:none; white-space:nowrap; font-size:11px; color:var(--faint); } .brand__powered a{ color:inherit; border:0; } .toc{ margin-left:auto; gap:30px; } .toc__no{ display:none; } .toc__link{ font-size:12px; letter-spacing:.14em; color:var(--grey); background-image:none; padding:0; } .toc__link:hover, .toc__link.is-spy{ color:var(--white); } .masthead__actions{ gap:18px; } .langdrop__btn{ font-size:12px; letter-spacing:.14em; color:var(--grey); padding:0; } .langdrop__btn:hover, .langdrop.is-open .langdrop__btn{ color:var(--white); } /* Buttons — CREAM actions on both grades (Daylight). Secondary (.enter/login): quieter cream chip. Primary: full cream fill; on daylight the firmer themed outline + shadow carry the separation. */ .masthead__cta, .masthead__login, .cta__login, .enter{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--btn-fg); background:var(--btn-bg); border:1px solid var(--btn-bd); border-radius:10px; padding:10px 20px; transition:background var(--tdur) var(--teas), color var(--tdur) var(--teas), border-color var(--tdur) var(--teas); } .masthead__cta:hover, .masthead__login:hover, .cta__login:hover, .enter:hover{ background:var(--btn-bg-h); color:var(--btn-fg); } .plan__cta, .faqcta__btn, .cta__signup, .cta{ background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd); border-radius:12px; box-shadow:var(--btn-lift); text-transform:uppercase; transition:background var(--tdur) var(--teas), color var(--tdur) var(--teas), border-color var(--tdur) var(--teas), box-shadow var(--tdur) var(--teas); } .plan__cta:hover, .plan__cta--fill:hover, .faqcta__btn:hover, .cta__signup:hover, .cta:hover{ background:var(--btn-bg-h); color:var(--btn-fg); border-color:var(--btn-bd); } @media (max-width:960px){ .masthead__actions{ margin-left:auto; } } @media (max-width:760px){ .brand__powered{ display:none; } } /* New white logo lockup — size by height only so its baked text proportions stay exact */ header .logo{ height:46px !important; width:auto !important; opacity:1; } /* ── Footer — brand + about + email | numbered navigation | risk notice, then a © base row ── */ .footer{ padding:clamp(64px,9vh,104px) 0 46px; border-top:0; background:transparent; } .footer::after{ display:none; } .footer__wrap{ width:min(100% - 88px, 1200px); margin-inline:auto; } .footer__cols{ display:grid; grid-template-columns:1.5fr .8fr 1.2fr; gap:clamp(2rem,5vw,5rem); align-items:start; } .footer__brand{ display:flex; flex-direction:column; align-items:flex-start; } .footer__logolink{ display:inline-flex; } .footer__logo{ height:36px; width:auto; opacity:1; display:block; } .footer__about{ margin:1.5rem 0 0; max-width:44ch; color:var(--grey); font-size:14px; line-height:1.75; } .footer__contact{ display:inline-block; margin-top:1.7rem; color:var(--white); font-size:14px; border-bottom:1px solid var(--hair); padding-bottom:3px; transition:border-color .25s ease; } .footer__contact:hover{ border-color:rgba(246,248,247,.5); } .footer__colttl{ margin:0 0 1.7rem; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--faint); } .footer__nav{ display:flex; flex-direction:column; gap:1.15rem; } .footer__navlink{ display:flex; align-items:baseline; gap:.9rem; color:var(--grey); font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; transition:color .2s ease; } .footer__navlink:hover{ color:var(--white); } .footer__no{ font-family:var(--font-display); font-style:normal; font-weight:500; font-size:12px; color:var(--faint); min-width:1.8ch; } .footer__risk{ margin:0; color:var(--grey); font-size:13px; max-width:48ch; line-height:1.7; } .footer__base{ margin-top:clamp(2.6rem,6vh,4.4rem); padding-top:1.7rem; border-top:0; } .footer__cr{ margin:0; color:var(--faint); font-size:12px; letter-spacing:.04em; } .footer__cr a{ color:var(--faint); transition:color .2s ease; } .footer__cr a:hover{ color:var(--white); } @media (max-width:760px){ .footer__cols{ grid-template-columns:1fr; gap:2.6rem; } .footer__about, .footer__risk{ max-width:none; } } /* keep header + hero copy aligned at the 44px gutter; tighten on mobile */ @media (max-width:760px){ .masthead{ padding-inline:22px; } } /* ── Tweaks: hero headline size, true vertical centring, copy nudged right, lighter header text ── */ .toc__link, .langdrop__btn, .masthead__cta, .masthead__login{ font-weight:500; } /* was faux-bold 600 */ .masthead__cta, .masthead__login{ white-space:nowrap; } /* keep "SIGN UP"/"LOG IN" on one line */ /* ══ Offer 2 — course program cards on the homepage (#doublecase section) ═════ the cards ride the pricing .plan system (planPointer hover included) */ .act--dcplans{ padding-block:clamp(34px,6vh,72px); } .plans--dc{ grid-template-columns:repeat(3,minmax(0,1fr)); } /* same breakpoints as the base .plans grid — .plans--dc is equal-specificity and declared later in the file, so without these it silently wins over .plans's own media queries and stays 3-up (cards ~100px wide, prices wrapping) all the way down to phone widths. */ @media (max-width:1279px) and (min-width:720px){ .plans--dc{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:719px){ .plans--dc{ grid-template-columns:1fr; gap:16px; } } /* restore the quiet inner frame + top glow that the monochrome pass strips from non-popular plans */ .plan.plan--dc::before, .plan.plan--dc::after{ display:block; } .plan--dc .plan__tier{ margin-top:8px; } /* ── Offer 2 reads as LEARNING via the ground, not the cards ──────────────── The cards stay exactly as they are. Behind them sits one huge, heavily blurred form — an open book with the market rising out of it — drawn in currentColor so it inks itself from the grade (soft shadow on sand, soft light on the night) and blurred + masked until it is atmosphere rather than an illustration. Decorative only: aria-hidden, pointer-events none. */ /* isolate explicitly: the art is z-index:-1, so it must be trapped in THIS section's stacking context. Without it the layer escapes upward and its final position depends on whichever ancestor happens to make a context — and #pt-bg (the fixed silk canvas, z-index:0) is opaque enough to bury it. */ .act--dcplans{ position:relative; isolation:isolate; } /* NO blur. A blurred silhouette reads as a stain; a crisp hairline at the same weight reads as an engraving. Softness comes from opacity and the gradient wash, never from defocus. Full-bleed so it feels like ground rather than a picture parked in the middle. */ .dcp__bg{ position:absolute; inset:0 -5%; z-index:-1; pointer-events:none; overflow:hidden; color:var(--tx); opacity:.21; /* ONE radial mask: two layers would need mask-composite, which falls back to union where unsupported — i.e. no fade at all, hard clipped edges. Widened once the glyphs moved OUT to the margins: at the old 104%/78% the bottom corner pair sat at r=.66 and lost ~40% of its ink. */ -webkit-mask-image:radial-gradient(122% 98% at 50% 50%, #000 62%, transparent 100%); mask-image:radial-gradient(122% 98% at 50% 50%, #000 62%, transparent 100%); /* COLOUR is the thing that moves once the glyphs are in — they never fade back out, they re-ink with the grade (ink on sand → milk on the night that follows). The strokes are currentColor, so transitioning `color` here carries every glyph on the one shared theme tempo. */ transition:opacity var(--tdur) var(--teas), color var(--tdur) var(--teas); } .dcp__bg svg{ display:block; width:100%; height:100%; } /* every glyph keeps the SAME hairline weight whatever its scale — that consistency is what makes a scattered field read as a drawn plate instead of clip-art. (vector-effect does NOT inherit, so it is set here, not on the parent .) */ .dcp__bg path{ vector-effect:non-scaling-stroke; } /* milk on near-black lifts harder than ink on sand — pull the night back */ body[data-nav="dark"] .dcp__bg{ opacity:.17; } /* phones: the section is tall+narrow, and `slice` on that ratio would zoom a couple of glyphs to poster size. Pin a 16/9 band instead so the whole field stays small and legible. */ @media (max-width:719px){ .dcp__bg{ inset:auto -5%; top:50%; transform:translateY(-50%); aspect-ratio:16/9; opacity:.17; } } @media (prefers-reduced-motion: reduce){ .dcp__bg{ transition:none; } } .plan--dc .spec dd.dcp-money{ font-size:17px; } /* the course fee reads at a glance */ .plan__sub{ margin-top:7px; font-family:var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); } /* RTL: money stays LTR */ html[dir="rtl"] .dcp-money, html[dir="rtl"] .crs__price{ direction:ltr; unicode-bidi:isolate; } /* ── Course language chooser (course-basic.php / course-profi.php) ─────────── Interstitial between the homepage Offer 2 card and the Double Case checkout: confirms WHICH program was picked, then asks for the course language. The course ships in 3 languages (EN/RU/AR) while the SITE has 5 — so the button labels are native names + codes, never translated. */ /* warm the ground: the FAQ page's green ambience. Without it these pages read as a black void — the single biggest reason they felt cold. */ .page-crs .site-bg{ background:radial-gradient(96% 74% at 50% 26%, rgba(26,70,49,.62), rgba(11,28,21,.44) 46%, var(--bg) 80%); } .crs{ padding-top:calc(var(--nav-h) + clamp(34px,7vh,76px)); padding-bottom:clamp(44px,9vh,96px); } .crs__in{ max-width:760px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; } /* program confirmation — plain centred type. No card, no border, no dividers: every one of those was a "line", and this only has to say WHICH one you picked. */ .crs__prog{ display:flex; flex-direction:column; align-items:center; } .crs__progname{ margin:0; font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:rgba(246,248,247,.55); } .crs__price{ margin:.5rem 0 0; font-family:var(--font-display); font-weight:600; font-size:clamp(2.6rem,3.4vw,3.6rem); line-height:1; color:var(--white); font-variant-numeric:lining-nums; } .crs__price sup{ font-size:.46em; vertical-align:.62em; color:rgba(246,248,247,.45); margin-inline-end:.06em; } .crs__acct{ margin:.45rem 0 0; font-family:var(--font-body); font-weight:500; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(246,248,247,.45); } .crs__fee{ margin:1.15rem 0 0; font-size:17px; color:rgba(246,248,247,.7); } .crs__fee b{ font-weight:600; color:var(--white); margin-inline-start:.45em; } .crs__title{ margin:clamp(2.2rem,5vh,3.4rem) 0 0; font-family:var(--font-display); font-weight:600; letter-spacing:0; font-size:clamp(2rem,2.6vw + 1rem,3.3rem); line-height:1.16; color:var(--white); max-width:16ch; } /* language buttons — one word each, big and soft; no gradients, no shadows */ .crs__langs{ margin-top:clamp(2rem,4.6vh,3rem); width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.7rem,1.5vw,1rem); } .crs__lang{ display:flex; align-items:center; justify-content:center; min-height:96px; padding:1.2rem 1rem; text-decoration:none; border-radius:14px; color:var(--white); background:rgba(246,248,247,.045); border:1px solid rgba(246,248,247,.09); transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .crs__name{ font-family:var(--font-body); font-weight:500; line-height:1.2; font-size:clamp(1.3rem,.7vw + 1.1rem,1.65rem); } .crs__name[lang="ar"]{ font-family:"Noto Sans Arabic","Amiri",var(--font-body); } .crs__lang:hover{ background:rgba(150,225,185,.12); border-color:rgba(150,225,185,.4); transform:translateY(-3px); } .crs__lang:active{ transform:translateY(-1px); } .crs__back{ margin-top:clamp(1.8rem,4vh,2.4rem); font-family:var(--font-body); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,248,247,.45); transition:color .2s ease; } .crs__back:hover{ color:var(--white); } /* ── Video rail (#videos) — full-bleed self-scrolling band ───────────────── Cards drift continuously and bleed off both edges. Thumbnails are plain ; the YouTube iframe is only created on click (see assets/js/videos.js) so the landing page never pays for 8 embeds. */ .act--vids{ padding-block:clamp(40px,7vh,88px); } .act--vids .tc{ position:relative; } /* ── The night ──────────────────────────────────────────────────────────── The black band is retired: the SILK ITSELF darkens over videos → Benefits → Exam Conditions. The .darkzone wrapper survives purely as the night-region marker for the theme engine (app.js drives background.js's u_light from it), and its reserved breathing room keeps the grade moment airy. */ :root{ --dz-out:clamp(150px,20vh,240px); --dz-in:clamp(50px,6.5vh,80px); } .darkzone{ position:relative; } .act--dcplans{ padding-bottom:var(--dz-out); } .act--platform{ padding-top:var(--dz-out); } .darkzone .act--vids{ padding-top:calc(var(--dz-in) + clamp(26px,3.5vh,54px)); } .darkzone .act--rule{ padding-bottom:max(var(--sect-pad), calc(var(--dz-in) + clamp(26px,3.5vh,54px))); } /* the rail no longer carries its own band — the dark zone above provides it */ .vrail{ position:relative; margin-top:clamp(1.4rem,3vh,2.1rem); padding-block:clamp(16px,2.6vh,34px); overflow:hidden; } /* SAME MECHANISM AS THE REVIEWS/TICKER BANDS: a pure CSS keyframe animation on a width:max-content flex row whose children are duplicated once, translated 0 → -50%. No JS drives the motion, so nothing can stall it. NOTE: spacing uses margin-inline-end on .vcard, NOT `gap` — with `gap`, 16 children have 15 gaps, so the -50% point lands half a gap off and the loop visibly jumps. Per-card margin makes each half exactly 8×(card+margin). */ .vrail__track{ display:flex; width:max-content; will-change:transform; animation:vrailMarquee var(--vrail-dur,80s) linear infinite; } .vrail__track:hover{ animation-play-state:paused; } /* so a card can be clicked */ .vrail__track.is-playing{ animation-play-state:paused; } /* a video is open */ @keyframes vrailMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* Arabic: mirror the travel direction */ html[dir="rtl"] .vrail__track{ animation-name:vrailMarqueeRtl; } @keyframes vrailMarqueeRtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } } .vcard{ flex:0 0 clamp(300px,33vw,500px); display:flex; flex-direction:column; margin-inline-end:clamp(16px,1.7vw,26px); } /* These thumbnails are genuinely dark — measured across all 8, the mean pixel is 29/255, the MEDIAN is 9-13/255, and the outer 12% (the part that touches the band) sits at 18-30/255. Against a #000 band that is the same value, so the cards had no visible boundary and simply dissolved into it. Two fixes, neither of which touches the palette (the thumbs measure ~8/255 saturation, so they are already near-monochrome and stay that way): a) LIFT THE SHADOWS, not the whole image. filter:brightness() is a MULTIPLY — on a pixel of value 9 it does nothing (9 x 1.06 = 10), so it cannot rescue content this dark. contrast() below 1 pivots around mid-grey and therefore ADDS to the darks: the pair below takes the median 9 -> 25 and the edges 26 -> 41 while leaving a 250 highlight at 249. That is a lifted-black film grade, not a wash — the bright content in each frame keeps its punch. b) GIVE THE CARD AN EDGE. A hairline plus a lit top edge and a wide, very low alpha bloom, so each card reads as sitting in light above the black rather than being cut out of it — the same "pool" device the hero bill uses. */ .vcard__thumb{ position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; overflow:hidden; border-radius:14px; cursor:pointer; background:rgba(246,248,247,.05); border:1px solid rgba(246,248,247,.15); box-shadow:inset 0 1px 0 rgba(246,248,247,.08), 0 0 44px -12px rgba(246,248,247,.07), 0 30px 60px -40px #000; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .vcard__thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(.88) brightness(1.06); transition:transform .5s var(--ease), filter .3s var(--ease); } .vcard__thumb:hover{ border-color:rgba(150,225,185,.42); box-shadow:inset 0 1px 0 rgba(246,248,247,.10), 0 0 44px -10px rgba(246,248,247,.10), 0 22px 48px -34px rgba(0,0,0,.9), 0 0 30px -20px rgba(70,201,138,.5); } .vcard__thumb:hover img{ transform:scale(1.045); filter:contrast(.9) brightness(1.12); } .vcard__thumb:focus-visible{ outline:1px solid rgba(246,248,247,.6); outline-offset:3px; } /* deliberately quiet: just enough to say "this plays", never a hard UI blob */ .vcard__play{ position:absolute; inset:0; margin:auto; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; pointer-events:none; opacity:.7; background:rgba(8,16,13,.28); border:1px solid rgba(246,248,247,.15); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:opacity .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); } .vcard__play svg{ width:14px; height:14px; color:rgba(246,248,247,.92); margin-inline-start:2px; } .vcard__thumb:hover .vcard__play{ opacity:1; background:rgba(8,16,13,.48); transform:scale(1.07); } .vcard__yt{ position:absolute; top:10px; inset-inline-start:10px; pointer-events:none; display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; background:rgba(7,10,11,.62); border:1px solid rgba(246,248,247,.10); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-family:var(--font-body); font-weight:500; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,248,247,.72); } .vcard__yt svg{ width:13px; height:auto; color:rgba(246,248,247,.8); } /* the short topic label IS the title now — centred, white, larger. Body sans (Golos Text 600), NOT the display serif: Cormorant's high stroke contrast is what read as "sharp" here. 600/700 are now really loaded, so this is a true semibold, not a browser-synthesised fake. */ .vcard__ttl{ margin:1.15rem 0 0; text-align:center; font-family:var(--font-body); font-weight:600; font-size:clamp(1.4rem,.95vw + 1.1rem,2.05rem); line-height:1.28; letter-spacing:.005em; color:var(--white); } /* swapped in on click, keeps the exact thumbnail footprint (no layout shift) */ .vcard__frame{ width:100%; aspect-ratio:16/9; display:block; border-radius:14px; border:1px solid rgba(246,248,247,.12); background:#000; } @media (max-width:760px){ .vcard{ flex:0 0 84vw; } } /* Reduced motion: no drift. The cards are NOT duplicated in that case, and the rail becomes a normal scrollable strip so all 8 stay reachable. */ .vrail__track.is-static{ width:auto; animation:none; overflow-x:auto; padding-inline:var(--gutter); scrollbar-width:none; -ms-overflow-style:none; } .vrail__track.is-static::-webkit-scrollbar{ display:none; } @media (prefers-reduced-motion: reduce){ .vrail__track{ animation:none; } .vcard__thumb, .vcard__thumb img, .vcard__play{ transition:none; } .vcard__thumb:hover img{ transform:none; } } /* courses.php — the UNLISTED program picker (share-link only, no nav entry). Two big whole-card links → the matching language chooser. */ .crs__picks{ margin-top:clamp(2rem,4.6vh,3rem); width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.8rem,1.8vw,1.3rem); } .crs__pick{ display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; color:var(--white); border-radius:18px; padding:clamp(1.8rem,3.4vw,2.6rem) clamp(1.2rem,2.4vw,1.8rem); background:rgba(246,248,247,.045); border:1px solid rgba(246,248,247,.09); transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .crs__pick > *{ display:block; } .crs__pick .crs__price{ font-size:clamp(2.2rem,2.6vw,2.9rem); } .crs__pickfee{ margin:1.1rem 0 0; font-size:16px; color:rgba(246,248,247,.7); } .crs__pickfee b{ font-weight:600; color:var(--white); margin-inline-start:.4em; } .crs__go{ margin:1.5rem 0 0; font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,248,247,.55); transition:color .25s var(--ease); } .crs__pick:hover{ background:rgba(150,225,185,.12); border-color:rgba(150,225,185,.4); transform:translateY(-3px); } .crs__pick:hover .crs__go{ color:var(--white); } .crs__pick:active{ transform:translateY(-1px); } @media (max-width:620px){ .crs__langs{ grid-template-columns:1fr; gap:.6rem; } .crs__lang{ min-height:72px; } .crs__picks{ grid-template-columns:1fr; } } @media (prefers-reduced-motion: reduce){ .crs__pick{ transition:none; } .crs__pick:hover{ transform:none; } } @media (prefers-reduced-motion: reduce){ .crs__lang{ transition:none; } .crs__lang:hover{ transform:none; } } /* ── Offers restructure (PDF 2026-07-03): intro statements after the hero ──── replaces the old About + How sections; keeps id="about" so the hero→section scrim blend (#about.pt-scrim::before) still applies. */ .act--about{ padding-block:clamp(48px,10vh,110px); } .ofintro{ max-width:820px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; gap:clamp(1.2rem,3vh,2rem); } .ofintro__title{ margin:0; font-family:var(--font-display); font-weight:500; letter-spacing:-.01em; font-size:clamp(1.9rem,2.6vw + .9rem,3.2rem); line-height:1.12; color:var(--white); } .ofintro__lead{ margin:0 auto; max-width:62ch; color:var(--text-2); font-size:var(--fs-lead); line-height:1.65; } /* ── readability pass, Daylight edition: the global grade keeps text and canvas matched, so the old dark halos and hardcoded near-white leads are retired — everything reads the theme tokens ── */ .tc__head, .ofintro__title{ font-weight:600; } .tc, .ofintro{ position:relative; isolation:isolate; } .tc::before, .ofintro::before{ display:none; } .tc__lead, .ofintro__lead{ color:var(--tx-2); text-shadow:none; } /* calmer card details — fewer lines, quieter type, values still read first */ .spec{ border-bottom-color:var(--edge-soft); padding-block:11px; } .spec__lead{ border-bottom:0; } /* keep the spacer, lose the dotted line */ .spec dt{ font-weight:400; font-size:13.5px; letter-spacing:.01em; color:var(--tx-2); } .spec dd{ font-weight:500; font-size:15px; color:var(--tx); } .spec dd.is-key{ font-weight:600; font-size:16.5px; } .spec__hint{ font-weight:400; font-size:12px; color:var(--tx-3); } .plan--dc .spec dd.dcp-money{ font-size:17px; } /* ══ DAYLIGHT append — chrome theming + the two new components ═════════════ */ /* the FX bar gets the masthead's themed panel when shown */ .ticker{ background:rgba(7,12,10,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:background var(--tdur) var(--teas), opacity .45s var(--ease), transform .45s var(--ease); } body[data-nav="light"] .ticker{ background:rgba(232,216,182,.88); } .ticker__sym{ color:var(--tx-3); } .ticker__px{ color:var(--tx); } .ticker__sym, .ticker__px{ transition:color var(--tdur) var(--teas); } /* video cards: real framed panels — glass ground + edge, so the clips sit IN something instead of floating on the silk */ /* Denser green glass so the frame reads as a panel around the clip rather than a faint outline — but STILL THEMED. The rail is inside .darkzone, yet the grade only flips once the viewport centre crosses into it, so the top of the zone is on screen in daylight for a moment. Pinning these to night values left the cards black against sand right at that handover. Both grades below, on the one shared tempo. */ body{ --vc-bg:rgba(9,25,18,.82); --vc-bg-h:rgba(13,36,26,.9); } body[data-nav="light"]{ --vc-bg:rgba(252,246,232,.86); --vc-bg-h:rgba(255,252,244,.94); } /* The edge is the SAME material as the inside — no outline in either grade (the pale green line on sand was the daylight half of that outline). background-clip:padding-box is what makes it seamless: by default the background also paints UNDER the border, so a translucent border over it composites twice and lands visibly darker than the face it is meant to match. Clipped to the padding box, border and interior are one tone over the same blurred backdrop. */ /* background-COLOR, never the `background` shorthand: the shorthand resets background-clip to its initial border-box, so a shorthand in :hover would quietly undo the padding-box above and the doubled-up dark edge would reappear the moment the pointer lands on a card. */ .vcard{ background-color:var(--vc-bg); background-clip:padding-box; border:2px solid var(--vc-bg); border-radius:14px; padding:10px 10px 14px; -webkit-backdrop-filter:blur(26px) saturate(1.25); backdrop-filter:blur(26px) saturate(1.25); box-shadow:0 24px 50px -26px rgba(0,0,0,.62); transition:background-color var(--tdur) var(--teas), border-color var(--tdur) var(--teas), box-shadow .28s var(--ease-doc); } .vcard:hover{ background-color:var(--vc-bg-h); border-color:var(--vc-bg-h); box-shadow:0 26px 56px -24px rgba(0,0,0,.66); } .vcard__thumb{ border:0 !important; border-radius:9px !important; } .vcard__ttl{ margin:.85rem 0 2px; transition:color var(--tdur) var(--teas); } /* drag-to-scrub affordance (videos.js) — vertical touch scroll stays native. user-select:none so dragging across a card doesn't leave the title highlighted; -webkit-user-drag:none so pressing a THUMBNAIL scrubs the rail instead of starting the browser's own image drag-and-drop (videos.js kills dragstart too — this property does nothing in Firefox). */ .vrail__track{ cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; } .vrail__track img{ -webkit-user-drag:none; user-drag:none; } .vrail__track.is-scrub{ cursor:grabbing; } .vrail__track.is-scrub .vcard{ pointer-events:none; } /* no hover states mid-drag */ /* picker card: specs in two columns — halves the card height on desktop */ @media (min-width:720px){ .plans.is-picker .plan__specs{ display:grid; grid-template-columns:1fr 1fr; column-gap:26px; } .plans.is-picker .spec--stack{ grid-column:1 / -1; } } /* Outfit has no italics — normalise the ornament numerals */ .tc__no, .step__no, .folio__no{ font-style:normal; } /* ── Account picker: four sizes over the EXISTING plan cards (i18n-safe — the cards keep their data-i18n DOM; the picker only toggles which one shows). Buttons are built by app.js from each card's data-plan label. ── */ .apick{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:0 0 clamp(14px,2.2vh,22px); } .apick__amt{ font-family:var(--font-display); font-weight:600; font-size:clamp(15px,1.3vw,19px); font-variant-numeric:tabular-nums; padding:12px 24px; border-radius:12px; color:var(--tx-2); background:var(--chip); border:1px solid var(--edge); cursor:pointer; transition:background var(--tdur) var(--teas), color var(--tdur) var(--teas), border-color var(--tdur) var(--teas), transform .15s ease; } .apick__amt:hover{ color:var(--tx); border-color:var(--btn-bd); transform:translateY(-1px); } .apick__amt.is-on{ background:var(--sel-bg); color:var(--sel-fg); border-color:transparent; box-shadow:0 10px 24px -16px rgba(0,0,0,.55); } /* picker mode: single centred card; the others stay in the DOM for i18n */ .plans.is-picker{ display:block; max-width:640px; margin-inline:auto; perspective:none; } .plans.is-picker .plan{ display:none; } .plans.is-picker .plan.is-picked{ display:flex; } .plans.is-picker .plan .plan__engrave, .plans.is-picker .plan .plan__corner, .plans.is-picker .plan .plan__stamp{ display:none; } .plans.is-picker .plan__tier{ margin-top:6px; } .plans.is-picker .plan{ animation:pickSwap .22s var(--ease); } @keyframes pickSwap{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .plans.is-picker .plan{ animation:none; } } /* ── Video lightbox — plays in place; the rail pauses while open ── */ .lb{ position:fixed; inset:0; z-index:120; display:none; place-items:center; background:rgba(4,8,6,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:4vmin; } .lb.open{ display:grid; } .lb__frame{ width:min(1200px,94vw); aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; box-shadow:0 50px 110px -40px rgba(0,0,0,.9); } .lb__frame iframe{ width:100%; height:100%; border:0; display:block; } .lb__x{ position:fixed; top:20px; right:24px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:20px; background:rgba(255,255,255,.12); transition:background .25s; cursor:pointer; z-index:1; } .lb__x:hover{ background:rgba(255,255,255,.22); } body.lb-open{ overflow:hidden; } body.lb-open .vrail__track{ animation-play-state:paused; } html[dir="rtl"] .lb__x{ right:auto; left:24px; } /* ══ THE ARC — the pinned three-act opener after the hero ═══════════════════ Scrolling out of the hero pins one viewport-high stage (#arc wraps the about / pricing / doublecase sections) and the scroll wheel drives a scrub: the intro line grows and fades → "You have 2 options" → Offer 1 assembles (picker drops from under its headline) → Offer 2 (cards rise) → unpin, normal scrolling resumes. `html.arc-on` is set by app.js ONLY when the cinematic runs (desktop + motion + GSAP); without it, everything below is inert and the three sections keep their normal document flow. */ .arc__two{ display:none; } html.arc-on #arc{ position:relative; height:100svh; overflow:clip; } html.arc-on #arc .act{ position:absolute; inset:0; margin:0; min-height:0; display:flex; align-items:center; justify-content:center; padding:calc(var(--nav-h) + 52px) var(--gutter) 18px; visibility:hidden; pointer-events:none; } html.arc-on #arc .act.is-live{ visibility:visible; pointer-events:auto; } /* the acts sit tighter on the stage than in free flow */ html.arc-on #arc .tc{ margin-bottom:clamp(14px,2.4vh,30px); } /* Act A: both lines share one grid cell and crossfade */ html.arc-on #about .act__inner{ display:grid; justify-items:center; align-items:center; text-align:center; } html.arc-on #about .ofintro, html.arc-on #about .arc__two{ grid-area:1/1; } html.arc-on #about .arc__two{ display:block; margin:0; } /* the lead paragraph leaves the stage visually but stays for screen readers — its message IS the two acts that follow */ html.arc-on #about .ofintro__lead{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* the animated blocks composite on their own layers while the stage is live */ html.arc-on #arc .ofintro, html.arc-on #arc .arc__two, html.arc-on #arc .tc, html.arc-on #arc .apick, html.arc-on #arc .plans, html.arc-on #arc .plan--dc{ will-change:transform,opacity; } /* the scrub owns the Offer-2 cards' transform outright — .plan's hover-lift transition would otherwise re-smooth every scrubbed frame (mushy trail) */ html.arc-on #doublecase .plan{ transition:box-shadow .3s var(--ease-doc), background var(--tdur) var(--teas), border-color var(--tdur) var(--teas); } /* ══ THE TEN — the 10% stage (companion pin to the arc) ═════════════════════ #rule pins at the very bottom of the descent, on pure black. The heading and the number are ALREADY THERE when you arrive; scroll makes the number GROW, then the four conditions arrive around it. html.ten-on is set by app.js under the same gates as the arc; without it, normal flow. */ html.ten-on #rule{ min-height:100svh; display:flex; align-items:center; /* the masthead (+ ticker) floats over the stage — centred content would otherwise slide its heading underneath the bar */ padding-block:calc(var(--nav-h) + 52px) clamp(28px,5vh,56px); } /* THE CONSTELLATION — the four conditions ORBIT the number instead of sitting in a 2×2 of bordered boxes: label + value in plain type, each pair facing the middle, the black doing the separating. `.rule__grid{display:contents}` promotes the four items into the section's own grid, so no markup moves and every data-i18n pair stays exactly where it was. */ html.ten-on #rule .rule__inner{ width:min(100% - (var(--gutter) * 2), var(--maxw)); display:grid; align-items:center; justify-items:center; grid-template-columns:1fr auto 1fr; grid-template-areas: "hd hd hd" "c1 ten c2" "c3 ten c4"; column-gap:clamp(24px,4.5vw,78px); row-gap:clamp(16px,3.2vh,40px); } html.ten-on #rule .tc{ grid-area:hd; margin-bottom:clamp(18px,4vh,50px); } html.ten-on #rule .rule__statement{ grid-area:ten; margin:0; } html.ten-on #rule .rule__grid{ display:contents; } html.ten-on #rule .rule__item{ border:0; padding:0; background:none; max-width:20ch; } html.ten-on #rule .rule__item:nth-child(1){ grid-area:c1; } html.ten-on #rule .rule__item:nth-child(2){ grid-area:c2; } html.ten-on #rule .rule__item:nth-child(3){ grid-area:c3; } html.ten-on #rule .rule__item:nth-child(4){ grid-area:c4; } /* each pair faces the number — logical props, so Arabic mirrors for free */ html.ten-on #rule .rule__item:nth-child(odd){ justify-self:end; text-align:end; } html.ten-on #rule .rule__item:nth-child(even){ justify-self:start; text-align:start; } html.ten-on #rule .rule__item dt{ margin-bottom:.35rem; } html.ten-on #rule .rule__item dd{ font-size:clamp(1.35rem,1.7vw,2rem); line-height:1.1; } html.ten-on #rule .rule__statement, html.ten-on #rule .rule__item{ will-change:transform,opacity; } @media (max-width:1100px){ html.ten-on #rule .rule__inner{ column-gap:clamp(16px,3vw,40px); } html.ten-on #rule .rule__item{ max-width:15ch; } } /* trust line above the final CTA — the only real proof figures */ .cta__trust{ margin:0 0 1.4rem; text-align:center; font-size:14.5px; color:var(--tx-2); transition:color var(--tdur) var(--teas); } .cta__trust .stars{ color:var(--gold); letter-spacing:3px; font-size:13px; margin-right:8px; } html[dir="rtl"] .cta__trust .stars{ margin-right:0; margin-left:8px; } /* ══ VIDEO HERO — full-bleed clip, centred lockup, one action ═══════════════ The clip is 16:9; object-fit:cover centres it and scales it up until it covers the viewport whatever the screen ratio. The intro is retired: the head script forces the no-intro path, so the page opens straight onto this. The hero stays a data-night-zone (the clip is dark), so the chrome opens on the night grade exactly as before. */ /* TRANSPARENT — no ground of its own. What is behind the clip is the silk canvas itself, and the silk is already graded to sand before the clip starts fading (the veil SNAPS the grade while the clip is still opaque), so the dissolve lands straight on live silk. Every painted "floor" here was a wall with an edge; there is none. */ .hero{ position:relative; min-height:100svh; display:grid; place-items:center; overflow:clip; background:transparent; padding:calc(var(--nav-h) + 30px) var(--gutter) 44px; } .hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; } .hero__shade{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 92% at 50% 42%, rgba(7,10,11,.14) 0%, rgba(7,10,11,.52) 76%), linear-gradient(180deg, rgba(7,10,11,.44), rgba(7,10,11,.16) 30%, rgba(7,10,11,.16) 58%, rgba(7,10,11,.58)); } /* no bottom mask: the exit is THE VEIL (app.js) — the hero pins and the clip fades out under your scroll, then the arc begins. */ .hero__stack{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; } .hero__brand{ margin:0; } /* the "shadow" is a CLOUD, not an outline: one huge, very-low-opacity dark radial behind the whole stack, so the lockup and the button sit in a soft dark pocket of the clip instead of carrying hard drop-shadows */ .hero__stack::before{ content:""; position:absolute; z-index:-1; inset:-30% -36%; pointer-events:none; background:radial-gradient(50% 48% at 50% 47%, rgba(0,0,0,.32), rgba(0,0,0,.14) 55%, rgba(0,0,0,0) 78%); } .hero__brand img{ display:block; width:clamp(270px, 38vw, 540px); height:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.35)); } .hero__powered{ margin:16px 0 0; font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:rgba(241,240,230,.72); text-shadow:0 1px 10px rgba(0,0,0,.45); } /* the one action: WHITE on the clip (the mockup's white button — the hero sits outside the theme's green/dark pairing on purpose) */ .hero__cta{ display:inline-flex; align-items:center; gap:12px; margin-top:38px; background-color:#FFFFFF; color:#10231A; border:1px solid rgba(16,35,26,.08); border-radius:12px; padding:17px 34px; font-family:var(--font-body); font-weight:600; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; box-shadow:0 14px 34px -14px rgba(0,0,0,.5); transition:background-color .25s var(--ease-doc), transform .25s var(--ease-doc), box-shadow .25s var(--ease-doc); } .hero__cta::after{ content:"\2192"; opacity:.6; } html[dir="rtl"] .hero__cta::after{ content:"\2190"; } .hero__cta:hover{ background-color:#F2EDE0; transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(0,0,0,.55); } .hero__cta:active{ transform:translateY(0) scale(.985); } @media (max-width:760px){ .hero__brand img{ width:min(78vw, 420px); } .hero__cta{ padding:15px 26px; } } /* ══ STRIPPED MASTHEAD — the nav links alone ════════════════════════════════ The hero carries the lockup and the folio carries the language switcher, so the header keeps only its middle element. display:none removes the brand as a GRID ITEM (the toc would slide into column 1), so the row becomes a single centred column instead. The burger must survive for the mobile sheet — its container overlays the end edge, out of the flow. Sign Up / Log in remain in the sheet, the plan cards and the final CTA. */ /* Sign Up / Log in go — they stay reachable in the sheet, the plan cards and the final CTA. The LANGUAGE SWITCHER STAYS: it is the only way to change language on desktop, since the folio's copy is gated off the hero. */ .masthead__brand, .masthead__auth{ display:none; } /* the container is FLEX (a mid-file pass re-declared it away from the original grid) — so centring is justify-content, and the old .toc{margin-left:auto} right-shove must go */ .masthead__in{ justify-content:center; } .toc{ margin-left:0; } /* PHYSICAL offsets on purpose: this container carries direction:rtl (an old trick that visually reversed the auth pair), which flips what inset-inline-end means — the burger landed on the LEFT edge. */ .masthead__actions{ position:absolute; top:50%; transform:translateY(-50%); right:max(24px, env(safe-area-inset-right)); left:auto; } html[dir="rtl"] .masthead__actions{ right:auto; left:max(24px, env(safe-area-inset-left)); } /* MOBILE: the nav links are display:none below 960, so once the actions were ALSO taken out of flow the masthead had no in-flow content left and collapsed to its own padding — a 44px bar with the burger centred in it, sitting under the ticker. Back in flow here; the pre-existing margin-left:auto still pins it to the end edge, and the burger's own min-height gives the bar its height again. */ @media (max-width:960px){ .masthead__actions{ position:static; transform:none; } } /* the folio and the chat launcher stay OFF the hero — they arrive only once the clip has finished fading (app.js sets body.past-hero; on pages without the video hero the class is set immediately). The chat needs !important: `body.bg-on #n8n-chat{opacity:1}` in the page's INLINE styles ties this rule at (1,1,1), and inline