/* ========================================================================== Generational Planning Group Palette and logo assets come from Holly's brand pack (July 2026). Copy is still draft. See _project/brief.md. ========================================================================== */ /* Holly's brand pack, July 2026. Hex values read off the supplied colour sheets. GPG is the sage; each division carries its own colour. */ :root { /* Group */ --sage: #8a9273; /* GPG brand colour */ --sage-mid: #6e7659; --sage-deep: #4c5340; /* dark panels */ --sage-dark: #343a2a; /* footer */ /* Conqueror cream paper, per Tim's reference on the call */ --paper: #f5f2e9; --paper-soft: #ebe7da; --paper-line: #ddd7c6; /* Ink */ --ink: #2f3438; /* charcoal, body text */ --ink-soft: #434a44; --ink-mute: #5f6559; /* Accent: heritage gold, drawn from the Property division palette */ --brass: #a88545; --brass-light: #c8a565; --brass-wash: rgba(168, 133, 69, 0.10); /* Division colours */ --gwm: #7c6699; /* Generational Wealth Management */ --glep: #4d6890; /* Generational Legacy & Estate Planning */ --gpd: #b39151; /* Generational Property Divisions */ --gsteps: #ae757f; /* Generational Business S.T.E.P.S */ /* Division colours darkened for small text on cream. The raw values above are display colours for the wheel and card rules, not label colours. */ --gwm-ink: #796397; --glep-ink: #4b6892; --gpd-ink: #856a37; --gsteps-ink: #9f5b67; /* Header chrome. Set as a bare RGB triple because the scrolled header and the mobile at-rest tint use the same colour at two different alphas. A division page re-points these on so the nav matches the band it sits on, rather than staying group sage on a blue or purple page. */ --header-rgb: 52, 58, 42; /* --sage-dark */ --nav-panel-bg: var(--sage-deep); --rule-light: rgba(245, 242, 233, 0.18); --rule-dark: rgba(47, 52, 56, 0.12); --header-h: 184px; --header-h-scrolled: 88px; --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --wrap: 1220px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; } body { font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.68; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.14; letter-spacing: -0.015em; } .container { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; } .eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); } .section { padding: 112px 0; } .section--tight { padding: 84px 0; } .section--ink { background: var(--sage-deep); color: var(--paper); } .section--ink h2, .section--ink h3 { color: var(--paper); } .section--soft { background: var(--paper-soft); } .section__head { max-width: 720px; margin-bottom: 56px; } .section__title { font-size: clamp(2rem, 3.6vw, 3rem); margin-top: 16px; } .section__lead { margin-top: 20px; font-size: 1.075rem; color: var(--ink-mute); max-width: 62ch; } .section--ink .section__lead { color: rgba(245, 242, 233, 0.72); } /* --- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; border: 1px solid currentColor; cursor: pointer; background: transparent; color: inherit; transition: background .25s ease, color .25s ease, border-color .25s ease; } .btn--brass { background: var(--brass); border-color: var(--brass); color: #fff; } .btn--brass:hover { background: var(--brass-light); border-color: var(--brass-light); } .btn--ink { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--paper); } .btn--ink:hover { background: var(--brass); border-color: var(--brass); color: #fff; } .btn--ghost-light { color: var(--paper); border-color: rgba(245, 242, 233, 0.45); } .btn--ghost-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .btn--ghost-dark { color: var(--ink); border-color: rgba(47, 52, 56, 0.3); } .btn--ghost-dark:hover { background: var(--sage-deep); color: var(--paper); border-color: var(--sage-deep); } /* --- Header ------------------------------------------------------------- */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-h); display: flex; align-items: center; color: var(--paper); transition: background .35s ease, box-shadow .35s ease, height .35s ease; } .header.scrolled { height: var(--header-h-scrolled); background: rgba(var(--header-rgb), 0.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(245, 242, 233, 0.12); } .header__inner { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .header__brand { display: flex; align-items: center; } .header__nav { display: flex; align-items: center; gap: 34px; } .header__nav a { font-size: 13px; font-weight: 450; letter-spacing: 0.02em; color: rgba(245, 242, 233, 0.78); transition: color .2s ease; } .header__nav a:hover, .header__nav a.active { color: var(--paper); } .header__nav .btn { font-size: 11px; padding: 11px 20px; } .header__hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; color: currentColor; } .header__hamburger span { width: 24px; height: 1.5px; background: currentColor; transition: transform .3s ease, opacity .3s ease; } /* --- Hero --------------------------------------------------------------- */ .hero { position: relative; min-height: 84vh; min-height: 84svh; display: flex; align-items: center; background: radial-gradient(120% 90% at 78% 10%, rgba(200, 165, 101, 0.22) 0%, transparent 58%), linear-gradient(165deg, #3b4130 0%, #4c5340 46%, #5d6549 100%); color: var(--paper); overflow: hidden; padding-top: var(--header-h); } /* The engraved stag as a quiet watermark in the hero's empty right side. Sits between the background and the content (content is z-index 2). */ .hero::before { content: ''; position: absolute; top: 50%; right: max(2vw, 20px); transform: translateY(-54%); width: min(44vw, 640px); aspect-ratio: 320 / 173; background: url('../img/brand/gpg-mark-cream.webp') no-repeat center / contain; opacity: 0.15; pointer-events: none; } .hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(245, 242, 233, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 242, 233, 0.035) 1px, transparent 1px); background-size: 96px 96px; mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%); pointer-events: none; } .hero__inner { position: relative; z-index: 2; width: 100%; } .hero__content { max-width: 860px; padding: 72px 0; } .hero__title { font-size: clamp(2.6rem, 6vw, 4.9rem); font-weight: 300; line-height: 1.03; letter-spacing: -0.025em; margin-top: 22px; color: var(--paper); } .hero__title em { font-style: italic; color: var(--brass-light); } .hero__lead { margin-top: 28px; font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: rgba(245, 242, 233, 0.75); max-width: 56ch; } .hero__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; } .hero__strip { position: relative; z-index: 2; border-top: 1px solid var(--rule-light); padding: 26px 0; } .hero__strip ul { display: flex; flex-wrap: wrap; gap: 12px 44px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 242, 233, 0.72); } /* --- Divisions ---------------------------------------------------------- */ .grid { display: grid; gap: 28px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .division { background: var(--paper); border: 1px solid var(--paper-line); padding: 38px 32px 34px; display: flex; flex-direction: column; transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease; } .division:hover { border-color: var(--brass); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(47, 52, 56, 0.10); } .division__num { font-family: var(--font-display); font-size: 13px; font-style: italic; color: var(--brass); margin-bottom: 18px; } .division__title { font-size: 1.42rem; margin-bottom: 14px; } .division__body { font-size: 0.965rem; color: var(--ink-mute); flex: 1; } .division__meta { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--paper-line); font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-mute); } /* --- Life stages -------------------------------------------------------- */ .stage { border-top: 1px solid var(--rule-light); padding: 40px 0; display: grid; grid-template-columns: 132px 1fr 1fr; gap: 40px; align-items: start; } .stage:last-child { border-bottom: 1px solid var(--rule-light); } .stage__label { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--brass-light); } .stage__title { font-size: 1.75rem; } .stage__body { color: rgba(245, 242, 233, 0.72); font-size: 0.99rem; } .stage__body li { position: relative; padding-left: 20px; margin-bottom: 8px; } .stage__body li::before { content: ''; position: absolute; left: 0; top: 12px; width: 9px; height: 1px; background: var(--brass); } /* --- Firms -------------------------------------------------------------- */ .firm { border-top: 1px solid var(--rule-dark); padding: 26px 0; display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: baseline; } .firm:last-child { border-bottom: 1px solid var(--rule-dark); } .firm__name { font-family: var(--font-display); font-size: 1.28rem; } .firm__body { color: var(--ink-mute); font-size: 0.965rem; } /* --- Split feature ------------------------------------------------------ */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .split__body p + p { margin-top: 18px; } .split__body { color: var(--ink-mute); } .split__quote { border-left: 2px solid var(--brass); padding: 6px 0 6px 28px; font-family: var(--font-display); font-style: italic; font-size: 1.35rem; line-height: 1.45; color: var(--ink); } .split__quote cite { display: block; margin-top: 16px; font-family: var(--font-body); font-style: normal; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); } /* --- Contact ------------------------------------------------------------ */ .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; } .contact-block h3 { font-size: 1.15rem; margin-bottom: 14px; } .contact-block p, .contact-block a { color: rgba(245, 242, 233, 0.74); font-size: 0.97rem; } .contact-block a:hover { color: var(--brass-light); } /* --- Footer ------------------------------------------------------------- */ .footer { background: var(--sage-dark); color: rgba(245, 242, 233, 0.6); padding: 64px 0 40px; font-size: 13.5px; } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(245, 242, 233, 0.1); } .footer__brand strong { font-family: var(--font-display); font-size: 20px; color: var(--paper); display: block; margin-bottom: 12px; } .footer h4 { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); margin-bottom: 16px; } .footer li { margin-bottom: 9px; } .footer a:hover { color: var(--brass-light); } .footer__legal { padding-top: 32px; font-size: 12px; line-height: 1.75; color: rgba(245, 242, 233, 0.42); } .footer__legal p + p { margin-top: 12px; } .footer__base { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 12px; } /* --- Logo intro (first visit per session only) -------------------------- */ /* Hidden by default so a no-JS visitor never sees a blocking overlay. main.js adds .show only on the first page view of a browser session. */ .intro { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; background: linear-gradient(165deg, #3b4130 0%, #4c5340 50%, #5d6549 100%); transition: opacity .7s ease, visibility .7s ease; } .intro.show { display: flex; } .intro.done { opacity: 0; visibility: hidden; pointer-events: none; } .intro__mark { width: 132px; height: 132px; opacity: 0; animation: introMark 1.5s ease forwards; } .intro__word { margin-top: 26px; text-align: center; font-family: var(--font-display); font-size: 15px; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(245, 242, 233, 0.8); opacity: 0; animation: introWord 1.1s ease .7s forwards; } .intro__inner { display: flex; flex-direction: column; align-items: center; } @keyframes introMark { 0% { opacity: 0; transform: scale(.84) rotate(-8deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0); } } @keyframes introWord { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .intro { display: none; } } /* --- Header phone (always visible, Tim's request) ----------------------- */ .header__phone { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 19px; letter-spacing: 0.01em; color: var(--paper); white-space: nowrap; } .header__phone span { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-light); } .header__phone:hover { color: var(--brass-light); } .header__right { display: flex; align-items: center; gap: 26px; } /* --- Page hero (inner pages) -------------------------------------------- */ .page-hero { background: radial-gradient(110% 100% at 82% 0%, rgba(200, 165, 101, 0.20) 0%, transparent 60%), linear-gradient(165deg, #3b4130 0%, #4c5340 60%, #5d6549 100%); color: var(--paper); padding: calc(var(--header-h) + 70px) 0 84px; } .page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 300; margin-top: 18px; color: var(--paper); } .page-hero p { margin-top: 20px; max-width: 58ch; color: rgba(245, 242, 233, 0.75); font-size: 1.05rem; } /* The eyebrow was brass on this dark band, which measures 1.78:1 against the lightest stop. Each band gets a tint of its own colour instead, every one of them at or above 4.5:1. */ .page-hero .eyebrow { color: #dedfd8; } /* Division bands. Holly's raw division colours are too light to carry cream text: Property sits at 2.65:1 and Business S.T.E.P.S at 3.32:1. So each band is that division's hue held at the same three lightness stops as the group's sage band (0.222 / 0.288 / 0.341), which keeps the colour recognisable and puts the worst case at 5.5:1. Do not swap these back for the flat --gwm/--glep/ --gpd/--gsteps values: those are for the wheel segments, which carry white display type, not body copy. */ .page-hero--gwm { background: radial-gradient(110% 100% at 82% 0%, rgba(200, 165, 101, 0.16) 0%, transparent 60%), linear-gradient(165deg, #372d44 0%, #473b58 60%, #554668 100%); } .page-hero--gwm .eyebrow { color: #c3bace; } .page-hero--glep { background: radial-gradient(110% 100% at 82% 0%, rgba(200, 165, 101, 0.16) 0%, transparent 60%), linear-gradient(165deg, #28354a 0%, #33455f 60%, #3d5271 100%); } .page-hero--glep .eyebrow { color: #bac5d6; } .page-hero--gpd { background: radial-gradient(110% 100% at 82% 0%, rgba(200, 165, 101, 0.20) 0%, transparent 60%), linear-gradient(165deg, #4a3e28 0%, #5f5033 60%, #715f3d 100%); } .page-hero--gpd .eyebrow { color: #e5ddcc; } .page-hero--gsteps { background: radial-gradient(110% 100% at 82% 0%, rgba(200, 165, 101, 0.16) 0%, transparent 60%), linear-gradient(165deg, #472a2f 0%, #5d363d 60%, #6e4048 100%); } .page-hero--gsteps .eyebrow { color: #d1b8bc; } /* The nav header carries the division too. At rest the header is transparent and sits over the band, so it is already the right colour. These re-point what it turns into once you scroll, plus the mobile menu panel, so a division page never flips back to group sage halfway down. The values are the band's own dark and mid stops, which is what the header is overlapping at the top of the page. */ body.div-gwm { --header-rgb: 55, 45, 68; --nav-panel-bg: #473b58; --cta-bg: #473b58; --division: var(--gwm); } body.div-glep { --header-rgb: 40, 53, 74; --nav-panel-bg: #33455f; --cta-bg: #33455f; --division: var(--glep); } body.div-gpd { --header-rgb: 74, 62, 40; --nav-panel-bg: #5f5033; --cta-bg: #5f5033; --division: var(--gpd); } body.div-gsteps { --header-rgb: 71, 42, 47; --nav-panel-bg: #5d363d; --cta-bg: #5d363d; --division: var(--gsteps); } /* The footer deliberately stays group sage on every page. It is the only block that says these four divisions are one company, and if it changed colour per page nothing would. The group sits at the centre of Holly's wheel; the same idea here is that a division page lands back on the group. The hairline is what stops that handover reading as a colour that ran out. Group-level pages have no --division set and fall back to the sage rule. */ .footer { border-top: 3px solid var(--division, var(--sage-mid)); } /* A hairline of the division's true colour along the bottom of its band, so the page and its wheel segment are visibly the same thing. */ .page-hero--gwm { border-bottom: 4px solid var(--gwm); } .page-hero--glep { border-bottom: 4px solid var(--glep); } .page-hero--gpd { border-bottom: 4px solid var(--gpd); } .page-hero--gsteps { border-bottom: 4px solid var(--gsteps); } /* --- Service cards ------------------------------------------------------ */ .service { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--paper-line); padding: 34px 30px 28px; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .service:hover { border-color: var(--brass); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(47, 52, 56, 0.11); } .service h3 { font-size: 1.34rem; margin-bottom: 12px; } .service p { font-size: 0.955rem; color: var(--ink-mute); flex: 1; } .service__more { margin-top: 22px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); } .service:hover .service__more { color: var(--brass-light); } /* --- Snappy bullet points (house style: no walls of text) --------------- */ .points { max-width: 62ch; } .points li { position: relative; padding-left: 26px; margin-bottom: 14px; font-size: 1.02rem; } .points li::before { content: ''; position: absolute; left: 0; top: 13px; width: 12px; height: 1px; background: var(--brass); } .points--light li { color: rgba(245, 242, 233, 0.8); } /* --- Booking CTA band --------------------------------------------------- */ .cta-band { background: var(--cta-bg, var(--sage-deep)); color: var(--paper); padding: 72px 0; } .cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .cta-band h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--paper); } .cta-band p { margin-top: 12px; color: rgba(245, 242, 233, 0.72); max-width: 48ch; } .cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; } /* --- Seminar routes ----------------------------------------------------- */ .route { border: 1px solid var(--paper-line); background: var(--paper); padding: 34px 30px; display: flex; flex-direction: column; } .route__where { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 8px; } .route__when { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); } .route__body { margin-top: 18px; font-size: 0.955rem; color: var(--ink-mute); flex: 1; } .route .btn { margin-top: 26px; } .route__qr { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--paper-line); font-size: 11.5px; color: var(--ink-mute); } /* --- Insights ----------------------------------------------------------- */ .insight { border-top: 1px solid var(--rule-dark); padding: 28px 0; display: grid; grid-template-columns: 132px 1fr auto; gap: 32px; align-items: baseline; transition: background .2s ease; } .insight:last-child { border-bottom: 1px solid var(--rule-dark); } .insight__date { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); } .insight__title { font-family: var(--font-display); font-size: 1.28rem; } .insight__title small { display: block; font-family: var(--font-body); font-size: 0.93rem; color: var(--ink-mute); margin-top: 7px; letter-spacing: 0; } .insight__more { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } .insight:hover .insight__more { color: var(--brass); } /* --- Gated form (post-seminar page) ------------------------------------- */ .gate-form { max-width: 460px; background: var(--paper); border: 1px solid var(--paper-line); padding: 40px 36px; } .gate-form label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; } .gate-form input { width: 100%; padding: 13px 14px; border: 1px solid var(--paper-line); background: #fff; font-family: var(--font-body); font-size: 15px; color: var(--ink); margin-bottom: 20px; } .gate-form input:focus { outline: none; border-color: var(--brass); } .gate-form .btn { width: 100%; } .gate-form__note { margin-top: 18px; font-size: 12px; color: var(--ink-mute); line-height: 1.6; } .gate-form__error { margin: 0 0 16px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: #7a2e2e; background: #f7e9e6; border-left: 3px solid #b05c4a; } .gate-form .btn:disabled { opacity: 0.6; cursor: wait; } .sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- Ornament (engraved line rule) -------------------------------------- */ .ornament { display: block; margin: 0 auto 34px; width: 148px; height: auto; color: var(--brass); } .ornament--light { color: var(--brass-light); opacity: .8; } /* --- Divisions: external link marker ------------------------------------ */ .division__ext { margin-top: 20px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brass); } /* --- Brand lockups ------------------------------------------------------ */ /* Two lockups, cross-faded on scroll. At the top of the page the full stacked lockup gets room to breathe. Once the header shrinks, the stacked version's wordmark would be too small to read, so it hands over to the horizontal mark-plus-name arrangement, which is legible at half the height. Both are absolutely positioned inside a sized anchor so the swap does not shift the layout. */ .header__brand { position: relative; display: block; width: 190px; height: 152px; transition: width .35s ease, height .35s ease; } .header.scrolled .header__brand { width: 268px; height: 56px; } .brand-stacked, .brand-inline { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 15px; transition: opacity .3s ease; } .brand-stacked img { height: 152px; width: auto; transition: height .35s ease; } .brand-inline { opacity: 0; pointer-events: none; white-space: nowrap; } .brand-inline img { height: 56px; width: auto; } .brand-inline__text { display: flex; flex-direction: column; line-height: 1; } .brand-inline__text strong { font-family: var(--font-display); font-size: 23px; font-weight: 500; letter-spacing: 0.01em; } .brand-inline__text small { font-family: var(--font-body); font-size: 9.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; margin-top: 6px; opacity: 0.72; } .header.scrolled .brand-stacked { opacity: 0; pointer-events: none; } .header.scrolled .brand-inline { opacity: 1; pointer-events: auto; } .intro__logo { width: 260px; max-width: 62vw; height: auto; opacity: 0; animation: introMark 1.5s ease forwards; } /* Sized by width, not height: the full lockup is nearly square, so pinning the height leaves the wordmark too small to read. */ .footer__brand img { width: 230px; max-width: 100%; height: auto; margin-bottom: 20px; } /* The four-division wheel. Sits on cream, so it needs no treatment. */ .wheel { width: 100%; max-width: 460px; height: auto; margin: 0 auto; display: block; } /* The interactive division wheel: a true SVG rebuild of Holly's artwork. Each segment is a link that brightens on hover and carries its tooltip copy in data attributes (js/main.js positions the tip). */ .wheel-wrap { position: relative; max-width: 540px; margin: 0 auto; } .gpgwheel { display: block; width: 100%; height: auto; overflow: visible; } /* Hovered quarters pull outward from the wheel, exploded-slice style, carrying their deer and lettering with them. */ .gpgwheel .wheel-hot--gwm, .gpgwheel .wheel-hot--gpd, .gpgwheel .wheel-hot--gsteps, .gpgwheel .wheel-hot--glep { transition: transform .35s ease, filter .35s ease; } .gpgwheel .wheel-hot--gwm:hover, .gpgwheel .wheel-hot--gwm:focus { transform: translate(0, -16px); } .gpgwheel .wheel-hot--gpd:hover, .gpgwheel .wheel-hot--gpd:focus { transform: translate(16px, 0); } .gpgwheel .wheel-hot--gsteps:hover, .gpgwheel .wheel-hot--gsteps:focus { transform: translate(0, 16px); } .gpgwheel .wheel-hot--glep:hover, .gpgwheel .wheel-hot--glep:focus { transform: translate(-16px, 0); } .gpgwheel .wheel-hot--gwm:hover, .gpgwheel .wheel-hot--gpd:hover, .gpgwheel .wheel-hot--gsteps:hover, .gpgwheel .wheel-hot--glep:hover { filter: drop-shadow(0 10px 20px rgba(47, 52, 56, 0.25)); } /* Hover swaps the segment's contents from the lockup to its brief: the quarter itself is the speech bubble. */ .gpgwheel .seg-idle, .gpgwheel .seg-brief { transition: opacity .35s ease; } .gpgwheel .seg-brief { opacity: 0; } .gpgwheel :is(.wheel-hot--gwm, .wheel-hot--gpd, .wheel-hot--gsteps, .wheel-hot--glep):is(:hover, :focus) .seg-idle { opacity: 0; } .gpgwheel :is(.wheel-hot--gwm, .wheel-hot--gpd, .wheel-hot--gsteps, .wheel-hot--glep):is(:hover, :focus) .seg-brief { opacity: 1; } .gpgwheel .wb { font-family: var(--font-body); font-weight: 450; } .gpgwheel .wheel-hot { cursor: pointer; outline: none; } .gpgwheel .seg-bg { transition: filter .3s ease; } .gpgwheel .wheel-hot:hover .seg-bg, .gpgwheel .wheel-hot:focus .seg-bg { filter: brightness(1.09) saturate(1.08); } .gpgwheel text { fill: #fff; } .gpgwheel .wn, .gpgwheel-brandover .wn { font-family: var(--font-display); font-weight: 400; } .gpgwheel .wc, .gpgwheel-brandover .wc { font-family: var(--font-body); font-weight: 500; } /* Wordmark over the centre photograph needs lift against the scene */ .gpgwheel .wn--over, .gpgwheel .wc--over, .gpgwheel-brandover .wn--over, .gpgwheel-brandover .wc--over { filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.6)); } /* Video clip that plays inside the wheel's centre circle. Sized to sit just inside the white ring (circle r=200 of the 1000-unit viewBox). Activated by js/main.js only if img/brand/wheel-centre.mp4 exists. */ .wheel-video { position: absolute; left: 30.5%; top: 30.5%; width: 39%; aspect-ratio: 1 / 1; /* height tracks width: always a true circle */ border-radius: 50%; overflow: hidden; opacity: 0; pointer-events: none; /* Fade OUT slowly: the clip's last frame dissolves back to the silhouette still. Fading IN stays quick (rule below). The geometry transition drives the centre-to-full-wheel bloom on click. */ transition: opacity 1.8s ease, transform .4s ease, left .9s ease, top .9s ease, width .9s ease, height .9s ease; } .wheel-video.playing { opacity: 1; transition: opacity .45s ease, transform .4s ease, left .9s ease, top .9s ease, width .9s ease, height .9s ease; } /* Hovering swells the playing circle a touch past its ring, matching the quarters' pull-out. The clicked bloom uses geometry instead. The white ring scales in step so the border stays wrapped around the swelled circle. */ .wheel-video.playing:not(.expanded) { transform: scale(1.08); } .centre-ring { transform-box: view-box; transform-origin: 50% 50%; transition: transform .4s ease; } .wheel-wrap:has(.wheel-video.playing:not(.expanded)) .centre-ring { transform: scale(1.08); } /* The ring's topmost copy: painted above the video and divider lines so the inner circle's border is always a clean unbroken circle. Hidden while the clicked bloom fills the wheel. */ .wheel-ringtop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; /* returns only after the .9s collapse has finished, else it flashes small over the still-shrinking video */ transition: opacity .5s ease 2.1s; } .wheel-wrap:has(.wheel-video.expanded) .wheel-ringtop { opacity: 0; transition: opacity .2s ease; /* hides immediately on bloom */ } /* And the four quarters breathe outward with it. The static divider lines would be left stranded in the widened gaps (visible strips around the grown circle), so they fade out and the gaps become pure space while the centre plays. */ .gpgwheel .wheel-lines { transition: opacity .35s ease; } .wheel-wrap:has(.wheel-video.playing:not(.expanded)) .wheel-lines { opacity: 0; } .wheel-wrap:has(.wheel-video.playing:not(.expanded)) .wheel-hot--gwm { transform: translate(0, -10px); } .wheel-wrap:has(.wheel-video.playing:not(.expanded)) .wheel-hot--gpd { transform: translate(10px, 0); } .wheel-wrap:has(.wheel-video.playing:not(.expanded)) .wheel-hot--gsteps { transform: translate(0, 10px); } .wheel-wrap:has(.wheel-video.playing:not(.expanded)) .wheel-hot--glep { transform: translate(-10px, 0); } /* At rest the armed video sits visible, paused on frame zero (identical to the still beneath): hover then only calls play(), with no layer crossfade left to shift anything. Applied instantly, no fade. */ .wheel-video.idle { opacity: 1; transition: none; } /* Clicked: the video blooms out of the centre to fill the whole wheel (the SVG's outer circle is r=490 of the 1000 viewBox, i.e. 98%). It takes the pointer so covered segments don't fire their tooltips, and a click anywhere on it ends the show early. */ .wheel-video.expanded { left: 1%; top: 1%; width: 98%; pointer-events: auto; cursor: pointer; } /* The clip is pre-cut square (see CLAUDE.md), so it fills the circle. translateZ pins the element to its own GPU layer from the start so rasterisation cannot change (and shift the frame) when play begins. */ .wheel-video video { width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); /* Android Chrome ignores the container's border-radius clip for composited video (seen square-spilling on Graham's S24 Ultra), and can drop the element's own radius during/after the collapse animation. clip-path survives compositing where radius fails. */ border-radius: 50%; clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); } /* The expanded full-wheel video wears a brass ring at its rim (the button gold), the big-circle counterpart of the small circle's white one. Grows in with the bloom, vanishes on the way home. */ .wheel-video::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 0 solid var(--brass); transition: border-width .9s ease; pointer-events: none; z-index: 2; } .wheel-video.expanded::before { border-width: 6px; } /* Same bottom shading the resting still carries (the SVG centreShade): without it the lower half of the circle visibly brightened the moment raw video took over, which read as a jump to a different frame. */ .wheel-video::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.45) 100%); pointer-events: none; } /* Wordmark overlay above the playing video: faded in by js/main.js over the clip's final seconds, positioned identically to the resting text so the video-to-still handoff is seamless. */ .gpgwheel-brandover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .gpgwheel-brandover text { fill: #fff; } /* Two layouts with independent fades: small text over the resting circle, the large lockup low on the grass for the bloomed wheel. Independent opacity means the ending crossfades big-into-small with no textless flash between. */ .gpgwheel-brandover .bo-small, .gpgwheel-brandover .bo-big { opacity: 0; transition: opacity 1.1s ease; } .gpgwheel-brandover.show-small .bo-small { opacity: 1; } .gpgwheel-brandover.show-big .bo-big { opacity: 1; } .wheel-tip { position: absolute; z-index: 5; border-radius: 12px; max-width: 250px; padding: 14px 16px; background: var(--ink); color: var(--paper); box-shadow: 0 14px 34px rgba(47, 52, 56, 0.28); pointer-events: none; font-size: 0.88rem; line-height: 1.5; } .wheel-tip strong { display: block; font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 4px; } .wheel-tip--fixed { left: 50%; top: -10px; transform: translate(-50%, -100%); } .wheel-hint { margin-top: 18px; font-size: 0.9rem; color: var(--ink-mute); font-style: italic; } /* No hover on touch screens: taps go straight through to each division. */ @media (hover: none) { .wheel-tip { display: none; } .wheel-hint { display: none; } } /* --- Division cards, colour-coded to the brand pack --------------------- */ .division { border-top: 3px solid var(--paper-line); } .division--gwm { border-top-color: var(--gwm); } .division--glep { border-top-color: var(--glep); } .division--gpd { border-top-color: var(--gpd); } .division--gsteps { border-top-color: var(--gsteps); } .division--gwm .division__num { color: var(--gwm); } .division--glep .division__num { color: var(--glep); } .division--gpd .division__num { color: var(--gpd); } .division--gsteps .division__num { color: var(--gsteps); } .division--gwm:hover { border-color: var(--gwm); } .division--glep:hover { border-color: var(--glep); } .division--gpd:hover { border-color: var(--gpd); } .division--gsteps:hover { border-color: var(--gsteps); } /* "Read more" labels are 11.5px uppercase, so they need the ink variants: the raw division colours measure 2.65:1 (Property) and 3.32:1 (S.T.E.P.S) against cream. These are the same hues darkened to clear 4.5:1. */ .division--gwm .division__ext { color: var(--gwm-ink); } .division--glep .division__ext { color: var(--glep-ink); } .division--gpd .division__ext { color: var(--gpd-ink); } .division--gsteps .division__ext { color: var(--gsteps-ink); } /* --- Draft banner (preview only, remove before go-live) ----------------- */ .draft-note { background: var(--brass-wash); border: 1px dashed var(--brass); color: var(--ink); padding: 18px 24px; margin: 0 auto 0; max-width: var(--wrap); font-size: 13px; } .draft-note strong { color: var(--brass); } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; gap: 40px; } .contact-grid { grid-template-columns: 1fr 1fr; } .footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 880px) { :root { --header-h: 116px; --header-h-scrolled: 74px; } /* On narrow screens the hero text runs the full width, so the stag watermark just muddies it. Drop it. */ .hero::before { display: none; } .header__nav { display: none; position: fixed; top: var(--header-h-scrolled); left: 0; right: 0; height: calc(100dvh - var(--header-h-scrolled)); background: var(--nav-panel-bg); flex-direction: column; align-items: stretch; gap: 0; padding: 28px 32px; overflow-y: auto; } .header__nav.open { display: flex; } .header__nav a { padding: 17px 0; font-size: 17px; border-bottom: 1px solid var(--rule-light); } .header__nav .btn { margin-top: 22px; border-bottom: none; font-size: 12px; padding: 15px 24px; } .header__hamburger { display: flex; } .header:not(.scrolled) { background: rgba(var(--header-rgb), 0.40); } .section { padding: 76px 0; } .section--tight { padding: 60px 0; } .stage { grid-template-columns: 1fr; gap: 16px; } .firm { grid-template-columns: 1fr; gap: 10px; } .insight { grid-template-columns: 1fr; gap: 8px; } .insight__more { display: none; } .header__phone span { display: none; } .header__phone { font-size: 17px; } .header__brand { width: 112px; height: 92px; } .header.scrolled .header__brand, .header.nav-open .header__brand { width: 68px; height: 56px; } .brand-stacked img { height: 92px; } .header.scrolled .brand-stacked img, .header.nav-open .brand-stacked img { height: 56px; } /* The horizontal lockup is ~268px wide, which will not sit next to the phone number and burger on a phone. Stay stacked throughout. */ .brand-inline { display: none; } .header.scrolled .brand-stacked { opacity: 1; pointer-events: auto; } /* With the menu open the header locks to its shrunk height, so the panel below it lines up whether or not the page has been scrolled. */ .header.nav-open { height: var(--header-h-scrolled); background: rgba(var(--header-rgb), 0.98); } .header__right { gap: 14px; } .cta-band__inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 620px) { .container { padding: 0 22px; } .header__inner { padding: 0 22px; } .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; gap: 32px; } .footer__top { grid-template-columns: 1fr; gap: 32px; } .hero__actions .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }