/* ========================================================================== Storytelling Architects — holding page Design source: Figma (Desktop 1440×1024 / iPhone 390×844) Two variants share this sheet. Everything that differs between them is a custom property, so the markup only picks a theme: index.html → variant 1 — crimson / red mark index2.html → variant 2 — green / mint mark The layout, type ramps and padding are identical in both. ========================================================================== */ @font-face { font-family: 'Season Sans'; src: url('SeasonSans-SemiBold.woff2') format('woff2'), url('SeasonSans-SemiBold.woff') format('woff'); font-weight: 600 700; font-style: normal; font-display: swap; } :root { /* -- variant 1 (default) ------------------------------------------------ */ --bg: #8B001A; --fg: #F00000; /* ---------------------------------------------------- unbounded scaling -- Every ramp below has THREE terms inside max(): 1. the mobile floor (the 390px artboard's value), 2. the 390→1440 linear interpolation between the two artboards, 3. a pure-proportional term, = the 1440 value ÷ 1440. Term 3 is what removes the old ceiling. Previously each of these was a clamp() whose third argument froze the design at the 1440 comp, so on a large monitor everything stopped growing and the page occupied a shrinking fraction of the screen (24% of the width at 3840). Now the design keeps scaling proportionally, without limit. Terms 2 and 3 are equal at exactly 1440px (to within 0.1px), so max() hands over from one to the other with no visible jump, and every width below 1440 renders exactly as it did before. ------------------------------------------------------------------------ */ /* Mark geometry: the Figma frame's own proportions, and its height ramped from the mobile artboard to the desktop one. */ --mark-ratio: 886 / 549; --mark-h: max(13.625rem, 31.52vw + 5.94rem, 38.125vw); /* 218px → 549px @1440 → ∞ */ /* Page padding — 20px on mobile, 42px side / 51px top / 35px bottom @1440. The mark shares the left gutter, so it lines up with the text. */ --pad-x: max(1.25rem, 2.1vw + 0.738rem, 2.9167vw); /* 20px → 42px @1440 → ∞ */ --pad-t: max(1.25rem, 2.95vw + 0.531rem, 3.5417vw); /* 20px → 51px @1440 → ∞ */ --pad-y-b: max(1.25rem, 1.43vw + 0.9rem, 2.4306vw); /* 20px → 35px @1440 → ∞ */ --pad-l: max(var(--pad-x), env(safe-area-inset-left)); --pad-r: max(var(--pad-x), env(safe-area-inset-right)); --pad-b: max(var(--pad-y-b), env(safe-area-inset-bottom)); /* Type ramps, linearly interpolated between the two artboards. The outer min() keeps scaling proportionally below the 390px artboard (15.38vw = 60/390, 6.41vw = 25/390) so nothing ever overflows. */ --title: min(15.38vw, max(3.75rem, 2.86vw + 3.054rem, 6.25vw)); /* 60px → 90px @1440 → ∞ */ --body: min(6.41vw, max(1.5625rem, 1.05vw + 1.307rem, 2.5vw)); /* 25px → 36px @1440 → ∞ */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* -- variant 2 ------------------------------------------------------------ */ [data-variant="2"] { --bg: #00453A; --fg: #87FFEB; /* This mark is wider and flatter than variant 1's. */ --mark-ratio: 886 / 489; --mark-h: max(12.136rem, 28.08vw + 5.292rem, 33.9583vw); /* 194px → 489px @1440 → ∞ */ } *, *::before, *::after { box-sizing: border-box; } html { height: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--fg); font-family: 'Season Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 650; font-feature-settings: 'ss03' on, 'ss02' on; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; /* fullscreen, no scroll */ overscroll-behavior: none; } /* --------------------------------------------------------------- stage --- */ .stage { position: relative; display: flex; flex-direction: column; height: 100dvh; padding: max(var(--pad-t), env(safe-area-inset-top)) var(--pad-r) var(--pad-b) var(--pad-l); isolation: isolate; } /* ---------------------------------------------------------------- text --- */ .intro { position: relative; z-index: 1; flex: 0 0 auto; /* Guarantees breathing room on short viewports, where `margin-top: auto` on the mark has no slack left to give. Uncapped like the ramps above, so the gap keeps pace with the type instead of freezing at 32px. */ margin-bottom: max(1rem, 2vw); } .title { margin: 0; font-size: var(--title); line-height: 1; letter-spacing: -0.005em; font-weight: inherit; text-wrap: balance; } .services, .meta { display: flex; flex-wrap: wrap; gap: 0.1em 1.05em; /* column gap ≈ the wide word spacing in the comp */ margin: 0; font-size: var(--body); line-height: 1.111; font-weight: inherit; } .services { margin-top: 0.9em; } /* 32px below the title, per the comp */ .meta { margin-top: 0; } /* flows on as the next line on desktop */ .meta a { color: inherit; text-decoration: none; transition: opacity 0.25s var(--ease); } .meta a::after { content: ''; display: block; height: 0.08em; margin-top: 0.06em; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .meta a:hover::after, .meta a:focus-visible::after { transform: scaleX(1); } .meta a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; } /* ---------------------------------------------------------------- mark --- */ /* The mark is a flow item, not absolutely positioned: `margin-top: auto` pins it to the bottom of the padding box — so it sits on the page's left gutter, in line with the text — and `flex-shrink` lets it give way on short viewports instead of ever climbing into the text. */ .mark { align-self: flex-start; flex: 0 1 auto; min-height: 0; margin-top: auto; height: var(--mark-h); max-height: 58dvh; width: auto; aspect-ratio: var(--mark-ratio); max-width: 100%; color: var(--fg); pointer-events: none; } .mark svg { display: block; width: 100%; height: 100%; /* Animation hook: #mark-path inside is ready to be morphed / drawn / tweened. */ will-change: transform; } /* -------------------------------------------------------------- motion --- */ @media (prefers-reduced-motion: no-preference) { .title, .services, .meta { animation: rise 0.9s var(--ease) both; } .services { animation-delay: 0.08s; } .meta { animation-delay: 0.14s; } .mark { animation: settle 1.2s var(--ease) both 0.1s; } @keyframes rise { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } } @keyframes settle { from { opacity: 0; transform: translate3d(-4%, 6%, 0); } to { opacity: 1; transform: none; } } } /* ------------------------------------------------- small / short screens --- */ /* Phone portrait: the two sub-lines read as separate groups, as in the comp. */ @media (max-width: 700px) { .meta { margin-top: 0.9em; } } /* Landscape phones and short windows: give the text the room first. */ @media (max-height: 560px) { .mark { max-height: 46dvh; } }