:root{ --navy:#0A1A2E; --navy-deep:#05101E; --ink:#1A2433; --gold:#D8A85F; --gold-soft:#C0A256; --crimson:#AA162A; --e-out:cubic-bezier(.23,1,.32,1); /* strong ease-out for UI motion */ --cream:#FBF7EF; --cream-line:#EADFC9; --text:#F2ECDD; --muted:#9DB0C4; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} html{overflow-anchor:none} /* scroll anchoring fights the reverse playback tweens (browser re-adjusts scrollY mid-rewind) */ body{background:var(--navy-deep); color:var(--text); font-family:"Inter",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; line-height:1.6; overflow-x:hidden} a{color:inherit;text-decoration:none} .masthead{position:absolute; top:0; left:0; right:0; z-index:10; background:linear-gradient(180deg, rgba(4,11,21,.6), rgba(4,11,21,0)); border-bottom:none} /* the header floats INSIDE the opening frame, over the 3D */ .masthead .brandword{display:block; width:clamp(148px,15vw,184px); filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))} /* the REAL vector wordmark (cream), reused from the reveal art — never a substitute typeface */ .masthead .brandword svg{display:block; width:100%; height:auto} .masthead .brand{align-items:center} /* centre the wordmark + tagline as a stacked, centred lockup */ .masthead .brand .tag{text-align:center; letter-spacing:.005em} .masthead .brand .tag .tw{color:#93A5B8} /* 4-class selectors: must OUTRANK the later cream-header .brand .tag rules (specificity-order trap #3) */ .masthead .brand .tag .ta{color:#EDE6D6} .masthead .brand .tag .tm{color:#E06A76} .masthead .brand .tag .te{color:#D8A85F} .masthead .inner{max-width:none; margin:0; padding:14px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px} /* full-width bar: logo hard-left, nav hard-right at the screen edges (Sunny, Jul 22) */ .brand{display:inline-flex; flex-direction:column; gap:2px; line-height:1} .brand img{height:34px; width:auto; display:block} .brand .tag{font-size:10px; letter-spacing:.02em; color:var(--navy); font-weight:500; padding-left:2px} .brand .tag .tw{color:#616B7A; font-weight:500} /* "An" / "company" — muted slate so the parent-company name reads as the focus (AA on cream) */ .brand .tag .ta{color:var(--navy); font-weight:700} /* Apex — navy */ .brand .tag .tm{color:var(--crimson); font-weight:700} /* Medical — crimson */ .brand .tag .te{color:#8A5A20; font-weight:700} /* Enterprises — deep gold, kept legible on the cream header (AA) */ .nav{display:flex; align-items:center; gap:30px} .nav a{font-size:14px; color:#D9CFBB; font-weight:500} .nav a:hover{color:var(--gold)} .nav a:focus-visible{outline:2px solid var(--crimson); outline-offset:4px; border-radius:3px} .pill{background:linear-gradient(180deg,#F3D593 0%,#D8A85F 58%,#C08F45 100%); border:1px solid rgba(255,231,183,.9); color:#132437 !important; white-space:nowrap; padding:10px 22px; border-radius:100px; font-size:13.5px; font-weight:700; box-shadow:0 2px 14px rgba(216,168,95,.35); transition:background .2s ease, border-color .2s ease, box-shadow .2s ease} /* Sign in = the standout gold button (Sunny, Jul 22) */ .pill:hover{background:linear-gradient(180deg,#F8E0A8 0%,#E2B46C 58%,#C99A50 100%); border-color:#FFEFC9; box-shadow:0 4px 18px rgba(216,168,95,.5)} .hero{position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden} /* full first frame; the header floats on top of it */ #stage{position:absolute; inset:0; z-index:0} #stage canvas{display:block; width:100%; height:100%} .glow{position:absolute; z-index:0; right:2%; top:50%; width:60vw; height:60vw; max-width:820px; max-height:820px; transform:translateY(-50%); pointer-events:none; background:radial-gradient(circle at 50% 45%, rgba(196,130,84,.20), rgba(120,50,58,.10) 34%, rgba(5,16,30,0) 66%)} .hero::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:var(--scrim,1); background:linear-gradient(90deg, rgba(5,16,30,.95) 0%, rgba(5,16,30,.84) 36%, rgba(5,16,30,.36) 60%, rgba(5,16,30,0) 100%)} .vignette{position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(120% 120% at 50% 45%, rgba(0,0,0,0) 55%, rgba(2,6,14,.6) 100%)} .hero .inner{position:relative; z-index:2; max-width:1220px; margin:0 auto; padding:64px 40px; width:100%} .copy{max-width:600px} /* kicker ABOVE the headline: an editorial lead-in — gold hairline, three quiet capitals, gold pin-dot separators */ .eyebrow{display:flex; align-items:center; gap:14px; margin:0 0 26px; color:#C9AC72; font-family:"Inter",sans-serif; font-weight:600; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase} .eyebrow span{white-space:nowrap} .eyebrow .eb-rule{flex:none; width:30px; height:1px; background:linear-gradient(90deg,rgba(216,168,95,.85),rgba(216,168,95,0)); transform:translateY(.5px)} .eyebrow .sep{flex:none; width:3px; height:3px; border-radius:50%; background:rgba(216,168,95,.55)} h1{margin:0; color:#F1E9D9; text-wrap:balance} /* ONE continuous line, one family, one size — emphasis comes from same-family italic + gold, not a size jump (the old small-line/huge-line stack read as cramped) */ h1 .s1{display:inline-block; font-family:"Playfair Display",serif; font-weight:500; font-size:clamp(30px,3.6vw,46px); line-height:1.14; letter-spacing:-.01em; color:#E9E0CF; margin-right:.24em} h1 .s2{display:inline-block; font-family:"Playfair Display",serif; font-style:italic; font-weight:600; color:var(--gold); font-size:clamp(30px,3.6vw,46px); line-height:1.14; letter-spacing:-.01em; padding-right:.06em; text-shadow:0 2px 30px rgba(216,168,95,.16)} .deck{font-family:"Inter",sans-serif; font-size:18.5px; color:#CFDBEA; margin:30px 0 40px; max-width:46ch; line-height:1.6; text-wrap:pretty} .cta{display:flex; gap:24px; align-items:center; flex-wrap:wrap} /* hero CTAs: both see-through by default, and clearly resolve into buttons on hover (scoped to the hero so the closing section keeps its solid button) */ /* hero CTAs: ONE clear primary (solid crimson, gold-trimmed) + a quiet text-link secondary — no twin ghost buttons */ #heroCopy .cta{gap:20px; margin-left:0; margin-top:44px} #heroCopy .hbtn-primary{background:rgba(216,168,95,.10); border-color:rgba(216,168,95,.5); color:#FBF5E9; padding:13px 24px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} #heroCopy .hbtn-primary svg{color:#F0CE8B} #heroCopy .hbtn-primary:hover{background:rgba(216,168,95,.20); border-color:rgba(240,206,139,.75); transform:translateY(-1px); color:#FFFDF7} #heroCopy .hbtn-quiet{padding:13px 4px; color:#D5C9B0; font-weight:500} #heroCopy .hbtn-quiet svg{color:var(--gold)} #heroCopy .hbtn-quiet:hover{background:transparent; border-color:transparent; color:#FBF5E9} .hbtn{display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:100px; background:transparent; border:1px solid transparent; color:#F1E9D9; font-family:"Inter",sans-serif; font-weight:600; font-size:15px; white-space:nowrap; cursor:pointer; transition:background .24s var(--e-out), border-color .24s var(--e-out), transform .24s var(--e-out), color .2s ease} .hbtn svg{width:15px; height:15px; color:var(--gold); transition:transform .24s var(--e-out)} .hbtn:hover{background:rgba(216,168,95,.15); border-color:rgba(216,168,95,.55); transform:translateY(-1px); color:#FBF5E9} .hbtn:hover svg{transform:translateX(3px)} .hbtn:active{transform:translateY(0) scale(.98)} .hbtn:focus-visible{outline:2px solid var(--gold); outline-offset:3px} .btn{display:inline-flex; align-items:center; gap:9px; background:rgba(216,168,95,.10); border:1px solid rgba(216,168,95,.5); color:#FBF5E9; padding:14px 25px; border-radius:100px; white-space:nowrap; font-weight:600; font-size:15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); transition:transform .22s var(--e-out), background .22s ease, border-color .22s ease} /* matches the hero's gold-trimmed primary — Sunny vetoed solid crimson fills */ .btn svg{width:15px; height:15px; transition:transform .22s var(--e-out)} .btn:hover{background:rgba(216,168,95,.20); border-color:rgba(240,206,139,.75); transform:translateY(-1px); color:#FFFDF7} .btn:hover svg{transform:translateX(3px)} .btn:active{transform:scale(.98)} .btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px} .btn-ghost{display:inline-flex; align-items:center; gap:8px; color:#EAF1F8; font-weight:600; font-size:15px; white-space:nowrap; transition:color .2s ease} .btn-ghost svg{width:14px; height:14px; color:var(--gold); transition:transform .22s var(--e-out)} .btn-ghost:hover{color:var(--gold)} .btn-ghost:hover svg{transform:translateX(3px)} .btn-ghost:active{transform:scale(.98)} .btn-ghost:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:3px} .reveal{opacity:0; transform:translateY(22px); animation:rise .95s var(--e-out) forwards} .d1{animation-delay:.08s}.d2{animation-delay:.22s}.d3{animation-delay:.36s}.d4{animation-delay:.52s}.d5{animation-delay:.66s} @keyframes rise{to{opacity:1; transform:none}} /* pinned scroll stage + disassembly overlays */ .scrollstage{position:relative; height:340vh} /* the hero dive + logo formation — kept at its original immersive length */ .hero.sticky{position:sticky; top:0; height:100vh; min-height:100vh; margin:0} .hero-copy{will-change:opacity,transform} /* word labels ride on the flattened 3D leaflets themselves */ .leaf-cards{position:absolute; inset:0; z-index:3; pointer-events:none} .leaf-card{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; opacity:0; will-change:opacity,left,top} .leaf-card .lc-word{display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-family:"Inter",sans-serif; font-weight:600; font-size:clamp(10.5px,1.15vw,14px); letter-spacing:.15em; text-transform:uppercase; color:#FBF3E4; padding:8px 16px 8px 13px; border-radius:100px; background:rgba(9,19,33,.46); backdrop-filter:blur(8px) saturate(1.1); -webkit-backdrop-filter:blur(8px) saturate(1.1); border:1px solid rgba(216,168,95,.5); box-shadow:0 8px 24px -10px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.07)} .leaf-card .lc-word::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 38% 32%, #F3D391, #C0A256); box-shadow:0 0 9px rgba(216,168,95,.75), 0 0 2px rgba(216,168,95,.9)} /* the tendinae, drawn from each card to the shared centre */ #cordSvg{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; overflow:visible} /* centre reveal — the cords create the gold mark, the O ring draws around it, then the letters. Three layers are cut from the SAME wordmark image (letters-with-hole, ring, valve), all displayed at identical size/position, so they always compose back to the exact brand logo — one "o", no seams. */ .chordae-reveal{position:fixed; left:0; top:0; z-index:6; pointer-events:none; transform:translate3d(-9999px,0,0); transform-origin:0 0; will-change:transform; backface-visibility:hidden} /* FIXED, top-level, above every section — so the real next section can scroll up UNDER it and push it away. positioned ENTIRELY via one compositor transform (translate3d + scale) set per frame in viewport coords; origin at the mark's red dot so it scales in place. */ .cw-layer{position:absolute; left:0; top:0; width:calc(clamp(464px,60vw,720px)*var(--logoS,1)); opacity:0; transform-origin:39.77% 62.12%; transform:translate(-39.77%,-62.12%)} /* layout width = the FINAL on-screen size (rest scale is now 1.0, halved everywhere in JS) so the browser rasterises the letters 1:1 at rest — razor sharp even with the drop-shadow filter, which forces layout-size rasterisation */ /* the wordmark's "o" centre sits on the container origin = the convergence point. the letters are now a true VECTOR wordmark (the original brand letters traced to paths) so they stay razor-sharp at any scale — scale lives HERE (not the parent) so the vector re-rasterises crisp */ .cw-layer path{ shape-rendering:geometricPrecision } /* the high-res standalone O-mark layers (valve + ring), 1024px sources sized so they exactly match the wordmark's "o", both centred on the convergence point -> resolve LARGE & crisp, then settle into the wordmark's o */ .cw-mark{position:absolute; left:0; top:0; width:calc(clamp(110px,14.16vw,170px)*var(--logoS,1)); opacity:0; transform-origin:50% 50%; transform:translate(-50%,-50%)} /* the O-mark scales on itself (crisp re-raster), centred on the convergence point */ #cwValve{filter:drop-shadow(0 0 3px rgba(216,168,95,.35))} /* gold valve — a tight glow only, so the edges stay sharp even when the mark resolves LARGE */ #cwRing{filter:drop-shadow(0 1px 3px rgba(10,26,46,.18))} /* navy O ring */ #cwWordLogo{filter:drop-shadow(0 12px 30px rgba(10,26,46,.20))} /* the letters */ .cw-light{opacity:0} /* cream variants of the letters + ring; cross-faded in as the field darkens to navy so the mark stays legible */ #cwWordLogoLight{filter:drop-shadow(0 10px 26px rgba(0,0,0,.42))} #cwRingLight{filter:drop-shadow(0 1px 4px rgba(0,0,0,.35))} /* the valve inside the "o" beats by morphing its three leaflets open/closed (driven in JS); this SVG just needs to sit crisp in the o */ #cwValve{overflow:visible} .hero-bloom{position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none; will-change:opacity; background:radial-gradient(46% 40% at 50% 42%, #FEFBF5 0%, rgba(244,238,225,0) 74%), #F2E9D8} /* a soft glow behind the logo over a UNIFORM cream base (#F2E9D8) — the uniform base matches the next section's fade-top exactly, so there is no seam between them */ @media(max-width:820px){ .leaf-card .lc-word{font-size:10px; letter-spacing:.12em; padding:6px 12px 6px 10px; gap:7px} .cw-layer{width:calc(clamp(356px,104vw,500px)*var(--logoS,1))} .cw-mark{width:calc(clamp(84px,24.56vw,118px)*var(--logoS,1))} } @media(max-width:820px){ .masthead .inner{padding:12px 22px} .nav .nl{display:none} .hero .inner{padding:48px 22px} .hero::before{background:linear-gradient(90deg, rgba(5,16,30,.94) 0%, rgba(5,16,30,.80) 55%, rgba(5,16,30,.6) 100%)} .eyebrow{font-size:10px; letter-spacing:.16em; gap:9px; margin:0 0 18px; flex-wrap:wrap; row-gap:6px} #heroCopy .cta{margin-top:30px; gap:14px} .deck{font-size:16px; margin:20px 0 30px} .cta{gap:18px} } @media (prefers-reduced-motion: reduce){ .reveal{animation:none; opacity:1; transform:none} } .tryit .mock-bar{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;background:#f1f3f5;border-bottom:1px solid var(--line)} .tryit .mock-bar i{width:11px;height:11px;border-radius:99px;background:#dfe3e8;display:inline-block} .tryit .mock-url{margin-left:.7rem;font-size:.72rem;color:var(--faint);background:#fff;border:1px solid var(--line);border-radius:7px;padding:.2rem .6rem} .tryit .mock-body{padding:1.1rem;background:var(--cream)} .tryit .screen{display:none;animation:fade .5s ease} .tryit .screen.show{display:block} .tryit .ui-title{font-family:var(--sans);font-weight:700;color:var(--navy);font-size:1.02rem} .tryit .mock .mock-bar{position:relative} .tryit .mock .mock-bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#9E2226,#C0A256 50%,#9E2226);opacity:.85} .tryit .mini-btn{appearance:none;border:0;background:var(--navy);color:#fff;font:600 .74rem var(--sans);padding:.32rem .7rem;border-radius:999px;cursor:pointer} .tryit .mini-btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)} .tryit .mini-btn:hover{opacity:.9} .tryit .ui-grid{display:grid;gap:.7rem} .tryit .kpi{background:#ffffff;border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;box-shadow:0 1px 2px rgba(124,99,40,.04)} .tryit .kpi .n{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--navy)} .tryit .kpi .l{font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em} .tryit .tile{background:#ffffff;border:1px solid var(--line);border-radius:12px;padding:.85rem} .tryit .bar{height:8px;border-radius:99px;background:#e9ecef;overflow:hidden;margin-top:.45rem} .tryit .bar > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--copper),var(--gold))} .tryit .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} .tryit .cal .d{min-height:52px;border:1px solid #e9ecef;border-radius:9px;background:#ffffff;padding:4px 4px 5px;display:flex;flex-direction:column;gap:3px;box-shadow:0 1px 2px rgba(124,99,40,.04)} .tryit .cal .dn{font-size:.6rem;color:#a89f88;font-weight:700;line-height:1} .tryit .cal .dc{margin-top:auto;font-size:.57rem;font-weight:700;border-radius:5px;padding:2px 4px;line-height:1.2;text-align:center} .tryit .cal .dc.shift{background:rgba(30,58,95,.10);color:#0F2A45;border:1px solid rgba(30,58,95,.16)} .tryit .cal .dc.night{background:linear-gradient(135deg,#0F2A45,#16304f);color:#fff} .tryit .cal .dc.conf{background:rgba(184,115,51,.15);color:#9a5f28;border:1px solid #e6cfa8} .tryit .cal .dc.off{background:#f1f3f5;color:#9a927e;border:1px solid #e3e6ea} .tryit .cal .dc.vac{background:rgba(31,122,77,.13);color:#1f7a4d;border:1px solid #bfe0cb} .tryit .pill{display:inline-block;font-size:.62rem;font-weight:700;padding:.12rem .5rem;border-radius:999px} .tryit .pill.g{background:#dcfce7;color:#166534} .tryit .pill.a{background:#fef3c7;color:#9a5f28} .tryit .pill.b{background:rgba(58,110,165,.14);color:#2c5e93} .tryit .row{display:flex;align-items:center;justify-content:space-between;padding:.5rem .2rem;border-bottom:1px solid #eef0f2;font-size:.84rem} .tryit .row:last-child{border:none} /* ---- TRY IT LIVE: per-chapter demo overlay — a working model of the real portal, in the new theme ---- */ .tryit .mock{background:#0C1B30;border:1px solid rgba(216,168,95,.28);border-radius:18px;box-shadow:0 40px 90px rgba(0,0,0,.6);overflow:hidden} .tryit .ui-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem} .tryit .clk{cursor:pointer;transition:background .15s ease} .tryit .clk:hover{background:rgba(216,168,95,.08)} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .tryit{position:fixed;inset:0;z-index:96;display:none;align-items:center;justify-content:center;padding:24px; --navy:#EDE6D6;--cream:#0A1728;--soft:#0D1D33;--line:rgba(157,176,196,.22);--muted:#AAB9CB;--faint:#8FA1B5;--copper:#D8A85F; --serif:"Playfair Display",serif;--sans:"Inter",sans-serif} .tryit.open{display:flex} .tryit-scrim{position:absolute;inset:0;background:rgba(2,8,16,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .tryit-panel{position:relative;width:min(980px,96vw);max-height:92vh;overflow:auto;background:linear-gradient(180deg,#0D1D33,#081426); border:1px solid rgba(216,168,95,.3);border-radius:22px;padding:22px 24px 20px;box-shadow:0 50px 120px rgba(0,0,0,.7)} .tryit-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px} .tryit-title{font-family:"Playfair Display",serif;font-style:italic;font-weight:600;color:#F3ECDD;font-size:21px;margin-right:auto} .tryit-tabs{display:flex;gap:8px;flex-wrap:wrap} .tryit-tab{border:1px solid rgba(216,168,95,.35);background:transparent;border-radius:999px;padding:7px 15px;font:600 12.5px "Inter",sans-serif;color:#D5C9B0;cursor:pointer;transition:.15s} .tryit-tab.active{background:rgba(216,168,95,.16);border-color:rgba(240,206,139,.7);color:#FBF5E9} .tryit-x{border:0;background:transparent;color:#C9AC72;font-size:26px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:8px} .tryit-x:hover{color:#F0CE8B;background:rgba(216,168,95,.1)} .tryit-cap{margin-top:12px;text-align:center;color:#AAB9CB;font-size:13.5px} .tryit-hint{margin-top:4px;text-align:center;color:#8FA1B5;font-size:12px} /* dark re-skin of the ported mock pieces */ .tryit .mock-bar{background:#0A1626} .tryit .mock-bar i{background:#23405F} .tryit .mock-url{background:#0C1B30;color:#8FA1B5} .tryit .mock-body{background:linear-gradient(180deg,#0D1D33,#0A1728)} .tryit .kpi,.tryit .tile{background:#10233C;border:1px solid rgba(157,176,196,.16)} .tryit .kpi .n{color:#F0CE8B} .tryit .mini-btn{background:rgba(216,168,95,.85);color:#081426} .tryit .mini-btn.ghost{background:transparent;color:#D5C9B0;border:1px solid rgba(157,176,196,.35)} .tryit .cal .d{background:#10233C;border:1px solid rgba(157,176,196,.16)} .tryit .pill{border:1px solid transparent} .tryit .pill.g{background:rgba(34,120,74,.25);color:#7FD8A5} .tryit .pill.a{background:rgba(190,140,40,.22);color:#EBC784} .tryit .pill.b{background:rgba(70,120,190,.22);color:#9CC4F0} /* ---- the try-it demo now wears the real portal chrome: left sidebar nav + top app bar ---- */ .tryit .mock-body{padding:0} .tryit .app-shell{display:flex; min-height:400px; max-height:min(566px,74vh)} .tryit .app-nav{flex:none; width:186px; background:#09131F; border-right:1px solid rgba(157,176,196,.12); padding:14px 10px; display:flex; flex-direction:column; gap:1px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(157,176,196,.3) transparent} .tryit .app-nav::-webkit-scrollbar{width:7px} .tryit .app-nav::-webkit-scrollbar-thumb{background:rgba(157,176,196,.22);border-radius:99px} .tryit .app-brand{display:flex; align-items:center; gap:9px; padding:2px 8px 12px; margin-bottom:8px; border-bottom:1px solid rgba(157,176,196,.1)} .tryit .app-brand svg{width:22px; height:22px; flex:none} .tryit .app-brand b{font-family:var(--serif);color:#F3ECDD;font-size:16px;letter-spacing:.02em} .tryit .app-nav a{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:9px;color:#AAB9CB;font:600 11.5px var(--sans);cursor:pointer;transition:background .15s ease,color .15s ease,opacity .15s ease;white-space:nowrap} .tryit .app-nav a svg{width:15px;height:15px;flex:none;opacity:.72} .tryit .app-nav a:hover{background:rgba(216,168,95,.08);color:#EDE6D6} .tryit .app-nav a.on{background:rgba(216,168,95,.15);color:#F0CE8B} .tryit .app-nav a.on svg{opacity:1} .tryit .app-nav a.on .fdot{opacity:1;background:#F0CE8B} .tryit .app-nav a.dim{opacity:.34;pointer-events:none;filter:grayscale(.35)} .tryit .app-nav .fdot{width:5px;height:5px;border-radius:99px;background:currentColor;opacity:.5;flex:none;margin-left:3px} .tryit .app-group{display:flex;align-items:center;gap:7px;padding:12px 9px 4px;font:800 10px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#63768e} .tryit .app-group svg{width:13px;height:13px;flex:none;opacity:.7} .tryit .app-group.act{color:#E7BD76} .tryit .app-group.act svg{opacity:1} .tryit .app-nav .sp{flex:1;min-height:10px} .tryit .app-main{flex:1;min-width:0;display:flex;flex-direction:column} .tryit .app-topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(157,176,196,.12);background:#0C1B30} .tryit .app-crumb{font:600 12.5px var(--sans);color:#8FA1B5} .tryit .app-crumb b{color:#EDE6D6} .tryit .app-search{margin-left:auto;display:flex;align-items:center;gap:7px;background:#0A1728;border:1px solid rgba(157,176,196,.16);border-radius:8px;padding:5px 11px;color:#7E90A4;font:500 11.5px var(--sans)} .tryit .app-search svg{width:13px;height:13px;opacity:.7} .tryit .app-bell{position:relative;color:#AAB9CB;cursor:pointer;display:flex} .tryit .app-bell svg{width:17px;height:17px} .tryit .app-bell .b{position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;background:#E06A76;border:1.5px solid #0C1B30} .tryit .app-user{display:flex;align-items:center;gap:8px} .tryit .app-user .av{width:27px;height:27px;border-radius:50%;background:linear-gradient(135deg,#F0CE8B,#BC8A41);color:#0A1728;font:700 11px var(--sans);display:flex;align-items:center;justify-content:center} .tryit .app-user .nm{font:600 11.5px var(--sans);color:#EDE6D6} .tryit .app-screens{padding:1.1rem;flex:1;overflow:auto} @media(max-width:660px){ .tryit .app-nav{width:50px;padding:12px 6px} .tryit .app-nav a span,.tryit .app-brand b{display:none} .tryit .app-search,.tryit .app-user .nm{display:none} } /* top-bar controls become interactive: search / notifications / user menu dropdowns */ .tryit .app-search{position:relative;cursor:pointer} .tryit .app-bell{position:relative;border:0;background:transparent;padding:0;display:flex} .tryit .app-user{position:relative;cursor:pointer} .tryit .app-drop{position:absolute;top:calc(100% + 9px);right:0;min-width:224px;background:#0E2138;border:1px solid rgba(216,168,95,.28);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:none;z-index:30;text-align:left;animation:fade .18s ease} .tryit .app-drop.show{display:block} .tryit .app-search .app-drop{left:0;right:auto;min-width:244px} .tryit .app-drop .dh{padding:5px 9px 8px;font:700 10.5px var(--sans);color:#8FA1B5;text-transform:uppercase;letter-spacing:.09em;border-bottom:1px solid rgba(157,176,196,.12);margin-bottom:5px} .tryit .app-drop .di{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;cursor:pointer;color:#D5C9B0;font:500 12px var(--sans);transition:background .12s ease} .tryit .app-drop .di:hover{background:rgba(216,168,95,.1);color:#F3ECDD} .tryit .app-drop .di .ic{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex:none;background:rgba(216,168,95,.14);color:#E7BD76;font:700 10px var(--sans)} .tryit .app-drop .di .t{color:#EDE6D6;font-weight:600;font-size:12px} .tryit .app-drop .di .s{color:#8FA1B5;font-size:10.5px;margin-top:1px} .tryit .tog{width:34px;height:19px;border-radius:99px;background:rgba(157,176,196,.3);position:relative;cursor:pointer;transition:background .2s ease;flex:none;display:inline-block} .tryit .tog::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:left .2s ease} .tryit .tog.on{background:#D8A85F} .tryit .tog.on::after{left:17px} .cat__try{margin-top:26px; display:flex; justify-content:center} /* below the grid; JS reserves the grid's max-expanded height so opening cards can never move this button (Sunny, Jul 22) */ .cat__try .hbtn-try{padding:14px 54px} /* a wider, more confident pill */ /* the demo button is the one thing on the chapter you can actually DO — so it's the one solid-gold element on the page, with a quiet heartbeat glow */ .hbtn-try{background:linear-gradient(180deg,#F3D593 0%,#D8A85F 58%,#C08F45 100%); border:1px solid rgba(255,231,183,.9); color:#132437; font-weight:700; padding:13px 26px; letter-spacing:.01em; box-shadow:0 6px 22px rgba(216,168,95,.30), inset 0 1px 0 rgba(255,255,255,.45); animation:trybeat 2.8s ease-in-out infinite} .hbtn-try svg{color:#132437} .hbtn-try:hover{background:linear-gradient(180deg,#F8E0A8 0%,#E2B46C 58%,#C99A50 100%); border-color:#FFEFC9; color:#0B1826; transform:translateY(-2px); box-shadow:0 10px 30px rgba(216,168,95,.45), inset 0 1px 0 rgba(255,255,255,.5)} @keyframes trybeat{0%,100%{box-shadow:0 6px 22px rgba(216,168,95,.30), 0 0 0 0 rgba(216,168,95,.34), inset 0 1px 0 rgba(255,255,255,.45)} 50%{box-shadow:0 6px 26px rgba(216,168,95,.42), 0 0 0 9px rgba(216,168,95,0), inset 0 1px 0 rgba(255,255,255,.45)}} @media (prefers-reduced-motion: reduce){ .hbtn-try{animation:none} } /* ---- PROGRESS RAIL: a quiet map of the journey on the right — a gold ring glides between stops; click a dot to travel there ---- */ .pgrail{position:fixed; right:20px; top:50%; transform:translateY(-50%); z-index:93; display:flex; flex-direction:column; align-items:center; opacity:0; transition:opacity .6s ease; pointer-events:none} /* above the wipe overlays (z88-90) so it NEVER vanishes mid-animation */ .pgrail.show{opacity:.95; pointer-events:auto} .pgrail::before{content:""; position:absolute; top:10px; bottom:10px; left:50%; width:1px; transform:translateX(-50%); background:linear-gradient(180deg, rgba(216,168,95,0), rgba(216,168,95,.35) 18%, rgba(216,168,95,.35) 82%, rgba(216,168,95,0))} .pgrail button{position:relative; width:26px; height:44px; background:none; border:0; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center} .pgrail button::after{content:""; width:7px; height:7px; border-radius:50%; background:rgba(216,168,95,.4); transition:background .3s ease, transform .3s ease, box-shadow .3s ease} .pgrail button:hover::after{background:rgba(240,206,139,.95); transform:scale(1.25)} .pgrail button.on::after{background:#F0CE8B; box-shadow:0 0 10px rgba(216,168,95,.8); transform:scale(1.3)} .pgrail .lbl{position:absolute; right:32px; top:50%; transform:translateY(-50%); white-space:nowrap; font:600 10.5px "Inter",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#E4D6B8; background:rgba(8,16,28,.9); border:1px solid rgba(216,168,95,.35); padding:4px 11px; border-radius:99px; opacity:0; pointer-events:none; transition:opacity .2s ease} .pgrail button:hover .lbl{opacity:1} .pgrail .ring{position:absolute; left:50%; transform:translateX(-50%); width:17px; height:17px; border:1px solid rgba(240,206,139,.9); border-radius:50%; box-shadow:0 0 12px rgba(216,168,95,.45); pointer-events:none; transition:top .14s linear, border-color .4s ease} .pgrail.show{cursor:grab} /* the whole rail is grabbable: drag to scrub, click the line to stop there */ .pgrail.dragging{cursor:grabbing; user-select:none} .pgrail.dragging .ring{width:19px; height:19px; box-shadow:0 0 16px rgba(240,206,139,.7)} /* the ring swells while you hold it */ /* the wordmark frame is CREAM — the rail and cue switch to deep gold there so they always read */ .pgrail.cream::before{background:linear-gradient(180deg, rgba(122,82,26,0), rgba(122,82,26,.45) 18%, rgba(122,82,26,.45) 82%, rgba(122,82,26,0))} .pgrail.cream button::after{background:rgba(138,90,32,.55)} .pgrail.cream button:hover::after{background:#8A5A20} .pgrail.cream button.on::after{background:#7A4E16; box-shadow:0 0 8px rgba(122,78,22,.55)} .pgrail.cream .ring{border-color:rgba(110,72,20,.95); box-shadow:0 0 10px rgba(122,78,22,.4)} .pgrail.cream .lbl{background:rgba(242,233,216,.96); color:#6B4A16; border-color:rgba(138,90,32,.45)} @media(max-width:860px){ .pgrail{display:none} } /* scroll cue — a whisper of an invitation at each stopping point: hairline + a slow falling gold drop */ .scrollcue{position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:80; transform:translateX(-50%); pointer-events:none; opacity:0; transition:opacity .6s ease} .scrollcue.on{opacity:1} .scrollcue .sc-line{width:1px; height:32px; margin:0 auto; position:relative; background:linear-gradient(180deg, rgba(216,168,95,0), rgba(216,168,95,.5))} .scrollcue .sc-dot{position:absolute; left:50%; top:0; width:5px; height:5px; border-radius:50%; transform:translate(-50%,0); background:#D8A85F; box-shadow:0 0 8px rgba(216,168,95,.75); animation:scdrop 2s cubic-bezier(.5,.05,.45,1) infinite} @keyframes scdrop{0%{top:-3px;opacity:0} 22%{opacity:.95} 80%{top:27px;opacity:.85} 100%{top:32px;opacity:0}} .scrollcue.cream .sc-line{background:linear-gradient(180deg, rgba(110,74,22,0), rgba(110,74,22,.8))} .scrollcue.cream .sc-dot{background:#7A4E16; box-shadow:0 0 6px rgba(110,74,22,.55)} /* ===== THE LINK SCENE — the logo becomes the hub of a chordae "tree": 3 main cords reach out to the pillars, each bursting into the features it holds ===== */ #linkBg{position:fixed; inset:0; z-index:-1; opacity:0; pointer-events:none; background:#05101E; will-change:opacity} /* fixed field behind everything; its colour is lerped cream->navy per frame, revealed as the hero scrolls away */ .linkstage{position:relative; height:150vh; background:transparent} /* spacer sized so the pillar sections only rise into view as the tree reaches its exit (~lp 0.88); the tree's progress is driven by scroll PAST the hero (see linkProgress), reusing the previously-dead sticky tail */ #linkCords{position:fixed; inset:0; z-index:5; pointer-events:none; overflow:visible; opacity:0; will-change:opacity} /* all the red tendinae — 3 main + their feature bursts — drawn from the centre outward */ .link-branch{display:contents} /* wrapper is layout-neutral in motion (its parts are positioned individually); becomes a list under reduced motion */ .link-word{position:fixed; left:0; top:0; z-index:6; pointer-events:none; opacity:0; transform:translate(-50%,-50%); display:flex; align-items:center; gap:10px; white-space:nowrap; will-change:opacity,left,top; font-family:"Inter",sans-serif; font-weight:700; font-size:clamp(13px,1.3vw,17px); letter-spacing:.12em; text-transform:uppercase; color:#F6F1E8} .link-word .lw-dot{flex:none; width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 38% 32%, #E36074, #A5142A); box-shadow:0 0 13px rgba(200,40,60,.7), 0 0 3px rgba(200,40,60,.9)} .link-sub{position:fixed; left:0; top:0; z-index:6; pointer-events:none; opacity:0; transform:translate(-50%,-50%); white-space:nowrap; will-change:opacity,left,top; font-family:"Inter",sans-serif; font-weight:500; font-size:clamp(11px,0.92vw,13.5px); letter-spacing:.04em; color:#E0CDA8} /* soft gold-cream feature labels */ .link-head{position:fixed; left:0; top:0; z-index:6; pointer-events:none; opacity:0; transform:translate(-50%,0); text-align:center; width:min(560px,80vw); will-change:opacity,left,top} .link-head h2{font-family:"Playfair Display",serif; font-weight:600; color:#F6F1E8; font-size:clamp(22px,2.6vw,32px); line-height:1.12; letter-spacing:-.01em} .link-explain{display:none} /* the full medical explanation is shown in the reduced-motion fallback; the animated scene lets the diagram speak */ @media(max-width:760px){ /* phones: each pillar is a fixed block (heading + feature chips) positioned by JS; the 3 main cords still reach down to them */ .link-branch{display:block; position:fixed; left:0; top:0; z-index:6; opacity:0; transform:translate(-50%,0); width:min(92vw,380px); text-align:center; will-change:opacity,left,top} .link-word{position:static; opacity:1; transform:none; justify-content:center; margin-bottom:7px; font-size:13px; letter-spacing:.1em; gap:8px} .link-sub{position:static; opacity:1; transform:none; display:inline-block; margin:4px 5px; padding:4px 11px; border:1px solid rgba(216,168,95,.32); border-radius:100px; color:#E7D9BE; font-size:11.5px; letter-spacing:.02em} .link-head h2{font-size:clamp(20px,6vw,28px)} } /* reduced motion / no-JS: the scene falls back to a readable nested list — each pillar and the features it holds, plus the explanation */ @media (prefers-reduced-motion: reduce){ #linkBg{display:none} .linkstage{height:auto; background:var(--navy-deep); padding:88px 24px} .linkstage-inner{max-width:760px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:30px; text-align:center} #linkCords{display:none} .link-branch{display:block; text-align:center} .link-word{position:static; opacity:1; transform:none; justify-content:center; margin-bottom:12px} .link-sub{position:static; opacity:1; transform:none; display:inline-block; margin:5px 9px; padding:5px 12px; border:1px solid rgba(216,168,95,.35); border-radius:100px; color:#E7D9BE; font-size:13px} .link-head{position:static; opacity:1; transform:none; width:auto; margin-top:6px} .link-explain{display:block; font-size:16px; color:#C8D4E2; margin-top:14px; line-height:1.62} } /* ---- sections below the hero ---- */ .section{position:relative; z-index:2; background:var(--navy-deep)} .section .inner{max-width:1180px; margin:0 auto; padding:100px 40px} .section h2{font-family:"Playfair Display",serif; font-weight:600; color:#F6F1E8; font-size:clamp(30px,3.6vw,46px); line-height:1.14; letter-spacing:-.01em; text-wrap:balance; max-width:22ch} .section .lead{font-size:19px; color:#C8D4E2; margin-top:18px; max-width:62ch; line-height:1.6} /* connector diagram */ .connector{position:relative; background:#05101E; padding-top:0} .connector .inner{position:relative; z-index:1; padding-top:15vh} /* heading sits high in the section so it rises right up under the logo */ /* the section's own top edge fades from the hero's warm cream down into deep navy — a smooth blend so as the whole section scrolls up under the logo there is no seam, just cream dissolving into blue. Kept just tall enough that the heading lands on the deep-navy end (readable) while the logo rides the cream end. */ .connector::before{content:""; position:absolute; left:0; right:0; top:0; height:22vh; z-index:0; pointer-events:none; background:linear-gradient(180deg, #F2E9D8 0%, #F2E9D8 11%, #EBE0C9 20%, #DED5C0 28%, #C9C6B9 36%, #ADB1B0 45%, #8B97A4 55%, #697C97 64%, #48597C 74%, #294263 85%, #102540 94%, #05101E 100%)} .connector .inner{text-align:center} .connector h2, .connector .lead{margin-left:auto; margin-right:auto} .diagram{margin:52px auto 0; max-width:1000px} .diagram svg{width:100%; height:auto; display:block; overflow:visible} .cord{fill:none; stroke-linecap:round} .n-label{font-family:"Playfair Display",serif; font-weight:600; fill:#F4EEDF; font-size:22px} .n-sub{font-family:"Inter",sans-serif; font-weight:500; fill:#9DB0C4; font-size:12px; letter-spacing:.14em; text-transform:uppercase} .n-dot{fill:var(--gold)} .hub-plate{fill:var(--cream)} .beatpulse{transform-box:fill-box; transform-origin:center; animation:beat 1.5s ease-in-out infinite} @keyframes beat{0%,100%{opacity:.5}18%{opacity:1}} /* pillar sections */ .pillar .inner{display:grid; grid-template-columns:0.92fr 1.08fr; gap:60px; align-items:start} .pillar .side{position:sticky; top:96px} .pillar .kicker{display:inline-flex; align-items:center; gap:10px; font-family:"Playfair Display",serif; font-style:italic; color:var(--gold); font-size:20px; margin-bottom:14px} .leaflet-motif{width:60px; height:60px; display:block; margin-bottom:22px} .feature-list{list-style:none; margin-top:6px} .feature{display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-top:1px solid rgba(157,176,196,.14)} .feature:last-child{border-bottom:1px solid rgba(157,176,196,.14)} .feature .fi{flex:none; width:24px; height:24px; margin-top:2px; color:var(--gold)} .feature h3{font-size:16px; font-weight:600; color:#EDE6D8} .feature p{font-size:14.5px; color:#9DB0C4; margin-top:3px; line-height:1.55} /* ---- Part 3: category showcase (each of the three leaflets, up close) ---- */ .showcase-intro{background:linear-gradient(180deg,#08182B 0%, #05101E 100%); text-align:center; position:relative; overflow:hidden} .showcase-intro .inner{padding:128px 40px 96px} /* the intro heading is its own little hero moment: gold hairline lead-in, big serif, the promise in gold italic */ .showcase-intro .sc-rule{width:64px; height:1px; margin:0 auto 26px; background:linear-gradient(90deg, rgba(216,168,95,0), rgba(216,168,95,.85), rgba(216,168,95,0)); position:relative} .showcase-intro .sc-rule::after{content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%; transform:translate(-50%,-50%); background:#D8A85F; box-shadow:0 0 10px rgba(216,168,95,.8)} .showcase-intro h2{font-family:"Playfair Display",serif; font-weight:600; color:#F1E9D9; font-size:clamp(34px,4.4vw,60px); line-height:1.12; letter-spacing:-.01em} .showcase-intro h2 em{font-style:italic; color:var(--gold); text-shadow:0 2px 26px rgba(216,168,95,.18)} .sc-flow{display:block; width:34px; height:96px; margin:-64px auto 12px; position:relative; z-index:1} .sc-kicker{font-family:"Playfair Display",serif; font-style:italic; color:var(--gold); font-size:20px; margin-bottom:14px} .showcase-intro h2{margin:0 auto; max-width:22ch} .showcase-intro .lead{margin:18px auto 0} .cat{position:relative; overflow:hidden; border-top:1px solid rgba(157,176,196,.10); background:radial-gradient(115% 85% at var(--fx,20%) 4%, var(--tint,rgba(170,22,42,.16)) 0%, rgba(5,16,30,0) 58%), var(--navy-deep)} .cat__bgnum{position:absolute; top:clamp(6px,3vw,34px); right:4%; z-index:0; pointer-events:none; user-select:none; font-family:"Playfair Display",serif; font-weight:700; font-size:clamp(120px,23vw,300px); line-height:.78; color:rgba(216,168,95,.055)} .cat__inner{position:relative; z-index:1; display:grid; grid-template-columns:0.84fr 1.16fr; gap:56px; align-items:center; padding-top:92px; padding-bottom:92px} .cat--flip .cat__inner{grid-template-columns:1.16fr 0.84fr} .cat--flip .cat__visual{order:2} .cat--flip .cat__body{order:1} .cat__visual{display:flex; justify-content:center; align-items:center; position:relative; z-index:1} .cat__body{position:relative; z-index:1} /* the pillar emblem: the brand's tricuspid orifice as a gold ring, holding the section's name — its tendinae reach out to each feature card */ .cat__emblem{position:relative; width:min(32vw,350px)} .cat__emblem .emb{width:100%; height:auto; display:block; filter:drop-shadow(0 26px 52px rgba(0,0,0,.5))} .emb-label{position:absolute; left:50%; top:60%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center} .emb-label .kn{font-weight:700; font-size:12px; letter-spacing:.14em; color:var(--gold-soft); border:1px solid rgba(216,168,95,.4); border-radius:100px; padding:4px 11px; font-family:"Inter",sans-serif} .emb-name{font-family:"Playfair Display",serif; font-style:italic; font-weight:600; color:#F3ECDD; font-size:clamp(17px,1.85vw,23px); line-height:1; text-shadow:0 2px 18px rgba(0,0,0,.4)} .emb-label{top:62%} /* sit a touch lower where the triangle is wider, so the longer names clear the gold band */ .cat__cords{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible} .cat__more{justify-content:center; align-items:center; border-style:dashed; border-color:rgba(216,168,95,.32); background:transparent} .cat__more:hover{border-color:rgba(216,168,95,.6); background:rgba(216,168,95,.04)} .cat__more h3{font-family:"Playfair Display",serif; font-style:italic; font-weight:500; color:var(--gold-soft); font-size:16.5px} .cat__kicker{display:inline-flex; align-items:center; gap:11px; font-family:"Playfair Display",serif; font-style:italic; color:var(--gold); font-size:19px; margin-bottom:15px} .cat__kicker .kn{font-style:normal; font-weight:700; font-size:13px; letter-spacing:.14em; color:var(--gold-soft); border:1px solid rgba(216,168,95,.4); border-radius:100px; padding:4px 11px} .cat__title{font-family:"Playfair Display",serif; font-weight:600; color:#F6F1E8; font-size:clamp(27px,3.3vw,43px); line-height:1.14; letter-spacing:-.01em; text-wrap:balance; max-width:20ch} .cat__lead{font-size:18px; color:#C8D4E2; margin-top:16px; max-width:54ch; line-height:1.6} .cat__features{list-style:none; margin-top:30px; display:flex; gap:13px; align-items:flex-start} /* two independent stacked columns (below) so expanding one card only pushes cards under it in ITS column */ .cat__col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:13px} .cat__feat{display:flex; gap:13px; align-items:flex-start; padding:15px 16px; border:1px solid rgba(157,176,196,.15); border-radius:14px; background:rgba(255,255,255,.016); transition:transform .25s ease, border-color .25s ease, background .25s ease} .cat__feat:hover{transform:translateY(-3px); border-color:rgba(216,168,95,.42); background:rgba(216,168,95,.055)} .cat__feat .fi{flex:none; width:22px; height:22px; margin-top:1px; color:var(--gold)} .cat__feat h3{font-size:15.5px; font-weight:600; color:#EDE6D8; line-height:1.3} .cat__feat p{font-size:13.5px; color:#9DB0C4; margin-top:4px; line-height:1.5} /* interactive feature cards (progressive enhancement): only collapse when JS marks the page interactive; otherwise all text shows */ .cards-interactive .cat__feat{position:relative; cursor:pointer} .cards-interactive .cat__feat h3{padding-right:24px} .cards-interactive .cat__feat .fx{position:absolute; top:15px; right:15px; width:15px; height:15px; color:var(--gold); opacity:.5; transition:transform .34s var(--e-out), opacity .25s ease; pointer-events:none} .cards-interactive .cat__feat:hover .fx, .cards-interactive .cat__feat:focus-within .fx, .cards-interactive .cat__feat.open .fx{opacity:1; transform:rotate(180deg)} .cards-interactive .cat__feat p{max-height:0; opacity:0; margin-top:0; overflow:hidden; transition:max-height .36s var(--e-out), opacity .28s ease, margin-top .36s var(--e-out)} .cards-interactive .cat__feat:hover p, .cards-interactive .cat__feat:focus-within p, .cards-interactive .cat__feat.open p{max-height:260px !important; opacity:1 !important; margin-top:5px !important} .cards-interactive .cat__feat:focus-visible{outline:2px solid var(--gold); outline-offset:2px} .cat__feat.sr:nth-child(2){transition-delay:.06s}.cat__feat.sr:nth-child(3){transition-delay:.12s} .cat__feat.sr:nth-child(4){transition-delay:.18s}.cat__feat.sr:nth-child(5){transition-delay:.24s} /* desktop: each pillar is a full-screen chapter — and every chapter is pinned to the SAME grid so nothing jumps when the wave swaps them: body top-anchored at a fixed offset, title + lead reserve their line-heights, emblem centred at the same viewport height */ @media(min-width:861px){ .cat{display:flex; align-items:flex-start; min-height:100vh} .cat__inner{width:100%; align-items:start; padding-top:calc(50vh - 330px); padding-bottom:48px} .cat__visual{height:calc(50vh + 282px)} .cat__title{max-width:26ch; min-height:2.32em; display:flex; align-items:flex-end} /* reserve TWO lines so a 2-line title (Academics) stays aligned with the 1-line ones; bottom-align keeps 1-line titles tight to their description (no big gap) */ .cat__lead{min-height:3.3em} .closer{min-height:calc(100vh - var(--footH,112px)); display:flex; align-items:center; justify-content:center} /* finale + footer share ONE screen: closer height leaves exactly the footer's room */ .closer .inner{width:100%} } /* SHORT desktop screens: the chapters must still fit the full frame (header + lead + 6 cards + Try button) on ≤860px-tall laptops — tighten spacing only, copy untouched. Placed AFTER the alignment block (specificity-order trap). */ @media(min-width:861px) and (max-height:860px){ .cat__inner{padding-top:calc(50vh - 352px); padding-bottom:20px} .cat__visual{height:calc(50vh + 248px)} .cat__lead{font-size:16px; margin-top:11px; line-height:1.5; min-height:0} .cat__features{margin-top:16px; gap:9px} .cat__col{gap:9px} .cat__feat{padding:11px 14px} .cat__feat h3{font-size:14.5px} .cat__feat p{font-size:12.5px; line-height:1.4; margin-top:3px} .cat__try{margin-top:16px} } @media(max-width:860px){ .cat__inner, .cat--flip .cat__inner{grid-template-columns:1fr; gap:30px; padding-top:58px; padding-bottom:58px} .cat--flip .cat__visual, .cat--flip .cat__body{order:0} .cat__emblem{width:min(58vw,270px)} .cat__cords{display:none} /* phones: emblem sits above the list; no cross-cords */ .cat__features{flex-direction:column} .cat__col{display:contents} /* mobile: unwrap the columns so cards stack in natural order */ .showcase-intro .inner{padding:70px 22px 20px} } /* closer — the finale hero: the valve mark quietly beating over the closing line */ .closer{background:radial-gradient(90% 110% at 50% -8%, #143352 0%, rgba(5,16,30,0) 62%), radial-gradient(110% 130% at 50% 118%, rgba(158,34,38,.16) 0%, rgba(5,16,30,0) 55%), var(--navy-deep); text-align:center; position:relative; overflow:hidden} .closer-cords{position:absolute; inset:0; pointer-events:none; overflow:visible; opacity:.85} .closer .inner{padding:96px 40px 110px; position:relative} /* the lead-in: everything the chapters could not fit, whispered at the top of the finale */ .closer-more{display:flex; align-items:center; justify-content:center; gap:18px; margin:0 0 30px} .closer-more .cm-text{font-family:"Playfair Display",serif; font-style:italic; font-weight:500; color:var(--gold-soft); font-size:clamp(16px,1.7vw,21px); letter-spacing:.02em; white-space:nowrap} .closer-more .cm-rule{width:clamp(40px,6vw,84px); height:1px; background:linear-gradient(90deg, rgba(216,168,95,0), rgba(216,168,95,.6))} .closer-more .cm-flip{transform:scaleX(-1)} .closer-emblem{width:clamp(88px,9vw,122px); margin:0 auto 6px} .closer-emblem svg{width:100%; height:auto; display:block; filter:drop-shadow(0 18px 44px rgba(0,0,0,.55)); animation:clbeat 2.8s ease-in-out infinite; transform-origin:50% 58%} @keyframes clbeat{0%,100%{transform:scale(1)} 9%{transform:scale(1.055)} 18%{transform:scale(1)}} @media (prefers-reduced-motion: reduce){ .closer-emblem svg{animation:none} } .closer-rule{width:56px; height:1px; margin:0 auto 26px; background:linear-gradient(90deg, rgba(216,168,95,0), rgba(216,168,95,.85), rgba(216,168,95,0)); position:relative} .closer-rule::after{content:""; position:absolute; left:50%; top:50%; width:4px; height:4px; border-radius:50%; transform:translate(-50%,-50%); background:#D8A85F; box-shadow:0 0 9px rgba(216,168,95,.8)} .closer h2{margin:0 auto; max-width:23ch; font-size:clamp(34px,4.4vw,60px); line-height:1.1; color:#F4EEE1} .closer h2 em{font-style:italic; color:var(--gold); text-shadow:0 2px 28px rgba(216,168,95,.18)} .closer .lead{margin:22px auto 0; max-width:52ch; color:#C4D1E0} .closer .cta{justify-content:center; margin-top:38px; gap:22px} .closer .btn{background:rgba(216,168,95,.10); border:1px solid rgba(216,168,95,.5); color:#FBF5E9; box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} .closer .btn svg{color:#F0CE8B} .closer .btn:hover{background:rgba(216,168,95,.20); border-color:rgba(240,206,139,.75); color:#FFFDF7} @media(max-height:820px) and (min-width:861px){ /* short desktop screens: compress the finale so closer+footer still share one frame */ .closer .inner{padding:38px 40px 44px} .closer-more{margin-bottom:16px} .closer-emblem{width:74px; margin-bottom:0} .closer h2{font-size:clamp(28px,3.8vw,42px)} .closer .lead{margin-top:12px} .closer .cta{margin-top:24px} .closer-rule{margin-bottom:18px} } /* footer */ .foot{background:#040B15; border-top:1px solid rgba(157,176,196,.12)} .foot .inner{max-width:1180px; margin:0 auto; padding:44px 40px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; color:var(--muted); font-size:13px} .foot .fnav{display:flex; gap:26px; flex-wrap:wrap} .foot a:hover{color:var(--gold)} .foot .tmnote{max-width:1180px; margin:0 auto; padding:0 40px 34px; color:#5F7189; font-size:11.5px; line-height:1.6} /* scroll reveal */ .sr{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)} .sr.in{opacity:1; transform:none} .sr.d1{transition-delay:.08s}.sr.d2{transition-delay:.16s}.sr.d3{transition-delay:.24s} @media(max-width:820px){ .section .inner{padding:66px 22px} .pillar .inner{grid-template-columns:1fr; gap:26px} .pillar .side{position:static} .closer .inner{padding:84px 22px} .foot .inner{padding:30px 22px} .n-label{font-size:17px}.n-sub{font-size:10px} } @media (prefers-reduced-motion: reduce){ .sr{opacity:1; transform:none; transition:none} .beatpulse{animation:none; opacity:1} } /* ===== fonts: Fraunces + Geist, self-hosted; the old family names alias to them so every existing 'Playfair Display' / 'Inter' rule renders the new faces ===== */ @font-face{font-family:"Fraunces";font-style:normal;font-display:swap; font-weight:100 900;font-variation-settings:"SOFT" 0,"WONK" 0; src:url(/static/fonts/fraunces-normal.woff2) format("woff2-variations");} @font-face{font-family:"Playfair Display";font-style:normal;font-display:swap; font-weight:100 900;font-variation-settings:"SOFT" 0,"WONK" 0; src:url(/static/fonts/fraunces-normal.woff2) format("woff2-variations");} @font-face{font-family:"Fraunces";font-style:italic;font-display:swap; font-weight:100 900;font-variation-settings:"SOFT" 0,"WONK" 1; src:url(/static/fonts/fraunces-italic.woff2) format("woff2-variations");} @font-face{font-family:"Playfair Display";font-style:italic;font-display:swap; font-weight:100 900;font-variation-settings:"SOFT" 0,"WONK" 1; src:url(/static/fonts/fraunces-italic.woff2) format("woff2-variations");} @font-face{font-family:"Geist";font-style:normal;font-display:swap; font-weight:100 900; src:url(/static/fonts/geist.woff2) format("woff2-variations");} @font-face{font-family:"Inter";font-style:normal;font-display:swap; font-weight:100 900; src:url(/static/fonts/geist.woff2) format("woff2-variations");} /* ===== SECOND EDITION restyle ===== */ /* ============================================================================ CHORDAE — SECOND EDITION (preview restyle) Design read: an editorial-institutional medical broadsheet in warm black, cords of gold tension, Fraunces against Geist, squared shapes, grain on ink. HARD RULE OBSERVED THROUGHOUT: The three pillar chapters (.cat) are scroll-pinned full-screen frames whose vertical budget is hand-computed (min-height:100vh; overflow:hidden; .cat__inner padding-top:calc(50vh - 330px)). NOTHING below changes their display, grid, padding, height or overflow. Skin only. ========================================================================= */ /* ---- 1. TYPE ------------------------------------------------------------ */ :root{ --f-display:"Fraunces","Playfair Display",Georgia,serif; --f-ui:"Geist","Inter",system-ui,-apple-system,sans-serif; --gold:#E4B96D; --gold-soft:#CBA45E; --gold-hi:#F7DDA6; --crimson:#B31E33; --e-out:cubic-bezier(.22,1,.30,1); --r-0:0px; --r-1:3px; --r-2:6px; /* squared shape system replaces pills */ } body{font-family:var(--f-ui); letter-spacing:-.005em} h1,h2,h3,.cat__title,.section h2,.closer h2,.emb-name,.cat__kicker, .closer-more .cm-text,.sc-kicker,.cat__more h3{font-family:var(--f-display) !important} h1,h2,.cat__title,.section h2,.closer h2{font-variation-settings:"SOFT" 0,"WONK" 0; letter-spacing:-.02em} .hero h1{letter-spacing:-.032em} [class*="kn"],.eyebrow,.link-word,.rp-label,.rp-khead{font-variant-numeric:tabular-nums} /* ---- 2. GRAIN + AMBIENT ------------------------------------------------- */ body::after{ content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.42; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } @media (prefers-reduced-motion:reduce){ body::after{opacity:.3} } /* ---- 3. SHAPE SYSTEM: every pill becomes a squared editorial block ------- */ .btn,.hbtn,#heroCopy .hbtn-primary,.hbtn-try,.cat__try .hbtn-try, .emb-label .kn,.cat__kicker .kn,.link-sub,.leaf-card .lc-word{border-radius:var(--r-1) !important} .btn-ghost:focus-visible,.hbtn:focus-visible{border-radius:var(--r-1)} /* ---- 4. BUTTONS --------------------------------------------------------- */ .btn{ background:linear-gradient(180deg,rgba(228,185,109,.16),rgba(228,185,109,.07)) !important; border:1px solid rgba(228,185,109,.55) !important; padding:15px 28px !important; font-weight:600 !important; letter-spacing:.005em !important; box-shadow:inset 0 1px 0 rgba(255,236,196,.16), 0 14px 34px -20px rgba(0,0,0,.9) !important; } .btn:hover{background:linear-gradient(180deg,rgba(228,185,109,.28),rgba(228,185,109,.13)) !important; border-color:rgba(247,221,166,.85) !important; transform:translateY(-2px) !important} .hbtn-try,.cat__try .hbtn-try{ background:linear-gradient(180deg,#F7DDA6 0%,#E4B96D 55%,#C2913F 100%) !important; border:1px solid rgba(255,238,197,.95) !important; color:#0B1420 !important; font-weight:700 !important; letter-spacing:.045em !important; text-transform:uppercase !important; font-size:12.5px !important; padding:15px 46px !important; box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 20px 44px -20px rgba(228,185,109,.65) !important; } .hbtn-try:hover{transform:translateY(-2px) !important; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 26px 54px -20px rgba(228,185,109,.85) !important} /* ---- 5. EYEBROWS: rule + tracked caps, no dots -------------------------- */ .eyebrow{color:#D3B278 !important; letter-spacing:.24em !important; font-weight:600 !important} .eyebrow .sep{border-radius:0 !important; width:9px !important; height:1px !important; background:rgba(228,185,109,.45) !important} .eyebrow .eb-rule{width:44px !important; background:linear-gradient(90deg,rgba(228,185,109,.95),rgba(228,185,109,0)) !important} /* ---- 6. HERO leaf cards (animation untouched, skin only) ---------------- */ .leaf-card .lc-word{ background:rgba(6,12,20,.62) !important; backdrop-filter:blur(9px) saturate(1.15) !important; border:1px solid rgba(228,185,109,.30) !important; box-shadow:inset 0 1px 0 rgba(255,238,203,.13), 0 18px 42px -22px rgba(0,0,0,.95) !important; letter-spacing:.14em !important; font-weight:600 !important; } .leaf-card .lc-word::before{border-radius:0 !important; width:5px !important; height:5px !important; transform:rotate(45deg) !important} /* ---- 7. LINKSTAGE (cord animation untouched, skin only) ----------------- */ .link-word{letter-spacing:.20em !important; font-weight:700 !important} .link-word .lw-dot{border-radius:0 !important; width:8px !important; height:8px !important; transform:rotate(45deg) !important} .link-sub{border-color:rgba(228,185,109,.28) !important} #link-h{letter-spacing:-.028em !important} /* ---- 8. THE THREE CHAPTERS — ambient chambers (NO layout properties) ---- */ .cat{border-top:1px solid rgba(228,185,109,.16) !important} #scheduling{background: radial-gradient(120% 90% at 14% 0%, rgba(179,30,51,.30) 0%, rgba(6,11,19,0) 56%), radial-gradient(90% 70% at 92% 100%, rgba(228,185,109,.10) 0%, rgba(6,11,19,0) 60%), linear-gradient(180deg,#0A0F17 0%,#06090F 100%) !important} #academics{background: radial-gradient(120% 90% at 86% 0%, rgba(228,185,109,.24) 0%, rgba(6,11,19,0) 56%), radial-gradient(90% 70% at 8% 100%, rgba(179,30,51,.13) 0%, rgba(6,11,19,0) 60%), linear-gradient(180deg,#0B0F14 0%,#06090F 100%) !important} #compliance{background: radial-gradient(120% 90% at 14% 0%, rgba(96,132,176,.24) 0%, rgba(6,11,19,0) 56%), radial-gradient(90% 70% at 92% 100%, rgba(228,185,109,.11) 0%, rgba(6,11,19,0) 60%), linear-gradient(180deg,#080D15 0%,#05080E 100%) !important} /* giant chapter numeral: stroked, bleeding off the right edge */ .cat__bgnum{ color:transparent !important; -webkit-text-stroke:1.5px rgba(228,185,109,.20) !important; font-family:var(--f-display) !important; font-weight:600 !important; right:-1.5% !important; letter-spacing:-.05em !important; } .cat__title{color:#F7F2E7 !important; letter-spacing:-.026em !important; font-weight:600 !important} .cat__lead{color:#B9C8D8 !important} /* feature rows: flush editorial ledger, not bordered boxes. display/gap/margins untouched so the pinned height budget still holds. */ .cat__feat{ border:0 !important; border-top:1px solid rgba(228,185,109,.20) !important; border-radius:0 !important; background:transparent !important; padding:15px 4px 15px 2px !important; transition:border-color .25s ease, background .25s ease, transform .25s var(--e-out) !important; } .cat__feat:hover{ transform:none !important; border-top-color:rgba(247,221,166,.75) !important; background:linear-gradient(180deg,rgba(228,185,109,.075),rgba(228,185,109,0)) !important; } .cat__feat .fi{color:var(--gold) !important; opacity:.9} .cat__feat h3{color:#F0E9DA !important; font-weight:600 !important; letter-spacing:-.005em !important} .cat__feat p{color:#93A7BC !important} .cards-interactive .cat__feat .fx{color:var(--gold) !important} .cat__more{border-style:dashed !important; border-top-style:dashed !important; border:1px dashed rgba(228,185,109,.34) !important; border-radius:var(--r-1) !important} .emb-label .kn,.cat__kicker .kn{ border-color:rgba(228,185,109,.5) !important; letter-spacing:.2em !important; font-family:var(--f-ui) !important; background:rgba(6,11,19,.5) !important} .emb-name{letter-spacing:-.01em !important} /* ---- 9. THE REPLACE CHAPTER -------------------------------------------- */ .replace{ position:relative; z-index:3; isolation:isolate; border-top:1px solid rgba(228,185,109,.16); background: radial-gradient(105% 80% at 50% -10%, rgba(179,30,51,.20) 0%, rgba(6,11,19,0) 58%), radial-gradient(80% 60% at 88% 108%, rgba(228,185,109,.14) 0%, rgba(6,11,19,0) 62%), linear-gradient(180deg,#080C13 0%,#05080E 100%); } .rp-inner{max-width:1180px; margin:0 auto; padding:clamp(84px,10vw,132px) 40px clamp(90px,11vw,140px)} .rp-head{max-width:none; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(28px,5vw,72px); align-items:end} .rp-khead{grid-column:1/-1; margin:0 0 6px; color:#D3B278; font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; display:flex; align-items:center; gap:14px} .rp-khead::after{content:""; flex:1 1 auto; height:1px; background:linear-gradient(90deg,rgba(228,185,109,.5),rgba(228,185,109,0))} .rp-title{font-family:var(--f-display); font-weight:600; color:#F7F2E7; font-size:clamp(34px,4.6vw,60px); line-height:1.06; letter-spacing:-.028em; text-wrap:balance; margin:0} .rp-lead{font-size:clamp(16px,1.35vw,18.5px); color:#B4C3D4; line-height:1.66; margin:0; max-width:52ch; padding-bottom:6px} .rp-compare{margin-top:clamp(42px,5.4vw,70px); display:grid; grid-template-columns:minmax(0,1.25fr) auto minmax(0,.85fr); gap:clamp(20px,3vw,44px); align-items:stretch} .rp-label{margin:0 0 22px; font-size:10.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:#7C8FA5} .rp-label.gold{color:#E4B96D} .rp-before{padding:clamp(24px,2.6vw,34px) clamp(22px,2.4vw,32px) clamp(10px,1.4vw,18px); border:1px solid rgba(157,176,196,.16); border-radius:var(--r-2); background:rgba(255,255,255,.012)} .rp-row{display:grid; grid-template-columns:minmax(96px,.34fr) 1fr; gap:clamp(14px,2vw,28px); align-items:baseline; padding:16px 0; border-top:1px solid rgba(157,176,196,.13)} .rp-row:first-of-type{border-top:0; padding-top:2px} .rp-pillar{font-family:var(--f-display); font-size:clamp(17px,1.55vw,21px); color:#EFE7D7; letter-spacing:-.012em; font-weight:600} .rp-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 10px} .rp-chip{font-size:13.5px; color:#96A9BE; padding:6px 12px; border-radius:var(--r-1); border:1px solid rgba(157,176,196,.20); background:rgba(255,255,255,.018); position:relative; white-space:nowrap; transition:color .22s ease, border-color .22s ease} .rp-chip::after{content:""; position:absolute; left:9px; right:9px; top:50%; height:1px; background:rgba(179,30,51,.62); transform:scaleX(0); transform-origin:left center; transition:transform .34s var(--e-out)} .rp-before:hover .rp-chip::after{transform:scaleX(1)} .rp-before:hover .rp-chip{color:#74879C; border-color:rgba(157,176,196,.13)} .rp-arrow{display:flex; align-items:center; justify-content:center; padding:0 2px} .rp-arrow svg{width:clamp(34px,3.4vw,46px); height:auto; display:block; filter:drop-shadow(0 8px 22px rgba(228,185,109,.35))} .rp-after{display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,3vw,40px) clamp(24px,2.6vw,34px); border:1px solid rgba(228,185,109,.42); border-radius:var(--r-2); background:linear-gradient(165deg, rgba(228,185,109,.11) 0%, rgba(228,185,109,.03) 46%, rgba(6,11,19,.2) 100%); box-shadow:inset 0 1px 0 rgba(255,238,203,.16), 0 34px 70px -40px rgba(0,0,0,.95)} .rp-after-title{font-family:var(--f-display); font-weight:600; color:#FBF6EC; font-size:clamp(28px,3vw,40px); line-height:1.04; letter-spacing:-.026em; margin:0} .rp-after-sub{margin:14px 0 0; font-size:15px; line-height:1.62; color:#C9D5E2; max-width:34ch} .rp-cta{display:inline-flex; align-items:center; gap:10px; margin-top:26px; align-self:flex-start; padding:14px 24px; border-radius:var(--r-1); font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:#0B1420; background:linear-gradient(180deg,#F7DDA6 0%,#E4B96D 55%,#C2913F 100%); border:1px solid rgba(255,238,197,.95); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 18px 40px -20px rgba(228,185,109,.6); transition:transform .22s var(--e-out), box-shadow .22s ease} .rp-cta svg{width:14px; height:14px; transition:transform .22s var(--e-out)} .rp-cta:hover{transform:translateY(-2px)} .rp-cta:hover svg{transform:translateX(3px)} .rp-cta:focus-visible{outline:2px solid var(--gold-hi); outline-offset:3px} @media(max-width:860px){ .rp-head{grid-template-columns:1fr; gap:20px; align-items:start} .rp-lead{max-width:62ch} .rp-compare{grid-template-columns:1fr; gap:22px} .rp-arrow{transform:rotate(90deg); padding:4px 0} } @media(max-width:640px){ .rp-inner{padding:70px 22px 78px} .rp-row{grid-template-columns:1fr; gap:10px; padding:14px 0} } /* ---- 10. FINALE + FOOT -------------------------------------------------- */ .closer{background: radial-gradient(95% 110% at 50% -10%, #16324E 0%, rgba(5,8,14,0) 60%), radial-gradient(110% 130% at 50% 118%, rgba(179,30,51,.20) 0%, rgba(5,8,14,0) 55%), linear-gradient(180deg,#070B12 0%,#05080E 100%) !important} #cl-h{letter-spacing:-.03em !important; color:#F8F3E9 !important} #cl-h em{color:var(--gold) !important} .closer-rule::after{border-radius:0 !important; transform:translate(-50%,-50%) rotate(45deg) !important; background:var(--gold) !important} .closer-more .cm-text{letter-spacing:.01em !important} .foot{background:#04070C !important; border-top:1px solid rgba(228,185,109,.14) !important} .foot .inner{font-size:12.5px !important; letter-spacing:.005em} .foot .fnav a{transition:color .2s ease} .foot a:hover{color:var(--gold) !important} .tmnote{color:#657A90 !important; border-top:1px solid rgba(157,176,196,.07); padding-top:20px !important; max-width:1180px; margin:0 auto} /* ---- 11. FOCUS / SELECTION --------------------------------------------- */ ::selection{background:rgba(228,185,109,.28); color:#FFF8EA} a:focus-visible,button:focus-visible{outline:2px solid var(--gold-hi); outline-offset:3px; border-radius:var(--r-1)} /* ============================================================================ SECOND PASS — the departure Sunny asked for. Still skin-only on the pinned chapters: the ONLY layout properties touched below are HORIZONTAL (padding-left / padding-right / width). No vertical padding, height, display, min-height or overflow is changed on .cat, .cat__inner, .cat__features or .cat__col. ========================================================================= */ /* ---- 12. GUTTER: stop the chapter content bleeding off the right edge ---- */ /* .cat__inner carries class "inner" but no standalone .inner rule exists, so it has always run edge-to-edge. That is the "not fitting well" complaint. */ @media(min-width:861px){ .cat__inner{ max-width:1420px !important; margin-left:auto !important; margin-right:auto !important; padding-left:clamp(30px,4.6vw,72px) !important; padding-right:clamp(30px,4.6vw,72px) !important; } } /* ---- 13. MASTHEAD as an editorial nameplate ----------------------------- */ .masthead .nav .nl{text-transform:uppercase !important; letter-spacing:.17em !important; font-size:11.5px !important; font-weight:600 !important; color:#CFC4AE !important} .masthead .nav{gap:34px !important} .masthead .pill{border-radius:var(--r-1) !important; text-transform:uppercase !important; letter-spacing:.15em !important; font-size:11.5px !important; font-weight:700 !important; padding:12px 24px !important; box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 16px 34px -18px rgba(228,185,109,.7) !important} .masthead .tag{letter-spacing:.02em !important; font-size:9.5px !important} /* mixed case, matching the sub-page masthead (Sunny, Jul 28) */ /* ---- 14. THE CHAPTER LEDGER: numbered rows + a spine between the columns */ .cat__features{counter-reset:feat} .cat__feat{counter-increment:feat} /* retire the tick icon; the numeral takes its slot (same flex track, no height change) */ .cat__feat .fi{width:0 !important; height:0 !important; margin:0 !important; opacity:0 !important; overflow:hidden !important; flex:0 0 0 !important} .cat__feat::before{ content:counter(feat,decimal-leading-zero); flex:0 0 auto; align-self:flex-start; font-family:var(--f-ui); font-size:10.5px; font-weight:600; line-height:1.55; letter-spacing:.14em; font-variant-numeric:tabular-nums; color:rgba(228,185,109,.62); padding-top:2px; min-width:20px; transition:color .25s ease; } .cat__feat:hover::before{color:var(--gold-hi)} /* hairline spine between the two runtime-built columns (horizontal only) */ .cat__col + .cat__col{padding-left:clamp(16px,1.8vw,26px) !important; border-left:1px solid rgba(228,185,109,.15) !important} .cat__features{padding-right:2px} /* ---- 15. THE EMBLEM: a taut line mark, not a soft gold slab ------------- */ /* presentation attributes on the SVG lose to any author rule — no !important */ .cat__emblem .emb path:nth-of-type(1){opacity:.11} /* fill wash */ .cat__emblem .emb path:nth-of-type(2){stroke-width:1.1; stroke:rgba(228,185,109,.18)} /* halo */ .cat__emblem .emb path:nth-of-type(3){stroke-width:3.4} /* main cord */ .cat__emblem .emb circle{r:5} .cat__emblem{filter:drop-shadow(0 26px 54px rgba(0,0,0,.75))} .emb-name{font-style:normal !important; font-weight:600 !important} .emb-label .kn{font-size:10px !important; padding:4px 9px !important} /* ---- 16. PAGE RAIL: squared ticks on a rule ----------------------------- */ .pgrail button::after{border-radius:0 !important; width:11px !important; height:1.5px !important; background:rgba(228,185,109,.42) !important; box-shadow:none !important} .pgrail button:hover::after{width:17px !important; background:var(--gold-hi) !important; transform:none !important} .pgrail button.on::after{width:19px !important; height:2px !important; background:var(--gold-hi) !important; transform:none !important; box-shadow:0 0 12px rgba(228,185,109,.7) !important} .pgrail .ring{border-radius:0 !important; width:19px !important; height:11px !important; border-color:rgba(247,221,166,.55) !important; box-shadow:none !important} .pgrail .lbl{border-radius:var(--r-1) !important; font-family:var(--f-ui) !important; letter-spacing:.18em !important; border-color:rgba(228,185,109,.4) !important} /* ---- 17. REPLACE: pillar numerals -------------------------------------- */ .rp-pillar{display:flex; align-items:baseline; gap:11px} .rp-n{font-family:var(--f-ui); font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.14em; font-variant-numeric:tabular-nums; color:rgba(228,185,109,.62); flex:0 0 auto} .rp-n::before{content:"0"} /* ---- 18. HERO: sharpen the opening statement --------------------------- */ .hero h1 em,.hero h1 i{font-style:italic; color:var(--gold-hi) !important} .hero .eyebrow{font-size:11px !important} .hero-sub,.hero p{letter-spacing:0} /* ---- 19. THE FINALE: make the last ask the loudest ---------------------- */ /* The closer is the money moment; it was the quietest button on the page. Style only — every word stays exactly as written. */ .closer .cta{align-items:center; gap:8px} .closer .cta .btn{ background:linear-gradient(180deg,#F7DDA6 0%,#E4B96D 55%,#C2913F 100%) !important; border:1px solid rgba(255,238,197,.95) !important; color:#0B1420 !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.05em !important; font-size:12.5px !important; padding:16px 40px !important; box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 22px 48px -20px rgba(228,185,109,.7) !important; } .closer .cta .btn svg{color:#0B1420 !important} .closer .cta .btn:hover{ background:linear-gradient(180deg,#FFEBBE 0%,#EFC77C 55%,#CE9C48 100%) !important; transform:translateY(-2px) !important; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 28px 58px -20px rgba(228,185,109,.9) !important; } .closer .cta .btn-ghost{ text-transform:uppercase !important; letter-spacing:.13em !important; font-size:11.5px !important; font-weight:600 !important; color:#CFC4AE !important; padding:16px 4px !important; } .closer .cta .btn-ghost:hover{color:var(--gold-hi) !important} /* ---- 20. THE PIVOT ARROW: give the hand-off some weight ----------------- */ .rp-arrow svg{width:clamp(44px,4.3vw,60px) !important} .rp-arrow svg path:first-of-type{stroke:rgba(228,185,109,.55) !important; stroke-width:1.4} .rp-arrow svg path:last-of-type{stroke-width:1.9} /* ---- 21. FOOT: warm the last inch so it belongs to the same page -------- */ .foot .inner{color:#8E8878 !important} .foot .fnav a{color:#B6AB98 !important} .foot .tmnote{color:#6E6A60 !important} /* ---- 22. THE SWITCH SLIDE, ANIMATED ------------------------------------- The section makes a claim; this lets you watch it happen. Three tool stacks are struck through in turn and a gold cord carries each one across into the single platform card (cords are drawn by chordae-replace.js). Nothing here touches layout - the cord layer is an absolutely-positioned overlay and every other rule is colour, shadow or opacity only. */ .rp-compare{position:relative} .rp-cords{position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0} .rp-before,.rp-after,.rp-arrow{position:relative; z-index:1} /* the crimson strike already existed on :hover - this is the same rule, fired per row by the entrance sequence so everyone actually sees it */ .rp-row.rp-struck .rp-chip::after{transform:scaleX(1)} .rp-row.rp-struck .rp-chip{color:#74879C; border-color:rgba(157,176,196,.13)} .rp-row.rp-struck .rp-chip:nth-child(2)::after{transition-delay:.08s} .rp-row.rp-struck .rp-chip:nth-child(3)::after{transition-delay:.16s} /* the card warms as the cords land in it */ .rp-after{transition:border-color .8s ease} .rp-after.rp-lit{border-color:rgba(247,221,166,.9)} .rp-after-title{transition:color .8s ease} .rp-after.rp-lit .rp-after-title{color:#FFF6E2} @keyframes rpBloom{ 0% {box-shadow:inset 0 1px 0 rgba(255,238,203,.16), 0 34px 70px -40px rgba(0,0,0,.95), 0 0 0 0 rgba(247,221,166,0)} 38% {box-shadow:inset 0 1px 0 rgba(255,238,203,.4), 0 34px 78px -34px rgba(228,185,109,.6), 0 0 0 9px rgba(247,221,166,.13)} 100%{box-shadow:inset 0 1px 0 rgba(255,238,203,.22), 0 34px 70px -38px rgba(228,185,109,.35), 0 0 0 1px rgba(247,221,166,.14)} } .rp-after.rp-bloom{animation:rpBloom 1.25s cubic-bezier(.2,.7,.2,1) both} /* once three live cords cross the gap, the static arrow has said its piece */ .rp-arrow{transition:opacity .9s ease; visibility:hidden} /* the three live cords tell the story alone (Sunny, Jul 29) */ .rp-compare.rp-drawn .rp-arrow{opacity:.28} @media(prefers-reduced-motion: reduce){ .rp-after.rp-bloom{animation:none} .rp-row.rp-struck .rp-chip::after{transition:none} } /* ---- 23. THE LAST TWO SCREENS ALWAYS LAND WHOLE ------------------------- Both are scroll STOPS: you arrive at the top edge and the page holds you there, so anything past the bottom of the window is not "below the fold", it is unreachable. A breakpoint cannot know how tall the footer wrapped to or how many lines the headline took, so chordae-home-b.js measures and hands back a 0..1 dial. Every value below interpolates against it: a screen twelve pixels short loses twelve pixels, and a roomy screen keeps the roomy composition. */ .closer .inner{padding:calc(96px - 66px*var(--fin,0)) 40px calc(110px - 76px*var(--fin,0))} .closer-more{margin-bottom:calc(30px - 16px*var(--fin,0))} .closer-emblem{width:calc(clamp(88px,9vw,122px) - 44px*var(--fin,0)); margin-bottom:calc(6px - 6px*var(--fin,0))} .closer-rule{margin-bottom:calc(26px - 10px*var(--fin,0))} .closer .cta{margin-top:calc(38px - 16px*var(--fin,0))} html.finale-tighter .closer h2{font-size:clamp(27px,3.2vw,40px)} /* only when the padding has nothing left to give */ html.finale-tighter .closer .lead{margin-top:10px} /* The footer shares that screen, so it shares the dial. At a roomy size it keeps its 44px of air; on a 650px laptop that air is a fourteenth of the whole window, and what it is padding is the small print we are trying to make visible. Type size and colour never move here - only the space around them. */ .foot .inner{padding:calc(44px - 24px*var(--fin,0)) 40px} .foot .tmnote{padding-top:calc(20px - 8px*var(--fin,0)) !important; padding-bottom:calc(34px - 18px*var(--fin,0))} .rp-inner{padding:calc(clamp(84px,10vw,132px) - 82px*var(--rpf,0)) 40px calc(clamp(90px,11vw,140px) - 88px*var(--rpf,0))} .rp-compare{margin-top:calc(clamp(42px,5.4vw,70px) - 34px*var(--rpf,0))} .rp-head{row-gap:calc(28px - 14px*var(--rpf,0))} html.rp-tighter .rp-before{padding-top:20px; padding-bottom:8px} html.rp-tighter .rp-row{padding:11px 0} html.rp-tighter .rp-after{padding-top:24px; padding-bottom:24px} html.rp-tighter .rp-label{margin-bottom:14px} html.rp-tighter .rp-after-sub{margin-top:10px} html.rp-tighter .rp-cta{margin-top:16px} /* ---- 24. THE FINE PRINT IS FINE, NOT INVISIBLE -------------------------- #6E6A60 on the footer's #04070C measures 3.9:1, under the 4.5:1 that WCAG 2.2 AA asks of 12.5px text. #857F6E measures 5.05:1: still clearly quieter than the nav above it, but a line you can actually read. */ .foot .tmnote{color:#857F6E !important} /* ---- 25. THE CHAPTERS ARE READABLE, NOT MINIATURE ----------------------- Sunny: "on the 1-2-3 pages the words are so small." Card descriptions sat at 13.5px, and on an 832px-tall MacBook the short-screen compression took them to 12.5px - smaller than the footer's fine print. Type comes up a step at every tier; the room comes out of card padding and gaps, never out of the one-screen fit (re-measured per size after this change). */ .cat__lead{font-size:18.5px} .cat__feat h3{font-size:16.5px} .cat__feat p{font-size:14.5px; line-height:1.52} .emb-label .kn,.cat__kicker .kn{font-size:13px} @media(min-width:861px) and (max-height:860px){ .cat__lead{font-size:17px; line-height:1.55} .cat__feat h3{font-size:15.5px} .cat__feat p{font-size:14px; line-height:1.46} .cat__feat{padding:10px 14px} .cat__col{gap:8px} } /* And the switch slide's smallest voices come up with them. */ .rp-khead{font-size:12px} .rp-label{font-size:11.5px} .rp-chip{font-size:14.5px} .rp-after-sub{font-size:15.5px} /* Very short screens (<=700px tall): the room comes from the display-size title and the air around it - the reading text keeps its size. */ @media(min-width:861px) and (max-height:700px){ .cat__title{font-size:clamp(24px,2.5vw,32px)} .cat__kicker{margin-bottom:7px} .cat__lead{margin-top:7px} .cat__features{margin-top:10px} .cat__feat{padding:7px 12px} .cat__try{margin-top:10px} .cat__inner{padding-bottom:10px} } /* the switch slide fills the viewport at its stop, so the finale's blue field can't peek in under it (Sunny, Jul 29) */ @media(min-width:861px){ .replace{min-height:100vh; display:flex; flex-direction:column; justify-content:center} } /* the try-it CTA docks inside the emblem's footprint, right under the chapter name - mark -> name -> action, scale-proof (Sunny, Jul 29) */ .cat__emblem .cat__try{position:absolute; top:87%; left:50%; transform:translateX(-50%); margin:0; width:max-content} /* the chapter body self-centres in the viewport when there's surplus height - the features grid already reserves its expansion room, so opening cards never re-centres it (Sunny, Jul 29) */ @media(min-width:861px){ .cat__body{align-self:center} } /* classic italic letterforms everywhere: Fraunces' WONK axis off at the element level (the @font-face descriptor is ignored by Chromium) - fixes the odd italic f (Sunny, Jul 30) */ em, i, h1 .s2, .tryit-title, .pillar .kicker, .showcase-intro h2 em, .sc-kicker, .emb-name, .cat__more h3, .cat__kicker, .closer-more .cm-text, .closer h2 em, .hero h1 em, .hero h1 i{ font-variation-settings:"WONK" 0,"SOFT" 0}