/* ============================================================ Layz - design system A Swiss-minimal shell: pure black on white, a 12-column vw grid, 11px uppercase chrome, and large type left to speak. ============================================================ */ /* ---------------- tokens ---------------- */ :root { /* Pin the UA's own rendering (scrollbars, form controls, autofill) to the site's theme. Without this a visitor whose OS is in dark mode would get dark scrollbars framing a light page. */ color-scheme: light; --fg-rgb: 23, 23, 23; --bg-rgb: 255, 255, 255; --bg: rgb(var(--bg-rgb)); --fg: rgb(var(--fg-rgb)); --fg-50: rgba(var(--fg-rgb), .5); --fg-30: rgba(var(--fg-rgb), .3); --fg-14: rgba(var(--fg-rgb), .14); --line: rgba(var(--fg-rgb), .14); --line-soft: rgba(var(--fg-rgb), .08); --veil: rgba(var(--bg-rgb), .9); /* one family, four weights - as the reference does */ --ui: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; /* Column grid, everything in vw. Phone: 6 columns -> 6*col + 7*gutter = 100vw Tablet/desktop: 12 columns -> 12*col + 13*gutter = 100vw */ --col: 11.8vw; --gutter: 4.1vw; --unit: calc(var(--col) + var(--gutter)); --t-xs: 11px; --t-sm: 12px; --ease: cubic-bezier(.86, 0, .07, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.4, 0, .2, 1); --dur-fast: .2s; --dur: .5s; --dur-slow: .9s; --header-h: calc(var(--gutter) * 2 + 14px); } @media (min-width: 768px) { :root { --col: 7.2049vw; --gutter: 1.0417vw; } } @media (min-width: 1024px) { :root { --col: 7.7315vw; --gutter: .5556vw; } } [data-theme="dark"] { color-scheme: dark; --fg-rgb: 237, 237, 237; --bg-rgb: 10, 10, 10; } /* ---------------- reset ---------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); /* Painting the root explicitly stops 's background propagating to the canvas. Without a real backdrop to blend against, the header's mix-blend-mode: difference would render white-on-white. */ background: var(--bg); } body { background: var(--bg); color: var(--fg); font-family: var(--ui); font-size: var(--t-xs); font-weight: 400; line-height: 1.1; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color .4s var(--ease-io), color .4s var(--ease-io); } img, svg, video { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } ::selection { background: var(--fg); color: var(--bg); } :focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; } * { scrollbar-width: thin; scrollbar-color: var(--fg-30) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--fg-30); } ::-webkit-scrollbar-thumb:hover { background: var(--fg-50); } /* ---------------- grid helpers ---------------- */ .pad { padding: var(--gutter); } .pad-x { padding-inline: var(--gutter); } .pad-y { padding-block: var(--gutter); } .gap { gap: var(--gutter); } .span-1 { width: calc(var(--unit) * 1 - var(--gutter)); } .span-2 { width: calc(var(--unit) * 2 - var(--gutter)); } .span-3 { width: calc(var(--unit) * 3 - var(--gutter)); } .span-4 { width: calc(var(--unit) * 4 - var(--gutter)); } .span-5 { width: calc(var(--unit) * 5 - var(--gutter)); } .span-6 { width: calc(var(--unit) * 6 - var(--gutter)); } .span-7 { width: calc(var(--unit) * 7 - var(--gutter)); } .span-8 { width: calc(var(--unit) * 8 - var(--gutter)); } .span-9 { width: calc(var(--unit) * 9 - var(--gutter)); } .span-10 { width: calc(var(--unit) * 10 - var(--gutter)); } .off-1 { margin-left: calc(var(--unit) * 1); } .off-2 { margin-left: calc(var(--unit) * 2); } .off-3 { margin-left: calc(var(--unit) * 3); } .off-4 { margin-left: calc(var(--unit) * 4); } .row { display: flex; align-items: center; gap: var(--gutter); } .col { display: flex; flex-direction: column; } .spacer { flex: 1; } /* ---------------- typography ---------------- */ .label { font-size: var(--t-xs); font-weight: 500; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; } .label--soft { color: var(--fg-50); } .num { font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--fg-50); } .prose { font-size: var(--t-sm); line-height: 1.45; color: var(--fg-50); /* never allow the measure to exceed its container on a narrow screen */ max-width: min(58ch, 100%); } .big { font-weight: 400; line-height: .92; letter-spacing: -.03em; } .big-1 { font-size: clamp(2.6rem, 9vw, 9.5rem); } .big-2 { font-size: clamp(2rem, 5.4vw, 5rem); } .big-3 { font-size: clamp(1.5rem, 3vw, 2.6rem); } .hairline { height: 1px; background: var(--line); border: 0; width: 100%; } /* ---------------- header ---------------- */ .site-header { position: fixed; /* anchored to both edges rather than 100vw, which would count the scrollbar and push the bar a few pixels past the content */ top: 0; left: 0; right: 0; z-index: 52; padding: var(--gutter); mix-blend-mode: difference; color: #fff; } /* difference blending needs a light-on-dark source to invert correctly */ [data-theme="dark"] .site-header { color: #fff; } .site-header .bar { display: flex; align-items: center; gap: var(--gutter); width: 100%; } .brand { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; } /* the links sit on the column grid, spread across the right-hand block */ .nav { display: flex; align-items: center; gap: var(--gutter); margin-left: auto; width: calc(var(--unit) * 5 - var(--gutter)); justify-content: space-between; } .nav a { position: relative; font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; opacity: .999; transition: opacity var(--dur-fast) var(--ease-io); } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .header-actions { display: flex; align-items: center; gap: 12px; } .icon-btn { width: 14px; height: 14px; display: grid; place-items: center; color: inherit; opacity: .999; transition: transform .4s var(--ease-out); } .icon-btn:hover { transform: rotate(90deg); } .icon-btn svg { width: 12px; height: 12px; } [data-theme-toggle] .moon { display: none; } [data-theme="dark"] [data-theme-toggle] .moon { display: block; } [data-theme="dark"] [data-theme-toggle] .sun { display: none; } .nav-toggle { display: none; } /* fixed corner note, bottom right */ .corner { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 52; font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; mix-blend-mode: difference; color: #fff; } .corner a { position: relative; } .corner a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); } .corner a:hover::after { transform: scaleX(1); transform-origin: left; } /* ---------------- buttons ---------------- */ /* a hairline rectangle whose ink fills upward on hover */ .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .01em; color: var(--fg); border: 1px solid var(--fg); overflow: hidden; isolation: isolate; white-space: nowrap; transition: color .45s var(--ease); } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); } .btn:hover { color: var(--bg); } .btn:hover::before { transform: scaleY(1); } .btn svg { width: 11px; height: 11px; } .btn--solid { color: var(--bg); background: var(--fg); } .btn--solid::before { background: var(--bg); } .btn--solid:hover { color: var(--fg); } .btn--bare { padding: 0; border: 0; color: var(--fg-50); transition: color var(--dur-fast) var(--ease-io); } .btn--bare::before { display: none; } .btn--bare:hover { color: var(--fg); } /* underline-on-hover text action */ .ul-link { position: relative; font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; color: var(--fg-50); transition: color var(--dur-fast) var(--ease-io); white-space: nowrap; } .ul-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); } .ul-link:hover { color: var(--fg); } .ul-link:hover::after { transform: scaleX(1); transform-origin: left; } .ul-link.is-active { color: var(--fg); } .ul-link.is-active::after { transform: scaleX(1); transform-origin: left; } .ul-link .count { opacity: .5; margin-left: 5px; font-variant-numeric: tabular-nums; } .credit { color: var(--fg); } /* ---------------- inputs ---------------- */ .field { display: flex; align-items: center; gap: 8px; height: 26px; border-bottom: 1px solid var(--line); transition: border-color var(--dur-fast) var(--ease-io); } .field:focus-within { border-bottom-color: var(--fg); } .field input { flex: 1; min-width: 0; height: 100%; font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .01em; outline: none; } .field input::placeholder { color: var(--fg-30); text-transform: uppercase; } .field .clear { display: none; font-size: 13px; line-height: 1; color: var(--fg-30); transition: color var(--dur-fast); } .field.has-value .clear { display: block; } .field .clear:hover { color: var(--fg); } select.select { appearance: none; padding: 0 16px 0 0; font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; color: var(--fg-50); cursor: pointer; background: transparent; transition: color var(--dur-fast); } select.select:hover { color: var(--fg); } .select-wrap { position: relative; display: inline-flex; align-items: center; } .select-wrap::after { content: ""; position: absolute; right: 2px; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); color: var(--fg-30); pointer-events: none; } input[type="range"] { -webkit-appearance: none; appearance: none; height: 1px; background: var(--line); cursor: pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 7px; height: 7px; background: var(--fg); transition: transform var(--dur-fast) var(--ease-io); } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.5); } input[type="range"]::-moz-range-thumb { width: 7px; height: 7px; border: 0; border-radius: 0; background: var(--fg); } kbd { display: inline-block; padding: 2px 5px; font-family: inherit; font-size: 9px; font-weight: 500; text-transform: uppercase; color: var(--fg-50); border: 1px solid var(--line); } /* ---------------- custom cursor ---------------- */ .cursor-layer { position: fixed; top: 0; left: 0; /* above everything - the pointer must never slide under a panel, and the difference blend is what makes it legible over dark surfaces */ z-index: 10000; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .3s var(--ease-io); } .cursor-layer.is-live { opacity: 1; } .cursor-dot { position: relative; width: 8px; height: 8px; border: 1px solid #fff; transform: translate(-50%, -50%); transition: width .3s var(--ease-out), height .3s var(--ease-out), background-color .3s var(--ease-out); } .cursor-layer.is-hot .cursor-dot { width: 34px; height: 34px; } .cursor-label { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); padding-left: 12px; font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; } .cursor-label span { display: block; transform: translateY(105%); transition: transform .45s var(--ease-out); } .cursor-layer.is-hot .cursor-label span { transform: none; } @media (hover: none), (pointer: coarse) { .cursor-layer { display: none; } } /* Only hide the system pointer once the custom one is actually running, so a JS failure can never leave the page with no cursor at all. */ html.cursor-hidden, html.cursor-hidden *, html.cursor-hidden a, html.cursor-hidden button, html.cursor-hidden input, html.cursor-hidden select, html.cursor-hidden [contenteditable="true"] { cursor: none; } /* ---------------- intro loader ---------------- */ .intro { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; background: var(--bg); transition: opacity .5s var(--ease-io); } .intro.is-done { opacity: 0; pointer-events: none; } .intro-mark { width: 8px; height: 8px; border: 1px solid var(--fg); } .intro-mark i { display: block; width: 100%; height: 100%; background: var(--fg); transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease); } .intro.is-filling .intro-mark i { transform: scaleY(1); } .intro-count { position: absolute; right: var(--gutter); bottom: var(--gutter); font-size: var(--t-xs); font-weight: 500; color: var(--fg-50); font-variant-numeric: tabular-nums; } /* ---------------- page transition ---------------- */ @keyframes page-enter { 0% { clip-path: inset(100% 0 0 0); } 100% { clip-path: inset(0 0 0 0); } } @keyframes page-exit { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(.94); opacity: .25; } } body.page-in { animation: page-enter var(--dur-slow) var(--ease) both; } body.page-out { animation: page-exit .55s var(--ease) both; } /* ---------------- reveal ---------------- The hidden state is armed by JS (.reveal-armed), never by the attribute alone. Content is therefore visible by default: if the script fails, the observer misses an element, or clip-path is unsupported, the page still reads. Revealing simply removes the armed class - no specificity duel. */ [data-reveal].reveal-armed { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); will-change: opacity, transform; } [data-reveal="fade"].reveal-armed { transform: none; } [data-reveal="clip"].reveal-armed { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease); } /* line that draws itself in */ .rule-draw { height: 1px; background: var(--line); } .rule-draw.reveal-armed { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out); } @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Transform only, deliberately: if this animation ever fails to advance the links are merely offset, never invisible. */ @keyframes navIn { from { transform: translateY(18px); } to { transform: none; } } /* ---------------- consent ---------------- */ .consent { position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 9400; width: min(420px, calc(100vw - var(--gutter) * 2)); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .4s var(--ease-io), transform .5s var(--ease-out); } .consent.is-open { opacity: 1; transform: none; pointer-events: auto; } .consent-panel { padding: 20px; background: var(--bg); border: 1px solid var(--fg); box-shadow: 0 18px 40px rgba(0, 0, 0, .18); } .consent-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); } .consent h2 { font-size: var(--t-xs); margin-bottom: 10px; } .consent .prose { margin-bottom: 16px; } .consent-actions { display: flex; flex-wrap: wrap; gap: 8px; } .consent-actions .btn { flex: 1 1 auto; justify-content: center; } .consent-note { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); line-height: 1.6; } .consent-note .ul-link { margin-left: 8px; } .consent-note .ul-link:first-child { margin-left: 0; } .consent .prose + .prose { margin-top: 10px; } /* the confirm step carries a little more weight than the first view */ .consent-warn { position: relative; padding-left: 16px; } .consent-warn::before { content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 3px; background: var(--fg); } /* persistent notice after declining */ .consent-bar { position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 9300; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: min(560px, calc(100vw - var(--gutter) * 2)); padding: 12px 14px; background: var(--bg); border: 1px solid var(--line-strong, var(--fg)); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .4s var(--ease-io), transform .5s var(--ease-out); } .consent-bar.is-open { opacity: 1; transform: none; pointer-events: auto; } .consent-bar-x { margin-left: auto; font-size: 15px; line-height: 1; color: var(--fg-30); transition: color var(--dur-fast); } .consent-bar-x:hover { color: var(--fg); } @media (max-width: 620px) { .consent-bar { left: 0; right: 0; bottom: 0; max-width: none; border-inline: 0; border-bottom: 0; } } @media (max-width: 620px) { .consent { left: 0; right: 0; bottom: 0; width: auto; } .consent-panel { border-inline: 0; border-bottom: 0; } } /* ---------------- toast ---------------- */ .toast { position: fixed; left: 50%; bottom: var(--gutter); z-index: 9600; transform: translate(-50%, 14px); padding: 10px 16px; font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; color: var(--bg); background: var(--fg); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-io), transform .5s var(--ease-out); } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* ---------------- overlay panel ---------------- */ .overlay { position: fixed; inset: 0; z-index: 60; background: var(--veil); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-io); overflow-y: auto; overscroll-behavior: contain; } .overlay.is-open { opacity: 1; pointer-events: auto; } .overlay-close { position: fixed; top: var(--gutter); right: var(--gutter); z-index: 62; font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; color: var(--fg-50); transition: color var(--dur-fast); } .overlay-close:hover { color: var(--fg); } /* ---------------- sections ---------------- */ .section { padding-block: clamp(60px, 11vh, 140px); } .section--tight { padding-block: clamp(40px, 7vh, 90px); } .section-head { display: flex; align-items: flex-start; gap: var(--gutter); margin-bottom: clamp(24px, 4vh, 54px); } .section-head .idx { flex: none; width: var(--col); } .section-head .ttl { flex: 1; min-width: 0; } /* numbered list rows - the reference's signature element */ .rows { border-top: 1px solid var(--line); } .rows-item { position: relative; display: flex; align-items: center; gap: var(--gutter); width: 100%; padding: 0 var(--gutter); min-height: 11vh; text-align: left; border-bottom: 1px solid var(--line); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-io), padding-left .35s var(--ease-out), color var(--dur-fast) var(--ease-io); } .rows-item:hover { background: var(--fg); color: var(--bg); padding-left: calc(var(--gutter) * 2); } .rows-item:hover .num { color: rgba(var(--bg-rgb), .55); } /* ---------------- footer ---------------- */ .site-footer { border-top: 1px solid var(--line); padding: var(--gutter); margin-top: clamp(60px, 12vh, 140px); } .footer-top { display: flex; align-items: flex-start; gap: var(--gutter); flex-wrap: wrap; padding-bottom: clamp(40px, 9vh, 110px); } .footer-mark { font-size: clamp(3.5rem, 17vw, 15rem); font-weight: 400; line-height: .82; letter-spacing: -.045em; text-transform: uppercase; } .footer-col h4 { margin-bottom: 12px; } .footer-col li + li { margin-top: 7px; } .footer-bottom { display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); color: var(--fg-50); } /* ---------------- utility ---------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--gutter); top: -60px; z-index: 9700; padding: 8px 14px; color: var(--bg); background: var(--fg); transition: top .3s var(--ease-io); } .skip-link:focus { top: var(--gutter); } /* Font previews. These must NEVER be hidden while glyphs load: a 266-row list gated on a network event renders as a blank page whenever Google Fonts is slow, and the row's own name is the preview. font-display: swap already paints the fallback, so we only settle the colour once the real face arrives. */ .fnt { opacity: 1; transition: color .35s var(--ease-io); } .empty { padding: clamp(50px, 14vh, 130px) var(--gutter); text-align: center; border: 1px solid var(--line); } .empty h3 { font-size: 1rem; font-weight: 400; margin-bottom: 8px; } /* ---------------- responsive ---------------- */ @media (max-width: 760px) { /* 12px reads better than 11 on a phone, and gives controls a real target */ :root { --t-xs: 12px; --t-sm: 13.5px; } .nav-toggle { display: grid; } /* Push the theme + menu buttons to the right edge. On desktop .nav carries the auto margin, but on mobile .nav is fixed and leaves the flex flow. */ .header-actions { margin-left: auto; gap: 16px; } .icon-btn { width: 20px; height: 20px; } .icon-btn svg { width: 16px; height: 16px; } /* The panel is shown/hidden outright - no transition gates whether the menu is usable. Only the links animate, and with `backwards` fill so a stalled or unsupported animation still leaves them in their normal visible state. */ .nav { position: fixed; inset: 0; width: auto; margin-left: 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: var(--gutter); background: var(--bg); color: var(--fg); display: none; } .site-header.is-open .nav { display: flex; } .site-header.is-open .nav a { animation: navIn .45s var(--ease-out) backwards; } .site-header.is-open .nav a:nth-child(1) { animation-delay: .02s; } .site-header.is-open .nav a:nth-child(2) { animation-delay: .07s; } .site-header.is-open .nav a:nth-child(3) { animation-delay: .12s; } .site-header.is-open .nav a:nth-child(4) { animation-delay: .17s; } .nav a { font-size: 2rem; font-weight: 400; letter-spacing: -.02em; padding: 6px 0; } .nav a::after { display: none; } .nav a[aria-current="page"] { opacity: .45; } /* The open menu lives inside a difference-blended header, which would invert the whole panel. Drop the blend while it is open. */ .site-header.is-open { mix-blend-mode: normal; color: var(--fg); } .rows-item { min-height: 84px; } .footer-top { flex-direction: column; } .corner { display: none; } /* comfortable touch targets */ .btn { padding: 13px 18px; } .ul-link { padding-block: 4px; } select.select { padding-block: 4px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } .rule-draw { transform: scaleX(1) !important; } .fnt { opacity: 1; } .cursor-layer { display: none; } .intro { display: none; } }