/* LiveBGC shared stylesheet: tokens, motion and the warm editorial theme. */ :root { /* colour: the dark theme is burgundy; light (the default) is set below */ --bg: #2A0D14; --bg-deep: #220A10; --surface: #3A1420; --surface-2: #4A1B29; --line: #5E2635; --text: #FDF4F6; --text-2: #DCC0C8; --text-3: #C09DA7; --accent: #B8324F; /* burgundy fills: buttons, bars, chips (white text on it) */ --accent-soft: #F8CCD6; --teal: #8E3A52; /* "teal" is now a softer rose-burgundy; the name stays so pages keep working */ --line-strong: #7A3445; /* text roles: in dark these equal the fills; the light theme splits them for contrast */ --text-1: #F3E1E6; --accent-ink: #F4B3C2; /* burgundy-rose text on the dark ground */ --teal-ink: #E9BCC8; --teal-soft: #F2CDD6; --on-accent: #FFFFFF; /* ink: the primary button fill (espresso on light, cream on burgundy) */ --ink: #FDF4F6; --on-ink: #2A0D14; --display: 'Instrument Sans', system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif; --mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace; color-scheme: dark; /* motion */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* photo morphs: a critically damped spring (no bounce). It leaves gently, travels smoothly and settles softly, where an expo ease-out jumps most of the way at once */ --ease-morph: linear(0, 0.036 4%, 0.120 8%, 0.224 12%, 0.333 16%, 0.438 20%, 0.555 25%, 0.654 30%, 0.734 35%, 0.799 40%, 0.858 46%, 0.901 52%, 0.941 60%, 0.970 70%, 0.986 80%, 0.995 90%, 1); --morph: 640ms; --dur: 420ms; } /* form controls use the page font instead of the browser default (Arial) */ input, button, textarea, select { font: inherit; } /* Photo slots: a real behind the content, with the dark gradient as ::after. Negative z-index inside an isolated box keeps both under the slot's own text. */ .media { position: relative; overflow: hidden; isolation: isolate; } .media-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; } .media::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(36, 9, 15, var(--shade-a, 0)), rgba(36, 9, 15, var(--shade-b, 0))); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; animation-timeline: auto !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------- Phase 2: liquid glass --------------------------------------------------------------- */ /* The glass material. --glass-base adds a tint under the sheen where a surface floats over photos, so its text keeps 4.5:1 whatever passes underneath. */ .glass { background: linear-gradient(135deg, rgb(255 255 255 / .10), rgb(255 255 255 / .03)), var(--glass-base, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgb(255 255 255 / .14); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 -1px 0 rgb(255 255 255 / .04), 0 10px 40px -10px rgb(0 0 0 / .5); } .chip.glass { --glass-base: rgb(36 9 15 / .8); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18); } .panel.glass { position: relative; } /* The quiz panel: solid rather than clear (its colours follow the theme, see the end of the file) */ .glass.glass-light { /* solid, so stacked flash cards never show through each other */ background: linear-gradient(135deg, #FFFFFF, #F7F1F3); border: 1px solid rgb(255 255 255 / .6); /* opaque, so a backdrop blur would show nothing and only cost GPU time */ -webkit-backdrop-filter: none; backdrop-filter: none; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--surface); } .chip.glass { background: rgb(36 9 15 / .85); } .glass.glass-light { background: #FFFFFF; } } /* Sticky nav: the glass is on the floating pill (.nav-row::before, Phase 9) */ .nav.glass { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; --glass-base: rgb(36 9 15 / .74); } .nav { isolation: isolate; } @media (hover: hover) { .card { position: relative; } } /* --------------------------------------------------------------- Phase 3: premium text and open animations Entrance animations only run while has .intro (removed by site.js 1.6s after load), so re-renders never replay them. Reveals animate `translate`; hover/press effects use `transform`, so the two never fight over one property. --------------------------------------------------------------- */ /* Headlines ink in with a left-to-right clip wipe. The text never moves, so a two-line title never sits as an empty band. After a photo-expand arrival (html.vt-arrive) it waits for the photo to land first. */ /* a wipe needs a soft start to read as a sweep, so it gets its own in-out curve */ html.intro .hero-title { animation: title-wipe 750ms cubic-bezier(.6, 0, .2, 1) 250ms both; } html.intro.vt-arrive .hero-title { animation-delay: 540ms; } /* A plain page change (nav, logo, links) crossfades; a wipe starting from blank would let the old page's headline show through the gap, so the new title is simply there. */ html.intro.vt-nav .hero-title { animation: none; } @keyframes title-wipe { from { clip-path: inset(-0.2em 100% -0.35em -0.1em); opacity: .3; } to { clip-path: inset(-0.2em -0.1em -0.35em -0.1em); opacity: 1; } } /* Homepage open sequence: only on a fresh load or an arrival from another site. Coming from another LiveBGC page (html.vt-nav) the header is already on screen, so the page is simply there. */ .home .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgb(36 9 15); opacity: 0; } html.intro:not(.vt-nav) .home .hero .media-img { animation: ken-burns 1800ms var(--ease-out) both; } html.intro:not(.vt-nav) .home .hero::before { animation: veil-lift 1800ms var(--ease-out) both; } html.intro:not(.vt-nav) .home .nav { animation: fade-down 700ms var(--ease-out) 100ms both; } html.intro:not(.vt-nav) .home .hero-chip { animation: fade-in 600ms var(--ease-out) 200ms both; } html.intro:not(.vt-nav) .home .hero-sub { animation: fade-up 700ms var(--ease-out) 700ms both; } html.intro:not(.vt-nav) .home .nav .btn, html.intro:not(.vt-nav) .home .mobile-cta, html.intro:not(.vt-nav) .home .hero-cta { animation: cta-pop 600ms var(--ease-spring) 850ms both; } @keyframes ken-burns { from { scale: 1.08; } } @keyframes veil-lift { from { opacity: .6; } } @keyframes fade-down { from { opacity: 0; translate: 0 -12px; } } @keyframes fade-in { from { opacity: 0; } } @keyframes fade-up { from { opacity: 0; translate: 0 12px; } } @keyframes cta-pop { from { opacity: 0; scale: .96; } } /* Ranked numbers: gradient fill, plus a sheen band that sweeps once on entry */ .rank-num { position: relative; background: linear-gradient(135deg, var(--accent-ink, var(--accent)), var(--accent-soft)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Scroll reveals: position-based, so a re-render lands at the same state */ @supports (animation-timeline: view()) { h2:not(.rank-item h2):not(.card h2), .card, .rank-item { animation: reveal linear both; animation-timeline: view(); /* finish once fully on screen, so nothing visible at load stays faded */ animation-range: entry 0% entry 100%; } .rank-num::after { content: attr(data-rank); position: absolute; inset: 0; -webkit-text-fill-color: rgb(255 255 255 / .5); filter: blur(1px); clip-path: inset(0 100% 0 0); animation: sheen linear both; animation-timeline: view(); animation-range: entry 60% cover 40%; } } /* no blur and no stagger: a quiet fade-up, so the hero moments stay special */ @keyframes reveal { from { opacity: 0; translate: 0 16px; } } @keyframes sheen { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 30% 0 40%); } 100% { clip-path: inset(0 0 0 100%); } } /* Page-to-page transitions; a homepage guide photo morphs into the guide's hero */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 350ms; animation-timing-function: var(--ease-out); } /* Page to page: the new page is fully opaque from its first frame and the old one is gone at that frame, so nothing ever shows through (a crossfade ghosts text, a dip through the background reads as a flash). A clean swap under a header and nav that carry their own names and hold perfectly still. No settle either: Chrome ignores clicks while a page transition runs, and quick clicks along the nav must always land. */ html.vt-page::view-transition-old(root) { animation: none; opacity: 0; } html.vt-page::view-transition-new(root) { animation: none; mix-blend-mode: normal; } html.vt-page::view-transition-group(root) { animation-duration: 0s; } html.vt-page .topbar { view-transition-name: site-topbar; } html.vt-page .site-header { view-transition-name: site-header; } html.vt-page .nav { view-transition-name: site-nav; } html.vt-page::view-transition-group(site-topbar), html.vt-page::view-transition-group(site-header), html.vt-page::view-transition-group(site-nav) { animation-duration: 0s; } html.vt-page::view-transition-old(site-topbar), html.vt-page::view-transition-old(site-header), html.vt-page::view-transition-old(site-nav) { animation: none; opacity: 0; } html.vt-page::view-transition-new(site-topbar), html.vt-page::view-transition-new(site-header), html.vt-page::view-transition-new(site-nav) { animation: none; mix-blend-mode: normal; } ::view-transition-group(*.guide-photo) { animation-duration: var(--morph); animation-timing-function: var(--ease-morph); overflow: clip; border-radius: 14px; } /* the outgoing card photo stays solid underneath while the hero fades in over it, so the morph never dips through an empty frame */ ::view-transition-old(*.guide-photo) { animation: none; } /* a photo with no partner on the other page never hangs around: it just fades */ ::view-transition-old(*.guide-photo):only-child { animation: vt-fade-out 180ms var(--ease-out) both; } /* Article heroes only morph on a real photo journey (arriving from a card, or Back to it). site.js sets .hero-live for those; nav, logo and other links just crossfade. */ html:not(.hero-live) .hero.media[style*="page-hero"] { view-transition-name: none !important; } /* Chrome blends old and new with plus-lighter (made for a symmetric crossfade). With the old photo held solid that sums the two and over-exposes the image, so blend normally: the new photo simply fades in over the old. The blend mode is set by the UA's own animation, so the new image needs its own animation to drop it. */ ::view-transition-old(*.guide-photo), ::view-transition-new(*.guide-photo) { mix-blend-mode: normal; } /* the photos swap mid-flight, slowly at both ends, so the change of crop never pops */ ::view-transition-new(*.guide-photo) { animation: vt-fade-in calc(var(--morph) * .6) cubic-bezier(.45, 0, .55, 1) calc(var(--morph) * .12) both; } /* A hero with no card photo to morph from (a nav or sheet link from a non-article page) is simply there, like the rest of the new page: fading it up would dip through the background. */ ::view-transition-new(*.guide-photo):only-child { animation: none; } @keyframes vt-fade-out { to { opacity: 0; } } @keyframes vt-fade-in { from { opacity: 0; } } ::view-transition-old(*.guide-photo), ::view-transition-new(*.guide-photo) { height: 100%; object-fit: cover; } /* --------------------------------------------------------------- Phase 4: movement and micro-interactions --------------------------------------------------------------- */ /* Cards lift, deepen their shadow, brighten their edge and zoom the photo */ a.card, article.card { transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), border-color 250ms var(--ease-out); } .card .media-img { transition: transform 600ms var(--ease-out); } @media (hover: hover) { a.card:hover, article.card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgb(0 0 0 / .7); border-color: rgb(255 255 255 / .22) !important; } a.card:hover .media-img { transform: scale(1.06); } } a.card:active, article.card:active { transform: translateY(-2px) scale(.98); transition-duration: 150ms; } /* Buttons: soft accent glow on hover, a small press */ .btn { transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out); } @media (hover: hover) { .btn-primary:hover { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 15%, transparent), 0 8px 24px -6px color-mix(in srgb, var(--accent) 60%, transparent); } .btn-ghost:hover { border-color: rgb(255 255 255 / .32) !important; } } .btn:active { transform: scale(.97); transition-duration: 120ms; } /* "Start here" leans toward the pointer; site.js sets --tx/--ty */ .magnetic { translate: var(--tx, 0) var(--ty, 0); transition: translate 250ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); } /* Nav links: underline grows from the centre, and stays under the current page */ .nav-link { position: relative; } .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform 250ms var(--ease-out); } .nav-link:hover::after, .nav-link.is-current::after { transform: scaleX(1); } /* Save to my list: the button pops, the saved counter bounces (classes added by site.js) */ .btn-save.pop { animation: save-pop 450ms var(--ease-spring); } [data-saved].pop { display: inline-block; animation: count-tick 450ms var(--ease-spring); } @keyframes save-pop { from { scale: .9; } } @keyframes count-tick { from { translate: 0 -6px; scale: 1.3; } } /* Event filter tabs: a glass pill that slides between tabs via a view transition */ .tab-pill { position: absolute; inset: 0; border-radius: 999px; --glass-base: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18); } html.tab-vt .tab-pill { view-transition-name: tab-pill; } ::view-transition-group(tab-pill) { animation-duration: 350ms; animation-timing-function: var(--ease-out); } /* Visible keyboard focus everywhere */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* --------------------------------------------------------------- Phase 5: mobile header and menu sheet (under 760px) The menu's open state is a class on , outside the page's Component state, so a re-render can't snap it shut. --------------------------------------------------------------- */ .mobile-cta, .menu-btn, .mobile-ad, .menu-sheet { display: none; } .menu-btn { position: relative; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border-radius: 12px; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .06); color: var(--text); cursor: pointer; } .menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 300ms var(--ease-out), opacity 200ms var(--ease-out); } .menu-btn span:nth-child(1) { top: 15px; } .menu-btn span:nth-child(2) { top: 21px; } .menu-btn span:nth-child(3) { top: 27px; } /* inside the open sheet the same icon morphs into an X */ html.menu-open .menu-sheet .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); transition-delay: 150ms; } html.menu-open .menu-sheet .menu-btn span:nth-child(2) { opacity: 0; transition-delay: 150ms; } html.menu-open .menu-sheet .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); transition-delay: 150ms; } .mobile-ad { flex: 1 1 100%; height: 90px; margin: 0 0 24px; } @media (max-width: 1100px) { .topbar, .nav, .site-header .ad-slot:not(.mobile-ad) { display: none !important; } /* one glass row: logo left, Start here + menu right */ .site-header { position: sticky; top: 0; z-index: 6; background: linear-gradient(135deg, rgb(255 255 255 / .08), rgb(255 255 255 / .02)), rgb(36 9 15 / .74) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgb(255 255 255 / .10) !important; } .site-header > div { box-sizing: border-box; height: 64px; padding: 0 16px !important; flex-wrap: nowrap !important; gap: 10px !important; } .site-header a[aria-label="LiveBGC home"] { gap: 8px !important; min-width: 0; } .site-header a[aria-label="LiveBGC home"] svg, .menu-sheet__top svg { width: 28px; height: 28px; } .site-header a[aria-label="LiveBGC home"] > span, .menu-sheet__top a > span { font-size: 25px !important; } .mobile-cta { display: inline-flex; align-items: center; margin-left: auto; padding: 9px 14px; border-radius: 10px; background: var(--accent); color: var(--on-accent, var(--bg)); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; } /* a tap leaves touch screens in :hover, and the pages' a:hover colour would wash the label out */ .mobile-cta:hover, .menu-sheet__cta:hover { color: var(--on-accent, var(--bg)); } .menu-btn { display: inline-flex; } .mobile-ad { display: flex; } /* the sheet */ .menu-sheet { display: block; position: fixed; inset: 0; z-index: 50; visibility: hidden; pointer-events: none; transition: visibility 0s linear 500ms; } .menu-sheet__panel { position: absolute; inset: 0; overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column; padding: 0 16px 28px; background: linear-gradient(160deg, rgb(255 255 255 / .09), rgb(255 255 255 / .02)), rgb(36 9 15 / .8); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); transform: translateY(-100%); transition: transform 500ms var(--ease-out); } .menu-sheet__top { display: flex; align-items: center; justify-content: space-between; height: 64px; flex: 0 0 auto; } .menu-sheet__top a { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; } .menu-sheet nav { display: flex; flex-direction: column; margin-top: 12px; } .menu-sheet nav a { padding: 14px 4px; border-bottom: 1px solid rgb(255 255 255 / .08); font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--text); text-decoration: none; } .menu-sheet nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; } .menu-sheet__foot { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 14px; } .menu-sheet__cta { display: block; text-align: center; padding: 16px; border-radius: 12px; background: var(--accent); color: var(--on-accent, var(--bg)); font-weight: 700; font-size: 17px; text-decoration: none; } html.menu-open { overflow: hidden; } html.menu-open .menu-sheet { visibility: visible; pointer-events: auto; transition-delay: 0s; } html.menu-open .menu-sheet__panel { transform: none; } html.menu-open .menu-sheet nav a, html.menu-open .menu-sheet__foot > * { animation: menu-item 400ms var(--ease-out) both; animation-delay: calc(160ms + var(--i, 0) * 40ms); } /* the page behind dims and steps back */ #app { transform-origin: 50% 0; transition: scale 500ms var(--ease-out), filter 500ms var(--ease-out); } html.menu-open #app { scale: .96; filter: brightness(.5); } /* closed behind the scenes after leaving the page (site.js) */ html.menu-instant .menu-sheet, html.menu-instant .menu-sheet__panel, html.menu-instant #app { transition: none !important; } } @keyframes menu-item { from { opacity: 0; translate: 0 16px; } } /* Phones: the quiz itself sits in the first screen. The step list repeats "Question 1 of 5", so it goes, and the headline shrinks to two lines. */ @media (max-width: 760px) { .quiz-wrap { padding: 28px 16px 64px !important; gap: 24px !important; } .quiz-intro h1 { font-size: 34px !important; margin: 8px 0 10px !important; } .quiz-intro p { margin: 0 !important; font-size: 16px !important; } .quiz-intro ol { display: none !important; } /* the flying copy of the panel lives outside .quiz-deck, so it needs the same padding */ .quiz-deck > main, .qe-card--front { padding: 24px 20px !important; } } /* --------------------------------------------------------------- Phase 6: dark mode, done properly, plus a light theme --------------------------------------------------------------- */ /* Light theme tokens. data-theme is set in before first paint. */ :root[data-theme="light"] { color-scheme: light; --bg: #FFFFFF; --bg-deep: #F8F1F3; --surface: #FFFFFF; --surface-2: #F7EEF1; --line: #EEDFE4; --line-strong: #D9BEC7; --text: #24090F; --text-1: #3F1D27; --text-2: #6E4C57; --text-3: #7B5A64; --accent: #7B1E34; /* burgundy fills: buttons, bars, chips (white text on it) */ --accent-ink: #7B1E34; /* burgundy text on white */ --accent-soft: #5A1325; /* link hover, gradient end */ --teal: #9C3D57; /* softer rose-burgundy fills */ --teal-ink: #8C3149; --teal-soft: #6E2338; --on-accent: #FFFFFF; --ink: #2A0D14; --on-ink: #FFFFFF; } /* Anything sitting on a photo keeps the dark palette in both themes */ [data-theme="light"] .media { color: var(--text); --bg: #24090F; --line: rgb(255 255 255 / .2); --text: #FFF7F9; --text-1: #F6E6EB; --text-2: #E7CFD6; --accent-ink: #F4B3C2; --teal-ink: #E9BCC8; --on-accent: #FFFFFF; } /* Richer dark: layered surfaces with a top highlight instead of 1px borders. :where() keeps specificity low so hover states still win. */ :where(:root:not([data-theme="light"])) [style*="background: var(--surface"][style*="1px solid var(--line)"] { border-color: transparent !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 14px 34px -22px rgb(0 0 0 / .7); } .home .hero { box-shadow: 0 34px 90px -46px color-mix(in srgb, var(--accent) 55%, transparent); } /* Light theme surfaces: borders stay, soft shadows add lift */ :where([data-theme="light"]) [style*="background: var(--surface"][style*="1px solid var(--line)"] { box-shadow: 0 1px 2px rgb(36 9 15 / .05), 0 10px 26px -18px rgb(36 9 15 / .22); } [data-theme="light"] .glass:not(.chip):not(.glass-light) { background: rgb(255 255 255 / .55); border-color: rgb(36 9 15 / .10); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 10px 30px -14px rgb(36 9 15 / .22); } [data-theme="light"] .tab-pill { background: color-mix(in srgb, var(--accent) 16%, rgb(255 255 255 / .6)); } [data-theme="light"] .nav { --glass-base: rgb(255 255 255 / .8); } [data-theme="light"] .glass.glass-light { border-color: rgb(36 9 15 / .08); box-shadow: 0 16px 40px -20px rgb(36 9 15 / .25); } @media (hover: hover) { [data-theme="light"] a.card:hover, [data-theme="light"] article.card:hover { box-shadow: 0 22px 44px -22px rgb(36 9 15 / .35); border-color: rgb(36 9 15 / .18) !important; } [data-theme="light"] .btn-ghost:hover { border-color: rgb(36 9 15 / .3) !important; } } [data-theme="light"] .menu-btn { border-color: rgb(36 9 15 / .14); background: rgb(36 9 15 / .04); } @media (max-width: 1100px) { [data-theme="light"] .site-header { background: linear-gradient(135deg, rgb(255 255 255 / .5), rgb(255 255 255 / .2)), rgb(255 255 255 / .8) !important; border-bottom-color: rgb(36 9 15 / .08) !important; } [data-theme="light"] .menu-sheet__panel { background: linear-gradient(160deg, rgb(255 255 255 / .6), rgb(255 255 255 / .3)), rgb(255 255 255 / .86); } [data-theme="light"] .menu-sheet nav a { border-bottom-color: rgb(36 9 15 / .08); } html[data-theme="light"].menu-open #app { filter: brightness(.85); } } /* Theme toggle: the icon morphs between moon (dark) and sun (light) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 42px; height: 42px; padding: 0; border-radius: 10px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--text); } .theme-toggle svg { width: 20px; height: 20px; overflow: visible; } .tt-core, .tt-cut, .tt-rays { transform-box: fill-box; transform-origin: center; transition: transform 500ms var(--ease-out), opacity 300ms var(--ease-out); } .tt-rays { opacity: 0; transform: rotate(-90deg) scale(.5); } [data-theme="light"] .tt-core { transform: scale(.55); } [data-theme="light"] .tt-cut { transform: translate(9px, -9px); } [data-theme="light"] .tt-rays { opacity: 1; transform: none; } .theme-toggle--row { width: auto; height: auto; justify-content: flex-start; padding: 14px 16px; border-radius: 12px; font-size: 16px; font-weight: 600; } /* Display currency picker (assets/currency.js) */ .currency-select { height: 42px; padding: 0 30px 0 12px; border-radius: 10px; cursor: pointer; border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .3px; -webkit-appearance: none; appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23A8848E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center; } .currency-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .currency-select option { background: var(--surface); color: var(--text); } .currency-select--row { width: 100%; height: auto; padding: 14px 40px 14px 16px; border-radius: 12px; font-size: 16px; background-position: right 16px center; } .currency-select--float { float: right; margin-top: -4px; } /* Circular reveal from the toggle: site.js animates the clip-path on the new root snapshot; named elements are unnamed for the duration so the whole page reveals. */ html.theme-vt * { view-transition-name: none !important; } html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* --------------------------------------------------------------- Round 2 motion (design-motion-principles: Jakub primary, Jhey secondary) --------------------------------------------------------------- */ /* Photos fade in once loaded instead of popping onto their tint. site.js adds .img-fade to (so no-JS still shows images) and marks already-cached images before first paint, so re-renders never re-fade. */ html.img-fade .media-img { opacity: 0; transition: opacity 450ms var(--ease-out); } html.img-fade .media-img.is-loaded { opacity: 1; } html.img-now .media-img { transition: none; } /* Photo-to-article transition. On click the card lifts and the page dims (instant feedback); the browser's view transition then morphs the photo into the article hero at its real position. */ .xp-backdrop { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--bg); opacity: 0; transition: opacity 260ms var(--ease-out); } .xp-backdrop.is-on { opacity: .6; } #app .xp-lift { position: relative; z-index: 91; transform: translateY(-6px) scale(1.02); box-shadow: 0 26px 60px -24px rgb(0 0 0 / .7); transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); } /* On arrival, the card's cached photo waits under the hero until the hero's own loads */ .hero .media-img.is-soft { filter: blur(10px); transform: scale(1.05); } /* Quiz flash-card deck: two ghost cards peek out behind the question */ .quiz-deck { position: relative; flex: 2 1 560px; min-width: 0; margin-bottom: 24px; } .quiz-deck > main { position: relative; z-index: 1; } html.deck-next .quiz-deck > main, html.deck-back .quiz-deck > main { view-transition-name: quiz-card; } .quiz-deck::before, .quiz-deck::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; transform-origin: 50% 100%; } .quiz-deck::before { background: rgb(255 255 255 / .42); transform: translateY(12px) scale(.96); } .quiz-deck::after { background: rgb(255 255 255 / .2); transform: translateY(24px) scale(.92); } /* light theme: white on cream needs an edge to read as a card */ [data-theme="light"] .quiz-deck::before { background: #FFFFFF; box-shadow: 0 0 0 1px rgb(36 9 15 / .08), 0 8px 20px -14px rgb(36 9 15 / .3); } [data-theme="light"] .quiz-deck::after { background: #F4ECEF; box-shadow: 0 0 0 1px rgb(36 9 15 / .08), 0 8px 20px -14px rgb(36 9 15 / .25); } /* The group snaps to the new card's box; old and new images do the motion. Next: the answered card lifts off up-left, the deck advances. Back: the current card sinks into the deck, the previous one drops back on top. */ ::view-transition-group(quiz-card) { animation: none; } ::view-transition-image-pair(quiz-card) { isolation: isolate; } /* The flick: a decisive start, the card stays solid until it is mostly away, and the next card rises from exactly where the first ghost card sits. */ /* Fast: the flick is gone in a quarter second and the next card is settled by ~300ms, so answering never feels like waiting. */ html.deck-next::view-transition-old(quiz-card) { z-index: 1; transform-origin: 30% 100%; animation: card-lift 250ms cubic-bezier(.3, .4, .3, 1) both; } html.deck-next::view-transition-new(quiz-card) { animation: card-advance 300ms var(--ease-out) both; } html.deck-back::view-transition-old(quiz-card) { animation: card-sink 180ms cubic-bezier(.4, 0, .6, 1) both; } html.deck-back::view-transition-new(quiz-card) { z-index: 1; transform-origin: 30% 100%; animation: card-return 300ms var(--ease-out) both; } html.deck-next::view-transition-old(root), html.deck-next::view-transition-new(root), html.deck-back::view-transition-old(root), html.deck-back::view-transition-new(root) { animation-duration: 180ms; } @keyframes card-lift { 45% { opacity: 1; } to { transform: translate(-30%, -10%) rotate(-6deg); opacity: 0; } } @keyframes card-advance { from { transform: translateY(12px) scale(.96); } } @keyframes card-sink { to { transform: translateY(12px) scale(.96); opacity: 0; } } @keyframes card-return { from { transform: translate(-34%, -14%) rotate(-8deg); opacity: 0; } 30% { opacity: 1; } } /* Success states: the one place a blur-in earns its keep (it confirms an action). site.js adds .is-entering only the first time a confirmation appears. */ .success-check { display: inline-flex; align-items: center; justify-content: center; vertical-align: -4px; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: var(--teal); color: var(--on-accent); } .success-check svg { width: 14px; height: 14px; } [data-success].is-entering { animation: success-in 450ms var(--ease-out) both; } [data-success].is-entering .success-check { animation: check-pop 420ms var(--ease-spring) 120ms both; } [data-success].is-entering .success-check svg { animation: check-draw 320ms var(--ease-out) 260ms both; } @keyframes success-in { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } } @keyframes check-pop { from { transform: scale(.6); opacity: 0; } } @keyframes check-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* Top loading bar (site.js): trickles on the old page, finishes on the new one. Named so it rides above the header and nav during the page change. */ .top-load { position: fixed; top: 0; left: 0; z-index: 100; height: 3px; width: 100%; pointer-events: none; view-transition-name: top-load; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); } ::view-transition-group(top-load) { animation-duration: 0s; } ::view-transition-old(top-load) { animation: none; opacity: 0; } ::view-transition-new(top-load) { animation: none; } /* Quiz entry (site.js): three flash cards fly out of the tapped button and land as the deck. The real deck stays hidden until they land, then the front card dissolves into it. */ .qe-layer { position: fixed; inset: 0; z-index: 80; pointer-events: none; view-transition-name: qe-layer; } ::view-transition-group(qe-layer) { animation-duration: 0s; } ::view-transition-new(qe-layer) { animation: none; } .qe-card { position: absolute; box-sizing: border-box; border-radius: 14px; will-change: transform; } /* the two back cards look exactly like the deck's ghost cards they land as */ .qe-card--ghost1 { background: rgb(255 255 255 / .2); } .qe-card--ghost2 { background: rgb(255 255 255 / .42); } [data-theme="light"] .qe-card--ghost1 { background: #F4ECEF; box-shadow: 0 0 0 1px rgb(36 9 15 / .08), 0 8px 20px -14px rgb(36 9 15 / .25); } [data-theme="light"] .qe-card--ghost2 { background: #FFFFFF; box-shadow: 0 0 0 1px rgb(36 9 15 / .08), 0 8px 20px -14px rgb(36 9 15 / .3); } .qe-card--front { position: absolute !important; overflow: hidden; } .qe-tint { position: absolute; inset: -4px 0 0; z-index: 5; overflow: hidden; } html.qe-flying .quiz-deck { visibility: hidden; } /* --------------------------------------------------------------- Round 02 (P2): homepage first screen, guide grid, concierge grids, house ad slots --------------------------------------------------------------- */ /* The hero's primary action; the arrow sits in its own circle and nudges forward on hover. */ .hero-cta { display: flex; width: fit-content; box-sizing: border-box; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 14px 14px 22px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; } .hero-cta .cta-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: rgb(36 9 15 / .14); font-size: 17px; line-height: 1; transition: transform 180ms var(--ease-out); } @media (hover: hover) { .hero-cta:hover .cta-ico { transform: translateX(3px); } .hero-cta:hover { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 15%, transparent), 0 8px 24px -6px color-mix(in srgb, var(--accent) 60%, transparent); } } /* the colour switches at once on press, so a quick tap launches the quiz card in the pressed colour rather than halfway between the two */ .hero-cta:active { transform: scale(.97); transition: transform 120ms var(--ease-out), background-color 0s, color 0s; } @media (max-width: 760px) { .hero-cta { width: 100%; justify-content: space-between; } } /* "Best of BGC" on the home page: one tile per category (Settle in, Eat & drink, Everyday). Opening a category shows a tile for each of its lists in a full-width panel under the row on desktop (order: 1 moves the panels after all three tiles), or straight under its own tile on phones. 3 list tiles a row, then 2 on phones. */ .cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .cat-card { display: flex; flex-direction: column; min-width: 0; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color 200ms var(--ease-out); } .cat-card:hover, .cat-card[aria-expanded="true"] { border-color: var(--line-strong); } .cat-card .card-media { aspect-ratio: 16 / 9; flex: none; } .cat-card__text { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; } .cat-card h3 { font-family: 'Instrument Sans', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2; margin: 0; } .cat-card__sub { font-size: 15px; line-height: 1.4; color: var(--text-2); margin-top: 6px; } .cat-card__count { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600; color: var(--accent-ink); } .cat-card__chev { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); } .cat-card[aria-expanded="true"] .cat-card__chev { transform: rotate(180deg); } .cat-panel { grid-column: 1 / -1; order: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } /* the list tiles on best-of-bgc.html (columns set there by .guide-grid--3 / --4) */ .guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } @media (max-width: 1023px) { .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .guide-card { display: flex; flex-direction: column; min-width: 0; } .guide-card .card-media { aspect-ratio: 16 / 9; flex: none; } .guide-card__text { padding: 14px 16px 18px; } .guide-card h3 { font-size: 19px; line-height: 1.25; } .guide-card__sub { font-size: 14px; line-height: 1.4; color: var(--text-2); margin-top: 4px; } @media (max-width: 760px) { .cat-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cat-panel { order: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; } .cat-card { flex-direction: row; align-items: stretch; } .cat-card .card-media { aspect-ratio: auto; width: 34%; } .cat-card__text { padding: 12px 14px; } .cat-card h3 { font-size: 19px; } .cat-card__sub { font-size: 14px; margin-top: 2px; } .cat-card__count { padding-top: 8px; } .guide-card .card-media { aspect-ratio: 4 / 3; } .guide-card__text { padding: 10px 12px 12px; } .guide-card h3 { font-size: 16px; } .guide-card__sub { display: none; } } /* Concierge: pricing, process and ad options fill whole rows (4, then 2, then 1) */ .pricing-grid, .ads-grid, .steps-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } @media (min-width: 700px) { .pricing-grid, .ads-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .pricing-grid, .ads-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* "Most popular" sits on the card's top edge, so every card's name, price and list line up */ .pricing-grid > article { position: relative; } .pricing-grid .chip-popular { position: absolute; top: -11px; left: 26px; box-shadow: 0 0 0 4px var(--bg); } @media (min-width: 600px) { .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .steps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* House ad slots: an intentional placeholder (label, line, "Advertise with us") on a faint hairline pattern, instead of a grey box with its pixel size printed on it. */ .ad-house { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 18px 0 22px; border: 1px solid var(--line); border-radius: 12px; background: repeating-linear-gradient(135deg, transparent 0 11px, rgb(255 255 255 / .025) 11px 12px), color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); text-decoration: none; text-align: left; transition: border-color 200ms var(--ease-out); } [data-theme="light"] .ad-house { background: repeating-linear-gradient(135deg, transparent 0 11px, rgb(36 9 15 / .035) 11px 12px), color-mix(in srgb, var(--surface) 70%, transparent); } .ad-house:hover { color: var(--text); border-color: var(--line-strong); } .site-header .ad-house--banner { flex: 0 1 728px; min-width: 0; height: 90px; } .ad-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ad-house .ad-label { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-3); } .ad-house .ad-line { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); } .ad-pill { display: inline-flex; align-items: center; flex: none; white-space: nowrap; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text); transition: border-color 200ms var(--ease-out); } .ad-pill__arrow { display: inline-block; margin-left: 6px; transition: transform 180ms var(--ease-out); } @media (hover: hover) { .ad-house:hover .ad-pill { border-color: var(--accent); } .ad-house:hover .ad-pill__arrow { transform: translateX(2px); } } /* The sidebar slot stacks: label, line, pill. Compact, so the whole sidebar (At a glance, newsletter, this) fits under the sticky nav on a 800px-tall screen. */ .ad-house--box { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 18px 20px; border-radius: 14px; } .ad-house--box .ad-pill { margin-top: 4px; } /* the in-content copy is phones only (the header slot is hidden there) */ .ad-house.mobile-ad { display: none; } @media (max-width: 760px) { .ad-house.mobile-ad { display: flex; } } @media (max-width: 420px) { .mobile-ad.ad-house { padding: 0 14px 0 16px; gap: 10px; } .mobile-ad .ad-pill__more { display: none; } } /* --------------------------------------------------------------- Round 02 (P3): guide rows that read like a product, and a sidebar that stays with you --------------------------------------------------------------- */ /* One row per pick: rank, content, actions. The price is a line in the content (like "Known for:"), Save is a compact toggle, the source a quiet text link. */ .rank-item { padding: 24px 0; border-bottom: 1px solid var(--line); } .rank-item > .rank-num { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--accent-ink); font-variant-numeric: tabular-nums; } .rank-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } /* the number inside the heading: read by screen readers everywhere, shown on phones */ .rank-num--inline { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rank-meta { font-size: 14px; color: var(--text-2); margin-top: 6px; } .rank-price { font-size: 15px; margin-top: 8px; color: var(--text); } .rank-price .k { color: var(--accent-ink); font-weight: 700; } .rank-src { font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none; } .rank-src:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .rank-src--meta { display: none; } .rank-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .btn-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-width: 96px; box-sizing: border-box; padding: 0 16px 0 13px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; } .btn-save .save-ico { width: 18px; height: 18px; flex: none; overflow: visible; } .btn-save .save-ico path { fill: transparent; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; transition: fill 150ms var(--ease-out), stroke 150ms var(--ease-out); } .btn-save.is-on { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); } .btn-save.is-on .save-ico path { fill: var(--accent); stroke: var(--accent); } @media (hover: hover) { .btn-save:hover { border-color: var(--line-strong); } .btn-save.is-on:hover { border-color: var(--accent); } } /* the save is a fresh node after the re-render, so the colour change plays as a 150ms animation */ .btn-save.pop .save-ico path { animation: save-fill 150ms var(--ease-out); } .btn-save.unpop .save-ico path { animation: save-unfill 150ms var(--ease-out); } @keyframes save-fill { from { fill: transparent; stroke: currentColor; } } @keyframes save-unfill { from { fill: var(--accent); stroke: var(--accent); } } /* Top pick keeps its highlight and accent edge; the highlight grows outward so the rank and content columns stay aligned with every other row. */ .rank-item--top { --top-pad: 20px; margin-inline: calc(-1 * var(--top-pad)); padding-inline: var(--top-pad); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); border-radius: 0 12px 12px 0; } @media (min-width: 900px) { .rank-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 24px; align-items: start; } } @media (max-width: 899px) { .rank-item { position: relative; padding-block: 20px; } .rank-item > .rank-num { display: none; } .rank-num--inline { position: relative; width: auto; height: auto; overflow: visible; clip-path: none; display: inline-block; margin-right: 10px; font-size: 28px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; } .rank-head { padding-right: 52px; } .rank-src--meta { display: inline; margin-left: 8px; } .rank-src--meta::before { content: "· "; color: var(--text-3); } .rank-actions { position: absolute; top: 14px; right: 0; } .rank-actions .rank-src { display: none; } .rank-item--top { --top-pad: 12px; } .rank-item--top .rank-actions { right: var(--top-pad); } .btn-save { width: 44px; height: 44px; min-width: 0; padding: 0; } .btn-save .save-ico { width: 20px; height: 20px; } .btn-save .save-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* "More guides" lives under the list now, as a compact link grid */ .more-guides { margin-top: 40px; } .more-guides__title { font-family: var(--display); font-size: 22px; letter-spacing: -0.3px; margin: 0 0 6px; } .more-guides__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } .more-guides__grid a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--text); text-decoration: none; } .more-guides__grid a:hover { color: var(--text); } .more-guides__arrow { color: var(--text-2); transition: transform 180ms var(--ease-out), color 180ms var(--ease-out); } @media (hover: hover) { .more-guides__grid a:hover .more-guides__arrow { transform: translateX(3px); color: var(--accent-ink); } } @media (max-width: 760px) { .more-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } } /* The sidebar (At a glance, newsletter, ad) follows you down the list on tall-enough desktop screens, just under the sticky nav, so "Your saved list" is in view when you save. */ @media (min-width: 1024px) and (min-height: 760px) { .article-aside { position: sticky; top: 72px; align-self: flex-start; } } /* --------------------------------------------------------------- Round 02 (P4): quiz ergonomics and a results screen that lands --------------------------------------------------------------- */ /* "Pick all that apply": every option carries a tick box; single-pick steps show nothing extra */ .option--multi { position: relative; padding-right: 54px !important; } .opt-check { position: absolute; top: 16px; right: 16px; box-sizing: border-box; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line-strong); background: var(--opt); display: flex; align-items: center; justify-content: center; color: var(--on-accent); transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out); } .opt-check svg { width: 14px; height: 14px; opacity: 0; } .option.is-on .opt-check { background: var(--accent); border-color: var(--accent); } .option.is-on .opt-check svg { opacity: 1; } .opt-check.pop { animation: check-pop 420ms var(--ease-spring); } .opt-check.pop svg { animation: check-draw 260ms var(--ease-out) 80ms both; } /* Phones, multi-pick step: Back / Next ride along at the bottom of the screen */ @media (max-width: 760px) { .quiz-actions.is-multi { position: sticky; bottom: 12px; z-index: 2; margin: 24px -10px 0 !important; padding: 10px; background: var(--surface); border-radius: 12px; border-top: 1px solid var(--line); box-shadow: 0 -10px 28px -14px rgb(36 9 15 / .28), 0 6px 18px -10px rgb(36 9 15 / .2); } } /* Result rows: a neighborhood photo with the match on a glass chip */ .res-photo { display: block; flex: 0 0 96px; width: 96px; height: 72px; border-radius: 10px; } .res-match { position: absolute; left: 6px; bottom: 6px; z-index: 1; padding: 3px 7px; border-radius: 999px; white-space: nowrap; font-size: 11px; font-weight: 700; line-height: 1.2; color: #FFFFFF; font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .res-card { padding: 12px 12px 16px !important; gap: 12px !important; } .res-photo { flex: 1 1 100%; width: 100%; height: auto; aspect-ratio: 16 / 9; } .res-match { left: 10px; bottom: 10px; font-size: 12px; padding: 4px 9px; } .res-text { padding: 0 4px; } } /* Dealt in once when the plan first appears (html.deal, set by site.js for 1.4s) */ html.deal .res-card { animation: deal-in 380ms var(--ease-out) both; animation-delay: calc(100ms + var(--i, 0) * 80ms); } html.deal .res-step { animation: deal-rise 320ms var(--ease-out) both; animation-delay: calc(420ms + var(--i, 0) * 40ms); } @keyframes deal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } } @keyframes deal-rise { from { opacity: 0; transform: translateY(8px); } } /* --------------------------------------------------------------- Phase 7: warm editorial redesign Flat paper surfaces instead of glass, big regular-weight headlines, mono labels, pill buttons and larger, softer corners. Pages keep their inline layout; these rules restyle it. --------------------------------------------------------------- */ body { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); } /* No drifting blobs: the page is plain paper (cream, or burgundy in the dark) */ .ambient { display: none; } /* Headlines: the display face at a regular weight with tight tracking */ [style*="'Instrument Sans', sans-serif"] { font-weight: 500 !important; letter-spacing: -0.025em !important; } .hero-title { font-size: clamp(40px, 5.4vw, 72px) !important; line-height: 1.02 !important; letter-spacing: -0.04em !important; font-weight: 450 !important; text-wrap: balance; } h2[style*="'Instrument Sans'"] { text-wrap: balance; } p { text-wrap: pretty; } /* The wordmark: sans "Live", serif italic "BGC" */ a[aria-label="LiveBGC home"] > span > span, .menu-sheet__top a > span > span { font-family: var(--serif); font-style: italic; font-weight: 400 !important; letter-spacing: -0.01em; padding-left: .04em; } a[aria-label="LiveBGC home"] > span { letter-spacing: -0.045em !important; } /* Small caps labels become mono */ [style*="text-transform: uppercase"], .eyebrow, .ad-label { font-family: var(--mono) !important; font-weight: 500 !important; letter-spacing: .08em !important; } /* Top strip and header: quiet paper, no gradients */ .topbar { background: transparent !important; border-bottom: 0 !important; } .site-header { background: transparent !important; } .ad-slot { border-radius: 16px !important; border-style: dashed !important; background: transparent !important; } /* Nav: a flat bar with a hairline, frosted only once it sticks over content */ .nav.glass { --glass-base: color-mix(in srgb, var(--bg) 88%, transparent); } .nav-link { color: var(--text-1) !important; } .nav-link:hover, .nav-link.is-current { color: var(--text) !important; } .nav-link::after { height: 1.5px; bottom: 12px; } /* Buttons: pills. Primary is ink (espresso / cream), the accent is kept for small moments */ .btn, .mobile-cta, .menu-sheet__cta { border-radius: 999px !important; } .btn-primary, .mobile-cta, .menu-sheet__cta { background: var(--ink) !important; color: var(--on-ink) !important; border: 0 !important; font-weight: 500 !important; letter-spacing: -0.005em; } .btn-primary:hover, .mobile-cta:hover, .menu-sheet__cta:hover { color: var(--on-ink) !important; } @media (hover: hover) { .btn-primary:hover { background: var(--accent) !important; color: var(--on-accent) !important; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent) !important; } .btn-ghost:hover, [data-theme="light"] .btn-ghost:hover { border-color: var(--text) !important; } } .btn-ghost { border-color: var(--line-strong) !important; background: transparent !important; } .btn { transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out); } .theme-toggle, .currency-select { border-radius: 999px; border-color: var(--line-strong); } .menu-btn { border-radius: 999px; } input[type="email"], input[type="text"], input:not([type]), textarea, select:not(.currency-select) { border-radius: 14px !important; } /* Corners: cards and panels get softer, larger radii */ [style*="border-radius: 14px"] { border-radius: 22px !important; } [style*="border-radius: 18px"] { border-radius: 24px !important; } [style*="border-radius: 12px"] { border-radius: 16px !important; } ::view-transition-group(*.guide-photo) { border-radius: 22px; } /* Glass becomes paper: solid surfaces, no blur, no sheen */ .glass:not(.nav):not(.chip) { background: var(--surface) !important; border: 1px solid var(--line) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } [data-theme="light"] .glass:not(.nav):not(.chip) { border-color: transparent !important; box-shadow: 0 1px 0 rgb(36 9 15 / .04), 0 18px 40px -30px rgb(36 9 15 / .35) !important; } .chip.glass { --glass-base: rgb(36 9 15 / .55); background: var(--glass-base) !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .glass.glass-light { background: #FFFFFF !important; } /* Bordered surfaces: borderless paper cards on the cream page, quiet edges in the dark */ :where([data-theme="light"]) [style*="background: var(--surface"][style*="1px solid var(--line)"] { border-color: transparent !important; box-shadow: 0 1px 0 rgb(36 9 15 / .04), 0 18px 40px -30px rgb(36 9 15 / .35); } :where(:root:not([data-theme="light"])) [style*="background: var(--surface"][style*="1px solid var(--line)"] { border-color: rgb(255 255 255 / .06) !important; box-shadow: none; } .home .hero { box-shadow: none; } /* Cards: a gentle lift and a slow photo zoom */ @media (hover: hover) { a.card:hover, article.card:hover, [data-theme="light"] a.card:hover, [data-theme="light"] article.card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgb(36 9 15 / .45) !important; border-color: transparent !important; } a.card:hover .media-img { transform: scale(1.04); } } .card .media-img { transition: transform 900ms var(--ease-out); } /* Ranked lists: big light numerals in terracotta, no gradient */ .rank-num { background: none; -webkit-text-fill-color: currentColor; color: var(--accent-ink); font-weight: 400 !important; letter-spacing: -0.05em !important; } .rank-num::after { display: none; } /* Photos: warm, deeper scrims so white text sits well on bright images */ .media::after { background: linear-gradient(rgba(36, 9, 15, var(--shade-a, 0)), rgba(36, 9, 15, var(--shade-b, 0))); } /* Mobile header: same paper bar as the desktop nav */ @media (max-width: 1100px) { .site-header, [data-theme="light"] .site-header { background: color-mix(in srgb, var(--bg) 90%, transparent) !important; -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line) !important; } .menu-sheet__panel, [data-theme="light"] .menu-sheet__panel { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } .menu-sheet nav a, [data-theme="light"] .menu-sheet nav a { font-family: var(--display); font-weight: 450; letter-spacing: -0.03em; font-size: 30px; border-bottom-color: var(--line); } } /* The quiz deck's ghost cards and flying cards pick up the warm paper */ .quiz-deck::before, .qe-card--ghost2 { background: rgb(255 247 249 / .4); } .quiz-deck::after, .qe-card--ghost1 { background: rgb(255 247 249 / .18); } [data-theme="light"] .quiz-deck::before, [data-theme="light"] .qe-card--ghost2 { background: #FFFFFF; box-shadow: 0 0 0 1px rgb(36 9 15 / .06), 0 8px 20px -14px rgb(36 9 15 / .3); } [data-theme="light"] .quiz-deck::after, [data-theme="light"] .qe-card--ghost1 { background: #F7EEF1; box-shadow: 0 0 0 1px rgb(36 9 15 / .06), 0 8px 20px -14px rgb(36 9 15 / .25); } .top-load { background: var(--accent); box-shadow: none; } /* Section headings scale up; card titles stay as they are */ h2[style*="font-size: 30px"], h2[style*="font-size: 32px"], h2[style*="font-size: 34px"], h2[style*="font-size: 38px"] { font-size: clamp(30px, 3.6vw, 46px) !important; line-height: 1.06 !important; letter-spacing: -0.035em !important; } /* House ad slots: a dashed placeholder on bare paper */ .ad-house, [data-theme="light"] .ad-house { background: transparent; border: 1px dashed var(--line-strong); border-radius: 18px; } .ad-house .ad-line { font-weight: 500; letter-spacing: -0.01em; } .ad-pill { border-color: var(--line-strong); font-weight: 500; } /* The hero's call to action. On hover (and on press, for touch) it takes the colour of the quiz card it opens into, so the card that flies out of it never changes colour: light theme, burgundy at rest and white when pressed (the quiz card is white); dark theme, white at rest and burgundy when pressed (the quiz card is burgundy). */ .hero-cta.btn-primary { background: #FFF7F9 !important; color: #24090F !important; font-weight: 500 !important; } .hero-cta .cta-ico { background: #24090F; color: #FFF7F9; } .hero-cta:active.btn-primary { background: var(--accent) !important; color: #FFFFFF !important; box-shadow: none !important; } .hero-cta:active .cta-ico { background: #FFF7F9; color: var(--accent); } [data-theme="light"] .hero-cta.btn-primary { background: var(--accent) !important; color: #FFFFFF !important; } [data-theme="light"] .hero-cta .cta-ico { background: #FFF7F9; color: var(--accent); } [data-theme="light"] .hero-cta:active.btn-primary { background: #FFFFFF !important; color: #24090F !important; } [data-theme="light"] .hero-cta:active .cta-ico { background: var(--accent); color: #FFFFFF; } @media (hover: hover) { .hero-cta:hover.btn-primary { background: var(--accent) !important; color: #FFFFFF !important; box-shadow: none !important; } .hero-cta:hover .cta-ico { background: #FFF7F9; color: var(--accent); } [data-theme="light"] .hero-cta:hover.btn-primary { background: #FFFFFF !important; color: #24090F !important; } [data-theme="light"] .hero-cta:hover .cta-ico { background: var(--accent); color: #FFFFFF; } } /* Guide grid: the feature tile's title uses the light display weight too */ .guide-card--feature h3 { font-weight: 500 !important; font-size: 30px; letter-spacing: -0.035em !important; } /* Ranked rows (round 02 markup): light terracotta numerals, display-face titles */ .rank-item > .rank-num, .rank-num--inline { font-family: var(--display); font-weight: 400; letter-spacing: -0.05em; } .rank-price .k { font-weight: 600; } .rank-item--top { border-radius: 0 18px 18px 0; } .more-guides__title { font-family: var(--display); font-weight: 500; letter-spacing: -0.03em; font-size: 26px; } /* --------------------------------------------------------------- Phase 8: one-row header and a full-bleed homepage Desktop: links | centred wordmark | actions in one slim bar (the old top strip and header row are gone). Phones keep the compact .site-header bar and the menu sheet. --------------------------------------------------------------- */ .nav-row { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; height: 68px; padding: 0 32px; max-width: 1480px; margin: 0 auto; font-size: 14.5px; font-weight: 500; } .nav-links { display: flex; align-items: center; gap: 22px; min-width: 0; white-space: nowrap; } .nav-links .nav-link { padding: 24px 0 !important; } .nav-logo { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; } .nav-logo svg { width: 28px; height: 28px; } .nav-logo > span { font-size: 27px !important; } .nav-logo:hover { color: var(--text); } .nav-actions { justify-self: end; display: flex; align-items: center; gap: 8px; } /* Newsletter reads as a quiet text link next to the pill, like a "Log in" */ .nav-actions .btn-ghost { border-color: transparent !important; padding: 10px 12px !important; } .nav-actions .btn-primary { padding: 11px 20px !important; } .nav-actions .theme-toggle, .nav-actions .currency-select { height: 40px; } .nav-actions .theme-toggle { width: 40px; } /* desktop: the nav pill replaces the compact header, except on pages with no nav (Start here) */ @media (min-width: 1101px) { .site-header:not(.site-header--solo) { display: none !important; } } /* the header banner went with the header row; the in-page banner carries the slot */ @media (min-width: 761px) { .ad-house.mobile-ad { display: flex; height: 90px; margin: 0 0 28px; } } /* Header: wordmark on the left so eleven tabs get the row (a centred wordmark only fits about seven). Under 1101px the compact bar and menu sheet take over; between, the least-used links step out as it narrows (every page is still in the sheet and footer). */ .nav-row { display: flex; gap: 28px; } .nav-logo { order: -1; flex: none; } .nav-links { flex: 1 1 auto; min-width: 0; gap: 20px; } .nav-actions { flex: none; margin-left: auto; } @media (max-width: 1240px) { .nav-actions .btn-ghost { display: none; } } /* Homepage stage: a near full-bleed photo panel, headline left, three stats along the foot */ .hero-stage { padding: 4px 12px 0; } .hero--stage { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: min(84vh, 820px); border-radius: 24px; overflow: hidden; box-shadow: none !important; } .hero--stage::after { /* a soft dark side and foot, so the left-hand copy and the stats read on any photo */ background: linear-gradient(90deg, rgb(36 9 15 / .8), rgb(36 9 15 / .55) 45%, rgb(36 9 15 / .08) 78%), linear-gradient(0deg, rgb(36 9 15 / .7), transparent 38%); } .hero-body { margin: auto 0; padding: 96px clamp(24px, 5vw, 72px) 48px; max-width: 640px; } .hero-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #FFF7F9; } .hero-check svg { width: 16px; height: 16px; } .hero--stage .hero-title { font-size: clamp(44px, 6.4vw, 92px) !important; color: #FFF7F9; } .hero-sub { margin: 0; max-width: 470px; font-size: 18px; line-height: 1.5; color: rgb(255 247 249 / .82); } .hero--stage .hero-cta { margin-top: 30px; padding: 12px 12px 12px 24px; font-size: 16px; } .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 0; padding: 0 clamp(24px, 5vw, 72px) 34px; } .hero-stats > div { display: flex; flex-direction: column; gap: 3px; padding: 0 22px; border-left: 1px solid rgb(255 247 249 / .28); } .hero-stats > div:first-child { padding-left: 0; border-left: 0; } .hero-stats b { font-weight: 500; font-size: 15px; color: #FFF7F9; } .hero-stats span { font-size: 13.5px; color: rgb(255 247 249 / .66); } /* A quiet line of the sources we check picks against */ .proof-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 36px; max-width: 1200px; margin: 0 auto; padding: 44px 20px 36px; box-sizing: border-box; } .proof-label { font-size: 14px; color: var(--text-2); } .proof-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 40px; } .proof-names span { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--text-3); opacity: .8; letter-spacing: -0.01em; } /* Centred section intro, as in "How it works" */ .section-intro { text-align: center; margin: 56px auto 32px; max-width: 640px; } .section-intro p { margin: 10px 0 0; font-size: 16px; color: var(--text-2); } /* Four numbered steps: photo on top, plain text underneath (no card box) */ .step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .step-card { display: block; color: var(--text); text-decoration: none; } .step-card:hover { color: var(--text); } .step-media { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; } .step-media .media-img { transition: transform 900ms var(--ease-out); } @media (hover: hover) { .step-card:hover .step-media .media-img { transform: scale(1.04); } } .step-num, .step-chip { position: absolute; top: 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgb(255 247 249 / .22); color: #FFF7F9; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--mono); font-size: 12px; font-weight: 500; } .step-num { left: 12px; width: 26px; height: 26px; } .step-chip { right: 12px; height: 26px; padding: 0 10px; border-radius: 999px; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; } .step-card h3 { margin: 16px 0 4px; font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; } .step-card p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-2); max-width: 30ch; } /* Section heads lose their rule; the space does the separating */ main [style*="border-bottom: 1px solid var(--line); padding-bottom: 12px"] { border-bottom: 0 !important; padding-bottom: 0 !important; } @media (max-width: 1023px) { .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } .step-media { aspect-ratio: 4 / 3; } } @media (max-width: 760px) { .hero-stage { padding: 8px 8px 0; } .hero--stage { min-height: 560px; border-radius: 20px; } .hero--stage::after { background: linear-gradient(0deg, rgb(36 9 15 / .85), rgb(36 9 15 / .45) 60%, rgb(36 9 15 / .15)); } .hero-body { padding: 72px 20px 24px; } .hero-stats { grid-template-columns: 1fr; gap: 10px; padding: 0 20px 24px; } .hero-stats > div { padding: 0; border-left: 0; flex-direction: row; gap: 8px; align-items: baseline; } .proof-names span { font-size: 21px; } .proof-names { gap: 8px 24px; } .section-intro { margin-top: 40px; } .step-grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; } .step-card h3 { font-size: 17px; } .step-card p { font-size: 14px; } } /* Guide grid: the same open style as the steps (rounded photo, text underneath, no box) */ .guide-card[style] { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; } .guide-card .card-media { border-radius: 18px; overflow: hidden; } .guide-card__text { padding: 14px 2px 0 !important; } @media (hover: hover) { a.guide-card:hover, [data-theme="light"] a.guide-card:hover { transform: none; box-shadow: none !important; } } .guide-grid { row-gap: 32px; } /* "For one": the estimated cost line on list rows */ .rank-cost__basis { color: var(--text-2); font-size: 14px; } /* Nav dropdowns (Shopping, Wellness): a small paper card under the tab */ .nav-menu { position: relative; display: flex; align-items: center; } .nav-menu__btn { display: inline-flex; align-items: center; gap: 5px; padding: 24px 0 !important; border: 0; background: none; font: inherit; color: var(--text-1); cursor: pointer; } .nav-menu__chev { width: 12px; height: 12px; transition: transform 200ms var(--ease-out); } .nav-menu__panel { position: absolute; top: calc(100% - 6px); left: -18px; z-index: 20; display: flex; flex-direction: column; gap: 2px; min-width: 260px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 48px -24px rgb(36 9 15 / .35); opacity: 0; visibility: hidden; translate: 0 -4px; transition: opacity 180ms var(--ease-out), translate 180ms var(--ease-out), visibility 0s linear 180ms; } .nav-menu.is-open .nav-menu__panel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; } .nav-menu.is-open .nav-menu__chev { transform: rotate(180deg); } @media (hover: hover) { .nav-menu.is-hover .nav-menu__panel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; } .nav-menu.is-hover .nav-menu__chev { transform: rotate(180deg); } } .nav-sub { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; color: var(--text); text-decoration: none; white-space: normal; } .nav-sub b { font-weight: 500; font-size: 15px; } .nav-sub span { font-size: 13px; color: var(--text-2); } .nav-sub:hover, .nav-sub[aria-current="page"] { background: var(--surface-2); color: var(--text); } .nav-sub[aria-current="page"] b { color: var(--accent-ink); } .nav-links { overflow: visible !important; } /* A list that is still being chosen: a note and three faded placeholder rows */ .list-empty { margin-top: 16px; border: 1px dashed var(--line-strong); border-radius: 22px; padding: 28px clamp(20px, 4vw, 36px) 12px; } .list-empty__tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--teal) 16%, transparent); color: var(--teal-ink); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .list-empty h2 { margin: 14px 0 6px; font-family: var(--display); font-weight: 500; font-size: 26px; letter-spacing: -0.025em; } .list-empty p { margin: 0; font-size: 16px; color: var(--text-2); } .list-empty__ghosts { margin-top: 18px; } .ghost-row { display: flex; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); } .ghost-num { flex: 0 0 56px; font-family: var(--display); font-size: 44px; line-height: 1; letter-spacing: -0.05em; color: var(--line-strong); } .ghost-lines { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; } .ghost-lines i { display: block; height: 12px; border-radius: 6px; background: var(--surface-2); } .ghost-lines i:nth-child(1) { width: 38%; height: 18px; background: var(--line); } .ghost-lines i:nth-child(2) { width: 82%; } .ghost-lines i:nth-child(3) { width: 64%; } .ghost-row:nth-child(2) { opacity: .7; } .ghost-row:nth-child(3) { opacity: .4; } @media (max-width: 760px) { .ghost-num { flex-basis: 40px; font-size: 32px; } .ghost-row { gap: 16px; } } /* Forms: shown by LBGC_send only when Netlify did not accept the submission */ .form-error { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--accent-ink); } .form-error[hidden] { display: none; } /* Thank-you page (thanks.html): one confirmation, then where to go next */ .thanks { max-width: 680px; margin: 0 auto; padding: clamp(48px, 10vh, 112px) 20px 24px; text-align: center; } .thanks .success-check { width: 56px; height: 56px; margin: 0 0 24px; vertical-align: 0; } .thanks .success-check svg { width: 30px; height: 30px; } .thanks h1 { margin: 0 0 14px; font-family: var(--display); font-weight: 500; font-size: clamp(36px, 6vw, 56px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; } .thanks p { margin: 0 auto; max-width: 520px; font-size: 17px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; } .thanks__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; } .thanks__actions .btn { padding: 14px 24px; text-decoration: none; font-weight: 600; } .thanks__actions .btn-ghost { border: 1px solid var(--line-strong); color: var(--text); } .thanks__next { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); } .thanks__next h2 { margin: 0 0 14px; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); } .thanks__next div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 15px; } .thanks__next a { color: var(--text); } /* Quiz in both themes: option cards and chips come from the palette, so dark mode gets light text on burgundy instead of the old fixed dark-on-white colours */ :root { --opt: var(--surface); --opt-on: color-mix(in srgb, var(--accent) 10%, var(--surface)); } :root:not([data-theme="light"]) { --opt: var(--surface-2); --opt-on: color-mix(in srgb, var(--accent) 22%, var(--surface)); } :root:not([data-theme="light"]) .quiz-deck::before, :root:not([data-theme="light"]) .qe-card--ghost2 { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); } :root:not([data-theme="light"]) .quiz-deck::after, :root:not([data-theme="light"]) .qe-card--ghost1 { background: color-mix(in srgb, var(--surface) 40%, var(--bg)); } /* --------------------------------------------------------------- Phase 9: the nav is a floating liquid-glass pill Three grouped menus (Settle in, Eat & drink, Everyday) + Watch and Concierge. The glass sits on .nav-row::before, not on .nav-row: an element with backdrop-filter stops its children from blurring the page, and the dropdown panels need their own frost. --------------------------------------------------------------- */ :root { --pill-tint: color-mix(in srgb, var(--surface) 52%, transparent); --pill-edge: rgb(255 255 255 / .16); --pill-hi: rgb(255 255 255 / .14); --pill-shadow: 0 10px 30px -14px rgb(0 0 0 / .6), 0 2px 6px -2px rgb(0 0 0 / .3); --pill-hover: rgb(255 255 255 / .08); /* one glass for the pill, its dropdowns and the search card, so they always match. The sheen is in pixels: a tall card gets the same highlight band as the 60px pill. */ --pill-fill: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 28px), var(--pill-tint); --pill-frost: blur(16px) saturate(190%); --pill-ring: inset 0 1px 0 var(--pill-hi), inset 0 -1px 1px rgb(255 255 255 / .06), var(--pill-shadow); } :root[data-theme="light"] { --pill-tint: color-mix(in srgb, #FFFFFF 58%, transparent); --pill-edge: rgb(36 9 15 / .08); --pill-hi: rgb(255 255 255 / .9); --pill-shadow: 0 12px 32px -16px rgb(74 22 36 / .35), 0 2px 6px -2px rgb(74 22 36 / .12); --pill-hover: rgb(36 9 15 / .06); } /* the bar itself disappears; only the pill floats */ .nav { padding: 12px 16px 0; } /* the light theme's .glass fill would paint the full-width bar behind the pill */ .nav.glass { background: none !important; border: 0 !important; box-shadow: none !important; } .nav::before, .nav::after { display: none !important; } .nav > div { animation: none !important; } .nav-row { position: relative; isolation: isolate; max-width: 1240px; height: 60px; padding: 0 10px 0 22px; gap: 20px; border-radius: 999px; } /* the glass: tint, frost, a bright top edge and a soft lower rim, like a lens */ .nav-row::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--pill-fill); -webkit-backdrop-filter: var(--pill-frost); backdrop-filter: var(--pill-frost); border: 1px solid var(--pill-edge); box-shadow: var(--pill-ring); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav-row::before { background: var(--surface); } } .nav-logo { order: 0; } .nav-logo svg { width: 26px; height: 26px; } .nav-logo > span { font-size: 25px !important; } .nav-links { gap: 2px; justify-content: center; } .nav-links .nav-link, .nav-menu__btn { padding: 9px 14px !important; border-radius: 999px; transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out); } .nav-links .nav-link { text-decoration: none; color: var(--text-1); } .nav-links .nav-link::after { display: none; } .nav-links .nav-link:hover, .nav-menu.is-open .nav-menu__btn { background: var(--pill-hover); } /* where you are: a small inset pill behind the link or its group */ .nav-links .nav-link.is-current { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text) !important; } .nav-links .nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .nav-actions { gap: 6px; } .nav-actions .btn-primary { padding: 10px 18px !important; } /* Dropdowns: a frosted card that grows from its tab. Opened often, so fast (160ms in, 110ms out). */ .nav-menu__panel { top: calc(100% + 14px); left: -12px; min-width: 0; width: 500px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 8px; border-radius: 24px; border: 1px solid var(--pill-edge); background: var(--pill-fill); -webkit-backdrop-filter: var(--pill-frost); backdrop-filter: var(--pill-frost); box-shadow: var(--pill-ring); transform-origin: 40px 0; translate: 0 0; transform: translateY(-4px) scale(.97); transition: opacity 110ms var(--ease-out), transform 110ms var(--ease-out), visibility 0s linear 110ms; } /* a menu closed by pointing at another tab goes at once (site.js), so two cards never stack */ .nav-menu.is-snap .nav-menu__panel, .nav-menu.is-snap .nav-menu__chev { transition: none !important; } /* the gap between tab and card stays hoverable */ .nav-menu__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .nav-menu.is-open .nav-menu__panel { transform: none; translate: 0 0; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s; } @media (hover: hover) { .nav-menu.is-hover .nav-menu__panel { transform: none; translate: 0 0; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s; } } .nav-sub { border-radius: 16px; padding: 11px 14px; } .nav-sub:hover { background: var(--pill-hover); } .nav-sub[aria-current="page"] { background: color-mix(in srgb, var(--accent) 12%, transparent); } @media (prefers-reduced-motion: reduce) { .nav-menu__panel, .nav-menu.is-open .nav-menu__panel { transform: none; transition: opacity 120ms linear, visibility 0s linear 120ms; } .nav-menu.is-open .nav-menu__panel, .nav-menu.is-hover .nav-menu__panel { transition: opacity 120ms linear, visibility 0s; } .nav-links .nav-link, .nav-menu__btn { transition: none; } } /* Best of BGC: the two hub links on top, then every list in three columns by group */ .nav-menu__panel--best { width: 600px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .nav-menu__top { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } .nav-col { display: flex; flex-direction: column; min-width: 0; } .nav-col__h { padding: 10px 14px 4px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); } .nav-col .nav-sub { padding: 8px 14px; } .nav-col .nav-sub b { font-size: 14px; } .nav-col .nav-sub span { display: none; } /* Phones and tablets: the compact header floats as the same pill */ @media (max-width: 1100px) { .site-header, [data-theme="light"] .site-header { background: none !important; border: 0 !important; padding: 10px 12px 0; -webkit-backdrop-filter: none; backdrop-filter: none; } .site-header > div { position: relative; isolation: isolate; height: 56px !important; padding: 0 8px 0 16px !important; border-radius: 999px; } .site-header > div::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--pill-fill); -webkit-backdrop-filter: var(--pill-frost); backdrop-filter: var(--pill-frost); border: 1px solid var(--pill-edge); box-shadow: var(--pill-ring); } .menu-btn { width: 42px; height: 42px; flex-basis: 42px; border-radius: 999px; border-color: var(--pill-edge); background: var(--pill-hover); } .menu-btn span { left: 12px; right: 12px; } .menu-btn span:nth-child(1) { top: 14px; } .menu-btn span:nth-child(2) { top: 20px; } .menu-btn span:nth-child(3) { top: 26px; } /* menu sheet: group names over their pages */ .menu-sheet__group { margin: 22px 0 2px; padding: 0 4px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); } .menu-sheet nav a, [data-theme="light"] .menu-sheet nav a { font-size: 24px; padding: 11px 4px; } html.menu-open .menu-sheet__group { animation: menu-item 400ms var(--ease-out) both; animation-delay: calc(160ms + var(--i, 0) * 40ms); } } /* Start here keeps its own header (logo + Back to home) on every screen, as the same pill */ .site-header--solo { position: sticky; top: 0; z-index: 6; background: none !important; border: 0 !important; padding: 12px 16px 0; } .site-header--solo > div { position: relative; isolation: isolate; box-sizing: border-box; max-width: 1240px !important; height: 60px; padding: 0 10px 0 22px !important; border-radius: 999px; flex-wrap: nowrap !important; } .site-header--solo > div::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--pill-fill); -webkit-backdrop-filter: var(--pill-frost); backdrop-filter: var(--pill-frost); border: 1px solid var(--pill-edge); box-shadow: var(--pill-ring); } .site-header--solo a[aria-label="LiveBGC home"] svg { width: 26px; height: 26px; } .site-header--solo a[aria-label="LiveBGC home"] > span { font-size: 25px !important; } .site-header__back { margin-left: auto; padding: 9px 16px !important; border-radius: 999px; font-weight: 500; color: var(--text) !important; text-decoration: none; transition: background-color 150ms var(--ease-out); } .site-header__back:hover { background: var(--pill-hover); } .site-header__back { white-space: nowrap; } .site-header--solo a[aria-label="LiveBGC home"] { flex: none; } .site-header__short { display: none; } @media (max-width: 480px) { .site-header__long { display: none; } .site-header__short { display: inline; } .site-header__back { padding: 9px 12px !important; } } /* Cost of living results (cost-of-living.html): a hero total, then one bar per line, largest first. Solid to the low estimate, faint up to the high one. One hue, no legend needed beyond the key; values sit in text colour beside each bar. */ .col-total { margin: 10px 0 6px; font-family: var(--display); font-weight: 500; font-size: clamp(30px, 8vw, 60px); line-height: 1; white-space: nowrap; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .col-total__sub { margin: 0; font-size: 17px; color: var(--text-2); } .col-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 16px; font-size: 13px; color: var(--text-2); } .col-key__lo, .col-key__hi { display: inline-block; width: 14px; height: 8px; border-radius: 4px; background: var(--accent); } .col-key__hi { margin-left: 10px; background: color-mix(in srgb, var(--accent) 28%, transparent); } .col-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .col-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .col-row__label { font-size: 16px; font-weight: 600; } .col-row__val { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .col-row__track { position: relative; height: 10px; margin: 8px 0 6px; } .col-row__lo, .col-row__hi { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; } .col-row__hi { background: color-mix(in srgb, var(--accent) 28%, transparent); } .col-row__lo { background: var(--accent); } .col-row__note { font-size: 13px; color: var(--text-2); } .col-onetime { margin-top: 28px; padding: 18px 20px; border-radius: 16px; background: var(--surface-2); } .col-onetime p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); } .col-sources { margin-top: 28px; font-size: 14px; color: var(--text-2); } .col-sources summary { cursor: pointer; font-weight: 600; color: var(--text); } .col-sources ul { margin: 12px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; } .col-sources p { margin: 0; } /* the bars grow in once, together, from the left: it is the answer arriving */ @media (prefers-reduced-motion: no-preference) { .col-row__lo, .col-row__hi { transform-origin: left; animation: col-grow 500ms var(--ease-out) 120ms both; } } @keyframes col-grow { from { transform: scaleX(0); } } /* --------------------------------------------------------------- Phase 10: search, shortlist, map, events and the new guides --------------------------------------------------------------- */ /* Nav icons: search and the shortlist, round like the theme toggle */ .nav-icon, .hdr-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; color: var(--text); text-decoration: none; transition: background-color 150ms var(--ease-out); } .nav-icon:hover, .hdr-icon:hover { background: var(--pill-hover); color: var(--text); } .nav-icon svg, .hdr-icon svg, .menu-sheet__saved svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nav-icon:focus-visible, .hdr-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* how many places are saved, from (runtime.js), so it survives re-renders */ .nav-saved::after { counter-reset: saved var(--saved, 0); content: counter(saved); position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 11px/18px var(--mono); text-align: center; } html[data-saved="none"] .nav-saved::after { display: none; } html[data-saved="some"] .nav-saved svg { fill: currentColor; } .hdr-icon { display: none; } @media (max-width: 1100px) { .hdr-icon { display: inline-flex; width: 42px; height: 42px; border-color: var(--pill-edge); background: var(--pill-hover); margin-left: auto; } } @media (max-width: 380px) { .site-header .mobile-cta { display: none !important; } } .menu-sheet__saved { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text); text-decoration: none; font-weight: 600; font-size: 16px; } /* Search: a liquid-glass card that drops out of the search icon (site.js runs the motion). Layers, bottom to top: the scrim (dims and blurs the page; a sibling of the card, never its parent, so the card's own backdrop blur still sees the page), the liquid layer (plain shapes through an SVG gooey filter, only while moving), then the real glass card. */ .search-sheet { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: min(12vh, 96px) 16px 16px; box-sizing: border-box; } .search-sheet[hidden] { display: none; } html.search-open { overflow: hidden; } /* the scrollbar's space is always kept, so locking the scroll (search, menu) never shifts the page sideways */ html { scrollbar-gutter: stable; } .search-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 46%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .goo-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* where the liquid has to be drawn solid (WebKit), it takes the pill's tint over the page */ :root { --goo: color-mix(in srgb, var(--surface) 52%, var(--bg)); } :root[data-theme="light"] { --goo: color-mix(in srgb, #FFFFFF 58%, var(--bg)); } .search-goo { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; } /* the shapes: a mask over the glass layer, or drawn solid where that isn't supported */ .search-goo rect, #lbgc-goo-mask rect { transform-box: fill-box; transform-origin: center; transform: scale(0); } .search-goo rect { fill: var(--goo); } #lbgc-goo-mask rect { fill: #fff; } /* the nav's glass itself, cut to the liquid's shape (below the icon the pill has no sheen, so the tint alone) */ .search-goo--glass { background: var(--pill-tint); -webkit-backdrop-filter: var(--pill-frost); backdrop-filter: var(--pill-frost); -webkit-mask: url(#lbgc-goo-mask); mask: url(#lbgc-goo-mask); } .search-panel { position: relative; isolation: isolate; width: 100%; max-width: 640px; max-height: min(640px, 100%); display: flex; flex-direction: column; border-radius: 28px; border: 1px solid var(--pill-edge); overflow: hidden; background: var(--pill-fill); -webkit-backdrop-filter: var(--pill-frost); backdrop-filter: var(--pill-frost); box-shadow: var(--pill-ring); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .search-panel { background: var(--surface); } } .search-bar { display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 22px; border-bottom: 1px solid var(--pill-edge); } .search-bar > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--text-2); stroke-width: 1.8; stroke-linecap: round; } .search-bar input { flex: 1; min-width: 0; height: 56px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 18px; -webkit-appearance: none; appearance: none; } .search-bar input::-webkit-search-cancel-button { display: none; } /* category filter: a pill with a native