/* ══════════════════════════════════════════════════════════════════════════ * Hero — "The Masthead" * * What was wrong with the old first screen, measured rather than felt: * * - ~200px of dead space under the CTA, with nothing below it. The hero was * a two-column row that simply ran out of content before it ran out of * viewport, so the bottom third was accidental emptiness. * - The "Scroll" cue was an isolated 36px glyph in the bottom-left corner, * unreadable at render size and attached to nothing. * - The portrait faded into a purple radial wash and was cut by the viewport * edge — it floated rather than stood. * - The headline was a browser-synthesised faux bold (see fonts/faces.css). * - The header logo sat at x=40 while hero content started at x=128: two * different left edges on the same screen. * * The fix is structural, not cosmetic. The screen is now a masthead: two * hairline rules, a declared grid, and an empty column that is a real element * rather than leftover space. Whitespace you can point at reads as chosen; * whitespace that is merely left over reads as unfinished — which is the whole * difference the brief was asking for. * * It also paints completely with JavaScript dead. The load animation is CSS * `animation`, not a JS-applied class, because the first screen is the one * thing on a portfolio that must never fail to render. * ══════════════════════════════════════════════════════════════════════════ */ :root { /* Motion. Each curve has exactly one job, so "which easing?" stops being a * per-component decision. */ --ease-out-quart: cubic-bezier(0.25, 1, 0.35, 1); /* user-initiated */ --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1); /* one-shot reveals */ --ease-out: var(--ease-out-quart); /* alias, used by atlas */ --dur-instant: 90ms; --dur-fast: 180ms; --dur-base: 260ms; --dur-slow: 520ms; --dur-slower: 700ms; /* The nav is in normal flow, not fixed, so it already consumes this much * above the hero. The hero must subtract it, never add it again. */ --nav-h: 80px; --fs-hero: clamp(2.5rem, 5.6vw, 4.75rem); /* 40 → 76px */ --lh-hero: 1.02; --track-hero: -0.025em; --fs-fig: clamp(1.75rem, 2.9vw, 2.75rem); /* 28 → 44px, proof numerals */ --fs-meta: 0.6875rem; /* 11px, running head */ --track-meta: 0.15em; /* Brand matches theme/Palette.kt so the hero's button and accents are the * same purple as every other control on the site. */ --brand: #9f34f0; } /* ── Colour, per mode ──────────────────────────────────────────────────── * These MUST be defined per colour mode, not defaulted. * * They were originally written only as fallbacks — `color: var(--fg, #ebe6f5)` * — with `--fg` never defined anywhere. The fallback therefore applied in BOTH * modes, so in light mode the hero headline, the lead, the proof strip and the * running head all rendered near-white (#EBE6F5) on a near-white page (#FCFAFF). * The entire first screen was invisible in light mode. The fallbacks are kept * below purely as a last resort if this rule ever fails to match. * * Silk puts the active mode on a wrapper element as `.silk-colors_light` / * `.silk-colors_dark` — not on or — so the custom properties are * declared there and inherit down to everything inside. * * Values are taken from theme/Palette.kt rather than invented, so the CSS and * the Kotlin theme cannot drift apart. */ .silk-colors_dark { --fg: #ebe6f5; /* text.primary */ --fg-dim: #b1a0cd; /* text.secondary */ --hairline: rgba(235, 230, 245, 0.14); } .silk-colors_light { --fg: #2e1454; /* text.primary — darkPurple */ --fg-dim: #60488c; /* text.secondary — mutedPurple */ --hairline: rgba(46, 20, 84, 0.16); } /* ══ Language switch ═════════════════════════════════════════════════════ * Squared and quiet, to match the button language the hero establishes — * a second circular purple blob next to the theme toggle would just be noise. */ .locale-toggle { height: 44px; min-width: 44px; padding: 0 0.85rem; background: transparent; color: inherit; border: 1px solid var(--hairline); border-radius: 3px; font: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1; transition: border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart); } .locale-toggle:hover { border-color: var(--brand); color: var(--brand); } .locale-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ══ Shell ═══════════════════════════════════════════════════════════════ */ #start.hero { display: flex; align-items: center; /* Not 100svh: the nav sits above this in flow, so a full-viewport hero * would push its own last row off screen by exactly the nav's height. */ min-height: calc(100svh - var(--nav-h)); position: relative; overflow: hidden; } .hero__inner { width: 100%; /* Above ~1100px tall the surplus becomes symmetric page margin instead of * an asymmetric hole above the fold — a cover margin, not a gap. */ max-height: 1040px; margin-block: auto; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; padding-block: var(--space-6) var(--space-6) !important; } /* ══ Running head ════════════════════════════════════════════════════════ */ .hero__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); font-size: var(--fs-meta); letter-spacing: var(--track-meta); text-transform: uppercase; font-weight: 600; color: var(--fg-dim, #b1a0cd); margin-bottom: var(--space-3); } /* Below 768px both halves must still fit on one line. */ @media (max-width: 767px) { .hero__meta .opt { display: none; } } .hero__rule { height: 1px; background: var(--hairline); } /* ══ Body: 7 : 1 : 4, and the middle column is the point ════════════════ */ .hero__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(var(--space-6), 1fr) minmax(0, 4fr); /* column-gap: 0 is deliberate. The void column IS the gap; adding a gap on * top of it would be a second, undeclared spacing decision. */ column-gap: 0; align-items: end; padding-block: clamp(2.5rem, 8vh, 6rem) 0; } /* The empty column, made visible as intent: a hairline down its centre, * faded at both ends so it never collides with the horizontal rules. */ .hero__void { position: relative; /* `align-items: end` on the grid sizes every track to its content, and this * column has none — without stretching it the element is 0px tall and its * hairline has nothing to draw down. */ align-self: stretch; } .hero__void::before { content: ""; position: absolute; inset-block: 8% 6%; left: 50%; width: 1px; background: linear-gradient(to bottom, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent); } /* ══ Headline ════════════════════════════════════════════════════════════ */ .hero__h1 { margin: 0; font-size: var(--fs-hero) !important; line-height: var(--lh-hero) !important; letter-spacing: var(--track-hero) !important; /* A real 700 face now exists, so this resolves instead of being faked. */ font-weight: 700 !important; color: var(--fg, #ebe6f5); } /* Each line is its own overflow clip, so the reveal is a wipe from below * rather than a fade — the type arrives already set, never blurry. */ .hero__h1 .ln { display: block; overflow: hidden; } .hero__h1 .ln > span { display: block; animation: hero-line var(--dur-slower) var(--ease-out-expo) both; animation-delay: calc(var(--i) * 90ms + 120ms); } @keyframes hero-line { from { transform: translateY(100%); } to { transform: translateY(0); } } /* The three full stops are the only colour event in the type on this screen. */ .hero__h1 .dot { color: var(--brand); font-style: normal; } .hero__lead { margin: var(--space-5) 0 0; max-width: 34rem; font-size: var(--text-lead) !important; line-height: var(--leading-normal) !important; color: var(--fg-dim, #b1a0cd); animation: hero-rise var(--dur-slow) var(--ease-out-quart) both 420ms; } .hero__actions { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-7); flex-wrap: wrap; animation: hero-rise var(--dur-slow) var(--ease-out-quart) both 520ms; } @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ══ Actions ═════════════════════════════════════════════════════════════ */ .hero__actions .btn-primary { display: inline-flex; align-items: center; gap: 0.6em; /* Squared, not a pill. The pill is the single most recognisable Material * default on the page and a large part of why it read as framework output. */ border-radius: 3px; padding: 0 1.6rem; height: 48px; background: var(--brand); color: #fff; font-weight: 600; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart); } .hero__actions .btn-primary:hover { background: #9333ea; transform: translateY(-1px); } .hero__actions .btn-primary:active { transform: translateY(0); transition-duration: var(--dur-instant); } /* A literal glyph, not an icon font or SVG: it inherits the type and costs nothing. */ .hero__actions .btn__arrow { transition: transform var(--dur-base) var(--ease-out-quart); } .hero__actions .btn-primary:hover .btn__arrow { transform: translateX(3px); } .hero__actions .link-quiet { color: var(--fg, #ebe6f5); text-decoration: none; font-weight: 500; padding-bottom: 2px; border-bottom: 1px solid var(--hairline); transition: border-color var(--dur-fast) var(--ease-out-quart); } .hero__actions .link-quiet:hover { border-bottom-color: var(--brand); } .hero__actions a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } /* ══ Portrait ════════════════════════════════════════════════════════════ */ .hero__figure { display: flex; justify-content: center; align-items: flex-end; } .hero__frame { position: relative; /* Height-driven: the width DERIVES from the height cap, so the portrait can * never over-run its column at any viewport. No width media queries. */ aspect-ratio: 564 / 834; /* `100%` here resolves against a content-sized flex parent, which makes it * circular and lets the frame grow past the cap. The max-block-size is what * actually holds the ceiling; the min() keeps it shrinking on short * viewports. Together they fix the frame's height, so its width derives and * the portrait can never over-run its column. */ block-size: min(100%, 460px); max-block-size: 460px; inline-size: auto; display: flex; align-items: flex-end; } /* A flat tone block he stands in front of, whose top edge his head breaks. * `inset-block-start: 14%` is a proportion of the frame's own height, so the * break lands identically at every size instead of needing a magic pixel. */ .hero__frame::before { content: ""; position: absolute; inset-block: 14% 0; inset-inline: -6%; background: linear-gradient(to bottom, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.05)); transform-origin: bottom; animation: tone-grow var(--dur-slower) var(--ease-out-expo) both 300ms; } @keyframes tone-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } .hero__portrait { position: relative; width: 100%; height: 100%; object-fit: contain; /* He stands on the frame's floor, which sits on the proof rule. Grounding * by geometry replaces the entire old lighting apparatus — the 45%-alpha * radial wash, the 7s breathing spotlight and all three floating orbs. */ object-position: 50% 100%; /* Rim light: twin 1px shadows on the cutout's own alpha. No blur, so it * costs nothing to composite and never smears the edge. */ filter: drop-shadow(-1px 0 rgba(201, 166, 255, 0.30)) drop-shadow(1px 0 rgba(201, 166, 255, 0.18)); animation: hero-rise var(--dur-slower) var(--ease-out-expo) both 380ms; } /* ══ Proof strip ═════════════════════════════════════════════════════════ */ .hero__proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); border-top: 1px solid var(--hairline); padding-top: var(--space-5); margin-top: var(--space-5); } .hero__proof .cell { display: flex; flex-direction: column; gap: 0.35rem; animation: hero-rise var(--dur-slow) var(--ease-out-quart) both; animation-delay: calc(var(--i) * 70ms + 620ms); } .hero__proof .fig { font-size: var(--fs-fig); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--fg, #ebe6f5); display: flex; align-items: baseline; gap: 0.45rem; } /* 10px stars on the numeral's own baseline: they add zero height and exist * only so "5.0" reads as a rating rather than a version number. */ .hero__proof .stars { font-size: 10px; color: var(--brand); letter-spacing: 0.08em; } .hero__proof .lbl { font-size: var(--fs-meta); letter-spacing: var(--track-meta); text-transform: uppercase; font-weight: 600; color: var(--fg-dim, #b1a0cd); line-height: 1.45; } /* Cell 1 is a control: it scrolls to the atlas, making the hero the entrance * to the map rather than a competitor to it. */ .hero__proof .cell--link { cursor: pointer; } .hero__proof .cell--link:hover .fig, .hero__proof .cell--link:focus-visible .fig { color: var(--brand); } .hero__proof .cell--link:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; } .hero__proof .cell--link .fig { transition: color var(--dur-fast) var(--ease-out-quart); } /* ══ Responsive ══════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { .hero__body { grid-template-columns: minmax(0, 1fr) 0 minmax(0, 3fr); } .hero__void { display: none; } .hero__frame { block-size: min(100%, 380px); max-block-size: 380px; } } @media (max-width: 767px) { #start.hero { min-height: auto; } .hero__inner { max-height: none; } .hero__body { grid-template-columns: 1fr; padding-block: clamp(2rem, 6vh, 3rem) 0; } /* The face goes BELOW the numbers on a phone: the claim has to land before * the portrait spends the vertical budget. */ .hero__figure { order: 2; margin-top: var(--space-6); justify-content: flex-start; } /* max-block-size, not just block-size: the base rule's 460px ceiling would * otherwise still apply and the frame would overshoot this cap. */ .hero__frame { block-size: min(100%, 320px); max-block-size: 320px; } /* Bleed right only. Bleeding left too put the tone block hard against x=0, * which reads as an accident rather than a deliberate edge. */ .hero__frame::before { inset-inline: 0 -6%; } .hero__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } } @media (prefers-reduced-motion: reduce) { .hero__h1 .ln > span, .hero__lead, .hero__actions, .hero__portrait, .hero__frame::before, .hero__proof .cell { animation: none !important; opacity: 1 !important; transform: none !important; } }