/* ============================================================ ThinkTribal - editorial layer (Wolverine-inspired) Loaded AFTER tt.css. Opt-in via . A monochrome, image-forward, oversized-type reinterpretation: full-bleed hero, auto-scrolling marquee, big editorial section heads with generous negative space, alternating feature blocks and a clean insight-card grid. Reuses the existing motion hooks (.sec-head/.card/.media-row/.sector). ============================================================ */ /* ---- Tokens (monochrome, cool-warm neutral) ---- */ body.ww { --ww-ink: #16150F; /* page text - flips with theme */ --ww-paper: #F2F1EC; /* page bg - flips with theme */ --ww-paper-2: #E7E5DE; /* band - flips with theme */ --ww-line: rgba(22,21,15,0.16); --ww-mut: #5d5a50; /* darkened for ≥4.5:1 on paper-2 bands */ /* Always-dark surfaces (solid header, marquee, roles, bookend, white buttons on dark). These NEVER flip with theme so their light text stays readable in both light and dark mode. */ --ww-dark: #16150F; --ww-on-dark: #F2F1EC; --ww-accent: var(--ww-ink); /* mono by default */ --tt-radius: 0px; --tt-bg: var(--ww-paper); --tt-bg-alt: var(--ww-paper-2); --tt-fg: var(--ww-ink); --tt-fg-muted: var(--ww-mut); --tt-border: var(--ww-line); --tt-font: 'Satoshi', 'Helvetica Neue', Arial, sans-serif; --ww-disp: 'Satoshi', 'Helvetica Neue', Arial, sans-serif; background: var(--ww-paper); color: var(--ww-ink); font-family: var(--tt-font); } /* accent directions (Tweaks) */ html[data-look-accent="teal"] body.ww { --ww-accent: #467886; } html[data-look-accent="rust"] body.ww { --ww-accent: #A0522D; } body.ww a { color: var(--ww-accent); } /* ---- Display type ---- */ body.ww h1, body.ww h2, body.ww h3, body.ww h4 { font-family: var(--ww-disp); font-weight: 800; letter-spacing: -0.02em; line-height: 0.96; text-wrap: balance; } html[data-look-case="upper"] body.ww h1, html[data-look-case="upper"] body.ww h2, html[data-look-case="upper"] body.ww .rolerow h3, html[data-look-case="upper"] body.ww .sectorrow h3 { text-transform: uppercase; letter-spacing: -0.015em; } html[data-look-case="upper"] body.ww .hero-full h1, html[data-look-case="upper"] body.ww .hero-split h1, html[data-look-case="upper"] body.ww .bookend h2 { text-transform: uppercase; } body.ww .kick { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ww-mut); display: block; } html[data-theme="dark"] body.ww { --ww-ink:#f4f2ec; --ww-paper:#121109; --ww-paper-2:#1b1a12; --ww-line:rgba(255,255,255,0.14); --ww-mut:rgba(255,255,255,0.62); } /* ---- Header - solid dark, always. Clean and legible in every theme/hero. ---- */ body.ww .tt-header { background: var(--ww-dark); padding: 20px 44px; transition: padding .35s ease, box-shadow .35s ease; } body.ww .tt-header nav a { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; color: rgba(255,255,255,0.66); } body.ww .tt-header nav a.active, body.ww .tt-header nav a:hover { color: var(--ww-accent-dk); } body.ww .tt-toggle .dot { background: var(--ww-accent-dk); } body.ww .tt-header.solid { box-shadow: 0 1px 0 rgba(255,255,255,0.08); padding: 14px 44px; } /* white pill button - clearly delineated on the dark header */ body.ww .tt-header .btn-primary { background: #fff; color: var(--ww-dark); } body.ww .tt-header .btn-primary:hover { background: var(--ww-accent); color: var(--ww-paper); } body.ww .tt-header .logo img { width: 100%; height: auto; display: block; } /* ---- Buttons - industrial, squared ---- */ body.ww .btn-primary { background: var(--ww-ink); color: var(--ww-paper); border-radius: 0; font-family: var(--ww-disp); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; padding: 16px 30px; } body.ww .btn-primary:hover { background: var(--ww-accent); color: var(--ww-paper); } body.ww .btn-ghost { border-radius: 0; box-shadow: inset 0 0 0 1.5px var(--ww-ink); font-family: var(--ww-disp); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; padding: 16px 30px; color: var(--ww-ink); } body.ww .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ww-ink); background: var(--ww-ink); color: var(--ww-paper); } body.ww .btn-ghost.on-dark { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5); color:#fff; } body.ww .btn-ghost.on-dark:hover { background:#fff; color: var(--ww-ink); box-shadow: inset 0 0 0 1.5px #fff; } /* Hover motion cue - lift + shadow. Gives feedback in mono, where accent==ink means the bg swap is invisible. */ body.ww .btn-primary, body.ww .btn-ghost { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease; } body.ww .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.22); } body.ww .btn-ghost:hover, body.ww .btn-ghost.on-dark:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { body.ww .btn-primary:hover, body.ww .btn-ghost:hover, body.ww .btn-ghost.on-dark:hover { transform: none; } } /* ================= HERO - full bleed ================= */ body.ww section.hero-full { position: relative; padding: 0; min-height: 92vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #000; } body.ww .hero-full .bg { position: absolute; inset: 0; z-index: 0; } body.ww .hero-full .bg img { width: 100%; height: 100%; object-fit: cover; display: block; } body.ww .hero-full .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,8,0.55) 0%, rgba(10,10,8,0.18) 34%, rgba(10,10,8,0.72) 100%); } body.ww .hero-full .container { position: relative; z-index: 1; padding-bottom: 68px; padding-top: 140px; width: 100%; } body.ww .hero-full h1 { color: #fff; font-size: clamp(40px, 4vw, 56px); line-height: 1.02; max-width: 18ch; margin: 18px 0 0; } body.ww .hero-full .sub { color: rgba(255,255,255,0.86); font-size: 18px; line-height: 1.5; max-width: 620px; margin: 26px 0 0; } body.ww .hero-full .kick { color: rgba(255,255,255,0.7); } body.ww .hero-full .cta-row { margin-top: 34px; } body.ww .hero-full .btn-primary { background:#fff; color: var(--ww-dark); } body.ww .hero-full .btn-primary:hover { background: var(--ww-accent); color: var(--ww-paper); } body.ww .hero-full .scroll-cue { position: absolute; right: 44px; bottom: 40px; z-index: 1; color: rgba(255,255,255,0.7); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; writing-mode: vertical-rl; } @media (prefers-reduced-motion: no-preference) { html[data-float="on"] body.ww .hero-full .bg img { animation: ww-ken 22s ease-in-out infinite alternate; } } @keyframes ww-ken { from { transform: scale(1.04); } to { transform: scale(1.14) translateY(-1.5%); } } /* ---- HERO - split variant (Tweaks) ---- */ body.ww section.hero-split { display: none; padding: 150px 0 80px; background: var(--ww-paper); } body.ww .hero-split .row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; } body.ww .hero-split h1 { font-size: clamp(40px, 4vw, 56px); line-height: 1.04; margin: 18px 0 0; } body.ww .hero-split .sub { font-size: 18px; color: var(--ww-mut); line-height: 1.55; max-width: 520px; margin-top: 24px; } body.ww .hero-split .shot { aspect-ratio: 4/5; overflow: hidden; } body.ww .hero-split .shot img { width:100%; height:100%; object-fit: cover; display:block; } html[data-look-hero="split"] body.ww section.hero-full { display: none; } html[data-look-hero="split"] body.ww section.hero-split { display: block; } /* ================= MARQUEE ================= */ body.ww .marquee { padding: 0; overflow: hidden; border-top: 1px solid var(--ww-line); border-bottom: 1px solid var(--ww-line); background: var(--ww-dark); } body.ww .marquee .track { display: flex; gap: 0; width: max-content; animation: ww-marquee 48s linear infinite; } body.ww .marquee .cell { position: relative; width: 30vw; max-width: 460px; height: 300px; flex: 0 0 auto; overflow: hidden; border-right: 1px solid rgba(255,255,255,0.1); } body.ww .marquee .cell img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.02); opacity: 0.82; transition: opacity .4s ease, filter .4s ease; } body.ww .marquee .cell:hover img { filter: grayscale(0); opacity: 1; } body.ww .marquee .cell .tag { position: absolute; left: 16px; bottom: 14px; color:#fff; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; z-index:1; } body.ww .marquee .cell::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,0.5), transparent 45%); } body.ww .marquee:hover .track { animation-play-state: paused; } @keyframes ww-marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { body.ww .marquee .track { animation: none; } } /* ================= Editorial statement ================= */ body.ww section { padding: 120px 0; } body.ww section.statement { padding: 130px 0; } body.ww .statement .kick { margin-bottom: 30px; } body.ww .statement h2 { font-size: clamp(28px, 2.6vw, 38px); max-width: 24ch; text-transform: none; } body.ww .statement .lede { font-size: 18px; color: var(--ww-mut); max-width: 640px; margin-top: 30px; line-height: 1.5; } body.ww .statement .cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 72px; border-top: 1px solid var(--ww-line); } body.ww .statement .col { padding-top: 26px; } body.ww .statement .col h3 { font-size: 20px; text-transform: none; letter-spacing: -0.01em; margin-bottom: 12px; } body.ww .statement .col p { font-size: 16px; color: var(--ww-mut); line-height: 1.55; } body.ww .statement .col .n { font-family: var(--ww-disp); font-weight:800; font-size: 13px; color: var(--ww-accent); letter-spacing: 0.14em; display:block; margin-bottom: 14px; } /* section head, oversized ---- */ body.ww .sec-head { max-width: 1000px; margin-bottom: 64px; } body.ww .sec-head h2 { font-size: clamp(28px, 2.6vw, 38px); max-width: 24ch; text-transform: none; } body.ww .sec-head .lede { font-size: 18px; color: var(--ww-mut); margin-top: 20px; max-width: 660px; line-height: 1.55; } /* ================= Alternating feature blocks ================= */ body.ww section.features { padding-top: 20px; } body.ww .feat { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; border-top: 1px solid var(--ww-line); } body.ww .feat + .feat { } body.ww .feat .shot { position: relative; overflow: hidden; min-height: 560px; background: var(--ww-paper-2); } body.ww .feat .shot img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; display:block; } body.ww .feat .copy { padding: 72px 8% 72px 0; display: flex; flex-direction: column; justify-content: center; } body.ww .feat.flip .shot { order: 2; } body.ww .feat.flip .copy { order: 1; padding: 72px 8% 72px 0; } body.ww .feat .plogo { height: 30px; margin-bottom: 26px; } body.ww .feat .copy > p.big { font-size: clamp(18px,1.4vw,20px); line-height: 1.45; color: var(--ww-ink); max-width: 34ch; } body.ww .feat ul { list-style: none; margin: 28px 0 0; display: grid; gap: 0; } body.ww .feat li { font-size: 16px; color: var(--ww-ink); padding: 15px 0 15px 26px; position: relative; border-top: 1px solid var(--ww-line); line-height: 1.45; } body.ww .feat li:last-child { border-bottom: 1px solid var(--ww-line); } body.ww .feat li::before { content: ""; position: absolute; left: 0; top: 22px; width: 8px; height: 8px; background: var(--ww-accent); } body.ww .feat .cta-row { margin-top: 34px; } body.ww .feat .idxno { font-family: var(--ww-disp); font-weight: 800; font-size: 13px; letter-spacing: 0.18em; color: var(--ww-mut); margin-bottom: 20px; display:block; } /* ================= Role index (big numbered rows) ================= */ body.ww section.roles { background: var(--ww-dark); color: var(--ww-on-dark); } body.ww section.roles .sec-head h2 { color: var(--ww-on-dark); } body.ww section.roles .sec-head .lede { color: rgba(255,255,255,0.66); } body.ww .rolelist { border-top: 1px solid rgba(255,255,255,0.16); } body.ww .rolerow { display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: baseline; padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,0.16); } body.ww .rolerow .n { font-family: var(--ww-disp); font-weight: 800; font-size: 16px; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; } body.ww .rolerow h3 { color: var(--ww-on-dark); font-size: clamp(20px,1.8vw,26px); text-transform: none; } body.ww .rolerow p { color: rgba(255,255,255,0.66); font-size: 15px; line-height: 1.55; } body.ww .rolerow p .lead { color:#fff; font-weight:700; display:block; margin-bottom: 4px; } @media (prefers-reduced-motion: no-preference) { html[data-hover="on"] body.ww .rolerow { transition: padding-left .35s var(--anim-ease); } html[data-hover="on"] body.ww .rolerow:hover { padding-left: 12px; } } /* ================= Consultancy split ================= */ body.ww section.pract { background: var(--ww-paper-2); } body.ww .pract-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: center; } body.ww .pract-grid h2 { font-size: clamp(28px, 2.6vw, 38px); text-transform: none; } body.ww .pract-grid p { font-size: 17px; color: var(--ww-ink); line-height: 1.6; margin-top: 18px; } body.ww .brand7x { height: 40px; margin-bottom: 24px; } body.ww .pstats { display: grid; grid-template-columns: 1fr; } body.ww .pstat { border-top: 1px solid var(--ww-line); padding: 24px 0; display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: baseline; } body.ww .pstat:last-child { border-bottom: 1px solid var(--ww-line); } body.ww .pstat .num { font-family: var(--ww-disp); font-weight: 800; font-size: clamp(40px,4.4vw,60px); line-height: 0.9; letter-spacing: -0.02em; } body.ww .pstat .lbl { font-size: 15px; color: var(--ww-mut); line-height: 1.5; } /* ================= Insight / case-note card grid ================= */ body.ww .notes { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; } body.ww .note { display: block; color: var(--ww-ink); } body.ww .note:hover { text-decoration: none; } body.ww .note .thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--ww-paper-2); margin-bottom: 22px; } body.ww .note .thumb img { width:100%; height:100%; object-fit: cover; display:block; transition: transform .5s var(--anim-ease); } body.ww .note:hover .thumb img { transform: scale(1.05); } body.ww .note .kick { margin-bottom: 12px; } body.ww .note h3 { font-size: 20px; text-transform: none; letter-spacing: -0.01em; line-height: 1.15; } body.ww .note p { font-size: 15px; color: var(--ww-mut); margin-top: 12px; line-height: 1.55; } body.ww .note .more { font-family: var(--ww-disp); font-weight:700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 16px; display:inline-block; color: var(--ww-accent); } /* ================= Sectors editorial rows ================= */ body.ww .sectorlist { border-top: 1px solid var(--ww-line); } body.ww .sectorrow { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--ww-line); color: var(--ww-ink); } body.ww .sectorrow:hover { text-decoration: none; } body.ww .sectorrow .n { font-family: var(--ww-disp); font-weight: 800; color: var(--ww-mut); font-size: 15px; letter-spacing: 0.1em; } body.ww .sectorrow h3 { font-size: clamp(20px,1.8vw,26px); text-transform: none; } body.ww .sectorrow .go { font-family: var(--ww-disp); font-weight:700; font-size: 12px; letter-spacing:0.14em; text-transform:uppercase; color: var(--ww-mut); } @media (prefers-reduced-motion: no-preference) { html[data-hover="on"] body.ww .sectorrow { transition: padding-left .35s var(--anim-ease); } html[data-hover="on"] body.ww .sectorrow:hover { padding-left: 12px; } html[data-hover="on"] body.ww .sectorrow:hover .go { color: var(--ww-accent); } } /* ================= Bookend ================= */ body.ww .bookend { background: var(--ww-dark); } /* buttons on the dark bookend must stay high-contrast in BOTH themes */ body.ww .bookend .btn-primary { background: #fff; color: var(--ww-dark); } body.ww .bookend .btn-primary:hover { background: var(--ww-accent); color: var(--ww-paper); } body.ww .bookend h2 { font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -0.02em; line-height: 1.05; } body.ww .bookend .visit { background: rgba(255,255,255,0.05); border-radius: 0; } /* when the duplicate address block is removed, let the CTA span full width */ body.ww .bookend .grid:not(:has(.visit)) { grid-template-columns: 1fr; } body.ww .bookend .visit h4 { color: rgba(255,255,255,0.5); } /* ---- Trust band restyle ---- */ body.ww .trust { background: var(--ww-paper); border-bottom: 1px solid var(--ww-line); padding: 26px 0; } body.ww .trust .mark { font-size: 13px; letter-spacing: 0.04em; } body.ww .container { max-width: 1280px; padding: 0 44px; } /* ---- Responsive ---- */ @media (max-width: 980px) { body.ww .feat, body.ww .hero-split .row, body.ww .pract-grid, body.ww .notes, body.ww .statement .cols, body.ww .rolerow, body.ww .pstat { grid-template-columns: 1fr; } body.ww .feat.flip .shot { order: 0; } body.ww .feat .copy, body.ww .feat.flip .copy { padding: 44px 0; } body.ww .feat .shot { min-height: 340px; } body.ww .rolerow { gap: 8px; } body.ww .rolerow .n { grid-row: 1; } body.ww .tt-header { padding: 16px 22px; } body.ww .container { padding: 0 22px; } body.ww .marquee .cell { width: 62vw; height: 220px; } } /* ============================================================ Interior pages - carry the editorial layer to the rest of the site. Components inherit the mono palette / Archivo type / squared radius from the token overrides above; these rules handle accent unification, dark-surface legibility, and hero scale. ============================================================ */ /* Unify the tt.css teal accent with the chosen editorial accent so the whole site follows the locked Look. --ww-accent-dk is a lightened version used only on always-dark surfaces so links stay legible. */ body.ww { --tt-teal: var(--ww-accent); --tt-marine: var(--ww-accent); --ww-accent-dk: #f2f1ec; } html[data-look-accent="teal"] body.ww { --ww-accent-dk: #7fb0bd; } html[data-look-accent="rust"] body.ww { --ww-accent-dk: #cd8a62; } /* Interior heros + intros - editorial scale */ body.ww .hero { padding: 92px 0 84px; } body.ww .hero h1 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; } body.ww .page-intro { padding: 96px 0 60px; } body.ww .page-intro h1 { font-size: clamp(32px, 3.2vw, 44px); max-width: 20ch; } body.ww .page-intro .lede { font-size: 18px; color: var(--ww-mut); margin-top: 22px; } body.ww .cs-intro h1 { font-size: clamp(34px, 3.4vw, 48px); max-width: 24ch; } body.ww .cs-intro .lede { font-size: 18px; color: var(--ww-mut); } /* Accent links on always-dark chrome */ body.ww footer.tt-footer .addr a { color: var(--ww-accent-dk); text-decoration: underline; } body.ww footer.tt-footer .col a:hover { color: var(--ww-accent-dk); opacity: 1; } body.ww .bookend .visit a { color: var(--ww-accent-dk); text-decoration: underline; } /* Case studies - square the cards, keep metrics on-accent, fix dark takeaway */ body.ww .cs-index-card, body.ww .car-col, body.ww .takeaway { border-radius: 0; } body.ww .cs-index-card:hover { box-shadow: inset 0 0 0 1px var(--ww-accent); } body.ww .takeaway { background: var(--ww-dark); } body.ww .takeaway .k { color: var(--ww-accent-dk); } body.ww .case-rail .metric, body.ww .cs-index-card .big { color: var(--ww-accent); } /* Contact form focus */ body.ww .field input:focus, body.ww .field textarea:focus { border-color: var(--ww-accent); } /* ---- Legal / policy prose pages ---- */ body.ww .policy { max-width: 760px; } body.ww .policy .updated { font-family: var(--ww-disp); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ww-mut); margin-bottom: 44px; display: block; } body.ww .policy h2 { font-size: 22px; text-transform: none; letter-spacing: -0.01em; margin: 46px 0 14px; } body.ww .policy h2:first-of-type { margin-top: 0; } body.ww .policy h3 { font-size: 17px; text-transform: none; letter-spacing: 0; margin: 24px 0 10px; } body.ww .policy p { font-size: 16px; line-height: 1.65; color: var(--ww-ink); margin-bottom: 16px; } body.ww .policy ul { list-style: none; margin: 0 0 20px; display: grid; gap: 10px; } body.ww .policy li { font-size: 16px; line-height: 1.6; color: var(--ww-ink); padding-left: 22px; position: relative; } body.ww .policy li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 7px; height: 7px; background: var(--ww-accent); } body.ww .policy a { text-decoration: underline; } body.ww .policy h2 { scroll-margin-top: 108px; } /* Two-column editorial layout for legal pages */ body.ww .legal { display: grid; grid-template-columns: 250px 1fr; gap: 76px; align-items: start; } body.ww .legal .policy { max-width: 720px; } body.ww .legal-aside { position: sticky; top: 108px; display: grid; gap: 26px; } body.ww .legal-aside .meta { display: grid; gap: 4px; } body.ww .legal-aside .k { font-family: var(--ww-disp); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ww-mut); } body.ww .legal-aside .v { font-size: 15px; color: var(--ww-ink); } body.ww .legal-toc { display: grid; gap: 1px; border-top: 1px solid var(--ww-line); padding-top: 14px; } body.ww .legal-toc a { font-size: 13.5px; line-height: 1.35; color: var(--ww-mut); padding: 7px 0; text-decoration: none; transition: color .15s ease; } body.ww .legal-toc a:hover, body.ww .legal-toc a.is-active { color: var(--ww-accent); } body.ww .legal-contact { border-top: 1px solid var(--ww-line); padding-top: 16px; display: grid; gap: 5px; } body.ww .legal-contact a { font-size: 15px; text-decoration: underline; } @media (max-width: 900px){ body.ww .legal { grid-template-columns: 1fr; gap: 32px; } body.ww .legal-aside { position: static; } body.ww .legal-toc { display: none; } } /* ---- ScoreView product widget embeds (iframes) ---- */ body.ww .embed { padding: 100px 0; } body.ww section.embed.alt { background: var(--ww-paper-2); } body.ww .embed-row { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: center; } body.ww .embed-copy h2 { font-size: clamp(28px, 2.6vw, 38px); } body.ww .embed-copy .lede { color: var(--ww-mut); font-size: 18px; line-height: 1.55; margin: 20px 0 30px; max-width: 40ch; } body.ww .embed-frame { position: relative; min-height: 620px; background: #0d1420; overflow: hidden; display: flex; align-items: center; justify-content: center; } body.ww .embed-frame iframe { width: 100%; max-width: 680px; border: 0; display: block; } body.ww .embed-frame .embed-note { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center; padding: 32px; color: rgba(255,255,255,0.55); } body.ww .embed-frame .embed-note strong { font-family: var(--ww-disp); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; color: rgba(255,255,255,0.8); } body.ww .embed-frame .embed-note span { font-size: 13px; max-width: 34ch; line-height: 1.5; } body.ww .embed-frame:has(iframe[src]:not([src=""])) .embed-note { display: none; } @media (max-width: 980px) { body.ww .embed-row { grid-template-columns: 1fr; gap: 32px; } body.ww .embed-frame { min-height: 560px; } } /* Square off the tt.css components (they use literal radii, not the token) so interior pages match the industrial, squared editorial language. */ body.ww .card, body.ww .callout, body.ww .plan, body.ww .stat, body.ww .sector, body.ww .product, body.ww .member .photo, body.ww .square, body.ww .ratio-45, body.ww .ratio-43, body.ww .field input, body.ww .field textarea, body.ww #sent, body.ww image-slot { border-radius: 0; } /* ============================================================ Accessibility + robustness layer (added in critique pass) ============================================================ */ /* ---- Skip to content ---- */ .skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; background: var(--ww-dark); color: var(--ww-on-dark); padding: 12px 18px; font-weight: 700; text-decoration: none; font-family: var(--ww-disp, sans-serif); transform: translateY(-160%); transition: transform .16s ease; } .skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } } /* ---- Visible keyboard focus (was missing site-wide) ---- */ body.ww a:focus-visible, body.ww button:focus-visible, body.ww input:focus-visible, body.ww textarea:focus-visible, body.ww [tabindex]:focus-visible { outline: 2px solid var(--ww-accent); outline-offset: 3px; } /* On always-dark surfaces the mono (ink) accent is invisible: use a light ring */ body.ww .tt-header a:focus-visible, body.ww .tt-header button:focus-visible, body.ww .tt-nav-toggle:focus-visible, body.ww .btn-ghost.on-dark:focus-visible, body.ww section.roles a:focus-visible, body.ww .bookend a:focus-visible, body.ww .marquee a:focus-visible, body.ww footer.tt-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* Inputs kept their outline:none + border swap; add a real focus ring back */ body.ww .field input:focus-visible, body.ww .field textarea:focus-visible { outline: 2px solid var(--ww-accent); outline-offset: 2px; } /* ---- Mobile navigation (nav was display:none with no replacement) ---- */ .tt-nav-toggle { display: none; } @media (max-width: 980px) { body.ww .tt-header { position: relative; } body.ww .tt-nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; min-width: 44px; flex: 0 0 auto; box-sizing: border-box; padding: 11px; margin-right: 4px; background: transparent; border: 0; cursor: pointer; order: -1; } body.ww .tt-nav-toggle span { display: block; height: 2px; width: 100%; background: #fff; transition: transform .2s ease, opacity .2s ease; } body.ww .tt-header.nav-open .tt-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.ww .tt-header.nav-open .tt-nav-toggle span:nth-child(2) { opacity: 0; } body.ww .tt-header.nav-open .tt-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } body.ww .tt-header nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--ww-dark); padding: 8px 0 14px; box-shadow: 0 18px 40px rgba(0,0,0,0.35); } body.ww .tt-header.nav-open nav { display: flex; } body.ww .tt-header nav a { padding: 14px 24px; font-size: 14px; color: var(--ww-on-dark); border-top: 1px solid rgba(255,255,255,0.10); letter-spacing: 0.06em; } body.ww .tt-header nav a.active { color: #fff; } body.ww .tt-header .btn-primary.btn-sm { white-space: nowrap; padding-left: 14px; padding-right: 14px; } @media (prefers-reduced-motion: reduce) { body.ww .tt-nav-toggle span { transition: none; } } } /* ---- ScoreView embed: branded loading + fallback (never a blank box) ---- The .embed-loading panel sits behind the iframe. While the widget loads (or if it fails / can't frame) the ScoreView-branded message shows through; once the widget paints, its own surface covers this panel. */ body.ww .embed-frame { position: relative; } body.ww .embed-loading { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px; text-align: center; background: #0d1420; } body.ww .embed-loading .sv-logo { height: 30px; width: auto; } body.ww .embed-loading p { margin: 0; font-size: 14px; color: rgba(255,255,255,0.66); max-width: 32ch; line-height: 1.5; } body.ww .embed-loading a { font-size: 13px; color: #fff; text-decoration: underline; } body.ww .embed-frame iframe { position: relative; z-index: 1; } /* Team member profile links (LinkedIn / blog) */ body.ww .member-links { margin-top: 14px; font-size: 14px; } body.ww .member-links a { color: var(--ww-accent); text-decoration: underline; font-weight: 500; }