/* TEGRITY V2 — HOME Hero (noise to Tegrity), section snippets, closing CTA. */ @import "base.css"; /* ---------- HERO ---------- */ .hero { position: relative; height: 370vh; /* scroll runway — short noise phase, full-length resolve (tune split via TEG_START in hero.js) */ background: #050505; } .hero__stage { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; background: #050505; } .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* real text for screen readers + no-JS */ .hero__readable { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.1em; padding: var(--gutter); } .hero__readable p { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 7vw, 4.5rem); line-height: 1.02; letter-spacing: -0.03em; color: #FAFAF7; max-width: none; } .hero__readable .accent { color: #FAFAF7; } /* descriptive h1 — primary topic signal for crawlers; shown only in the no-JS fallback, hidden with the rest of .hero__readable when JS runs */ .hero__h1 { order: -1; font-family: var(--font-mono); font-weight: 400; font-size: clamp(0.85rem, 1.8vw, 1.05rem); line-height: 1.45; letter-spacing: 0; color: #FAFAF7; opacity: 0.8; max-width: 42ch; margin: 0 0 0.6em; } /* When JS runs, the canvas tells the story; hide the static fallback visually but keep for AT */ .js .hero__readable { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { /* reduced motion: hero.js draws solid words, fallback still hidden */ } .hero__scrollcue { position: absolute; left: 50%; bottom: var(--space-8); transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: #6a6a6a; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } .hero__scrollcue .line { width: 1px; height: 28px; background: linear-gradient(#6a6a6a, transparent); } .js .hero__scrollcue { animation: cue-fade 2.4s var(--ease) infinite; } @keyframes cue-fade { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } } @media (prefers-reduced-motion: reduce) { .js .hero__scrollcue { animation: none; } } /* returning visit this session: the head script tags with .hero-seen before first paint, the runway collapses to one static screen showing the resolved final frame (drawn by hero.js), and main.js lands the visitor on the sections. No replay, no fast-forward. */ .hero-seen .hero { height: 100vh; } .hero-seen .hero__scrollcue { display: none; } /* ---------- SECTIONS INTRO ---------- */ .sections { background: var(--color-bg); position: relative; z-index: 2; padding-block: var(--space-24) var(--space-16); } .sections__intro { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); margin-bottom: var(--space-16); } .sections__intro h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.75rem, 4vw, 3rem); letter-spacing: -0.025em; color: var(--color-ink); line-height: 1.05; } .sections__intro p { margin-top: var(--space-4); color: var(--color-functional); } /* ---------- SNIPPET CARDS ---------- */ .snips { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--space-8); } .snip { --snip-accent: var(--color-ink); /* default; overridden per card from its button below */ display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: center; padding: var(--space-8); border: 1px solid var(--color-hairline); border-radius: var(--radius); background: var(--color-bg); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .snip:nth-child(even) .snip__body { order: 2; } .snip:nth-child(even) .snip__stage { order: 1; } /* ---------- SECTION HOVER GLOW ---------- Each card reads its accent from its own Let's Talk button (single source of truth), then on hover warms to a soft, still glow + accent-tinted edge in that color. No motion — just the card lighting to its own hue. */ .snip:has(.lets-talk[data-color="success"]) { --snip-accent: var(--color-success); } .snip:has(.lets-talk[data-color="warning"]) { --snip-accent: var(--color-warning); } .snip:has(.lets-talk[data-color="danger"]) { --snip-accent: var(--color-danger); } .snip:has(.lets-talk[data-color="info"]) { --snip-accent: var(--color-info); } .snip:hover { border-color: color-mix(in srgb, var(--snip-accent) 38%, var(--color-ink)); box-shadow: var(--shadow-1), 0 0 0 1px color-mix(in srgb, var(--snip-accent) 10%, transparent), 0 8px 30px color-mix(in srgb, var(--snip-accent) 13%, transparent); } .snip__num { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--color-functional); } .snip__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.02em; color: var(--color-ink); margin-top: var(--space-2); line-height: 1.04; } .snip__copy { margin-top: var(--space-4); color: var(--color-body); max-width: 42ch; } .snip__actions { margin-top: var(--space-6); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .snip__more { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--color-functional); display: inline-flex; gap: var(--space-2); border-bottom: 1px solid var(--color-hairline); padding-bottom: 2px; } .snip__more:hover { color: var(--color-ink); border-color: var(--color-ink); } /* the animation stage inside each card (the button motion) */ .snip__stage { aspect-ratio: 16 / 10; border-radius: var(--radius); background: var(--color-paper-2); border: 1px solid var(--color-hairline); display: grid; place-items: center; overflow: hidden; position: relative; } /* colored Let's Talk CTA (the one place color lives) */ .lets-talk { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; height: 40px; padding: 0 var(--space-6); border-radius: var(--radius); color: #fff; background: var(--lt-color, var(--color-ink)); transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); } .lets-talk:hover { transform: translateY(-1px); filter: brightness(1.06); } .lets-talk:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; } .lets-talk[data-color="success"] { --lt-color: var(--color-success); } .lets-talk[data-color="warning"] { --lt-color: var(--color-warning); } .lets-talk[data-color="danger"] { --lt-color: var(--color-danger); } .lets-talk[data-color="info"] { --lt-color: var(--color-info); } @media (max-width: 760px) { .snip { grid-template-columns: 1fr; gap: var(--space-6); } .snip:nth-child(even) .snip__body { order: 0; } .snip:nth-child(even) .snip__stage { order: 0; } } /* ---------- SPLIT (AI Briefings: C-Suite | Team) ---------- Two sides divided by a centre rule. Left = C-Suite (blue), right = Team (green). */ .split { max-width: var(--container); margin: var(--space-12) auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr 1px 1fr; gap: var(--space-8); align-items: stretch; } .split__rule { background: var(--color-hairline); width: 1px; justify-self: center; } .split__eyebrow { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; } .split__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.05; margin-top: var(--space-2); } .split__sub { margin-top: var(--space-3); color: var(--color-functional); max-width: 42ch; } .split__list { margin-top: var(--space-6); display: grid; gap: var(--space-4); list-style: none; padding-left: 0; } .split__list li { position: relative; padding-left: 1.5em; color: var(--color-body); line-height: 1.5; max-width: 46ch; } .split__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 2px; } .split__side--csuite .split__eyebrow, .split__side--csuite .split__title { color: var(--color-info); } .split__side--csuite .split__list li::before { background: var(--color-info); } .split__side--team .split__eyebrow, .split__side--team .split__title { color: var(--color-success); } .split__side--team .split__list li::before { background: var(--color-success); } @media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: var(--space-8); } .split__rule { width: auto; height: 1px; justify-self: stretch; } } /* ---------- CLOSER ---------- */ .closer { background: #050505; color: #FAFAF7; padding-block: var(--space-32); text-align: center; } .closer__word { font-family: var(--font-display); font-weight: 900; font-size: clamp(4rem, 18vw, 16rem); line-height: 0.9; letter-spacing: -0.05em; color: #FAFAF7; display: inline-block; } .closer__sub { margin: var(--space-8) auto 0; max-width: 44ch; color: #b9b6ad; } .closer__cta { margin-top: var(--space-8); display: inline-flex; } .closer__note { margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--fs-small); color: #6a6a6a; } /* ---------- HERO states ---------- */ .hero__stage.flash::after { content: ""; position: absolute; inset: 0; background: #FAFAF7; z-index: 3; pointer-events: none; animation: heroFlash 260ms var(--ease) forwards; } @keyframes heroFlash { from { opacity: 0.85; } to { opacity: 0; } } .hero--still .hero__canvas { display: none; } .hero--still .hero__scrollcue { display: none; } /* ---------- BUTTON ANIMATION SCENES (inside .snip__stage) ---------- Trigger on hover (desktop) or .play (added by JS when scrolled into view on touch). */ .scene { width: 86%; height: 80%; } .scene line, .scene path, .scene polyline, .scene rect, .scene circle, .scene polygon { vector-effect: non-scaling-stroke; } .ink-stroke { stroke: var(--color-ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ink-fill { fill: var(--color-ink); } /* nodes + fractal + build — canvas sized by JS */ .anim-stage[data-anim="nodes"] canvas, .anim-stage[data-anim="fractal"] canvas, .anim-stage[data-anim="build"] canvas { width: 100%; height: 100%; display: block; } /* flip stack (About) — four bars fill black, then cascade through each other to flip the pyramid on its head, and back. Motion is driven by JS (initFlip); the outlined pyramid below is the resting state and renders without JS. */ .flip .fbar { fill: var(--color-ink); fill-opacity: 0; stroke: var(--color-ink); stroke-width: 1.6; transition: fill-opacity 110ms linear; } /* book (Team Education) — page-riffle: copies of the right page flip across the spine, then fade to reveal the open spread underneath ("lands on a page"). */ .book-riffle .page { opacity: 0; } @keyframes riffle { 0% { transform: scaleX(1); opacity: 0; } 5% { opacity: 1; } 17% { transform: scaleX(-1); opacity: 1; } /* flipped fully across the spine */ 24% { transform: scaleX(-1); opacity: 0; } /* fade -> reveals the spread beneath */ 100% { transform: scaleX(1); opacity: 0; } /* hold on the spread, then re-arm */ } .anim-stage:hover .book-riffle .page, .anim-stage.play .book-riffle .page { animation: riffle 2.4s ease-in-out infinite; } .anim-stage:hover .book-riffle .page--2, .anim-stage.play .book-riffle .page--2 { animation-delay: .10s; } .anim-stage:hover .book-riffle .page--3, .anim-stage.play .book-riffle .page--3 { animation-delay: .20s; } .anim-stage:hover .book-riffle .page--4, .anim-stage.play .book-riffle .page--4 { animation-delay: .30s; } /* build (Custom Builds) — canvas, drawn by JS (initBuild). No CSS motion. */ /* maze (AI Business Consulting) — ONE line traces the path through, then back, cycling the four brand colors. pathLength=100 normalises the route so the dash is one segment; the comet opts OUT of the walls' non-scaling-stroke (below) so that normalisation actually drives the dash. */ .pop-stage .scene.maze, .snip__stage .scene.maze { width: 96%; height: 92%; } /* the bigger maze fills more of the stage */ .maze-wall { fill: none; stroke: var(--color-ink); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } .scene .maze-comet { vector-effect: none; } /* beats .scene path non-scaling-stroke → pathLength scales the dash */ .maze-comet { fill: none; stroke: var(--color-info); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22 1000; /* gap dwarfs the route (normalised or not) → exactly one visible segment */ stroke-dashoffset: 22; /* parked at the entrance while idle */ } @keyframes mazeRun { 0% { stroke-dashoffset: 22; } /* enter from the left */ 50% { stroke-dashoffset: -122; } /* reached the far end */ 100% { stroke-dashoffset: 22; } /* trace back through to the start */ } @keyframes mazeHue { /* one solid brand color per full pass; hard-switch only at the restart */ 0%, 24.9% { stroke: var(--color-success); } 25%, 49.9% { stroke: var(--color-warning); } 50%, 74.9% { stroke: var(--color-danger); } 75%, 100% { stroke: var(--color-info); } } /* small popover: brisk trace. mazeHue period is 4x the loop, so each pass holds one color and the switch lands exactly on the loop restart (line is back at the entrance). */ .anim-stage:hover .maze-comet, .anim-stage.play .maze-comet { animation: mazeRun 3.6s linear infinite, mazeHue 14.4s linear infinite; } /* big section card covers ~3x the area — its own pace (mazeRun 5s, mazeHue = 4x = 20s) */ .snip__stage.anim-stage:hover .maze-comet, .snip__stage.anim-stage.play .maze-comet { animation-duration: 5s, 20s; } /* eyes (Confessions) — hard-cut flipbook of engraved gazes, settling on the calm one (eye5). steps(1,end) keeps the cuts hard (Marvel-intro feel). Used by the nav pill only (.pilleyes, styled in the pills section); the offering card shows the tagline note. */ @keyframes eflash1 { 0%,9%{opacity:.96} 12%,100%{opacity:0} } @keyframes eflash2 { 0%,11%{opacity:0} 13%,20%{opacity:.96} 23%,100%{opacity:0} } @keyframes eflash3 { 0%,21%{opacity:0} 23%,30%{opacity:.96} 33%,100%{opacity:0} } @keyframes eflash4 { 0%,31%{opacity:0} 33%,41%{opacity:.96} 44%,100%{opacity:0} } @keyframes eflash5 { 0%,42%{opacity:0} 45%,92%{opacity:.97} 100%{opacity:0} } /* settle + hold */ @keyframes epush { 0%{transform:scale(1.16)} 45%{transform:scale(1)} 92%{transform:scale(1)} 100%{transform:scale(1.16)} } /* offering card (Confessions): the tagline typed large, filling the stage. Real text rather than an image, so it reads with images off and to screen readers. Sized in container units so the text fills this box in the same proportion as the nav popover fills its small one (12px in a ~200px box ≈ 6% of the width). */ .snip__stage--note { display: flex; align-items: center; padding: 6% 7%; container-type: inline-size; } .snip__stage--note .typeout { font-size: clamp(14px, 6.6cqi, 34px); line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .anim-stage * { animation: none !important; transition: none !important; } } /* ---------- NAV PILLS + HOVER-ANIMATION POPOVERS ---------- */ .pills { display: flex; align-items: center; gap: var(--space-2); } .pillwrap { position: relative; } .pill { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--color-hairline); font-size: var(--fs-small); font-weight: 500; color: var(--color-functional); white-space: nowrap; background: transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .pillwrap:hover .pill, .pillwrap:focus-within .pill { color: var(--color-ink); border-color: var(--color-ink); } .on-dark .pill { color: #b9b6ad; border-color: #2f2f2f; } .on-dark .pillwrap:hover .pill, .on-dark .pillwrap:focus-within .pill { color: var(--color-bg); border-color: #6a675f; } /* Confessions pill: engraved eyes flash behind the label, settle on the calm gaze (eye5) */ .pill--eyes { position: relative; overflow: hidden; } .pilleyes { position: absolute; inset: 0; display: block; border-radius: inherit; transform-origin: center; } .pilleyes img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: 0; filter: grayscale(1) sepia(.16) saturate(.9) brightness(1.02); } .pilleyes__scrim { position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, rgba(5,5,5,.55), rgba(5,5,5,.38)); transition: opacity var(--dur-fast) var(--ease); } .pill--eyes .pill-txt { position: relative; z-index: 2; } /* on hover/focus: hold the label crisp + light over the eyes, run the flipbook + push-in */ .pillwrap--eyes:hover .pill-txt, .pillwrap--eyes:focus-within .pill-txt { color: #FAFAF7; text-shadow: 0 1px 3px rgba(5,5,5,.95); } .pillwrap--eyes:hover .pilleyes__scrim, .pillwrap--eyes:focus-within .pilleyes__scrim { opacity: 1; } .pillwrap--eyes:hover .pilleyes, .pillwrap--eyes:focus-within .pilleyes { animation: epush 1.7s cubic-bezier(.2,0,0,1) infinite; } .pillwrap--eyes:hover .e1, .pillwrap--eyes:focus-within .e1 { animation: eflash1 1.7s steps(1,end) infinite; } .pillwrap--eyes:hover .e2, .pillwrap--eyes:focus-within .e2 { animation: eflash2 1.7s steps(1,end) infinite; } .pillwrap--eyes:hover .e3, .pillwrap--eyes:focus-within .e3 { animation: eflash3 1.7s steps(1,end) infinite; } .pillwrap--eyes:hover .e4, .pillwrap--eyes:focus-within .e4 { animation: eflash4 1.7s steps(1,end) infinite; } .pillwrap--eyes:hover .e5, .pillwrap--eyes:focus-within .e5 { animation: eflash5 1.7s steps(1,end) infinite; } .pillpop { position: absolute; top: calc(100% + 10px); left: 50%; width: 230px; transform: translateX(-50%) translateY(-6px); background: var(--color-bg); border: 1px solid var(--color-hairline); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: var(--space-3); opacity: 0; pointer-events: none; z-index: 60; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .pillpop::before { /* little arrow bridge so hover doesn't drop */ content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .pillwrap:hover .pillpop, .pillwrap:focus-within .pillpop { opacity: 1; transform: translateX(-50%); pointer-events: auto; } .pop-stage { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); background: var(--color-paper-2); border: 1px solid var(--color-hairline); display: grid; place-items: center; overflow: hidden; } .pop-stage .scene { width: 80%; height: 76%; } .pillpop__cap { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: 11px; color: var(--color-functional); text-align: center; } /* Confessions dropdown: monospace typewriter types the tagline out on hover */ .pop-stage--type { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); background: var(--color-paper-2); border: 1px solid var(--color-hairline); display: flex; align-items: center; padding: 12px 14px; overflow: hidden; } .typeout { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; letter-spacing: -.01em; color: var(--color-ink); min-height: 1.55em; } .typeout::after { content: "▍"; margin-left: 1px; color: var(--color-functional); animation: caretBlink 1s steps(1) infinite; } @keyframes caretBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .typeout::after { animation: none; } } @media (max-width: 860px) { .pills { flex-direction: column; align-items: flex-start; gap: var(--space-2); width: 100%; } .pill { height: 36px; } .pillpop { display: none; } /* no hover popovers on the mobile menu */ }