/* ============================================================================ LONG VIEW — /landscape-architect-websites/ A theme page that is also a landing page. Loads NO css/style.css and NO js/main.js; this file is the whole design. THE MATERIAL: a landscape architect's drawing sheet. One warm vellum, one ink, hairline rules, uppercase lettering, registration marks, a north point. Nothing is raised, nothing casts a shadow, and there is not a card on the page: the surfaces on a drawing are ruled, not lit. (That is also what keeps it out of Paper's territory, which is all soft shadow, and out of Daylight Study's, which is sheets pinned to a lit wall.) THE COLOUR RULE, and it is one line so that it can be checked: The drawing is ink on vellum. Every colour on this page arrives inside a photograph, and nothing else on the page is coloured. There is no accent variable in this file on purpose. The primary button is ink filled with vellum type; a link is ink with a ruled underline; the runway's "before" state is the photograph drained to a ghost and its "after" is the same photograph at full saturation. So the one moment of colour on the page is the one the reader scrubs into existence, which is the argument the section is making. ADDING A COLOURED TOKEN COSTS THE RULE ITS MEANING. THE ONE SCROLL-LOCKED SECTION is #long-view. Its justification is narrow and is stated on the page: a practice sells a thing that will not exist for two decades, and scroll is the only control a browser has that maps onto elapsed time. It is not a licence for a second one here. ============================================================================ */ /* ============================================================ FONTS ONE FACE, AND ONE ONLY: Cormorant Garamond, self-hosted and subset by tools/fonts.py, preloaded in the because it renders the cover h1 (the LCP element). Body copy and every .anno stay on the system sans, so the serif is the VOICE and the sans is the INFORMATION. NO cross-origin request anywhere on this page. NO LATIN-EXT TWIN, deliberately: nothing on this page renders a character outside the LATIN subset. One accented letter in the copy means adding the twin to tools/fonts.py AND a second @font-face here, TOGETHER — a face declared over a range whose file does not exist renders tofu, not a fallback. NO ITALIC, also deliberately, and it saved 38K. The one place this page wants one is botanical names, and a planting plan letters those in spaced capitals anyway (see .lv_text), which is both more authentic and free. ============================================================ */ @font-face { font-family: "Cormorant Garamond"; src: url(/assets/fonts/cormorant-latin-v1.woff2) format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+00B0, U+00B7, U+2010-2027, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193, U+2212; } /* ---- Poster faces, for the collection band at the foot of the page. style.css's own subsets, declared verbatim: .poster_daylight and .poster_silver ask for them by name and this page loads no style.css. (.poster_paper wants plain Arial and needs nothing.) The unicode-ranges must match tools/fonts.py's LATIN / LATIN_EXT exactly and must not overlap. NOT PRELOADED, deliberately — small faces for three previews at the very bottom of the page, below several screens of content. The page preloads exactly ONE face, declared above. */ @font-face { font-family: "JetBrains Mono"; src: url(/assets/fonts/jetbrains-mono-latin-v1.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+00B0, U+00B7, U+2010-2027, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193, U+2212; } @font-face { font-family: "JetBrains Mono"; src: url(/assets/fonts/jetbrains-mono-latinext-v1.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+00A1-00A8, U+00AA-00AD, U+00AF, U+00B1-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC; } @font-face { font-family: "Cinzel Decorative"; src: url(/assets/fonts/cinzel-decorative-poster-v1.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ============================================================ TOKENS Every ratio below is measured against --sheet #EBE6DA and is stated because this page argues for accessibility in its own copy. MOVE --sheet AND THEY ALL MOVE. ============================================================ */ :root { --sheet: #EBE6DA; /* the vellum */ --sheet-lift: #F3EFE6; /* a cleaner patch of it: figure frames, the form */ --sheet-press: #E1DBCC; /* a duller patch: pressed rows, the plate's ground */ --ink: #1F2A21; /* 11.95:1 — body, headings, the drawing */ --ink-soft: #46523F; /* 6.64:1 — .anno, captions, secondary copy */ --ink-ghost: #9A9384; /* 2.45:1 — DECORATIVE ONLY. Never set copy in it. */ --rule: rgb(31 42 33 / .26); --rule-soft: rgb(31 42 33 / .13); --gutter: clamp(1.25rem, 5vw, 4rem); --sheet-max: 1180px; --measure: 66ch; --mast-h: 3.75rem; --display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ease: cubic-bezier(.22, .61, .36, 1); } /* ============================================================ BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { /* WHITE-FLASH RULE: the page's real ground colour lives here, not only on body, so a view-transition snapshot taken against the root never flashes a colour this page never shows. */ background: var(--sheet); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--sheet); color: var(--ink); font-family: var(--sans); font-size: clamp(1rem, .96rem + .2vw, 1.09rem); line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg { max-width: 100%; } img { display: block; height: auto; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .75rem 1.25rem; background: var(--ink); color: var(--sheet); text-decoration: none; } .skip:focus { left: 0; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* ============================================================ TYPE Cormorant is a light, high-contrast Garamond with a small x-height, so every size here is a step larger than the same role would take on a grotesque, and NOTHING sets body copy in it. Its hairlines need the size. ============================================================ */ h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; letter-spacing: .004em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.9rem, 1.6rem + 5.6vw, 5.6rem); font-weight: 600; line-height: 1.02; letter-spacing: -.006em; } h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); max-width: 24ch; } h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); } p { margin: 0 0 1.15em; max-width: var(--measure); } p:last-child { margin-bottom: 0; } strong { font-weight: 600; } em { font-style: italic; /* the system sans supplies this; the display face ships no italic */ } /* A LINK IS INK PLUS A RULE, never a colour — THE COLOUR RULE. The underline is offset and thin so it reads as a drawn rule rather than as a browser default. */ a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-color .2s var(--ease); } @media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: var(--ink); } } /* THE ANNOTATION VOICE — uppercase, letterspaced, small, on the sans. It is the drawing's lettering, and it is what carries hierarchy on a page with no colour and no shadow to spend on it. */ .anno { margin: 0; font-family: var(--sans); font-size: .7rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; line-height: 1.5; color: var(--ink-soft); max-width: none; } .anno--note { margin-top: 2rem; margin-bottom: .6rem; } /* The titleblock strip: two annotations at opposite ends of a hairline, exactly as a drawing sheet signs itself off. */ .titleblock { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: baseline; margin-top: 2.5rem; padding-top: .7rem; border-top: 1px solid var(--rule); } /* ============================================================ BUTTONS — a ruled box, or an ink-filled one. No gradient, no shadow, no colour. ============================================================ */ .mybutton { display: inline-block; padding: .72em 1.5em; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .22s var(--ease), color .22s var(--ease); } .mybutton--primary { background: var(--ink); color: var(--sheet); /* vellum on ink measures the same 11.95:1 read the other way round */ } @media (hover: hover) and (pointer: fine) { .mybutton:hover { background: var(--ink); color: var(--sheet); } .mybutton--primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); } } .mybutton:disabled { opacity: .5; cursor: default; } /* One action per section, with a line of annotation under it saying what the action is for. */ .card_actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.5rem; margin-top: 2.75rem; } /* ============================================================ THE MASTHEAD + THE INDEX PANEL Above 900px a plain row of the site's seven real pages. Below it the same seven move into a drawn panel behind the toggle, because seven links wrapping to three lines makes a fixed masthead a third of a phone screen tall. CRAWL PARITY: nothing is display:none and no link is dropped. The closed panel is a transformed, visibility:hidden sheet holding the same seven real , made `inert` by the script at the foot of the page. ============================================================ */ .masthead { position: fixed; inset: 0 0 auto; z-index: 40; min-height: var(--mast-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem var(--gutter); background: var(--sheet); border-bottom: 1px solid var(--rule); } .wordmark { font-family: var(--display); font-size: 1.32rem; font-weight: 600; letter-spacing: .01em; text-decoration: none; white-space: nowrap; } .masthead nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem 1.35rem; margin: 0; padding: 0; list-style: none; } .masthead nav a { font-size: .72rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); transition: color .2s var(--ease); } @media (hover: hover) and (pointer: fine) { .masthead nav a:hover { color: var(--ink); } } .masthead .index_eyebrow, .masthead .index_block, .nav_toggle { display: none; } @media (max-width: 900px) { /* THE PANEL. A drawn sheet, ruled like everything else, that slides down from under the masthead. `visibility` is what takes it out of the a11y tree without taking it out of the crawl. */ .nav_toggle { display: block; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--rule); background: transparent; cursor: pointer; } .nav_rules { display: block; width: 1.1rem; margin-inline: auto; } .nav_rule { display: block; height: 1px; background: var(--ink); transition: transform .28s var(--ease), opacity .2s var(--ease); } .nav_rule--2 { margin: .3rem 0; } html.nav-open .nav_rule--1 { transform: translateY(.31rem) rotate(45deg); } html.nav-open .nav_rule--2 { opacity: 0; } html.nav-open .nav_rule--3 { transform: translateY(-.31rem) rotate(-45deg); } #index_panel { position: fixed; inset: var(--mast-h) 0 auto; padding: 1.75rem var(--gutter) 2rem; background: var(--sheet); border-bottom: 1px solid var(--rule); transform: translateY(-102%); visibility: hidden; transition: transform .38s var(--ease), visibility .38s; } html.nav-open #index_panel { transform: none; visibility: visible; } html.nav-open, html.nav-open body { overflow: hidden; } .masthead .index_eyebrow, .masthead .index_block { display: flex; } .masthead .index_eyebrow { display: block; margin-bottom: 1rem; } .masthead nav ul { display: block; } .masthead nav li+li { border-top: 1px solid var(--rule-soft); } .masthead nav a { display: block; padding: .78rem 0; font-size: .8rem; color: var(--ink); } } /* ============================================================ THE SCALEBAR — reading progress, drawn as a scale bar is: a hairline with a heavier one advancing along it. Decorative, and only the motion layer draws it. ============================================================ */ .scalebar { display: none; position: fixed; top: var(--mast-h); left: 0; right: 0; z-index: 39; height: 2px; background: var(--rule-soft); pointer-events: none; } .scalebar span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); } /* ============================================================ 01 · THE COVER NO PHOTOGRAPH ABOVE THE FOLD, and on this page that is the argument rather than an economy: the drawing is the promise and the place is the payoff, so the cover is pure line and the first photograph arrives inside the runway as the thing being promised. It is also what makes the "images above the fold: none" row in section 04 true. ============================================================ */ .cover { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--mast-h) + clamp(3rem, 9vh, 6rem)) var(--gutter) clamp(3rem, 8vh, 5rem); } .cover_stage { position: relative; width: min(100%, var(--sheet-max)); margin-inline: auto; } /* THE CONTOUR SURVEY — the sheet this page is drawn on, and the only decoration in the file. It sits in the empty column beside the measure-bound copy and is DROPPED below 1100px, where there is no empty column left for it: at this contrast it may never end up under anything a reader has to read. */ .cover_contours { display: none; position: absolute; top: 50%; right: -2%; width: min(46%, 34rem); height: auto; transform: translateY(-50%); color: var(--ink); opacity: .16; pointer-events: none; } @media (min-width: 1100px) { .cover_contours { display: block; } .cover_inner { max-width: 62%; } } .cover_eyebrow { margin-bottom: 1.5rem; } .cover h1 { max-width: 15ch; } /* The cover line is display type and the lede is not, on purpose: two consecutive lines on the same face read as two competing titles. */ .cover_line { margin: 1.4rem 0 1.6rem; font-family: var(--display); font-size: clamp(1.35rem, 1.05rem + 1.15vw, 2.05rem); line-height: 1.24; max-width: 30ch; } .lede { max-width: 60ch; color: var(--ink-soft); } .cover_actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.25rem; } /* The one thing on the page that has to move before the reader has done anything, so it is a time loop rather than a scrub. */ .scroll_hint { display: flex; align-items: center; gap: .75rem; margin-top: 3rem; } .scroll_track { display: block; position: relative; width: 4.5rem; height: 1px; background: var(--rule); overflow: hidden; } .scroll_line { position: absolute; inset: 0; background: var(--ink); transform: translateX(-110%); } /* ============================================================ 02 · THE LONG VIEW — the pinned runway Structure only. EVERY track height, sticky and timeline for this section lives in THE MOTION LAYER at the foot of this file, so the state written here IS the collapsed, readable one: an ordinary section, the photograph at full colour, the plan sitting over it as a quiet overlay, both statements in normal flow. A browser with no scroll timelines gets that and needs no undo. ============================================================ */ .lv_track { position: relative; border-top: 1px solid var(--rule); } .lv_stage { display: flex; flex-direction: column; gap: clamp(1rem, 2.6vh, 1.9rem); padding: clamp(2.5rem, 7vh, 4.5rem) var(--gutter); width: min(100%, var(--sheet-max)); margin-inline: auto; } .lv_head h2 { margin-top: .5rem; max-width: 26ch; } /* THE FRAME. Unpinned it holds the photograph's own aspect ratio; pinned it takes the leftover height of the stage instead (see the motion layer), which is why nothing here hard-codes a height. */ .lv_frame { position: relative; aspect-ratio: 880 / 637; overflow: hidden; border: 1px solid var(--rule); background: var(--sheet-press); } .lv_photo, .lv_plan { position: absolute; inset: 0; width: 100%; height: 100%; } /* `cover` and the SVG's `xMidYMid slice` are the same instruction written twice. THEY MUST AGREE or the plan slides off the ground it is drawn on. */ .lv_photo { object-fit: cover; } .lv_plan { color: var(--ink); pointer-events: none; } /* --- the drawing ---------------------------------------------------- */ .lv_ink { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; /* the drawing is on the sheet, not on the photograph: a hairline that thickened with the viewport would read as paint */ } .lv_reg, .lv_north { stroke-width: 1.5; } .lv_north path { fill: currentColor; } .lv_edge { stroke-width: 2.5; } .lv_hatch { stroke-width: 1; opacity: .5; } /* THE MATURITY CIRCLE — the drawing convention this whole section is built on: a dashed ring at the spread a plant will reach when it is grown, drawn at full size on day one around something the size of a dinner plate. It is the promise, in the profession's own notation. */ .lv_ring { stroke-width: 1.5; stroke-dasharray: 9 7; } /* and the canopy that eventually fills it */ .lv_canopy { stroke-width: 1.5; fill: rgb(31 42 33 / .1); transform-box: view-box; /* view-box, so the transform-origin written inline on each circle is in the drawing's own coordinates and lands on the trunk */ } .lv_cross { stroke-width: 1.5; } .lv_leader { stroke-width: 1; } /* Spaced capitals, which is how a planting plan letters, and why this page ships no italic for its botanical names. */ .lv_text { fill: currentColor; stroke: none; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; } .lv_text--sm { font-size: 12.5px; font-weight: 500; opacity: .8; } .lv_text--end { text-anchor: end; } /* --- the datum: scroll position, read as years ---------------------- */ .lv_datum { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem clamp(.75rem, 2.5vw, 1.5rem) .8rem; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: .35rem; font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: linear-gradient(to top, rgb(235 230 218 / .92), rgb(235 230 218 / 0)); } .lv_datum_rule { grid-column: 1 / -1; position: relative; height: 1px; margin-bottom: .5rem; background: var(--rule); } /* the only thing in the frame that travels horizontally, and what tells the reader this is a timeline rather than a slideshow */ .lv_datum_mark { position: absolute; top: -3px; left: 0; width: 1px; height: 7px; background: var(--ink); } .lv_datum_tick--b, .lv_datum_tick--c { text-align: center; } .lv_datum_tick--d { text-align: right; } /* --- the two statements --------------------------------------------- */ .lv_says { display: flex; flex-wrap: wrap; gap: .6rem clamp(1.5rem, 5vw, 4rem); justify-content: space-between; } .lv_say { margin: 0; max-width: 26ch; font-family: var(--display); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem); line-height: 1.2; } .lv_say--two { text-align: right; margin-left: auto; } @media (max-width: 700px) { .lv_say--two { text-align: left; margin-left: 0; } } /* ============================================================ THE BANDS — ordinary sections, ruled off from each other. NO CARDS. A drawing does not stack panels; it rules areas apart and letters them. That is the layout argument and it is what keeps this page out of Paper's material. ============================================================ */ .band { padding: clamp(3.5rem, 10vh, 7rem) var(--gutter); border-top: 1px solid var(--rule); } .band_inner { width: min(100%, var(--sheet-max)); margin-inline: auto; } .band_inner>.anno:first-child { margin-bottom: .9rem; } .band h2 { margin-bottom: 1.6rem; } .split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; } .split--wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } @media (max-width: 900px) { .split, .split--wide { grid-template-columns: 1fr; } } .notes { display: grid; gap: clamp(1.25rem, 3vh, 2rem); } /* THE DEFINITION — the AEO block, set a step up so an answer engine and a skimming reader both find it first. */ .define { font-family: var(--display); font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); line-height: 1.4; max-width: 46ch; } /* THE PLATE — a ruled note, pressed rather than raised. The corner ticks are the registration marks off the drawing, and they are what make it read as part of the sheet instead of as a UI card. */ .plate { position: relative; padding: clamp(1.25rem, 3vw, 1.9rem); background: var(--sheet-press); } .plate::before, .plate::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1px solid var(--ink); pointer-events: none; } .plate::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; } .plate::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; } .plate h3 { margin-bottom: .6rem; } .plate .anno { margin-bottom: .5rem; } .plate p { font-size: .95rem; color: var(--ink-soft); max-width: 46ch; } .plate--quiet { background: transparent; border: 1px solid var(--rule-soft); } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); } @media (max-width: 900px) { .cards { grid-template-columns: 1fr; } } /* --- the specification list: a drawing's schedule ------------------- */ .specs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } .specs li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: .25rem 1.25rem; padding: .7rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .92rem; } @media (max-width: 560px) { .specs li { grid-template-columns: 1fr; } } .spec_k { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft); padding-top: .2em; } .spec_v { color: var(--ink); } /* --- the questions -------------------------------------------------- */ .qas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3.5vw, 2.75rem); } @media (max-width: 900px) { .qas { grid-template-columns: 1fr; } } .qa h3 { margin-bottom: .55rem; padding-top: .8rem; border-top: 1px solid var(--rule); max-width: 30ch; } .qa p { color: var(--ink-soft); font-size: .95rem; max-width: 52ch; } /* --- photographs: a figure on a drawing ----------------------------- */ .shot { margin: 0 0 clamp(1.75rem, 4vh, 2.75rem); padding: clamp(.5rem, 1.2vw, .85rem); background: var(--sheet-lift); border: 1px solid var(--rule); } .shot img { width: 100%; } .shot figcaption { margin-top: .7rem; max-width: 62ch; } .shot--wide { margin-bottom: clamp(2rem, 5vh, 3.25rem); } .split .shot, .split--wide .shot { margin-bottom: 0; } .band--figure .shot--wide { margin-bottom: clamp(2.5rem, 6vh, 4rem); } /* ============================================================ THE CONTACT FORM → POST /api/contact Fields are pressed into the sheet; the honeypot is genuinely off-screen rather than display:none, because a bot reads the computed style too. ============================================================ */ .contact_form { display: grid; gap: 1rem; align-content: start; padding: clamp(1.25rem, 3vw, 2rem); background: var(--sheet-press); } .field { display: grid; gap: .35rem; } .field label { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft); } .field input, .field textarea { width: 100%; padding: .65rem .75rem; border: 1px solid var(--rule); background: var(--sheet-lift); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.5; } .field textarea { resize: vertical; } .field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; } .hp_field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact_form .mybutton { justify-self: start; } .form_status { margin: 0; min-height: 1.5em; font-size: .88rem; color: var(--ink-soft); } .form_status.err { color: var(--ink); font-weight: 600; } /* ============================================================ THE PS CLOSE — the last thing read on every landing page. Built only out of parts the sheet already has: the annotation voice, the body face, and one rule above it. ============================================================ */ .ps_note { margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 1.1rem; border-top: 1px solid var(--rule); } .ps_note .anno { margin-bottom: .7rem; } .ps_note p { max-width: 58ch; color: var(--ink-soft); } /* ============================================================ THE COLLECTION BAND (.alsolike) "Like this theme? You might also like:", written to TRAVEL: nothing here is named for this page and nothing is an id. THE CARDS ARE HOME'S POSTERS, PORTED VERBATIM (Adam: "the exact same code we use for the home page slider") from css/style.css. NOT ported: the 3-D hover pops and the fan poses, both of which need the fan's preserve-3d rig. A change to style.css's POSTERS block is a change to every copy. The band takes a DIFFERENT GROUND from the rest of the page — the pressed sheet — so the previews, which are the only other colour on the page besides the runway's photograph, read as pinned-up samples rather than as part of the drawing. ============================================================ */ .alsolike { padding: clamp(3.5rem, 9vh, 7rem) var(--gutter); background: var(--sheet-press); border-top: 1px solid var(--ink); } .alsolike_inner { width: min(100%, var(--sheet-max)); margin-inline: auto; } .alsolike h2 { margin: .7rem 0 1rem; max-width: 20ch; } .alsolike_lead { margin-bottom: clamp(2rem, 5vh, 3.25rem); max-width: 62ch; color: var(--ink-soft); } .alsolike_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2.25rem); } @media (max-width: 860px) { .alsolike_grid { grid-template-columns: 1fr; } } .alsolike_more { margin-top: clamp(1.75rem, 4vh, 2.75rem); } .tt_card { display: block; text-decoration: none; container-type: inline-size; transition: translate .3s var(--ease); } @media (hover: hover) and (pointer: fine) { .tt_card:hover { translate: 0 -4px; } } /* `container-type: inline-size` is what gives the poster its em scale, exactly as the home fan's column does; with no padding, 100cqw IS the poster's width. */ .tt_art { position: relative; overflow: hidden; aspect-ratio: 700 / 450; --u: calc(100cqw / 700); font-size: calc(16 * var(--u)); border: 1px solid var(--rule); } .tt_note { margin-top: .9rem; font-size: .92rem; color: var(--ink-soft); } .tt_card .titleblock { margin-top: .9rem; } /* =========================== POSTERS ==================================== Ported from css/style.css. Everything is em-based so it rides .tt_art's --u-derived font-size. */ .slide_poster { position: relative; width: 100%; height: 100%; border-radius: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em; text-align: center; transform-style: preserve-3d; } .poster_bg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; transform: translateZ(0); } /* Every poster element rests 2px off the card face — never coplanar with the opaque .poster_bg at Z 0, so preserve-3d's depth sort never has a tie to resolve. Give any NEW poster element the same rest lift. The resets are this page's tax, not home's: home has no element rules on h3/p at all, so a poster title there renders in the poster's own face. Here h1,h2,h3 carry the display face, a weight and a tracking, all of which would leak in under .poster_title and restyle other studios' work. */ .poster_title { margin: 0; position: relative; font-size: 3.4em; line-height: 1.05; letter-spacing: 2px; font-weight: 700; text-wrap: wrap; transform: translateZ(2px); } .poster_sub { margin: 0; position: relative; max-width: none; font-size: 1.3em; line-height: 1.2; transform: translateZ(2px); } .poster_kicker { margin: 0 0 .4em; position: relative; max-width: none; font-size: .8em; letter-spacing: .28em; text-transform: uppercase; font-family: 'Courier New', monospace; transform: translateZ(2px); } /* ---- Daylight Study: a drawing sheet, ruled ---- */ .poster_daylight .poster_bg { background: linear-gradient(118deg, rgba(240, 215, 164, .58) 0 20%, rgba(240, 215, 164, 0) 62%), linear-gradient(168deg, #eceded 0%, #dfe1dd 100%); } .poster_daylight .poster_bg::after { content: ""; position: absolute; inset: .65em; border: 1px solid rgba(21, 24, 26, .28); } .poster_daylight .poster_kicker { font-family: "JetBrains Mono", ui-monospace, monospace; color: #676c6e; } .poster_daylight .poster_title { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 2.3em; letter-spacing: .01em; text-transform: uppercase; color: #15181a; } .poster_daylight .poster_sub { color: #676c6e; } /* ---- Paper: neumorphic — embossed ghost headline + soft pill ---- */ .poster_paper .poster_bg { background: #e4e5e9; } .poster_paper .poster_title { font-family: arial, sans-serif; font-size: 4.2em; color: #e4e5e9; text-shadow: -0.02em -0.02em 0.04em #ffffff, 0.02em 0.03em 0.05em #b4b5bd; } .poster_paper .poster_pill { position: relative; width: 38%; height: 1.9em; border-radius: 2em; background: radial-gradient(circle at 50% 60%, #eef0f4, #e0e1e6 70%); box-shadow: .35em .35em .8em #c2c3ca, -.35em -.35em .8em #ffffff; transform: translateZ(2px); } .poster_paper .poster_sub { color: #74757d; } /* ---- Silver Plate: silver 3D type over the real theme's blue-steel room light (--steel #38475B fading to --coal #242C38), gold sold ribbon ---- */ .poster_silver .poster_bg { background: radial-gradient(circle 16em at 30% 20%, #38475b, transparent 70%), #242c38; } /* Centre-anchored on the corner, so the label lands on the middle of the VISIBLE chord whatever the text measures — this page's ribbon inherits its own sans, not the site's Orbitron, so a tuned top/right pair cannot be right in both places. Full note: css/style.css, same selector. */ .poster_silver .poster_ribbon { position: absolute; top: 0; right: 0; transform: translate(50%, -50%) translate(-4em, 4em) rotate(45deg); padding: .3em 3em; font-size: .8em; letter-spacing: .25em; text-transform: uppercase; font-weight: 700; background: linear-gradient(180deg, #f0c96c, #c89a34); color: #241a05; } .poster_silver .poster_teapot { position: absolute; left: -.5em; bottom: -.5em; width: 4.6em; height: auto; opacity: .6; filter: drop-shadow(0 .1em .2em rgba(0, 0, 0, .5)); } .poster_silver .poster_teapot--mirror { left: auto; right: -.5em; transform: scaleX(-1); } .poster_silver .poster_title { font-family: "Cinzel Decorative", Georgia, 'Times New Roman', serif; letter-spacing: .06em; background: linear-gradient(180deg, #fdfdfd 15%, #8d8d96 55%, #ececf4 90%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .04em .05em rgba(0, 0, 0, .85)); } .poster_silver .poster_sub { color: #9d9da6; } /* ============================================================ THE COLOPHON — the sheet's own titleblock strip. It takes the BAND'S ground, not the page's, which is the pairing that ports with the collection band: a footer with no ground of its own lands on whatever the last section left behind. ============================================================ */ .colophon { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding: 1.4rem var(--gutter); background: var(--sheet-press); border-top: 1px solid var(--rule); } /* ============================================================================ ============ T H E M O T I O N L A Y E R ================= ============================================================================ EVERYTHING scroll-driven on this page is inside this one block, and nothing outside it moves except hover transitions and the cover's scroll hint. The guard is doubled on purpose: @supports so a browser without scroll timelines simply gets the settled page, and prefers-reduced-motion so a reader who asked for stillness gets it from the OS without needing the site's own stamp. The site's stamp (html.no-runway) is handled AFTER the block, because a class cannot be tested inside @supports. THE PINS ARE DECLARED HERE AND NOWHERE ELSE. A browser that cannot resolve these timelines must never get a 400svh section whose contents do not move. ============================================================================ */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* ---- reading progress ---- */ .scalebar { display: block; } .scalebar span { animation: bar-fill linear both; animation-timeline: scroll(root block); } @keyframes bar-fill { to { transform: scaleX(1); } } /* ---- the cover's own entrance: a page-LOAD stagger, not a scrub. Nothing has scrolled when this paints, so a scrubbed hero would sit at opacity 0 on arrival. ---- */ .cover_eyebrow, #h1, .cover_line, .lede, .cover_actions, .cover_stage .titleblock, .cover_contours { animation: sheet-rise .9s var(--ease) both; } .cover_contours { animation-duration: 1.6s; } #h1 { animation-delay: .1s; } .cover_line { animation-delay: .22s; } .lede { animation-delay: .34s; } .cover_actions { animation-delay: .46s; } .cover_stage .titleblock { animation-delay: .58s; } @keyframes sheet-rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } } .scroll_line { animation: hint-sweep 2.6s var(--ease) infinite; } @keyframes hint-sweep { 0%, 10% { transform: translateX(-110%); } 90%, 100% { transform: translateX(260%); } } /* ============ THE LONG VIEW ============ 400svh track, 100dvh stage: 300svh of scrub. Four phases, all in `contain` percentages, so they are relative to the pin and never need retuning for where the section sits on the page. P1 0–14% YEAR 00. The drawing draws itself over a ghost of the site photograph. P2 14–38% YEAR 01. The ground comes up out of the paper and the two shrubs are planted, tiny, inside the circles the plan drew for them. P3 38–74% THE GROWTH. The canopies scale out to meet those circles; each dashed ring retires as its own canopy reaches it. P4 74–100% YEAR 20. The photograph stands alone and the drawing has gone. THE THREE TIMINGS ARE ONE SYSTEM: statement one at 14% (the first frame the ground starts arriving), the growth finishing at 74%, statement two at 74% (the frame it finishes). Move one and move the other two, and read the h2 with them — the heading and the two statements are one sentence across the scroll. NOTHING IS REVEALED BY A MOVING EDGE. The photograph fades and saturates in place and the ink fades out over it. A hard boundary travelling across live content is exactly what NO INVISIBLE WALLS forbids, and the coincidence of the drawn regions with the photographed ones is what reads as the plan filling itself in. */ .lv_track { height: 400svh; view-timeline: --lv block; } .lv_stage { position: sticky; top: 0; height: 100dvh; justify-content: center; } /* pinned, the frame takes the leftover height of the stage rather than the fixed one its own aspect ratio gives it */ .lv_frame { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; } .lv_head, .lv_photo, .lv_edge, .lv_reg, .lv_hatch, .lv_north, .lv_ring, .lv_canopy, .lv_letters, .lv_ink, .lv_datum_mark, .lv_say { animation-timeline: --lv; animation-fill-mode: both; animation-timing-function: linear; } .lv_head { animation-name: sheet-rise-scrub; animation-range: contain 0% contain 7%; animation-timing-function: var(--ease); } @keyframes sheet-rise-scrub { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } } /* P1→P4 · THE GROUND. It starts as a survey photograph seen through tracing paper (drained, lifted, nearly gone) and ends as the place. Both filters list the same three functions in the same order, which is what lets them interpolate at all. */ /* 14% IS THE SAME NUMBER AS STATEMENT ONE, and it has to be: P1 is the drawing alone, so the ground may not start arriving until the reader is told that year one is what they get. It started at 6% in the first pass and the phase boundary was a fiction. */ .lv_photo { animation-name: ground-arrive; animation-range: contain 14% contain 74%; } @keyframes ground-arrive { from { opacity: .16; filter: saturate(0) brightness(1.3) contrast(.72); } to { opacity: 1; filter: saturate(1) brightness(1) contrast(1); } } /* P1 · the bed edge draws itself, then the rest of the furniture letters in behind it */ .lv_edge { animation-name: draw-edge; animation-range: contain 0% contain 12%; } @keyframes draw-edge { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } } .lv_reg, .lv_north { animation-name: ink-in; animation-range: contain 2% contain 11%; } @keyframes ink-in { from { opacity: 0; } } /* the hatch never comes back to full: it is a fill pattern, not a line, and at 1 it competes with the planting under it */ .lv_hatch { animation-name: hatch-in; animation-range: contain 2% contain 11%; } @keyframes hatch-in { from { opacity: 0; } to { opacity: .5; } } /* P2 · the shrubs are planted: a dinner-plate-sized thing inside a circle drawn for what it will become. P3 · it grows out to meet it. This is the whole diagram, and it is two keyframes. */ .lv_canopy { animation-name: canopy-grow; animation-range: contain 22% contain 74%; animation-timing-function: var(--ease); } @keyframes canopy-grow { from { opacity: 0; transform: scale(.06); } 12% { opacity: 1; } to { opacity: 1; transform: scale(1); } } /* P3 · the promise retires as it is met. A dashed line is only a promise until the thing arrives at it. */ /* The ring is drawn EARLY, with the rest of the plan, because it is the promise: at year 00 it has to be on the sheet at full size around nothing at all. Then it holds while the canopy travels out to it, and retires as it is met. */ .lv_ring { animation-name: ring-retire; animation-range: contain 3% contain 74%; } @keyframes ring-retire { from { opacity: 0; } 11%, 62% { opacity: 1; } to { opacity: 0; } } /* P4 · the drawing has done its job and leaves the place alone. It fades; it is never wiped or slid off. */ .lv_ink { animation-name: plan-retire; animation-range: contain 76% contain 92%; } @keyframes plan-retire { from { opacity: 1; } to { opacity: 0; } } /* the lettering goes first, because it is the thing that would be read over the photograph rather than seen on it */ .lv_letters { animation-name: ink-in, ink-out; animation-range: contain 9% contain 17%, contain 64% contain 76%; } @keyframes ink-out { to { opacity: 0; } } /* THE DATUM travels the whole runway: it is the clock, and it is the one thing in the frame that moves horizontally. `left`, not a transform, and that is forced rather than lazy: a percentage translateX resolves against the ELEMENT's own width, which here is one pixel, so a transform cannot express "travel the length of the rule". It is a 1px hairline, so the layout cost of animating `left` is nil. */ .lv_datum_mark { animation-name: datum-travel; animation-range: contain 0% contain 100%; } @keyframes datum-travel { from { left: 0; } to { left: 100%; } } /* TWO STATEMENTS, both of which arrive and STAY (never a cycle). The first is keyed to the exact frame the ground starts coming up; the second to the frame the canopies finish. */ .lv_say { animation-name: say-in; animation-timing-function: var(--ease); } .lv_say--one { animation-range: contain 14% contain 22%; } .lv_say--two { animation-range: contain 74% contain 82%; } @keyframes say-in { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } } /* ---- the ordinary bands: ONE arrival each, on the section, because a section arrives as one thing. Four separate entrances inside a band is the page contradicting its own argument in motion. The range is `entry`, which for a view() timeline spans exactly the element's OWN height — so a short band and a tall one both finish arriving a fifth of the way in, and neither needs a per-section number. No duration: a timeline-driven animation is progress-driven and ignores one. ---- */ .band_inner, .alsolike_inner { animation-name: sheet-rise-scrub; animation-fill-mode: both; animation-timing-function: var(--ease); animation-timeline: view(); animation-range: entry 0% entry 20%; } } } /* ============================================================ THE html.no-runway TWIN A class cannot be tested inside @supports, so the site's own stamp is handled here instead. It is stamped pre-paint for reduced motion AND for the 'standard' / 'deck' experiences, and it is a strict superset of html.reduce-motion. The experience selector is not on this page, but a choice stored anywhere else on the site still stamps the flag, so this block is what stops the runway rendering as four screens of nothing. A COLLAPSED RUNWAY MUST HAVE ITS SCRUB KILLED IN THE SAME RULE: animation-fill-mode: both with no resolvable timeline holds the FROM state, which here is opacity 0 on almost everything in the frame. ============================================================ */ html.no-runway .lv_track { height: auto; } html.no-runway .lv_stage { position: static; height: auto; } html.no-runway .lv_frame { flex: none; aspect-ratio: 880 / 637; } html.no-runway .scalebar { display: none; } html.no-runway .cover_eyebrow, html.no-runway #h1, html.no-runway .cover_line, html.no-runway .lede, html.no-runway .cover_actions, html.no-runway .cover_stage .titleblock, html.no-runway .cover_contours, html.no-runway .scroll_line, html.no-runway .lv_head, html.no-runway .lv_photo, html.no-runway .lv_edge, html.no-runway .lv_reg, html.no-runway .lv_hatch, html.no-runway .lv_north, html.no-runway .lv_ring, html.no-runway .lv_canopy, html.no-runway .lv_letters, html.no-runway .lv_ink, html.no-runway .lv_datum_mark, html.no-runway .lv_say, html.no-runway .band_inner, html.no-runway .alsolike_inner { animation: none !important; opacity: 1; transform: none; } /* THE SETTLED STATE OF THE DIAGRAM. A reader here has scrubbed nothing, so nothing has been earned: they get the finished place with the plan sitting over it as a quiet overlay, both statements in flow, and the maturity circles still drawn — which is, correctly, the drawing and the photograph at the same time. */ html.no-runway .lv_photo { filter: none; } html.no-runway .lv_ink { opacity: .38; } html.no-runway .lv_hatch { opacity: .5; } html.no-runway .lv_edge { stroke-dasharray: none; stroke-dashoffset: 0; } html.no-runway .lv_datum_mark { left: 100%; }