/* =========================================================================== Shared theme + responsive layer for case studies, contact & experience. Dark mode is driven by `.theme-dark` on (set by theme-toggle.js). Portfolio keeps its own tuned dark theme and does NOT load this file. =========================================================================== */ /* ---------- DARK PALETTE (near-black, echoes the product bands) ---------- */ .theme-dark{ --cream:#0e1311; --cream-2:#161c19; --ink:#eaf1ec; --muted:#9bb1ab; --green-2:#5fcfa6; /* brighten the italic/link accent for dark bg */ --line:rgba(234,241,236,.13); --line-strong:rgba(234,241,236,.26); } html.theme-dark{background:#0e1311} .theme-dark body{background:var(--cream);color:var(--ink)} /* grain reads harshly on near-black — calm it down */ .theme-dark body::before{opacity:.22;mix-blend-mode:screen} /* nav glass */ .theme-dark .nav{background:rgba(14,19,17,.78)!important;border-bottom-color:var(--line)} /* primary actions: green-on-near-black is invisible, flip to butter */ .theme-dark .btn-pri, .theme-dark .nav-cta, .theme-dark .btn-book, .theme-dark .form-submit, .theme-dark .bk-confirm button, .theme-dark .contact-arrow{background:var(--butter);color:var(--green)} .theme-dark .btn-pri:hover, .theme-dark .nav-cta:hover, .theme-dark .btn-book:hover{background:var(--butter-2);color:var(--green)} .theme-dark .nav-back:hover .arrow{background:var(--butter);color:var(--green);border-color:var(--butter)} .theme-dark .eyebrow .badge{background:var(--butter);color:var(--green)} .theme-dark .progress{background:var(--butter-2)} /* hover states that paint butter under dark text → soften so text stays legible */ .theme-dark .oc:hover, .theme-dark .bk-day.avail:hover, .theme-dark .bk-slot:hover, .theme-dark .info-row:hover, .theme-dark .chip-pick:hover{background:rgba(255,239,179,.09)} .theme-dark .bk-day.sel, .theme-dark .bk-slot.sel, .theme-dark .bk-confirm button.ready{background:var(--butter);color:var(--green);border-color:var(--butter)} .theme-dark .bk-day.sel.today::after{background:var(--green)} /* highlight bar behind the hero accent word */ .theme-dark .hero h1 .accent::after{background:rgba(255,232,136,.22)} /* surfaces that hard-code light fills */ .theme-dark .field input, .theme-dark .field textarea, .theme-dark .field select{background:rgba(255,255,255,.05);color:var(--ink)} .theme-dark .field input::placeholder, .theme-dark .field textarea::placeholder{color:rgba(234,241,236,.4)} /* shadows + browser chrome read better dark */ .theme-dark .browser, .theme-dark .booking, .theme-dark .form-card, .theme-dark .info-card{box-shadow:0 40px 90px -45px rgba(0,0,0,.75)} /* custom cursor (green disappears on black) */ .theme-dark .cursor{background:var(--butter);mix-blend-mode:normal} .theme-dark .cursor-ring{border-color:var(--butter)} .theme-dark .cursor-ring.hover{background:rgba(255,239,179,.18);mix-blend-mode:normal} /* selection */ .theme-dark ::selection{background:var(--butter);color:var(--green)} /* logo mark on contact / experience */ .theme-dark .logo-mark{background:var(--butter);color:var(--green)} /* ---------- RESPONSIVE HARDENING ---------- */ img,svg,video{max-width:100%} @media (max-width:760px){ .wrap{padding-left:20px;padding-right:20px} .nav-center{display:none} .nav-inner{gap:10px} .nav-back span:not(.arrow){font-size:13px} } @media (max-width:600px){ /* keep top-bar compact */ .nav-cta span:last-child{font-size:13px} section.s{padding:64px 0} /* let big number/stat grids breathe */ .outcomes{grid-template-columns:repeat(2,1fr)} } @media (max-width:430px){ .hero{padding-top:56px} .oc-n{font-size:44px} }