), since both captions are themselves toggles — reset the browser chrome so they still read as plain text. */ /* margin-top empirically tuned (measured via getBoundingClientRect) so this row's baseline lines up with Contact's "Book a meeting" row next to it — the two columns have different content shapes above this point (Contact: label + 4 contact-grid rows; Scale: label + 3-row scale-row), so they don't reach the same Y naturally without this nudge. Re-check if either column's content above changes. */ .scale-row__caption { margin: 0.625rem 0 0; padding: 0; border: none; background: none; cursor: pointer; text-align: left; white-space: nowrap; color: var(--ink-soft); font-family: var(--font); font-size: 0.5rem; } /* 4.75rem explicit width (walked back from 5.25rem — "slightly less wide," per Liam; originally width:100% + max-width:4.5rem). Explicit, not max-width-capped: the scale-row's auto grid track sizes to its content's max-content, and a replaced element's max-content width is its aspect-ratio width (height 0.75rem x the 200:32 viewBox = 75px) — so with width:100% the svg could never exceed the very track it was itself sizing, and the max-width cap was unreachable. A fixed width becomes the track's own size instead. Verified via bounding-rect sweep, no viewport overflow. */ /* Stroke weights live here rather than on the SVG elements so the scale bar, the north point and the theme switch cannot drift apart - they were three separate literals cross-referenced by comment before. */ .scale-bar polyline { stroke-width: var(--hairline); } .north-point circle { stroke-width: var(--hairline); } /* Double, per Liam - the needle is the one piece of this linework meant to read as heavier than the rest. */ .north-point line { stroke-width: calc(var(--hairline) * 2); } .scale-bar { display: block; width: 4.75rem; height: 0.75rem; /* Was var(--ink) — matched to the north point's var(--ink-soft) per Liam ("scale bar line colour needs to be the same colour as the nth point"), so the two pieces of drawing-sheet linework read as one consistent tone instead of the bar reading heavier. */ color: var(--ink-soft); /* The bar itself toggles the scale state now (scale-toggle.js), not just the caption below it — per Liam ("when I click on the scale bar the numbers should change"). */ cursor: pointer; } /* Absolute, not flex space-between: each label sits at the EXACT percentage matching the polyline's tick x-coordinates (0/50/100/150/ 200 of a 200-wide viewBox = 0/25/50/75/100%), anchored by its own edge/center rather than by its box in a flex row — see the comment above the markup in landing-page.html for why that distinction matters here. Numbers now sit above the line graphic (their own grid row) rather than below it, per Liam. */ .scale-bar__labels { position: relative; width: 4.75rem; height: 0.75rem; cursor: pointer; color: var(--ink-soft); font-family: var(--font); /* Same size as .contact-cta ("Book a meeting"), not the text tier — per Liam, makes the whole scale bar read slightly smaller/quieter. */ font-size: 0.5rem; } .scale-bar__labels span { position: absolute; top: 0; } /* 4 labels for 5 tick positions — 1.5's prong deliberately has no number over it, per Liam. "2" right-anchors at the bar's flush end. */ .scale-bar__labels span:nth-child(1) { left: 0%; } .scale-bar__labels span:nth-child(2) { left: 25%; transform: translateX(-50%); } .scale-bar__labels span:nth-child(3) { left: 50%; transform: translateX(-50%); } .scale-bar__labels span:nth-child(4) { left: 100%; transform: translateX(-100%); } /* ---- Wide footer: tablet & desktop, single row ---- Replaces the old @media(orientation:landscape) system entirely, per Liam: "the transition from phone to tablet and then to desktop... all of the text on the footer, in a single row. no large menu, no hamburger icon, etc... as the resolution gets wider, more categories, like journal, should start appearing, but obviously not twice, in the event of someone using the hamburger menu." Width-based now, not orientation-based — orientation was the wrong signal for "how much room does the footer actually have": a landscape phone at 667px and a portrait iPad at 834px are both meaningfully wide, but only the phone used to get anything beyond the compact, hamburger-driven mobile layout. A portrait tablet fell through the gap entirely and got the phone treatment regardless of its real width. This backup tag captures the pre-overhaul state if anything here needs unwinding: `git show footer-mobile-only-backup:landing-page.css`. Three tiers, each min-width and CUMULATIVE (mobile-first — a wider tier layers its rules on top of the narrower ones below it, it doesn't replace them): Journal graduates out of the hamburger menu first (768px), then Client Portal (1024px), then Copyright (1280px, where the hamburger itself disappears — nothing left to toggle). Each graduation is a single `display: block` override two lines long (see Tiers 2 and 3 below) — everything a graduated column needs (width, padding, order) is already defined once, here in Tier 1, and just keeps applying unchanged as more columns join it. Flexbox, not the old CSS Grid `repeat(7, max-content)` — a fixed 7-track grid still reserves 2 empty "ghost" tracks whenever fewer than 7 columns are actually visible (true for Tiers 1 and 2 here), and `justify-content: space-between` distributes gaps by TRACK COUNT, not by how many are occupied — the ghost tracks would still claim their own gap-slots, opening exactly the "super large gaps" Liam ruled out. Flexbox's space-between only ever distributes space among items actually being rendered, so a column that's `display:none` simply isn't counted at all. Both row wrappers stay `display: contents` throughout (same technique the old landscape block and the Large Menu already used): Selected Work/Contact/Scale and Journal/Client Portal/Copyright all become direct flex children of .titleblock, with `order` fixing their final sequence regardless of which subset is currently visible. A column that hasn't graduated yet is plain `display: none` (removed from the flex flow entirely — no ghost gap) rather than height-collapsed via the old grid-template-rows accordion trick: that trick needs an actual box to animate, and a `display: contents` parent no longer offers one. menu-toggle.js's click handler and its aria-expanded/.is-open bookkeeping are completely unchanged — only the CSS meaning of "open" changes here, from "slide this box's height open" to "display:block whichever columns haven't graduated yet." `.titleblock__menu.is-open .titleblock__col--portal` still matches correctly even though `.titleblock__menu` itself is `display:contents` — that only removes ITS OWN box, not its place in the DOM the selector engine reads, so descendant selectors through it work exactly as normal. This is also the direct answer to "not twice... using the hamburger menu": a column is EITHER visible because it's graduated (a plain, unconditional `display:block` at its own tier) OR visible because the still-open hamburger says so — never both mechanisms fighting over the same column, and resizing across a tier boundary just changes which of the two is in force, with no DOM move and nothing to desync. `max-width` + centred margin stops the row itself from stretching edge-to-edge past 90rem: every flexible column's own width already self-caps via its `min(REM, calc(vw...))` ceiling (unchanged from the old landscape formulas below — verified those ceilings resolve by ~1230-1400px viewport width regardless of tier), so without also capping the ROW's width, `space-between` would keep inflating the GAPS between columns forever on an ultra-wide monitor once every column has already hit its own ceiling — exactly the "at no point should there be super large gaps" Liam asked to avoid. Resize-safety: .is-mini (mini-footer.js) and footer-drag.js's inline margin-bottom now both actively reset themselves once window.innerWidth crosses 768px (see those files) — neither has any media-query gating of its own, so without an explicit reset either one could persist across a resize/rotation and corrupt this layout (.is-mini's `display:none` on .titleblock__row-main would blank out Selected Work/Contact/Scale entirely; a stale negative margin-bottom would squeeze the whole row). footer-gap-equalizer.js's guard was also hardened (see that file) to bail out on ANY mode where .titleblock__row-main is display:contents, rather than naming specific classes to avoid — it now catches this new system, the old Large Menu, and anything added here in the future, all by the same one check. */ @media (min-width: 768px) { .titleblock { display: flex; /* Base rule (mobile) sets column — resetting explicitly here since display:flex alone doesn't reset flex-direction back to its initial row; left unset this whole tier silently stacked every column vertically instead of laying them out in a single row (caught via getBoundingClientRect: every column reported the same width and increasing top offsets). */ flex-direction: row; flex-wrap: nowrap; } /* Tapping the hamburger at the narrow end of this tier (768px) can reveal Client Portal AND Copyright at once — together with the five already-visible columns, that's genuinely more content than 768px holds even at everyone's minimum width (confirmed via getBoundingClientRect: Copyright's right edge landed 288px past the row's own 768px box with nowrap). Rather than let it overflow horizontally, allow wrapping ONLY while the menu is actually open — :has() lets this live on .titleblock itself despite is-open being set on the descendant .titleblock__menu (which stays display:contents and so isn't a real box .titleblock could otherwise select against). Harmless at wider tiers/viewports where everything already fits on one line with room to spare — flex-wrap:wrap only visibly wraps when it has to. */ .titleblock:has(.titleblock__menu.is-open) { flex-wrap: wrap; row-gap: 0.5rem; } .titleblock { /* Journal/Scale's flex-grow (below) consumes all leftover space up to their own max-width — space-between only ever has anything left to distribute once BOTH of them are already maxed out (a genuinely wide row), at which point it spreads the remainder evenly rather than leaving it all as a single dead gap after the last column (flex's default flex-start would). */ justify-content: space-between; gap: 1rem; /* Liam: "make the title block span the FULL WIDTH of the desktop absolutely no stopping short." It was capped at 90rem and centred, so on anything wider than 1440px the block stopped and sat in the middle of the screen with dead space either side - which on a title block, of all things, reads as a drawing sheet that missed its own paper. A title block runs the width of the sheet. No cap. */ max-width: none; margin-inline: 0; /* .titleblock is itself a flex item of .sheet (column-direction), and relying on stretch alone left it wider than .sheet — 838px measured inside a 768px .sheet, i.e. its own children's combined preferred width was winning over whatever cross-size .sheet was actually offering. min-width:0 (the usual fix for a nested flex container refusing to shrink below its content's automatic minimum) made no measurable difference on its own; explicit width:100% is what actually pinned it to .sheet's real width (confirmed via getBoundingClientRect immediately before/after: 838px -> 768px) — kept both since min-width:0 is still correct practice for a nested flex container and costs nothing. */ min-width: 0; width: 100%; } .titleblock__row-main, .titleblock__menu, .titleblock__menu-inner { display: contents; } .titleblock__col--brand { order: 1; } .titleblock__col--projects { order: 2; } .titleblock__col--contact { order: 3; } .titleblock__col--journal { order: 4; } .titleblock__col--portal { order: 5; } .titleblock__col--scale { order: 6; } .titleblock__col--copyright { order: 7; } /* Brand/Selected Work/Contact/Portal/Copyright keep their own content-driven width and never shrink — Journal and Scale are the two that flex (see below), so they're what absorbs the difference between a cramped tablet and a roomy desktop. flex-shrink:0 alone (not an explicit width) lets each one size to its natural content, same as it already does in the compact 3-column row-main. */ .titleblock__col--brand, .titleblock__col--projects, .titleblock__col--contact, .titleblock__col--portal, .titleblock__col--copyright { flex-shrink: 0; } /* Journal and Scale share whatever space is left over, growing and shrinking together (flex:1 1 0 on both — equal weight) between a floor that stays legible and a ceiling that stops them reading as oversized on an ultra-wide row. This replaces an earlier attempt at hand-derived vw-based width formulas (calc((100vw - 668px) * 0.37), carried over from the old orientation:landscape block) — those numbers were tuned for a layout where ALL SIX categories were simultaneously competing for space; reused as-is here, they put Journal/Scale into negative width the moment a narrower viewport had fewer categories (fewer siblings should mean MORE room, not a formula that doesn't know they're not there). Flexbox grow/shrink solves this natively: the browser computes the actual leftover space live, against whichever siblings are ACTUALLY visible at the moment — no separate constant to re-derive by hand every time Portal or Copyright's visibility changes at a later tier. Verified via getBoundingClientRect at 768/1024/1280px: no overflow past the row's own width at any of the three tier thresholds (see the "Test the new responsive footer" pass this shipped with). */ .titleblock__col--scale { flex: 1 1 0%; min-width: 6rem; max-width: 13.5rem; } /* Compound selector, matching .titleblock__menu .titleblock__col-- journal's own specificity (0,2,0) below — a bare .titleblock__col --journal here loses to that older, more specific rule regardless of source order (CSS specificity beats position in the cascade), which is exactly what happened the first time this shipped: Journal kept the old rule's flex:0 0 calc((100% - 0.25rem) / 3) (a fixed one-third share, sized for a context where it sits next to Selected Work/Contact in row-main's own grid — meaningless here) instead of this tier's flex:1 1 0%, and would only ever render at whatever that stale calc() happened to produce. */ .titleblock__menu .titleblock__col--journal { flex: 1 1 0%; min-width: 6rem; max-width: 13rem; } /* Portrait's fixed-viewport-width nudges (Contact's -0.1875rem, Scale's -33.33vw calc, Portal's and Copyright's own) exist purely to line compact-mode columns up under one another on a ~375px phone — meaningless once every column is its own flex item, and left in place they'd silently throw off the row's spacing (the same reset the old landscape block needed for the same reason). */ .brand-credentials { margin-left: 0; } .brand-credentials span:nth-child(even) { text-align: right; margin-left: 0; } .brand-credentials span { white-space: nowrap; } .titleblock__col--contact, .titleblock__col--scale, .titleblock__col--portal, .titleblock__col--copyright { margin-left: 0; } .titleblock__col { padding-top: 1.5rem; /* No bottom hairline row at this width — the lift rides on each cell's own padding instead of .titleblock__row-main's (which stops existing the moment that wrapper goes display:contents). */ padding-bottom: calc(1.5rem + max(0.375rem, env(safe-area-inset-bottom, 0px))); } .titleblock__col--brand { padding-left: var(--side); padding-right: 0.375rem; /* Was the divider between the logo row and the row below it — there's no separate "row below" once everything's one row. */ border-bottom: none; } .titleblock__row-main .titleblock__col:first-child, .titleblock__row-main .titleblock__col:last-child { padding-left: 0.375rem; padding-right: 0.375rem; } .titleblock__col--journal, .titleblock__col--portal { padding-left: 0.375rem; padding-right: 0.375rem; } .titleblock__col--copyright { padding-left: 0.375rem; padding-right: var(--side); } /* Journal graduates first — always visible from here on, no longer gated by the hamburger. */ .titleblock__col--journal .titleblock__link { width: 100%; align-self: stretch; } /* Client Portal and Copyright haven't graduated yet at this tier — plain display:none (see the header comment for why not the old accordion trick), shown only while the hamburger's menu is open. */ .titleblock__col--portal, .titleblock__col--copyright { display: none; } .titleblock__menu.is-open .titleblock__col--portal, .titleblock__menu.is-open .titleblock__col--copyright { display: block; } /* flex, not width — same specificity-mismatch reason as Journal above: .titleblock__menu .titleblock__col--portal/--copyright (0,2,0) already set their OWN flex-basis via a `flex: 0 0 calc((100% - 0.25rem) / 3)` / `flex: 1 1 calc(...)` rule sized for row-main's equal-thirds grid, and a plain `width` declaration here can't out-rank a flex-basis that's already been set — flex-basis wins ties with width on the main axis by spec, so the stale one-third share would keep winning regardless. Matching the compound selector lets these actually override it. */ .titleblock__menu .titleblock__col--portal { flex: 0 0 7.5rem; } .portal-input { width: 100%; } .titleblock__menu .titleblock__col--copyright { flex: 0 0 11rem; } .scale-bar, .scale-bar__labels { width: 100%; max-width: none; } .sheet__canvas { padding: calc(var(--side) * 2) var(--side); } .sheet__canvas-media { inset: calc(var(--side) * 2 + 0.75rem) calc(var(--side) + 0.75rem); width: calc(100% - var(--side) * 2 - 1.5rem); height: calc(100% - var(--side) * 4 - 1.5rem); } } /* ---- Wide footer, tier 2: Client Portal graduates ---- One override: Portal's display:none (Tier 1, above) is replaced by an unconditional display:block, same specificity but later in the cascade so it wins — the hamburger-reveal rule (.titleblock__menu.is-open .titleblock__col--portal) still matches too, it's just redundant now (Portal shows either way), which is harmless. Everything else Portal needs — width, padding, order, flex-shrink:0 — was already defined once in Tier 1 and keeps applying unchanged; Journal/Scale's flex:1 1 0% automatically gives up exactly the room Portal now needs, live, with no separate recalculation required here. */ @media (min-width: 1024px) { .titleblock__col--portal { display: block; } } /* ---- Wide footer, tier 3: Copyright graduates ---- The hamburger used to be hidden here, on the reasoning that once every column was on screen there was nothing left for it to reveal. That premise is gone: the columns moved into the full-screen menu and the hamburger is now the only way in, at any width. Hiding it at 1280px made the menu unreachable on a desktop. */ @media (min-width: 1280px) { .titleblock__col--copyright { display: block; } } /* ---- Large Menu (portrait, phone-width only) ---- Per Liam's overnight list (original build): hitting the scale bar cycles the scale state, and "Menu: Large" opens this — every category on screen at once, two per row, four rows counting the logo row: LYKKE + credentials (spans both columns) Selected Work | Contact Journal | Client Portal Scale & Theme | Copyright All text +50% except the logo. scale-toggle.js flips .is-scale-large on .titleblock; everything here is gated on that class AND portrait AND phone-width, so the wide tiers above and the default compact footer are untouched. max-width: 767.98px added here as part of the phone->tablet->desktop overhaul — Large Menu is a phone-portrait affordance for seeing everything at once when there's no room to show it all inline; once a portrait viewport is wide enough for the tiers above to apply (768px+), they already show MORE than Large Menu ever did (a real single row, not a 2-column stack) so Large Menu would just be a redundant, confusing extra state on something like a portrait iPad. Same display:contents mechanic the wide tiers use to flatten the row wrappers into one grid. */ @media (orientation: portrait) and (max-width: 767.98px) { .titleblock.is-scale-large { display: grid; grid-template-columns: 1fr 1fr; /* +50% type, via the tokens nearly everything in the footer already reads from (--tb-size-lg deliberately untouched — "the font size of everything except the logo"). The handful of hardcoded 0.5rem captions are overridden individually below. */ --tb-size-md: 0.9375rem; --tb-size-sm: 0.84375rem; } .titleblock.is-scale-large .titleblock__row-main, .titleblock.is-scale-large .titleblock__menu, .titleblock.is-scale-large .titleblock__menu-inner { display: contents; } .titleblock.is-scale-large .titleblock__col--brand { grid-column: 1 / -1; } /* Pair order — Copyright and Portal swapped per Liam ("make copyright the same width as journal and swap its place with client portal"): (Selected, Contact) / (Journal, Portal) / (Copyright, Scale). Grid auto-placement fills row by row, so odd orders land in the left column, even in the right. */ .titleblock.is-scale-large .titleblock__col--projects { order: 1; } .titleblock.is-scale-large .titleblock__col--contact { order: 2; } .titleblock.is-scale-large .titleblock__col--journal { order: 3; } .titleblock.is-scale-large .titleblock__col--portal { order: 4; } .titleblock.is-scale-large .titleblock__col--copyright { order: 5; } .titleblock.is-scale-large .titleblock__col--scale { order: 6; } /* Hairlines between the category rows, mirroring the compact footer's row-main border — drawn per-cell (both cells of rows 1 and 2) since the row wrappers are display:contents and can't paint their own. Row 3 (Copyright, Scale) is the last row, no hairline below it. */ .titleblock.is-scale-large .titleblock__col--projects, .titleblock.is-scale-large .titleblock__col--contact, .titleblock.is-scale-large .titleblock__col--journal, .titleblock.is-scale-large .titleblock__col--portal { border-bottom: 1px solid var(--line); } /* Page-edge padding by column side (left column = odd orders above); every portrait alignment nudge (Contact's -3px, Scale's and Copyright's shared -33vw calc, Portal's -0.1875rem — all tuned against the COMPACT layout's geometry) resets to 0 here, where the 2-column grid it was correcting for no longer exists. */ .titleblock.is-scale-large .titleblock__col--projects, .titleblock.is-scale-large .titleblock__col--journal, .titleblock.is-scale-large .titleblock__col--copyright { padding-left: var(--side); padding-right: 0.125rem; } .titleblock.is-scale-large .titleblock__col--contact, .titleblock.is-scale-large .titleblock__col--portal, .titleblock.is-scale-large .titleblock__col--scale { padding-left: 0.125rem; padding-right: var(--side); } .titleblock.is-scale-large .titleblock__col--contact, .titleblock.is-scale-large .titleblock__col--portal, .titleblock.is-scale-large .titleblock__col--scale, .titleblock.is-scale-large .titleblock__col--copyright { margin-left: 0; } /* The hamburger stays, but as a single line rather than the 3-line "row map" used elsewhere — every row is already on screen here, so that map doesn't apply. Tapping it minimises the whole Large Menu back to the compact footer, per Liam ("single line hamburger menu that just minimises the whole thing"); the actual collapse runs through scale-toggle.js's shared state so the Scale & Theme caption/numbers stay in sync (see menu-toggle.js). */ .titleblock.is-scale-large .hamburger span:nth-child(2), .titleblock.is-scale-large .hamburger span:nth-child(3) { display: none; } /* Journal entries and Copyright, per Liam ("make the journal entries longer so their ellipses align with the project numbers' end above" / "same with copyright") — 8.875rem, measured (Range on the actual index-number text, not its stretched grid-cell box — see the "measure text, not boxes" note elsewhere in this codebase) as the distance from Selected Work's left edge to where the indices actually stop rendering, not the wider column/box edge those numbers' cells stretch to fill. Copyright's paragraph wraps to fewer lines at this wider width than its previous 6.75rem. */ .titleblock.is-scale-large .titleblock__col--journal .titleblock__link { width: 8.875rem; } .titleblock.is-scale-large .titleblock__col--copyright .copyright-list { width: 8.875rem; } /* Portal's underlines, per Liam ("make the client portal lines extend so its the same width as contact above it") — Portal now sits directly under Contact (both order-even, right column, same cell padding), and Contact's own grid is already width:100% of that column, so matching it here is just width:100% rather than a re-measured fixed value. */ .titleblock.is-scale-large .portal-input { width: 100%; } /* Selected Work reverted to its pre-stretch fixed name track — same 6.75rem as above (the compact 4.5rem ×1.5), so the index numbers sit right after the names again instead of pushed to the column's right edge. Scale keeps its full-width bar/numbers (not part of Liam's "too wide" complaint, and a graphic bar reads fine full- width where a text column doesn't). */ .titleblock.is-scale-large .projects-grid { grid-template-columns: 6.75rem auto; } .titleblock.is-scale-large .scale-bar, .titleblock.is-scale-large .scale-bar__labels { width: 100%; max-width: none; } /* Bottom safe-area lift for the Large Menu's own last row — the compact layout's lift lives on .titleblock__row-main's padding (see its base rule), which stops existing here the moment that wrapper goes display:contents, so Copyright & Scale's cells carry it instead (new last row per the Copyright/Portal swap above), on top of their normal 0.625rem cell padding. Same env()+floor as everywhere: rises off the home indicator on iPhones, lifts "slightly" elsewhere. */ .titleblock.is-scale-large .titleblock__col--copyright, .titleblock.is-scale-large .titleblock__col--scale { padding-bottom: calc(0.625rem + max(0.625rem, env(safe-area-inset-bottom, 0px))); } /* The hardcoded 0.5rem caption tier, +50% -> 0.75rem: credential lines, the two CTAs, Journal's Other Entries, scale numbers and captions. */ .titleblock.is-scale-large .brand-credentials span, .titleblock.is-scale-large .projects-cta span, .titleblock.is-scale-large .contact-cta, .titleblock.is-scale-large .journal-cta, .titleblock.is-scale-large .scale-bar__labels, .titleblock.is-scale-large .scale-row__caption { font-size: 0.75rem; } /* North point rides the same +50% as the captions around it. */ .titleblock.is-scale-large .north-point { width: 1.6875rem; height: 1.6875rem; } } /* ========================================================================== FULL-SCREEN MENU (.fsmenu) Opened by the brand row's hamburger. The footer now rests in its mini state and everything it used to hold lives here, per Liam. Phone-first: the rules below are the phone layout and the two min-width blocks at the end only widen it. Composition follows the reference Liam set - the mark with a rule running past it, the definition in Danish beside the English, navigation indented from the margin, and a right-hand buffer nothing crosses except the top-right control and the return arrow. No monospace anywhere, deliberately: per Liam it reads as machine-made and is not to appear on this site. ========================================================================== */ .fsmenu { position: fixed; inset: 0; z-index: 200; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* Edge to edge, per Liam - the inset left grey showing around the sheet. The sheet is the background now, so the overlay behind it never shows. */ background: var(--bg); padding: 0; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; /* Nav and the foot sit in from the margin; the buffer is the clear gutter on the right. Both widen with the viewport. */ --fsmenu-indent: 18%; /* Was a 12% right gutter. Removed per Liam; the bar and the return arrow that used to reach into it now simply sit at the margin. */ --fsmenu-buffer: 0px; /* The sheet's own inline padding, named so a section rule can cancel it and bleed to the screen edge while its text stays on the margin. Overridden at the wider tiers alongside .fsmenu__sheet's padding - keep them in step. */ --fsmenu-pad-x: 1.15rem; } .fsmenu.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s ease; } /* Liam: "the bottom of the viewable area should have a band that has that sort of 50% opacity and gets less visible toward the bottom like a gradient, this is to create language that people can scroll to reveal more." A fixed band across the foot of the open menu: the page's own ground at half strength where it meets the list, fading out downward, so the last row is read as continuing rather than ending. Fixed rather than absolute so it stays at the bottom of what is on screen while the sheet scrolls under it, and pointer-events:none so it never eats a tap on the row beneath. It goes away at the end of the scroll - .fsmenu.is-at-end, set by menu-scroll-hint.js - because a fade over the real last item is a lie about there being more. */ .fsmenu::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: clamp(3.5rem, 9vh, 6.5rem); pointer-events: none; z-index: 1; opacity: 1; transition: opacity 0.35s ease; background: linear-gradient(to top, color-mix(in srgb, var(--bg) 50%, transparent) 0%, color-mix(in srgb, var(--bg) 30%, transparent) 45%, transparent 100%); } .fsmenu.is-at-end::after { opacity: 0; } /* The same band at the top, per Liam, with one difference that matters: at the bottom the band is a hint that there is more below, so it fades the whole way. At the top it also has a job - the theme switch, Contact and Close sit on it - so it is OPAQUE across them and only begins to lose opacity below: "opaque on and above them and only start losing opacity a bit below them". It hangs off the bar rather than off .fsmenu, which is not a detail. .fsmenu__sheet carries a transform, so it is its own stacking context; a band painted on .fsmenu sits ABOVE the whole sheet and hid the very controls it was meant to sit behind. Inside the bar, at z-index -1, it paints behind the controls and over the rows scrolling past. The bar is sticky at the sheet's own top padding, so it stays exactly where it appears at the top of the menu - Liam: "i dont want them to move from where they appear now" - and the rows pass underneath the solid part instead of through it. --fsmenu-top-pad is that padding, named because each tier sets a different one and all three have to agree with .fsmenu__sheet's padding above. */ .fsmenu__sheet { --fsmenu-top-pad: calc(2.4rem + env(safe-area-inset-top)); } .fsmenu__bar { position: sticky; top: var(--fsmenu-top-pad); z-index: 2; } .fsmenu__bar::before { content: ""; position: absolute; z-index: -1; pointer-events: none; /* Up to the viewport's top edge, and out to both screen edges past the sheet's own inline padding. */ top: calc(-1 * var(--fsmenu-top-pad)); left: calc(-1 * (var(--fsmenu-pad-x) + env(safe-area-inset-left))); right: calc(-1 * (var(--fsmenu-pad-x) + env(safe-area-inset-right))); /* Solid to just past the controls, then the foot band's gradient, mirrored. */ --fsmenu-bar-clear: calc(var(--fsmenu-top-pad) + 1.5rem); height: calc(var(--fsmenu-bar-clear) + clamp(2.5rem, 6vh, 4.5rem)); background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) var(--fsmenu-bar-clear), color-mix(in srgb, var(--bg) 50%, transparent) calc(var(--fsmenu-bar-clear) + 1.2rem), transparent 100%); } /* The wordmark is a link home, per Liam: "clicking lykke logo in the menu takes you to home page". A block link so the whole mark is the target, and the rule under the word stays on the heading rather than moving to the anchor - it belongs to the composition, not to the link. */ .fsmenu__home { display: block; line-height: 0; } .fsmenu__sheet { min-height: 100%; background: var(--bg); border-radius: 0; /* Clears the notch and the dynamic island; Close sat in the no-go zone without it. Needs viewport-fit=cover in the page's viewport meta, or env() resolves to 0 and this silently does nothing. The base was 1.15rem, which relied on env() carrying the rest. In Safari it does (about 59px on an iPhone 15), but in an installed PWA - which is how Liam actually runs this - iOS lays the content out BELOW the status bar already and reports safe-area-inset-top as 0. The bar then had only 18px above it and sat right up against the island. 2.4rem is the floor that makes the unnotched and PWA cases breathe on their own; env() still adds on top wherever the browser genuinely hands us the inset. */ padding: calc(2.4rem + env(safe-area-inset-top)) calc(var(--fsmenu-pad-x) + env(safe-area-inset-right)) 0 calc(var(--fsmenu-pad-x) + env(safe-area-inset-left)); transform: translateY(12px); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); } .fsmenu.is-open .fsmenu__sheet { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .fsmenu, .fsmenu__sheet { transition: none; } } /* The bar and the return arrow are the only things allowed into the buffer. */ .fsmenu__bar { display: grid; grid-template-columns: 1fr auto 1fr; /* Centre, not baseline: two of the three items are now inline SVGs, whose baseline is their bottom edge - on a baseline grid they hung visibly low against Contact's cap height. */ align-items: center; margin-right: calc(-1 * var(--fsmenu-buffer)); } /* Both bar icons. Sized just over the bar's cap height so they read as peers of Contact rather than as decoration, and stroked at 1 unit in a 16-unit box so the line lands at the same hairline weight as the rules below once scaled. */ .fsmenu__icon { display: block; width: 0.95rem; height: 0.95rem; overflow: visible; } .fsmenu__bar a, .fsmenu__bar button { /* Was pointed at a --font-body token, which is only ever defined in styles.css - a file this page does not load. A bare var() on an undefined property is invalid at computed-value time, so the declaration did not fall back, it became `inherit`. It inherited the same face from body, so nothing ever looked wrong, which is precisely why it sat here dead. */ font-family: var(--font); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; } /* Qualified with .fsmenu__bar so it outranks `.fsmenu__bar a` above, which sets var(--ink). As a bare class it lost the cascade and Contact rendered in ink rather than the accent. */ /* Qualified with .fsmenu__bar, like .fsmenu__contact below it. The switch also carries .theme-toggle--inline, which sets justify-self:center to centre it over its caption in the footer - identical specificity to a bare .fsmenu__theme, so which one won came down to source order alone. It happened to land the right way; this makes it mean it. */ .fsmenu__bar .fsmenu__theme { grid-column: 1; justify-self: start; } .fsmenu__bar .fsmenu__contact { color: var(--fsmenu-accent); grid-column: 2; /* Liam: "Contact in the top of the menu needs to be in bold." It is the one thing in that bar you are being invited to press - the toggle is a setting and the cross is a way out - so it carries the weight. */ font-weight: 700; } .fsmenu__close { grid-column: 3; justify-self: end; } /* Hero: the mark, then a rule that carries on past it. That overhang is most of what makes the composition read as composed rather than centred. */ .fsmenu__hero { /* The measuring basis for the mark and the strapline below, so 1cqw is exactly 1% of the hero's own content width. Percentages could not do this job: .fsmenu__mark's % resolves against .fsmenu__word, which is itself 92% here and 78% on desktop, and a font-size has no percentage basis in width at all. Containment is inline-size only - the hero's width still comes from its parent, so nothing about the layout moves. */ container-type: inline-size; /* The reference holds a large, deliberate void between the bar and the display word - roughly three times the word's own cap height - and that emptiness is most of why the page reads as composed rather than merely top-aligned. Ours was 5vh, which just cleared the bar. Measured against the mark rather than guessed: LYKKE stands about 43px at this width, so ~3.3x is ~140px, which is what 16vh gives on a 393x852 iPhone 15. The clamp keeps it sane on a short landscape phone and stops it running away on a tall desktop. */ margin-top: clamp(3.5rem, 16vh, 8rem); } .fsmenu__word { margin: 0; line-height: 0; border-bottom: 1px solid var(--line-strong); width: 92%; padding-bottom: 0.55rem; } .fsmenu__mark { display: block; /* 50% of the sheet, per Liam. The first value is the fallback for anything without container queries - 54.3% of the 92%-wide rule is the same 50%, but only at this tier, which is exactly the fragility cqw removes. The rule itself still runs to 92%, so an overhang past the mark remains. */ width: 54.3%; width: 50cqw; height: auto; } .fsmenu__mark--dark { display: block; } .fsmenu__mark--light { display: none; } [data-theme="light"] .fsmenu__mark--dark { display: none; } [data-theme="light"] .fsmenu__mark--light { display: block; } .fsmenu__sub { /* Set to the width of the mark above it, per Liam, rather than to a size that happens to look close. Derived, not guessed. Type scales linearly, so the rendered width of this string is a constant multiple of its font-size; measured on the glyphs with a Range (the

is full-width and its box says nothing), "Architects & Builders" in Helvetica 500 with this tracking runs 9.4363x the font-size. To occupy 50cqw the size must therefore be 50 / 9.4363 = 5.299cqw, and because both sides of that are container units the two stay locked at every width - no per-breakpoint retuning. The em-based letter-spacing below is already inside the 9.4363: it was measured on the rendered text, and em tracking scales with the size. Change the string, the weight or the tracking and the multiple has to be re-measured. */ font-size: 1.18rem; font-size: 5.299cqw; margin: 0.6rem 0 0; font-weight: 500; /* Title case, per Liam - the words carry their own capitals from the markup. Uppercasing them made the line shout over the wordmark it sits under; the reference keeps everything below the display word quiet. Letter-spacing drops with it: tracking is a fix for all-caps, and on mixed case at this size it just loosens the words. */ letter-spacing: 0.01em; } .fsmenu__meta em, .fsmenu__da em { font-style: italic; } .fsmenu__meta { /* Up from 0.62rem, per Liam. */ font-size: 0.7rem; line-height: 1.85; color: var(--ink-soft); margin: 0.7rem 0 0; } /* Danish beside English, side by side even on a phone - the pairing is the reason this composition suits the practice, so it does not collapse. */ .fsmenu__pair { display: grid; /* Even halves, not `auto 1fr`: with the fuller Danish entry the auto column took nearly all the width and wrapped the English to one word a line. minmax(0,...) so a long word cannot blow the track out. */ /* Uneven, per Liam - the English takes the wider track. The Danish holds up because it simply wraps to shorter lines rather than being squeezed. */ grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 1.1rem; /* A real void between the English gloss of lykke and this pair, per Liam - the reference holds roughly a fifth of the screen empty there, and that pause is what stops the hero and the definition reading as one block. Was 6vh, which only separated them. */ margin-top: clamp(2.6rem, 13vh, 6.5rem); /* Bottoms level, per Liam - the taller column grows UPWARD from a shared bottom edge, which is how the reference sets its own two-language pair. `end` rather than `last baseline`: the Danish is emptied and refilled by menu-typewriter.js, and an empty element contributes no baseline, so a baseline-aligned row would shift as the first character lands. Geometric alignment holds still through the animation. The two columns carry slightly different sizes, so their half-leading differs by well under a pixel - see the measurement in the commit. */ align-items: end; } .fsmenu__da { /* Up from 0.56rem, per Liam. This also lands it on the same 0.62rem as .fsmenu__en beside it, so the pair now shares a size - which makes the bottom alignment exact rather than 0.11px out, since identical line-height and size means identical half-leading below the last baseline. */ font-size: 0.62rem; line-height: 1.95; color: var(--ink-soft); margin: 0; } .fsmenu__en { margin: 0; font-size: 0.62rem; line-height: 1.95; text-align: right; } .fsmenu__groups { display: flex; /* No rule above the nav groups, per Liam. The reference does not draw one there either - the arrows and the gap already separate the group from the definition, and a rule made it read as a table header. The rules that remain open the Project Index and Journal sections, where they are doing real work. padding-top stays: it was the rule's breathing room and is now the whole separation. */ padding-top: 1.1rem; gap: 0.9rem; margin-top: clamp(1.8rem, 6vh, 3rem); margin-left: var(--fsmenu-indent); flex-wrap: wrap; /* Ranged right, per Liam, as the reference does - the group sits against the right margin with the empty space opening to its left, rather than starting at the indent and trailing off. The indent above stays as a floor for narrow screens; justify-content only has space to distribute once the groups are narrower than the track. Only the ROW is pushed right. The words inside each group stay ranged left under their arrow, which is also what the reference does. */ justify-content: flex-end; } .fsmenu__group { display: flex; gap: 0.3rem; text-decoration: none; color: var(--ink); } /* Drawn, not typed. U+2198 and U+21B0 both carry emoji presentations that iOS picks by default, which rendered them as coloured emoji. An inline SVG takes the ink colour and cannot be substituted by a font. */ .fsmenu__arw { flex: 0 0 auto; width: 0.62rem; height: 0.62rem; margin-top: 0.24em; color: var(--ink-soft); } .fsmenu__arw svg { display: block; width: 100%; height: 100%; } .fsmenu__totop svg { display: block; width: 0.85rem; height: 0.85rem; } .fsmenu__words { font-size: 0.95rem; line-height: 1.16; letter-spacing: -0.015em; } .fsmenu__n { color: var(--fsmenu-accent); } .fsmenu__group:hover .fsmenu__words { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; } /* The rule sits BELOW the heading, per Liam, not above it. It is not a new rule - .fsmenu__rows already carried a border-top for exactly this, and it has been invisible since it was written because it was drawn against a --color-line token defined nowhere in the stylesheets these pages load. The fallback was bone white on a bone background, the same failure that hid every --color-line-strong rule. Repointed to --line (whose light value is the same 0.14 alpha the fallback was reaching for), which also brings back the hairline under each project row - the reference sets its lists as hairline tables, and that is what these rules were for. So this heading gives up its own border-top rather than gaining a second rule; a hairline above AND below would box the heading in, which the reference never does. */ .fsmenu__sec { font-size: 1.12rem; font-weight: 400; letter-spacing: -0.02em; /* Full bleed, per Liam. Negative margins cancel the sheet's inline padding so the rule reaches the screen edge; matching padding puts the words back on the margin. The reference does exactly this - its section rules cross the whole sheet while the text stays inset. 2px against the 1px between projects: "double weight compared to hairlines between projects". Same --line tone, so it reads as heavier rather than darker. */ border-bottom: 2px solid var(--line); margin: clamp(1.8rem, 6vh, 3rem) calc(-1 * (var(--fsmenu-pad-x) + env(safe-area-inset-right))) 0.8rem calc(-1 * (var(--fsmenu-pad-x) + env(safe-area-inset-left))); padding: 0 calc(var(--fsmenu-pad-x) + env(safe-area-inset-right)) 0.5rem calc(var(--fsmenu-pad-x) + env(safe-area-inset-left)); } .fsmenu__row { display: grid; grid-template-columns: 2.7rem 1fr; gap: 0.1rem 0.8rem; align-items: baseline; padding: 0.85rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); } /* Project and journal indices, per Liam: a darker blue and slightly bolder. The colour is now just --fsmenu-accent: Liam asked for one blue across the menu, so the deeper step became the accent rather than a second token. The weight is NOT font-weight. This site is set in Helvetica/Arial, which ships Regular and Bold and nothing between - measured, 400 and 500 render identically (93.23px for the same string) and 600 and 700 are both the same Bold (93.72px). So font-weight offers one step here, 400 to 700, which at 8.5px with this tracking is a shout rather than the "slightly" asked for. A hairline stroke in the text's own colour thickens the letterforms without touching their advance widths - so the indices stay a hair under a pixel wider than nothing, and the index column keeps the exact left alignment it had. Unsupported browsers simply render plain 400. */ .fsmenu__idx { font-size: 0.53rem; letter-spacing: 0.07em; color: var(--fsmenu-accent); -webkit-text-stroke: 0.25px currentColor; } .fsmenu__name { font-size: 0.82rem; } .fsmenu__alt { font-size: 0.62rem; color: var(--ink-soft); grid-column: 2; } .fsmenu__row:hover .fsmenu__name { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; } .fsmenu__totop { display: block; margin: clamp(1.5rem, 5vh, 2.4rem) calc(-1 * var(--fsmenu-buffer)) 0 auto; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font-size: 1.15rem; line-height: 1; } /* Aligned to the index, not to the indented nav: A, E and the Instagram mark sit in the same column as the project and journal indices, per Liam. */ .fsmenu__foot { display: grid; /* Three tracks, per Liam: "right aligned is correct but about 2 tab spaces from the letters only". The contact block was ranged right against a 1fr track, which stretched it to the full sheet width and flung the text to the far edge. The middle track is max-content instead, so it is exactly as wide as its widest line and sits just past the labels - the block still ranges right, but to its own edge rather than the page's. It has to be a shared TRACK rather than a width on each dd: sized individually every entry would end at a different x, and the whole point is that they share a right edge. The empty 1fr third track exists so the copyright, which spans 1 / -1, still runs the full width. */ grid-template-columns: 2.7rem max-content 1fr; gap: 0.55rem 0.8rem; margin: 1.4rem 0 0; padding: 1.3rem 0 calc(1.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-strong); align-items: start; } /* Explicit columns, because auto-placement across three tracks would put the second row's dt in the third column and unravel the whole list. */ .fsmenu__foot dt { grid-column: 1; font-size: 0.78rem; color: var(--ink-soft); } /* Ranged right, per Liam. Two things fall out of it: the address gets the whole column instead of being capped at wherever the email happens to end, so it fits on two lines again; and every right edge is flush, so no line can overhang the one below it. It also makes the earlier hidden-prefix indent redundant - "hello@studiolykke.au" and "@studiolykke.au" share a suffix, and two right-flush strings align on a shared suffix for free. The A / E / Instagram labels stay left in their own column. */ .fsmenu__foot dd { grid-column: 2; margin: 0; /* The same size as a journal title, per Liam - so the address, the email and the Instagram handle read as entries in the menu rather than as a tier of their own. They track .fsmenu__name at every breakpoint, which is why the 1000px step that used to push these to 1.12rem is gone: the titles do not grow there either. */ font-size: 0.82rem; line-height: 1.45; text-align: right; } .fsmenu__foot a { color: var(--fsmenu-accent); text-decoration: none; } .fsmenu__rights { grid-column: 1 / -1; /* Smaller, per Liam. 0.74rem made the copyright notice LARGER than the definitions above it (0.7rem) and the Danish pair (0.62rem) - the quietest text on the sheet was the loudest thing in the small tier. 0.56rem is an existing step in this menu rather than a new one, and puts it below everything it should sit under. */ font-size: 0.56rem; color: var(--ink-soft); margin: 1rem 0 0; } @media (min-width: 600px) { .fsmenu { --fsmenu-indent: 26%; } .fsmenu__sheet { --fsmenu-pad-x: 2rem; --fsmenu-top-pad: 1.6rem; padding: 1.6rem calc(2rem + var(--fsmenu-buffer)) 0 2rem; } .fsmenu__bar a, .fsmenu__bar button { font-size: 0.62rem; } .fsmenu__word { width: 88%; padding-bottom: 0.8rem; } /* .fsmenu__mark / .fsmenu__sub are container-unit sized and hold their 40cqw relationship through this tier's wider padding on their own. */ .fsmenu__meta, .fsmenu__da, .fsmenu__en { font-size: 0.95rem; } .fsmenu__words { font-size: 1.5rem; } .fsmenu__groups { gap: 1.6rem; } .fsmenu__sec { font-size: 1.5rem; } .fsmenu__row { grid-template-columns: 3.4rem 1fr 1fr; } .fsmenu__alt { grid-column: 3; text-align: right; } .fsmenu__name, .fsmenu__alt { font-size: 0.95rem; } .fsmenu__foot dd { font-size: 0.95rem; } } @media (min-width: 1000px) { .fsmenu { --fsmenu-indent: 22%; } .fsmenu__sheet { --fsmenu-pad-x: 3rem; --fsmenu-top-pad: 2.2rem; padding: 2.2rem calc(3rem + var(--fsmenu-buffer)) 0 3rem; } .fsmenu__word { width: 78%; padding-bottom: 1.1rem; } /* No .fsmenu__mark / .fsmenu__sub overrides here any more: both are in container units now and track the hero's width on their own, including through this tier's wider padding. The old pair (50% of a 78% rule, and 1.15rem) worked out to almost exactly the same 39% of the hero, so this is the proportion that was already here - now stated once. */ .fsmenu__pair { grid-template-columns: 1fr 1fr; } .fsmenu__words { font-size: 2rem; } .fsmenu__groups { gap: clamp(2rem, 6vw, 5rem); } .fsmenu__sec { font-size: 1.9rem; } .fsmenu__foot { grid-template-columns: 1.8rem max-content 1fr; } } /* ---- Sticky footer on included-footer pages ---- The landing page fits the viewport exactly (.sheet-body is position:fixed, overflow:hidden), so its footer is always on screen by construction. Every other page scrolls normally and injects the same markup into

as body's last child, so the footer sat at the very bottom of the document and only appeared after scrolling the whole page - per Liam, "footer is there but should be sticky". Sticky rather than fixed, deliberately: sticky keeps the element in normal flow, so it still reserves its own height at the end of the document and nothing has to be padded to clear it. A fixed footer would need every page to carry a matching padding-bottom that has to be kept in step with the footer's real height by hand - and the footer's height is not constant (the mini tab, the expanded rows, and the safe-area inset all change it). Targets .titleblock, not the [data-footer-include] placeholder: footer-include.js assigns to slot.outerHTML, which REPLACES the placeholder rather than filling it, so that attribute is gone from the DOM by the time any of this matters. The