/* ============================================================ LANDING PAGE All sections specific to index.html. Depends on tokens.css, base.css, components.css. ============================================================ */ @layer pages { /* ================================================== 1 · HERO Note: mirrored minimally as inline critical CSS in index.html . Keep both in sync if changed. ================================================== */ .hero { min-height: 100svh; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding-top: 14vh; padding-bottom: var(--s-6); max-width: 1600px; margin-inline: auto; position: relative; } .hero__heading { font-family: 'Young Serif', Georgia, serif; font-size: clamp(3.5rem, 13vw, 11rem); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; font-weight: 400; margin: 0; align-self: center; } .hero__line { display: block; opacity: 0; transform: translateY(24px); animation: heroIn 0.9s var(--ease) forwards; } .hero__line--1 { animation-delay: 0.1s; } .hero__line--2 { animation-delay: 0.25s; padding-left: clamp(2rem, 8vw, 8rem); } .hero__line--3 { animation-delay: 0.4s; text-align: right; } @keyframes heroIn { to { opacity: 1; transform: none; } } .hollow { -webkit-text-stroke: 0.04em currentColor; color: transparent; font-style: italic; paint-order: stroke; } .hero__cta { align-self: end; justify-self: end; display: inline-flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); color: var(--fg); font-size: 0.8125rem; letter-spacing: var(--track-wide); text-transform: uppercase; padding: var(--s-2) 0; opacity: 0; animation: heroIn 0.9s var(--ease) 0.7s forwards; transition: gap var(--t-fast) var(--ease); } .hero__cta:hover { gap: calc(var(--s-3) + 4px); } .hero__cta-rule { width: clamp(40px, 10vw, 120px); height: 1px; background: var(--fg); transform-origin: right; transform: scaleX(0); animation: ruleIn 0.7s var(--ease) 1s forwards; } @keyframes ruleIn { to { transform: scaleX(1); } } .hero__cta svg { transition: transform var(--t-fast) var(--ease); } .hero__cta:hover svg { transform: translateX(3px); } @media (max-width: 640px) { .hero__line--2 { padding-left: 0; } .hero__line--3 { text-align: left; } .hero__cta { justify-self: start; } .hero__cta-rule { display: none; } } /* ================================================== 3 · FACT STRIP Understated callout. Soft tinted band with gradient edges so it doesn't cut the page with hard rules. Centred rag-left text, quoted source beneath. ================================================== */ .fact-strip { padding-block: clamp(6rem, 12vw, 10rem); position: relative; /* Soft band: subtle tint that fades in/out rather than a hard border, so it doesn't feel like a different page section. */ background: linear-gradient( to bottom, transparent 0, oklch(from var(--fg) l c h / 0.025) 15%, oklch(from var(--fg) l c h / 0.025) 85%, transparent 100% ); } .fact-strip__inner { max-width: var(--content-max); margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; } .fact-strip__text { font-family: 'Young Serif', Georgia, serif; font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--fg); max-width: 28ch; margin: 0; position: relative; padding-left: clamp(1.5rem, 3vw, 2.5rem); } /* Left indicator: a quiet short rule that marks this as a callout, instead of a visual wall of text. */ .fact-strip__text::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 2px; height: calc(100% - 1em); background: var(--fg); opacity: 0.35; } .fact-strip__body { display: block; } .fact-strip__source { display: block; margin-top: var(--s-4); font-family: 'Hanken Grotesque', sans-serif; font-style: normal; font-size: 0.8125rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--mid); } .fact-strip__source::before { content: "— "; opacity: 0.6; } /* ================================================== 4 · DOT SECTION Centred interactive canvas, generous padding. A soft tinted pane behind the game hides the atmosphere particles so they don't interfere. ================================================== */ .dot-section { padding-block: clamp(7rem, 14vw, 12rem); padding-inline: var(--edge); max-width: var(--content-max); margin-inline: auto; display: flex; justify-content: center; } .dot-section__stage { position: relative; width: 100%; max-width: 900px; padding: clamp(2rem, 5vw, 4rem); /* Tinted pane hides atmosphere particles behind the game */ background: radial-gradient( ellipse at center, var(--bg) 40%, oklch(from var(--bg) l c h / 0.92) 70%, oklch(from var(--bg) l c h / 0.6) 100% ); display: flex; flex-direction: column; align-items: center; } #dotCanvas { width: 100%; max-width: 820px; aspect-ratio: 820 / 360; cursor: crosshair; touch-action: none; } .dot-section__hint { margin-top: var(--s-4); color: var(--mid); font-size: 0.8125rem; letter-spacing: var(--track-wide); text-transform: uppercase; text-align: center; transition: opacity var(--t-med) var(--ease); } .dot-section__hint.is-hidden { opacity: 0; } .dot-section__complete { margin-top: var(--s-4); font-family: 'Young Serif', Georgia, serif; font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -0.01em; color: var(--fg); opacity: 0; transform: translateY(8px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); text-align: center; } .dot-section__complete.is-visible { opacity: 1; transform: translateY(0); } /* ================================================== 4 · INTRO Editorial two-column: big serif quote, then body prose. ================================================== */ .intro { padding-block: var(--section); max-width: var(--content-max); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); } .intro__quote { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.15; letter-spacing: var(--track-tight); max-width: 18ch; } .intro__body { display: flex; flex-direction: column; gap: var(--s-3); max-width: 52ch; } .intro__body p { line-height: 1.6; color: var(--fg); } @media (max-width: 800px) { .intro { grid-template-columns: 1fr; gap: var(--s-4); } } /* ================================================== 5 · SERIF SECTION OPENERS Replaces the old eyebrow-line section-label pattern. Used on services, featured, published teaser. ================================================== */ .services__heading, .featured__heading, .pub-teaser__heading { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.02; letter-spacing: var(--track-tight); margin-block: 0 var(--s-5); max-width: 14ch; } /* ================================================== 5 · SERVICES + RADAR ================================================== */ .services { padding-block: var(--section); max-width: var(--content-max); margin-inline: auto; } .services__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; } .services__radar { display: flex; justify-content: center; position: sticky; top: 100px; } #radarCanvas { width: 100%; max-width: 460px; aspect-ratio: 1 / 1; } .services__list { display: flex; flex-direction: column; gap: var(--s-5); margin: 0; } .service { display: flex; flex-direction: column; gap: var(--s-2); } .service__title { letter-spacing: -0.01em; } .service__desc { color: var(--mid); max-width: 56ch; line-height: 1.6; } @media (max-width: 900px) { .services__grid { grid-template-columns: 1fr; } .services__radar { position: static; order: -1; margin-bottom: var(--s-5); } #radarCanvas { max-width: 340px; } } /* ================================================== 6 · TRUST BAND Edge-to-edge dark section, even in light mode. Header row with team framing above the metrics. ================================================== */ .trust { margin-block: var(--section); background: var(--fg); color: var(--bg); padding-block: clamp(4rem, 9vw, 6rem); } .trust__inner { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); } .trust__header { display: flex; flex-direction: column; gap: var(--s-2); max-width: 60ch; } .trust__heading { font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.01em; margin: 0; /* One or two lines max; prevent base.css's text-wrap: balance from splitting into 3 short lines on wide viewports. */ text-wrap: nowrap; } @media (max-width: 760px) { .trust__heading { text-wrap: balance; } } .trust__lede { font-size: 1rem; color: oklch(from var(--bg) l c h / 0.65); margin: 0; } .trust__body { display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 6vw, 5rem); align-items: start; } .trust__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); } .metric { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-2); } .metric__value { font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1; letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; } .metric__label { font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: oklch(from var(--bg) l c h / 0.6); line-height: 1.4; } .trust__certs { display: flex; flex-direction: column; gap: var(--s-3); border-left: 1px solid oklch(from var(--bg) l c h / 0.15); padding-left: clamp(1.5rem, 3vw, 3rem); } .trust__certs-label { font-size: 0.7rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: oklch(from var(--bg) l c h / 0.55); margin-bottom: var(--s-2); } .cert { display: flex; flex-direction: column; gap: 4px; padding: var(--s-3) var(--s-3) var(--s-3) 0; color: inherit; border-bottom: 1px solid oklch(from var(--bg) l c h / 0.12); transition: padding-left var(--t-fast) var(--ease); } .cert:last-child { border-bottom: 0; } .cert:hover { padding-left: var(--s-2); } .cert__code { font-size: 1.375rem; letter-spacing: 0.04em; line-height: 1.1; } .cert__title { font-size: 0.9rem; color: oklch(from var(--bg) l c h / 0.9); line-height: 1.35; } .cert__desc { font-size: 0.8125rem; color: oklch(from var(--bg) l c h / 0.65); line-height: 1.45; margin-top: 2px; } .cert__year { color: oklch(from var(--bg) l c h / 0.5); font-size: 0.75rem; margin-top: 6px; } @media (max-width: 900px) { .trust__body { grid-template-columns: 1fr; } .trust__metrics { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); } .trust__certs { border-left: 0; border-top: 1px solid oklch(from var(--bg) l c h / 0.15); padding-left: 0; padding-top: var(--s-4); } .cert { flex: 1; min-width: 180px; } } /* ================================================== 7 · FEATURED PROJECTS Two-column editorial layout: Left: project identity (index + title + meta + outcome) Right: story paragraph Rules between rows separate projects. ================================================== */ .featured { padding-block: var(--section); max-width: var(--content-max); margin-inline: auto; } .featured__list { display: flex; flex-direction: column; } .feat { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); display: grid; /* Use named areas so the non-linear stack of children (index, head, body, outcome) can be composed cleanly. */ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "index body" "head body" "outcome body"; row-gap: var(--s-3); column-gap: clamp(2rem, 6vw, 5rem); align-items: start; transition: padding-left var(--t-med) var(--ease); } .feat:last-child { border-bottom: 1px solid var(--line); } .feat:hover { padding-left: var(--s-3); } .feat__index { grid-area: index; font-size: clamp(0.875rem, 1.1vw, 1rem); color: var(--mid); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; align-self: start; } .feat__head { grid-area: head; display: flex; flex-direction: column; gap: var(--s-3); } .feat__title { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -0.01em; margin: 0; } .feat__title a { position: relative; transition: color var(--t-fast) var(--ease); } .feat__title a::after { content: " →"; opacity: 0; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); display: inline-block; } .feat:hover .feat__title a::after { opacity: 1; transform: translateX(4px); } .feat__meta { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; } .feat__date { color: var(--mid); font-variant-numeric: tabular-nums; } .feat__body { grid-area: body; color: var(--fg); line-height: 1.65; max-width: 52ch; margin: 0; font-size: 1rem; align-self: center; } .feat__outcome { grid-area: outcome; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.3; letter-spacing: -0.005em; color: var(--fg); padding-top: var(--s-3); margin: var(--s-2) 0 0 0; border-top: 1px solid var(--line); max-width: 32ch; } .featured__more { margin-top: var(--s-5); } @media (max-width: 900px) { .feat { grid-template-columns: 1fr; grid-template-areas: "index" "head" "body" "outcome"; row-gap: var(--s-3); } .feat__body { max-width: 60ch; } } /* ================================================== 8 · PUBLISHED TEASER ================================================== */ .pub-teaser { padding-block: var(--section); max-width: var(--content-max); margin-inline: auto; } .pub-teaser__card { margin-top: var(--s-5); padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: end; transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease); } .pub-teaser__card:hover { border-color: var(--fg); background: var(--tint); } .pub-teaser__text { display: flex; flex-direction: column; gap: var(--s-2); } .pub-teaser__meta { font-style: italic; } .pub-teaser__blurb { color: var(--mid); line-height: 1.6; max-width: 60ch; } @media (max-width: 640px) { .pub-teaser__card { grid-template-columns: 1fr; } } /* ================================================== 9 · CLOSE + CTA ================================================== */ .close { padding-block: var(--section); max-width: var(--content-max); margin-inline: auto; display: flex; flex-direction: column; gap: var(--s-4); text-align: center; align-items: center; } .close__heading { font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: var(--track-tight); max-width: 16ch; } .close__body { color: var(--mid); font-size: 1.05rem; line-height: 1.6; margin-inline: auto; } .close__cta { margin-top: var(--s-3); } /* ================================================== Reduced motion overrides for page-specific animations ================================================== */ @media (prefers-reduced-motion: reduce) { .hero__line, .hero__cta, .hero__cta-rule { opacity: 1 !important; transform: none !important; animation: none !important; } } }