/* ── tandoco canonical floating-pill nav ────────────────────────── Single source of truth — mirrors home.css / store.css so every page (bakery, about, blog, training, catering, events, support…) gets the exact same nav across desktop, tablet and mobile. Pages that link this file should NOT redeclare .nav* / .btn-nav* / .btn-cart / .cart-badge / .hamburger / .acct-* / .nav-drawer rules inline — keep this file as the authoritative copy. ──────────────────────────────────────────────────────────────── */ /* Set the document canvas color to brand cream. Not nav-specific, but lives here because nav.css is the one stylesheet loaded by every production page — so this is the most reliable single point to color the canvas. Why: iOS Safari "lifts" `position:fixed; bottom:0` elements (cart drawer, checkout sheet) above the soft keyboard. The lifted element no longer extends to the bottom of the layout viewport, so the band between the lifted element's bottom edge and the iOS keyboard accessory bar (URL pill) reveals whatever paints the document canvas. Normally CSS promotes body's BG to the canvas, but iOS can break that promotion when fixed elements are lifted — so without an explicit html bg, that band rendered as the default white canvas, reading as a "thick white strip" behind the URL pill. Setting html bg directly makes the band cream and blends it into the rest of the sheet. */ html{background:#FAF8F3;} /* Pair with the html bg above: extend body to fill the layout viewport so its cream BG covers the canvas even when fixed elements (cart drawer / checkout sheet) get "lifted" by the iOS soft keyboard. If body collapses to its content height — which on short pages it does — iOS may sample html canvas at the URL-pill area; min-height keeps the body painted across the whole viewport so chrome translucency reads consistently from the first focus, not just after the user has clicked around enough to trigger a repaint. */ body{min-height:100lvh;} /* Scope brand-color tokens to the nav + drawer so page-level CSS that redefines them (e.g. events.html setting `--navy:var(--blue-d)` at :root level, recoloring the wordmark/hamburger bars/account avatar blue) can't bleed in. The nav must look identical on every page — defining these tokens INSIDE the nav scope wins over any inherited value from the page's :root, regardless of which color system that page uses for its body content. */ .nav, .nav-drawer, .nav-drawer-backdrop{ --navy:#1B1A6B; --navy-dk:#0F0E47; --accent:#2D2FA8; --accent-lt:#4F51D4; --gold-d:#8B6914; --gold:#C8A96E; --gold-l:#E8C87A; --coral:#C87555; --muted:#6B6B7B; --text:#2C2C3A; --border:#EDE8DC; } /* Desktop pill. z-index lifted above the drawer-backdrop (z:310) so the bar stays bright + crisp while the drawer is open. Previously the backdrop (with backdrop-filter:blur(3px)) painted *over* the nav, which read perceptually as the bar "shifting down" or dimming — the visual glitch reported on hamburger click. Drawer (z:320) still sits above the nav where they overlap, so the slide-in visual is unchanged. `top` uses env(safe-area-inset-top) so iPhone-with-notch / Dynamic- Island devices push the pill DOWN below the system overlay zone instead of letting the pill's top edge slide under the camera cutout. Pairs with the body::before frosted cap below that fills the safe-area-inset-top region so page content (or a navy hero on the homepage) doesn't peek through the eyebrow. The env() value is 0 on devices without a safe area, so non-iOS layout is unchanged. */ .nav{position:fixed;top:calc(14px + env(safe-area-inset-top, 0px));left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:1060px;z-index:315;height:56px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-radius:99px;background:rgba(248,249,255,.92);backdrop-filter:blur(28px) saturate(200%);-webkit-backdrop-filter:blur(28px) saturate(200%);border:1px solid rgba(255,255,255,.65);box-shadow:0 2px 24px rgba(27,26,107,.1),inset 0 1px 0 rgba(255,255,255,.92);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1);} /* Frosted safe-area cap — covers the iOS Dynamic Island / notch zone so the page background (navy hero on the homepage) doesn't peek through the camera cutout. Matches the floating pill's blur+tint so it reads as part of the same chrome rather than a separate band. z-index matches the nav (315) so the cap stays bright while the drawer-backdrop (310) is animating in, mirroring the same justification that lifted the nav above the backdrop. Desktop-only: on mobile (≤720px) the nav itself extends through the safe-area zone via padding-top, so this cap is redundant and hidden below to avoid a translucent band that lets scrolled page content bleed through above the nav. */ body::before{ content:''; position:fixed;top:0;left:0;right:0; height:env(safe-area-inset-top, 0px); background:rgba(248,249,255,.62); backdrop-filter:blur(28px) saturate(200%); -webkit-backdrop-filter:blur(28px) saturate(200%); z-index:315; pointer-events:none; } @media(max-width:720px){body::before{display:none;}} .nav.shrink{transform:translateX(-50%) scale(.93);box-shadow:0 4px 32px rgba(27,26,107,.14),inset 0 1px 0 rgba(255,255,255,.92);} .nav-brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none;} .nav-brand img{height:26px;width:auto;display:block;} .nav-brand-text{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:900;color:var(--navy,#1B1A6B);letter-spacing:-.03em;} /* Links — hidden until ≥960px (matches home.css). */ .nav-links{display:none;align-items:center;gap:16px;} /* Active state changes color only, not weight. Going 600→700 made the active link slightly wider than its siblings, so on every page the nav widths shifted differently — visible reflow when navigating between pages. Keep the weight constant; the user notices the color change well enough as the active indicator. font-family pinned: nav links USED to inherit body's font, which meant Plus Jakarta Sans on home/store/bakery/blog/training but Inter on about/catering/events/privacy/terms. Different glyph widths → visible text shift when clicking page-to-page. Pinning here guarantees identical widths regardless of which font the page body uses. */ /* line-height pinned to 1: nav links USED to inherit body line-height, which varied per page (about/catering at 1.6, store at 1.5, index at "normal"). Different inherited line-heights gave the link box different heights → flex-centering placed the baseline ~2.5px higher on about/catering than on index, so all the nav buttons appeared to shift upward when navigating to those pages. Pinning to 1 collapses the link box to the font's natural cap-height and aligns text the same way regardless of which page hosts the nav. */ .nav-links a{font-family:'Plus Jakarta Sans','Inter',-apple-system,sans-serif;font-size:12.5px;font-weight:600;line-height:1;color:var(--muted,#6B6B7B);transition:color .15s;white-space:nowrap;text-decoration:none;} .nav-links a:hover,.nav-links a.active{color:var(--navy,#1B1A6B);} /* Right cluster */ .nav-right{display:flex;align-items:center;gap:8px;} .btn-nav-auth{background:var(--navy,#1B1A6B);color:#fff;border:none;padding:6px 20px;border-radius:99px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;box-shadow:0 2px 10px rgba(27,26,107,.2);display:none;align-items:center;justify-content:center;line-height:1;min-height:32px;font-family:'Plus Jakarta Sans',sans-serif;} .btn-nav-auth:hover{background:var(--accent,#2D2FA8);} .btn-nav-account{width:32px;height:32px;border-radius:50%;background:var(--navy,#1B1A6B);color:#fff;border:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;transition:all .3s;} .btn-nav-account.founder, html[data-tdco-founder="1"] .btn-nav-account{background:linear-gradient(135deg,#8B6914 0%,#C8A96E 45%,#E8C87A 100%);color:#1A1508;animation:founderShine 2.5s ease-in-out infinite;border:1.5px solid rgba(232,200,122,.6);} @keyframes founderShine{0%,100%{box-shadow:0 0 8px rgba(200,169,110,.5),0 0 16px rgba(200,169,110,.2);}50%{box-shadow:0 0 14px rgba(232,200,122,.7),0 0 28px rgba(200,169,110,.35);}} /* Synchronous auth pre-paint (paired with /scripts/nav-auth-prepaint.js and the cache writer in /scripts/nav-drawer.js). When the previous page wrote tdcoSignedIn=1 into localStorage, the prepaint script stamps html[data-tdco-auth="in"] before first paint and these rules show the account avatar / drawer-acct + hide the auth button so the nav doesn't flash "sign up / log in" → user-icon on every page load. */ /* Cluster swap driven by html[data-tdco-auth]. The attribute is stamped synchronously in by /scripts/nav-auth-prepaint.js from cached localStorage, then confirmed by /scripts/nav-drawer.js when Firebase resolves. Returning visitors (the common case for click-through navigation) paint the correct cluster on first paint — no shift, and the visible cluster is flush against the right edge of the pill since the off-state cluster is collapsed out of layout (display:none). `display:... !important` is load-bearing. Several pages (index/store/ bakery/about/blog/catering/events/support…) have their own firebase.auth().onAuthStateChanged handler that calls acctWrap.style.display='none' / navAuthBtn.style.display='none' / acctWrap.style.display='block' inline. The !important here makes the data-tdco-auth attribute the single source of truth and the inline style.display values a no-op. Don't drop the !important until every per-page auth listener has been migrated to data-tdco-auth attribute swaps (search: acctWrap.style.display). Edge case: a first-ever visitor who is actually signed in (no cache yet) sees the auth-button on first paint, then a one-time ~100px shift when Firebase confirms signed-in and writes the cache. Every subsequent navigation on that browser is shift-free. Acceptable tradeoff vs. always-reserving both slots and leaving dead space to the right of the cart on returning signed-in users. */ .acct-wrap, .drawer-acct { display: none !important; } .btn-nav-auth { display: none !important; } .drawer-auth { display: flex !important; } @media(min-width:960px){ .btn-nav-auth { display: inline-flex !important; } } html[data-tdco-auth="in"] .acct-wrap { display: block !important; } html[data-tdco-auth="in"] .drawer-acct { display: flex !important; } html[data-tdco-auth="in"] .btn-nav-auth { display: none !important; } html[data-tdco-auth="in"] .drawer-auth { display: none !important; } /* Tandocoin balance pill — ingrained in the nav on every page. The count is hydrated by nav-drawer.js's auth-state-changed handler (live Firestore read) and mirrored to localStorage so subsequent navigations paint the cached number on first frame. The pill is hidden via the html[data-tdco-coins="0"] rule below when balance is 0 / missing — signed-out and brand-new users don't get a mystery "star + 0" they can't interpret. */ .v3-nav-coin{display:inline-flex;align-items:center;gap:4px;padding:6px 12px 6px 6px;border-radius:99px;background:linear-gradient(135deg,#FFF6DC,#FFEAB0);border:1px solid rgba(139,105,20,.22);font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:900;color:#8B6914;text-decoration:none;line-height:1;white-space:nowrap;transition:transform .15s,box-shadow .15s;} /* Icon is 20×20 (matches account portal's pill, which renders tighter than 18×18 because the larger PNG visually closes the gap to the number — the perceived spacing comes mostly from the icon size, not the flex gap). */ .v3-nav-coin .ic{width:20px;height:20px;object-fit:contain;display:block;filter:drop-shadow(0 1px 2px rgba(139,105,20,.3));} /* tabular-nums keeps the digit boxes uniform (so 1234 → 1235 doesn't reflow), but no min-width: a fixed slot was wasting ~9px of phantom space to the right of the icon for 1–2 digit balances, which is what made the every-page pill look looser than the account portal's. The pill is now hidden at 0, so the original "0 → 1,247 widens by 30px" concern that motivated the slot no longer applies — first-coin earn is a one-time per-account shift, acceptable. */ .v3-nav-coin #v3NavCoinNum{font-variant-numeric:tabular-nums;} .v3-nav-coin:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(139,105,20,.18);} /* Hide the pill entirely when balance is 0 / missing — signed-out and brand-new users shouldn't see a mystery "star + 0". The attribute is stamped synchronously by nav-auth-prepaint.js (before first paint), so there's no flash; nav-drawer.js flips it to "have" once a positive balance arrives (one-time shift per account, not per page load). */ html[data-tdco-coins="0"] .v3-nav-coin{display:none;} @media(max-width:640px){ /* Mobile space is tight — the navbar already carries the account pill, cart, and hamburger. The tandocoin balance lives one tap away on /account/membership, so we drop it from the mobile nav rather than squeezing it between the cart and the hamburger. */ .v3-nav-coin{display:none;} } .btn-cart{position:relative;width:36px;height:36px;border-radius:50%;background:rgba(27,26,107,.08);border:1.5px solid rgba(27,26,107,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;line-height:1;color:var(--navy,#1B1A6B);padding:0;} .btn-cart .cart-svg{width:18px;height:18px;display:block;stroke:currentColor;transition:transform .15s;} .btn-cart:hover{background:rgba(27,26,107,.14);border-color:rgba(27,26,107,.22);} .btn-cart:hover .cart-svg{transform:scale(1.08);} .cart-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--coral,#C87555);color:#fff;font-size:9px;font-weight:900;display:none;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;} /* Site-wide convention: buttons do NOT shift or scale on press. Catering and events shipped without :active{transform:...} rules and the user picked that as the canonical behavior. We enforce it from the shared stylesheet so any future page that links nav.css inherits it for free — no need to remember per-page. - Scoped to actual interactive elements so we don't disturb static styled :active states (e.g. nav links with .active class). - Excluded: slider thumbs and elements inside [draggable] handles, which use transform during a real drag (cursor:grabbing feedback). - !important is intentional. The site has dozens of legacy `:active{transform:scale(...)}` rules across page-specific stylesheets; this is the simplest way to neutralize them all and keep the convention from drifting. If a future page genuinely needs press feedback, it can still opt in via `transform:scale(...) !important` at higher specificity. */ button:active:not(:where([draggable] *,[role="slider"],input[type="range"])), [role="button"]:active:not(:where([draggable] *)), a.btn-nav:active, a.btn-nav-cta:active, .nav-cta:active, .btn-nav-account:active, .btn-nav-auth:active, .btn-cart:active, .hamburger:active, .v3-nav-coin:active, .v3-nav-avatar:active{ transform: none !important; } /* Hamburger */ /* -webkit-tap-highlight-color disables iOS Safari's translucent tap overlay (can read as a "press-down" visual hiccup). touch-action manipulation suppresses double-tap-to-zoom delay. The bars stay as three bars even when the drawer is open — the X→hamburger toggle was the "menu pushes down" visual glitch the user reported (top bar translateY +6, bottom bar translateY -6). The drawer's own in-panel X close button now handles closing, so this animation is redundant chrome. */ .hamburger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:none;cursor:pointer;padding:6px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;} .hamburger span{display:block;width:20px;height:2px;background:var(--navy,#1B1A6B);border-radius:99px;} /* Account dropdown */ .acct-wrap{position:relative;} .acct-dropdown{position:absolute;top:calc(100% + 10px);right:0;background:rgba(248,249,255,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.6);border-radius:18px;box-shadow:0 8px 36px rgba(27,26,107,.14),inset 0 1px 0 rgba(255,255,255,.8);width:210px;padding:7px;display:none;z-index:400;} .acct-dropdown.open{display:block;} .acct-info{padding:10px;border-bottom:1px solid var(--border,#EDE8DC);margin-bottom:5px;} .acct-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800;color:var(--navy,#1B1A6B);} .acct-email{font-size:11.5px;color:var(--muted,#6B6B7B);} .acct-link{display:block;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:600;color:var(--text,#2C2C3A);cursor:pointer;transition:all .15s;background:none;border:none;width:100%;text-align:left;text-decoration:none;font-family:inherit;} .acct-link:hover{background:rgba(45,47,168,.08);color:var(--navy,#1B1A6B);} .acct-link.danger{color:#DC2626;} .acct-link.danger:hover{background:#FEF2F2;} /* Coach-only nav entries (account dropdown + mobile drawer). Hidden by default; revealed when /scripts/coach-claim.js confirms the signed-in user is a tandocoach and stamps body.is-coach. */ .is-coach-only{display:none !important;} body.is-coach .is-coach-only{display:block !important;} /* ════════════════════════════════════════════════════════════════ Mobile drawer — left-sliding sidebar pattern (May 2026 unification) Previously every page had a top-down "full-screen" drawer with just the link list, while /store had its own bespoke left-sliding sidebar with a header bar, an auth/identity card, and a richer link list. This block ports /store's pattern as the new canonical so every page gets the same identity-first drawer. nav-drawer.js's _unifyDrawer() replaces each page's legacy drawer markup with the new structure at runtime — no per-page HTML edits required. Structure: .nav-drawer-backdrop — dim layer behind the panel .nav-drawer — 86vw-wide sidebar that slides in from left .drawer-head — logo + close button .drawer-auth — signed-out: welcome card + sign up / log in .drawer-acct — signed-in: name + tandocoin balance + acct link .drawer-links — page navigation list with active-page accent ════════════════════════════════════════════════════════════════ */ .nav-drawer-backdrop{position:fixed;inset:0;z-index:310;background:rgba(15,24,40,.45);opacity:0;pointer-events:none;transition:opacity .28s ease;} .nav-drawer-backdrop.open, body:has(.nav-drawer.open) .nav-drawer-backdrop{opacity:1;pointer-events:auto;} @media(min-width:960px){.nav-drawer-backdrop{display:none;}} /* Drawer slide-in. Full-height left-sliding sidebar (canonical /store pattern). Solid background, no backdrop-filter — the blur was creating a visible ripple as the drawer's right edge swept across the nav. visibility stays `visible` always (off-screen via transform); pointer-events:none keeps it from intercepting touches when closed. */ .nav-drawer{ position:fixed;top:0;left:0;bottom:0;right:auto; width:min(86vw,360px);z-index:320; background:#FAF8F3; border-right:1px solid rgba(15,24,40,.06); box-shadow:8px 0 32px rgba(15,24,40,.14); display:flex;flex-direction:column;align-items:stretch; justify-content:flex-start;gap:0;padding:0;overflow:hidden; transform:translate3d(-100%,0,0); transition:transform .32s cubic-bezier(.4,0,.2,1); pointer-events:none; will-change:transform; } .nav-drawer.open{ transform:translate3d(0,0,0); pointer-events:auto; } /* Drawer head matches the nav bar's exact dimensions (52px tall, 0 8px padding) so the open drawer reads as a continuation of the bar rather than a chunkier separate surface. Logo height and the close button shrink to fit. */ .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:0 8px;height:52px;border-bottom:1px solid rgba(15,24,40,.06);flex-shrink:0;} /* Brand uses align-self:center so the logo is vertically centered inside the 52px head row. translateY nudges the image down ~2px because the source PNG's "tandoco" glyphs sit in the upper portion of the file's canvas, not its vertical center — without the nudge the wordmark visually reads as top-aligned even though the IMG element itself is centered. */ .drawer-head-brand{display:inline-flex;align-items:center;align-self:center;padding-left:8px;height:100%;} .drawer-head-brand img{height:26px;width:auto;display:block;transform:translateY(2px);} .drawer-close{width:32px;height:32px;border-radius:10px;background:rgba(15,24,40,.05);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy,#1B1A6B);padding:0;transition:background .18s;} .drawer-close:hover{background:rgba(15,24,40,.10);} .drawer-close svg{width:16px;height:16px;} /* Sign-in card (signed-out) and account card (signed-in) — same gold- tinted glass surface so the "identity slot" reads identically either way, and the swap is just a content change. */ .drawer-auth{margin:14px 16px 4px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(135deg,rgba(212,168,87,.12),rgba(27,26,107,.04));border:1px solid rgba(212,168,87,.28);border-radius:14px;} .drawer-auth-eyebrow{font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d,#8B6914);} .drawer-auth-sub{font-size:12.5px;line-height:1.5;color:var(--muted,#6B6B7B);margin:0 0 4px;} /* Sign up + log in share size/padding/font so the two buttons read as a paired primary + secondary action. Only background, border, and color distinguish them. The transparent 1.5px border on the primary button matches the ghost's actual border so total height is identical to the pixel. */ /* Both share min-height:44px (tap-target standard) so they render the exact same size regardless of which one the page's other CSS files happen to also style. */ .drawer-auth .btn-primary, .drawer-auth .btn-ghost{ display:block;width:100%;padding:10px 14px;border-radius:12px; font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800; letter-spacing:-.005em;cursor:pointer;text-transform:lowercase; text-align:center;min-height:44px;line-height:1.2; } .drawer-auth .btn-primary{ background:linear-gradient(135deg,var(--gold-d,#8B6914) 0%,var(--gold,#C8A96E) 55%,var(--gold-l,#E8C87A) 100%); color:#1A1508 !important; border:1.5px solid transparent; box-shadow:0 6px 16px -6px rgba(200,169,110,.55); transition:transform .18s,box-shadow .18s; } .drawer-auth .btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(200,169,110,.7);} .drawer-auth .btn-ghost{ background:transparent !important; border:1.5px solid rgba(27,26,107,.18) !important; color:var(--navy,#1B1A6B) !important; transition:border-color .18s,background .18s; } .drawer-auth .btn-ghost:hover{border-color:rgba(27,26,107,.32) !important;background:rgba(27,26,107,.03) !important;} .drawer-acct{margin:14px 16px 4px;padding:14px;background:linear-gradient(135deg,rgba(212,168,87,.12),rgba(27,26,107,.04));border:1px solid rgba(212,168,87,.28);border-radius:14px;flex-direction:column;gap:10px;} .drawer-acct-hi{display:flex;align-items:center;justify-content:space-between;gap:10px;} .drawer-acct-greet{display:flex;flex-direction:column;gap:2px;min-width:0;} .drawer-acct-eyebrow{font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d,#8B6914);} .drawer-acct-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:900;color:var(--navy,#1B1A6B);letter-spacing:-.02em;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-decoration:none;transition:opacity .15s;} a.drawer-acct-name:hover,a.drawer-acct-name:focus-visible{opacity:.75;text-decoration:none;} .drawer-acct-coin{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:99px;background:rgba(212,168,87,.20);border:1px solid rgba(212,168,87,.40);color:var(--gold-d,#8B6914);font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:900;flex-shrink:0;line-height:1;} .drawer-acct-coin img{width:14px;height:14px;display:block;} .nav-drawer .drawer-acct-link{display:inline-flex;align-items:center;gap:4px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:700;color:var(--gold-d,#8B6914);text-decoration:none;letter-spacing:.01em;padding:0;align-self:flex-start;line-height:1;} .nav-drawer .drawer-acct-link:hover{color:var(--navy,#1B1A6B);} .drawer-acct-signout{background:none;border:none;padding:2px 0 0;font-size:12px;font-weight:700;color:#DC2626;cursor:pointer;font-family:inherit;text-align:left;align-self:flex-start;} /* Link list — grouped sections with thin sand dividers. The scrollable region is just the link groups; the footer order CTA stays pinned below. */ .drawer-links{display:flex;flex-direction:column;align-items:stretch;padding:6px 8px 12px;gap:0;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-top:4px;} /* Group section — label + member rows. Each subsequent group gets a 1px sand divider above it for visual rhythm. */ .drawer-group{display:flex;flex-direction:column;gap:1px;padding:4px 0;} .drawer-group + .drawer-group{border-top:1px solid rgba(15,24,40,.06);margin-top:6px;padding-top:10px;} .drawer-group-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--muted,#6B6B7B);padding:2px 12px 8px;} .drawer-links a{font-family:'Plus Jakarta Sans',sans-serif;font-size:14.5px;font-weight:700;color:var(--navy,#1B1A6B);letter-spacing:-.01em;text-decoration:none;padding:11px 12px;border-radius:10px;transition:background .15s,color .15s;display:flex;align-items:center;gap:12px;position:relative;min-height:44px;} .drawer-links a:hover{background:rgba(15,24,40,.05);color:var(--accent,#2D2FA8);} /* Inline icon leading each link. Drawn from inline svg in the markup so the stroke picks up `currentColor` and tracks the link color through hover / active states. */ .drawer-link-icon{width:18px;height:18px;flex-shrink:0;color:var(--muted,#6B6B7B);} .drawer-links a:hover .drawer-link-icon{color:var(--accent,#2D2FA8);} /* Active page — 3px coral left rail + white fill + navy bold label. Replaces the previous gold gradient slab so the active row no longer competes with the sign-up CTA above it for visual weight. */ .drawer-links a.active{ background:#fff; color:var(--navy,#1B1A6B); font-weight:900; letter-spacing:-.01em; box-shadow:inset 3px 0 0 var(--coral,#C87555); padding-left:16px; } .drawer-links a.active .drawer-link-icon{color:var(--navy,#1B1A6B);} .drawer-links .nav-dd-tag{display:inline-flex;padding:2px 7px;border-radius:99px;background:var(--gold,#C8A96E);color:#1A1508;font-size:9px;font-weight:900;letter-spacing:.10em;text-transform:uppercase;margin-left:auto;} /* Sign-out button rendered as a drawer-link row.