/* ============================================================ Fridjy — "Bright" light theme (trial). Overrides ONLY the light-mode colour variables so the whole site reads bright/white instead of warm cream. Layouts, logic and dark mode are untouched (dark is scoped out below). TO REVERT: empty this file (or delete its contents) and the original warm-cream palette returns everywhere. Nothing else needs changing. ============================================================ */ /* Self-hosted Inter (variable) — the app declares 'Inter' everywhere but never loaded it, so most users saw a fallback. CSP-safe (font-src 'self'). */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/fonts/inter-latin.woff2') format('woff2'); } /* applies when the OS prefers light AND no manual dark theme is set */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#ffffff; --bg-2:#f6f7f8; --card:#ffffff; --card-2:#fafbfc; --line:rgba(18,20,24,.12); --line-2:rgba(18,20,24,.20); --text:#141619; --muted:#474c54; --muted-2:#697079; --surface:rgba(18,20,24,.045); --surface-2:rgba(18,20,24,.08); --nav-bg:rgba(255,255,255,.85); --cook-bg:#ffffff; --green:#2f9e50; --shadow:0 10px 28px -12px rgba(18,20,24,.18); } } /* applies when the user has explicitly chosen the light theme */ :root[data-theme="light"]{ --bg:#ffffff; --bg-2:#f6f7f8; --card:#ffffff; --card-2:#fafbfc; --line:rgba(18,20,24,.12); --line-2:rgba(18,20,24,.20); --text:#141619; --muted:#474c54; --muted-2:#697079; --surface:rgba(18,20,24,.045); --surface-2:rgba(18,20,24,.08); --nav-bg:rgba(255,255,255,.85); --cook-bg:#ffffff; --green:#2f9e50; --shadow:0 10px 28px -12px rgba(18,20,24,.18); } /* ============================================================ VIVID accents — the low-opacity tints look pale on white, so punch them up. Light-mode only (dark keeps its own treatment). ============================================================ */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .cooknow-banner{ background:linear-gradient(135deg,#e4f6e9,#fff1e8); border-color:rgba(30,160,70,.42); } :root:not([data-theme="dark"]) .cooknow-banner .cn-n{ color:#0f8a3a; } /* colourful icon chips on the import tiles */ :root:not([data-theme="dark"]) .imp .ico{ display:inline-grid;place-items:center;width:46px;height:46px;border-radius:13px;font-size:23px; } :root:not([data-theme="dark"]) .import-grid .imp:nth-child(1) .ico{ background:rgba(242,89,31,.13); } :root:not([data-theme="dark"]) .import-grid .imp:nth-child(2) .ico{ background:rgba(47,128,196,.14); } :root:not([data-theme="dark"]) .import-grid .imp:nth-child(3) .ico{ background:rgba(30,160,70,.15); } :root:not([data-theme="dark"]) .import-grid .imp:nth-child(4) .ico{ background:rgba(224,149,31,.17); } /* punchier recipe tags + fridge pills */ :root:not([data-theme="dark"]) .tag.veg{ background:rgba(30,160,70,.15); color:#137a3a; border-color:rgba(30,160,70,.42); } :root:not([data-theme="dark"]) .tag.meat{ background:rgba(214,64,40,.14); color:#b3341c; border-color:rgba(214,64,40,.4); } } :root[data-theme="light"] .cooknow-banner{ background:linear-gradient(135deg,#e4f6e9,#fff1e8); border-color:rgba(30,160,70,.42); } :root[data-theme="light"] .cooknow-banner .cn-n{ color:#0f8a3a; } :root[data-theme="light"] .imp .ico{ display:inline-grid;place-items:center;width:46px;height:46px;border-radius:13px;font-size:23px; } :root[data-theme="light"] .import-grid .imp:nth-child(1) .ico{ background:rgba(242,89,31,.13); } :root[data-theme="light"] .import-grid .imp:nth-child(2) .ico{ background:rgba(47,128,196,.14); } :root[data-theme="light"] .import-grid .imp:nth-child(3) .ico{ background:rgba(30,160,70,.15); } :root[data-theme="light"] .import-grid .imp:nth-child(4) .ico{ background:rgba(224,149,31,.17); } :root[data-theme="light"] .tag.veg{ background:rgba(30,160,70,.15); color:#137a3a; border-color:rgba(30,160,70,.42); } :root[data-theme="light"] .tag.meat{ background:rgba(214,64,40,.14); color:#b3341c; border-color:rgba(214,64,40,.4); } /* ============================================================ Mobile menu — animated hamburger + opaque dropdown + scrim. Applies site-wide (shared stylesheet); theme-independent. ============================================================ */ body{overflow-x:clip} /* stop sideways scroll without breaking sticky nav */ /* animated hamburger (three bars → X) */ .nav-burger{display:none;position:relative;width:44px;height:44px;flex:none;border:0;background:transparent; cursor:pointer;border-radius:12px;padding:0;-webkit-tap-highlight-color:transparent} .nav-burger:hover{background:var(--surface,rgba(0,0,0,.05))} .nav-burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px; background:var(--text,#241a12);top:50%;margin-top:-1px;transition:transform .25s ease,opacity .18s ease} .nav-burger span:nth-child(1){transform:translateY(-6px)} .nav-burger span:nth-child(3){transform:translateY(6px)} .nav-in.open .nav-burger span:nth-child(1){transform:rotate(45deg)} .nav-in.open .nav-burger span:nth-child(2){opacity:0} .nav-in.open .nav-burger span:nth-child(3){transform:rotate(-45deg)} /* dimming scrim behind the open menu */ .nav-scrim{position:fixed;inset:0;z-index:44;background:rgba(20,14,8,.4);backdrop-filter:blur(2px); opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s} body.nav-open .nav-scrim{opacity:1;visibility:visible} /* CRITICAL: lift the open menu's