/* White Pages — New generator. Shared STRUCTURE only: every design (templates/white-new//theme.css) renders this exact same markup and supplies only its own font pairing, loaded right after this file — see src/white-new/renderer.js and src/white-new/blueprint.js's DESIGNS. Color (templates/white-new/palettes.css, loaded after theme.css) and corner radius (the [data-decor-radius] block just below) are independent axes any design can draw from, not part of a design's own identity. This file must never hardcode a color or font family itself (color/font tokens are consumed via var(...) everywhere below); the bare :root radius here is only a fallback so the file stays legible if [data-decor-radius] is ever missing from . */ :root { --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; } /* Decoration system: radius/shape/frame are chosen once per site (createWhiteBlueprint()'s `decor`) and applied uniformly so a site reads as one consistent look. radius drives the SAME --radius-* tokens every button/card/photo frame already consumes, so a "round" pick makes photos AND buttons/cards rounder together rather than mismatched. */ :root[data-decor-radius="sharp"] { --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; } :root[data-decor-radius="soft"] { --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; } :root[data-decor-radius="round"] { --radius-sm: 16px; --radius-md: 24px; --radius-lg: 36px; } /* shape: wide/tall only touch the large single "feature" photos — dense card grids (.card, .portfolio-photo/.insight-photo bleed within a card) and avatars (.team-photo, .team-row-photo) keep their context-appropriate ratio regardless of the site's shape decoration. */ :root[data-decor-shape="wide"] .hero-split-media, :root[data-decor-shape="wide"] .about-media img, :root[data-decor-shape="wide"] .about-offset-frame img { aspect-ratio: 16/9; } :root[data-decor-shape="tall"] .hero-split-media, :root[data-decor-shape="tall"] .about-media img, :root[data-decor-shape="tall"] .about-offset-frame img { aspect-ratio: 3/4; } /* frame: outline/shadow are subtle enough to apply everywhere, including avatars and card thumbnails; edge-accent is a bolder flourish reserved for the same large "feature" photo set as `shape` above. No 'glow' — a soft accent-colored blur halo reads as the generic neon/glass "AI-generated design" look this project deliberately avoids. */ :root[data-decor-frame="outline"] .hero-split-media, :root[data-decor-frame="outline"] .about-media img, :root[data-decor-frame="outline"] .about-offset-frame img, :root[data-decor-frame="outline"] .card, :root[data-decor-frame="outline"] .team-photo, :root[data-decor-frame="outline"] .team-row-photo, :root[data-decor-frame="outline"] .portfolio-photo, :root[data-decor-frame="outline"] .insight-photo { box-shadow: 0 0 0 1px var(--outline); } :root[data-decor-frame="shadow"] .hero-split-media, :root[data-decor-frame="shadow"] .about-media img, :root[data-decor-frame="shadow"] .about-offset-frame img, :root[data-decor-frame="shadow"] .card, :root[data-decor-frame="shadow"] .team-photo, :root[data-decor-frame="shadow"] .team-row-photo, :root[data-decor-frame="shadow"] .portfolio-photo, :root[data-decor-frame="shadow"] .insight-photo { box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22); } :root[data-decor-frame="edge-accent"] .hero-split-media, :root[data-decor-frame="edge-accent"] .about-media img, :root[data-decor-frame="edge-accent"] .about-offset-frame img { box-shadow: inset 5px 0 0 var(--accent); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { min-height: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; line-height: 1.55; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; text-wrap: balance; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } .container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } .section { padding: 90px 0; } .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .lead { color: var(--text-2); font-size: 17px; max-width: 620px; } /* ── Buttons ─────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: var(--radius-md); font: 600 14.5px var(--font-body); cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--outline); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } /* ── Header ──────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease; } .site-header.scrolled { border-color: var(--line); } .header-inner { display: flex; align-items: center; gap: 32px; min-height: 76px; } .brand { display: flex; align-items: center; } /* content-box so padding adds breathing room on top of the logo's own height, instead of the page-wide border-box reset eating into it. */ .brand img { box-sizing: content-box; height: 28px; width: auto; padding: 10px 0; } .brand-text { font-family: var(--font-display); font-weight: 700; font-size: 18px; } .nav { display: flex; align-items: center; gap: 28px; margin-left: auto; } .nav a { font-size: 14.5px; font-weight: 600; color: var(--text-2); } .nav a:hover { color: var(--text); } .header-actions { display: flex; } .menu-button { display: none; background: none; border: none; cursor: pointer; padding: 8px; z-index: 61; } /* Fixed height + space-between so the 3 bars sit at an exact 7px pitch from center — the hamburger→× morph below rotates the outer two by ±45deg and translates them ±7px, which only lands as a clean X if that pitch is guaranteed by layout rather than left to default inline/block stacking. */ .menu-lines { display: flex; flex-direction: column; justify-content: space-between; width: 22px; height: 16px; } .menu-lines i { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .nav-cta { display: none; } /* A backdrop dims the page behind the open drawer and gives a large, obvious click target to close it — without one, the mobile menu reads as a bare dropdown rather than an intentional overlay (confirmed live: the hero image/CTAs/cookie banner all stayed fully visible and clickable behind it, with no way to dismiss it except finding the same small hamburger icon again). Present in the markup on every page; only painted/interactive once .open is toggled on, so it costs nothing when closed (which is always true above the 860px breakpoint). Not `display:none` by default — opacity/visibility so the transform transition below can animate in/out instead of an abrupt cut. */ .nav-backdrop { position: fixed; inset: 0; z-index: 55; border: 0; padding: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; cursor: default; transition: opacity .25s ease, visibility .25s ease; } .nav-backdrop.open { opacity: 1; visibility: visible; } @media (max-width: 860px) { .menu-button { display: flex; } .nav { position: fixed; inset: 0 0 auto auto; z-index: 60; width: min(300px, 82vw); height: 100vh; height: 100dvh; background: var(--surface); flex-direction: column; align-items: stretch; padding: 90px 28px 28px; gap: 4px; overflow-y: auto; overscroll-behavior: contain; box-shadow: -12px 0 30px rgba(0,0,0,.25); transform: translateX(100%); transition: transform .3s cubic-bezier(.22,.76,.2,1); } .nav.open { transform: translateX(0); } /* Full-height rows (not the desktop pill of inline links) so each link is a comfortably large tap target, with a hairline rule marking the CTA off from the plain links above it — the same "this is a distinct action, not just another link" treatment the desktop header already gives it via .btn-primary. */ .nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; } .nav-cta { display: flex; margin-top: 20px; } .nav-cta .btn { width: 100%; justify-content: center; } /* Hamburger → × while open, so the icon itself communicates that a second tap (or Escape, or tapping the backdrop) closes the menu — previously the same three-line icon stayed unchanged in both states. */ .menu-button[aria-expanded="true"] .menu-lines i:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-button[aria-expanded="true"] .menu-lines i:nth-child(2) { opacity: 0; } .menu-button[aria-expanded="true"] .menu-lines i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Losing header-actions below 640px (next rule) previously removed the primary CTA from mobile entirely, with no equivalent anywhere in the collapsed header — .nav-cta above is that equivalent, always reachable via the menu regardless of viewport width. */ } /* Keeps the page from scrolling behind the open drawer — set on by site.js exactly while .nav has .open, removed the instant it closes. */ html.nav-open { overflow: hidden; } /* ── Hero ────────────────────────────────────────────────────────────── */ .hero { background-size: cover; background-position: center; min-height: 78vh; display: flex; align-items: flex-end; padding-bottom: 90px; } .hero-inner { max-width: 720px; color: #fff; } .hero .eyebrow { color: #fff; opacity: .85; } .hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 6px 0 18px; } .hero .lead { color: rgba(255,255,255,.86); max-width: 560px; } .hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; } /* Hero — "split-panel" layout variant: no full-bleed background photo; a solid-surface copy panel next to a contained image panel instead. Cancels every .hero base property it would otherwise inherit (this element carries both classes: class="hero hero-split"). */ /* Deliberately NOT nested in .container — the whole point of this variant is a true edge-to-edge split, with the copy side's own padding standing in for the container gutter instead. */ .hero-split { background: var(--surface); background-image: none !important; min-height: 0; display: block; padding-bottom: 0; } .hero-split-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 78vh; } .hero-split-copy { display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(24px, 6vw, 96px); } .hero-split-copy .eyebrow { color: var(--accent); opacity: 1; } .hero-split-copy h1 { color: var(--text); } .hero-split-copy .lead { color: var(--text-2); } .hero-split-media { position: relative; overflow: hidden; border-radius: var(--radius-lg); } .hero-split-media img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } @media (max-width: 860px) { .hero-split-grid { grid-template-columns: 1fr; min-height: auto; } .hero-split-media { aspect-ratio: 4/3; order: -1; } .hero-split-copy { padding: 40px clamp(20px, 6vw, 40px); } } /* ── About ───────────────────────────────────────────────────────────── */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .about-media img { border-radius: var(--radius-lg); aspect-ratio: 4/3; object-fit: cover; } .about-copy h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 14px; } .about-copy p { color: var(--text-2); } .stat-row { display: flex; gap: 36px; margin-top: 32px; flex-wrap: wrap; } .stat strong { display: block; font-family: var(--font-display); font-size: 26px; color: var(--accent); } .stat span { color: var(--text-2); font-size: 13px; } /* About — "offset-frame" layout variant: image sits on an accent-color offset block, and the stats move out of the copy column into a full-width, hairline-divided band beneath the row. */ .about-offset-media { position: relative; } .about-offset-frame { position: relative; z-index: 1; } .about-offset-frame::before { content: ''; position: absolute; inset: 20px -20px -20px 20px; background: var(--accent); border-radius: var(--radius-lg); z-index: -1; } .about-offset-frame img { border-radius: var(--radius-lg); aspect-ratio: 4/3; object-fit: cover; } .stat-band { display: flex; margin-top: 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stat-band .stat { flex: 1; padding: 28px 24px; border-left: 1px solid var(--line); text-align: center; } .stat-band .stat:first-child { border-left: none; } .stat-band .stat strong { font-size: 32px; } @media (max-width: 900px) { /* `about.stats` is always exactly 3 items — a 2-per-row wrap would always leave a lone, off-center third item, so stack to a single column instead. */ .stat-band { flex-direction: column; } .stat-band .stat { border-left: none; border-top: 1px solid var(--line); } .stat-band .stat:first-child { border-top: none; } } /* ── Section head, cards ─────────────────────────────────────────────── */ .section-head { max-width: 640px; margin-bottom: 44px; } .section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); } .section-head p { color: var(--text-2); margin-top: 10px; } .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .card-grid-3 { grid-template-columns: repeat(3, 1fr); } .card { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); padding: 32px; } .card-icon { font-size: 24px; color: var(--accent); } .card h3 { font-size: 18px; margin: 14px 0 8px; } .card p { color: var(--text-2); font-size: 14.5px; } .team-role { display: block; color: var(--accent); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; } /* Highlights — "numbered-rows" layout variant: a hairline-divided list with a large index number instead of 3 boxed cards. */ .numbered-rows { display: flex; flex-direction: column; } .numbered-row { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); } .numbered-row:first-child { border-top: 1px solid var(--line); } .row-index { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--accent); } .row-body h3 { font-size: 18px; margin-bottom: 6px; } .row-body p { color: var(--text-2); font-size: 14.5px; } @media (max-width: 620px) { .numbered-row { grid-template-columns: 40px 1fr; } } /* Offerings — "price-rows" layout variant: a rate-card list (title/body left, price right) instead of boxed cards. */ .price-rows { display: flex; flex-direction: column; } .price-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); } .price-row:first-child { border-top: 1px solid var(--line); } .price-row-body h3 { font-size: 17px; margin-bottom: 6px; } .price-row-body p { color: var(--text-2); font-size: 14px; max-width: 480px; } .price-row .price-tag { margin-bottom: 0; white-space: nowrap; } @media (max-width: 620px) { .price-row { flex-direction: column; align-items: flex-start; gap: 8px; } } /* Team — "photo-rows" layout variant: rectangular photo + name/role/bio in a hairline-divided row instead of a circular-avatar card grid. */ .team-rows { display: flex; flex-direction: column; } .team-row { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: center; } .team-row:first-child { border-top: 1px solid var(--line); } .team-row-photo { aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); } .team-row-photo img { width: 100%; height: 100%; object-fit: cover; } .team-row-body h3 { font-size: 17px; margin-bottom: 4px; } @media (max-width: 620px) { .team-row { grid-template-columns: 72px 1fr; } } /* ── Module pool (pricing/team/process/careers/portfolio/insights): each selected module contributes one of these home teasers, plus its own dedicated page reusing the same .card-grid/.process-grid. ── */ .module-section { border-top: 1px solid var(--line); } .offering-card { position: relative; } .price-tag { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--accent); margin-bottom: 10px; } .section-cta { margin-top: 32px; display: flex; justify-content: center; } /* Team headshots (circular avatar above name/role) */ .team-photo { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; margin-bottom: 18px; background: var(--surface-2); } .team-photo img { width: 100%; height: 100%; object-fit: cover; } /* Portfolio/insight thumbnails (bleed to the card's edges, clipped by the card's own border-radius via overflow:hidden below) */ .portfolio-card, .insight-card { padding-top: 0; overflow: hidden; } .portfolio-photo, .insight-photo { margin: 0 -32px 20px; aspect-ratio: 4/3; background: var(--surface-2); } .portfolio-photo img, .insight-photo img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .card-grid, .card-grid-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .card-grid, .card-grid-3 { grid-template-columns: 1fr; } .section { padding: 60px 0; } } /* ── Process ─────────────────────────────────────────────────────────── */ .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .process-step { border-top: 3px solid var(--accent); padding-top: 18px; } .step-index { font-family: var(--font-display); font-size: 28px; color: var(--outline); font-weight: 700; } .process-step h3 { font-size: 16px; margin: 10px 0 6px; } .process-step p { color: var(--text-2); font-size: 14px; } @media (max-width: 860px) { .process-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .process-grid { grid-template-columns: 1fr; } } /* ── Testimonials ────────────────────────────────────────────────────── */ .testimonial p { font-size: 15.5px; color: var(--text); } .testimonial footer { margin-top: 16px; display: flex; flex-direction: column; } .testimonial footer span { color: var(--text-3); font-size: 13px; } /* ── FAQ ──────────────────────────────────────────────────────────────── */ .faq-list { display: flex; flex-direction: column; gap: 2px; max-width: 760px; } .faq-item { border-bottom: 1px solid var(--line); padding: 18px 0; } .faq-item summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; } .faq-item summary::after { content: '+'; color: var(--accent); font-size: 20px; } .faq-item[open] summary::after { content: '−'; } .faq-item p { color: var(--text-2); margin-top: 12px; } /* ── Contact / location ──────────────────────────────────────────────── */ .contact-grid, .contact-list .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; } .contact-item span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 6px; } .contact-item strong, .contact-item a { font-size: 15px; } @media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } } .page-hero { padding: 120px 0 60px; background: var(--surface); } .page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); } .page-hero-media { padding: 170px 0 90px; background-size: cover; background-position: center; } .page-hero-media h1 { color: #fff; } .page-hero-media .lead { color: rgba(255,255,255,.86); } .contact-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } @media (max-width: 860px) { .contact-page-grid { grid-template-columns: 1fr; } } .contact-form { display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); padding: 28px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); } .contact-form input, .contact-form textarea { font: 400 14.5px var(--font-body); padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--outline); background: var(--surface-2); color: var(--text); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); } .form-note { color: var(--accent); font-size: 14px; } @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } } .values-list { margin-top: 16px; padding-left: 20px; color: var(--text-2); } .values-list li { margin-bottom: 8px; } /* ── Final CTA ───────────────────────────────────────────────────────── */ .final-cta { background: var(--accent); color: var(--accent-ink); padding: 90px 0; text-align: center; } .final-cta h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); } .final-cta p { max-width: 560px; margin: 14px auto 28px; opacity: .9; } .final-cta .btn-secondary { background: var(--accent-ink); color: var(--accent); border-color: transparent; } /* ── Footer ──────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--line); padding: 60px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; } .footer-brand p { color: var(--text-2); font-size: 14px; margin-top: 8px; } .footer-col h3 { font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 14px; } .footer-col a { display: block; color: var(--text-2); font-size: 14px; margin-bottom: 8px; } .footer-col a:hover { color: var(--accent); } .footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12.5px; } @media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } } /* ── Cookie banner ───────────────────────────────────────────────────── */ .cookie { position: fixed; left: 20px; bottom: 20px; max-width: 380px; background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-lg); padding: 20px; box-shadow: 0 16px 40px rgba(0,0,0,.25); z-index: 80; } .cookie p { font-size: 13.5px; color: var(--text-2); margin-bottom: 14px; } .cookie-actions { display: flex; gap: 10px; } .cookie-actions .btn { flex: 1; padding: 10px 14px; font-size: 13px; } /* ── Legal pages (shared shape with casino-new:
) ── */ .legal-page { padding: 120px 0 90px; } .legal-page .container { max-width: 820px; } .legal-page h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 28px; } .legal-page h2 { font-size: 1.4rem; margin: 36px 0 12px; } .legal-page h3 { font-size: 1.1rem; margin: 20px 0 8px; } .legal-page p, .legal-page li { color: var(--text-2); } .legal-page ul, .legal-page ol { padding-left: 22px; margin: 10px 0; } .legal-page table { width: 100%; border-collapse: collapse; margin: 16px 0; } .legal-page th, .legal-page td { border: 1px solid var(--outline); padding: 10px 12px; text-align: left; font-size: 14px; } .legal-page thead { background: var(--surface-2); } .legal-page table { display: block; overflow-x: auto; } @media (max-width: 640px) { .site-header .header-actions { display: none; } }