/* Board surface tokens — single source for BOTH boards (editorial 2026-07-13): ground + hairline taken from the Data Board stat wall. The boards must never drift apart again. */ :root{ --board-ground: var(--gt-navy, #0D0C1A); --board-line: rgba(232,228,216,0.14); } /* ========================================================================= GridteamAI — Marketing site styles Loaded after colors_and_type.css. UK English. Hand-written, no Tailwind. ========================================================================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--gt-surface-1); color: var(--gt-fg-1); } img { max-width: 100%; display: block; } /* Sector accents — overridable per page on */ :root { --sector-accent: var(--gt-blue); --sector-accent-hover: var(--gt-blue-hover); --sector-paper: var(--gt-surface-2); } /* ───────── Layout ───────── */ .site { overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; } .container--narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; } .section { padding: 128px 0; } .section--tight { padding: 96px 0; } .section--dark { background: var(--gt-surface-ink, var(--gt-ink)); color: var(--gt-fg-on-ink, var(--gt-fg-on-dark)); position: relative; } .section--dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0) 0 0 / 6px 6px; opacity: 0.9; } .section--dark > * { position: relative; } .section--paper { background: var(--sector-paper); } /* ───────── Eyebrow (§ MARK) ───────── */ .eyebrow { font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--gt-fg-1); display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 5px; border: 1px solid currentColor; border-radius: 9999px; white-space: nowrap; } .eyebrow::first-letter { color:inherit; } .eyebrow--accent { color: var(--sector-accent); border-color: currentColor; opacity: 0.95; } .section--dark .eyebrow { color: var(--gt-fg-on-ink); border-color: rgba(247,245,240,0.5); } .section--dark .eyebrow::first-letter { color:inherit; } /* ── Dark-band contrast contract ── Any text inside an ink band inherits on-ink colours by default. Headings warm off-white, secondary text 72% tint, muted 50%. No element inside a dark band may use the light-page ink colour. */ .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4, .section--dark .h-mega, .section--dark .h-display, .section--dark .h-section, .section--dark .h-card, .section--dark .h-card-lg, .section--dark .card__title, .section--dark .step__title { color: var(--gt-fg-on-ink); } .section--dark p, .section--dark li, .section--dark .card__body, .section--dark .step__body { color: var(--gt-fg-on-ink-2); } .section--dark .gt-small, .section--dark .gt-mono, .section--dark .card__label, .section--dark .step__num { color: var(--gt-fg-on-ink-3); } .section--dark a:not(.btn):not(.card__cta) { color: var(--gt-fg-on-ink); } .section--dark a:not(.btn):not(.card__cta):hover { color: #FFFFFF; } .section--paper .eyebrow { border-color: rgba(0,0,0,0.16); } /* WARMTH PASS badge utility — pill-outline section badge / sector chip */ .gt-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; font-weight:500; color:var(--gt-fg-2); border:1px solid currentColor; border-radius:9999px; padding:4px 11px; white-space:nowrap; } .gt-badge--grad{ background:var(--gt-spotlight); border-color:transparent; color:#1F5A54; } .grad-panel{ background:var(--gt-spotlight); } /* ───────── Headlines ───────── */ .h-mega { font-family: var(--gt-font-display); font-size: clamp(48px, 6vw, 80px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; margin: 24px 0 0; text-wrap: balance; } .h-display { font-family: var(--gt-font-display); font-size: clamp(40px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -0.022em; font-weight: 700; margin: 24px 0 0; text-wrap: balance; } .h-section { font-family: var(--gt-font-display); font-size: clamp(34px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; margin: 24px 0 0; text-wrap: balance; } .h-card { font-family: var(--gt-font-display); font-size: 22px; line-height: 1.28; letter-spacing: -0.012em; font-weight: 600; margin: 0; } .h-card-lg { font-family: var(--gt-font-display); font-size: 28px; line-height: 1.2; letter-spacing: -0.014em; font-weight: 600; margin: 0; } .lead { font-size: 19px; line-height: 30px; color: var(--gt-fg-2); max-width: 680px; margin: 24px 0 0; font-weight: 400; } .section--dark .lead { color: var(--gt-fg-on-ink-2, rgba(255,255,255,0.72)); } .sub { font-size: 17px; line-height: 26px; color: var(--gt-fg-2); max-width: 640px; margin: 16px 0 0; } .section--dark .sub { color: var(--gt-fg-on-ink-2, rgba(255,255,255,0.7)); } p { margin: 0; } /* ───────── Buttons ───────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--gt-font-body); font-size: 14px; line-height: 1; font-weight: 500; padding: 16px 24px; border-radius: 9999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 160ms var(--gt-ease-out), color 160ms, transform 100ms, border-color 160ms; } .btn:active { transform: scale(0.985); } .btn svg, .btn i { width: 14px; height: 14px; } .btn--primary{ background:var(--gt-action,#5EDDC9); color:var(--gt-ink,#0A0A0A); border:1px solid transparent; } /* ACTION role: teal-green fill + ink text — every act button site-wide */ .btn--primary:hover{ background:var(--gt-action-hover,#5EDDC9); color:var(--gt-ink,#0A0A0A); } .btn--accent { background: var(--gt-action); color: var(--gt-ink); } /* accent-as-button killed (charter): every act button is teal */ .btn--accent:hover { background: var(--gt-action-hover); color: var(--gt-ink); } .btn--secondary{ background:transparent; color:var(--gt-fg-1); border:1px solid color-mix(in srgb, var(--gt-action) 55%, transparent); } .btn--secondary:hover{ background:var(--gt-action); border-color:var(--gt-action); color:var(--gt-ink); } .btn--white { background: var(--gt-teal); color: var(--gt-ink); } .btn--white:hover { background: #3BD6BD; } .btn--ghost{ background:transparent; color:var(--gt-fg-1); border:1px solid color-mix(in srgb, var(--gt-action) 55%, transparent); } .btn--ghost:hover{ background:var(--gt-action); border-color:var(--gt-action); color:var(--gt-ink); } .section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.25); } .section--dark .btn--ghost:hover { background: rgba(255,255,255,0.06); } .btn--lg { padding: 16px 32px; font-size: 15px; } .btn--sm { padding: 12px 16px; font-size: 13px; } .btn--link { display: inline-flex; align-items: center; gap: 8px; color: var(--gt-fg-1); font-weight: 500; font-size: 14px; border-bottom: 1px solid currentColor; padding: 0 0 4px; border-radius: 0; background: transparent; } .btn--link:hover { color: var(--sector-accent); } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; align-items: center; } /* ───────── Nav ───────── */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms, background 200ms; } .nav.is-scrolled { border-bottom-color: var(--gt-border); background: rgba(255,255,255,0.95); } .nav__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 16px 32px; transition: padding 200ms var(--gt-ease-out); } .nav.is-scrolled .nav__inner { padding: 8px 32px; } .nav__logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: 0 0 auto; } .nav__logo img { height: 22px; width: auto; flex: none; } .nav__center { display: flex; align-items: center; gap: 4px; margin: 0 auto; } .nav__item { font-family: var(--gt-font-body); font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 8px; color: var(--gt-fg-1); text-decoration: none; transition: background 120ms, color 120ms; white-space: nowrap; } .nav__item:hover { background: var(--gt-n-150); color: var(--gt-fg-1); } .nav__item.is-active { color: var(--gt-fg-1); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; text-decoration-color: var(--gt-ink); } .nav__right { display: flex; align-items: center; gap: 8px; } /* Sectors dropdown */ .nav__dropdown { position: relative; } .nav__item--dd { display: inline-flex; align-items: center; gap: 8px; font-family: var(--gt-font-body); font-size: 14px; font-weight: 500; line-height: 1; padding: 8px 16px; border-radius: 8px; color: var(--gt-fg-1); background: transparent; border: 0; cursor: pointer; transition: background 120ms, color 120ms; } .nav__item--dd:hover { background: var(--gt-n-150); } .nav__item--dd.is-active { color:var(--gt-fg-1); } .nav__item--dd .chev { width: 13px; height: 13px; transition: transform 180ms var(--gt-ease-out); } .nav__dropdown.is-open .chev { transform: rotate(180deg); } .nav__menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 288px; background: #fff; border: 1px solid var(--gt-border); border-radius: 16px; box-shadow: var(--gt-shadow-lg); padding: 8px; display: flex; flex-direction: column; gap: 4px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 170ms var(--gt-ease-out), transform 170ms var(--gt-ease-out), visibility 170ms; z-index: 60; } .nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .nav__dropdown.is-open .nav__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav__menu-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 10px; text-decoration: none; transition: background 120ms; } .nav__menu-item:hover { background: var(--gt-surface-2); } .nav__menu-num { font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.12em; color: var(--gt-fg-3); text-transform: uppercase; } .nav__menu-title { font-family: var(--gt-font-display); font-size: 15px; font-weight: 600; color: var(--gt-fg-1); letter-spacing: -0.01em; } .nav__menu-sub { font-size:13px; line-height: 1.35; color: var(--gt-fg-3); } /* ───────── Hero ───────── */ .hero { padding: 96px 0 64px; } .hero--paper { background: var(--sector-paper); padding-bottom: 96px; border-bottom: 1px solid rgba(0,0,0,0.06); } .hero__inner { max-width: 880px; } .hero__inner--wide { max-width: 1040px; } /* ───────── Workflow canvas (Home) ───────── */ .canvas-wrap { margin-top: 64px; } .canvas { position: relative; border: none; border-radius: 0; background: transparent; padding: 8px 0 12px; } .canvas__head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; } .canvas__head h3 { margin: 0; font-family: var(--gt-font-display); font-size: 22px; font-weight: 600; } .canvas__head p { font-size: 14px; color: var(--gt-fg-3); } /* ───────── Card grids ───────── */ .grid { display: grid; gap: 16px; margin-top: 64px; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--tight { gap: 16px; } /* Light bordered card */ .card { background: #fff; border: 1px solid var(--gt-border); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--gt-shadow-soft); transition: border-color 160ms, box-shadow 160ms, transform 160ms; } .card:hover { border-color: var(--gt-border-strong); box-shadow: var(--gt-shadow-md); } .card__label { font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.08em; color: var(--gt-fg-3); text-transform: uppercase; } .card__title { font-family: var(--gt-font-display); font-size: 22px; font-weight: 600; color: var(--gt-fg-1); margin: 0; line-height: 1.25; letter-spacing: -0.01em; } .card__body { font-size: 15px; line-height: 23px; color: var(--gt-fg-2); margin: 0; } .card__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--gt-border); } .card__foot--mono { font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.08em; color: var(--gt-fg-3); text-transform: uppercase; } .card__price { font-family: var(--gt-font-display); font-size: 18px; font-weight: 600; color: var(--gt-fg-1); letter-spacing: -0.01em; } .card__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--gt-fg-1); border-bottom: 1px solid currentColor; padding-bottom: 4px; text-decoration: none; align-self: flex-start; transition: color 120ms; } .card__cta:hover { color: var(--sector-accent); } /* Numbered step / use-case card */ .step { background: #fff; border: 1px solid var(--gt-border); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--gt-shadow-soft); } .step__num { font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.12em; color: var(--gt-fg-3); text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--gt-border); } .step__title { font-family: var(--gt-font-display); font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; } .step__body { font-size: 14px; line-height: 22px; color: var(--gt-fg-2); margin: 0; } /* Sector tile */ .tile { background: var(--gt-n-100); border-radius:var(--gt-radius-lg); padding: 48px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; border: 1px solid transparent; transition: border-color 160ms; text-decoration: none; color: var(--gt-fg-1); } .tile:hover { border-color: var(--gt-border-strong); color: var(--gt-fg-1); } .tile h3 { font-family: var(--gt-font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.1; } .tile p { font-size: 15px; line-height: 23px; color: var(--gt-fg-2); margin: 0; max-width: 380px; } .tile__more { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; } .tile--energy { border-color: rgba(124,45,18,0.18); background: #FDF6F0; } .tile--energy:hover { border-color: rgba(124,45,18,0.35); } .tile--energy .tile__more { color: #7C2D12; } .tile--dc { border-color: rgba(30,58,138,0.16); background: #EEF1F8; } .tile--dc:hover { border-color: rgba(30,58,138,0.32); } .tile--dc .tile__more { color: #1E3A8A; } .tile--renew { border-color: rgba(31,90,60,0.18); background: #EDF3EE; } .tile--renew:hover { border-color: rgba(31,90,60,0.35); } .tile--renew .tile__more { color: #1F5A3C; } .tile--util { border-color: rgba(17,94,103,0.18); background: #E9F1F2; } .tile--util:hover { border-color: rgba(17,94,103,0.35); } .tile--util .tile__more { color: #115E67; } .tile__corner { position: absolute; top: 24px; right: 28px; font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.12em; color: var(--gt-fg-3); text-transform: uppercase; } /* Pill / chip */ .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 9999px; background: #fff; border: 1px solid var(--gt-border); font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.04em; color: var(--gt-fg-1); } .pill--dark { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #fff; } .pill--accent { background: var(--sector-accent); color: #fff; border-color: var(--sector-accent); } .pill--soft { background: var(--gt-n-100); color: var(--gt-fg-1); border-color: transparent; font-family: var(--gt-font-body); font-weight: 500; } /* ───────── Pricing table ───────── */ .pricing { margin-top: 64px; border: 1px solid var(--gt-border); border-radius: 16px; overflow: hidden; background: #fff; } .pricing__head, .pricing__row { display: grid; grid-template-columns: 1.4fr 0.9fr 2fr; padding: 24px 32px; align-items: center; border-bottom: 1px solid var(--gt-border); gap: 24px; } .pricing__head { background: var(--gt-n-100); font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.12em; color: var(--gt-fg-3); text-transform: uppercase; } .pricing__row:last-child { border-bottom: 0; } .pricing__product { font-family: var(--gt-font-display); font-size: 16px; font-weight: 600; color: var(--gt-fg-1); } .pricing__price { font-family: var(--gt-font-display); font-size: 16px; font-weight: 600; color: var(--gt-fg-1); } .pricing__price--free { color: var(--gt-fg-1); font-family: var(--gt-font-mono); font-weight: 500; } .pricing__incl { font-size: 14px; line-height: 21px; color: var(--gt-fg-2); } .pricing__row--feat { background: #FFFFFF; } /* ───────── Stat (big number) ───────── */ .stat-card { background: #fff; border: 1px solid var(--gt-border); border-radius: 12px; padding: 32px 32px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--gt-shadow-soft); } .stat-card__num { font-family: var(--gt-font-display); font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--gt-fg-1); } .stat-card__desc { font-size: 14px; line-height: 21px; color: var(--gt-fg-2); } .stat-card__src { font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.06em; color: var(--gt-fg-3); text-transform: uppercase; margin-top: auto; } /* ───────── Featured editorial card (Gap report) ───────── */ .featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; margin-top: 64px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); } .featured__cover { background: #F5F3EE; color: var(--gt-ink); padding: 64px 48px; position: relative; display: flex; flex-direction: column; gap: 24px; min-height: 480px; } .featured__cover--sage { background: #EEF1EC; } .featured__cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 1px 1px, rgba(10,10,10,0.06) 1px, transparent 0) 0 0 / 8px 8px; opacity: 0.7; } .featured__cover > * { position: relative; } .featured__cover .eyebrow { color: var(--sector-accent); border-color: currentColor; } .featured__cover h2 { font-family: var(--gt-font-display); font-size: 48px; line-height: 1.04; letter-spacing: -0.024em; font-weight: 700; margin: 12px 0 0; max-width: 380px; } .featured__cover .meta { font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.08em; color: var(--gt-fg-3); text-transform: uppercase; margin-top: auto; } .featured__body { background: #fff; padding: 64px 48px; display: flex; flex-direction: column; gap: 24px; } .featured__body p { font-size: 16px; line-height: 25px; color: var(--gt-fg-2); } .featured__body .price { font-family: var(--gt-font-display); font-size: 20px; font-weight: 600; color: var(--gt-fg-1); margin-top: 12px; } /* ───────── Hex tile grid (sources) ───────── */ .hexes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; justify-content: center; } .hex { min-width: 132px; padding: 12px 24px; border: 1px solid var(--gt-border); background: #fff; border-radius: 9999px; font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.06em; color: var(--gt-fg-1); text-transform: uppercase; text-align: center; white-space: nowrap; } .section--dark .hex { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); color: #fff; } /* ───────── Quote (sample insight) ───────── */ .quote { font-family: var(--gt-font-display); font-size: clamp(28px, 3vw, 38px); line-height: 1.25; letter-spacing: -0.014em; font-weight: 500; color: var(--gt-fg-on-dark); margin: 48px 0 0; text-wrap: pretty; } .quote__cite { font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.12em; color: rgba(255,255,255,0.55); text-transform: uppercase; margin-top: 32px; display: block; } /* ───────── Final CTA card ───────── */ .final-cta { background: var(--gt-surface-ink, var(--gt-ink)); color: var(--gt-fg-on-ink, #fff); border-radius: 24px; padding: 96px 64px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; position: relative; overflow: hidden; margin: 0 0 96px; } .final-cta--accent { background: var(--sector-accent); } .final-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0) 0 0 / 6px 6px; } .final-cta > * { position: relative; } .final-cta .eyebrow { color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.3); } .final-cta h2 { font-family: var(--gt-font-display); font-size: clamp(36px, 4vw, 56px); line-height: 1.06; letter-spacing: -0.024em; font-weight: 700; margin: 24px 0 0; color: #fff; } .final-cta__action { display: flex; justify-content: flex-end; } /* ───────── Subscribe inline ───────── */ .subscribe { display: flex; gap: 8px; margin-top: 32px; max-width: 480px; background: #fff; padding: 8px; border-radius: 9999px; border: 1px solid var(--gt-border); } .subscribe input { flex: 1; border: 0; outline: none; padding: 12px 24px; font-size: 14px; font-family: var(--gt-font-body); color: var(--gt-fg-1); background: transparent; } .subscribe input::placeholder { color: var(--gt-fg-3); } .subscribe .btn { padding: 12px 24px; } /* ───────── Footer ───────── */ .footer { background: var(--gt-surface-2); padding: 96px 0 32px; } .footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px; padding-bottom: 64px; border-bottom: 1px solid var(--gt-border); } .footer__brand img { height: 22px; margin-bottom: 16px; } .footer__brand p { font-size: 13px; line-height: 20px; color: var(--gt-fg-2); max-width: 280px; font-family: var(--gt-font-body); } .footer__col h5 { font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.12em; color: var(--gt-fg-3); text-transform: uppercase; margin: 0 0 16px; } .footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .footer__col a { color: var(--gt-fg-1); font-size: 14px; text-decoration: none; } .footer__col a:hover { color:#fff; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; font-size: 13px; color: var(--gt-fg-3); font-family: var(--gt-font-mono); letter-spacing: 0.04em; flex-wrap: wrap; gap: 16px; } .footer__badges { display: flex; gap: 24px; flex-wrap: wrap; letter-spacing: 0.1em; } .footer__badges span { white-space: nowrap; } /* ───────── Compliance/contact dark card ───────── */ .comp-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius:var(--gt-radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 16px; } .comp-card .label { font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.12em; color: rgba(255,255,255,0.55); text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.12); } .comp-card h3 { font-family: var(--gt-font-display); font-size: 20px; font-weight: 600; color: #fff; margin: 0; } .comp-card p { font-size: 14px; line-height: 21px; color: rgba(255,255,255,0.65); margin: 0; } .comp-card a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); font-family: var(--gt-font-display); font-size: 18px; font-weight: 600; align-self: flex-start; padding-bottom: 4px; } .comp-card a:hover { border-bottom-color: #fff; } /* ───────── Hotspot card (Data Centres) ───────── */ .hotspot { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 48px 32px; display: flex; flex-direction: column; gap: 16px; min-height: 280px; } .hotspot .label { font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.12em; color: rgba(255,255,255,0.55); text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.12); } .hotspot h3 { font-family: var(--gt-font-display); font-size: 28px; font-weight: 600; line-height: 1.15; margin: 0; color: #fff; letter-spacing: -0.014em; } .hotspot p { font-size: 14px; line-height: 21px; color: rgba(255,255,255,0.7); margin: 0; } /* ───────── Briefing card (small editorial) ───────── */ .briefing { border: 1px solid var(--gt-border); border-radius: 12px; background: #fff; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--gt-shadow-soft); transition: border-color 160ms, box-shadow 160ms; } .briefing:hover { border-color: var(--gt-border-strong); } .briefing .meta { font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.08em; color: var(--gt-fg-3); text-transform: uppercase; } .briefing h3 { font-family: var(--gt-font-display); font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: var(--gt-fg-1); letter-spacing: -0.01em; } .briefing .foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--gt-border); font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.1em; color: var(--gt-fg-3); text-transform: uppercase; } /* ───────── Coverage card (6-up grid) ───────── */ .coverage { background: #fff; border: 1px solid var(--gt-border); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; box-shadow: var(--gt-shadow-soft); } .coverage h3 { font-family: var(--gt-font-display); font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: var(--gt-fg-1); letter-spacing: -0.01em; } .coverage p { font-size: 14px; line-height: 21px; color: var(--gt-fg-2); margin: 0; } .coverage__num { font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.1em; color: var(--sector-accent); text-transform: uppercase; } /* ───────── Focus card (About) ───────── */ .focus { border: 1px solid var(--gt-border); border-radius: 16px; padding: 48px; background: #fff; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--gt-shadow-soft); } .focus__icon { width: 56px; height: 56px; border-radius: 12px; background: var(--gt-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--gt-font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; } .focus h3 { font-family: var(--gt-font-display); font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -0.014em; } .focus p { font-size: 15px; line-height: 24px; color: var(--gt-fg-2); margin: 0; } /* Section heading composition */ .section-head { display: flex; flex-direction: column; align-items: flex-start; max-width: 760px; } .section-head--center { align-items: center; text-align: center; max-width: 760px; margin: 0 auto; } /* Two-col (heading left, sub right) section head */ .section-head--split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; max-width: 100%; } .section-head--split .right { display: flex; flex-direction: column; gap: 16px; } /* Inline divider rule */ .rule { height: 1px; background: var(--gt-border); border: 0; margin: 0; } /* Banner pill for "Coming soon" etc. */ .banner-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--gt-font-mono); font-size:13px; letter-spacing: 0.12em; color: #8C6D1F; text-transform: uppercase; padding: 8px 16px; border-radius: 9999px; background: rgba(140,109,31,0.06); border: 1px solid rgba(140,109,31,0.25); } /* ───────── Responsive ───────── */ @media (max-width: 1080px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .container, .container--narrow { padding: 0 24px; } .section { padding: 96px 0; } .section--tight { padding: 64px 0; } .nav__center { display: none; } .grid--3, .grid--4 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: 1fr; } .featured { grid-template-columns: 1fr; } .featured__cover, .featured__body { padding: 48px 32px; } .featured__cover { min-height: 0; } .featured__cover h2 { font-size: 36px; } .final-cta { grid-template-columns: 1fr; padding: 64px 32px; } .final-cta__action { justify-content: flex-start; } .pricing__head, .pricing__row { grid-template-columns: 1fr; gap: 8px; padding: 24px 24px; } .pricing__head { display: none; } .section-head--split { grid-template-columns: 1fr; gap: 24px; } .footer__top { grid-template-columns: repeat(2, 1fr); gap: 32px; } .footer__brand { grid-column: 1 / -1; } .footer__bottom { font-size:13px; } } @media (max-width: 560px) { .section { padding: 64px 0; } .hero { padding: 64px 0 48px; } .nav__inner { padding: 12px 24px; gap: 12px; } .container, .container--narrow { padding: 0 24px; } .canvas { padding: 24px 24px 32px; } .featured__cover h2 { font-size: 28px; } .stat-card__num { font-size: 48px; } .final-cta { padding: 48px 24px; } } /* v5.9 hub-vol actions */ .hub-vol{ display:grid; grid-template-columns:84px 1fr auto auto; gap:16px; align-items:center; } .hub-vol__meta{ font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.04em; color:var(--gt-fg-3); white-space:nowrap; } .hub-vol__acts{ display:flex; gap:8px; align-items:center; } .hub-vol__ex{ font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; color:var(--gt-fg-1); border:1px solid var(--gt-border-strong); border-radius:6px; padding:8px 12px; white-space:nowrap; transition:background .14s,color .14s,border-color .14s; } .hub-vol__ex:hover{ background:var(--gt-ink); color:#fff; border-color:var(--gt-ink); } /* Ruling 3 (Bec, 7 Aug): every button is #5EDDC9 green or #F0AC4F orange, or a genuine transparent ghost. This carried an ink fill with a white label — none of the three. Buy is the action, so it takes the marigold primary with an ink label, pairing with the ghost "Read on screen" beside it, the same primary/secondary pairing as the hero. */ .hub-vol__buy{ font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; color:var(--gt-ink); background:var(--gt-action); border:1px solid var(--gt-action); border-radius:6px; padding:8px 16px; white-space:nowrap; font-weight:500; transition:background .14s; } .hub-vol__buy:hover{ background:var(--gt-action-hover); border-color:var(--gt-action-hover); color:var(--gt-ink); } @media (max-width:680px){ .hub-vol{ grid-template-columns:1fr; gap:8px; } .hub-vol__acts{ flex-wrap:wrap; } } /* v5.9.2 home-sectors */ .home-sectors{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; } .hsec{ display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--gt-border); color:var(--gt-fg-1); text-decoration:none; box-shadow:var(--gt-shadow-sm); transition:border-color .16s, box-shadow .16s, transform .16s; } .hsec:hover{ border-color:var(--gt-border-strong); box-shadow:var(--gt-shadow-md); transform:translateY(-2px); } .hsec__media{ display:block; width:100%; aspect-ratio:21/9; position:relative; overflow:hidden; } .hsec__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; background:var(--gt-n-150); filter:saturate(0.82) contrast(1.03); } .hsec__credit{ position:absolute; right:8px; bottom:6px; font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.04em; color:rgba(255,255,255,0.55); pointer-events:none; } .hsec__body{ display:flex; flex-direction:column; flex:1; padding:20px 24px 20px; } .hsec__no{ font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gt-ink); } .hsec__t{ font-family:var(--gt-font-display); font-size:20px; font-weight:600; letter-spacing:-0.02em; line-height:1.15; color:#1A1A1A; margin-top:10px; } .hsec__strap{ font-size:13.5px; line-height:1.45; color:rgba(26,26,26,0.7); margin-top:6px; flex:1; } .hsec__rule{ display:none; } .hsec__cta{ display:flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gt-fg-1); } .hsec__arrow{ color:var(--gt-ink); font-size:13px; } .hsec__attr{ display:none; } .home-flagline{ margin:24px 0 0; font-size:14.5px; color:var(--gt-fg-2); } .home-flagline a{ color:var(--gt-fg-1); text-decoration:underline; text-underline-offset:2px; } @media (max-width:820px){ .home-sectors{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .home-sectors{ grid-template-columns:1fr; } .hsec__t{ font-size:18px; } } /* ───────── Brand-mark motif (dot-grid mark, felt more than seen) ───────── */ .gt-watermark{ position:absolute; top:50%; right:-6%; transform:translateY(-50%); width:min(520px, 55vw); height:auto; opacity:0.035; color:#F7F5F0; pointer-events:none; user-select:none; } /* ── editorial fixes 2026-07-10 ── 1) Nav tabs are ALWAYS ink: the sticky header bar is light on every live page, but board pages scope body-level link colours (e.g. .lb a) that outrank .nav__item — these pins end that class of bug. 2) Footer watermark takes the Leader Board hot-step orange as a low-opacity ghost (scoped to the navy theme + board pages so frozen index-classic keeps its original neutral). */ .nav[data-gt-nav="canonical"] .nav__item, .nav[data-gt-nav="canonical"] .nav__item--dd{ color:#1A1A1A; } .nav[data-gt-nav="canonical"] .nav__menu-item, .nav[data-gt-nav="canonical"] .nav__menu-title{ grid-column:2; color:#1A1A1A; } .nav[data-gt-nav="canonical"] .nav__sheet-link{ color:#1A1A1A; } .nav__sheet-link--num{ display:grid; grid-template-columns:var(--nav-num-w,30px) 1fr; column-gap:12px; align-items:baseline; } .nav__sheet-num{ justify-self:end; text-align:right; font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gt-fg-3); font-variant-numeric:tabular-nums; } .gt-navy-theme .footer--ink .gt-watermark, body.lb .footer--ink .gt-watermark{ color:#FF8F3D; opacity:0.045; } .gt-watermark--light{ color:#0F0F0E; opacity:0.03; } /* Section divider: hairlines flanking a small mark glyph */ .gt-divider{ display:flex; align-items:center; gap:24px; max-width:1200px; margin:0 auto; padding:0 32px; border:0; background:none; } .gt-divider::before, .gt-divider::after{ content:""; flex:1; height:1px; background:var(--gt-border); } .gt-divider svg{ width:16px; height:16px; flex:none; color:var(--gt-fg-3); opacity:0.6; } /* ───────── Footer — deep-ink variant ───────── */ .footer--ink{ background:var(--gt-surface-ink); color:var(--gt-fg-on-ink); position:relative; overflow:hidden; } .footer--ink > .container{ position:relative; } .footer--ink .footer__tagline{ font-family:var(--gt-font-display); font-size:clamp(24px, 2.6vw, 36px); line-height:1.2; letter-spacing:-0.02em; font-weight:600; color:var(--gt-fg-on-ink); margin:0 0 64px; max-width:640px; text-wrap:balance; } .footer--ink .footer__top{ border-bottom-color:var(--gt-border-on-ink); } .footer--ink .footer__brand p{ color:var(--gt-fg-on-ink-2); } .footer--ink .footer__col h5{ color:var(--gt-fg-on-ink-3); } .footer--ink .footer__col h5::before{ content:"§ "; } .footer--ink .footer__col a{ color:var(--gt-fg-on-ink-2); } .footer--ink .footer__col a:hover{ color:var(--gt-fg-on-ink); } .footer--ink .footer__bottom{ color:var(--gt-fg-on-ink-3); } /* ───────── Navy theme (editorial, 2026-07-11): all dark grounds → the navy family. Applied via body.gt-navy-theme on every live page; index-classic.html and frozen snapshot artifacts keep the original ink. Only --gt-navy / --gt-navy-deep may be used as dark grounds. ───────── */ .gt-navy-theme .section--dark{ background: var(--gt-navy); } .gt-navy-theme .final-cta{ background: var(--gt-navy-deep); } .gt-navy-theme .footer--ink{ background: var(--gt-navy-deep); } /* ───────── Accent system (editorial, 2026-07-11): teal = live/affirmative, amber = pending/attention. Teal is the ONE action colour; amber never colours an action. Scoped to .gt-navy-theme so index-classic stays frozen. On light grounds, text/line accents use darkened token mixes for AA. ───────── */ .gt-navy-theme .btn--primary{ background: var(--gt-action); color: var(--gt-ink); } .gt-navy-theme .btn--primary:hover{ background: var(--gt-action-hover); color: var(--gt-ink); } .gt-navy-theme .btn--white{ background: var(--gt-action); color: var(--gt-ink); } .gt-navy-theme .btn--white:hover{ background: var(--gt-action-hover); color: var(--gt-ink); } .gt-navy-theme .btn--ghost:hover{ background: transparent; border-color: var(--gt-action); color: var(--gt-ink); } .gt-navy-theme .section--dark .btn--ghost:hover, .gt-navy-theme .footer--ink .btn--ghost:hover, .gt-navy-theme .final-cta .btn--ghost:hover{ background: transparent; border-color: var(--gt-action); color: var(--gt-fg-on-ink); } .gt-navy-theme a:not([class*="btn"]):hover{ color:var(--gt-ink); } .gt-navy-theme .section--dark a:not([class*="btn"]):hover, .gt-navy-theme .footer--ink a:not([class*="btn"]):hover, .gt-navy-theme .final-cta a:not([class*="btn"]):hover{ color:#fff; } .gt-navy-theme :focus-visible{ outline: 2px solid var(--gt-teal); outline-offset: 2px; } /* ───────── Canonical nav — mobile sheet (single source: shared/site-nav.js). Scoped to [data-gt-nav="canonical"]; the frozen classic nav never matches. ───────── */ .nav[data-gt-nav="canonical"] .nav__burger{ display:none; align-items:center; justify-content:center; background:none; border:1px solid var(--gt-border-strong); border-radius:8px; padding:8px; cursor:pointer; color:var(--gt-fg-1); } .nav[data-gt-nav="canonical"] .nav__sheet{ display:none; } @media (max-width: 1100px){ .nav[data-gt-nav="canonical"] .nav__center{ display:none; } .nav[data-gt-nav="canonical"] .nav__burger{ display:inline-flex; } .nav[data-gt-nav="canonical"]{ position:sticky; } .nav[data-gt-nav="canonical"].nav--sheet-open .nav__sheet{ display:block; position:absolute; top:100%; left:0; right:0; background:rgba(255,255,255,0.98); border-bottom:1px solid var(--gt-border); padding:14px 24px 22px; max-height:calc(100vh - 60px); overflow:auto; z-index:49; } .nav__sheet-link{ display:block; padding:10px 0; font-size:15px; color:var(--gt-fg-1); text-decoration:none; border-bottom:1px solid var(--gt-border); } .nav__sheet-link--lead{ font-weight:600; } .nav__sheet-link:hover{ color:var(--gt-ink); } .nav__sheet-group{ font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gt-fg-3); margin:16px 0 4px; } } /* ═ Shared board hero — editorial 2026-07-11: ONE system, both boards. Scale+contrast up; copy per page. ═ */ header.mc-hero .eyebrow{ font-size:13px; } header.mc-hero h1{ font-size:clamp(38px,4.2vw,62px); line-height:1.04; letter-spacing:-0.025em; font-weight:700; margin:18px 0 0; text-wrap:balance; } header.mc-hero .mc-hero__lede{ font-size:17px; line-height:1.6; color:#F7F5F0; max-width:980px; margin:14px 0 0; } header.mc-hero .mc-hero__lede b{ color:#F7F5F0; } header.mc-hero .mc-hero__stamp{ font-size:13px; margin-top:22px; } header.mc-hero .mc-hero__stamp *{ font-size:13px; } header.mc-hero a.mc-hero__cta{ display:inline-flex; align-items:center; gap:8px; font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:#0D0C1A; background:var(--gt-teal, #5EDDC9); padding:11px 20px; border-radius:9999px; text-decoration:none; font-weight:600; margin-top:24px; } header.mc-hero a.mc-hero__cta:hover{ filter:brightness(1.08); } /* ── Nav restructure 2026-07-16: split Heatmap label+chevron · dropdown descriptors · item subtitles ── */ .nav__ddsplit{ display:inline-flex; align-items:center; } .nav__ddsplit > .nav__item{ padding-right:3px; } .nav__item--chev{ padding-left:2px; } .nav__menu-desc{ font-size:13px; line-height:1.5; color:var(--gt-fg-3); padding:10px 14px 9px; border-bottom:1px solid var(--gt-border); margin-bottom:6px; min-width:230px; max-width:270px; } .nav__menu-sub{ display:block; grid-column:2; font-style:normal; font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.09em; text-transform:uppercase; color:var(--gt-fg-3); margin-top:2px; } /* ── Nav dropdown fixes 2026-07-16: self-scroll, compact rows, start-here entries, label affordance ── */ .nav .nav__menu{ max-height:calc(100vh - 84px); overflow-y:auto; overscroll-behavior:contain; } .nav .nav__menu /* dropdown alignment (2026-07-25): strict two-column grid — numeral column at ONE fixed width (right-aligned within it), text column on a single left edge so every title AND its mono descriptor start at the same x, top to bottom. */ .nav__menu-item{ display:grid; grid-template-columns:var(--nav-num-w,30px) 1fr; column-gap:12px; align-items:baseline; padding:7px 14px; } .nav .nav__menu .nav__menu-num{ grid-column:1; justify-self:end; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; } .nav .nav__menu .nav__menu-title{ display:block; } .nav .nav__menu-start{ display:block; font-size:13px; font-weight:600; color:var(--gt-fg-1); text-decoration:none; padding:10px 14px; border-bottom:1px solid var(--gt-border); margin-bottom:6px; } .nav .nav__menu-start:hover{ color:var(--gt-ink); background:color-mix(in srgb, var(--gt-teal) 6%, transparent); } .nav .nav__menu-desc:has(+ .nav__menu-start){ border-bottom:none; margin-bottom:0; padding-bottom:4px; } .nav .nav__ddsplit > a.nav__item:hover{ text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; } /* ── "How we verify" stamp links (Phase-0, 2026-07-23) — every Verified/date stamp links to the method page. Inherits the stamp’s colour; dotted underline is the affordance. ── */ .verif-link{ color:inherit; border-bottom:1px dotted currentColor; padding-bottom:1px; } .verif-link:hover{ color:inherit; opacity:0.72; } /* ── THE GLASS GATE (soft, 2026-07-23) — story free, evidence gated, windows not walls. .gg-v = veiled value (shape stays, value blurs — never fade a story mid-read; veil VALUES only). .gg-panel = the subscriber panel. ONE switch: body.is-unlocked (set by checkout at Stripe) opens every veil and hides every panel. ── */ html.is-unlocked body .gg-v{ filter:none; opacity:1; user-select:auto; pointer-events:auto; } html.is-unlocked .gg-panel{ display:none; } body:not(.is-unlocked) .gg-v{ filter:blur(6px); opacity:0.55; user-select:none; pointer-events:none; } .gg-panel{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; border:1px solid color-mix(in srgb, var(--gt-action,#5EDDC9) 45%, transparent); background:color-mix(in srgb, var(--gt-action,#5EDDC9) 9%, transparent); padding:16px 20px; margin:14px 0; } .gg-panel__t{ font-family:var(--gt-font-body); font-size:14.5px; line-height:1.5; color:inherit; flex:1 1 260px; } .gg-panel__t b{ font-weight:650; } .gg-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--gt-action,#5EDDC9); color:var(--gt-ink,#0A0A0A) !important; border-radius:8px; padding:11px 20px; font-family:var(--gt-font-body); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; transition:background 160ms; } .gg-btn:hover{ background:var(--gt-action-hover,#5EDDC9); color:var(--gt-ink,#0A0A0A) !important; } .gg-btn--sm{ padding:8px 14px; font-size:13px; } body.is-unlocked .gg-panel{ display:none; } /* ═══════════════ WARMTH PASS 2026-08-05 · numbered mega-menu dropdowns ═══════════════ nPlan-style: mono number ABOVE a bold title, amber hover (title underline + number warms grey→amber). Reports becomes the wide, columnar "organised catalogue" panel. These rules are appended LAST and scoped .nav .nav__menu so they win over the 2026-07 grid rules. */ .nav .nav__menu{ min-width:312px; padding:12px; gap:1px; } .nav .nav__menu .nav__menu-item{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; grid-template-columns:none; column-gap:0; padding:10px 12px; border-radius:10px; } .nav .nav__menu .nav__menu-num{ grid-column:auto; justify-self:start; text-align:left; font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gt-fg-3); font-variant-numeric:tabular-nums; transition:color 140ms; } .nav .nav__menu .nav__menu-title{ display:block; font-family:var(--gt-font-display); font-size:15px; font-weight:600; color:var(--gt-fg-1); letter-spacing:-0.01em; line-height:1.2; } .nav .nav__menu .nav__menu-sub{ display:block; grid-column:auto; font-family:var(--gt-font-body); font-style:normal; font-size:13px; letter-spacing:0; text-transform:none; color:var(--gt-fg-3); margin-top:2px; line-height:1.35; } .nav .nav__menu .nav__menu-item:hover{ background:var(--gt-surface-2); } .nav .nav__menu .nav__menu-item:hover .nav__menu-title{ text-decoration:underline; text-decoration-color:var(--gt-action); text-underline-offset:3px; text-decoration-thickness:2px; } .nav .nav__menu .nav__menu-item:hover .nav__menu-num{ color:var(--gt-ink); } /* Reports — wide columnar catalogue panel */ .nav .nav__menu--reports{ min-width:min(720px,94vw); padding:16px; display:block; } .nav__mm-lead{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--gt-border); } .nav__mm-lbl{ font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gt-fg-3); padding:0 2px 9px; } .nav__mm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; } .nav__mm-sec{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border-radius:8px; text-decoration:none; transition:background 120ms; } .nav__mm-sec:hover{ background:var(--gt-surface-2); } .nav__mm-sec__name{ font-family:var(--gt-font-body); font-size:13px; font-weight:500; color:var(--gt-fg-1); } .nav__mm-sec:hover .nav__mm-sec__name{ text-decoration:underline; text-decoration-color:var(--gt-action); text-underline-offset:3px; text-decoration-thickness:2px; } .nav__mm-sec__ct{ font-family:var(--gt-font-mono); font-size:13px; color:var(--gt-fg-3); font-variant-numeric:tabular-nums; } .nav__mm-all{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:0 2px; font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gt-fg-1); text-decoration:none; transition:color 140ms; } .nav__mm-all:hover{ color:var(--gt-fg-1)!important;text-decoration:underline!important;text-underline-offset:3px; } /* ═══════════════ WARMTH PASS 2026-08-05 · sector icon strip (home + catalogue) ═══════════════ */ .secstrip{ background:var(--gt-navy,#0D0C1A); color:var(--gt-fg-on-ink); position:relative; } .secstrip::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0) 0 0/6px 6px; } .secstrip__in{ position:relative; max-width:1200px; margin:0 auto; padding:60px 32px; } .secstrip__head{ font-family:var(--gt-font-display); font-size:clamp(19px,2.3vw,26px); font-weight:600; letter-spacing:-0.02em; color:var(--gt-fg-on-ink); margin:0 0 26px; } .secstrip__row{ display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; scrollbar-color:rgba(247,245,240,0.3) transparent; } .secstrip__row::-webkit-scrollbar{ height:6px; } .secstrip__row::-webkit-scrollbar-thumb{ background:rgba(247,245,240,0.2); border-radius:3px; } .secstrip__tile{ flex:0 0 auto; width:106px; display:flex; flex-direction:column; align-items:center; gap:13px; padding:22px 10px 18px; border-radius:var(--gt-radius-lg); background:rgba(255,255,255,0.04); border:1px solid rgba(247,245,240,0.10); text-decoration:none; color:var(--gt-fg-on-ink-2); transition:background 160ms,border-color 160ms,color 160ms; } .secstrip__tile:hover{ background:rgba(255,255,255,0.07); border-color:rgba(247,245,240,0.22); color:var(--gt-fg-on-ink); } .secstrip__ico{ width:30px; height:30px; color:var(--gt-fg-on-ink); opacity:0.82; transition:color 160ms,opacity 160ms; } .secstrip__ico svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .secstrip__tile:hover .secstrip__ico{ color:var(--gt-teal); opacity:1; } .secstrip__lbl{ font-family:var(--gt-font-body); font-size:13px; line-height:1.3; text-align:center; font-weight:500; } @media (max-width:640px){ .secstrip__in{ padding:44px 0 44px 24px; } .secstrip__head{ padding-right:24px; } .secstrip__row{ padding-right:24px; } } /* ── Nav dropdown restyle 2026-08-05: subtitle-free · two-digit numbers · columns across ── */ .nav .nav__menu .nav__menu-sub{ display:none !important; } .nav .nav__menu:not(.nav__menu--reports){ display:grid; gap:2px; width:max-content; min-width:0; max-width:min(92vw,800px); padding:12px; } .nav__dropdown:has([data-nav="map"]) .nav__menu{ grid-template-columns:repeat(3,154px); } .nav__dropdown:has([data-nav="boards"]) .nav__menu{ grid-template-columns:repeat(4,150px); } .nav__dropdown:has([data-nav="intel"]) .nav__menu{ grid-template-columns:repeat(4,152px); } .nav__dropdown:has([data-nav="who"]) .nav__menu{ grid-template-columns:repeat(5,148px); } .nav .nav__menu:not(.nav__menu--reports) .nav__menu-item{ height:100%; } .nav .nav__menu .nav__menu-item:hover .nav__menu-title{ color:var(--gt-ink); } .nav__center .nav__dropdown:nth-child(4) .nav__menu, .nav__center .nav__dropdown:nth-child(5) .nav__menu{ left:auto; right:0; transform:translateX(0) translateY(-6px); } .nav__center .nav__dropdown:nth-child(4).is-open .nav__menu, .nav__center .nav__dropdown:nth-child(5).is-open .nav__menu{ transform:translateX(0) translateY(0); } /* Page header illustration (3D icon), 2026-08-05 */ .page-illo{float:right;width:var(--illo-w,220px);height:auto;margin:0 0 18px 36px} @media(max-width:820px){.page-illo{width:150px;margin:0 0 10px 20px}} @media(max-width:560px){.page-illo{display:none}} /* ===== Two-zone mega-menu + legibility 2026-08-05b ===== */ .nav .nav__menu.nav__menu--zoned{ display:grid!important; grid-template-columns:minmax(196px,0.82fr) 2fr!important; gap:20px; width:min(94vw,772px)!important; max-width:min(94vw,772px)!important; min-width:0!important; padding:18px!important; align-items:start; } .nav__mm-left{ display:flex; flex-direction:column; gap:14px; padding-right:20px; border-right:1px solid var(--gt-border); } .nav__mm-hl{ font-family:var(--gt-font-display); font-size:19px; line-height:1.16; font-weight:700; letter-spacing:-0.02em; color:var(--gt-fg-1); margin:0; } .nav__mm-illo{ width:128px; height:auto; } .nav__mm-cta{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; background:var(--gt-action); color:var(--gt-ink,#0A0A0A); font-family:var(--gt-font-body); font-weight:600; font-size:14px; padding:11px 18px; border-radius:9999px; text-decoration:none; transition:filter 140ms,transform 120ms; } .nav__mm-cta:hover{ filter:brightness(0.93); } .nav__mm-cta:active{ transform:scale(0.98); } .nav .nav__menu--zoned .nav__mm-right{ min-width:0; } .nav .nav__menu--zoned:not(.nav__menu--reports) .nav__mm-right{ display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:2px; align-content:start; } .nav .nav__menu--reports .nav__mm-lbl{ margin-top:6px; } .nav__center .nav__dropdown{ position:relative; } .nav__center .nav__dropdown:nth-child(1) .nav__menu--zoned,.nav__center .nav__dropdown:nth-child(2) .nav__menu--zoned{ left:0; right:auto; transform:translateY(-6px); } .nav__center .nav__dropdown:nth-child(1).is-open .nav__menu--zoned,.nav__center .nav__dropdown:nth-child(2).is-open .nav__menu--zoned{ transform:translateY(0); } .nav__center .nav__dropdown:nth-child(3) .nav__menu--zoned{ left:50%; right:auto; transform:translateX(-50%) translateY(-6px); } .nav__center .nav__dropdown:nth-child(3).is-open .nav__menu--zoned{ transform:translateX(-50%) translateY(0); } .nav__center .nav__dropdown:nth-child(4) .nav__menu--zoned,.nav__center .nav__dropdown:nth-child(5) .nav__menu--zoned{ left:auto; right:0; transform:translateY(-6px); } .nav__center .nav__dropdown:nth-child(4).is-open .nav__menu--zoned,.nav__center .nav__dropdown:nth-child(5).is-open .nav__menu--zoned{ transform:translateY(0); } .nav .nav__menu .nav__menu-num{ font-size:15px!important; font-weight:500!important; letter-spacing:0.1em!important; } .nav__sheet-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--gt-action); color:var(--gt-ink,#0A0A0A); font-weight:600; font-size:14px; padding:10px 16px; border-radius:9999px; text-decoration:none; margin:8px 0 18px; } /* ===== Page header standard 2026-08-05c ===== */ .nav[data-gt-nav="canonical"]{ border-bottom:1px solid var(--gt-border); } .pagehead{ padding:96px 0 72px; } .pagehead__grid{ display:grid; grid-template-columns:minmax(0,55%) minmax(0,1fr); gap:52px; align-items:center; } .pagehead__body{ min-width:0; } .pagehead__kick{ display:inline-flex; align-items:center; font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gt-fg-2); border:1px solid var(--gt-border-strong); border-radius:9999px; padding:6px 14px; } .pagehead__h{ font-family:var(--gt-font-display); font-size:clamp(44px,5vw,64px); line-height:1.05; letter-spacing:-0.025em; font-weight:700; color:var(--gt-fg-1); margin:22px 0 0; text-wrap:balance; } .pagehead__h .tint--green{ color:var(--gt-fg-1); } .pagehead__h .tint--grey{ color:var(--gt-fg-3); } .pagehead__lead{ font-size:18px; line-height:1.55; color:var(--gt-fg-2); max-width:54ch; margin:20px 0 0; } .pagehead__cta{ display:inline-flex; align-items:center; gap:8px; background:#F0AC4F; color:var(--gt-ink); font-family:var(--gt-font-body); font-weight:600; font-size:15px; padding:13px 22px; border-radius:9999px; text-decoration:none; margin-top:28px; transition:filter 140ms,transform 120ms; } .pagehead__cta:hover{ filter:brightness(0.95); } .pagehead__cta:active{ transform:scale(0.98); } .pagehead__chev{ width:17px; height:17px; } .pagehead__aside{ display:flex; align-items:center; justify-content:center; } .pagehead__aside img{ max-width:100%; max-height:300px; height:auto; } .pagehead-band{ padding:4px 0 8px; } .pagehead--ink{ background:var(--gt-surface-ink,#0B1020); color:var(--gt-fg-on-ink); } .pagehead--ink .pagehead__kick{ color:var(--gt-fg-on-ink-2); border-color:var(--gt-border-on-ink); } .pagehead--ink .pagehead__h{ color:var(--gt-fg-on-ink); } .pagehead--ink .pagehead__lead{ color:var(--gt-fg-on-ink-2); } @media (max-width:860px){ .pagehead{ padding:72px 0 56px; } .pagehead__grid{ grid-template-columns:1fr; gap:28px; } .pagehead__aside{ order:-1; justify-content:flex-start; } .pagehead__aside img{ max-height:170px; } } /* ===== Full-bleed mega sheet + Poppins nav 2026-08-06 ===== */ .nav[data-gt-nav="canonical"] .nav__item,.nav[data-gt-nav="canonical"] .nav__item--dd{ font-family:var(--gt-font-display); font-weight:500; } .nav[data-gt-nav="canonical"] .nav__item--dd:hover,.nav[data-gt-nav="canonical"] .nav__dropdown.is-open .nav__item--dd,.nav[data-gt-nav="canonical"] .nav__item:hover{ background:transparent; } .nav[data-gt-nav="canonical"]:has(.nav__dropdown.is-open){ background:#fff; } .nav__center .nav__dropdown{ position:static; } .nav .nav__menu.nav__menu--zoned{ position:absolute; top:100%; left:0!important; right:0!important; width:100%!important; max-width:none!important; min-width:0!important; transform:none!important; margin:0; background:#fff; border:0!important; border-radius:0!important; border-bottom:1px solid var(--gt-border); box-shadow:0 16px 26px -16px rgba(10,12,20,0.26); display:grid!important; grid-template-columns:minmax(230px,24%) 1fr!important; gap:44px!important; min-height:340px; align-items:center; padding:44px max(32px,calc((100% - 1200px)/2)) 48px!important; } .nav .nav__menu.nav__menu--zoned::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; } .nav__mm-left{ border-right:1px solid var(--gt-border)!important; padding-right:40px!important; gap:20px!important; } .nav__mm-hl{ font-family:var(--gt-font-display)!important; font-size:30px!important; font-weight:600!important; line-height:1.1!important; letter-spacing:-0.02em!important; } .nav__mm-illo{ width:132px!important; } .nav__mm-cta{ font-family:var(--gt-font-display); } .nav .nav__menu--zoned:not(.nav__menu--reports) .nav__mm-right{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px 24px; align-content:center; } .nav .nav__menu .nav__menu-num{ font-family:var(--gt-font-display)!important; text-transform:none!important; font-weight:400!important; font-size:15px!important; letter-spacing:0.02em!important; color:var(--gt-fg-3)!important; } .nav .nav__menu .nav__menu-title{ font-family:var(--gt-font-display)!important; font-size:20px!important; font-weight:600!important; } .nav__mm-lbl{ font-family:var(--gt-font-display)!important; text-transform:none!important; font-size:13px!important; letter-spacing:0.02em!important; } /* ===== Mega-menu panel fixes 2026-08-06b ===== */ .btn,.nav__mm-cta,.hp-mm-cta,.pagehead__cta,.nav__sheet-cta,.hp-sheet-cta{ white-space:nowrap; } .nav__mm-cta{ padding:14px 26px!important; width:fit-content; } .nav .nav__menu.nav__menu--zoned{ align-items:start!important; min-height:0!important; padding-top:48px!important; padding-bottom:48px!important; } .nav__mm-left{ justify-content:flex-start!important; } .nav .nav__menu--zoned .nav__mm-right .nav__menu-item{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:6px!important; } .nav .nav__menu--zoned .nav__mm-right .nav__menu-num{ display:block!important; } .nav .nav__menu--zoned .nav__mm-right .nav__menu-title{ display:block!important; max-width:100%; } .nav .nav__menu--zoned:not(.nav__menu--reports) .nav__mm-right{ display:grid!important; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important; gap:22px 48px!important; align-content:start!important; } .nav .nav__menu--reports .nav__mm-illo{ width:200px!important; } .nav .nav__menu--reports .nav__mm-lead{ display:grid!important; grid-template-columns:repeat(3,1fr)!important; gap:24px 40px!important; } .nav .nav__menu--reports .nav__mm-grid{ display:grid!important; grid-template-columns:repeat(3,1fr)!important; gap:10px 44px!important; } .nav .nav__menu--reports .nav__mm-sec{ display:flex!important; flex-direction:row!important; align-items:baseline!important; justify-content:space-between!important; gap:12px!important; white-space:nowrap!important; } .nav .nav__menu--reports .nav__mm-sec__name{ white-space:nowrap!important; } .nav .nav__menu--reports .nav__mm-lbl{ display:inline-block; text-transform:uppercase!important; font-size:13px!important; letter-spacing:0.08em!important; color:var(--gt-fg-3); border:1px solid var(--gt-border); border-radius:9999px; padding:4px 12px; margin-bottom:4px; } /* ═══════════ RESTYLE PASS 2026-08-06 (tasks a–f) ═══════════ */ /* ── d · Sector-page template head: pill kicker · plain heading beside 64px line icon · mono report count ── */ .sechead{ padding:84px 0 60px; border-bottom:1px solid var(--gt-border); } .sechead__row{ display:flex; align-items:center; gap:26px; margin-top:28px; } .sechead__ico{ width:64px; height:64px; flex:none; color:var(--gt-fg-1); } .sechead__ico svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; } .sechead__h{ font-family:var(--gt-font-display); font-size:clamp(32px,3.6vw,46px); line-height:1.12; letter-spacing:-0.018em; font-weight:600; margin:0; text-wrap:balance; } .sechead .lead{ margin-top:22px; } .sechead__count{ display:flex; align-items:baseline; gap:16px; margin-top:30px; } .sechead__num{ font-family:var(--gt-font-mono); font-size:56px; font-weight:500; line-height:1; letter-spacing:-0.02em; color:var(--gt-fg-1); font-variant-numeric:tabular-nums; } .sechead__cl{ font-size:16px; color:var(--gt-fg-2); } @media (max-width:640px){ .sechead{ padding:56px 0 44px; } .sechead__row{ gap:16px; } .sechead__ico{ width:48px; height:48px; } .sechead__num{ font-size:44px; } } /* ── d · Sector volumes in the catalogue's card language ── */ .hub-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; } @media (max-width:960px){ .hub-cards{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .hub-cards{ grid-template-columns:1fr; } } .hub-card{ background:#fff; border:1px solid var(--gt-border); border-radius:12px; padding:24px 24px 20px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--gt-shadow-soft); transition:transform 180ms var(--gt-ease-out), box-shadow 180ms, border-color 180ms; scroll-margin-top:96px; } /* hover strengthens the three NEUTRAL sides only — the shorthand border-color repainted the accent left edge grey while keeping its 3px width, leaving an asymmetric grey border with no meaning. */ .hub-card:hover{ transform:translateY(-3px); border-top-color:var(--gt-border-strong); border-right-color:var(--gt-border-strong); border-bottom-color:var(--gt-border-strong); box-shadow:var(--gt-shadow-md); } /* Field colours are FIELD only (tranche-1 brief): panel grounds, rules, edges — never text. The numeral is ink; the per-volume cue moves to the card’s left edge, which is a field use. */ .hub-card__no{ font-family:var(--gt-font-mono); font-size:28px; font-weight:500; letter-spacing:0.03em; line-height:1; color:var(--gt-ink); text-transform:uppercase; } .hub-card{ border-left:3px solid var(--report-accent,var(--gt-border)); } .hub-card__t{ font-family:var(--gt-font-display); font-size:18px; font-weight:600; letter-spacing:-0.012em; line-height:1.3; margin:0; color:var(--gt-fg-1); } .hub-card .hub-vol__acts{ margin-top:auto; padding-top:14px; border-top:1px solid var(--gt-border); flex-wrap:wrap; } /* ── e · Boards restyle: navy stays; pill badges at legible size; status trio ON TRACK #5EDDC9 · AT RISK #FFBB33 · OFF TRACK warm red. body-scoped to outrank page-local rules. ── */ body .gb-badge{ font-size:13px; letter-spacing:0.08em; padding:4px 12px; } body .gb-card__sec{ font-size:13px; letter-spacing:0.09em; } body .gb-band__label{ font-size:13px; } body .gb-card__src{ font-size:13px; letter-spacing:0.03em; line-height:1.55; } body .gb-card__t{ font-size:13px; } body .gb-row__hdr, body .gb-src, body .gb-group__count{ font-size:13px; } body .gb-ind .links, body .gb-cell .mono{ font-size:13px; } body .bo-box .k, body .nz-fl .k{ font-size:13px; } body .bo-wf, body .nz-basis{ font-size:13px; padding:4px 11px; } body .bo-scope, body .bo-note, body .nz-h__count{ font-size:13px; } body .bo-note{ line-height:1.75; } body .gb-badge--teal{ color:#5EDDC9; border-color:color-mix(in srgb,#5EDDC9 50%,transparent); } body .gb-badge--amber{ color:#FFBB33; border-color:color-mix(in srgb,#FFBB33 50%,transparent); } body .gb-badge--danger{ color:color-mix(in srgb,#E5484D 68%,#F7F5F0); border-color:color-mix(in srgb,#E5484D 55%,transparent); } body .nz-tile--on .gb-card__v, body .bo-tile--on .gb-card__v{ color:var(--gt-fg-on-ink); } body .nz-tile--risk .gb-card__v, body .bo-tile--risk .gb-card__v{ color:var(--gt-fg-on-ink); } body .nz-tile--off .gb-card__v, body .bo-tile--off .gb-card__v{ color:var(--gt-fg-on-ink); } body .bo-wf--high{ color:color-mix(in srgb,#E5484D 68%,#F7F5F0); border-color:color-mix(in srgb,#E5484D 50%,transparent); } body .lb-band__label, body .lb-sum__l, body .lb-tier, body .lb-panel__strip, body .lb-fam__score, body .lb-fam__note, body .lb-ev .fig, body .lb-ev .src, body .lb-outlook h4, body .lb-routes h4, body .lb-pace-block h4, body .lb-out .yr, body .lb-out .conf, body .lb-pending, body .lb-volmiss, body .lb-gatecard .lbl, body .lb-hz__t .k, body .lb-hz__t .then, body .lb-hz__micro, body .lb-openlbl, body .lb-howto b, body .lb-unlocked, body .lb-head, body .lb-head .hk i{ font-size:13px; } body .lb-sum__s{ font-size:13px; white-space:normal; overflow:visible; text-overflow:clip; } body .lb-pip{ font-size:13px; border-radius:9999px; padding:4px 12px; } body .lb-pip .y, body .lb-pace .n, body .lb-pace--lg .n{ font-size:13px; } body .lb-pace{ font-size:13px; border-radius:9999px; padding:5px 12px; } /* ── e·2 · Leader Board breathing room 2026-08-06c: table labels 14px, wider text columns, heads may wrap to two lines ── */ body .lb-head{ font-size:14px; letter-spacing:0.08em; gap:14px; } body .lb-head .hk{ white-space:normal; line-height:1.35; hyphens:none; } body .lb-head .hk i{ font-size:13px; } body .lb-band__label{ font-size:14px; } body .lb-tier{ font-size:14px; } body .lb-pip{ font-size:14px; } body .lb-pace{ font-size:14px; } body .lb-pace .n{ font-size:13px; } @media (min-width:1025px){ body .lb-head, body .lb-row{ grid-template-columns:36px minmax(150px,1fr) minmax(200px,1.2fr) minmax(215px,1.35fr) minmax(300px,360px); gap:14px; } } /* voice pass 2026-08-06: one-line benefit description beside decode titles (text from GT_EXCERPTS, verbatim) */ .hub-card__sub, .cat-card__sub{ font-size:15px; line-height:1.5; color:var(--gt-fg-2); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* ═══════════ DATA-PAGE JOURNEY 2026-08-06 — three-layer template for the boards + data pages. L1 takeaway (computed headline + ≤4 stat tiles) · L2 guided read (numbered chapters, one visual/top-5 each, "what this means" line) · L3 depth on demand (full tables inside expanders; print/no-JS renders expanded). NOTHING is deleted: extracts are additive, every original row survives inside its expander. ═══════════ */ .dj-take{margin:34px 0 0} .dj-take__h{font-family:var(--gt-font-display);font-size:clamp(23px,2.5vw,32px);font-weight:700;letter-spacing:-0.022em;line-height:1.16;margin:0;max-width:34ch;text-wrap:balance} .dj-take__sub{font-size:16px;line-height:1.6;margin:12px 0 0;max-width:62ch} .dj-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:26px 0 0} @media(max-width:900px){.dj-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}} .dj-tile{border:1px solid var(--dj-line,rgba(247,245,240,0.16));border-radius:12px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;min-width:0} .dj-tile__n{font-family:var(--gt-font-mono);font-size:clamp(26px,3vw,38px);font-weight:500;line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums} .dj-tile__l{font-size:13px;line-height:1.45;letter-spacing:0.01em} .dj-tile--on .dj-tile__n{color:#5EDDC9} .dj-tile--risk .dj-tile__n{color:#FFBB33} .dj-tile--off .dj-tile__n{color:#FF8A7A} /* L2 chapters */ .dj-chap{margin:64px 0 0} .dj-chap__row{display:flex;align-items:center;gap:20px} .dj-chap__no{width:64px;height:64px;flex:none;border:1px solid var(--dj-line,rgba(247,245,240,0.28));border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--gt-font-mono);font-size:16px;letter-spacing:0.02em} .dj-chap__lbl{font-family:var(--gt-font-mono);font-size:13px;letter-spacing:0.16em;text-transform:uppercase} .dj-chap__q{font-family:var(--gt-font-display);font-size:clamp(21px,2.2vw,27px);font-weight:650;letter-spacing:-0.018em;line-height:1.2;margin:18px 0 0;max-width:30ch} /* SURFACE-AGNOSTIC COLOUR (2026-08-06) — every .dj-* text colour reads from --dj-fg / --dj-fg-2, which data-journey.js sets by MEASURING the host element's own background luminance and stamping .dj-on-dark or .dj-on-paper on each inserted block. No page-specific wall class names are enumerated, so a new dark surface can never reintroduce dark-on-dark. */ .dj-take,.dj-chap,.dj-top,.dj-exp{--dj-fg:var(--gt-fg-1);--dj-fg-2:var(--gt-fg-2);--dj-line:var(--gt-border)} .dj-on-dark{--dj-fg:#F7F5F0;--dj-fg-2:rgba(247,245,240,0.86);--dj-line:rgba(247,245,240,0.16)} .dj-take .dj-take__h,.dj-chap .dj-chap__q,.dj-chap .dj-chap__no,.dj-top .dj-top__n,.dj-exp>summary{color:var(--dj-fg)!important} .dj-take .dj-take__sub,.dj-chap .dj-chap__lbl,.dj-chap .dj-means,.dj-top .dj-top__v,.dj-top .dj-top__i,.dj-exp .dj-exp__note{color:var(--dj-fg-2)!important} .dj-on-dark .dj-chap__no{border-color:rgba(247,245,240,0.32)} .dj-on-dark .dj-exp>summary:hover{background:rgba(247,245,240,0.06)} .dj-on-paper .dj-exp>summary:hover{background:var(--gt-surface-2)} .dj-means{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;font-size:15px;line-height:1.6;max-width:66ch} .dj-means::before{content:"";flex:none;width:2px;align-self:stretch;background:var(--gt-teal,#5EDDC9);border-radius:2px} /* top-5 extract */ .dj-top{margin:22px 0 0;border-top:1px solid var(--dj-line,rgba(247,245,240,0.16))} .dj-top__r{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:14px 2px;border-bottom:1px solid var(--dj-line,rgba(247,245,240,0.16))} .dj-top__i{font-family:var(--gt-font-mono);font-size:13px;opacity:.6} .dj-top__n{font-size:16px;line-height:1.35;min-width:0} .dj-top__v{font-family:var(--gt-font-mono);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap} /* gloss chip */ .dj-gloss{position:relative;border-bottom:1px dotted currentColor;cursor:help} .dj-gloss__t{position:absolute;left:0;top:calc(100% + 8px);z-index:40;width:max-content;max-width:280px;background:var(--gt-surface-1,#fff);color:var(--gt-fg-1);border:1px solid var(--gt-border-strong);border-radius:8px;padding:9px 12px;font-family:var(--gt-font-body);font-size:13px;line-height:1.5;letter-spacing:0;text-transform:none;box-shadow:var(--gt-shadow-md);opacity:0;visibility:hidden;transition:opacity 140ms} .dj-gloss:hover .dj-gloss__t,.dj-gloss:focus-visible .dj-gloss__t{opacity:1;visibility:visible} /* L3 expander */ .dj-exp{margin:26px 0 0;border:1px solid var(--dj-line,rgba(247,245,240,0.16));border-radius:14px;overflow:hidden} .dj-exp>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-family:var(--gt-font-mono);font-size:13px;letter-spacing:0.1em;text-transform:uppercase} .dj-exp>summary::-webkit-details-marker{display:none} .dj-exp>summary::after{content:"+";font-size:17px;transition:transform 200ms var(--gt-ease-out)} .dj-exp[open]>summary::after{transform:rotate(45deg)} .dj-exp>summary:hover{background:rgba(247,245,240,0.05)} .dj-exp__b{padding:4px 20px 20px;animation:djIn 260ms var(--gt-ease-out)} @keyframes djIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .dj-exp__note{font-size:13px;opacity:.72;margin:0 0 14px} /* paper surfaces */ .dj-paper{--dj-line:var(--gt-border)} @media print{.dj-exp__b{display:block!important}.dj-exp>summary::after{display:none}} /* ═ SECTOR ICON DEVICE (2026-08-06) — ONE set, ONE stroke weight, sized per context, colour follows surface. 24px inline (pills, menu rows, lists) · 48–64px at headings. Always attached to the sector name. ═ */ .si{display:inline-block;flex:none;vertical-align:middle;color:currentColor} .si svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} .si--24{width:24px;height:24px} .si--32{width:32px;height:32px} .si--48{width:48px;height:48px} .si--64{width:64px;height:64px} .si-row{display:inline-flex;align-items:center;gap:9px} /* ═ BOARD NAVY HEADER (who-it's-for anatomy) + cream body ═ */ .bh{background:var(--gt-surface-ink,#0D0C1A);background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,0.055) 1px,transparent 0);background-size:7px 7px;padding:88px 0 76px} .bh__in{max-width:1140px;margin:0 auto;padding:0 32px} .bh__kick{display:inline-block;font-family:var(--gt-font-mono);font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:#F7F5F0;border:1px solid rgba(247,245,240,0.45);border-radius:9999px;padding:5px 13px} .bh__h{font-family:var(--gt-font-display);font-size:clamp(32px,3.7vw,48px);line-height:1.08;letter-spacing:-0.025em;font-weight:700;color:#F7F5F0;margin:22px 0 0;max-width:24ch;text-wrap:balance} .bh__lede{font-size:17px;line-height:1.6;color:rgba(247,245,240,0.86);margin:18px 0 0;max-width:62ch} .bh__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:34px} .bh__tile{background:#fff;border-radius:var(--gt-radius-lg);padding:20px 20px 18px;display:flex;flex-direction:column;gap:7px} .bh__tile .k{font-family:var(--gt-font-mono);font-size:13px;letter-spacing:0.09em;text-transform:uppercase;color:var(--gt-fg-2)} .bh__tile .v{font-family:var(--gt-font-display);font-size:31px;font-weight:700;letter-spacing:-0.02em;line-height:1;color:var(--gt-fg-1);font-variant-numeric:tabular-nums} .bh__tile .s{font-size:13px;line-height:1.45;color:var(--gt-fg-2)} .bh__tile--on .v,.bh__tile--risk .v,.bh__tile--off .v{color:var(--gt-fg-1)} @media(max-width:640px){.bh{padding:64px 0 56px}.bh__in{padding:0 24px}} .bbody{background:var(--gt-surface-1,#F7F5F1)} .bbody .container,.bbody .wrap{max-width:1140px;margin:0 auto;padding:0 32px} /* ═ BOARD FORMAT (2026-08-06): navy header band carries the header anatomy + stat tiles as white cards; the guided read sits below on the cream ground in ink. Full-record tables keep their designed navy surface as an inset panel inside the expander, so no component is re-coloured. ═ */ .bh .dj-take{margin:0} .bh .dj-take__h{font-family:var(--gt-font-display);font-size:clamp(32px,3.7vw,48px);line-height:1.08;letter-spacing:-0.025em;font-weight:700;margin:22px 0 0;max-width:24ch} .bh .dj-take__sub{font-size:17px;line-height:1.6;margin:18px 0 0;max-width:62ch} .bh .gb-band{margin:34px 0 0;border:0;padding:0;background:none} .bh .gb-band__label{display:none} .bh .gb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:14px} .bh .gb-card{background:#fff;border:0;border-radius:var(--gt-radius-lg);padding:20px} .bh .gb-card__t,.bh .gb-card__sec,.bh .gb-card__src{color:var(--gt-fg-2)} .bh .gb-card__v{color:var(--gt-fg-1)} .bh .gb-card--on .gb-card__v,.bh .nz-tile--on .gb-card__v{color:var(--gt-fg-1)} .bh .gb-card--risk .gb-card__v,.bh .nz-tile--risk .gb-card__v{color:var(--gt-fg-1)} .bh .gb-card--off .gb-card__v,.bh .nz-tile--off .gb-card__v{color:var(--gt-fg-1)} .bh .gb-badge{border-color:var(--gt-border-strong)} .gb-wall.is-cream{background:var(--gt-surface-1);padding-top:64px} .is-cream .bo-note,.is-cream .bo-scope,.is-cream .gb-band__label,.is-cream .bo-empty{color:var(--gt-fg-2)} .is-cream .bo-note b,.is-cream .gb-band__label b{color:var(--gt-fg-1)!important} .is-cream .bo-controls input{background:#fff;border:1px solid var(--gt-border-strong);color:var(--gt-fg-1)} .is-cream .bo-controls input::placeholder{color:var(--gt-fg-3)} .is-cream .verif-link{color:var(--gt-fg-1);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} /* the full record keeps its navy home, inset on the cream */ .is-cream .dj-exp__b{background:var(--gt-surface-ink);background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,0.05) 1px,transparent 0);background-size:7px 7px;border-radius:var(--gt-radius-lg);padding:26px 22px;margin-top:14px} .is-cream .dj-exp__b .dj-exp__note{color:rgba(247,245,240,0.86)} /* sector icons on the board surfaces */ .bh .si,.dj-exp__b .si{color:#F7F5F0} .is-cream .dj-chap .si,.is-cream .dj-top .si{color:var(--gt-fg-1)} .dj-chap__q .si{margin-right:12px} /* board header tiles are WHITE cards — status pills keep their semantics but at AA weight on white, and the neutral "no official status" pill must not inherit its on-navy pale ink (2026-08-06) */ .bh .gb-card__t,.bh .gb-card__s,.bh .gb-card__src,.bh .gb-card__sub,.bh .gb-card p,.bh .gb-card span:not(.gb-card__v):not(.gb-badge){color:var(--gt-fg-2)} .bh .gb-badge{color:var(--gt-fg-1);border-color:var(--gt-border-strong);background:transparent} .bh .gb-badge--teal,.bh .gb-badge--on{color:var(--gt-fg-1);border-color:#5EDDC9;background:color-mix(in srgb,#5EDDC9 22%,transparent)} .bh .gb-badge--amber,.bh .gb-badge--risk{color:var(--gt-fg-1);border-color:#FFBB33;background:color-mix(in srgb,#FFBB33 30%,transparent)} .bh .gb-badge--danger,.bh .gb-badge--off{color:var(--gt-fg-1);border-color:#E5484D;background:color-mix(in srgb,#E5484D 20%,transparent)} .bh .gb-badge b,.bh .gb-badge span{color:inherit} /* ═ Ruling 2 + status law (2026-08-07) · a status chip carries its colour in the fill and the border; the words inside it are ink on light and paper on ink. On track #5EDDC9 · At risk #FFBB33 · Off track #E5484D. ═ */ body .gb-badge{ color:var(--gt-fg-on-ink); border-color:rgba(247,245,240,0.45); } body .gb-badge--teal,body .gb-badge--on{ border-color:#5EDDC9; } body .gb-badge--amber,body .gb-badge--pending,body .gb-badge--risk{ border-color:#FFBB33; } body .gb-badge--danger,body .gb-badge--off{ border-color:#E5484D; } .is-cream .gb-badge,.gb-wall.is-cream .gb-badge,.bh .gb-badge{ color:var(--gt-fg-1); } .is-cream .gb-badge--teal,.is-cream .gb-badge--on,.gb-wall.is-cream .gb-badge--teal{ border-color:#5EDDC9; background:color-mix(in srgb,#5EDDC9 22%,transparent); } .is-cream .gb-badge--amber,.is-cream .gb-badge--pending,.is-cream .gb-badge--risk,.gb-wall.is-cream .gb-badge--pending,.gb-wall.is-cream .gb-badge--amber{ border-color:#FFBB33; background:color-mix(in srgb,#FFBB33 30%,transparent); } .is-cream .gb-badge--danger,.is-cream .gb-badge--off{ border-color:#E5484D; background:color-mix(in srgb,#E5484D 20%,transparent); } .gb-badge .d{ background:currentColor; } .gb-badge--teal .d,.gb-badge--on .d{ background:#5EDDC9; } .gb-badge--amber .d,.gb-badge--pending .d,.gb-badge--risk .d{ background:#FFBB33; } .gb-badge--danger .d,.gb-badge--off .d{ background:#E5484D; } /* ═══════════ ONE CARD SHAPE 2026-08-07 (Bec) ═══════════ Every card — a bordered or filled container holding a unit of content — takes the house radius var(--gt-radius-lg) (12px), the value .hub-card and .cat-card already use. Pills/chips on --gt-radius-full, buttons, inputs, images and full-bleed bands are excluded. ALSO excluded: DIVIDERS — anything with fewer than three borders (a left-rule callout, a top hairline). A radius turns a single hairline into an orphaned arc ending in mid-air. SINGLE SOURCE: change the shape here, not in a page. */ .tile, .featur, .comp-card, .hotspot, .focus, .secstrip__tile, .bh__tile, .bh .gb-card, .gb-card, .gb-row, .lb-hz__t, .lb-sum, .lb-gatecard, .pl-gatecard, .dj-exp__b, .dj-tile, .cv-card, .ex-gate, .pp2-tie, .ft-rung, .ft-mobilenote, .ft-inst-card, .ft-tile, .spot-getfeatured, .hm-readout, .hz-note__sub, .ft-tip, .hm-tip, .is-cream .gb-card, .gb-wall.is-cream .gb-card, .is-cream .dj-exp__b, .gb-detail .dj-exp__b{ border-radius:var(--gt-radius-lg); } /* full-bleed scrollbar safety lives with the .gsb component in colors_and_type.css — every page carrying the banner loads that file, which is not true of this one. */ /* sector-strip reversal lives in colors_and_type.css — index.html does not load this file */ /* ═══════════ SECTOR ARC 2026-08-09 ═══════════ The twelve-beat arc shared by the nine sector pages, Clean Energy and Future Technologies. Lifted here from energy-and-grid.html so all eleven consume ONE source — a page that carries the arc markup without this block renders the benefits as prose and loses the field colours. Field colours come from --sec-accent/--sec-paper/--sec-tint/--sec-rule set per page. */ :root{ --report-accent:#0F1B3D; } /* the sector’s printed cover accent — declared per the palette charter’s --report-accent exception; the ONE accent on this surface */ .hub-hero{ background:var(--gt-surface-1); border-bottom:1px solid var(--gt-border); } .hub-hero .lead{ color:var(--gt-fg-2); } .hub-body{ font-size:16.5px; line-height:27px; color:var(--gt-fg-1); max-width:760px; } .hub-body p{ margin:0 0 18px; } .hub-why{ border-left:3px solid var(--report-accent); padding:4px 0 4px 26px; max-width:760px; } .hub-vols{ display:flex; flex-direction:column; margin-top:8px; border-top:1px solid var(--gt-border); } .hub-vol{ display:grid; grid-template-columns:90px 1fr auto; gap:20px; align-items:center; padding:18px 4px; border-bottom:1px solid var(--gt-border); text-decoration:none; color:var(--gt-fg-1); } .hub-vol:hover{ background:var(--gt-surface-2); } .hub-vol__no{ font-family:var(--gt-font-mono); font-size:13px; font-weight:600; letter-spacing:0.04em; color:var(--gt-ink); } .hub-vol__t{ font-family:var(--gt-font-display); font-size:17px; font-weight:600; letter-spacing:-0.012em; } .hub-vol__go{ font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gt-fg-1); white-space:nowrap; } .hub-cta{ display:flex; flex-direction:column; gap:0; margin-top:8px; border-top:1px solid var(--gt-border); max-width:760px; } .hub-cta a{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:18px 4px; border-bottom:1px solid var(--gt-border); text-decoration:none; color:var(--gt-fg-1); } .hub-cta a:hover{ background:var(--gt-surface-2); } .hub-cta__l{ font-family:var(--gt-font-display); font-size:17px; font-weight:600; } .hub-cta__r{ font-size:14px; color:var(--gt-fg-2); text-align:right; } .hub-note{ margin-top:18px; font-size:14px; line-height:21px; color:var(--gt-fg-3); max-width:760px; } @media (max-width:640px){ .hub-vol{ grid-template-columns:1fr; gap:6px; } .hub-vol__go{ justify-self:start; } .hub-cta a{ flex-direction:column; gap:4px; } .hub-cta__r{ text-align:left; } } .hub-card:target{ background-color:color-mix(in srgb, var(--report-accent) 8%, white); animation:gap-highlight 4s ease-out; } @keyframes gap-highlight{ 0%{ background-color:color-mix(in srgb, var(--report-accent) 18%, white); } 30%{ background-color:color-mix(in srgb, var(--report-accent) 8%, white); } 100%{ background-color:transparent; } } /* ═ Sector arc 2026-08-09 — one structure across all nine pages. Sector accent is read from the volume's own :root and used as a FIELD colour only: panel grounds, rules, the hero block. Never text, never buttons. Text stays ink on paper / paper on ink. ═ */ .sechead{position:relative;overflow:hidden;background:var(--sec-paper);border-bottom:1px solid var(--sec-rule)} /* The series device: a quiet background mark behind the hero, the way a report cover uses it. 200px, 0.06, behind content (z-index:0 against the container's z-index:1), pointer-transparent. The inner SVG is ALSO given width/height in markup — a viewBox with neither expands to fill its container, which is what rendered it full-width and solid black while the arc CSS was missing. */ .sechead__mark{position:absolute;top:-24px;right:-30px;width:200px;height:200px;max-width:200px;max-height:200px;color:var(--sec-accent);opacity:.06;pointer-events:none;z-index:0;overflow:hidden} .sechead__mark svg{width:100%;height:100%;display:block} /* ── The SERIES device (2026-08-10, Bec) ── ONE device: concentric squares with corner nodes, at 0.06. Transcribed from the report covers — all 64 draw squares, so squares ARE the series mark. The dot-grid-plus-hairlines variant is RETIRED: at any opacity a field of small dots read as dirt rather than as a device. Colour resolves from the page's own accent variable, never a fixed hex, because the report cover is dark and the page is pale. The cover device is separate and stays at 317mm-scale. */ .sechead__mark{position:absolute;top:-24px;right:-30px;width:200px;height:200px;max-width:200px;max-height:200px;color:var(--sec-accent,var(--accent,var(--gt-ink)));opacity:.06;pointer-events:none;z-index:0;overflow:hidden} .sechead__mark svg{width:100%;height:100%;display:block} .sechead > .container{position:relative;z-index:1} .sechead__mark svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4} .sechead .container{position:relative} .sechead__kick{font-family:var(--gt-font-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gt-fg-2)} .sechead__row{display:flex;align-items:center;gap:22px;margin-top:20px} .sechead__ico .si svg,.sechead__ico svg{width:64px;height:64px;stroke:currentColor;fill:none;stroke-width:1.4;color:var(--gt-fg-1)} .sechead__h{font-family:var(--gt-font-display);font-size:clamp(30px,3.4vw,44px);line-height:1.12;letter-spacing:-.022em;font-weight:700;margin:0;text-wrap:balance;color:var(--gt-fg-1)} .sechead__sub{font-family:var(--gt-font-mono);font-size:14px;letter-spacing:.04em;color:var(--gt-fg-2);margin:18px 0 0} .sechead .lead{font-size:17px;line-height:1.65;color:var(--gt-fg-2);margin:18px 0 0;max-width:74ch;text-wrap:pretty} .sarc{background:var(--sec-paper)} .sarc__beat{padding:44px 0;border-top:1px solid var(--sec-rule)} .sarc__beat:first-child{border-top:0} .sarc__lbl{font-family:var(--gt-font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gt-fg-3)} .sarc__h{font-family:var(--gt-font-display);font-size:clamp(21px,2.3vw,29px);line-height:1.22;letter-spacing:-.018em;font-weight:600;margin:12px 0 0;max-width:34ch;color:var(--gt-fg-1)} .sarc__b{font-size:16.5px;line-height:1.66;color:var(--gt-fg-2);margin:12px 0 0;max-width:70ch} .sarc__beat--field{background:var(--sec-tint);border-radius:var(--gt-radius-lg);padding:34px 30px;margin-top:10px;border-top:0;border-left:3px solid var(--sec-accent)} .sben{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px;counter-reset:sb} .sben__i{background:#fff;border:1px solid var(--sec-rule);border-radius:var(--gt-radius-lg);padding:22px 20px;box-shadow:var(--gt-shadow-soft);min-width:0} .sben__n{counter-increment:sb;font-family:var(--gt-font-mono);font-size:15px;color:var(--gt-fg-3);display:block} .sben__n::before{content:counter(sb,decimal-leading-zero)} .sben__t{font-size:15.5px;line-height:1.55;color:var(--gt-fg-1);margin:10px 0 0} .sarc__tstm:empty{display:none} @media(max-width:1000px){.sben{grid-template-columns:1fr 1fr}} @media(max-width:640px){.sben{grid-template-columns:1fr}.sechead__row{gap:14px}.sechead__ico .si svg,.sechead__ico svg{width:48px;height:48px}.sechead__mark{width:260px;height:260px;right:-40px}} /* the inline CTA's sub-line — quieter than the link it follows (imperative pass, 2026-08-10) */ .cta-inline__s{ color:var(--gt-fg-3); font-size:15px; } .cta-inline__s::before{ content:"— "; } /* the boards cross-link above the volumes grid (restored 2026-08-10) */ .hub-boards{ font-size:16px; line-height:1.6; color:var(--gt-fg-2); margin:0 0 24px; max-width:78ch; } /* ═ Sector-page testimonial 2026-08-10 ═ Agreed treatment: amber quote glyph, big centred quote as the hero of the section, centred attribution beneath. Single quote, no carousel. The slot's :empty{display:none} rule still governs the six pages left deliberately empty. */ .sarc__tstm{ text-align:center; padding:56px 0 8px; border-top:1px solid var(--sec-rule,var(--gt-border)); } .stst__glyph{ display:block; margin:0 auto 26px; line-height:0; } .stst__glyph svg{ width:74px; height:73px; display:block; margin:0 auto; } .stst__q{ font-family:var(--gt-font-display); font-style:italic; font-weight:400; font-size:clamp(22px,2.5vw,30px); line-height:1.42; letter-spacing:-0.012em; color:var(--gt-fg-1); margin:0 auto; max-width:26ch; text-wrap:pretty; } .stst__by{ display:flex; flex-direction:column; gap:3px; margin-top:28px; } .stst__nm{ font-family:var(--gt-font-display); font-size:17px; font-weight:600; letter-spacing:-0.01em; color:var(--gt-fg-1); } .stst__ro{ font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gt-fg-2); } @media (max-width:640px){ .sarc__tstm{ padding:40px 0 4px; } .stst__q{ max-width:30ch; } } /* The bracketed document number on volume cards — the same subordinate serial as .cat-card__doc: mono, muted ink, absolute 13px floor (a proportional drop from a 28px numeral would fall under the minimum), no colour. Text is never coloured. */ .hub-card__doc{ font-family:var(--gt-font-mono); font-size:max(13px, 0.5em); font-weight:500; letter-spacing:0.02em; color:var(--gt-fg-3); white-space:nowrap; } /* Report page-header mark (2026-08-10): the same series device as the arc pages — concentric squares with corner nodes, 200px, 0.06, behind content. Colour resolves from the report's OWN --accent, so it works against the pale page. The cover device (.cover__grid, 84mm) is separate and untouched. */ .rep-mark{position:absolute;top:18px;right:24px;width:200px;height:200px;color:var(--accent,var(--gt-ink));opacity:.06;pointer-events:none;z-index:0} .rep-mark svg{width:100%;height:100%;display:block} /* Takeaway-headline emoji at 75% of the type they sit in (Bec, 2026-08-13, -25%). Scoped to .dj-take so the board pills and every other approved placement are untouched. */ .dj-take .dj-em{ font-size:0.75em; line-height:1; } /* the takeaway headline may carry a literal line break where the copy is two sentences (Bec, 2026-08-13) — el() writes with textContent, so \n is the safe break, not markup */ .dj-take__h{ white-space:pre-line; } /* ═ CONSULTANCY REPORT SKIN 2026-08-21 — the report pages' vocabulary on the product pages. Design only: every count and price stays bound; text is paper-on-ink; colour is field only. */ body.crs{background:#0a0a0a;color:#f5f3ee} .crs .blk{background:transparent} .crs .kck{color:rgba(245,243,238,0.62);border-color:rgba(245,243,238,0.3)} .crs .note-l,.crs .smp__l,.crs .buy3 p{color:rgba(245,243,238,0.78)} .crs .note-l b,.crs .smp__l b,.crs .buy3 p b{color:#f5f3ee} .crs .note-l a,.crs .buy3 a{color:#f5f3ee} .crs .cx th{color:rgba(245,243,238,0.62);border-bottom-color:rgba(245,243,238,0.4)} .crs .cx td{color:rgba(245,243,238,0.86);border-bottom-color:rgba(245,243,238,0.14)} .crs .cx tr.fam td{color:rgba(245,243,238,0.62)} .crs .smp,.crs .buy3{border-color:rgba(245,243,238,0.16)} .crs .smp{background:#141414;box-shadow:none} /* metadata rail */ .crs-rail{display:flex;justify-content:space-between;gap:18px;font-family:var(--gt-font-mono);font-size:13px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(245,243,238,0.62);padding:22px 0 0} /* the cover plate */ .crs-cover{max-width:520px;aspect-ratio:210/297;margin:44px auto 8px;border-radius:6px;padding:34px 34px 30px;position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px -30px rgba(0,0,0,0.9)} .crs-cover__top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px} .crs-cover__wm{width:120px;height:auto;display:block} .crs-cover__series{text-align:right;font-family:var(--gt-font-mono);font-size:13px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(245,243,238,0.62);line-height:1.9} .crs-cover__grid{position:absolute;right:22px;top:130px;width:180px;height:180px;background-image:radial-gradient(circle,rgba(245,243,238,0.13) 1.2px,transparent 1.6px);background-size:22px 22px;pointer-events:none} .crs-cover__rule{border:0;border-top:1px solid rgba(245,243,238,0.3);margin:auto 0 18px} .crs-cover h1{font-family:var(--gt-font-display);font-weight:600;font-size:clamp(34px,4vw,46px);line-height:1.02;letter-spacing:-0.03em;color:#f5f3ee;margin:0 0 14px;position:relative;z-index:1} .crs-cover__sub{font-size:15.5px;line-height:1.6;color:rgba(245,243,238,0.78);margin:0;position:relative;z-index:1} .crs-cover__sub b{color:#f5f3ee} /* tier / sample document objects */ .crs-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;align-items:end} .crs-vol{border-radius:5px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:8px;position:relative;box-shadow:0 22px 50px -24px rgba(0,0,0,0.85);border:1px solid rgba(245,243,238,0.12)} .crs-vol--1{min-height:250px}.crs-vol--2{min-height:290px}.crs-vol--3{min-height:330px} .crs-vol__k{font-family:var(--gt-font-mono);font-size:13px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(245,243,238,0.62)} .crs-vol h2{font-family:var(--gt-font-display);font-size:22px;font-weight:600;color:#f5f3ee;margin:0} .crs-vol .pr{font-family:var(--gt-font-mono);font-size:30px;font-weight:500;color:#f5f3ee;margin-top:auto} .crs-vol p{font-size:14.5px;line-height:1.55;color:rgba(245,243,238,0.78);margin:0} .crs-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px} .crs-mini a{aspect-ratio:210/280;border-radius:4px;padding:16px 16px 13px;display:flex;flex-direction:column;gap:6px;text-decoration:none;border:1px solid rgba(245,243,238,0.14);box-shadow:0 16px 36px -18px rgba(0,0,0,0.85);background:#12203f} .crs-mini .c{font-family:var(--gt-font-mono);font-size:13px;letter-spacing:0.1em;color:rgba(245,243,238,0.62)} .crs-mini .t{font-family:var(--gt-font-display);font-size:16px;font-weight:600;color:#f5f3ee;line-height:1.25} .crs-mini .m{margin-top:auto;font-family:var(--gt-font-mono);font-size:13px;letter-spacing:0.1em;color:rgba(245,243,238,0.62)} .crs-mini .f{font-family:var(--gt-font-mono);font-size:13px;letter-spacing:0.12em;color:#f5f3ee} .crs .pb-stages{border-top-color:rgba(245,243,238,0.16)} .crs .pb-stages span{color:#f5f3ee}.crs .pb-stages i{color:rgba(245,243,238,0.55)} .crs-pack{font-family:var(--gt-font-mono);font-size:13px;letter-spacing:0.1em;color:rgba(245,243,238,0.55)} @media(max-width:900px){.crs-shelf,.crs-mini{grid-template-columns:1fr}.crs-cover{max-width:100%}} /* ═ Product tables on the sector register (2026-08-21) — the .cx table was authored for the ink report skin; the product pages now sit on the sector arc's cream, so the table takes the volumes-grid register: white ground, hairline rules, mono heads, ink text. Field colour only. ═ */ .cx-wrap{ background:#fff; border:1px solid var(--gt-border); border-radius:12px; padding:8px 20px 14px; box-shadow:var(--gt-shadow-sm); overflow-x:auto; } .cx{ width:100%; border-collapse:collapse; } .cx th{ font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; font-weight:500; color:var(--gt-fg-3); text-align:left; padding:12px 10px 9px; border-bottom:1px solid var(--gt-border-strong); } .cx td{ font-size:14.5px; line-height:1.5; color:var(--gt-fg-1); padding:9px 10px; border-bottom:1px solid var(--gt-border); vertical-align:top; } .cx tr:last-child td{ border-bottom:0; } .cx tr.fam td{ font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.09em; text-transform:uppercase; color:var(--gt-fg-2); background:var(--gt-surface-2); border-bottom:1px solid var(--gt-border-strong); padding:10px; } .cx .tick{ text-align:center; font-size:14.5px; } .cx .crs-pack{ font-family:var(--gt-font-mono); font-size:13px; letter-spacing:0.08em; color:var(--gt-fg-3); text-align:center; } /* Briefing sign-up states (2026-09-12) — shared, tokens only */ .bs-status{flex:1 0 100%;width:100%;margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--gt-fg-2)}.bs-status:empty{display:none}.bs-status.is-err{color:var(--gt-fg-1)} .bs-ok{margin:0;font-size:15px;line-height:1.5;color:inherit}.bs-ok strong{font-family:var(--gt-font-display);font-weight:600} .bs-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none} .bs-consent{font-size:13px;line-height:1.5;color:var(--gt-fg-2);margin:10px 0 0;max-width:460px}.bs-consent a{color:inherit;text-decoration:underline} form[data-briefing-signup]{flex-wrap:wrap}