/* =========================================================================== RED Ottawa West — public site Built from Figma "Red Ottawa West Landing Page UI (2)" → frame "Landing Page". Every value below traces to a node in that file; the brand colours and the two glass opacities come in as custom properties from the admin panel. =========================================================================== */ /* --- reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, p, figure, ul { margin: 0; } ul { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* --- tokens --------------------------------------------------------------- */ :root { /* Fallbacks only. The live values are written onto by theme.php. */ --brand: #c4122f; --brand-rgb: 196 18 47; --brand-hover: #a50e27; --ink: #ffffff; --ink-rgb: 255 255 255; --surface: #000000; --glass-fill: .03; --glass-border: .12; --font-display: "Plus Jakarta Sans", system-ui, sans-serif; --font-ui: "DM Sans", system-ui, sans-serif; /* Derived surfaces — the pill treatment shared by the header and the badge. */ --glass-bg: rgb(var(--ink-rgb) / var(--glass-fill)); --glass-line: rgb(var(--ink-rgb) / var(--glass-border)); /* Text emphasis levels, from the Figma fill opacities. */ --ink-body: rgb(var(--ink-rgb) / .75); --ink-muted: rgb(var(--ink-rgb) / .55); /* Layout rails. 1280 is the header pill; 896 is the hero content column. */ --shell: 1280px; --shell-gutter: 24px; --hero-col: 896px; } body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-display); font-size: 19px; line-height: 1.625; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Visible only to assistive tech until focused. */ .skip-link { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 12px 20px; border-radius: 10px; background: var(--brand); color: #fff; font: 600 14px/1 var(--font-ui); transition: top .15s ease; } .skip-link:focus { top: 12px; } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; } /* =========================================================================== Header — Figma node "Header": 1280 x 88, x 70, y 30.5, radius pill, padding 8 16, fill #FFF 3%, inside stroke 1px #FFF 12%. =========================================================================== */ .site-header { position: absolute; inset: 30.5px 0 auto; z-index: 50; padding: 0 var(--shell-gutter); } .site-header--sticky { position: fixed; } /* Once the page scrolls, deepen the pill so text stays readable over content. */ .site-header--sticky.is-stuck .header-bar { background: rgb(0 0 0 / .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .header-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; max-width: var(--shell); min-height: 88px; margin-inline: auto; padding: 8px 16px; border: 1px solid var(--glass-line); border-radius: 9999px; background: var(--glass-bg); transition: background .25s ease; } /* Logo — Figma "Logo" image, 107 x 55. */ .header-logo { flex: 0 0 auto; display: block; } .header-logo img { width: 107px; height: 55px; object-fit: contain; object-position: left center; } .header-actions { display: flex; align-items: center; gap: 24px; } /* Optional text nav. The Figma header ships with none, but the admin can add links and they slot in here without touching the layout. */ .header-nav ul { display: flex; align-items: center; gap: 28px; } .header-nav a { font: 500 16px/22px var(--font-ui); color: var(--ink-body); transition: color .18s ease; } .header-nav a:hover { color: var(--ink); } /* Social icons — Figma "Link": 36 x 36 circles, gap 8, 1.25px #FFF strokes. */ .social-links { display: flex; align-items: center; gap: 8px; } .social-link { display: grid; place-items: center; width: 36px; height: 36px; border: 1.25px solid var(--ink); border-radius: 50%; color: var(--ink); transition: background .18s ease, color .18s ease, border-color .18s ease; } .social-link svg { width: 18px; height: 18px; } .social-link:hover { background: var(--ink); color: var(--surface); } /* Header call to action — Figma "BUTTON-592": 152 x 40, padding 10 20, radius 9999, fill brand, DM Sans SemiBold 14/20. */ .header-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 10px 20px; border-radius: 9999px; background: var(--brand); color: #fff; font: 600 16px/22px var(--font-ui); white-space: nowrap; transition: background .18s ease, transform .18s ease; } .header-cta:hover { background: var(--brand-hover); transform: translateY(-1px); } /* Mobile menu toggle, hidden until the breakpoint needs it. */ .header-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--glass-line); border-radius: 12px; color: var(--ink); place-items: center; } .header-toggle span { display: block; width: 18px; height: 1.5px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; } /* =========================================================================== Hero — Figma "Hero section": 1423 x 799. Stack, back to front: artwork (image 5) → black 90% (Rectangle 1) → content. =========================================================================== */ .hero { position: relative; display: flex; align-items: flex-start; justify-content: center; min-height: var(--hero-min-height, 799px); /* Figma "Container" sits at y 66 inside the 799-tall hero. */ padding: 66px var(--shell-gutter) 0; overflow: hidden; /* Two layers in one paint, mirroring the Figma stack: the black scrim ("Rectangle 1") over the artwork ("image 5"). Both the image and the scrim strength come from the admin panel. */ background-color: var(--surface); background-image: linear-gradient(rgb(0 0 0 / var(--hero-overlay, .9)), rgb(0 0 0 / var(--hero-overlay, .9))), var(--hero-image, none); background-repeat: no-repeat; background-position: center, center; background-size: cover, cover; } /* Container — Figma "Container": 896 max width, padding 80 24 0, centred. */ .hero__inner { position: relative; width: 100%; max-width: var(--hero-col); padding: 80px 24px 0; text-align: center; } /* Badge — Figma "Container:margin" → pill 337 x 38, padding 8 16, gap 8, radius pill, same glass treatment as the header, 32px below. */ .hero__badge { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; margin-bottom: 32px; padding: 8px 16px; border: 1px solid var(--glass-line); border-radius: 9999px; background: var(--glass-bg); font: 400 15px/21.5px var(--font-display); color: var(--ink); } .hero__badge::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); } /* Headline — Figma "Heading 1": Plus Jakarta Sans ExtraBold 68/71.4, letter-spacing -1.7px, line 1 white, line 2 brand, 24px below. */ .hero__title { margin-bottom: 24px; font-family: var(--font-display); font-weight: 800; font-size: 68px; line-height: 71.4px; letter-spacing: -1.7px; text-wrap: balance; /* Last-resort break, so an unbroken word can never widen the page. */ overflow-wrap: break-word; } /* Each line is its own row. On wide screens they stay on one line each, as in Figma, where the accent line is 913px inside the 896px column and simply overhangs it. The zero-width spaces only come into play once the viewport is too narrow for that. */ .hero__title span { display: block; white-space: nowrap; } .hero__title-accent { color: var(--brand); } /* Intro — Figma paragraph: Regular 17/27.6, #FFF 75%, 672 wide. */ .hero__intro { max-width: 672px; margin: 0 auto 70px; font: 400 19px/29.6px var(--font-display); color: var(--ink-body); } /* Buttons — Figma "PrimaryBtn": padding 14 28, gap 8, radius 14, label Plus Jakarta Sans SemiBold 14/21. Row gap 16, 80px below. */ .hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-bottom: 80px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border: 1px solid transparent; border-radius: 14px; font: 600 16px/23px var(--font-display); white-space: nowrap; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .btn svg { width: 16px; height: 16px; flex: 0 0 auto; } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--brand); color: #fff; } .btn--primary:hover { background: var(--brand-hover); } .btn--ghost { border-color: var(--glass-line); color: var(--ink); } .btn--ghost:hover { border-color: rgb(var(--ink-rgb) / .3); background: var(--glass-bg); } /* Stats — Figma stats row: 672 wide, gap 64, 1px #FFF 12% rule, 40px above. Value ExtraBold 42/42 white; label Regular 13/19.5 at 55%. */ .hero__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 64px; max-width: 672px; margin-inline: auto; padding-top: 40px; border-top: 1px solid var(--glass-line); } .hero__stat { text-align: center; } .hero__stat dt { font-family: var(--font-display); font-weight: 800; font-size: 42px; line-height: 42px; } .hero__stat dd { margin: 8px 0 0; font: 400 15px/21.5px var(--font-display); color: var(--ink-muted); } /* =========================================================================== Responsive. The artboard is a 1423px desktop frame; below that the type scales down and the header collapses to logo + menu. =========================================================================== */ @media (max-width: 1120px) { .hero__title { font-size: 56px; line-height: 60px; letter-spacing: -1.4px; } .hero__stats { gap: 48px; } } @media (max-width: 900px) { .site-header { inset-block-start: 16px; } .header-bar { min-height: 72px; padding: 8px 12px; } .header-logo img { width: 92px; height: 47px; } .header-toggle { display: grid; } /* Nav, socials and the CTA drop into a sheet under the pill. */ .header-actions { position: absolute; inset-inline: 0; top: calc(100% + 10px); flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; border: 1px solid var(--glass-line); border-radius: 24px; background: rgb(0 0 0 / .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: none; } .header-actions.is-open { display: flex; } .header-nav ul { flex-direction: column; align-items: stretch; gap: 4px; } .header-nav a { display: block; padding: 10px 4px; font-size: 17px; } .social-links { justify-content: center; } .header-cta { width: 100%; } .hero { align-items: center; } .hero__inner { padding-top: 132px; padding-bottom: 72px; } .hero__title { font-size: 44px; line-height: 48px; letter-spacing: -1px; } .hero__title span { white-space: normal; } .hero__intro { font-size: 18px; line-height: 28px; } .hero__actions { margin-bottom: 56px; } .hero__stats { gap: 32px 48px; padding-top: 32px; } .hero__stat dt { font-size: 34px; line-height: 36px; } } @media (max-width: 600px) { .hero { min-height: 0; } .hero__inner { padding: 124px 4px 64px; } .hero__badge { font-size: 14px; padding: 7px 14px; margin-bottom: 24px; } .hero__title { font-size: 34px; line-height: 39px; letter-spacing: -.6px; } .hero__intro { margin-bottom: 28px; } .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 44px; } .btn { width: 100%; } .hero__stats { gap: 28px; } .hero__stat { flex: 1 1 100%; } .hero__stat dt { font-size: 30px; line-height: 34px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* =========================================================================== About — Figma node "AboutSection": full-bleed #1A1A1E, 112px top/bottom. Inner grid: max 1152px, 2 columns, 64px gap, matching the hero's 24px shell gutter on narrow frames. =========================================================================== */ .about { background: #1a1a1e; padding: 112px var(--shell-gutter); } .about__inner { display: grid; grid-template-columns: minmax(0, 512px) minmax(0, 512px); justify-content: center; gap: 64px; max-width: 1152px; margin-inline: auto; } /* Badge — Figma "SectionLabel": Bold 11/16.5, letter-spacing 2.42, uppercase. */ .about__label { margin: 0 0 16px; font: 700 13px/18.5px var(--font-display); letter-spacing: 2.42px; text-transform: uppercase; color: var(--brand); } /* Heading — Figma "Heading 2": ExtraBold 48/60, letter-spacing -1.2px, #F0F0F2. */ .about__title { margin: 0 0 32px; font: 800 48px/60px var(--font-display); letter-spacing: -1.2px; color: #f0f0f2; } /* Paragraphs — Figma "Paragraph": Regular 15/24.38, #8A8A90, 16px between. */ .about__copy p { margin: 0; font: 400 17px/26.38px var(--font-display); color: #8a8a90; } .about__copy p + p { margin-top: 16px; } /* Feature grid — Figma "Container:margin": 2x2, 40px above, gap ~24/32. */ /* Figma "Container:margin" (features): 512 wide, H 135 Hug with 40 top padding -> 95px of content. Each item is 248 x 39.5, so 2 x 248 = 496 in 512 gives a 16px column gap, and 2 x 39.5 = 79 in 95 gives a 16px row gap. */ .about__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; } /* Figma feature item: 248 x 39.5, horizontal auto-layout, gap 12, no padding. That leaves 248 - 36 - 12 = 200px for the copy — exactly enough to keep each description on one line, which is what holds the block at 95px. */ .about__feature { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .about__feature-icon { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; /* Figma fill #2A1A1E — a 10% brand tint over the #1A1A1E section background lands within 2/255 of it, and keeps the chip correct if the brand colour is re-configured in the admin panel. */ background: rgb(var(--brand-rgb) / .10); color: var(--brand); } /* Item height 39.5 = title 19.5 + 2 gap + description 18. */ .about__feature-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .about__feature-copy strong { font: 600 15px/21.5px var(--font-display); color: #f0f0f2; } .about__feature-copy span { font: 400 14px/20px var(--font-display); color: #8a8a90; } /* Video — Figma "Image Red Ottawa": 512 x 384 (4:3), radius 16, black 60% scrim, 56px white play icon centred. */ /* Figma "Container" (video column): W 512 Fill, H 384 Fixed, Top 135.63 inside the 655.25-tall row — i.e. (655.25 - 384) / 2, so it is vertically centred, NOT stretched to the row height. `align-items: center` is what keeps the 384px height; the default `stretch` would override the aspect-ratio. */ .about__media { display: flex; align-items: center; min-width: 0; } .about__video { position: relative; display: block; width: 100%; /* Figma "Image Red Ottawa": 512 x 384 fixed = 4:3. */ aspect-ratio: 4 / 3; flex: 0 0 auto; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: #000; padding: 0; } .about__video--static { cursor: default; } .about__video img { width: 100%; height: 100%; object-fit: cover; } .about__video-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .6); transition: background .18s ease; } .about__video:hover .about__video-scrim { background: rgb(0 0 0 / .48); } /* Figma "Vector": a single white shape with the triangle cut out of it — no separate background circle. The scrimmed video shows through the cutout. */ .about__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 56px; height: 56px; color: #fff; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .35)); transition: transform .18s ease; } .about__play svg { width: 100%; height: 100%; display: block; } .about__video:hover .about__play { transform: translate(-50%, -50%) scale(1.06); } /* --- Video lightbox ------------------------------------------------------- */ .video-lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; } .video-lightbox[hidden] { display: none; } .video-lightbox__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .85); } .video-lightbox__panel { position: relative; z-index: 1; width: 100%; max-width: 960px; } .video-lightbox__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; } .video-lightbox__frame iframe, .video-lightbox__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-lightbox__close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .25); background: rgb(255 255 255 / .08); color: #fff; font-size: 23px; line-height: 1; cursor: pointer; } .video-lightbox__close:hover { background: rgb(255 255 255 / .18); } @media (max-width: 900px) { .about { padding: 72px var(--shell-gutter); } .about__inner { grid-template-columns: 1fr; gap: 40px; } .about__title { font-size: 36px; line-height: 42px; letter-spacing: -.8px; } .about__media { order: -1; } } @media (max-width: 600px) { .about__features { grid-template-columns: 1fr; gap: 20px; } .about__title { font-size: 30px; line-height: 36px; } } /* =========================================================================== Shared section scaffolding Figma sections are 1423 wide with 112px top/bottom padding, and their inner grid is 1152 max-width with 32px side padding — giving a 1088px content column that About, Leader, Advantages and Network all share. =========================================================================== */ .section { padding: 112px var(--shell-gutter); } .section__inner { max-width: 1152px; margin-inline: auto; padding-inline: 32px; } .section-head { text-align: center; } /* Figma "SectionLabel": Bold 11/16.5, letter-spacing 2.42, uppercase. */ .section-label { margin: 0; font: 700 13px/18.5px var(--font-display); letter-spacing: 2.42px; text-transform: uppercase; color: var(--brand); } /* Figma "Heading 2" — Advantages: ExtraBold 48/72, -1.2px, 16px below label. */ .section-title { margin: 16px 0 0; font: 800 48px/72px var(--font-display); letter-spacing: -1.2px; color: #f0f0f2; } /* Leader's headline is a size up: ExtraBold 52/78, -1.3px. */ .section-title--lg { font-size: 52px; line-height: 78px; letter-spacing: -1.3px; } /* Figma sub-paragraph: Regular 15/24.4, #8A8A90, 512 wide, 12px below title. */ .section-sub { max-width: 512px; margin: 12px auto 0; font: 400 17px/26.4px var(--font-display); color: #8a8a90; } /* =========================================================================== Leader — Figma "HostSection": 1423 x 1165, padding 112, fill #1E1E22. =========================================================================== */ .leader { background: #1e1e22; } /* Two 512 columns with a 64 gap, 64px below the header block. */ .leader__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; margin-top: 64px; align-items: start; } /* Figma portrait frame: 512 x 680, radius 16, 4px inside stroke #C4122F 25%. */ .leader__portrait { margin: 0; aspect-ratio: 512 / 680; border: 4px solid rgb(var(--brand-rgb) / .25); border-radius: 16px; overflow: hidden; } .leader__portrait img { width: 100%; height: 100%; object-fit: cover; } .leader__body { padding-top: 16px; } /* Role pills — Figma 113 x 30.5, padding 14/6, fill #222226, 1px brand 30%. */ .leader__pills { display: flex; flex-wrap: wrap; gap: 12px; } .leader__pills li { padding: 6px 14px; border: 1px solid rgb(var(--brand-rgb) / .30); border-radius: 9999px; background: #222226; font: 600 13px/18.5px var(--font-display); color: #d4344a; } /* Pull quote — Figma: 3px left rule in brand, 24px inset, Italic 18/29.3. */ .leader__quote { margin: 32px 0 0; padding-left: 24px; border-left: 3px solid var(--brand); font: italic 400 18px/29.3px var(--font-display); color: #b8b8bd; } .leader__copy { margin-top: 48px; } .leader__copy p { margin: 0; font: 400 17px/26.4px var(--font-display); color: #8a8a90; } .leader__copy p + p { margin-top: 24px; } .leader__links { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 32px; } .leader__link { display: inline-flex; align-items: center; gap: 12px; font: 400 17px/26.4px var(--font-display); color: #b8b8bd; transition: color .18s ease; } .leader__link:hover { color: #f0f0f2; } .leader__link-icon { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; color: #fff; } .leader__link-icon--linkedin { background: #0a66c2; } .leader__link-icon--mail { background: var(--brand); } /* =========================================================================== Advantages — Figma "AdvantagesSection": 1423 x 1289, padding 112, #1A1A1E. =========================================================================== */ .advantages { background: #1a1a1e; } /* Figma cards: 349.33 x 248.5 with a 20px gap both ways (3 x 349.33 + 2 x 20 = 1088, the shared content width). */ .advantages__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 64px; padding: 0; list-style: none; } .advantages__card { display: flex; flex-direction: column; min-height: 248.5px; padding: 28px; border-radius: 16px; background: #222226; } /* Figma "IconBox": 48 x 48, radius 14, fill #2A1A1E — a size up from the 36px chips used in the About section. */ .advantages__icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: rgb(var(--brand-rgb) / .10); color: var(--brand); } /* Figma "Heading 3": Bold 17/25.5, 20px below the icon. */ .advantages__card-title { margin: 20px 0 0; font: 700 19px/27.5px var(--font-display); color: #f0f0f2; } .advantages__card-body { margin: 8px 0 0; font: 400 16px/24.8px var(--font-display); color: #8a8a90; } /* Closing panel — Figma: 1088 x 262, padding 44/40, radius 16, fill #10080D. */ .advantages__cta { margin-top: 56px; padding: 44px 40px; border-radius: 16px; background: #10080d; text-align: center; } .advantages__cta-title { margin: 0; font: 800 28px/38px var(--font-display); letter-spacing: -.5px; color: #f0f0f2; } .advantages__cta-sub { max-width: 560px; margin: 12px auto 0; font: 400 17px/26.4px var(--font-display); color: #8a8a90; } .advantages__cta .btn { margin-top: 24px; } /* =========================================================================== Network — Figma "CTASection": 1423 x 755.75, photograph under #0A0305 76%. =========================================================================== */ .network { display: grid; place-items: center; min-height: 755.75px; padding: 112px var(--shell-gutter); text-align: center; background-color: #0a0305; background-image: linear-gradient(rgb(10 3 5 / .76), rgb(10 3 5 / .76)), var(--network-image, none); background-repeat: no-repeat; background-position: center, center; background-size: cover, cover; } .network__inner { width: 100%; max-width: 720px; } /* Figma heading: ExtraBold 58/72.5, letter-spacing -1.45px, pure white. */ .network__title { margin: 16px 0 0; font: 800 58px/72.5px var(--font-display); letter-spacing: -1.45px; color: #fff; text-wrap: balance; } .network__sub { margin: 16px auto 0; font: 400 19px/29.6px var(--font-display); color: rgb(var(--ink-rgb) / .75); } .network__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; } .network__assurances { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; margin: 32px 0 0; padding: 0; list-style: none; } .network__assurances li { display: inline-flex; align-items: center; gap: 8px; font: 400 15px/21.5px var(--font-display); color: rgb(var(--ink-rgb) / .55); } .network__assurances li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } /* =========================================================================== Upcoming Event — Figma "UpcomingEventSection": 1423 x 1229.5, padding 112, fill #1A1A1E. Content column 1088 = 520 + 48 + 520. =========================================================================== */ .event { background: #1a1a1e; } /* This section's eyebrow is 14px, not the 11px the other four share. */ .section-label--md { font-size: 16px; } /* Heading 2 here is 48/60 rather than the 48/72 used elsewhere, and the paragraph sits 16 below it (not 12) with a 22.5 line box. */ .event__title { line-height: 60px; } .event__sub { margin-top: 16px; line-height: 22.5px; } /* Figma "Container:margin": 64px between the header block and the grid. */ .event__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 64px; align-items: start; } /* --- Left column: flyer, date/time cards, location card ------------------- */ .event__details { min-width: 0; } /* Figma image frame: 520 x 347, radius 16. */ .event__figure { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #222226; } .event__figure img { width: 100%; height: auto; aspect-ratio: 520 / 347; object-fit: cover; } /* Expand-to-view-full-size trigger: invisible until the flyer is hovered or focused, so it does not compete with the flyer itself at rest. */ .event__figure-expand { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .18); background: rgb(10 10 12 / .55); color: #fff; opacity: 0; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, background .15s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .event__figure:hover .event__figure-expand, .event__figure:focus-within .event__figure-expand, .event__figure-expand:focus-visible { opacity: 1; transform: translateY(0); } .event__figure-expand:hover { background: rgb(var(--brand-rgb) / .85); border-color: transparent; } .event__figure-expand svg { width: 16px; height: 16px; } .event__empty { margin: 40px 0 0; padding: 24px; border: 1px dashed rgb(255 255 255 / .14); border-radius: 14px; text-align: center; font: 400 17px/26px var(--font-display); color: #8a8a90; } /* 18 gap + 1 padding inside the details stack = 19 below the image. The two cards hug their text rather than splitting the row evenly — Figma gives Date 267 and Time 243, which is exactly their content widths. */ .event__meta { display: flex; gap: 10px; margin: 19px 0 0; padding: 0; list-style: none; } /* No shrinking: the two together come to 520.14 against a 520 track, and letting flex absorb that 0.14 costs the Date its last character. Figma's own frame overflows by the same hair, so this matches it rather than fighting it. `max-width` still reins in an over-long admin value. */ .event__meta .event-card { flex: 0 0 auto; max-width: 100%; } .event__meta .event-card__copy { width: max-content; max-width: 100%; overflow: hidden; } .event__meta .event-card__value { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* Shared card shell: padding 16, radius 14, #222226, 0 1px 8px black 7.5%. */ .event-card { padding: 16px; border-radius: 14px; background: #222226; box-shadow: 0 1px 8px rgb(0 0 0 / .075); } .event-card, .event-card__head { display: flex; align-items: center; gap: 16px; min-width: 0; } .event-card--location { display: block; margin-top: 12px; } /* Icon chip: 40 x 40, radius 10, #2A1A1E, 16px brand-red glyph. */ .event-card__icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #2a1a1e; color: var(--brand); } .event-card__copy { min-width: 0; } .event-card__label { display: block; font: 400 13px/18.5px var(--font-display); color: #8a8a90; } .event-card__value { display: block; margin-top: 2px; font: 600 16px/23px var(--font-display); color: #f0f0f2; } /* Map preview: 488 x 160 inside the card, radius 10. */ .event-card__map { height: 160px; margin-top: 16px; border-radius: 10px; overflow: hidden; background: #2a1a1e; } .event-card__map iframe { display: block; width: 100%; height: 100%; border: 0; /* Figma shows a dark, navy-toned map. Google's keyless embed only serves the light style, so invert it and spin the hue back — the standard trick, and the only way to match without a paid Maps styling key. */ filter: invert(1) hue-rotate(185deg) saturate(.75) brightness(.94) contrast(.92); } /* --- Right column: the reservation panel ---------------------------------- */ /* Figma: 520 wide, radius 16, #222226, padding 0 32 32, 0 2px 16px black 9%. */ .event__panel { display: flex; flex-direction: column; min-width: 0; padding: 0 32px 32px; border-radius: 16px; background: #222226; box-shadow: 0 2px 16px rgb(0 0 0 / .09); } .event__panel-title { margin: 28px 0 12px; font: 700 17px/24.5px var(--font-display); color: #f0f0f2; } /* Step 1's field area: radius 12, 1px white-10% hairline, scrolls if a small viewport can't fit all five fields plus the radio group. Steps 2 and 3 are shorter, so the container's height now follows content rather than a fixed 513px — that number was Step 1's own natural height anyway. */ .event-form { display: flex; flex-direction: column; gap: 12px; max-height: 560px; /* Figma draws its 1px stroke *inside* the box, so the padding is measured from the outer edge. CSS stacks border and padding, hence 11/19 + 1. */ padding: 11px 19px 11px 11px; border: 1px solid rgb(255 255 255 / .10); border-radius: 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(102 102 102 / .5) transparent; } .event-form::-webkit-scrollbar { width: 4px; } .event-form::-webkit-scrollbar-track { background: transparent; } .event-form::-webkit-scrollbar-thumb { border-radius: 2px; background: rgb(102 102 102 / .5); } /* --- Wizard: step visibility, progress, per-step chrome -------------------- */ .event-wizard__progress { margin: 0 0 4px; font: 600 13px/18.5px var(--font-display); letter-spacing: .4px; text-transform: uppercase; color: #8a8a90; } .event-step[hidden] { display: none; } .event-step { display: flex; flex-direction: column; gap: 12px; } /* Steps 2's three variants share one card treatment: a brand-coloured banner (matching the reference screenshots) over a slightly raised body. */ .event-step--card { border-radius: 10px; overflow: hidden; background: #1c1c20; border: 1px solid rgb(255 255 255 / .08); } .event-step__banner { margin: 0; padding: 12px 16px; background: var(--brand); font: 700 15px/21.5px var(--font-display); color: #fff; } .event-step__body { display: flex; flex-direction: column; gap: 14px; padding: 16px; } .event-step__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; } .event-step__next svg { width: 14px; height: 14px; transform: rotate(0deg); } /* "Clear form" reads as a text link, not a button, in every reference shot. */ .event-form__link { margin-left: auto; padding: 6px 2px; border: 0; background: none; font: 500 12.5px/1 var(--font-display); color: #8a8a90; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .event-form__link:hover { color: #f0f0f2; } .event-form__hint { margin: -4px 0 0; font: 400 14.5px/20px var(--font-display); color: #8a8a90; } .event-form__label--lg { font: 700 16px/23px var(--font-display); color: #f0f0f2; } /* --- Checkbox (Sponsor's multi-select levels) ------------------------------ */ .event-check { display: flex; align-items: center; gap: 10px; font: 400 15px/20px var(--font-display); color: #b8b8bd; cursor: pointer; } .event-check input { position: absolute; opacity: 0; width: 0; height: 0; } .event-check__box { display: grid; place-items: center; flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid rgb(255 255 255 / .10); border-radius: 5px; color: transparent; transition: border-color .15s ease, background .15s ease, color .15s ease; } .event-check__box svg { width: 11px; height: 11px; } .event-check input:checked + .event-check__box { border-color: var(--brand); background: var(--brand); color: #fff; } .event-check input:focus-visible + .event-check__box { outline: 2px solid var(--brand); outline-offset: 2px; } .event-form__field.is-invalid .event-form__label, .event-form__field.is-invalid .event-form__label--lg { color: #ff8ea0; } .event-form__field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; } .event-form__label { display: block; padding: 0; font: 500 13px/18.5px var(--font-display); color: #8a8a90; } .event-form__label span { margin-left: 4px; font-weight: 700; color: var(--brand); } /* Input: 41.5 tall, padding-x 12, radius 10, same hairline as the panel. */ .event-form__input { width: 100%; height: 41.5px; padding: 0 11px; border: 1px solid rgb(255 255 255 / .10); border-radius: 10px; background: #222226; color: #f0f0f2; font: 400 13px/1 var(--font-display); transition: border-color .15s ease, box-shadow .15s ease; } .event-form__input::placeholder { color: rgb(240 240 242 / .5); } .event-form__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .18); } .event-form__input.is-invalid { border-color: #e05260; } .event-form__error { font: 400 13px/18.5px var(--font-display); color: #ff8ea0; } .event-form__field--radio { gap: 10px; } .event-form__options { display: flex; flex-direction: column; gap: 8px; } /* Radio: 16 x 16 ring, 8 x 8 dot, 10px gap, label 13/18 #B8B8BD. */ .event-radio { display: flex; align-items: center; gap: 10px; font: 400 15px/20px var(--font-display); color: #b8b8bd; cursor: pointer; } .event-radio input { position: absolute; opacity: 0; width: 0; height: 0; } .event-radio__dot { position: relative; flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid rgb(255 255 255 / .10); border-radius: 50%; transition: border-color .15s ease; } .event-radio__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); transform: scale(0); transition: transform .15s ease; } .event-radio input:checked + .event-radio__dot { border-color: var(--brand); } .event-radio input:checked + .event-radio__dot::after { transform: scale(1); } .event-radio input:focus-visible + .event-radio__dot { outline: 2px solid var(--brand); outline-offset: 2px; } /* Step 3's event list: full-width rows rather than an inline group. */ .event-form__options--stack { gap: 10px; } .event-radio--block { align-items: flex-start; padding: 12px 14px; border: 1px solid rgb(255 255 255 / .10); border-radius: 10px; transition: border-color .15s ease, background .15s ease; } /* The radio's dot is centred on the first line, not the three-line block. */ .event-radio--block .event-radio__dot { margin-top: 1px; } /* One option = date, then time and place beneath it. */ .event-option { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .event-option__date { font: 600 15px/20px var(--font-display); color: #f0f0f2; } .event-option__time, .event-option__place { display: flex; align-items: center; gap: 6px; font: 400 14px/19px var(--font-display); color: #8a8a90; } .event-option__time svg, .event-option__place svg { flex: 0 0 auto; width: 12px; height: 12px; color: var(--brand); } .event-radio--block:has(input:checked) .event-option__date { color: #fff; } .event-radio--block:has(input:checked) { border-color: var(--brand); background: rgb(var(--brand-rgb) / .08); } .event-radio--block:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; } .event-form__note { margin: 0; padding: 10px 12px; border-radius: 10px; font: 400 14.5px/20px var(--font-display); } .event-form__note--ok { background: rgb(47 158 95 / .14); color: #7fdcaa; } .event-form__note--error { background: rgb(var(--brand-rgb) / .14); color: #ff8ea0; } /* Honeypot: off-screen rather than display:none, which some bots skip. */ .event-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* 456 x 53, radius 14 in Figma's single-step design. The wizard moved this button into Step 3's own action row (below), but the sizing carries over. `.btn` carries a 1px transparent border for its outline variant — dropping it here keeps the height at the designed 16 + 21 + 16. */ .event__submit { padding: 16px 20px; border: 0; border-radius: 14px; font: 700 16px/23px var(--font-display); } .event__submit svg { width: 15px; height: 15px; } /* =========================================================================== Membership Plans — Figma "PlansSection": 1423 x 1407.62, padding 112, fill #161618. Three 346.66 cards with 24 gaps across the 1088 column. =========================================================================== */ .plans { background: #161618; } /* Heading 2 here is 52/65 (-1.3), and the paragraph is 16/26 at 576 wide sitting 20 below it — all three differ from the shared defaults. */ .plans__title { line-height: 65px; } .plans__sub { max-width: 576px; margin-top: 20px; font-size: 18px; line-height: 26px; } .plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 64px 0 0; padding: 0; list-style: none; align-items: stretch; } /* Figma "Paragraph": 40 below the grid, 14/21 #6A7282. */ .plans__footnote { margin: 40px 0 0; text-align: center; font: 400 16px/23px var(--font-display); color: #6a7282; } /* --- Card ------------------------------------------------------------------ */ /* Padding-top is 32 + the 4px accent bar, because in Figma that bar is a real block in the stack rather than an overlay — it is what sits the standard cards' content 4px lower than the highlighted one's. */ .plan-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 36px 32px 32px; border-radius: 24px; background: #222226; box-shadow: 0 2px 16px rgb(0 0 0 / .105); } /* A 4px brand bar across the top of the two standard cards. The highlighted card has none, which is what sits its content 4px higher in Figma too. */ .plan-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 24px 24px 0 0; background: rgb(var(--brand-rgb) / .208); } .plan-card--popular { padding-top: 32px; background: var(--brand); box-shadow: 0 12px 40px rgb(var(--brand-rgb) / .15); } .plan-card--popular::before { content: none; } /* Figma: 95 x 25 at top 20, right ~19. */ .plan-card__badge { position: absolute; top: 20px; right: 19px; padding: 4px 12px; border-radius: 999px; background: #7a0b1c; font: 700 13px/18.5px var(--font-display); color: #fff; } /* Icon tile: 64 x 64, radius 16, a 10%→5% brand gradient with a 16% border. */ .plan-card__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 24px; border: 1px solid rgb(var(--brand-rgb) / .16); border-radius: 16px; background: linear-gradient(rgb(var(--brand-rgb) / .10), rgb(var(--brand-rgb) / .05)); color: var(--brand); } .plan-card__icon svg { width: 28px; height: 28px; } .plan-card--popular .plan-card__icon { border-color: transparent; background: rgb(255 255 255 / .05); color: #fff; } .plan-card__name { margin: 0 0 8px; font: 800 22px/32.5px var(--font-display); letter-spacing: -.525px; color: #f0f0f2; } .plan-card--popular .plan-card__name { color: #fff; } .plan-card__tagline { margin: 0 0 28px; font: 400 15px/23.125px var(--font-display); color: #6a6a72; } .plan-card--popular .plan-card__tagline { color: rgb(255 255 255 / .7); } /* `flex: 1` is what pins the two buttons to the bottom, so all three cards finish level however many features each one lists. */ .plan-card__features { flex: 1; display: flex; flex-direction: column; gap: 10px; margin: 0 0 32px; padding: 0; list-style: none; } .plan-card__features li, .plan-modal__list li { display: flex; align-items: flex-start; gap: 12px; font: 400 15px/23.125px var(--font-display); color: #b8b8bd; } .plan-card--popular .plan-card__features li { color: rgb(255 255 255 / .85); } /* The tick sits on the first line of a wrapping label, not centred on it. */ .plan-card__tick { flex: 0 0 auto; display: block; padding-top: 2px; color: var(--brand); } .plan-card__tick svg { width: 15px; height: 15px; display: block; } .plan-card--popular .plan-card__tick { color: #fff; } .plan-card__actions { display: flex; flex-direction: column; gap: 12px; } /* Both buttons are 14/21 with 14px vertical padding and a 14 radius. `.btn` contributes the flex/gap/transition; these set the tier-specific skin. */ .plan-card__apply, .plan-card__learn { width: 100%; padding: 14px 20px; border: 1px solid transparent; border-radius: 14px; font: 700 16px/23px var(--font-display); } /* No border on the filled button — Figma has it 49 tall against Learn More's bordered 52, and a 1px transparent border would even them up wrongly. */ .plan-card__apply { border: 0; background: var(--brand); color: #fff; } .plan-card__apply:hover { background: var(--brand-hover); } .plan-card__learn { border-color: rgb(var(--brand-rgb) / .25); background: none; font-weight: 600; color: var(--brand); } .plan-card__learn:hover { background: rgb(var(--brand-rgb) / .08); } .plan-card--popular .plan-card__apply { background: #222226; color: var(--brand); } .plan-card--popular .plan-card__apply:hover { background: #1a1a1e; } .plan-card--popular .plan-card__learn { border-color: rgb(255 255 255 / .12); color: rgb(255 255 255 / .85); } .plan-card--popular .plan-card__learn:hover { background: rgb(255 255 255 / .08); } /* Figma draws these two button icons at 12% opacity, which on a filled button is all but invisible and disagrees with the Learn More icon on the other two cards. Treated as an artefact: they inherit the label colour. */ .plan-card__apply svg, .plan-card__learn svg { width: 14px; height: 14px; color: currentColor; } /* =========================================================================== Membership — Figma "MembershipSection": 1423 x 1010.5, padding 112, fill #1E1E22. Content column 1088 = 512 + 64 + 512. =========================================================================== */ .membership { background: #1e1e22; } .membership__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; } .membership__intro { min-width: 0; } /* Heading 2 is the shared 48/72 at -1.2, but left-aligned rather than centred. */ .membership__title { margin: 16px 0 0; text-align: left; } .membership__lede { margin: 16px 0 0; font: 400 17px/26.375px var(--font-display); color: #8a8a90; } /* Benefits: 32 below the lede, 12 between rows, 16px brand tick. */ .membership__benefits { display: flex; flex-direction: column; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; } .membership__benefits li { display: flex; align-items: flex-start; gap: 12px; font: 400 16px/24.75px var(--font-display); color: #b8b8bd; } .membership__tick { flex: 0 0 auto; display: block; padding-top: 2px; color: var(--brand); } .membership__tick svg { width: 16px; height: 16px; display: block; } /* Guarantee panel: 40 below the list, padding 24, radius 16, #2A1A1E. */ .membership__guarantee { display: flex; align-items: flex-start; gap: 16px; margin-top: 40px; padding: 24px; border: 1px solid rgb(var(--brand-rgb) / .16); border-radius: 16px; background: #2a1a1e; } .membership__guarantee-icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: #222226; color: var(--brand); } .membership__guarantee-icon svg { width: 20px; height: 20px; } .membership__guarantee-title { margin: 0; font: 700 16px/23px var(--font-display); color: #f0f0f2; } .membership__guarantee-copy { margin: 4px 0 0; font: 400 15px/23.125px var(--font-display); color: #8a8a90; } /* --- Application panel ------------------------------------------------------ */ .membership__panel { display: flex; flex-direction: column; min-width: 0; padding: 32px; border-radius: 16px; background: #222226; box-shadow: 0 2px 16px rgb(0 0 0 / .09); } .membership__panel-title { margin: 0; font: 700 21px/31px var(--font-display); color: #f0f0f2; } .membership__panel-sub { margin: 4px 0 0; font: 400 16px/24.75px var(--font-display); color: #8a8a90; } /* Figma's field area is a fixed 517.5 with its own scrollbar — the fields come to ~681, so it genuinely scrolls rather than just being clipped. */ /* No top margin and no side padding: Figma butts the field area straight up against the sub-heading, and parks the scrollbar in the panel's own padding rather than inside the fields — which is what keeps the inputs a full 448. */ .membership-form { display: flex; flex-direction: column; height: 517.5px; padding-bottom: 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(77 77 77 / .4) transparent; } .membership-form::-webkit-scrollbar { width: 6px; } .membership-form::-webkit-scrollbar-track { background: transparent; } .membership-form::-webkit-scrollbar-thumb { border-radius: 3px; background: rgb(77 77 77 / .4); } /* Figma spaces fields with a 12px top pad each; the first row uses 24. */ .membership-form__field { display: flex; flex-direction: column; gap: 0; min-width: 0; margin-top: 12px; } .membership-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .membership-form__row .membership-form__field { margin-top: 0; } .membership-form__label { display: block; padding-bottom: 4.5px; font: 500 13px/18.5px var(--font-display); color: #8a8a90; } .membership-form__label span { margin-left: 4px; font-weight: 700; color: var(--brand); } .membership-form__input, .membership-form__select, .membership-form__textarea { width: 100%; padding: 10px 11px; border: 1px solid rgb(255 255 255 / .10); border-radius: 10px; background: #222226; color: #f0f0f2; font: 400 15px/23.5px var(--font-display); transition: border-color .15s ease, box-shadow .15s ease; } .membership-form__input { height: 41.5px; } .membership-form__select { height: 40.5px; padding-block: 0; } .membership-form__textarea { height: 100px; resize: vertical; line-height: 20px; } .membership-form__input::placeholder, .membership-form__textarea::placeholder { color: rgb(240 240 242 / .5); } .membership-form__select:not(:valid), .membership-form__select option[value=""] { color: #8a8a90; } .membership-form__input:focus, .membership-form__select:focus, .membership-form__textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .18); } .is-invalid.membership-form__input, .is-invalid.membership-form__select { border-color: #e05260; } .membership-form__error { margin-top: 4px; font: 400 13px/18.5px var(--font-display); color: #ff8ea0; } .membership-form__note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font: 400 14.5px/20px var(--font-display); } .membership-form__note--ok { background: rgb(47 158 95 / .14); color: #7fdcaa; } .membership-form__note--error { background: rgb(var(--brand-rgb) / .14); color: #ff8ea0; } /* Button sits 24 below the field area; 448 x 53, radius 14. */ .membership__submit { margin-top: 24px; padding: 16px 20px; border: 0; border-radius: 14px; font: 700 16px/23px var(--font-display); } .membership__submit svg { width: 15px; height: 15px; } .membership__footnote { margin: 12px 0 0; text-align: center; font: 400 14px/20px var(--font-display); color: #8a8a90; } /* =========================================================================== Gallery — Figma "GallerySection": 1423 x 1210, padding 112, fill #161618. Content column 1088; tiles laid out in repeating five-tile masonry blocks. =========================================================================== */ .gallery { background: #161618; } .gallery__grid, .gallery__block { display: flex; flex-direction: column; gap: 16px; } .gallery__grid { margin-top: 64px; } /* Two separate row grids, as in Figma. The top splits 3fr/2fr — which is exactly Figma's 643.2 / 428.8 of the 1072 left after the 16px gutter — and the bottom splits 1fr/1fr for two 536s. One shared column track cannot give both, which is why these are not a single grid. */ .gallery__row { display: grid; gap: 16px; } .gallery__row--top { grid-template-columns: 3fr 2fr; grid-template-rows: 242px 242px; } .gallery__tile--hero { grid-column: 1; grid-row: 1 / span 2; } .gallery__tile--b { grid-column: 2; grid-row: 1; } .gallery__tile--c { grid-column: 2; grid-row: 2; } .gallery__row--bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; } /* Partial rows close their gaps rather than leaving holes. */ .gallery__row--top[data-tiles="1"] { grid-template-columns: 1fr; grid-template-rows: 500px; } .gallery__row--top[data-tiles="1"] .gallery__tile--hero { grid-row: 1; } .gallery__row--top[data-tiles="2"] { grid-template-rows: 500px; } .gallery__row--top[data-tiles="2"] .gallery__tile--hero, .gallery__row--top[data-tiles="2"] .gallery__tile--b { grid-row: 1; } .gallery__row--bottom[data-tiles="1"] { grid-template-columns: 1fr; } .gallery__tile { position: relative; display: block; border-radius: 16px; overflow: hidden; background: #222226; } .gallery__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .gallery__tile:hover img { transform: scale(1.04); } /* Hover reveals the "View Gallery" affordance. Keyboard focus gets the same treatment, so the tile is not a mouse-only control. */ .gallery__overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(10 3 5 / .55); opacity: 0; transition: opacity .25s ease; } .gallery__tile:hover .gallery__overlay, .gallery__tile:focus-visible .gallery__overlay { opacity: 1; } .gallery__overlay-label { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 1px solid rgb(var(--ink-rgb) / .28); border-radius: 999px; background: rgb(var(--ink-rgb) / .10); font: 700 15px/21px var(--font-display); color: #fff; transform: translateY(6px); transition: transform .25s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .gallery__tile:hover .gallery__overlay-label, .gallery__tile:focus-visible .gallery__overlay-label { transform: translateY(0); } .gallery__overlay-label svg { width: 16px; height: 16px; } .gallery__empty { margin: 40px 0 0; padding: 24px; border: 1px dashed rgb(255 255 255 / .14); border-radius: 16px; text-align: center; font: 400 17px/26px var(--font-display); color: #8a8a90; } /* --- Lightbox: GLightbox restyled to the site's palette -------------------- */ .glightbox-clean .gslide-description { background: #1e1e22; } .glightbox-clean .gslide-title { font: 700 17px/25px var(--font-display); color: #f0f0f2; } .glightbox-clean .gdesc-inner { padding: 18px 22px; } .glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev { background: rgb(var(--ink-rgb) / .10); border: 1px solid rgb(var(--ink-rgb) / .22); border-radius: 50%; } .glightbox-clean .gclose:hover, .glightbox-clean .gnext:hover, .glightbox-clean .gprev:hover { background: var(--brand); border-color: transparent; } .gbtn svg { fill: #fff; } .goverlay { background: rgb(10 3 5 / .92); } .gslide-media { border-radius: 12px; overflow: hidden; } /* =========================================================================== Footer — Figma "Footer": 1423 x 77, fill #161616. =========================================================================== */ .site-footer { background: #161616; padding: 0 var(--shell-gutter); } .site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1152px; min-height: 77px; margin-inline: auto; padding-inline: 32px; } .site-footer__copy { margin: 0; font: 400 15px/21.5px var(--font-display); color: #8a8a90; } /* Rich text: Quill wraps every line in

, which this field's admin-typed default does not have, so both shapes need to sit flush in the footer bar. */ .site-footer__copy p { margin: 0; } .site-footer__copy a { color: #8a8a90; text-decoration: underline; } .site-footer__copy a:hover { color: #f0f0f2; } .site-footer__social .social-link { border-color: rgb(var(--ink-rgb) / .25); color: #8a8a90; } .site-footer__social .social-link:hover { background: var(--ink); color: #161616; } .site-footer__legal { display: flex; flex-wrap: wrap; gap: 32px; } /* Anchor or