/* ========================================================================== 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; /* 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: clamp(13.625rem, 31.52vw + 5.94rem, 34.3125rem); /* 218px → 549px */ /* 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: clamp(1.25rem, 2.1vw + 0.738rem, 2.625rem); /* 20px → 42px */ --pad-t: clamp(1.25rem, 2.95vw + 0.531rem, 3.1875rem); /* 20px → 51px */ --pad-y-b: clamp(1.25rem, 1.43vw + 0.9rem, 2.1875rem); /* 20px → 35px */ --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, clamp(3.75rem, 2.86vw + 3.054rem, 5.625rem)); /* 60px → 90px */ --body: min(6.41vw, clamp(1.5625rem, 1.05vw + 1.307rem, 2.25rem)); /* 25px → 36px */ --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: clamp(12.136rem, 28.08vw + 5.292rem, 30.5625rem); /* 194px → 489px */ } *, *::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. */ margin-bottom: clamp(1rem, 2vw, 2rem); } .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; } }