/* ========================================================================== Bamboo Sushi Bar & Hibachi Express — shared stylesheet Loaded on every page. One design system: two type families, two button styles, one card, one grid. Photography carries the page; the interface stays out of its way. Palette follows the bright Bamboo variant: white and soft-gray surfaces, near-black type, and the logo's saturated red. Near-black bands remain only where they add useful contrast (mobile utilities and photo overlays). ========================================================================== */ :root{ /* surface */ --paper:#FFFFFF; /* primary page field */ --card:#F7F7F4; /* soft alternate surface */ --void:#0B0B0B; /* deliberate contrast band */ --rule:#D9D9D4; /* borders and dividers */ /* text */ --ink:#0B0B0B; /* primary text */ --ash:#444444; /* secondary text */ --ash-dim:#666666; /* tertiary text */ /* accent */ --red:#DF1F26; /* primary Bamboo accent; 4.81:1 with white */ --red-lite:#DF1F26; /* small text and links on light surfaces */ --red-hover:#C71820; --gold:#DF1F26; /* legacy semantic token; visually unified to red */ /* type */ --display:'Fraunces',Georgia,'Times New Roman',serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; /* layout */ --pad:clamp(20px,5vw,56px); --max:1220px; --nav-h:70px; --bar-h:0px; /* mobile action bar height, set in media query */ --ease:cubic-bezier(.16,.9,.28,1); --radius:14px; } /* --------------------------------------------------------------- reset -- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--paper);color:var(--ink); font-family:var(--body);font-size:16px;line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; padding-bottom:var(--bar-h); } img{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul,ol{list-style:none;padding:0} h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.15;letter-spacing:-.01em} :focus-visible{outline:2.5px solid var(--red-lite);outline-offset:3px;border-radius:2px} /* Honour the OS "reduce motion" setting everywhere, including the reveal engine below, which is why .reveal is also neutralised here. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important } .reveal{opacity:1 !important;transform:none !important} } .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} .wrap--narrow{max-width:820px} .skip{ position:absolute;left:-9999px;top:0;z-index:400; background:var(--red);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600 } .skip:focus{left:0} /* Screen-reader-only, but still focusable/announced. */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0 } /* ------------------------------------------------------------- reveal -- */ /* Progressive enhancement: elements start hidden ONLY once JS confirms it can un-hide them (html.js is set by an inline script in ), so with JS off or broken every section is visible by default. */ .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .reveal.is-in{opacity:1;transform:none} .js .reveal[data-delay="1"]{transition-delay:.08s} .js .reveal[data-delay="2"]{transition-delay:.16s} .js .reveal[data-delay="3"]{transition-delay:.24s} /* ------------------------------------------------------------ buttons -- */ /* Exactly two button styles site-wide. Anything that needs to look like a third thing is a plain link instead. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:50px;padding:13px 26px;border-radius:100px; font-weight:600;font-size:15px;letter-spacing:.01em;text-align:center; transition:background .22s,border-color .22s,color .22s,transform .22s } .btn svg{flex:0 0 auto} .btn--primary{background:var(--red);color:#fff} .btn--primary:hover{background:var(--red-hover)} .btn--secondary{border:1.5px solid rgba(11,11,11,.34);color:var(--ink)} .btn--secondary:hover{border-color:var(--ink);background:rgba(11,11,11,.06)} @media (hover:hover){ .btn:hover{transform:translateY(-2px)} } .btn--block{width:100%} /* Inline text link */ .link{color:var(--red-lite);font-weight:600;text-decoration:underline;text-underline-offset:3px} .link:hover{color:var(--ink)} /* -------------------------------------------------------------- header -- */ .site-head{ position:fixed;inset:0 0 auto 0;z-index:200;height:var(--nav-h); display:flex;align-items:center;gap:24px;padding-inline:var(--pad); color:var(--ink); background:rgba(255,255,255,0);border-bottom:1px solid transparent; transition:background .35s,border-color .35s,backdrop-filter .35s } .site-head.is-stuck{ background:rgba(255,255,255,.95);backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--rule) } /* Interior pages have no full-bleed hero behind the bar, so they get the solid treatment immediately rather than waiting for a scroll. */ .page--solid-head .site-head{background:rgba(255,255,255,.95);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--rule)} /* The homepage header sits over photography until it becomes sticky. */ html:not(.page--solid-head) .site-head:not(.is-stuck){ --ink:#FFFFFF;--ash:#F2F2F2 } .brand{display:flex;align-items:center;gap:11px;flex:0 0 auto} .brand img{width:34px} .brand-name{display:flex;flex-direction:column;line-height:1.1} .brand-name b{font-family:var(--display);font-weight:600;font-size:18px} .brand-name span{ font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--ash);font-weight:600 } @media (max-width:400px){ .brand-name span{display:none} } .nav{display:none;align-items:center;gap:28px;margin-inline:auto} .nav a{ font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase; color:var(--ash);padding:8px 0;position:relative;transition:color .25s } .nav a::after{ content:'';position:absolute;left:0;right:100%;bottom:2px;height:2px; background:var(--red);transition:right .3s var(--ease) } .nav a:hover,.nav a[aria-current="page"]{color:var(--ink)} .nav a:hover::after,.nav a[aria-current="page"]::after{right:0} @media (min-width:900px){ .nav{display:flex} } .head-cta{display:none;margin-left:auto} @media (min-width:560px){ .head-cta{display:inline-flex} } @media (min-width:900px){ .head-cta{margin-left:0} } .head-cta.btn{min-height:44px;padding:11px 22px;font-size:14px} /* burger */ .burger{ display:inline-flex;flex-direction:column;justify-content:center;gap:5px; width:46px;height:46px;margin-left:auto;padding:11px;border-radius:10px;flex:0 0 auto } .burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (min-width:900px){ .burger{display:none} } @media (min-width:560px){ .burger{margin-left:14px} } /* drawer */ .drawer{ position:fixed;inset:var(--nav-h) 0 auto 0;z-index:190; background:var(--void);border-bottom:1px solid var(--rule); padding:8px var(--pad) 24px; display:none;flex-direction:column } .drawer,.action-bar,.section--void,.lightbox{ --ink:#F7F7F4;--ash:#CCCCCC;--ash-dim:#999999;--rule:#333333; --red-lite:#FF6B64 } .drawer.is-open{display:flex} .drawer a{ padding:15px 2px;border-bottom:1px solid var(--rule); font-size:15px;font-weight:600;letter-spacing:.04em } .drawer a[aria-current="page"]{color:var(--red-lite)} .drawer .btn{margin-top:18px} @media (min-width:900px){ .drawer{display:none !important} } /* ------------------------------------------------- mobile action bar --- */ /* Persistent thumb-reach bar: Menu · Locations · Order. */ .action-bar{ position:fixed;inset:auto 0 0 0;z-index:180; display:grid;grid-template-columns:1fr 1fr 1.15fr; background:rgba(11,11,11,.96);backdrop-filter:blur(12px); border-top:1px solid var(--rule); padding-bottom:env(safe-area-inset-bottom) } .action-bar a{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; min-height:58px;padding:9px 6px; font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ash) } .action-bar a svg{width:19px;height:19px} .action-bar a:last-child{background:var(--red);color:#fff} @media (min-width:900px){ .action-bar{display:none} } @media (max-width:899px){ body{--bar-h:62px} } /* ------------------------------------------------------- catering stamp -- */ /* Homepage-only floating CTA — a rotated rubber-stamp badge pinned to the viewport as the page scrolls. Hidden by default and revealed by app.js once the hero has scrolled out of view (same default-hidden/JS-toggled pattern as .drawer and .lightbox above), so it never has to compete with the hero's own "Order Online" / "View Menu" buttons for space. Sits above the mobile action bar as a small corner tag; on wider screens, where the action bar is gone and the .wrap gutter opens up beside the content, it grows into a bigger stamp vertically centered on the right edge. */ .catering-stamp{ display:none; position:fixed;z-index:150;right:12px; bottom:calc(var(--bar-h) + 16px + env(safe-area-inset-bottom)) } .catering-stamp.is-visible{display:block} .catering-stamp-face{ position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; width:92px;height:92px;border-radius:50%; background:rgba(255,255,255,.96);backdrop-filter:blur(6px); border:2px solid var(--red); box-shadow:0 8px 22px rgba(0,0,0,.22); color:var(--red);text-align:center; transform:rotate(-8deg); transition:transform .3s var(--ease),box-shadow .3s var(--ease) } .catering-stamp-face::before{ content:'';position:absolute;inset:6px;border-radius:50%; border:1px dashed rgba(223,31,38,.5) } .catering-stamp-eyebrow{ font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:.85 } .catering-stamp-word{font-family:var(--display);font-weight:600;font-size:14px;line-height:1.05} .catering-stamp-arrow{width:14px;height:14px;margin-top:1px} /* Entrance pop, then a slow "look at me" pulse for as long as it's up. */ .catering-stamp.is-visible .catering-stamp-face{ animation:stamp-in .5s var(--ease),catering-pop 2.6s var(--ease) .5s infinite } @keyframes stamp-in{ 0%{transform:rotate(-8deg) scale(.4);opacity:0} 65%{transform:rotate(-11deg) scale(1.1);opacity:1} 100%{transform:rotate(-8deg) scale(1);opacity:1} } @keyframes catering-pop{ 0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 0 0 rgba(223,31,38,.4)} 50%{box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 0 9px rgba(223,31,38,0)} } @media (hover:hover){ .catering-stamp:hover .catering-stamp-face{transform:rotate(0deg) scale(1.08)} } .catering-stamp:focus-visible .catering-stamp-face{transform:rotate(0deg) scale(1.08)} @media (min-width:900px){ .catering-stamp{right:26px;bottom:auto;top:50%;transform:translateY(-50%)} .catering-stamp-face{width:152px;height:152px} .catering-stamp-eyebrow{font-size:11px} .catering-stamp-word{font-size:21px} .catering-stamp-arrow{width:19px;height:19px} } /* ------------------------------------------------------------ sections -- */ section{padding-block:clamp(56px,8vw,104px)} .section--tight{padding-block:clamp(40px,6vw,72px)} .section--card{background:var(--card)} .section--void{background:var(--void)} /* Interior page header block */ .page-head{padding-top:calc(var(--nav-h) + clamp(38px,6vw,74px));padding-bottom:clamp(28px,4vw,44px)} .page-head p.lede{margin-top:16px;max-width:62ch;color:var(--ash);font-size:clamp(16px,1.6vw,18px)} .eyebrow{ font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase; color:var(--red-lite);margin-bottom:14px } h1{font-size:clamp(34px,5.4vw,62px)} h2{font-size:clamp(27px,3.6vw,42px)} h3{font-size:clamp(19px,2vw,22px)} .section-head{max-width:60ch;margin-bottom:clamp(30px,4vw,48px)} .section-head p{margin-top:14px;color:var(--ash)} em.accent{color:var(--red-lite);font-style:italic} /* ---------------------------------------------------------------- hero -- */ .hero{ --ink:#FFFFFF;--ash:#EDE6DC;--red-lite:#FF6B64; position:relative;min-height:min(94vh,780px); display:flex;align-items:flex-end; color:var(--ink); padding-top:calc(var(--nav-h) + 40px);padding-bottom:clamp(48px,7vw,88px); overflow:hidden } .hero .btn--secondary{ border-color:rgba(255,255,255,.58);color:#FFFFFF } .hero .btn--secondary:hover{ border-color:#FFFFFF;background:rgba(255,255,255,.1) } .hero-media{position:absolute;inset:0;z-index:0} .hero-media picture{display:contents} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%} /* Keep the tuna platter centered across breakpoints; object-fit supplies the stronger crop on narrow screens without changing the content hierarchy. */ @media (min-width:760px){ .hero-media img{object-position:center 52%} } /* The scrim protects the white headline: a vertical wash on phones (text sits low), and a left-weighted wash on wide screens so the tuna stays vivid. */ .hero-media::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(11,11,11,.66) 0%,rgba(11,11,11,.38) 28%,rgba(11,11,11,.93) 100%) } @media (min-width:760px){ .hero-media::after{ background: linear-gradient(90deg,rgba(11,11,11,.90) 0%,rgba(11,11,11,.74) 32%,rgba(11,11,11,.22) 62%,rgba(11,11,11,.06) 100%), linear-gradient(180deg,rgba(11,11,11,.5) 0%,rgba(11,11,11,.2) 42%,rgba(11,11,11,.7) 100%) } } .hero-inner{position:relative;z-index:1;width:100%} .hero h1{max-width:16ch;text-shadow:0 2px 24px rgba(0,0,0,.4)} .hero-kicker{ font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--ink);margin-bottom:18px } .hero-sub{ margin-top:18px;max-width:46ch;font-size:clamp(16px,1.7vw,19px);color:#EDE6DC; text-shadow:0 1px 14px rgba(0,0,0,.5) } .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .hero-actions .btn{flex:1 1 auto;min-width:170px} @media (min-width:560px){ .hero-actions .btn{flex:0 0 auto} } /* --------------------------------------------------------- photo strip -- */ /* Home page: photography with no captions. The pictures speak; nothing is labelled with a dish name we cannot verify. */ .strip{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)} @media (min-width:760px){ .strip{grid-template-columns:repeat(4,1fr);gap:14px} } .strip figure{margin:0;overflow:hidden;border-radius:var(--radius);background:var(--card)} .strip img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s var(--ease)} @media (hover:hover){ .strip figure:hover img{transform:scale(1.05)} } /* ---------------------------------------------------------- three-up ---- */ .trio{display:grid;gap:clamp(18px,3vw,30px);grid-template-columns:1fr} @media (min-width:720px){ .trio{grid-template-columns:repeat(3,1fr)} .trio--two{grid-template-columns:repeat(2,1fr);max-width:840px} } .trio article{ background:var(--card);border:1px solid var(--rule);border-radius:var(--radius); padding:clamp(22px,3vw,30px) } .trio h3{margin-bottom:10px} .trio p{color:var(--ash);font-size:15px} /* ------------------------------------------------------------ locations -- */ .loc-grid{display:grid;gap:clamp(18px,2.6vw,26px);grid-template-columns:1fr} @media (min-width:700px){ .loc-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:1040px){ .loc-grid{grid-template-columns:repeat(3,1fr)} } .loc{ background:var(--card);border:1px solid var(--rule);border-radius:var(--radius); padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;gap:16px } .loc-flag{ align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--gold);border:1px solid rgba(223,31,38,.45);border-radius:100px;padding:5px 11px } .loc h3{font-size:clamp(21px,2.4vw,25px)} .loc-meta{font-size:15px;color:var(--ash);display:grid;gap:6px} .loc-meta a{color:var(--ash);text-decoration:underline;text-underline-offset:3px} .loc-meta a:hover{color:var(--ink)} .loc-hours{display:grid;gap:7px;padding-block:14px;border-block:1px solid var(--rule);font-size:14.5px} .loc-hours div{display:flex;justify-content:space-between;gap:14px} .loc-hours dt,.loc-hours span:first-child{color:var(--ash)} .loc-hours dd{margin:0;font-variant-numeric:tabular-nums} .loc-tags{display:flex;flex-wrap:wrap;gap:7px} .loc-tags span{ font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--ash); border:1px solid var(--rule);border-radius:100px;padding:5px 11px } .loc-tags span.is-on{color:var(--ink);border-color:rgba(223,31,38,.55);background:rgba(223,31,38,.1)} .loc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:4px} .loc-actions .btn{flex:1 1 150px;min-height:46px;padding:11px 18px;font-size:14px} .loc-social{display:flex;gap:9px} .loc-social a{ display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px; border:1px solid var(--rule);border-radius:50%;color:var(--ash);transition:color .2s,border-color .2s } .loc-social a:hover{color:var(--ink);border-color:var(--ink)} .loc-social svg{width:18px;height:18px} /* ------------------------------------------------------------- gallery -- */ /* Asymmetric masonry via CSS columns — no captions anywhere. Identifying a dish we have not verified is worse than saying nothing, so the gallery says nothing and lets the photographs carry it. Alt text stays factual. */ .gallery{columns:2;column-gap:10px} @media (min-width:700px){ .gallery{columns:3;column-gap:14px} } @media (min-width:1100px){ .gallery{columns:4;column-gap:16px} } .gallery > button{ display:block;width:100%;padding:0;margin-bottom:10px; break-inside:avoid;overflow:hidden;border-radius:var(--radius); background:var(--card);position:relative;line-height:0 } @media (min-width:700px){ .gallery > button{margin-bottom:14px} } .gallery img{width:100%;transition:transform .6s var(--ease),opacity .3s} @media (hover:hover){ .gallery > button:hover img{transform:scale(1.045)} .gallery > button::after{ content:'';position:absolute;inset:0;background:rgba(11,11,11,.28);opacity:0;transition:opacity .3s } .gallery > button:hover::after{opacity:1} } /* -------------------------------------------------------------- menu ---- */ /* Full-bleed bar that carries its own .wrap for gutters — no negative margins here, or the bar overflows the viewport on wide screens. */ .menu-nav{ position:sticky;top:var(--nav-h);z-index:100; background:rgba(255,255,255,.95);backdrop-filter:blur(12px); border-block:1px solid var(--rule) } .menu-nav ul{display:flex;gap:6px;overflow-x:auto;padding-block:11px;scrollbar-width:none} .menu-nav ul::-webkit-scrollbar{display:none} .menu-nav a{ display:inline-flex;align-items:center;min-height:44px; /* thumb-friendly */ white-space:nowrap;font-size:12.5px;font-weight:600;letter-spacing:.05em; color:var(--ash);border:1px solid var(--rule);border-radius:100px;padding:0 16px; transition:color .2s,border-color .2s,background .2s } .menu-nav a:hover{color:var(--ink);border-color:var(--ink)} .menu-note{ background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--red); border-radius:var(--radius);padding:20px 22px;font-size:15px;color:var(--ash);max-width:70ch } .menu-note b{color:var(--ink)} .menu-section{padding-top:clamp(38px,5vw,58px);padding-bottom:0} .menu-section h2{margin-bottom:8px} .menu-section > .wrap > p.note{color:var(--ash-dim);font-size:14.5px;margin-bottom:24px;max-width:64ch} .menu-list{display:grid;gap:2px;grid-template-columns:1fr;border-top:1px solid var(--rule)} @media (min-width:820px){ .menu-list{grid-template-columns:repeat(2,1fr);column-gap:44px} } .menu-item{padding:16px 0;border-bottom:1px solid var(--rule)} .menu-item b{display:block;font-family:var(--display);font-size:17px;font-weight:600;margin-bottom:4px} .menu-item span{color:var(--ash);font-size:14.5px;line-height:1.55} /* Choice lists (e.g. hibachi proteins) read better as chips than as rows. */ .chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .chip-list li{ font-size:14px;color:var(--ash); border:1px solid var(--rule);border-radius:100px;padding:7px 14px;background:var(--card) } /* Photographed menu boards, offered as a supporting reference. */ .board-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .board-grid button{ padding:0;border-radius:var(--radius);overflow:hidden;background:var(--card); border:1px solid var(--rule);line-height:0 } .board-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .5s var(--ease)} @media (hover:hover){ .board-grid button:hover img{transform:scale(1.04)} } /* ---------------------------------------------------------------- FAQ --- */ /* Native
, so every answer is present in the HTML and readable with JS disabled. */ .faq{max-width:820px;border-top:1px solid var(--rule)} .faq details{border-bottom:1px solid var(--rule)} .faq summary{ display:flex;justify-content:space-between;align-items:center;gap:20px; padding:20px 2px;cursor:pointer;list-style:none; font-family:var(--display);font-size:clamp(17px,2vw,19px);font-weight:600 } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:'';flex:0 0 auto;width:11px;height:11px; border-right:2px solid var(--red-lite);border-bottom:2px solid var(--red-lite); transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease) } .faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)} .faq summary:hover{color:var(--red-lite)} .faq .faq-body{padding:0 2px 22px;color:var(--ash);font-size:15.5px;max-width:70ch} /* -------------------------------------------------------------- awards -- */ .awards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .award{ background:var(--card);border:1px solid var(--rule);border-radius:var(--radius); padding:22px;display:flex;flex-direction:column;gap:7px } /* Badges and press clippings are mixed portrait/landscape, so letterbox them with `contain` rather than cropping — cropping an award would cut its text. */ .award-shot{ width:100%;padding:0;margin-bottom:12px;border-radius:10px;overflow:hidden; background:var(--void);border:1px solid var(--rule);line-height:0 } .award-shot img{width:100%;height:180px;object-fit:contain;transition:transform .5s var(--ease)} @media (hover:hover){ .award-shot:hover img{transform:scale(1.04)} } .award .year{ font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--gold) } .award b{font-family:var(--display);font-size:18px;font-weight:600} .award span.org{color:var(--ash);font-size:14px} /* ratings */ .ratings{display:flex;flex-wrap:wrap;gap:12px} .rating{ display:flex;align-items:center;gap:12px; background:var(--card);border:1px solid var(--rule);border-radius:var(--radius); padding:15px 20px;transition:border-color .2s } .rating:hover{border-color:var(--ash-dim)} .rating .num{font-family:var(--display);font-size:26px;font-weight:600;line-height:1} .rating .meta{display:flex;flex-direction:column;font-size:13px;color:var(--ash);line-height:1.35} .rating .meta b{color:var(--ink);font-size:14px} /* ---------------------------------------------------------------- misc -- */ .quote{ border-left:3px solid var(--red);background:rgba(223,31,38,.07); border-radius:0 var(--radius) var(--radius) 0;padding:22px 26px; font-family:var(--display);font-size:clamp(19px,2.4vw,24px);font-style:italic;max-width:38ch } .split{display:grid;gap:clamp(26px,4vw,54px);grid-template-columns:1fr;align-items:center} @media (min-width:860px){ .split{grid-template-columns:1fr 1fr} } .split img{border-radius:var(--radius);width:100%} .steps{counter-reset:step;display:grid;gap:18px;grid-template-columns:1fr} @media (min-width:760px){ .steps{grid-template-columns:repeat(3,1fr)} } .steps li{ counter-increment:step;background:var(--card);border:1px solid var(--rule); border-radius:var(--radius);padding:24px } .steps li::before{ content:counter(step,decimal-leading-zero);display:block; font-family:var(--display);font-size:24px;color:var(--red-lite);margin-bottom:10px } .steps b{display:block;margin-bottom:6px;font-family:var(--display);font-size:17px;font-weight:600} .steps p{color:var(--ash);font-size:14.5px} .cta-band{ --ink:#FFFFFF;--ash:#FFFFFF;--red-lite:#FFFFFF; background:var(--red);color:var(--ink);text-align:center } .cta-band .wrap{display:flex;flex-direction:column;align-items:center;gap:22px} .cta-band p{color:#FFFFFF;max-width:52ch} .cta-band .btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .cta-band .btn--primary{ background:#FFFFFF;color:#0B0B0B } .cta-band .btn--primary:hover{background:#F7F7F4} .cta-band .btn--secondary{border-color:#FFFFFF;color:#FFFFFF} .cta-band .btn--secondary:hover{border-color:#FFFFFF;background:rgba(255,255,255,.12)} .order-pick{display:grid;gap:12px;max-width:620px} .order-pick a{ display:flex;align-items:center;justify-content:space-between;gap:16px; background:var(--card);border:1px solid var(--rule);border-radius:var(--radius); padding:20px 22px;min-height:74px;transition:border-color .2s,background .2s } .order-pick a:hover{border-color:var(--red);background:rgba(223,31,38,.08)} .order-pick b{font-family:var(--display);font-size:19px;font-weight:600;display:block} .order-pick span{color:var(--ash);font-size:14px} .order-pick svg{flex:0 0 auto;color:var(--red-lite)} /* -------------------------------------------------------------- footer -- */ footer{background:var(--paper);border-top:1px solid var(--rule);padding-block:clamp(44px,6vw,68px)} .foot-grid{display:grid;gap:34px;grid-template-columns:1fr} @media (min-width:640px){ .foot-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:980px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr} } .foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:14px} .foot-brand img{width:30px} .foot-brand b{font-family:var(--display);font-size:17px;font-weight:600} .foot-about{color:var(--ash);font-size:14.5px;max-width:38ch} .foot-col h2{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:14px} .foot-col a{display:block;padding:6px 0;color:var(--ash);font-size:14.5px;transition:color .2s} .foot-col a:hover{color:var(--ink)} .foot-base{ margin-top:38px;padding-top:22px;border-top:1px solid var(--rule); display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between; color:var(--ash-dim);font-size:13.5px } /* ----------------------------------------------------------- lightbox --- */ .lightbox{ position:fixed;inset:0;z-index:300;display:none; align-items:center;justify-content:center;padding:clamp(14px,4vw,48px); background:rgba(11,11,11,.95);backdrop-filter:blur(6px) } .lightbox.is-open{display:flex} .lightbox img{max-width:100%;max-height:88vh;width:auto;border-radius:8px} .lightbox-close{ position:absolute;top:14px;right:14px;width:46px;height:46px; display:inline-flex;align-items:center;justify-content:center; background:rgba(242,237,228,.12);border-radius:50%;color:var(--ink) } .lightbox-close:hover{background:rgba(242,237,228,.24)} .lightbox-cap{ position:absolute;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom)); text-align:center;padding-inline:20px;color:var(--ash);font-size:14px } /* --------------------------------------------------------------- 404 ---- */ .notfound{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px;padding-top:var(--nav-h)} .notfound .btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}