/* ===================================================================== VGSpartans — shared "Spartan Sketchbook" stylesheet Hand-drawn craft, gold + ink on notebook paper. Shared across index.html, club-sites.html, personal-sites.html, privacy-policy.html, terms-of-service.html, developer.html. Demo fonts via Google Fonts; production self-hosts per plan §30. ===================================================================== */ :root{ --paper:#FBF5E4; --paper-card:#FFFDF4; --ink:#1A160D; --ink-soft:#5B5340; --gold:#C9A227; --gold-hi:#E0BC3E; --gold-deep:#8F7119; --line:rgba(26,22,13,.07); --board:#212a23; --board-hi:#2a352c; --chalk:#F1ECDC; --chalk-soft:#aeb6a6; --shadow:#1A160D; --field:#ffffff; --field-focus:#FFFDF3; --dot:rgba(26,22,13,.05); --hand:"Shantell Sans","Comic Sans MS",cursive; --scribble:"Caveat",cursive; --maxw:1180px; --pad:clamp(20px,5vw,56px); --legal-sidebar:220px; --legal-gap:clamp(28px,4vw,52px); --legal-main-w:680px; /* sketch radii */ --r-a:16px 28px 18px 26px / 28px 16px 26px 18px; --r-b:26px 16px 26px 18px / 16px 28px 18px 26px; --r-btn:20px 8px 20px 8px / 8px 20px 8px 20px; } /* ---------- dark mode (toggled via data-theme on ) ---------- Palette adapted from the Main Spartan Sketchbook, softened a touch for lower contrast and a smoother light<->dark transition. */ :root[data-theme="dark"]{ --paper:#262019; --paper-card:#322B22; --ink:#E4DAC6; --ink-soft:#A89E88; --gold:#E2BD49; --gold-hi:#EFCF63; --gold-deep:#D9B752; --line:rgba(230,220,196,.08); --board:#1E2620; --board-hi:#27302a; --chalk:#ECE6D8; --chalk-soft:#A7AE9F; --shadow:#15110A; --field:#2C2519; --field-focus:#37301F; --dot:rgba(230,220,196,.05); } /* smooth theme cross-fade — only colours, never transforms */ *{transition:background-color .32s ease,border-color .32s ease,color .32s ease} /* ---------- scrollbars (exact match to Main Spartan Sketchbook) ---------- */ ::-webkit-scrollbar{width:14px;height:14px} ::-webkit-scrollbar-track{background:var(--paper)} ::-webkit-scrollbar-thumb{background:var(--gold);border:3px solid var(--paper);border-radius:10px} ::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)} html{scrollbar-color:var(--gold) var(--paper);scrollbar-width:thin} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--hand);font-weight:500;color:var(--ink);line-height:1.55; background-color:var(--paper); background-image:radial-gradient(var(--dot) 1.1px,transparent 1.2px); background-size:24px 24px; -webkit-font-smoothing:antialiased;overflow-x:hidden; } a{color:inherit;text-decoration:none} button,input{font-family:inherit} img,svg{display:block} :focus-visible{outline:3px dashed var(--gold-deep);outline-offset:3px;border-radius:4px} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .rough-defs{position:absolute;width:0;height:0} /* ---------- sketch primitives ---------- */ .sketch{ border:2.6px solid var(--ink); border-radius:var(--r-a); box-shadow:6px 7px 0 var(--shadow); background:var(--paper-card); } .sketch.alt{border-radius:var(--r-b)} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-weight:700;font-size:1.05rem;letter-spacing:.3px;color:var(--ink); padding:.7em 1.4em;border:2.6px solid var(--ink);border-radius:var(--r-btn); background:var(--paper-card);box-shadow:4px 5px 0 var(--shadow);cursor:pointer; transform:rotate(-1deg); transition:transform .12s ease, box-shadow .12s ease, background .15s ease; } .btn:hover{transform:translateY(-2px) rotate(-1.5deg);box-shadow:5px 7px 0 var(--shadow)} .btn:active{transform:translate(3px,4px) rotate(0);box-shadow:1px 1px 0 var(--shadow)} .btn-gold{background:var(--gold)} .btn-gold:hover{background:var(--gold-hi)} .btn-ink{background:var(--ink);color:var(--paper-card);border-color:var(--ink)} .btn .arr{transition:transform .15s ease} .btn:hover .arr{transform:translateX(3px)} .btn-block{width:100%} /* gold swoosh underline */ .swoosh{display:block;height:11px;margin-top:6px} /* ---------- nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .25s, box-shadow .25s} .nav.solid{background:rgba(251,245,228,.9);backdrop-filter:blur(8px);box-shadow:0 3px 0 rgba(26,22,13,.08)} .nav-inner{display:flex;align-items:center;gap:22px;height:74px} .brand{display:flex;align-items:center;gap:10px} .brand .hmt{width:34px;height:36px;flex:none} .brand .name{font-size:1.5rem;font-weight:700;letter-spacing:.2px} .brand .name b{color:var(--gold-deep)} .nav-links{display:flex;gap:4px;margin-left:6px} .nav-links a{font-weight:600;font-size:1rem;padding:7px 12px;border-radius:10px;transition:background .15s,color .15s} .nav-links a:hover{background:rgba(201,162,39,.16)} .nav-right{margin-left:auto;display:flex;align-items:center;gap:12px} .lang{display:flex;border:2.2px solid var(--ink);border-radius:14px 6px 14px 6px/6px 14px 6px 14px;overflow:hidden} .lang button{font-size:.78rem;font-weight:700;letter-spacing:.04em;padding:5px 10px;background:var(--paper-card);cursor:pointer;border:none} .lang button.active{background:var(--gold);color:var(--ink)} .hamburger{display:none;width:44px;height:44px;border:2.4px solid var(--ink);border-radius:12px 5px 12px 5px;background:var(--paper-card);box-shadow:3px 3px 0 var(--shadow);cursor:pointer} .hamburger span{display:block;width:18px;height:2.4px;background:var(--ink);margin:3px auto;border-radius:2px} /* ---------- hero ---------- */ .hero{position:relative;padding:128px 0 90px;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center} .kicker{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);transform:rotate(-2deg);margin-bottom:12px} .hero h1{font-size:clamp(2.8rem,7vw,5rem);font-weight:700;line-height:.98;letter-spacing:.2px;margin-bottom:8px} .hero h1 em{font-style:normal;color:var(--gold-deep);position:relative;white-space:nowrap} .hero-sub{font-size:1.18rem;color:var(--ink-soft);font-weight:500;max-width:40ch;margin:18px 0 30px} .hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:30px} .hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.95rem;color:var(--ink-soft);font-weight:600} .hero-meta span{display:flex;align-items:center;gap:8px} .hero-meta .tick{color:var(--gold-deep)} .hero-art{position:relative;justify-self:center} .hero-art .big-helmet{width:min(360px,72vw);height:auto} .hero-art .d-star{position:absolute;top:-6px;right:6px;width:46px;animation:bob 4.4s ease-in-out infinite} .hero-art .d-stamp{position:absolute;bottom:-8px;left:-14px;width:118px;transform:rotate(-12deg)} .hero .d-arrow{position:absolute;left:42%;bottom:46px;width:90px;transform:rotate(8deg);opacity:.85} .hero .d-note{position:absolute;left:calc(42% + 70px);bottom:30px;font-family:var(--scribble);font-size:1.6rem;color:var(--gold-deep);transform:rotate(-6deg)} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @media (max-width:880px){ .hero-grid{grid-template-columns:1fr} .hero-art{margin-top:10px} .hero .d-arrow,.hero .d-note{display:none} } /* divider squiggle */ .divider{display:block;width:100%;height:26px;color:var(--gold);opacity:.85;margin:6px 0} /* ---------- marquee ---------- */ .marquee{position:relative;background:var(--ink);transform:rotate(-1.2deg) scale(1.04);padding:14px 0;overflow:hidden;margin:18px 0 0} .marquee-track{display:flex;width:max-content;animation:slide 34s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-track span{font-size:1.4rem;font-weight:700;color:var(--paper-card);padding:0 22px;display:flex;align-items:center;gap:22px;white-space:nowrap} .marquee-track span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold)} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- section scaffold ---------- */ .section{padding:clamp(64px,8vw,100px) 0} .sec-head{max-width:640px;margin-bottom:46px} .sec-head .kicker{margin-bottom:8px} .sec-head h2{font-size:clamp(2.1rem,4.6vw,3.2rem);font-weight:700;line-height:1.02} .sec-head p{color:var(--ink-soft);font-size:1.12rem;font-weight:500;margin-top:14px;max-width:54ch} .sec-head p b{color:var(--ink)} /* ---------- hosting cards (legacy, reusable) ---------- */ .host-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .hcard{padding:30px 26px 26px;display:flex;flex-direction:column;transition:transform .18s ease} .hcard:nth-child(1){transform:rotate(-1deg)} .hcard:nth-child(2){transform:rotate(.6deg)} .hcard:nth-child(3){transform:rotate(-.6deg)} .hcard:hover{transform:translateY(-4px) rotate(0)} .hcard .ic{width:54px;height:54px;color:var(--gold-deep);margin-bottom:18px} .hcard h3{font-size:1.7rem;font-weight:700;margin-bottom:8px} .hcard p{color:var(--ink-soft);font-weight:500;font-size:1.02rem;flex:1;margin-bottom:18px} .hcard .more{font-weight:700;color:var(--gold-deep);display:inline-flex;gap:.4em;align-items:center} .hcard .more .arr{transition:transform .15s} .hcard:hover .more .arr{transform:translateX(3px)} /* ---------- services grid (live) ---------- */ .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} .svc{position:relative;padding:34px 30px 28px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .18s ease} .svc:nth-child(odd){transform:rotate(-.8deg)} .svc:nth-child(even){transform:rotate(.7deg)} .svc:hover{transform:translateY(-5px) rotate(0)} .svc .ic{width:58px;height:58px;color:var(--gold-deep);margin-bottom:18px} .svc .live{position:absolute;top:-13px;right:20px;font-family:var(--scribble);font-size:1.2rem;font-weight:700;color:var(--ink);background:var(--gold);border:2.4px solid var(--ink);border-radius:14px 6px 14px 6px/6px 14px 6px 14px;box-shadow:3px 3px 0 var(--shadow);padding:1px 13px;transform:rotate(3deg)} .svc h3{font-size:1.95rem;font-weight:700;margin-bottom:8px} .svc p{color:var(--ink-soft);font-weight:500;font-size:1.05rem;flex:1;margin-bottom:18px} .svc .more{font-weight:700;color:var(--gold-deep);display:inline-flex;gap:.4em;align-items:center;font-size:1.05rem} .svc .more .arr{transition:transform .15s} .svc:hover .more .arr{transform:translateX(4px)} /* ---------- idea tiles (in the works) ---------- */ .ideas-head{margin:50px 0 0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .ideas-head h3{font-size:1.45rem;font-weight:700} .ideas-head .scrib{font-family:var(--scribble);font-size:1.4rem;color:var(--gold-deep);transform:rotate(-2deg)} .idea-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px} .idea{position:relative;padding:28px 22px 22px;border:2.4px dashed rgba(26,22,13,.3);border-radius:var(--r-b);transition:transform .18s ease,border-color .18s ease} .idea:nth-child(even){transform:rotate(.7deg)} .idea:nth-child(odd){transform:rotate(-.6deg)} .idea:hover{transform:translateY(-3px) rotate(0);border-color:var(--gold-deep)} .idea .soon{position:absolute;top:-14px;left:18px;font-family:var(--scribble);font-size:1.1rem;font-weight:700;color:var(--gold-deep);background:var(--paper);padding:0 9px;transform:rotate(-2deg)} .idea .ic{width:34px;height:34px;color:var(--ink-soft);margin-bottom:12px;opacity:.85} .idea h4{font-size:1.28rem;font-weight:700;color:var(--ink);margin-bottom:6px} .idea p{font-size:.97rem;color:var(--ink-soft);font-weight:500} .suggest{margin-top:30px;font-size:1.05rem;color:var(--ink-soft);font-weight:600} .suggest a{color:var(--gold-deep);text-decoration:underline wavy var(--gold);text-underline-offset:3px} @media (max-width:880px){.svc-grid{grid-template-columns:1fr}.idea-grid{grid-template-columns:1fr}} /* ---------- clubs / site gallery ---------- */ .clubs{background:rgba(201,162,39,.07)} .club-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .club{position:relative;padding:20px 18px 18px;background:var(--paper-card);text-decoration:none;display:block;transition:transform .18s ease} .club:nth-child(odd){transform:rotate(-1.4deg)} .club:nth-child(even){transform:rotate(1.2deg)} .club:hover{transform:translateY(-4px) rotate(0)} .club .tag{position:absolute;top:-10px;right:14px;width:26px;height:26px;background:var(--ac,var(--gold));border:2.4px solid var(--ink);border-radius:50%;box-shadow:2px 2px 0 var(--shadow)} .club .cn{font-size:1.35rem;font-weight:700;line-height:1;margin-bottom:6px;padding-right:18px} .club .meta{font-size:.92rem;color:var(--ink-soft);font-weight:500;margin-bottom:14px} .club .visit{font-size:.92rem;font-weight:700;color:var(--ink);display:inline-flex;gap:.35em;align-items:center} .club .visit .arr{color:var(--gold-deep);transition:transform .15s} .club:hover .visit .arr{transform:translateX(3px)} .club.more{display:flex;flex-direction:column;justify-content:center;background:transparent;border-style:dashed;box-shadow:none} /* ---------- chalkboard (how it works + stats) ---------- */ .board{position:relative;background:var(--board);color:var(--chalk); background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1.5px);background-size:18px 18px} .board::before,.board::after{content:"";position:absolute;left:0;right:0;height:14px;background:var(--gold-deep);opacity:.9} .board::before{top:0}.board::after{bottom:0} .board .wrap{padding-block:22px} .board .kicker{color:var(--gold-hi)} .board .sec-head h2{color:var(--chalk)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:8px} .step{position:relative} .step .ncircle{width:64px;height:64px;margin-bottom:16px} .step h3{font-size:1.55rem;font-weight:700;color:var(--chalk);margin-bottom:8px} .step p{color:var(--chalk-soft);font-weight:500;font-size:1.02rem} .step .code{display:inline-block;margin-top:12px;font-family:var(--scribble);font-size:1.35rem;color:var(--gold-hi);border-bottom:2px dashed rgba(224,188,62,.5);padding-bottom:2px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:60px;padding-top:34px;border-top:2px dashed rgba(241,236,220,.25)} .stat .v{font-size:3rem;font-weight:700;color:var(--chalk);line-height:1} .stat .v em{font-style:normal;color:var(--gold-hi)} .stat .l{font-size:.96rem;color:var(--chalk-soft);font-weight:500;margin-top:4px} @media (max-width:880px){.steps{grid-template-columns:1fr;gap:26px}.stats{grid-template-columns:1fr 1fr;gap:28px}} /* ---------- sticky-note principles ---------- */ .open-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} .open-lead h2{font-size:clamp(2.1rem,4.6vw,3.2rem);font-weight:700;line-height:1.03;margin:10px 0 16px} .open-lead p{font-size:1.14rem;color:var(--ink-soft);font-weight:500;max-width:42ch} .notes{display:grid;grid-template-columns:1fr 1fr;gap:22px} .note{position:relative;padding:26px 22px 22px;border:2px solid rgba(26,22,13,.14);box-shadow:5px 6px 0 rgba(26,22,13,.16);border-radius:3px} .note::before{content:"";position:absolute;top:-11px;left:50%;width:76px;height:22px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,255,255,.55);border:1px solid rgba(26,22,13,.08)} .note:nth-child(1){background:#FFF3C4;transform:rotate(-2deg)} .note:nth-child(2){background:#EAF0D8;transform:rotate(1.6deg)} .note:nth-child(3){background:#FBE3C9;transform:rotate(1.4deg)} .note:nth-child(4){background:#E4ECF3;transform:rotate(-1.6deg)} .note .pic{width:30px;height:30px;color:var(--ink);margin-bottom:10px} .note h4{font-size:1.2rem;font-weight:700;margin-bottom:5px} .note p{font-size:.96rem;color:var(--ink-soft);font-weight:500} @media (max-width:880px){.open-grid{grid-template-columns:1fr;gap:40px}} /* ---------- breadcrumb ---------- */ .crumb{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.98rem;color:var(--gold-deep);margin-bottom:16px} .crumb a{display:inline-flex;align-items:center;gap:.4em} .crumb a:hover{text-decoration:underline wavy var(--gold);text-underline-offset:3px} .crumb .sep{opacity:.5} /* ---------- page hero (detail pages) ---------- */ .phero{position:relative;padding:122px 0 60px;overflow:hidden} .phero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center} .phero h1{font-size:clamp(2.5rem,6vw,4.2rem);font-weight:700;line-height:1;letter-spacing:.2px;margin-bottom:6px} .phero h1 em{font-style:normal;color:var(--gold-deep)} .phero .lead{font-size:1.2rem;color:var(--ink-soft);font-weight:500;max-width:44ch;margin:18px 0 28px} .phero-cta{display:flex;flex-wrap:wrap;gap:14px} @media (max-width:880px){.phero-grid{grid-template-columns:1fr;gap:30px}} /* ---------- browser mock ---------- */ .window{border:2.6px solid var(--ink);border-radius:var(--r-a);box-shadow:7px 9px 0 var(--shadow);background:var(--paper-card);overflow:hidden;transform:rotate(1.1deg)} .window .bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:2.6px solid var(--ink);background:var(--field)} .window .bar i{width:13px;height:13px;border-radius:50%;border:2px solid var(--ink);display:block} .window .bar i.r{background:#E06B5E}.window .bar i.y{background:#E7C24A}.window .bar i.g{background:#6FB16A} .window .bar .addr{margin-left:10px;flex:1;background:var(--paper);border:2px solid var(--ink);border-radius:8px;font-size:.82rem;font-weight:700;color:var(--ink-soft);padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .window .screen{padding:24px} .mock-h{font-size:1.5rem;font-weight:700;line-height:1.05} .mock-sub{font-size:.95rem;color:var(--ink-soft);font-weight:600;margin-top:2px} .mock-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap} .mock-chip{font-size:.82rem;font-weight:700;color:var(--ink);background:rgba(201,162,39,.18);border:2px solid var(--ink);border-radius:10px 4px 10px 4px;padding:4px 10px} .mock-card{margin-top:16px;border:2.2px solid var(--ink);border-radius:12px 6px 12px 6px/6px 12px 6px 12px;box-shadow:3px 4px 0 var(--shadow);padding:14px 16px;background:var(--paper-card)} .mock-card .t{font-weight:700;font-size:1.02rem} .mock-card .m{font-size:.88rem;color:var(--ink-soft);font-weight:600;margin-top:2px} .mock-line{height:9px;border-radius:6px;background:rgba(26,22,13,.1);margin-top:10px} .mock-line.s{width:62%} /* ---------- feature grid ---------- */ .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .feat{padding:28px 24px;transition:transform .18s ease} .feat:nth-child(3n+1){transform:rotate(-.7deg)} .feat:nth-child(3n+2){transform:rotate(.5deg)} .feat:nth-child(3n){transform:rotate(-.4deg)} .feat:hover{transform:translateY(-4px) rotate(0)} .feat .ic{width:44px;height:44px;color:var(--gold-deep);margin-bottom:14px} .feat h3{font-size:1.35rem;font-weight:700;margin-bottom:6px} .feat p{color:var(--ink-soft);font-weight:500;font-size:1rem} @media (max-width:880px){.feat-grid{grid-template-columns:1fr}} /* ---------- flow (paper steps) ---------- */ .flow{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .flow .fstep{position:relative} .flow .fnum{font-family:var(--scribble);font-size:2.8rem;font-weight:700;color:var(--gold-deep);line-height:1;margin-bottom:4px} .flow .fstep h3{font-size:1.32rem;font-weight:700;margin-bottom:6px} .flow .fstep p{color:var(--ink-soft);font-weight:500;font-size:1rem} @media (max-width:880px){.flow{grid-template-columns:1fr;gap:26px}} /* ---------- audience ---------- */ .aud-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .aud{display:flex;gap:16px;padding:26px 24px} .aud .ic{width:44px;height:44px;flex:none;color:var(--gold-deep)} .aud h4{font-size:1.3rem;font-weight:700;margin-bottom:4px} .aud p{color:var(--ink-soft);font-weight:500;font-size:1rem} @media (max-width:680px){.aud-grid{grid-template-columns:1fr}} /* ---------- developer card ---------- */ .dev{position:relative;padding:128px 0 48px;overflow:hidden} .dev-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:50px;align-items:center} .dev-portrait{position:relative;justify-self:center;width:min(330px,78vw)} .dev-frame{position:relative;border:2.8px solid var(--ink);border-radius:var(--r-a);box-shadow:8px 10px 0 var(--shadow);background:var(--paper-card);padding:13px;transform:rotate(-2deg);transition:transform .22s ease} .dev-portrait:hover .dev-frame{transform:rotate(0)} .dev-photo{position:relative;width:100%;aspect-ratio:1;border:2.4px solid var(--ink);border-radius:var(--r-b);overflow:hidden;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#F3EAD0 0 13px,#EFE3C4 13px 26px)} .dev-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .dev-photo .ph-helmet{width:46%;height:auto;opacity:.85} .dev-seal{position:absolute;bottom:-24px;right:-20px;width:98px;height:98px;transform:rotate(-12deg);animation:bob 5s ease-in-out infinite} .dev-doodle{position:absolute;top:-18px;left:-16px;width:50px;transform:rotate(-10deg)} .dev-built{position:absolute;top:6px;right:-16px;font-family:var(--scribble);font-size:1.55rem;font-weight:700;color:var(--gold-deep);transform:rotate(6deg)} .dev-name{font-size:clamp(2.6rem,6.5vw,4.6rem);font-weight:700;line-height:.96;letter-spacing:.2px;margin:4px 0 4px} .dev-handle{font-family:var(--scribble);font-size:1.7rem;color:var(--gold-deep);transform:rotate(-1.5deg);display:inline-block;margin-bottom:12px} .dev-role{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:1.05rem;color:var(--ink);background:var(--gold);border:2.4px solid var(--ink);border-radius:var(--r-btn);box-shadow:3px 4px 0 var(--shadow);padding:5px 15px;transform:rotate(-1deg);margin-bottom:20px} .dev-bio{font-size:1.18rem;color:var(--ink-soft);font-weight:500;max-width:46ch;margin-bottom:22px} .dev-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px} .dev-tag{font-size:.92rem;font-weight:700;color:var(--ink);background:var(--paper-card);border:2.2px solid var(--ink);border-radius:12px 5px 12px 5px/5px 12px 5px 12px;box-shadow:3px 3px 0 var(--shadow);padding:5px 13px} .dev-tag:nth-child(odd){transform:rotate(-1.4deg)} .dev-tag:nth-child(even){transform:rotate(1.4deg)} .dev-cta-row{display:flex;flex-wrap:wrap;gap:14px} .dev-sign{margin-top:30px;font-family:var(--scribble);font-size:1.55rem;color:var(--ink-soft)} .dev-sign b{color:var(--ink)} @media (max-width:880px){ .dev-grid{grid-template-columns:1fr;gap:40px;text-align:center} .dev-bio{margin-inline:auto} .dev-tags,.dev-cta-row{justify-content:center} } /* ---------- legal pages (privacy, terms) ---------- */ .legal-page{ --legal-nav:74px; --legal-pad:clamp(16px,3vw,28px); --legal-pane-h:calc(100dvh - var(--legal-nav) - var(--legal-pad) * 2); box-sizing:border-box; padding:calc(var(--legal-nav) + var(--legal-pad)) var(--legal-pad) clamp(32px,4vw,48px); overflow:visible; min-height:var(--legal-pane-h); } .legal-page .wrap{ height:var(--legal-pane-h); min-height:0; max-width:calc(var(--legal-sidebar) + var(--legal-gap) + var(--legal-main-w) + var(--pad) * 2); } .legal-layout{ display:grid; grid-template-columns:var(--legal-sidebar) minmax(0,1fr); column-gap:var(--legal-gap); height:100%; min-height:0; align-items:stretch; } .legal-sidebar-col{ min-height:0; height:100%; } .legal-sidebar{ display:flex; flex-direction:column; height:100%; width:100%; overflow:hidden; padding:0; } .legal-sidebar-head{ flex:none; padding:22px 18px 12px; border-bottom:1.5px dashed rgba(26,22,13,.12); } .legal-sidebar-title{ font-size:1.05rem; font-weight:700; line-height:1.25; margin:0 0 10px; color:var(--ink); } .legal-sidebar-label{ font-family:var(--scribble); font-size:1.15rem; font-weight:700; color:var(--gold-deep); transform:rotate(-2deg); margin:0; } .legal-toc{ flex:1; min-height:0; overflow-y:auto; padding:12px 18px 18px; scrollbar-width:thin; scrollbar-color:var(--gold-deep) transparent; } .legal-toc ul{ list-style:none; margin:0; padding:0; } .legal-toc li{margin:0} .legal-toc a{ display:block; padding:7px 0 7px 2px; font-size:.92rem; font-weight:600; color:var(--gold-deep); line-height:1.35; text-decoration:underline wavy transparent; text-underline-offset:3px; transition:color .15s,text-decoration-color .15s; } .legal-toc a:hover,.legal-toc a.active{ color:var(--ink); text-decoration-color:var(--gold); } .legal-main{ display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; max-width:var(--legal-main-w); overflow:hidden; } .legal-main .crumb{ flex:none; margin-bottom:12px; } .legal-head{ flex:none; padding:0 0 16px; margin:0 0 16px; border-bottom:1.5px dashed rgba(26,22,13,.14); } .legal-head h1{ font-size:clamp(2rem,4.5vw,2.75rem); font-weight:700; line-height:1.05; letter-spacing:.2px; margin:0 0 10px; } .legal-meta{ font-size:.95rem; color:var(--ink-soft); font-weight:500; line-height:1.55; max-width:42ch; margin:0; } .legal-meta strong{color:var(--ink)} .legal-doc{ flex:1; min-height:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:clamp(26px,3.5vw,34px) clamp(22px,3vw,30px); box-shadow:4px 5px 0 var(--shadow); scrollbar-width:thin; scrollbar-color:var(--gold-deep) transparent; } .legal-prose{ min-width:0; max-width:100%; overflow-wrap:break-word; word-wrap:break-word; } .legal-prose > *:first-child{margin-top:0} .legal-prose > *:last-child{margin-bottom:0} .legal-part{ font-size:clamp(1.08rem,2.2vw,1.28rem); font-weight:700; line-height:1.3; margin:2em 0 .6em; padding-top:1.15em; color:var(--gold-deep); border-top:1.5px dashed rgba(26,22,13,.16); scroll-margin-top:16px; } .legal-prose > .legal-part:first-child{margin-top:0;padding-top:0;border-top:none} .legal-prose h3{ font-size:clamp(1rem,2vw,1.12rem); font-weight:700; margin:1.45em 0 .48em; line-height:1.3; } .legal-prose h4{ font-size:.96rem; font-weight:700; margin:1.1em 0 .38em; line-height:1.35; color:var(--ink-soft); } .legal-prose p{ font-size:.96rem; font-weight:500; color:var(--ink-soft); margin:0 0 .78em; line-height:1.65; } .legal-note{ color:var(--ink-soft); font-size:.98rem; margin:0 0 1em; line-height:1.55; } .legal-list{ margin:.25em 0 1em; padding-left:1.25em; font-size:.98rem; font-weight:500; color:var(--ink-soft); line-height:1.6; } .legal-list li{margin-bottom:.45em} .legal-list li::marker{color:var(--gold-deep)} .legal-table-wrap{ width:100%; max-width:100%; min-width:0; overflow-x:auto; margin:1em 0 1.25em; -webkit-overflow-scrolling:touch; border-radius:var(--r-b); } .legal-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.9rem; font-weight:500; color:var(--ink-soft); table-layout:fixed; } .legal-table th,.legal-table td{ padding:10px 12px; border:2px solid var(--ink); text-align:left; vertical-align:top; background:var(--paper-card); overflow-wrap:anywhere; word-break:break-word; } .legal-table th{font-weight:700;color:var(--ink);background:rgba(201,162,39,.14)} .legal-table tr + tr td,.legal-table tr + tr th{border-top:none} .legal-table th + th,.legal-table td + td{border-left:none} .legal-prose a{ color:var(--gold-deep); font-weight:700; text-decoration:underline wavy var(--gold); text-underline-offset:3px; overflow-wrap:anywhere; } .legal-prose a:hover{color:var(--ink)} @media (max-width:880px){ .legal-page{ --legal-pane-h:auto; min-height:0; padding:118px 0 clamp(56px,7vw,80px); } .legal-page .wrap{height:auto;max-width:var(--maxw)} .legal-layout{ grid-template-columns:1fr; row-gap:20px; height:auto; } .legal-sidebar-col{order:-1;height:auto} .legal-sidebar{height:auto;display:block} .legal-sidebar-head{padding:18px 16px 12px} .legal-toc{overflow:visible;padding:0 16px 16px} .legal-main{height:auto;overflow:visible;max-width:100%} .legal-doc{flex:none;overflow:visible;max-height:none} } @media (max-width:640px){ .legal-doc{padding:20px 16px 24px} .legal-table{font-size:.82rem} .legal-table th,.legal-table td{padding:8px 10px} .legal-toc a{font-size:.88rem} } /* ---------- CTA ---------- */ .cta{position:relative;text-align:center;padding:clamp(60px,8vw,92px) 0} .cta .banner{display:inline-block;background:var(--gold);padding:36px 50px;transform:rotate(-1.2deg);border:2.8px solid var(--ink);border-radius:var(--r-a);box-shadow:8px 9px 0 var(--shadow)} .cta h2{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;line-height:1} .cta p{font-size:1.14rem;font-weight:500;color:rgba(26,22,13,.78);margin:14px auto 24px;max-width:42ch} /* ---------- footer ---------- */ .footer{background:var(--ink);color:#cfc7b2;padding:64px 0 30px} .foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-bottom:42px} .foot-brand .brand .name{color:var(--paper-card)} .foot-brand p{font-size:.98rem;color:#8e8772;max-width:30ch;margin-top:14px;font-weight:500} .foot-col h5{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi);font-weight:700;margin-bottom:14px} .foot-col a{display:block;font-size:1rem;color:#c5bda8;font-weight:500;padding:5px 0;transition:color .15s} .foot-col a:hover{color:#fff} .foot-bot{border-top:1.5px dashed rgba(255,255,255,.16);padding-top:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center} .foot-bot p{font-size:.9rem;color:#7d7660;font-weight:500;max-width:64ch} .foot-bot .agpl{color:var(--gold-hi);font-weight:700;font-family:var(--scribble);font-size:1.3rem} @media (max-width:880px){.foot-top{grid-template-columns:1fr 1fr}} /* ---------- modal ---------- */ /* sign-in page — a single centered card, no tilt, with sketch atmosphere */ .signin{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:124px var(--pad) 76px;overflow:hidden} .si-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .si-deco::before{content:"";position:absolute;top:50%;left:50%;width:min(820px,96vw);height:min(820px,96vw);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(201,162,39,.18),rgba(201,162,39,0) 60%)} .si-deco svg{position:absolute} .si-watermark{top:50%;left:50%;width:min(560px,84vw);height:auto;transform:translate(-50%,-53%) rotate(-5deg);opacity:.06} .si-stamp{top:clamp(118px,17vh,186px);left:clamp(16px,8vw,156px);width:clamp(72px,9vw,112px);opacity:.5;transform:rotate(-9deg)} .si-star{width:clamp(32px,3.6vw,50px)} .si-star-a{top:clamp(104px,15vh,168px);right:clamp(24px,10vw,172px);transform:rotate(8deg);animation:bob 4.6s ease-in-out infinite} .si-star-b{bottom:clamp(102px,16vh,178px);right:clamp(34px,9vw,150px);width:clamp(24px,2.8vw,38px);transform:rotate(-6deg);animation:bob 5.4s ease-in-out infinite} .si-spark{width:clamp(18px,2vw,26px);opacity:.85} .si-spark-a{top:clamp(150px,24vh,260px);left:clamp(40px,16vw,300px);transform:rotate(-10deg)} .si-spark-b{bottom:clamp(150px,22vh,250px);right:clamp(60px,18vw,330px);transform:rotate(12deg)} .si-swoosh-d{bottom:clamp(92px,14vh,160px);left:clamp(22px,9vw,150px);width:clamp(132px,16vw,210px);opacity:.8;transform:rotate(-3deg)} .signin-card{position:relative;z-index:1;width:100%;max-width:430px;background:var(--paper-card);padding:38px 34px 32px; border:2.8px solid var(--ink);border-radius:var(--r-a);box-shadow:8px 10px 0 var(--shadow); background-image:repeating-linear-gradient(transparent,transparent 31px,var(--line) 31px,var(--line) 32px);background-position:0 22px} .si-tag{position:absolute;top:-15px;right:18px;font-family:var(--scribble);font-size:1.18rem;font-weight:700;color:var(--gold-deep);background:var(--paper-card);border:2px solid var(--ink);border-radius:12px 5px 12px 5px;box-shadow:3px 3px 0 var(--shadow);padding:1px 11px;transform:rotate(2.5deg)} /* 404 page — reuses .si-deco atmosphere, centered sketch content */ .notfound{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px var(--pad) 84px;overflow:hidden} .nf-inner{position:relative;z-index:1;max-width:640px} .nf-code{display:flex;align-items:center;justify-content:center;gap:clamp(4px,2vw,16px);margin-bottom:4px} .nf-code .dig{font-size:clamp(6.5rem,24vw,14rem);font-weight:700;line-height:.8;color:var(--gold-deep);text-shadow:6px 7px 0 var(--shadow)} .nf-code .dig:first-child{transform:rotate(-5deg)} .nf-code .dig:last-child{transform:rotate(4deg)} .nf-helmet{width:clamp(86px,17vw,178px);height:auto;transform:rotate(-3deg)} .nf-note{display:inline-block;font-family:var(--scribble);font-size:clamp(1.4rem,4vw,2rem);font-weight:700;color:var(--gold-deep);transform:rotate(-3deg);margin-bottom:8px} .notfound h1{font-size:clamp(2rem,5vw,3.3rem);font-weight:700;line-height:1.04;margin:4px 0 10px} .nf-p{font-size:1.15rem;color:var(--ink-soft);font-weight:500;max-width:46ch;margin:0 auto 26px} .nf-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} /* ===== admin sign-in — dark "command-post" vibe (reuses the email→code flow) ===== */ body.admin{background-color:#1b211d;background-image:radial-gradient(rgba(241,236,220,.05) 1px,transparent 1.3px);background-size:26px 26px;color:var(--chalk)} /* nav adapts to the dark surface */ body.admin .brand .name{color:var(--chalk)} body.admin .brand .name b{color:var(--gold-hi)} body.admin .nav.solid{background:rgba(18,23,19,.9);box-shadow:0 3px 0 rgba(0,0,0,.3)} body.admin .nav-links a{color:var(--chalk-soft)} body.admin .nav-links a:hover{background:rgba(241,236,220,.1);color:var(--chalk)} body.admin .lang{border-color:rgba(241,236,220,.3)} body.admin .lang button{background:#222a25;color:var(--chalk-soft)} body.admin .lang button.active{background:var(--gold);color:var(--ink)} body.admin .hamburger{background:#222a25;border-color:rgba(241,236,220,.3);box-shadow:3px 3px 0 rgba(0,0,0,.45)} body.admin .hamburger span{background:var(--chalk)} body.admin .mmenu{background:#222a25;border-color:rgba(241,236,220,.22);box-shadow:6px 8px 0 rgba(0,0,0,.45)} body.admin .mmenu a{color:var(--chalk);border-bottom-color:rgba(241,236,220,.12)} .admin-badge{align-self:center;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--gold);border:2px solid var(--ink);padding:3px 9px;border-radius:9px 4px 9px 4px;box-shadow:2px 2px 0 rgba(0,0,0,.45);transform:rotate(-2deg)} .admin-auth{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px var(--pad) 72px;overflow:hidden} .admin-bg{position:absolute;inset:0;pointer-events:none} .admin-bg::before{content:"";position:absolute;top:50%;left:50%;width:min(720px,94vw);height:min(720px,94vw);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(201,162,39,.15),rgba(201,162,39,0) 60%)} .admin-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(0,0,0,.35))} .admin-card{position:relative;z-index:1;width:100%;max-width:440px;background:#283330;color:var(--chalk); border:2.4px solid rgba(241,236,220,.16);border-radius:var(--r-a);box-shadow:8px 11px 0 #11140f; padding:32px 32px 24px;text-align:left} .admin-emblem{width:58px;height:58px;display:grid;place-items:center;margin-bottom:16px;color:var(--gold-hi); border:2.2px solid rgba(241,236,220,.18);border-radius:14px 6px 14px 6px;background:#1f2723;box-shadow:3px 3px 0 #11140f} .admin-emblem svg{width:30px;height:30px} .admin-auth .m-kicker{color:var(--gold-hi)} .admin-auth .m-title{color:var(--chalk);transform:none} .admin-auth .m-sub{color:var(--chalk-soft)} .admin-auth .field label{color:var(--chalk)} .admin-auth .input{background:#1b231f;color:var(--chalk);border-color:rgba(241,236,220,.28);box-shadow:4px 4px 0 rgba(0,0,0,.5)} .admin-auth .input::placeholder{color:#7f897f} .admin-auth .input:hover{box-shadow:5px 6px 0 rgba(0,0,0,.5)} .admin-auth .input:focus{border-color:var(--gold-hi);box-shadow:4px 4px 0 var(--gold-deep);background:#1f2823} .admin-auth .hint{color:var(--chalk-soft)} .admin-auth .otp input{background:#1b231f;color:var(--chalk);border-color:rgba(241,236,220,.28);box-shadow:3px 4px 0 rgba(0,0,0,.5)} .admin-auth .otp input:nth-child(odd),.admin-auth .otp input:nth-child(even){transform:none} /* straight = serious */ .admin-auth .otp input:focus{border-color:var(--gold-hi);box-shadow:3px 4px 0 var(--gold-deep);background:#1f2823} .admin-auth .otp input.filled{border-color:var(--gold-hi);background:#243029} .admin-auth .tlink{color:var(--gold-hi)} .admin-auth .tlink:hover{color:var(--chalk)} .admin-auth .mlink{color:var(--chalk-soft)} .admin-auth .mlink:hover{color:var(--chalk)} .admin-auth .btn{transform:none} .admin-auth .btn:hover{transform:translateY(-2px)} .admin-auth .btn:active{transform:translate(0,2px);box-shadow:1px 1px 0 #11140f} .admin-foot{display:flex;align-items:center;gap:9px;margin-top:20px;padding-top:14px;border-top:1.5px dashed rgba(241,236,220,.16);font-size:.82rem;font-weight:600;color:var(--chalk-soft)} .admin-foot svg{width:16px;height:16px;flex:none;color:var(--gold-hi)} .m-kicker{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);transform:rotate(-2deg);margin-bottom:4px} .m-title{font-size:2rem;font-weight:700;line-height:1;transform:rotate(-1deg);margin-bottom:8px} .m-sub{font-size:1rem;color:var(--ink-soft);font-weight:500;margin-bottom:22px} .m-sub b{color:var(--ink)} .field label{display:block;font-size:.95rem;font-weight:700;margin-bottom:7px} .input{width:100%;height:50px;padding:0 15px;font-size:1.05rem;font-weight:600;color:var(--ink);background:var(--field);border:2.4px solid var(--ink);border-radius:var(--r-b);box-shadow:4px 4px 0 var(--shadow);outline:none;transition:transform .15s,box-shadow .15s,border-color .15s} .input:hover{transform:translateY(-2px);box-shadow:5px 6px 0 var(--shadow)} .input:focus{border-color:var(--gold-deep);box-shadow:4px 4px 0 var(--gold-deep);background:var(--field-focus)} .input::placeholder{color:#9a917a;font-weight:600} .hint{font-size:.86rem;color:var(--ink-soft);font-weight:500;margin-top:8px} .err{font-size:.88rem;color:#C53B3B;font-weight:700;margin-top:8px;display:none} .field.bad .input{border-color:#C53B3B;box-shadow:4px 4px 0 #C53B3B;animation:shake .35s} .field.bad .err{display:block} @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} .otp{display:flex;gap:8px;justify-content:space-between;margin:6px 0} .otp input{width:100%;aspect-ratio:.82;text-align:center;font-size:1.4rem;font-weight:700;text-transform:uppercase;color:var(--ink);background:var(--field);border:2.4px solid var(--ink);box-shadow:3px 4px 0 var(--shadow);outline:none;transition:border-color .12s,box-shadow .12s,background .12s} .otp input:nth-child(odd){border-radius:13px 7px 12px 8px/8px 13px 7px 12px;transform:rotate(-2deg)} .otp input:nth-child(even){border-radius:7px 13px 8px 12px/12px 8px 13px 7px;transform:rotate(1.6deg)} .otp input:focus{border-color:var(--gold-deep);box-shadow:3px 4px 0 var(--gold-deep);background:var(--field-focus)} .otp input.filled{border-color:var(--gold-deep);background:var(--field-focus)} .row{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:.95rem} .tlink{color:var(--gold-deep);font-weight:700;background:none;border:none;cursor:pointer;text-decoration:underline wavy var(--gold);text-underline-offset:3px} .tlink:hover{color:var(--ink)} .mlink{color:var(--ink-soft);font-weight:600;background:none;border:none;cursor:pointer} .mlink:hover{color:var(--ink)} .succ{text-align:center} .succ .seal{width:84px;height:84px;margin:0 auto 12px} .btn-mt{margin-top:18px} /* toast */ .toast{position:fixed;bottom:22px;right:22px;z-index:120;background:var(--ink);color:var(--paper-card);font-weight:600;padding:13px 18px;border-radius:14px 5px 14px 5px;box-shadow:4px 5px 0 var(--gold-deep);display:flex;align-items:center;gap:10px;transform:translateY(20px) rotate(-1.5deg);opacity:0;transition:transform .25s,opacity .25s;max-width:330px} .toast.show{transform:rotate(-1.5deg);opacity:1} .toast .tdot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none} /* mobile menu */ .mmenu{position:fixed;top:74px;left:12px;right:12px;z-index:59;background:var(--paper-card);border:2.6px solid var(--ink);border-radius:var(--r-a);box-shadow:6px 8px 0 var(--shadow);padding:14px 18px 20px;transform:translateY(-130%);transition:transform .28s cubic-bezier(.2,.9,.2,1.2)} .mmenu.open{transform:none} .mmenu a{display:block;font-size:1.1rem;font-weight:600;padding:11px 4px;border-bottom:1.5px dashed rgba(26,22,13,.12)} .mmenu .btn{margin-top:14px} .hidden{display:none !important} .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} @media (max-width:860px){ .nav-links{display:none} .hamburger{display:block} .nav-right .btn{display:none} /* sign-in lives in the mobile menu instead */ .nav-right{gap:10px} .lang{transform:rotate(-1deg)} /* keep the EN/ES toggle in the bar, with a little sketch tilt */ .host-grid{grid-template-columns:1fr} .club-grid{grid-template-columns:1fr 1fr} .notes{grid-template-columns:1fr} .foot-top{grid-template-columns:1fr} /* sign-in doodles: keep a tasteful few in the open space, clear of the card */ .si-star-b,.si-spark-b{display:none} .si-stamp{top:98px;left:14px;width:62px;opacity:.45;transform:rotate(-9deg)} .si-star-a{top:106px;right:16px;width:34px} .si-spark-a{top:172px;left:26px;width:18px} .si-swoosh-d{top:auto;bottom:26px;left:50%;width:150px;transform:translateX(-50%) rotate(-3deg);opacity:.7} } @media (max-width:520px){.club-grid{grid-template-columns:1fr}.hero-cta .btn,.phero-cta .btn{flex:1}} @media (max-width:380px){.brand .name{font-size:1.28rem}.lang button{padding:5px 8px}} @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .reveal{opacity:1;transform:none} } /* ==== legal: the scroll lives INSIDE the white card (original boxed pane) ==== */ /* ==== UPRIGHT alignment: every component sits straight (no whole-component tilt) ==== */ .btn{transform:none} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--shadow)} .kicker{transform:none} .marquee{transform:none} .hcard,.hcard:nth-child(1),.hcard:nth-child(2),.hcard:nth-child(3){transform:none} .hcard:hover{transform:translateY(-4px)} .svc,.svc:nth-child(odd),.svc:nth-child(even){transform:none} .svc:hover{transform:translateY(-5px)} .ideas-head .scrib{transform:none} .idea,.idea:nth-child(odd),.idea:nth-child(even){transform:none} .idea:hover{transform:translateY(-3px)} .idea .soon{transform:none} .club,.club:nth-child(odd),.club:nth-child(even){transform:none} .club:hover{transform:translateY(-4px)} .note,.note:nth-child(1),.note:nth-child(2),.note:nth-child(3),.note:nth-child(4){transform:none} .note::before{transform:translateX(-50%)} .window{transform:none} .feat,.feat:nth-child(3n+1),.feat:nth-child(3n+2),.feat:nth-child(3n){transform:none} .feat:hover{transform:translateY(-4px)} .dev-frame{transform:none} .dev-portrait:hover .dev-frame{transform:none} .dev-seal,.dev-doodle,.dev-built,.dev-handle{transform:none} .legal-sidebar-label{transform:none} .otp input,.otp input:nth-child(odd),.otp input:nth-child(even){transform:none} .hero .d-note,.hero-art .d-stamp,.hero .d-arrow{transform:none} /* ==== extra kit components (controls, callouts, editorial, newsletter) ==== */ .sk-tabs{display:inline-flex;flex-wrap:wrap;gap:6px;border:2.4px solid var(--ink);border-radius:14px 6px 14px 6px/6px 14px 6px 14px;padding:5px;box-shadow:3px 3px 0 var(--shadow)} .sk-tab{font-family:var(--hand);font-weight:700;font-size:.92rem;color:var(--ink);background:transparent;border:none;border-radius:10px 4px 10px 4px;padding:7px 14px;cursor:pointer;transition:background .15s ease} .sk-tab.active{background:var(--gold)} .sk-pills{display:flex;flex-wrap:wrap;gap:10px} .sk-pill{font-family:var(--hand);font-weight:700;font-size:.95rem;color:var(--ink);background:var(--paper-card);border:2.4px solid var(--ink);border-radius:16px 7px 16px 7px/7px 16px 7px 16px;box-shadow:3px 3px 0 var(--shadow);padding:8px 16px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease} .sk-pill:hover{transform:translateY(-1px);box-shadow:3px 4px 0 var(--shadow)} .sk-pill.active{background:var(--gold)} .sk-range{width:100%;accent-color:var(--gold);cursor:pointer} .sk-progress{height:18px;border:2.4px solid var(--ink);border-radius:10px 5px 10px 5px;background:rgba(26,22,13,.1);box-shadow:3px 3px 0 var(--shadow);overflow:hidden} .sk-progress > i{display:block;height:100%;background:var(--gold);border-right:2.4px solid var(--ink)} .sk-callout{display:flex;border:2.6px solid var(--ink);border-radius:var(--r-a);box-shadow:6px 7px 0 var(--shadow);background:var(--paper-card);overflow:hidden} .sk-callout > .bar{width:12px;flex:none;border-right:2.6px solid var(--ink);background:var(--gold)} .sk-callout .body{padding:16px 18px} .sk-callout .body b{display:block;font-size:1.05rem;margin-bottom:2px} .sk-callout .body span{font-size:.92rem;color:var(--ink-soft);font-weight:500} .sk-avatars{display:flex;align-items:center;gap:14px;border:2.6px solid var(--ink);border-radius:var(--r-a);box-shadow:6px 7px 0 var(--shadow);background:var(--paper-card);padding:18px 22px} .sk-avatars .row{display:flex} .sk-avatars .row span{width:38px;height:38px;border-radius:50%;border:2.4px solid var(--ink);box-shadow:2px 2px 0 var(--shadow);display:grid;place-items:center;color:#fff;font-weight:700;font-size:.78rem} .sk-avatars .row span + span{margin-left:-12px} .sk-avatars .lbl{font-size:.98rem;font-weight:600;color:var(--ink-soft)} .sk-post{display:block;text-decoration:none;color:inherit;border:2.6px solid var(--ink);border-radius:var(--r-a);box-shadow:6px 7px 0 var(--shadow);background:var(--paper-card);overflow:hidden;transition:transform .18s ease} .sk-post:hover{transform:translateY(-4px)} .sk-post .cover{height:140px;border-bottom:2.6px solid var(--ink);background:repeating-linear-gradient(135deg,var(--gold) 0 16px,var(--gold-hi) 16px 32px)} .sk-post .pad{padding:22px 24px} .sk-post .date{font-size:.85rem;font-weight:600;color:var(--ink-soft);margin-bottom:6px} .sk-post h3{font-size:1.5rem;font-weight:700;line-height:1.08;margin-bottom:8px} .sk-post p{font-size:1rem;color:var(--ink-soft);font-weight:500;margin-bottom:0} .sk-quote{border:2.6px solid var(--ink);border-radius:var(--r-b);box-shadow:6px 7px 0 var(--shadow);background:var(--ink);color:var(--paper-card);padding:26px 24px} .sk-quote .mark{font-family:var(--scribble);font-size:4rem;font-weight:700;color:var(--gold);line-height:.6;margin:6px 0 4px} .sk-quote p{font-size:1.3rem;font-weight:600;line-height:1.25;margin:0;color:var(--paper-card)} .sk-quote .by{display:block;margin-top:16px;font-size:.88rem;font-weight:700;color:var(--gold-hi)} .sk-subscribe{border:2.6px solid var(--gold);border-radius:var(--r-b);background:var(--board-hi);padding:28px 26px;color:var(--chalk)} .sk-subscribe h3{font-size:1.5rem;font-weight:700;line-height:1.05;margin-bottom:6px;color:var(--chalk)} .sk-subscribe p{font-size:.98rem;color:var(--chalk-soft);font-weight:500;margin-bottom:16px} .sk-subscribe .input{background:#1d251f;color:var(--chalk);border-color:var(--gold);margin-bottom:12px} .sk-inline-sub{display:flex;flex-wrap:wrap;align-items:center;gap:18px;border:2.6px solid var(--gold);border-radius:18px 8px 18px 8px/8px 18px 8px 18px;background:var(--board-hi);padding:18px 24px;color:var(--chalk)} .sk-inline-sub .txt{flex:1;min-width:220px} .sk-inline-sub .txt b{display:block;font-size:1.15rem} .sk-inline-sub .txt span{font-size:.9rem;color:var(--chalk-soft)} /* ==== more kit components — badges, controls, event/profile/stat cards (upright) ==== */ .sk-badge{display:inline-block;font-size:.82rem;font-weight:700;color:var(--ink);background:rgba(201,162,39,.18);border:2px solid var(--ink);border-radius:10px 4px 10px 4px;padding:5px 12px} .sk-badge.gold{background:var(--gold);box-shadow:3px 3px 0 var(--shadow)} .sk-badge.scribble{font-family:var(--scribble);font-size:1.1rem;background:transparent;border:2px dashed rgba(26,22,13,.4);border-radius:12px;color:var(--gold-deep)} .sk-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;font-size:.78rem;font-weight:700;background:var(--gold);color:var(--ink);border:2px solid var(--ink);border-radius:9px 4px 9px 4px;box-shadow:2px 2px 0 var(--shadow)} .sk-dot{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:var(--ink-soft)} .sk-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:#1A7F37;box-shadow:0 0 0 3px rgba(26,127,55,.22);animation:pulse 1.6s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}} .sk-check{display:inline-flex;align-items:center;gap:9px;font-size:.95rem;font-weight:600;cursor:pointer;user-select:none} .sk-check input{position:absolute;opacity:0;width:0;height:0} .sk-check .box{width:22px;height:22px;border:2.4px solid var(--ink);border-radius:7px 3px 7px 3px;background:var(--field);box-shadow:2px 2px 0 var(--shadow);display:grid;place-items:center;color:var(--ink);font-size:.8rem;transition:background .15s ease} .sk-check input:checked + .box{background:var(--gold)} .sk-check input:checked + .box::after{content:"\2713"} .sk-toggle{display:inline-flex;align-items:center;gap:10px;font-size:.95rem;font-weight:600;cursor:pointer;user-select:none} .sk-toggle input{position:absolute;opacity:0;width:0;height:0} .sk-toggle .track{position:relative;width:52px;height:28px;border:2.4px solid var(--ink);border-radius:16px 8px 16px 8px/8px 16px 8px 16px;background:var(--field);box-shadow:2px 2px 0 var(--shadow);transition:background .2s ease} .sk-toggle .track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border:2px solid var(--ink);border-radius:50%;background:var(--paper-card);transition:left .2s ease} .sk-toggle input:checked + .track{background:var(--gold)} .sk-toggle input:checked + .track::after{left:28px} .sk-event{border:2.6px solid var(--ink);border-radius:var(--r-a);box-shadow:6px 7px 0 var(--shadow);background:var(--paper-card);overflow:hidden} .sk-event .top{display:flex;gap:18px;padding:22px 24px;align-items:center} .sk-event .date{flex:none;width:74px;text-align:center;border:2.4px solid var(--ink);border-radius:14px 6px 14px 6px/6px 14px 6px 14px;box-shadow:3px 3px 0 var(--shadow);overflow:hidden;background:var(--field)} .sk-event .date .mo{background:var(--gold);color:var(--ink);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 0;border-bottom:2.4px solid var(--ink)} .sk-event .date .d{font-size:1.9rem;font-weight:700;line-height:1;padding:6px 0 2px} .sk-event .date .yr{font-size:.72rem;font-weight:700;color:var(--ink-soft);padding-bottom:5px} .sk-event h3{font-size:1.45rem;font-weight:700;line-height:1.05;margin:6px 0 4px} .sk-event .meta{font-size:.95rem;color:var(--ink-soft);font-weight:600} .sk-event .actions{display:flex;gap:12px;padding:0 24px 22px} .sk-profile{border:2.6px solid var(--ink);border-radius:var(--r-a);box-shadow:6px 7px 0 var(--shadow);background:var(--paper-card);padding:22px 24px;display:flex;flex-direction:column;gap:12px} .sk-profile .head{display:flex;align-items:center;gap:12px} .sk-profile .av{width:48px;height:48px;border-radius:50%;border:2.4px solid var(--ink);box-shadow:2px 2px 0 var(--shadow);display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.1rem;flex:none} .sk-profile .nm{font-weight:700;font-size:1.1rem;line-height:1.15} .sk-profile .ro{font-size:.85rem;font-weight:600;color:var(--ink-soft)} .sk-readout{border:2.6px solid var(--ink);border-radius:var(--r-b);box-shadow:6px 7px 0 var(--shadow);background:var(--paper-card);padding:24px 26px} .sk-readout .cap{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)} .sk-readout .big{font-size:3.4rem;font-weight:700;line-height:1;margin:6px 0 2px} .sk-readout .sub{font-size:.92rem;font-weight:600;color:var(--ink-soft)} /* ==== brought over from the Main edition — variants & ready-made blocks ==== */ /* button variants */ .btn-ghost{background:transparent;border-style:dashed;border-color:rgba(26,22,13,.42);color:var(--gold-deep);box-shadow:none} .btn-ghost:hover{background:rgba(201,162,39,.16);box-shadow:none} .btn-ghost:active{box-shadow:none} .btn-sm{font-size:.92rem;padding:.5em 1em;border-width:2.4px;box-shadow:3px 4px 0 var(--shadow)} .btn-icon{width:46px;height:46px;padding:0;gap:0;border-radius:16px 6px 16px 6px/6px 16px 6px 16px} .btn-icon svg{width:22px;height:22px} .btn-club{background:var(--ac,#0F6FEC);color:#fff;border-color:var(--ink)} .btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed} .btn[disabled]:hover,.btn:disabled:hover{transform:none;box-shadow:4px 5px 0 var(--shadow)} /* form controls — select, search, textarea */ .select{position:relative;display:block} .select::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2.4px solid var(--ink);border-bottom:2.4px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none} .select .input{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px} .search{position:relative;display:block} .search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--gold-deep);pointer-events:none} .search .input{padding-left:42px} textarea.input{height:auto;min-height:96px;padding:12px 15px;line-height:1.5;resize:vertical} /* dismissible chip + swatch */ .sk-chip{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--ink);background:var(--paper-card);border:2px solid var(--ink);border-radius:10px 4px 10px 4px;padding:4px 6px 4px 12px} .sk-chip .x{display:inline-grid;place-items:center;width:18px;height:18px;border:2px solid var(--ink);border-radius:50%;font-size:.72rem;line-height:1;cursor:pointer} .sk-swatch{display:inline-block;width:30px;height:30px;border:2.4px solid var(--ink);border-radius:50%;box-shadow:2px 2px 0 var(--shadow)} /* campus / social post */ .sk-social{border:2.6px solid var(--ink);border-radius:var(--r-b);box-shadow:6px 7px 0 var(--shadow);background:var(--paper-card);padding:22px 24px} .sk-social .head{display:flex;align-items:center;gap:11px;margin-bottom:12px} .sk-social .av{width:42px;height:42px;border-radius:50%;border:2.4px solid var(--ink);box-shadow:2px 2px 0 var(--shadow);flex:none;display:grid;place-items:center;color:#fff;font-weight:700} .sk-social .nm{font-size:1.05rem;font-weight:700;line-height:1.15} .sk-social .at{font-size:.82rem;color:var(--ink-soft);font-weight:600} .sk-social .body{font-size:1.05rem;color:var(--ink);font-weight:500;margin:0 0 14px} .sk-social .media{height:122px;border:2.4px solid var(--ink);border-radius:14px 7px 14px 7px/7px 14px 7px 14px;box-shadow:3px 4px 0 var(--shadow);background:repeating-linear-gradient(45deg,#E4ECF3 0 14px,#EAF0D8 14px 28px);margin-bottom:14px} .sk-social .acts{display:flex;align-items:center;gap:22px;font-size:.95rem;font-weight:700;color:var(--ink-soft)} .sk-social .acts span{display:inline-flex;align-items:center;gap:7px;cursor:pointer} .sk-social .acts svg{width:20px;height:20px} /* featured editorial post (split) */ .sk-feature{display:grid;grid-template-columns:.82fr 1.18fr;border:2.6px solid var(--ink);border-radius:var(--r-a);box-shadow:7px 9px 0 var(--shadow);background:var(--paper-card);overflow:hidden} .sk-feature .cover{position:relative;min-height:300px;border-right:2.6px solid var(--ink);background:repeating-linear-gradient(135deg,#0F6FEC 0 18px,#3A86F0 18px 36px)} .sk-feature .cover .sk-tagpill{position:absolute;top:18px;left:18px} .sk-feature .cover .hmt{position:absolute;right:18px;bottom:14px;width:84px;opacity:.92} .sk-feature .pad{padding:34px 36px;display:flex;flex-direction:column;justify-content:center} .sk-feature .date{font-size:.85rem;font-weight:600;color:var(--ink-soft);margin-bottom:8px} .sk-feature h3{font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:700;line-height:1.06;margin:0 0 12px} .sk-feature p{font-size:1.08rem;color:var(--ink-soft);font-weight:500;margin:0 0 22px;max-width:52ch} .sk-tagpill{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--paper-card);border:2.2px solid var(--ink);border-radius:9px 3px 9px 3px;box-shadow:2px 2px 0 var(--shadow);padding:3px 10px;display:inline-block} @media (max-width:880px){.sk-feature{grid-template-columns:1fr}.sk-feature .cover{border-right:none;border-bottom:2.6px solid var(--ink);min-height:150px}} /* stripe-tagged editorial note */ .sk-note-card{display:flex;text-decoration:none;color:inherit;border:2.6px solid var(--ink);border-radius:var(--r-a);box-shadow:6px 7px 0 var(--shadow);background:var(--paper-card);overflow:hidden;transition:transform .18s ease} .sk-note-card:hover{transform:translateY(-4px)} .sk-note-card .stripe{width:14px;flex:none;border-right:2.6px solid var(--ink)} .sk-note-card .pad{padding:22px 22px} .sk-note-card .ek{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .sk-note-card h3{font-size:1.32rem;font-weight:700;line-height:1.12;margin:8px 0 8px} .sk-note-card p{font-size:.96rem;color:var(--ink-soft);font-weight:500;margin:0 0 14px} .sk-note-card .d{font-size:.82rem;font-weight:600;color:var(--ink-soft)} /* reading list */ .sk-readlist{border:2.6px solid var(--ink);border-radius:var(--r-a);box-shadow:6px 7px 0 var(--shadow);background:var(--paper-card);overflow:hidden} .sk-readlist a{display:flex;align-items:center;gap:18px;padding:16px 22px;text-decoration:none;color:inherit;border-bottom:2px dashed rgba(26,22,13,.16);transition:background .15s} .sk-readlist a:last-child{border-bottom:none} .sk-readlist a:hover{background:rgba(201,162,39,.1)} .sk-readlist .thumb{flex:none;width:54px;height:54px;border:2.4px solid var(--ink);border-radius:12px 5px 12px 5px;box-shadow:2px 2px 0 var(--shadow)} .sk-readlist .t{font-size:1.12rem;font-weight:700;line-height:1.15} .sk-readlist .m{font-size:.85rem;font-weight:600;color:var(--ink-soft)} .sk-readlist .arr{margin-left:auto;color:var(--gold-deep);font-weight:700;flex:none} /* newsletter issue / digest card */ .sk-issue{border:2.6px solid var(--ink);border-radius:var(--r-a);box-shadow:7px 9px 0 var(--shadow);background:var(--paper-card);overflow:hidden} .sk-issue .masthead{padding:22px 26px;border-bottom:2.6px solid var(--ink);background:var(--gold);display:flex;align-items:center;gap:12px} .sk-issue .masthead .hmt{width:34px;height:37px;flex:none} .sk-issue .masthead .ttl{font-size:1.4rem;font-weight:700;line-height:1.05} .sk-issue .masthead .iss{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(26,22,13,.7)} .sk-issue .masthead .wk{margin-left:auto;font-family:var(--scribble);font-size:1.4rem;font-weight:700;color:var(--ink)} .sk-issue .items{padding:8px 26px 22px} .sk-issue .it{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:2px dashed rgba(26,22,13,.16)} .sk-issue .it:last-of-type{border-bottom:none} .sk-issue .it .n{flex:none;font-family:var(--scribble);font-size:1.8rem;font-weight:700;color:var(--gold-deep);line-height:1;width:30px} .sk-issue .it .h{font-size:1.08rem;font-weight:700;line-height:1.2} .sk-issue .it .d{font-size:.92rem;color:var(--ink-soft);font-weight:500} /* dark subscribe block avatar row */ .sk-subscribe .joined{display:flex;align-items:center;gap:10px;margin-top:16px} .sk-subscribe .joined .row{display:flex} .sk-subscribe .joined .row span{width:26px;height:26px;border-radius:50%;border:2px solid var(--board-hi)} .sk-subscribe .joined .row span + span{margin-left:-9px} .sk-subscribe .joined .lbl{font-size:.85rem;font-weight:600;color:var(--chalk-soft)} /* ===================================================================== THEME TOGGLE — injected into the nav on every page by spartan.js ===================================================================== */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 12px;font-family:inherit;font-weight:700;font-size:.82rem;letter-spacing:.02em;color:var(--ink);background:var(--paper-card);border:2.2px solid var(--ink);border-radius:14px 6px 14px 6px/6px 14px 6px 14px;box-shadow:3px 3px 0 var(--shadow);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .15s ease} .theme-toggle:hover{transform:translateY(-2px);box-shadow:3px 5px 0 var(--shadow)} .theme-toggle:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--shadow)} .theme-toggle svg{width:17px;height:17px;flex:none} .theme-toggle .tt-label{display:none} @media(min-width:1040px){.theme-toggle .tt-label{display:inline}} .mmenu .theme-toggle{width:100%;height:48px;margin-top:14px;font-size:1rem} .mmenu .theme-toggle .tt-label{display:inline} body.admin .theme-toggle{background:#222a25;border-color:rgba(241,236,220,.3);box-shadow:3px 3px 0 rgba(0,0,0,.45);color:var(--chalk)} /* ===================================================================== CUSTOM DROPDOWN (.sk-select) — exact match to Main Spartan Sketchbook ===================================================================== */ .sk-select{position:relative} .sk-select-btn{width:100%;height:50px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:inherit;font-size:1.05rem;font-weight:600;color:var(--ink);background:var(--field);border:2.4px solid var(--ink);border-radius:var(--r-b);box-shadow:4px 4px 0 var(--shadow);cursor:pointer;text-align:left;transition:box-shadow .15s,border-color .15s,background .15s} .sk-select-btn:hover{box-shadow:5px 6px 0 var(--shadow)} .sk-select.open .sk-select-btn{border-color:var(--gold-deep);box-shadow:4px 4px 0 var(--gold-deep);background:var(--field-focus)} .sk-select-btn svg{width:18px;height:18px;flex:none;transition:transform .18s ease} .sk-select.open .sk-select-btn svg{transform:rotate(180deg)} .sk-select-menu{position:absolute;z-index:30;top:56px;left:0;right:0;max-height:200px;overflow:auto;background:var(--paper-card);border:2.4px solid var(--ink);border-radius:14px 8px 14px 8px/8px 14px 8px 14px;box-shadow:5px 6px 0 var(--shadow);padding:6px;display:none} .sk-select.open .sk-select-menu{display:block} .sk-select-opt{padding:9px 12px;border-radius:8px 4px 8px 4px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .12s ease} .sk-select-opt:hover,.sk-select-opt.sel{background:rgba(201,162,39,.18)} /* ===================================================================== DARK MODE — fixes for components with hardcoded light-mode colors ===================================================================== */ :root[data-theme="dark"] .nav.solid{background:rgba(28,24,16,.9);box-shadow:0 3px 0 rgba(0,0,0,.3)} /* keep text dark on gold accents (gold stays bright in dark mode) */ :root[data-theme="dark"] .btn-gold, :root[data-theme="dark"] .svc .live, :root[data-theme="dark"] .lang button.active, :root[data-theme="dark"] .mock-chip, :root[data-theme="dark"] .sk-tab.active, :root[data-theme="dark"] .sk-pill.active, :root[data-theme="dark"] .sk-badge, :root[data-theme="dark"] .sk-badge.gold, :root[data-theme="dark"] .sk-count, :root[data-theme="dark"] .sk-event .date .mo, :root[data-theme="dark"] .dev-role, :root[data-theme="dark"] .cta .banner h2, :root[data-theme="dark"] .sk-issue .masthead, :root[data-theme="dark"] .sk-issue .masthead .iss, :root[data-theme="dark"] .sk-issue .masthead .wk{color:#211B0E} /* sticky notes — muted dark tints so light text stays readable */ :root[data-theme="dark"] .note:nth-child(1){background:#3a3416} :root[data-theme="dark"] .note:nth-child(2){background:#2f3622} :root[data-theme="dark"] .note:nth-child(3){background:#3b2f1f} :root[data-theme="dark"] .note:nth-child(4){background:#222b33} :root[data-theme="dark"] .note{border-color:rgba(230,220,196,.16);box-shadow:5px 6px 0 rgba(0,0,0,.32)} :root[data-theme="dark"] .note::before{background:rgba(230,220,196,.13);border-color:rgba(230,220,196,.1)} /* footer & marquee — keep dark slabs (var(--ink) would flip light) */ :root[data-theme="dark"] .footer{background:#1d1810} :root[data-theme="dark"] .foot-brand .brand .name{color:var(--chalk)} :root[data-theme="dark"] .marquee{background:#1b150d} :root[data-theme="dark"] .marquee-track span{color:var(--chalk)} /* misc faint-on-dark line/border fixes */ :root[data-theme="dark"] .mock-line{background:rgba(230,220,196,.14)} :root[data-theme="dark"] .idea{border-color:rgba(230,220,196,.28)} :root[data-theme="dark"] .legal-sidebar-head{border-bottom-color:rgba(230,220,196,.14)} :root[data-theme="dark"] .legal-head, :root[data-theme="dark"] .legal-part{border-color:rgba(230,220,196,.16)} :root[data-theme="dark"] .legal-table th{background:rgba(226,189,73,.12)} :root[data-theme="dark"] .sk-readlist a, :root[data-theme="dark"] .sk-issue .it{border-bottom-color:rgba(230,220,196,.16)}