/* ===================================================================== CrackMac Creative Studios: site design system, v2 Two layers: 1. Studio layer (default): warm paper, navy ink, blue + lime accents, taken from the CMCS brand marks. Editorial, modern, genre-neutral. 2. Project layer (.dark, set on project page or on breakout panels): near-black, bone text, gold accent. Scoped, never global. Sections: 1 tokens 2 base 3 header 4 primitives 5 hero 6 work panels 7 disciplines 8 media rail 9 now 10 labels 11 project components 12 console 13 download 14 footer 15 palette 16 motion 17 responsive ===================================================================== */ /* ---------- 1. TOKENS ------------------------------------------------ */ :root{ /* studio layer */ --bg:#f1eee6; --bg-2:#e9e5d9; --card:#faf8f2; --card-2:#f4f1e8; --ink:#171b26; --txt:#333949; --mut:#6d6960; --faint:#9a958a; --line:#d8d3c4; --line-2:#bfb9a8; --acc:#2b50e2; --acc-2:#1d3bb0; --lime:#b9cc26; --red:#e0442a; --btn-bg:#171b26; --btn-tx:#f1eee6; --hdr-bg:rgba(241,238,230,.9); /* type */ --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* geometry */ --maxw:1160px; --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:14px; --s2:.75rem; --s3:1.1rem; --s4:1.6rem; --s5:2.4rem; --s6:3.6rem; --s7:5rem; --sh-1:0 2px 12px rgba(23,27,38,.08); --sh-2:0 16px 50px rgba(23,27,38,.16); --t-fast:.12s ease; --t:.2s ease; } /* project layer: apply .dark to a page body or a breakout panel */ .dark{ --bg:#0a0b0f; --bg-2:#0e1016; --card:#151823; --card-2:#1b1f2b; --ink:#e9dfc6; --txt:#c7bfa8; --mut:#8f876f; --faint:#655e4d; --line:#242938; --line-2:#333a4d; --acc:#c9a24a; --acc-2:#a07d2c; --lime:#7fa66a; --red:#c1584a; --btn-bg:linear-gradient(180deg,#c9a24a,#a07d2c); --btn-tx:#1a140a; --hdr-bg:rgba(10,11,15,.9); --sh-1:0 2px 12px rgba(0,0,0,.4); --sh-2:0 16px 50px rgba(0,0,0,.55); background:var(--bg);color:var(--txt); } /* ---------- 2. BASE -------------------------------------------------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans); line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip; } a{color:var(--acc);text-decoration:none} a:hover{color:var(--acc-2)} .dark a:hover{color:#e2c072} img{max-width:100%;display:block} svg{display:block} h1,h2,h3,h4{color:var(--ink);line-height:1.06;margin:0;font-weight:800;letter-spacing:-.02em} h1{font-size:clamp(2.5rem,6vw,4.4rem)} h2{font-size:clamp(1.6rem,3.2vw,2.3rem)} h3{font-size:1.22rem;letter-spacing:-.01em} p{margin:0} kbd{background:var(--card-2);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px; padding:.05rem .42rem;font:600 .8em/1.4 var(--mono);color:var(--ink);white-space:nowrap} ::selection{background:rgba(43,80,226,.2)} .dark ::selection{background:rgba(201,162,74,.3)} :focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--r-xs)} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--acc);color:#fff; padding:.6rem 1rem;font-weight:700;border-radius:0 0 var(--r-sm) 0} .skip:focus{left:0} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ---------- 3. HEADER ------------------------------------------------ */ .hdr{position:sticky;top:0;z-index:80;background:var(--hdr-bg);backdrop-filter:blur(10px); border-bottom:1px solid var(--line)} .hdr-in{max-width:var(--maxw);margin:0 auto;padding:.85rem 2rem;display:flex;align-items:center;gap:1.6rem} .brand{display:flex;align-items:center;gap:.65rem;margin-right:auto} .brand .blocks{display:flex;gap:3px;flex:none} .brand .blocks i{width:9px;height:9px;border-radius:1px} .brand .blocks i:nth-child(1){background:var(--acc)} .brand .blocks i:nth-child(2){background:var(--lime)} .brand .wm{font-weight:800;font-size:1.14rem;letter-spacing:-.01em;color:var(--ink);line-height:1} .brand .wm-sub{display:block;font:600 .55rem/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--mut);margin-top:.3rem} .hnav{display:flex;align-items:center;gap:.35rem} .hnav a{padding:.5rem .85rem;border-radius:var(--r-sm);color:var(--txt);font-weight:600;font-size:.94rem; border:1px solid transparent;transition:background var(--t-fast)} .hnav a:hover{background:var(--card);color:var(--ink)} .hnav a[aria-current]{background:var(--card);border-color:var(--line);color:var(--ink)} .hnav .hsep{width:1px;height:20px;background:var(--line);margin:0 .4rem} .hnav .hchip{font:700 .66rem/1 var(--mono);letter-spacing:.06em;color:var(--mut); border:1px solid var(--line-2);border-radius:99px;padding:.38rem .7rem;white-space:nowrap} .hnav .hchip b{color:var(--ink);font-weight:700} .hamb{display:none} #nav-toggle{position:absolute;opacity:0;pointer-events:none} /* ---------- 4. PRIMITIVES -------------------------------------------- */ main{display:block} .container{max-width:var(--maxw);margin:0 auto;padding:0 2rem;width:100%} section{padding:var(--s7) 0;position:relative} section + section{border-top:1px solid var(--line)} .eyebrow{display:inline-flex;align-items:center;gap:.55rem;font:700 .7rem/1 var(--mono); letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:1rem} .eyebrow::before{content:"";width:8px;height:8px;border-radius:1px;background:var(--acc);flex:none} .dark .eyebrow::before{background:var(--acc)} .eyebrow.lime::before{background:var(--lime)} .eyebrow.red::before{background:var(--red)} .lead{font-size:1.08rem;max-width:62ch} .lead + .lead{margin-top:1rem} .sec-head{max-width:70ch;margin-bottom:var(--s5)} .sec-head h2{margin-bottom:.7rem} .kv{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--mut)} .kv b{color:var(--ink);font-weight:600} .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--r-sm); font-weight:700;font-size:.95rem;background:var(--btn-bg);color:var(--btn-tx);border:1px solid transparent; cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t-fast);white-space:nowrap} .btn:hover{transform:translateY(-1px);box-shadow:var(--sh-1);color:var(--btn-tx)} .btn.big{padding:.95rem 1.9rem;font-size:1.02rem} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} .btn.ghost:hover{border-color:var(--ink);box-shadow:none} .dark .btn.ghost{color:var(--ink)} .dark .btn.ghost:hover{border-color:var(--acc)} .arrow-x::after{content:"\2197";font-family:var(--mono)} .arrow-r::after{content:"\2192";font-family:var(--mono)} .chip{display:inline-flex;align-items:center;gap:.45rem;font:700 .64rem/1 var(--mono); letter-spacing:.12em;text-transform:uppercase;color:var(--mut); border:1px solid var(--line-2);border-radius:var(--r-xs);padding:.34rem .55rem} .chip.acc{color:var(--acc);border-color:var(--acc)} .chip.red{color:var(--red);border-color:var(--red)} .chip.live{color:#597f43;border-color:#8aa576} .dark .chip.live{color:#7fa66a;border-color:#3c5233} .dot{width:7px;height:7px;border-radius:50%;background:#6f9b52;display:inline-block} .dark .dot{background:#7fa66a} @media (prefers-reduced-motion:no-preference){ .dot{animation:pulse 2.6s ease-out infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,166,106,.5)}70%{box-shadow:0 0 0 6px rgba(127,166,106,0)}100%{box-shadow:0 0 0 0 rgba(127,166,106,0)}} } .crumb{font:600 .78rem/1 var(--mono);color:var(--mut);margin-bottom:1.1rem;display:inline-flex;gap:.45rem} .crumb a{color:var(--mut)}.crumb a:hover{color:var(--acc)} /* ---------- 5. STUDIO HERO ------------------------------------------- */ .shero{padding:var(--s7) 0 var(--s6);position:relative;overflow:hidden} .shero .wmark{position:absolute;right:-3rem;top:-1.5rem;font-weight:800;font-size:clamp(8rem,22vw,19rem); line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--line); pointer-events:none;user-select:none} .shero .container{position:relative} .shero .blocksline{display:flex;gap:5px;margin-bottom:1.4rem} .shero .blocksline i{width:12px;height:12px;border-radius:2px} .shero .blocksline i:nth-child(1){background:var(--acc)} .shero .blocksline i:nth-child(2){background:var(--lime)} .shero .blocksline i:nth-child(3){background:var(--red)} .shero h1{max-width:15ch} .shero .lead{margin-top:1.4rem} .shero .cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.2rem} /* ---------- 6. WORK PANELS (dark breakouts) -------------------------- */ .wp{display:grid;grid-template-columns:.92fr 1.08fr;border-radius:var(--r-lg);overflow:hidden; border:1px solid var(--line-2);box-shadow:var(--sh-2)} .wp + .wp{margin-top:var(--s5)} .wp.flip{grid-template-columns:1.08fr .92fr} .wp .info{padding:2.3rem 2.2rem;display:flex;flex-direction:column;background:var(--bg)} .wp .info .kicker{font:700 .66rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acc-2)} .dark .info .kicker{color:var(--acc)} .wp .info h3{font-size:1.8rem;margin:.55rem 0 .35rem} .wp .info .status{font-family:var(--mono);font-size:.72rem;color:var(--mut);display:flex;gap:.6rem; align-items:center;flex-wrap:wrap;margin:0 0 1.1rem} .wp .info p{font-size:.98rem;max-width:46ch;margin-bottom:1.3rem} .wp .info .facts{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .8rem;border-top:1px solid var(--line); padding-top:1rem;margin-bottom:1.5rem} .wp .info .facts div{font-size:.78rem;color:var(--mut);padding:.28rem 0} .wp .info .facts b{display:block;color:var(--ink);font-weight:600;font-size:.88rem} .wp .info .actions{margin-top:auto;display:flex;gap:.6rem;flex-wrap:wrap} .wp .visual{position:relative;min-height:340px;background:#000;overflow:hidden} .wp .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s} .wp:hover .visual img{transform:scale(1.035)} .wp .visual .vchip{position:absolute;top:1rem;left:1rem} /* station panel: console strip on top of info */ .wp .opbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:0 0 1.3rem; padding:.6rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card); font:600 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)} .wp .opbar .on{color:#7fa66a;display:inline-flex;gap:.45rem;align-items:center} .conn-note{margin-top:var(--s4);font:600 .8rem/1.6 var(--mono);color:var(--mut);letter-spacing:.02em} /* ---------- 7. DISCIPLINES ------------------------------------------- */ .disc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:var(--s4)} .disc .d{background:var(--card);padding:1.6rem 1.5rem;transition:background var(--t-fast)} .disc .d:hover{background:var(--card-2)} .disc .d .no{font:700 .64rem/1 var(--mono);letter-spacing:.14em;color:var(--acc);display:block;margin-bottom:.8rem} .disc .d h3{font-size:1.02rem;margin-bottom:.4rem} .disc .d p{font-size:.88rem;color:var(--mut)} /* ---------- 8. MEDIA RAIL + GALLERY + LIGHTBOX ----------------------- */ .rail-x{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,420px);gap:1rem; overflow-x:auto;padding:.2rem .2rem 1rem;margin-top:var(--s4);scroll-snap-type:x proximity} .rail-x::-webkit-scrollbar{height:8px} .rail-x::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px} .rail-x .shot{scroll-snap-align:start} .shot{position:relative;border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden; background:#000;aspect-ratio:16/9;cursor:zoom-in;color:inherit;padding:0;display:block} .shot img{width:100%;height:100%;object-fit:cover;transition:transform .35s} .shot:hover img{transform:scale(1.045)} .shot .cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .85rem .55rem;font:600 .74rem/1.4 var(--mono); color:#efe7d1;background:linear-gradient(0deg,rgba(0,0,0,.88),transparent);text-align:left} .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:var(--s4)} .gallery .shot.wide{grid-column:1 / -1;aspect-ratio:auto} .gallery .shot.wide img{max-height:460px} .lightbox{border:none;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%} .lightbox::backdrop{background:rgba(8,9,12,.9)} .lb-inner{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1rem} .lb-inner img{max-width:min(1200px,94vw);max-height:82vh;width:auto;border-radius:var(--r-sm)} .lb-cap{font:600 .8rem/1 var(--mono);color:#b9b3a2} .lb-close{position:fixed;top:1.1rem;right:1.2rem;width:40px;height:40px;border:1px solid #4a4f60; background:#15161d;color:#efe7d1;border-radius:var(--r-sm);font-size:1.2rem;cursor:pointer} /* ---------- 9. NOW / ACTIVITY ---------------------------------------- */ .feed{border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;margin-top:var(--s4); list-style:none;padding:0} .entry{padding:1.2rem 1.5rem;border-top:1px solid var(--line);background:var(--card);display:grid; grid-template-columns:150px 1fr auto;gap:1.2rem;align-items:baseline} .entry:first-child{border-top:0} .entry .when{font:600 .72rem/1.5 var(--mono);color:var(--mut)} .entry .what h4{font-size:1rem;margin-bottom:.15rem} .entry .what p{font-size:.88rem;color:var(--mut)} a.entry{transition:background var(--t-fast)} a.entry:hover{background:var(--card-2)} .feed-foot{padding:.9rem 1.5rem;border-top:1px solid var(--line);background:var(--bg-2); font:600 .7rem/1 var(--mono);color:var(--mut);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap} .dark .feed-foot{background:var(--bg-2)} /* ---------- 10. LABELS ------------------------------------------------ */ .labels{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:var(--s4)} .label-card{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--card);padding:2rem; display:flex;flex-direction:column;gap:1.1rem} .label-card .plate{align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm); padding:1rem 1.3rem} .label-card .plate img{height:72px;width:auto} .label-card h3{font-size:1.15rem} .label-card p{font-size:.9rem;color:var(--mut);max-width:40ch} .label-card .tagline{font:700 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase} .label-card.cmcs .tagline{color:var(--acc)} .label-card.cmg .tagline{color:var(--red)} /* principles (about) */ .principles{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2.4rem;margin-top:var(--s4)} .principle{padding-left:1.4rem;position:relative} .principle::before{content:"";position:absolute;left:0;top:.55rem;width:9px;height:9px;border-radius:1px;background:var(--acc)} .principle:nth-child(2n)::before{background:var(--lime)} .principle h4{font-size:1.02rem;margin-bottom:.35rem} .principle p{font-size:.9rem;color:var(--mut)} .statement{border-left:3px solid var(--acc);padding:.3rem 0 .3rem 1.5rem;margin:var(--s4) 0; font-size:1.3rem;line-height:1.5;color:var(--ink);max-width:42ch;font-weight:600} /* split layout */ .split{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s5);align-items:start} /* compare table */ .compare{width:100%;border-collapse:collapse;margin-top:var(--s4);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden} .compare thead th{background:var(--bg-2);text-align:left;padding:1rem 1.2rem;border-bottom:1px solid var(--line-2)} .compare thead th b{font-size:1.02rem;color:var(--ink)} .compare thead th:first-child{width:150px} .compare td,.compare th.rowlab{padding:.8rem 1.2rem;border-top:1px solid var(--line);vertical-align:top;font-size:.9rem;background:var(--card)} .compare th.rowlab{text-align:left;font:600 .64rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);white-space:nowrap} /* ---------- 11. PROJECT PAGE COMPONENTS (used under body.dark) ------- */ .phero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .phero-bg{position:absolute;inset:0;background-size:cover;background-position:center; filter:brightness(.42) saturate(.85);transform:scale(1.05)} .phero-bg::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,11,15,.45),rgba(10,11,15,.85) 70%,var(--bg)), linear-gradient(90deg,rgba(10,11,15,.65),transparent 55%)} .phero-fog{position:absolute;inset:-20%;pointer-events:none;opacity:.5; background:radial-gradient(60% 50% at 30% 40%,rgba(150,150,140,.10),transparent 60%), radial-gradient(50% 40% at 75% 65%,rgba(120,120,110,.08),transparent 60%)} @media (prefers-reduced-motion:no-preference){.phero-fog{animation:drift 44s ease-in-out infinite alternate}} @keyframes drift{0%{transform:translate3d(-2%,0,0) scale(1.05)}100%{transform:translate3d(3%,-2%,0) scale(1.13)}} .phero-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:6.5rem 2rem 4.5rem} .phero .sub{font-family:var(--mono);color:var(--acc);letter-spacing:.24em;text-transform:uppercase;font-size:.95rem;margin:.9rem 0 1.3rem} .phero .tag{font-size:1.16rem;color:#ddd3b8;max-width:54ch;margin:0 0 2rem} .phero .cta{display:flex;gap:.7rem;flex-wrap:wrap} .phero .meta{margin-top:1.3rem;font-size:.8rem;color:var(--mut);font-family:var(--mono)} .cw{display:inline-block;margin-top:1.3rem;font:600 .74rem/1.5 var(--mono);color:var(--red); border:1px solid rgba(193,88,74,.4);border-radius:var(--r-sm);padding:.35rem .8rem} .facts{background:var(--bg-2);border-bottom:1px solid var(--line)} .facts-inner{display:grid;grid-template-columns:repeat(5,1fr);max-width:var(--maxw);margin:0 auto} .fact{padding:1.3rem 1.35rem;border-left:1px solid var(--line)} .fact:first-child{border-left:0} .fact .k{font:600 .62rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:.35rem} .fact .v{color:var(--ink);font-weight:600;font-size:.92rem} .subnav{position:sticky;top:57px;z-index:60;background:var(--hdr-bg);backdrop-filter:blur(10px); border-bottom:1px solid var(--line)} .subnav .in{max-width:var(--maxw);margin:0 auto;padding:0 2rem;display:flex;gap:.2rem;overflow-x:auto} .subnav a{padding:.75rem .8rem;font:600 .8rem/1 var(--mono);letter-spacing:.05em;color:var(--mut);white-space:nowrap; border-bottom:2px solid transparent} .subnav a:hover{color:var(--ink);border-bottom-color:var(--line-2)} .features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:var(--s4)} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:1.5rem} .card h3{font-size:1.02rem;margin-bottom:.5rem} .card p{font-size:.9rem;color:var(--mut)} .card .ic{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--acc-2);text-transform:uppercase;display:block;margin-bottom:.7rem} .dark .card .ic{color:var(--acc)} .kit{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem;margin-top:var(--s4)} .tool{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:1.05rem .9rem} .tool .n{font:700 .7rem/1 var(--mono);color:var(--faint)} .tool b{display:block;color:var(--acc);margin:.2rem 0 .35rem;font-size:1rem} .tool span{font-size:.82rem;color:var(--mut)} .kit-note{margin-top:1.2rem;font-size:.86rem;color:var(--mut)} table.specs{width:100%;border-collapse:collapse;margin-top:1.4rem;font-size:.94rem} .specs th{text-align:left;color:var(--mut);font-weight:600;width:200px;padding:.62rem .4rem;vertical-align:top;border-bottom:1px solid var(--line)} .specs td{padding:.62rem .4rem;border-bottom:1px solid var(--line);color:var(--txt)} .panel{border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--card)} /* ---------- 12. CONSOLE / TRANSMISSION (station) --------------------- */ .console{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-2);overflow:hidden;margin-top:var(--s4)} .console-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.2rem; border-bottom:1px solid var(--line);background:var(--bg);font:600 .68rem/1 var(--mono);letter-spacing:.1em;color:var(--mut);text-transform:uppercase} .console-top .live{color:#7fa66a;display:inline-flex;gap:.45rem;align-items:center} .readouts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)} .readout{background:var(--bg-2);padding:1.05rem 1.15rem} .readout .rk{font:600 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:.5rem} .readout .rv{font-family:var(--mono);font-size:1.1rem;color:#e2c072;font-weight:600;line-height:1.1} .readout .rv small{color:var(--mut);font-size:.6rem;font-weight:400} .readout .bar{height:4px;border-radius:2px;background:var(--card-2);margin-top:.6rem;overflow:hidden} .readout .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc-2),var(--acc))} .readout.warn .rv{color:#d3a44a} .threat{padding:1.15rem 1.2rem;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;font-family:var(--mono)} .threat .tk{font:600 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)} .threat .tbar{height:8px;border-radius:4px;background:var(--card-2);overflow:hidden;position:relative} .threat .tbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--acc-2),var(--red));border-radius:4px} .threat .tv{font-size:.8rem;color:#e2c072;font-weight:600} .sweep{position:relative;overflow:hidden} .sweep::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-40%; background:linear-gradient(90deg,transparent,rgba(201,162,74,.07),transparent);pointer-events:none} @media (prefers-reduced-motion:no-preference){.sweep::after{animation:sweep 7s linear infinite}} @keyframes sweep{0%{left:-40%}60%,100%{left:120%}} .transmission{border:1px solid var(--line);border-left:2px solid var(--acc-2);border-radius:0 var(--r-md) var(--r-md) 0; background:var(--card);padding:1.4rem 1.5rem;font-family:var(--mono);font-size:.9rem;color:#d7cdb2;line-height:1.75;margin-top:var(--s4)} .transmission .thead{font:600 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:.9rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap} .transmission p{margin:0 0 .7rem}.transmission p:last-child{margin:0} .transmission .sig{color:var(--mut);font-size:.78rem;margin-top:.9rem} .note-box{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2);padding:1.3rem 1.4rem;margin-top:var(--s4)} .note-box h4{font-size:1rem;margin-bottom:.5rem} .note-box p{font-size:.9rem;color:var(--mut)} .note-box + .note-box{margin-top:1rem} /* ---------- 13. DOWNLOAD --------------------------------------------- */ .dl-wrap{display:flex;justify-content:center;margin-top:var(--s4)} .dl{max-width:500px;width:100%;padding:2.2rem;text-align:center;background:linear-gradient(180deg,var(--bg-2),var(--bg)); border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-2)} .dl img.ic{width:82px;height:82px;margin:0 auto 1rem;border-radius:18px;border:1px solid var(--line-2)} .dl .meta{font-family:var(--mono);font-size:.78rem;color:var(--mut);margin-top:.9rem} .dl .note{font-size:.78rem;line-height:1.65;color:var(--faint);margin:1.4rem 0 0;border-top:1px solid var(--line);padding-top:1.1rem;text-align:left} /* ---------- 14. FOOTER ------------------------------------------------ */ .site-foot{border-top:1px solid var(--line);background:var(--bg-2);padding:var(--s6) 2rem var(--s5);margin-top:auto} .site-foot .cols{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2rem} .site-foot h5{font:700 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin:0 0 1rem} .site-foot .fcol a{display:block;color:var(--txt);font-size:.88rem;padding:.28rem 0} .site-foot .fcol a:hover{color:var(--acc)} .site-foot .about-col p{font-size:.86rem;color:var(--mut);max-width:36ch;margin-top:.9rem} .site-foot .bar{max-width:var(--maxw);margin:var(--s5) auto 0;padding-top:1.4rem;border-top:1px solid var(--line); display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center; font:600 .72rem/1.6 var(--mono);color:var(--faint)} /* ---------- 15. COMMAND PALETTE --------------------------------------- */ .cmdk{border:none;padding:0;background:transparent;max-width:620px;width:calc(100% - 2rem);margin:12vh auto auto;border-radius:var(--r-lg)} .cmdk::backdrop{background:rgba(15,17,24,.6)} .cmdk-box{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2)} .cmdk-in{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line)} .cmdk-in .pfx{font:700 .8rem/1 var(--mono);color:var(--acc)} .cmdk-in input{flex:1;background:transparent;border:none;color:var(--ink);font-size:1rem;font-family:var(--sans);outline:none} .cmdk-list{max-height:50vh;overflow-y:auto;padding:.4rem} .cmdk-item{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;background:transparent;border:none; color:var(--txt);padding:.7rem .8rem;border-radius:var(--r-sm);cursor:pointer;font-size:.92rem;font-family:var(--sans)} .cmdk-item .ci-k{font:700 .58rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-left:auto} .cmdk-item .ci-i{font-family:var(--mono);color:var(--acc);width:1.2rem;text-align:center;flex:none} .cmdk-item:hover,.cmdk-item[aria-selected="true"]{background:var(--card-2);color:var(--ink)} .cmdk-empty{padding:1.4rem;text-align:center;color:var(--faint);font-family:var(--mono);font-size:.85rem} .cmdk-hint{padding:.55rem 1.1rem;border-top:1px solid var(--line);font:600 .66rem/1 var(--mono);color:var(--faint); display:flex;gap:1rem;flex-wrap:wrap;background:var(--bg-2)} /* ---------- 16. MOTION ------------------------------------------------ */ html.js .reveal{opacity:0;transform:translateY(16px)} html.js .reveal.in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.6,.2,1)} @media (prefers-reduced-motion:reduce){ html.js .reveal{opacity:1;transform:none} .phero-fog,.dot,.sweep::after{animation:none!important} } /* ---------- 17. RESPONSIVE -------------------------------------------- */ @media (max-width:920px){ .hamb{display:inline-flex;align-items:center;gap:.55rem;background:var(--card);border:1px solid var(--line-2); color:var(--ink);border-radius:var(--r-sm);padding:.5rem .8rem;font:700 .72rem/1 var(--mono);letter-spacing:.1em; text-transform:uppercase;cursor:pointer} .hamb .bars{display:flex;flex-direction:column;gap:3px} .hamb .bars i{width:15px;height:2px;background:var(--ink);border-radius:2px} #nav-toggle:focus-visible ~ .hdr .hamb{outline:2px solid var(--acc);outline-offset:2px} .hnav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch; gap:0;background:var(--bg);border-bottom:1px solid var(--line-2);padding:.5rem 1rem 1rem;box-shadow:var(--sh-2)} #nav-toggle:checked ~ .hdr .hnav{display:flex} .hnav a{padding:.85rem .5rem;border-bottom:1px solid var(--line);border-radius:0} .hnav a:last-child{border-bottom:0} .hnav .hsep,.hnav .hchip{display:none} .wp,.wp.flip{grid-template-columns:1fr} .wp .visual{min-height:220px;order:-1} .split{grid-template-columns:1fr;gap:var(--s4)} .subnav{top:56px} } @media (max-width:760px){ .disc{grid-template-columns:1fr 1fr} .features{grid-template-columns:1fr 1fr} .facts-inner{grid-template-columns:1fr 1fr 1fr} .kit{grid-template-columns:1fr 1fr 1fr} .readouts{grid-template-columns:1fr 1fr} .gallery{grid-template-columns:1fr 1fr} .labels{grid-template-columns:1fr} .principles{grid-template-columns:1fr} .entry{grid-template-columns:1fr;gap:.3rem} .container,.hdr-in,.phero-in{padding-left:1.25rem;padding-right:1.25rem} .subnav .in{padding:0 1.25rem} section{padding:3.4rem 0} .shero{padding:3.6rem 0 3rem} .compare thead th:first-child{width:90px} } @media (max-width:520px){ .disc,.gallery,.features{grid-template-columns:1fr} .facts-inner{grid-template-columns:1fr 1fr} .kit{grid-template-columns:1fr 1fr} .site-foot .cols{grid-template-columns:1fr} .wp .info{padding:1.6rem 1.3rem} .btn.big{width:100%;justify-content:center} .phero .cta,.shero .cta{width:100%} .rail-x{grid-auto-columns:minmax(260px,86vw)} .compare td,.compare th.rowlab{padding:.7rem .8rem} .compare{display:block;overflow-x:auto;white-space:normal} .compare thead th:first-child{min-width:80px} .compare td{min-width:120px} }