/* ============================================================ Growth Catalyst Information Hub — THE stylesheet. One file. Every page on the site. Change a token here and it lands on all ~70 instruction pages on the next push — which is the entire reason this site exists instead of 107 HighLevel pages. Layout follows the current hub: logo + three links + search, a rule, then a row of words that each open a box of articles. Nothing to the left, nothing to the right. Full-width white boxes at 1200. Footer on every page. Values come from docs/branding-guide.md and the 2026-07-31 checklist redesign spec. Where a value matters it is exact. ============================================================ */ :root { --bg: #F3F5F7; --surface: #FFFFFF; --ink: #1A202C; --ink-soft: #4A5568; --ink-mute: #718096; --navy: #2D3748; --footer: #1A202C; /* darker than the header — the live footer's colour */ --border: #E2E8F0; --border-strong: #CBD5E0; /* Phase palette — GC's order is Coach Catalyst's, reversed */ --p1: #FEB100; /* orange / amber */ --p2: #9500FF; /* brand purple — INTERFACE TERMS ONLY */ --p2-light: #AC38FF; --p3: #38D1FF; /* blue */ --p4: #12D4A0; /* soft green (ours) */ --p5: #3AB574; /* Coach Catalyst green */ --deep-purple: #570492; --shadow-sm: 0 1px 2px rgba(26, 32, 44, 0.06); --shadow-md: 0 4px 16px rgba(26, 32, 44, 0.08); --shadow-lg: 0 12px 40px rgba(26, 32, 44, 0.12); --font-body: 'Inter', -apple-system, sans-serif; --font-heading-display: 'Anton', sans-serif; --font-heading-sub: 'Montserrat', sans-serif; --frame: 1200px; --h1-size: clamp(34px, 5.5vw, 55px); /* 55 cap, per the checklist spec [Emma] */ --accent: var(--p1); /* per-area, set on by the build */ } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* ============================================================ Header — DARK. Logo and the three links, a white hairline, then the menu row, all in one navy block. Identical on every page. ============================================================ */ .topbar { background: var(--navy); /* Not sticky — the menu bar scrolls away with the page [Emma]. */ position: relative; z-index: 40; } .topbar-inner { max-width: var(--frame); margin: 0 auto; padding: 24px 24px 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .logo img { width: 300px; height: auto; display: block; } /* 300 wide [Emma] */ .logo-fallback { font-family: var(--font-heading-sub); font-weight: 700; font-size: 17px; color: #fff; } .toplinks { display: flex; align-items: center; gap: 4px; } .toplink { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; font-family: var(--font-heading-sub); font-size: 15px; font-weight: 700; color: #fff; text-decoration: none; } .toplink i { font-size: 13px; opacity: .9; } .toplink:hover { background: rgba(255, 255, 255, .1); } /* The Onboarding link — a call to action, not a destination they'd browse to. Only rendered for members who haven't finished. */ .toplink-cta { background: var(--accent); color: var(--navy); margin-right: 8px; } .toplink-cta i { opacity: 1; } .toplink-cta:hover { background: var(--accent); filter: brightness(1.08); } .toplink-cta[hidden] { display: none; } .search-btn { display: flex; align-items: center; gap: 10px; margin-left: 12px; min-width: 250px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 9px; background: rgba(255, 255, 255, .07); font-family: var(--font-body); font-size: 13.5px; font-weight: 400; color: rgba(255, 255, 255, .6); cursor: text; text-align: left; } .search-btn:hover { border-color: var(--accent); background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); } .search-btn i { font-size: 12.5px; } .search-btn-label { flex: 1; } .search-btn kbd { font-family: var(--font-body); font-size: 11px; font-weight: 700; padding: 1px 6px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 5px; color: rgba(255, 255, 255, .6); } /* ---------- The white hairline, then the menu row ---------- */ .menubar { background: var(--navy); /* the rule spans the whole header row, not just the 1200 frame */ border-top: 1px solid rgba(255, 255, 255, .22); /* A closed dropdown is only invisible, not un-laid-out, so a box that reached past the right edge made the DOCUMENT wider than the window. That is where the white strip down the right came from: the header and footer were 100% of the window, and the window was no longer the widest thing on the page. Clip horizontally, keep the drop-down dropping down. */ overflow-x: clip; overflow-y: visible; } .menubar-inner { max-width: var(--frame); margin: 0 auto; padding: 0 24px; display: flex; align-items: stretch; justify-content: center; /* the row of words sits centred [Emma] */ gap: 2px; flex-wrap: wrap; /* The drop-down is anchored to the ROW, not to the word you clicked. */ position: relative; } /* Deliberately NOT position:relative — see .menu-box. The panel must not be anchored to the individual word. */ .menu-item { position: static; } .menu-trigger { display: flex; align-items: center; gap: 8px; padding: 15px 16px; /* 15 above and below [Emma] */ border: 0; background: none; /* Montserrat 15px/500 — from their own nav CSS (--headlinefont). */ font-family: var(--font-heading-sub); font-size: 15px; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, .82); cursor: pointer; border-bottom: 2px solid transparent; } .menu-trigger i { font-size: 10px; opacity: .7; transition: transform .15s ease; } .menu-item:hover .menu-trigger, .menu-item.is-open .menu-trigger { color: #fff; } .menu-item.is-open .menu-trigger i { transform: rotate(180deg); } .menu-item.is-active .menu-trigger { color: #fff; border-bottom-color: var(--accent); } /* The box of articles — a white panel under the dark bar. */ /* EVERY box opens from the centre of its word [Emma]. Anchoring some to the left edge and some to the right made the panel jump sides as you moved along the row, which reads as the page moving under you. One rule, no exceptions, so the box always appears in the same place relative to the word you're pointing at. The old right-edge anchoring existed because a left-anchored box under "More" ran 154px past the viewport and widened the document. That's held by `overflow-x: clip` on .menubar now, so centring can't bring it back. translateX has to be repeated in the open state below: that state also sets transform, and a second transform REPLACES the first rather than adding to it. */ /* One panel, one place, one size — whichever word opens it [Emma]. It used to be centred on its own trigger and sized to its column count, so it moved and resized with every word, and the words near the right edge pushed it off the screen (which is what the overflow-x: clip above was papering over). Pinned to the row's own width instead: open Contacts or open Memberships and the box is in the same place, the same size, with the columns in the same four positions. */ .menu-box { position: absolute; top: 100%; left: 24px; /* line up with .menubar-inner's own padding */ right: 24px; z-index: 50; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; } .menu-item:hover .menu-box, .menu-item.is-open .menu-box { opacity: 1; visibility: visible; transform: translateY(0); } .menu-box-inner { background: var(--navy); /* their --color-kl25tsue */ border-top: 3px solid var(--accent); /* A navy box on a navy header has no edge of its own. One hairline down the sides and along the bottom gives it one, without turning it into a framed panel [Emma]. The top stays the accent rule. */ border-right: 1px solid #F3F5F7; border-bottom: 1px solid #F3F5F7; border-left: 1px solid #F3F5F7; border-radius: 0 0 12px 12px; box-shadow: var(--shadow-lg); padding: 20px 22px 16px; display: grid; /* Always four, never auto-fit. A word with two groups leaves two cells empty rather than stretching its columns to fill the row, so a heading is in the same position no matter which word you opened [Emma]. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 30px; } .menu-col-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #fff; padding-bottom: 7px; margin-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, .18); } .menu-col-head i { color: var(--accent); font-size: 12px; } .menu-link { display: block; padding: 3px 2px; font-family: var(--font-heading-sub); font-size: 14px; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .82); text-decoration: none; } .menu-link:hover { color: var(--accent); } .menu-all { grid-column: 1 / -1; margin-top: 4px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; } .menu-all i { font-size: 10px; margin-left: 4px; } /* ============================================================ Utility strip — where you are on the left, who you are on the right. The gate writes the member's name into #gc-user once they're in. ============================================================ */ .utilitybar { background: var(--surface); border-bottom: 1px solid var(--border); } .utilitybar-inner { max-width: var(--frame); margin: 0 auto; padding: 11px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .crumb { font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--ink-mute); } .userbar { font-size: 12.5px; color: var(--ink-mute); } .userbar strong { color: var(--ink); font-weight: 700; } /* ============================================================ Page — one column, 1200 wide. Nothing either side. ============================================================ */ .page { max-width: var(--frame); margin: 0 auto; padding: 22px 24px 56px; } /* ---------- Onboarding banner ---------- Only ever seen by someone mid-onboarding. It disappears on completion without anyone doing anything, which is the point: no per-person links for the team to send, nothing lingering for the member. */ .onboard-banner { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 16px 20px; border: 1px solid var(--accent); border-left: 4px solid var(--accent); border-radius: 14px; background: linear-gradient(180deg, rgba(254, 177, 0, .09), rgba(254, 177, 0, .04)); text-decoration: none; box-shadow: var(--shadow-sm); } .onboard-banner[hidden] { display: none; } .onboard-banner:hover { box-shadow: var(--shadow-md); } .onboard-icon { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--accent); color: var(--navy); font-size: 16px; } .onboard-text { flex: 1; min-width: 0; } .onboard-text strong { display: block; font-family: var(--font-heading-sub); font-weight: 700; font-size: 16px; color: var(--navy); } .onboard-text span { font-size: 13.5px; color: var(--ink-soft); } .onboard-go { flex: 0 0 auto; padding: 9px 16px; border-radius: 9px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; } .onboard-go i { font-size: 11px; margin-left: 6px; } @media (max-width: 640px) { .onboard-banner { flex-wrap: wrap; } .onboard-go { width: 100%; text-align: center; } } /* ---------- The dark box ---------- Same navy box as paid-program.html's .page-header (#2D3748, radius 16, 30/36 padding, Anton H1, accent eyebrow). Boxed and inset, NOT full width and NOT touching the header — the header is dark, so a full-bleed title would merge straight into it. */ .hero { background: var(--navy); border-radius: 16px; padding: 30px 36px; margin-bottom: 20px; } .hero-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--accent); } .hero h1 { font-family: var(--font-heading-display); text-transform: uppercase; font-weight: 400; font-size: var(--h1-size); line-height: 1.06; letter-spacing: .5px; color: #fff; margin: 0; } .hero-intro { margin: 10px 0 0; font-size: 15px; color: rgba(255, 255, 255, .85); max-width: 68ch; } .hero-intro:empty { display: none; } /* ============================================================ Content left, wayfinding right. The reading margin stays put on the left — a nav that floats through the text is irritating [Emma]. The rail follows you down and highlights the section you're in. Same 300px sticky card as paid-program.html, doing the same job for sections instead of tasks. ============================================================ */ .page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; } .page-grid.is-single { grid-template-columns: minmax(0, 1fr); } .page-main { min-width: 0; grid-column: 1; grid-row: 1; } .toc { grid-column: 2; grid-row: 1; /* both on row 1 — the rail is first in the DOM so it stacks above on mobile, and without this the article was pushed down to row 2, leaving a page-tall gap */ position: sticky; top: 24px; /* nothing above it to clear now */ background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 16px 8px 14px; max-height: calc(100vh - 48px); overflow-y: auto; } .toc-head { margin: 0 0 10px; padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--ink-mute); } .toc-link { display: block; padding: 6px 12px; border-left: 2px solid transparent; font-size: 13px; line-height: 1.45; color: var(--ink-soft); text-decoration: none; } .toc-link:hover { color: var(--ink); background: var(--bg); } .toc-link.is-current { color: var(--ink); font-weight: 700; background: var(--bg); border-left-color: var(--accent); } /* "Updated " — HighLevel moves constantly, so a reader needs to know how current this is before they follow it. */ /* Inside the dark box, under the intro. */ .hero .updated { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; padding: 0; font-size: 12px; color: rgba(255, 255, 255, .6); } .hero .updated i { font-size: 11px; } /* ============================================================ Prose — the instruction content. A full-width white box. Everything below is what a pasted-in page gets for free. ============================================================ */ .prose { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 30px 36px 34px; } .prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; } .prose p { margin: 0 0 15px; } /* H2 — Montserrat 700, Title Case, ORANGE. */ .prose h2 { font-family: var(--font-heading-sub); font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--p1); /* No margin below an orange title [Emma] — the subhead sets its own gap. */ margin: 50px 0 0; scroll-margin-top: 24px; } .prose h2:first-child { margin-top: 0; } /* H3 — the subhead. ALL CAPS navy, body size, leading accent icon. */ .prose h3 { font-family: var(--font-body); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0; color: var(--navy); /* No margin under a subhead — the body's line-height does the spacing, same rule as the Resource Hub's boxes [Emma]. */ margin: 30px 0 0; display: flex; align-items: center; gap: 5px; /* icon to text [Emma] */ } .prose h3 i { color: var(--accent); font-size: 13px; } .prose h2 + h3 { margin-top: 5px; } .prose h4 { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--navy); margin: 16px 0 4px; } /* Links — the area's accent. No underline, never bold. */ .prose a { color: var(--accent); text-decoration: none; font-weight: inherit; } .prose a:hover { text-decoration: underline; } /* Interface terms — brand purple, NOT bold. Purple means interface. */ .ui-nav, .ui-button { color: var(--p2); font-weight: 400; white-space: nowrap; } /* Numbered steps — deep purple numerals. */ .prose ol { margin: 0 0 12px; padding-left: 22px; } .prose ol > li::marker { color: var(--deep-purple); font-weight: 700; } .prose ol > li { margin: 0; } .prose ol > li > p { margin: 0 0 6px; } /* A sentence that introduces a list is part of the same block, so the list starts on the NEXT LINE — a
, not a paragraph break [Emma]. Both sides have to go to zero: sibling margins collapse to the larger of the two, so killing only the list's margin-top would leave the paragraph's 18px. */ .prose ol, .prose ul { margin-top: 0; margin-bottom: 22px; } .prose p:has(+ ol), .prose p:has(+ ul) { margin-bottom: 0; } .prose ol > li, .prose ul > li { margin-bottom: 0; } /* ...but NOT straight after a subhead. The 22px is there to separate a lead-in sentence from its steps; under a subhead it just opens a hole, and the subhead should sit as tight to its list as it does to a paragraph [Emma]. */ .prose h2 + ol, .prose h2 + ul { margin-top: 0; } /* Definition rows — "**Steps** – View all your funnel steps". Four tabs set as four paragraphs read as four unrelated thoughts; they're a list, so they get a bullet and sit tight together [Emma]. A filled square rather than an arrow: the arrow read as tentative next to bold lead-in words. */ .prose ul:has(> li > strong:first-child) { list-style: none; margin: 12px 0 20px; padding-left: 26px; } .prose ul:has(> li > strong:first-child) > li { position: relative; margin: 0 0 8px; } .prose ul:has(> li > strong:first-child) > li::before { content: '\25AA'; /* ▪ */ position: absolute; left: -26px; top: 0; color: var(--accent); font-size: 18px; line-height: 1.45; } .prose ul:has(> li > strong:first-child) > li:last-child { margin-bottom: 0; } .prose p + ul:has(> li > strong:first-child) { margin-top: 0; } .prose h3 + ol, .prose h3 + ul, .prose h4 + ol, .prose h4 + ul { margin-top: 4px; } .prose ul { margin: 0 0 12px; padding-left: 20px; } .prose ul > li::marker { color: var(--accent); } .prose ul > li { margin: 0; } .prose li > ul, .prose li > ol { margin-top: 2px; } /* Callouts — a plain markdown blockquote. Titleless, grey, 13px. */ .prose blockquote { margin: 14px 0; padding: 12px 16px; background: #EEF1F4; border-left: 3px solid var(--border-strong); border-radius: 0 8px 8px 0; font-size: 13px; color: var(--ink-soft); } .prose blockquote p { margin: 0 0 6px; } .prose blockquote > :last-child { margin-bottom: 0; } .prose blockquote a { color: var(--ink); text-decoration: underline; } .prose img { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); margin: 22px auto; /* centred */ } .prose p:has(> img:only-child) { text-align: center; } .prose table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; } .prose th, .prose td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .prose th { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--navy); border-bottom: 1px solid var(--border-strong); } .prose hr { border: 0; border-top: 1px solid var(--border); margin: 26px 0; } .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; } /* ---------- The review checklist ---------- */ .rev-summary { font-size: 14px; color: var(--ink-soft); margin: 0 0 16px; } .rev-wrap { overflow-x: auto; } .rev { width: 100%; border-collapse: collapse; font-size: 13.5px; } .rev th { text-align: left; padding: 8px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-mute); border-bottom: 1px solid var(--border-strong); white-space: nowrap; } .rev td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .rev tbody tr:hover { background: var(--bg); } .rev td a { color: var(--ink); text-decoration: none; font-weight: 600; } .rev td a:hover { color: var(--accent); } .rev-sec { color: var(--ink-mute); font-size: 12.5px; } .rev-note { display: block; font-size: 12px; color: var(--ink-mute); font-weight: 400; } .rev-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--ink-soft); } .rev-pill.rev-ok { background: rgba(18, 212, 160, .14); border-color: var(--p4); color: #0b7a5d; } .rev-pill.rev-warn { background: rgba(254, 177, 0, .16); border-color: var(--p1); color: #8a6100; } .rev-pill.rev-bad { background: rgba(87, 4, 146, .1); border-color: var(--deep-purple); color: var(--deep-purple); } /* Card grid — the home page's resource grid and section listings. */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 16px 0; } .card { display: block; padding: 18px 18px 16px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; background: var(--surface); box-shadow: var(--shadow-sm); } .card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); } .card i { color: var(--accent); font-size: 18px; } .card strong { display: block; font-family: var(--font-heading-sub); font-weight: 700; font-size: 15px; color: var(--navy); margin: 8px 0 3px; } .card span { display: block; font-size: 13px; color: var(--ink-mute); line-height: 1.5; } /* ---------- Tags, at the bottom of a page ---------- */ .tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding: 0 6px; } .tags-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-mute); } .tag { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 12.5px; color: var(--ink-soft); text-decoration: none; } .tag:hover { border-color: var(--accent); color: var(--ink); } /* ============================================================ Search — the overlay behind the nav button, and the /search page. ============================================================ */ .search-overlay { position: fixed; inset: 0; /* Above the header, not level with it. At z-index 100 against the header's 40 the panel still came out underneath on the app pages, which put the input row behind the menu bar: you could not see what you were typing, and the results sat flush against the nav as though they belonged to it [Emma]. */ z-index: 200; background: rgba(26, 32, 44, .55); /* Clear of the header (135px) with room to breathe, so the field is always visible and the results never touch the menu. */ padding: 168px 20px 24px; overflow-y: auto; } @media (max-width: 860px) { .search-overlay { padding-top: 96px; } } .search-panel { max-width: 680px; margin: 0 auto; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; } .search-field { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .search-field i { color: var(--ink-mute); font-size: 14px; } .search-field input { flex: 1; border: 0; outline: none; font-family: var(--font-body); font-size: 16px; color: var(--ink); background: none; } .search-field button { border: 0; background: none; color: var(--ink-mute); cursor: pointer; font-size: 15px; } .search-field-inline { border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); margin: 12px 0 18px; max-width: 520px; } .search-results { max-height: 60vh; overflow-y: auto; } .search-hit { display: block; padding: 13px 20px; border-bottom: 1px solid var(--border); text-decoration: none; } .search-hit:hover { background: var(--bg); } .search-hit-section { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); } .search-hit strong { display: block; font-size: 14.5px; color: var(--navy); margin: 2px 0 1px; } .search-hit span { display: block; font-size: 13px; color: var(--ink-mute); line-height: 1.5; } .search-hit-tags { font-size: 11.5px !important; color: var(--ink-mute); margin-top: 3px; } .search-empty { padding: 18px 20px; font-size: 13.5px; color: var(--ink-mute); margin: 0; } #search-page .search-results { max-height: none; } #search-page .search-hit { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; } /* ============================================================ Footer — near-black, Montserrat throughout, 60/20/20. ============================================================ */ .sitefoot { background: var(--footer); color: #fff; /* all Montserrat text is white [Emma] */ margin-top: 32px; font-family: var(--font-heading-sub); /* Montserrat [Emma] */ font-size: 15px; } .sitefoot-inner { max-width: var(--frame); margin: 0 auto; /* 40px more before the rule, so the legal bar reads as an afterthought rather than a fourth column [Emma]. No side padding — the columns sit flush to the frame [Emma]. */ padding: 44px 0 78px; display: grid; /* the two link columns are a fixed 225px each — wide enough that a longer label can't wrap — and the paragraph takes whatever is left [Emma] */ grid-template-columns: minmax(0, 1fr) 225px 225px; gap: 0 0; align-items: start; } .foot-logo { width: 300px; height: auto; display: block; margin-bottom: 25px; } .foot-intro { padding-right: 100px; } .foot-intro p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: #fff; } .foot-intro strong { color: #fff; font-weight: 700; } .foot-intro a { color: #fff; font-weight: 700; text-decoration: none; } .foot-intro a:hover { color: var(--accent); } .foot-col-stack { display: block; } .foot-col + .foot-col { margin-top: 26px; } .foot-col h2 { font-family: var(--font-heading-sub); font-weight: 700; font-size: 15px; letter-spacing: .5px; text-transform: uppercase; color: var(--col, var(--accent)); margin: 0 0 3px; } .foot-link { display: flex; align-items: center; gap: 9px; padding: 0; font-size: 15px; line-height: 1.4; color: #fff; text-decoration: none; } /* 5px BETWEEN links — one gap, not 5px on each side of every link [Emma] */ .foot-link + .foot-link { margin-top: 3px; } .foot-link i { width: 16px; font-size: 14px; color: var(--col, var(--accent)); text-align: center; } .foot-link:hover { color: var(--col, var(--accent)); } /* the rule sits at section width, not edge to edge */ .sitefoot-legal-inner { max-width: var(--frame); margin: 0 auto; padding: 18px 24px 24px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; /* the legal wording is Inter 13 — the only non-Montserrat in here [Emma] */ font-family: var(--font-body); font-size: 13px; color: #fff; } /* Which build is on the site, beside the copyright. White at 20% so it is there when you go looking and invisible when you are not [Emma]. */ .build-id { color: rgba(255, 255, 255, .2); font-variant-numeric: tabular-nums; } /* the copyright line and the legal links read as one block, not two [Emma] */ .legal-text { line-height: 1.3; } .legal-text nav { display: flex; gap: 6px; margin-top: 3px; } .legal-text nav .legal-link + .legal-link::before { content: '//'; margin-right: 6px; color: rgba(255, 255, 255, .35); } .legal-link { font-family: var(--font-body); font-size: 13px; color: #fff; text-decoration: none; } .legal-link:hover { color: var(--accent); } /* 22 × 22 with a 20px gap [Emma] — sized on the box, not just the glyph, so the four icons occupy the same square whatever their letterform. */ .socials { display: flex; gap: 20px; align-items: center; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #fff; font-size: 22px; line-height: 1; text-decoration: none; } .social-link i { width: 22px; height: 22px; line-height: 22px; text-align: center; } .social-link span { display: none; } .social-link:hover { color: var(--accent); } @media (max-width: 860px) { .sitefoot-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; } .foot-intro { padding-right: 0; } } /* ============================================================ Responsive ============================================================ */ /* Under 940 the rail becomes a horizontal strip above the article — the checklist spec's rule, and why the rail is first in the DOM. */ @media (max-width: 940px) { .page-grid { grid-template-columns: minmax(0, 1fr); } .page-main, .toc { grid-column: 1; } .toc { position: static; max-height: none; display: flex; gap: 6px; overflow-x: auto; padding: 10px; margin-bottom: 16px; } .toc-head { display: none; } .toc-link { flex: 0 0 auto; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; } .toc-link.is-current { border-left: 0; border-bottom-color: var(--accent); } } @media (max-width: 860px) { .topbar-inner { padding: 12px 16px; flex-wrap: wrap; } .search-btn { min-width: 0; margin-left: 8px; } .search-btn-label, .search-btn kbd { display: none; } .menubar-inner { padding: 0 8px; overflow-x: auto; flex-wrap: nowrap; } /* Stacked, full-width — the centring transform would drag it off-screen. */ .menu-box { position: static; min-width: 0; transform: none; } .menu-item:hover .menu-box, .menu-item.is-open .menu-box { transform: none; } .menu-item:hover .menu-box { opacity: 0; visibility: hidden; } .menu-item.is-open .menu-box { opacity: 1; visibility: visible; } .menu-box-inner { grid-template-columns: 1fr; border-radius: 12px; } .page { padding: 16px 14px 40px; } .hero { padding: 22px 22px; } .prose { padding: 22px 20px 26px; } } @media print { .topbar, .contents, .sitefoot, .search-overlay { display: none; } .prose { border: 0; box-shadow: none; padding: 0; } .hero { background: none; padding: 0 0 12px; } .hero h1, .hero-intro { color: #000; } } /* ============================================================ The access gate. Everything but #gc-gate is hidden until the visitor is known — see gate.js for what this does and does not do. ============================================================ */ .gc-locked body > *:not(#gc-gate) { display: none !important; } .gc-locked, .gc-locked body { background: var(--navy); } .gate-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--navy); z-index: 999; } .gate-card { width: 100%; max-width: 520px; text-align: center; color: #fff; } .gate-logo { width: 300px; max-width: 100%; height: auto; margin: 0 auto 34px; display: block; } .gate-card h1 { font-family: var(--font-heading-display); /* Anton — the token is -display */ font-size: 38px; font-weight: 400; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 12px; } .gate-card p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .78); margin: 0 0 22px; } .gate-row { display: flex; gap: 10px; margin-bottom: 16px; } #gate-email { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 15px; padding: 13px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff; } #gate-email::placeholder { color: rgba(255, 255, 255, .45); } #gate-email:focus { outline: none; border-color: var(--accent); } #gate-btn { font-family: var(--font-heading-sub); font-weight: 700; font-size: 15px; padding: 13px 22px; border: 0; border-radius: 10px; background: var(--accent); color: var(--navy); cursor: pointer; white-space: nowrap; } #gate-btn:disabled { opacity: .6; cursor: default; } .gate-note { font-size: 13px !important; color: rgba(255, 255, 255, .55) !important; margin: 0 !important; } .gate-msg { margin: 18px 0 0 !important; padding: 12px 16px; border-radius: 10px; background: rgba(255, 255, 255, .07); border-left: 3px solid var(--accent); text-align: left; font-size: 14px !important; color: #fff !important; } @media (max-width: 560px) { .gate-row { flex-direction: column; } .gate-card h1 { font-size: 30px; } } /* One card, full width, through to the Resource Hub. */ .card-wide { grid-column: 1 / -1; } /* ---------- Funnel template previews ---------- A thumbnail, its name and a preview link, as the source page had them. Flattening them to a list of names lost the only thing that helps you choose: what the template looks like [Emma]. */ .prose .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; margin: 4px 0 26px; } .prose .tpl { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); text-decoration: none; transition: border-color .12s, box-shadow .12s, transform .12s; } .prose .tpl:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); } .prose .tpl img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; display: block; margin: 0; border-radius: 0; border: 0; } .prose .tpl-name { font-family: var(--font-heading-sub); font-weight: 700; font-size: 14px; color: var(--ink); padding: 12px 14px 0; } .prose .tpl-cta { font-size: 12.5px; font-weight: 600; color: var(--accent); padding: 2px 14px 13px; } @media (max-width: 560px) { .prose .tpl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } }