:root{ --bg:#0f1115; /* deep near-black */ --panel:#111318; /* slightly lighter for panels */ --muted:#9aa4b2; --text:#e6eef8; --accent:#6fb3ff; --overlay: rgba(0,0,0,0.35); } /* Light theme overrides when .light is present on */ html.light{ --bg: #f7f8fb; --panel: #ffffff; --muted: #5a6672; --text: #0b1220; --accent: #1e88ff; --overlay: rgba(255,255,255,0.06); } *{box-sizing:border-box} html,body{ height:100%; margin:0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: linear-gradient(180deg,#0c0d10 0%, #0f1115 60%); color:var(--text); } /* Make backgrounds transition smoothly when toggling theme */ * , *::before, *::after { transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; } /* adapt background gradient to light theme */ html.light body{ background: linear-gradient(180deg,#fbfcfe 0%, #f7f8fb 60%); } /* Subtle overlay across the page to slightly dim background and improve focus */ body::before{ content:""; position:fixed; inset:0; /* top:0; right:0; bottom:0; left:0 */ background: var(--overlay); pointer-events:none; /* don't block clicks */ z-index:0; } /* Layout */ body > *{ position:relative; z-index:1; /* above the overlay */ max-width:900px; margin-left:auto; margin-right:auto; padding:1.6rem; } header{ padding-top:2.2rem; padding-bottom:1.2rem; } .header-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; } .theme-controls{ display:flex; align-items:center; gap:.5rem; } #theme-toggle{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--text); padding:6px 10px; border-radius:8px; cursor:pointer; font-size:1rem; } html.light #theme-toggle{ border-color: rgba(11,18,32,0.06); } #theme-toggle:focus{ outline:2px solid rgba(100,150,255,0.18); outline-offset:2px; } /* visually-hidden helper for accessibility */ .visually-hidden{ position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px; } /* Accent swatch menu */ #accent-menu{ display:flex; gap:8px; align-items:center; } .accent-swatch{ width:34px; height:34px; border-radius:8px; border:2px solid transparent; padding:0; cursor:pointer; box-shadow: 0 1px 0 rgba(0,0,0,0.15) inset; } .accent-swatch[aria-checked="false"]{ opacity:0.9 } .accent-swatch.active{ outline:3px solid rgba(255,255,255,0.12); transform:scale(1.05); } .accent-swatch:focus{ outline:3px solid rgba(100,150,255,0.24); outline-offset:2px; } /* reset button styling */ #reset-theme{ background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--muted); padding:6px 8px; border-radius:8px; cursor:pointer; font-size:0.95rem; } #reset-theme:hover{ color:var(--text); } /* small icon transition for toggle */ #theme-toggle{ display:inline-flex; align-items:center; justify-content:center; transition:transform 220ms ease; } #theme-toggle:active{ transform:scale(.96) } header h1{ margin:0 0 .3rem 0; font-size:2rem; } header p{ margin:0; color:var(--muted); } section{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); border-radius:10px; padding:1rem 1.2rem; margin-top:1.2rem; } .about h2, .faq h2, footer h2{ margin-top:0; color:var(--accent); } details summary{ cursor:pointer; font-weight:600; } details p{ margin:0.6rem 0 0 0; color:var(--muted); } footer{ margin-top:1.6rem; padding-bottom:2.4rem; color:var(--muted); } footer ul{ padding:0; margin:0.6rem 0 0 0; list-style:none; display:flex; gap:1rem; } footer a{ color:var(--accent); text-decoration:none; border-bottom:1px dashed transparent; } footer a:hover{border-bottom-color:var(--accent);} /* Responsive tweaks */ @media (max-width:600px){ body > *{padding:1rem} header h1{font-size:1.5rem} } /* Better stacking and sizing for narrow screens */ @media (max-width:480px){ .header-row{ flex-direction:column; align-items:flex-start; gap:.75rem; } .theme-controls{ width:100%; justify-content:space-between; } #accent-menu{ flex-wrap:wrap; gap:6px; } .accent-swatch{ width:28px; height:28px; border-radius:6px; } #theme-toggle, #reset-theme{ padding:6px 8px; font-size:0.95rem; } body > *{ padding:0.9rem; } /* Cookie dock fits narrow screens: full-width-ish with comfortable padding */ .cookie-consent.dock{ left:50%; bottom:20px; min-width:260px; width:calc(100% - 40px); max-width:calc(100% - 40px); padding:12px 14px; border-radius:14px; } .cookie-consent.dock p{ font-size:0.95rem; } .cookie-actions{ flex-direction:row; gap:8px; } } /* Cookie consent dock (centered, Mac-like) with slide-down animation */ .cookie-consent.dock{ /* keep in flow for positioning but initially hidden via opacity/visibility */ display:flex; position:fixed; left:50%; bottom:72px; /* start further above and slightly smaller so visible state drops down (use 3d for smoother GPU compositing) */ transform:translate3d(-50%, -22px, 0) scale(.98); z-index:10000; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); color:var(--text); border:1px solid rgba(255,255,255,0.06); padding:10px 16px; border-radius:20px; align-items:center; justify-content:center; gap:12px; box-shadow: 0 18px 40px rgba(0,0,0,0.45); backdrop-filter: blur(8px) saturate(120%); min-width:320px; max-width:760px; /* start hidden via opacity/transform and block pointer events; avoid visibility change so transitions run */ opacity:0; pointer-events:none; transition: opacity 300ms cubic-bezier(.2,.9,.3,1), transform 300ms cubic-bezier(.22,.9,.25,1); } .cookie-consent.dock p{ margin:0; color:var(--muted); margin-right:12px; } .cookie-actions{ display:flex; gap:10px } .cookie-consent.dock button{ background:var(--panel); border:1px solid rgba(255,255,255,0.06); color:var(--text); padding:8px 12px; border-radius:12px; cursor:pointer; font-weight:600 } .cookie-consent.dock button.accept{ background:var(--accent); color: #072033; border-color: rgba(0,0,0,0.08) } .cookie-consent.dock button.decline{ background:transparent; color:var(--text); border-color: rgba(255,255,255,0.06) } /* visible state triggers slide-down + fade */ .cookie-consent.dock.visible{ opacity:1; transform:translate3d(-50%, 0, 0) scale(1); pointer-events:auto; } html.light .cookie-consent.dock{ border-color: rgba(11,18,32,0.06); box-shadow: 0 18px 40px rgba(11,18,32,0.08); } html.light .cookie-consent.dock button{ border-color: rgba(11,18,32,0.06); } @media (max-width:520px){ .cookie-consent.dock{ left:50%; bottom:28px; padding:12px; min-width:280px } .cookie-consent.dock p{ font-size:0.95rem } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ .cookie-consent.dock, .cookie-consent.dock.visible{ transition:none; transform:none; opacity:1; pointer-events:auto; } }