/* ───────────────────────────────────────────────────────────── features.css — shared feature layer (loaded on every page, AFTER enhance.css so it can override the motion layer). Contents 1. Light theme (var overrides + hardcoded-grey rescues) 2. Nav tools (theme toggle, search trigger) 3. Skip-to-content 4. Floating action stack (back-to-top, contact) 5. Command palette (site search) 6. Loading states (skeletons, pending buttons) 7. Toast (copy-to-clipboard feedback) 8. Modal (confirmations) 9. Cookie / consent banner 10. FAQ accordion 11. Newsletter signup 12. Copy buttons + password toggle 13. Footer "last updated" ───────────────────────────────────────────────────────────── */ /* ════════════════════════════════════════════════ 1. LIGHT THEME Every page declares the same :root var names, so the theme is mostly a var swap. `html[data-theme=light]` outranks `:root` on specificity, so no !important is needed for the vars — only for colours the pages hardcoded as rgba() literals. ════════════════════════════════════════════════ */ :root{ --dim:rgba(200,220,232,.68); --dimmer:rgba(200,220,232,.5); --faint:rgba(200,220,232,.3); --navbg:rgba(15,17,23,.92); } html[data-theme="light"]{ --ink:#f6f3ec; --ink2:#fffdf9; --ink3:#ece7dd; --paper:#141821; --paper2:#1d232e; --text:#1b2330; --muted:#5d6b7c; --border:#d8d1c4; --accent:#b8431a; --accent2:#1e3a5f; --gold:#7a5a08; --cyan:#0a5566; --green:#106d3e; --violet:#5a3fa0; --rose:#a32a3c; --dim:rgba(27,35,48,.92); --dimmer:rgba(27,35,48,.82); --faint:rgba(27,35,48,.66); --navbg:rgba(255,253,249,.94); color-scheme:light; } html[data-theme="light"] body{background:var(--ink);color:var(--text);} /* the ambient canvases are drawn for a dark ground — keep them as a whisper on light rather than removing them (identity stays intact) */ /* the ambient fields are drawn in bright cyan for a dark ground; at .16 on cream they were invisible, so light mode looked like it had no animation. Darken and saturate the same pixels instead of fading them out. */ /* #stars is excluded: its script now paints dark ink directly on light, so dimming it here would only wash the dots back out. */ html[data-theme="light"] #ambientCanvas, html[data-theme="light"] #ambientFx{ opacity:.5; filter:brightness(.42) saturate(1.35); } /* Brand icons on index are forced pure white for the dark card; the alt-targeted rules below flatten every one of them to black on light. */ html[data-theme="light"] .soc img, html[data-theme="light"] .lnk-icon img{ filter:brightness(0) !important; } /* rescues for greys the pages wrote as literals */ html[data-theme="light"] .proj-tag, html[data-theme="light"] .hs-label, html[data-theme="light"] .ss-label, html[data-theme="light"] .wid-desc, html[data-theme="light"] .ep-desc, html[data-theme="light"] .proj-desc, html[data-theme="light"] .proj-n, html[data-theme="light"] .footer-center, html[data-theme="light"] .tb-item, html[data-theme="light"] .lp-desc{color:rgba(27,35,48,.78) !important;} html[data-theme="light"] .form-field input::placeholder, html[data-theme="light"] .form-field textarea::placeholder{color:rgba(27,35,48,.42) !important;} html[data-theme="light"] .proj-idx{color:rgba(27,35,48,.07);} html[data-theme="light"] nav, html[data-theme="light"] .top-bar{background:rgba(255,253,249,.92) !important;backdrop-filter:blur(10px);} html[data-theme="light"] .mobile-menu{background:var(--ink2) !important;} html[data-theme="light"] nav.nav-condensed{box-shadow:0 8px 26px rgba(20,24,33,.12);} html[data-theme="light"] footer{background:var(--ink3) !important;} html[data-theme="light"] .proj-card:hover{box-shadow:0 14px 34px rgba(20,24,33,.14);} /* Brand icons are forced pure white for the dark ground (.soc img{filter:brightness(0) invert(1)}). Inverting them for light mode acted on each SVG's SOURCE colour, not on that white result: Medium ships black, so invert() turned it white and invisible, and LinkedIn's blue merely shifted hue. Flatten the whole set to black instead: one monochrome black row on light, mirroring the white row on dark. */ html[data-theme="light"] img[alt="LinkedIn"], html[data-theme="light"] img[alt="GitHub"], html[data-theme="light"] img[alt="TryHackMe"], html[data-theme="light"] img[alt="Medium"]{filter:brightness(0) !important;} /* the portfolio folder icon ships as black line art: white in dark mode, as-drawn on paper */ html[data-theme="light"] img[alt="Portfolio"]{filter:brightness(0) !important;} /* --cyan becomes a DARK teal on light, so buttons that pair it with the dark ink text they use on dark ground end up dark-on-dark (2.3:1). Flip their label to paper instead. */ html[data-theme="light"] .nl-btn, html[data-theme="light"] .btn-primary{color:#fff !important;} /* the updated stamp sat at 4.4:1 on the footer bar */ html[data-theme="light"] .last-updated{color:rgba(27,35,48,.88) !important;} /* the small trailing year on the "Most Recent" stat is a dark-mode literal (var(--dimmer) at .5 alpha only reached 4.0:1 there) — give it the paper equivalent so both themes clear 4.5:1 */ html[data-theme="light"] .ph-stat-num .yr{color:rgba(27,35,48,.85) !important;} /* writeup-card body copy and tags carry dark-mode literals for the same reason — give them the paper equivalent rather than inheriting */ html[data-theme="light"] .wu-card-desc, html[data-theme="light"] .wu-tag{color:rgba(27,35,48,.85) !important;} /* featured-card issuer lines inherit accent colours tuned for a dark card; on paper the gold at .55 alpha fell to 1.5:1 */ html[data-theme="light"] .feat-issuer{color:rgba(27,35,48,.8) !important;} /* the 404 footer link sat just under 4.5:1 */ html[data-theme="light"] footer a{color:rgba(27,35,48,.86) !important;} /* the pixel sprites' hood is bright cyan, tuned for a dark ground: ~1.7:1 on cream. Swap the hood colour rather than dimming the whole sprite. */ html[data-theme="light"] .nf-sprite rect[fill="#00d4ff"]{fill:#0a5566;} html[data-theme="light"] #runner rect[fill="#00d4ff"]{fill:#0a5566;} html[data-theme="light"] .nf-scan span{background:#0a5566;} /* theme changes shouldn't strobe the whole page */ html.theme-anim body,html.theme-anim nav,html.theme-anim footer{ transition:background-color .3s ease,color .3s ease; } /* ════════════════════════════════════════════════ 2. NAV TOOLS ════════════════════════════════════════════════ */ .nav-tools{display:flex;align-items:center;gap:8px;} .nav-tool{ display:inline-flex;align-items:center;justify-content:center;gap:7px; min-width:36px;min-height:36px;padding:0 10px; background:transparent;border:1px solid var(--border);border-radius:3px; color:var(--text);cursor:pointer; font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:1px; transition:color .2s,border-color .2s,background .2s,transform .2s; } .nav-tool:hover{color:var(--accent);border-color:var(--accent);background:rgba(224,92,42,.08);transform:translateY(-1px);} .nav-tool svg{width:15px;height:15px;flex:none;} .nav-tool .kbd{ opacity:.55;font-size:9.5px;letter-spacing:.5px; border:1px solid var(--border);border-radius:2px;padding:1px 4px; } /* icon-only by default — the nav is a tight row; the shortcut hint only appears where there is genuinely room for it */ .nav-tool .lbl{display:none} .nav-tool .kbd{display:none} @media(min-width:1180px){.nav-tool .kbd{display:inline-block}} .nav-tools-li{display:flex;align-items:center;margin-left:4px;} /* the collapse applies to the in-nav instance only — pages with no