/* MF portfolio site. Values follow MF-Design-System (tokens.json); like every MF page, this file carries its own copy so the site deploys standalone. Never pure black or white: neutrals stay tinted. */ /* ---------------------------------------------------------------- fonts Roles (see README): Caps = titles, nav and display, Text = reading and UI, Condensed = labels and editorial headings, Mono = numbers and data. */ /* every MF family complete: 7 weights x upright and italic, copied from the design system */ @font-face{font-family:"MF Caps";src:url("/fonts/MFCaps-Thin.woff2") format("woff2");font-weight:100;font-display:swap} @font-face{font-family:"MF Caps";src:url("/fonts/MFCaps-ThinItalic.woff2") format("woff2");font-weight:100;font-style:italic;font-display:swap} @font-face{font-family:"MF Caps";src:url("/fonts/MFCaps-Light.woff2") format("woff2");font-weight:300;font-display:swap} @font-face{font-family:"MF Caps";src:url("/fonts/MFCaps-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:"MF Caps";src:url("/fonts/MFCaps-Regular.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"MF Caps";src:url("/fonts/MFCaps-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"MF Caps";src:url("/fonts/MFCaps-Medium.woff2") format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"MF Caps";src:url("/fonts/MFCaps-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap} @font-face{font-family:"MF Caps";src:url("/fonts/MFCaps-Bold.woff2") format("woff2");font-weight:700;font-display:swap} @font-face{font-family:"MF Caps";src:url("/fonts/MFCaps-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap} @font-face{font-family:"MF Caps";src:url("/fonts/MFCaps-Heavy.woff2") format("woff2");font-weight:800;font-display:swap} @font-face{font-family:"MF Caps";src:url("/fonts/MFCaps-HeavyItalic.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap} @font-face{font-family:"MF Caps";src:url("/fonts/MFCaps-Black.woff2") format("woff2");font-weight:900;font-display:swap} @font-face{font-family:"MF Caps";src:url("/fonts/MFCaps-BlackItalic.woff2") format("woff2");font-weight:900;font-style:italic;font-display:swap} @font-face{font-family:"MF Text";src:url("/fonts/MFText-Thin.woff2") format("woff2");font-weight:100;font-display:swap} @font-face{font-family:"MF Text";src:url("/fonts/MFText-ThinItalic.woff2") format("woff2");font-weight:100;font-style:italic;font-display:swap} @font-face{font-family:"MF Text";src:url("/fonts/MFText-Light.woff2") format("woff2");font-weight:300;font-display:swap} @font-face{font-family:"MF Text";src:url("/fonts/MFText-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:"MF Text";src:url("/fonts/MFText-Regular.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"MF Text";src:url("/fonts/MFText-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"MF Text";src:url("/fonts/MFText-Medium.woff2") format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"MF Text";src:url("/fonts/MFText-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap} @font-face{font-family:"MF Text";src:url("/fonts/MFText-Bold.woff2") format("woff2");font-weight:700;font-display:swap} @font-face{font-family:"MF Text";src:url("/fonts/MFText-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap} @font-face{font-family:"MF Text";src:url("/fonts/MFText-Heavy.woff2") format("woff2");font-weight:800;font-display:swap} @font-face{font-family:"MF Text";src:url("/fonts/MFText-HeavyItalic.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap} @font-face{font-family:"MF Text";src:url("/fonts/MFText-Black.woff2") format("woff2");font-weight:900;font-display:swap} @font-face{font-family:"MF Text";src:url("/fonts/MFText-BlackItalic.woff2") format("woff2");font-weight:900;font-style:italic;font-display:swap} @font-face{font-family:"MF Condensed";src:url("/fonts/MFCondensed-Thin.woff2") format("woff2");font-weight:100;font-display:swap} @font-face{font-family:"MF Condensed";src:url("/fonts/MFCondensed-ThinItalic.woff2") format("woff2");font-weight:100;font-style:italic;font-display:swap} @font-face{font-family:"MF Condensed";src:url("/fonts/MFCondensed-Light.woff2") format("woff2");font-weight:300;font-display:swap} @font-face{font-family:"MF Condensed";src:url("/fonts/MFCondensed-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:"MF Condensed";src:url("/fonts/MFCondensed-Regular.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"MF Condensed";src:url("/fonts/MFCondensed-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"MF Condensed";src:url("/fonts/MFCondensed-Medium.woff2") format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"MF Condensed";src:url("/fonts/MFCondensed-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap} @font-face{font-family:"MF Condensed";src:url("/fonts/MFCondensed-Bold.woff2") format("woff2");font-weight:700;font-display:swap} @font-face{font-family:"MF Condensed";src:url("/fonts/MFCondensed-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap} @font-face{font-family:"MF Condensed";src:url("/fonts/MFCondensed-Heavy.woff2") format("woff2");font-weight:800;font-display:swap} @font-face{font-family:"MF Condensed";src:url("/fonts/MFCondensed-HeavyItalic.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap} @font-face{font-family:"MF Condensed";src:url("/fonts/MFCondensed-Black.woff2") format("woff2");font-weight:900;font-display:swap} @font-face{font-family:"MF Condensed";src:url("/fonts/MFCondensed-BlackItalic.woff2") format("woff2");font-weight:900;font-style:italic;font-display:swap} @font-face{font-family:"MF Mono";src:url("/fonts/MFMono-Thin.woff2") format("woff2");font-weight:100;font-display:swap} @font-face{font-family:"MF Mono";src:url("/fonts/MFMono-ThinItalic.woff2") format("woff2");font-weight:100;font-style:italic;font-display:swap} @font-face{font-family:"MF Mono";src:url("/fonts/MFMono-Light.woff2") format("woff2");font-weight:300;font-display:swap} @font-face{font-family:"MF Mono";src:url("/fonts/MFMono-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:"MF Mono";src:url("/fonts/MFMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"MF Mono";src:url("/fonts/MFMono-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"MF Mono";src:url("/fonts/MFMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"MF Mono";src:url("/fonts/MFMono-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap} @font-face{font-family:"MF Mono";src:url("/fonts/MFMono-Bold.woff2") format("woff2");font-weight:700;font-display:swap} @font-face{font-family:"MF Mono";src:url("/fonts/MFMono-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap} @font-face{font-family:"MF Mono";src:url("/fonts/MFMono-Heavy.woff2") format("woff2");font-weight:800;font-display:swap} @font-face{font-family:"MF Mono";src:url("/fonts/MFMono-HeavyItalic.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap} @font-face{font-family:"MF Mono";src:url("/fonts/MFMono-Black.woff2") format("woff2");font-weight:900;font-display:swap} @font-face{font-family:"MF Mono";src:url("/fonts/MFMono-BlackItalic.woff2") format("woff2");font-weight:900;font-style:italic;font-display:swap} @font-face{font-family:"MF Readout";src:url("/fonts/MFReadout-Thin.woff2") format("woff2");font-weight:100;font-display:swap} @font-face{font-family:"MF Readout";src:url("/fonts/MFReadout-ThinItalic.woff2") format("woff2");font-weight:100;font-style:italic;font-display:swap} @font-face{font-family:"MF Readout";src:url("/fonts/MFReadout-Light.woff2") format("woff2");font-weight:300;font-display:swap} @font-face{font-family:"MF Readout";src:url("/fonts/MFReadout-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:"MF Readout";src:url("/fonts/MFReadout-Regular.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"MF Readout";src:url("/fonts/MFReadout-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"MF Readout";src:url("/fonts/MFReadout-Medium.woff2") format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"MF Readout";src:url("/fonts/MFReadout-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap} @font-face{font-family:"MF Readout";src:url("/fonts/MFReadout-Bold.woff2") format("woff2");font-weight:700;font-display:swap} @font-face{font-family:"MF Readout";src:url("/fonts/MFReadout-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap} @font-face{font-family:"MF Readout";src:url("/fonts/MFReadout-Heavy.woff2") format("woff2");font-weight:800;font-display:swap} @font-face{font-family:"MF Readout";src:url("/fonts/MFReadout-HeavyItalic.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap} @font-face{font-family:"MF Readout";src:url("/fonts/MFReadout-Black.woff2") format("woff2");font-weight:900;font-display:swap} @font-face{font-family:"MF Readout";src:url("/fonts/MFReadout-BlackItalic.woff2") format("woff2");font-weight:900;font-style:italic;font-display:swap} /* ---------------------------------------------------------------- tokens */ :root{ color-scheme:dark; /* Color comes from css/colors.css (the MF palette, Chromatica, copied from the design system): ground, surface, raised, line, text, text-strong, muted, faint, focus, the accents (cobalt, azure, lagoon, indigo, violet, plum, mauve, pink, rose, acid, acid-deep), the splash inks, and a ramp per family, ---. Below are the site's own blends of them. */ /* lagoon into azure and back, every stop at Y 0.310 like the MF inks */ --spectrum-mf:linear-gradient(90deg,var(--lagoon-310),var(--azure-310),var(--lagoon-310)); /* the same sweep lighter, for gradient text */ --spectrum-mf-hi:linear-gradient(90deg,var(--lagoon-550),var(--azure-550),var(--lagoon-550)); /* metallic platinum for the home line, from the ice family (the halo's chrome): pale highlights and darker bands, so it reads as polished metal */ --platinum-metal:linear-gradient(90deg,var(--ice-420) 0%,var(--ice-700) 18%,var(--ice-850) 26%,var(--ice-550) 38%,var(--ice-310) 52%,var(--ice-700) 66%,var(--ice-850) 74%,var(--ice-550) 86%,var(--ice-420) 100%); --font-caps:"MF Caps",ui-sans-serif,system-ui,sans-serif; --font-text:"MF Text",ui-sans-serif,system-ui,sans-serif; --font-condensed:"MF Condensed","Arial Narrow",ui-sans-serif,sans-serif; --font-code:"MF Mono",ui-monospace,Menlo,monospace; /* golden-ratio scales */ --space-card:12.58px; --space-gutter:16px; --space-stack:20.35px; --space-block:25.89px; --space-gutter-max:41.89px; --space-section:67.78px; --radius-xs:3.06px; --radius-sm:4.94px; --radius-md:8px; --radius-lg:12.94px; --radius-xl:20.94px; --radius-pill:999px; --gutter:clamp(var(--space-gutter),4vw,var(--space-gutter-max)); --measure:68ch; --header-h:72px; /* Ultrathin material, after the Precision Care navbar, tinted with MF ground */ --material-ultrathin:color-mix(in oklch, var(--ground) 52%, transparent); --material-thick:color-mix(in oklch, var(--ground) 94%, transparent); --material-blur:blur(24px) saturate(180%); --material-edge:color-mix(in oklch, var(--text) 13%, transparent); /* the home line's pink-white ("Color That Heightens the Senses."): MF Splash Blend's collapsed core */ --title-ink:rgb(255 238 255); /* Thin glass: the scroll button's material layer, shared by the navbar. A light tint and a soft blur, so more of what's behind shows through */ --material-glass:color-mix(in oklch, var(--ground) 8%, transparent); --material-glass-blur:blur(4px) saturate(160%); /* membrane: the navbar's and the scroll button's fill. Semi-translucent, so the lattice and the page show through it, softened like tissue under a cover slip, with a faint lagoon cast toward the top edge, the way light gathers in a membrane */ --membrane:radial-gradient(120% 160% at 50% 0%,color-mix(in oklch, var(--lagoon-220) calc(14% * var(--glow, 1)), transparent),transparent 70%), color-mix(in oklch, var(--raised) 15%, transparent); --membrane-blur:blur(3px) saturate(150%); } /* The default look draws its gradients from the Chromatica palette; the try-on looks (css/looks.css) keep the 24-hue scales of css/palette.css. */ :root:not([data-look]){--spectrum-ink:var(--spectrum-mf);--spectrum-hi:var(--spectrum-mf-hi)} /* ---------------------------------------------------------------- base */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 24px)} body{ margin:0;min-height:100vh;min-height:100svh; background:var(--ground);color:var(--text); font:400 17px/1.55 var(--font-text); font-variant-numeric:tabular-nums; hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal; -webkit-font-smoothing:antialiased; } /* Background: css/background.css, generated by tools/background.js */ a{color:inherit} img{max-width:100%;display:block} :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-xs)} ::selection{background:color-mix(in oklch, var(--lagoon) 70%, transparent);color:var(--text-strong)} .wrap{width:min(1240px,100% - 2*var(--gutter));margin-inline:auto} .skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--raised);padding:8px 12px;border-radius:var(--radius-md)} .skip:focus{left:8px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* gradient text: the color paints, the letterform draws */ .spectrum{ background:var(--spectrum-hi);background-size:200% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:spectrum-drift 24s linear infinite; } .spectrum-ink{background:var(--spectrum-ink);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:spectrum-drift 24s linear infinite} /* the base gradient for the try-on looks (the default look overrides it with platinum): amber through gold to yellow and back, so the drift loops seamlessly */ .spectrum-gold{background:linear-gradient(90deg,var(--ink-75),var(--hi-75),var(--hi-90),var(--hi-105),var(--hi-90),var(--hi-75),var(--ink-75));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:spectrum-drift 24s linear infinite} @keyframes spectrum-drift{to{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){.spectrum,.spectrum-ink,.spectrum-gold{animation:none}} /* ---------------------------------------------------------------- header Same build as the Precision Care navbar: a floating bar inset on every side, ultrathin material, hairline edge; links collapse into a CSS-only menu under 900px. Corners are circular (MF), not squircle. */ /* styled like the home scroll button (Ghost, focused): a raised fill inside a 2px lagoon ring, over a layer of thin glass a little larger than the bar, and the ring lit as a light source. The fill and glass sit behind the content (the fixed header is its own stacking context) */ /* inset from the screen's edges by more than its glow reaches (the ring's halo and bloom, about 26px), so the light isn't cut off at the top or sides */ :root{--nav-inset:28px} @media (max-width:640px){:root{--nav-inset:22px}} header.site{position:fixed;top:var(--nav-inset);left:var(--nav-inset);right:var(--nav-inset);z-index:50;background:transparent;border:0;border-radius:var(--radius-lg); outline:2px solid var(--focus);outline-offset:2px} header.site::before,header.site::after{content:"";position:absolute;pointer-events:none} header.site::before{inset:-4px;z-index:-2;border-radius:calc(var(--radius-lg) + 4px); background:var(--material-glass);-webkit-backdrop-filter:var(--material-glass-blur);backdrop-filter:var(--material-glass-blur); box-shadow:inset 0 0 0 1px var(--material-edge), 0 0 6px 1px color-mix(in oklch, var(--focus) calc(70% * var(--glow, 1)), transparent), 0 0 18px 4px color-mix(in oklch, var(--focus) calc(38% * var(--glow, 1)), transparent), 0 0 44px 10px color-mix(in oklch, var(--focus) calc(16% * var(--glow, 1)), transparent), inset 0 0 8px color-mix(in oklch, var(--focus) calc(45% * var(--glow, 1)), transparent)} header.site::after{inset:0;z-index:-1;border-radius:var(--radius-lg);background:var(--membrane);-webkit-backdrop-filter:var(--membrane-blur);backdrop-filter:var(--membrane-blur);box-shadow:inset 0 0 0 1px var(--line),inset 0 0 14px color-mix(in oklch, var(--focus) calc(22% * var(--glow, 1)), transparent)} /* the navbar's membrane is thinner than the scroll button's: almost clear, the page and the lattice seen through it nearly as they are. Next to no tint, a 10px blur, and its inner glows pulled back to the rim, so nothing fogs the middle of the bar */ header.site::before{-webkit-backdrop-filter:none;backdrop-filter:none; box-shadow:inset 0 0 0 1px var(--material-edge), 0 0 6px 1px color-mix(in oklch, var(--focus) calc(70% * var(--glow, 1)), transparent), 0 0 18px 4px color-mix(in oklch, var(--focus) calc(38% * var(--glow, 1)), transparent), 0 0 44px 10px color-mix(in oklch, var(--focus) calc(16% * var(--glow, 1)), transparent), inset 0 0 4px color-mix(in oklch, var(--focus) calc(35% * var(--glow, 1)), transparent)} header.site::after{background:radial-gradient(120% 160% at 50% 0%,color-mix(in oklch, var(--lagoon-220) calc(8% * var(--glow, 1)), transparent),transparent 60%), color-mix(in oklch, var(--raised) 4%, transparent); -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%); box-shadow:inset 0 0 0 1px var(--line),inset 0 0 5px color-mix(in oklch, var(--focus) calc(14% * var(--glow, 1)), transparent)} /* js/nav.js hides it while scrolling down and brings it back on the way up, or when the scrollbar is hovered or grabbed */ header.site{transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .38s ease} header.site.is-hidden{transform:translateY(calc(-100% - var(--nav-inset) - 6px));opacity:0} .bar{display:flex;align-items:center;gap:2rem;box-sizing:border-box;height:48px;padding:0 0 0 13px} /* the logo's top-left corner sits on the bar's diagonal, set by eye: the M's ink starts 10.5px below the bar's top edge (a 30px logo centred in the 48px bar) and 14.5px in from its left (13px padding plus 1.5px inside the logo's own box). Geometrically equal insets looked too far left, because the bar's rounded corner pulls its left edge visually inward, so the logo sits 4px further right */ .mark{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;line-height:1} .mark svg{height:30px;width:auto;display:block;overflow:visible} /* the MF mark as a membrane: no fill, an outline in the primary text color (the home line's pink-white) with a soft lagoon glow. The stroke is screen pixels, whatever the mark's scale */ .mark-line{fill:none;stroke:var(--title-ink);stroke-width:1.4px;stroke-linejoin:round;vector-effect:non-scaling-stroke} .mark svg{filter:drop-shadow(0 0 2px color-mix(in oklch, var(--lagoon-420) calc(100% * var(--glow, 1)), transparent)) drop-shadow(0 0 7px color-mix(in oklch, var(--lagoon-220) calc(60% * var(--glow, 1)), transparent))} .mark-word{font:800 .78rem/1.05 var(--font-caps);letter-spacing:.06em;color:var(--muted)} .mark-word b{display:block;color:var(--text);font-weight:800} /* the nav is part of the bar: its items are full-height columns running out to the bar's rounded right end, with no boxes, strokes or dividers. Labels in MF Condensed caps. Hovered, focused, or (Projects) open, a column fills solid with the cool white, its label dark; the last column's fill takes the bar's corner */ .desk{margin-left:auto;display:flex;align-self:stretch} /* the chroma control: five chromatophores in the middle of the bar, bare (no panel), each step (0 to 3, then MAXX) a disc of one size, its numeral a small label just to its right. Off, a disc is a fine azure ring; the chosen one opens, a glowing inner ring in bright azure. Discs and labels all sit on one centre line. It sets the whole site's chroma (js/nav.js -> js/chroma.js), so its own color greys out at 0 like everything else */ .chroma-ctl{display:flex;align-items:center} /* the steps are the group that's centred; VALUE hangs off its left, outside the centring */ .chroma-steps{position:relative;display:flex;align-items:center;gap:36px} .chroma-ctl button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;align-items:center;gap:10px;height:44px;padding:0 2px;border-radius:6px; font:600 .68rem/1 var(--font-condensed);letter-spacing:.14em;color:var(--muted);transition:color .2s ease} .chroma-ctl button::before,.chroma-ctl button::after{content:"";border-radius:50%;box-sizing:border-box} .chroma-ctl button::before{flex:none;width:var(--d);height:var(--d);border:1px solid var(--azure-420);transition:border-color .2s ease,box-shadow .2s ease} /* the inner ring laid over its disc, a whole number of pixels in from it on every side */ .chroma-ctl button::after{position:absolute;left:calc(2px + (var(--d) - var(--i)) / 2);top:calc((44px - var(--i)) / 2);width:var(--i);height:var(--i);border:1px solid transparent;transition:border-color .2s ease,filter .2s ease} @media(min-resolution:2dppx){.chroma-ctl button::after{border-width:1.5px}} /* 1.5px only where it's whole device pixels */ /* every disc the same size; disc and inner ring both even, so the ring sits the same whole number of pixels in from its disc all round and the two are truly concentric */ .chroma-ctl button{--d:26px;--i:14px} .chroma-label{position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:44px;white-space:nowrap;font:600 .72rem/1 var(--font-condensed);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} /* names what the steps set: the color theme's chroma value; centred on the discs */ .chroma-ctl button:hover{color:var(--text)} .chroma-ctl button:hover::before{border-color:color-mix(in oklch, var(--azure-420), var(--text-strong) 30%)} .chroma-ctl button[aria-pressed="true"]{color:color-mix(in oklch, var(--azure-420), var(--text-strong) 30%)} .chroma-ctl button[aria-pressed="true"]::before{box-shadow:0 0 8px color-mix(in oklch, var(--lagoon-420) calc(45% * var(--glow, 1)), transparent)} .chroma-ctl button[aria-pressed="true"]::after{border-color:color-mix(in oklch, var(--azure-420) 80%, transparent); filter:drop-shadow(0 0 4px color-mix(in oklch, var(--lagoon-420) calc(100% * var(--glow, 1)), transparent)) brightness(1.4)} .chroma-ctl button:focus-visible{outline:2px solid var(--focus);outline-offset:1px} .chroma-ctl.in-bar{flex:1;justify-content:center} /* fills the space between the logo and the columns, its steps centred in it */ /* with room to spare, centred on the bar itself */ @media(min-width:1560px){.chroma-ctl.in-bar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex:none}} .chroma-ctl.in-panel{margin:.6rem 1rem .4rem} .chroma-ctl.in-panel .chroma-steps{flex:1;justify-content:space-between;gap:6px} .chroma-ctl.in-panel .chroma-label{position:static;transform:none;margin-right:4px} /* on narrow desktops the steps close up, and then VALUE goes, so the bar still holds the logo, the control and the columns without them touching */ @media(max-width:1280px){.chroma-ctl.in-bar .chroma-steps{gap:22px}.chroma-ctl.in-bar .chroma-label{margin-right:32px}} @media(max-width:1150px){.chroma-ctl.in-bar .chroma-steps{gap:14px}.chroma-ctl.in-bar .chroma-label{margin-right:24px}} @media(max-width:1120px){.chroma-ctl.in-bar .chroma-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.chroma-ctl.in-bar .chroma-steps{gap:10px}.chroma-ctl.in-bar button{gap:7px}} @media(max-width:900px){.chroma-ctl.in-bar{display:none}} @media(min-width:901px){.chroma-ctl.in-panel{display:none}} .desk > a,.nav-drop > summary{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;width:172px;height:100%;box-sizing:border-box; text-decoration:none;font:600 1.4rem/1 var(--font-condensed);letter-spacing:.1em;text-transform:uppercase;color:var(--text);background:transparent; transition:color .15s ease,background-color .15s ease} .desk > a:last-child{border-radius:0 var(--radius-lg) var(--radius-lg) 0} /* hovered with a mouse, the label is a hole cut through the column and the bar (js/nav.js masks the header with the letters); the label itself goes clear. The chevron stays dark */ .desk > a.is-knocked:hover,.nav-drop > summary.is-knocked:hover{color:transparent} .nav-drop > summary.is-knocked:hover i{color:var(--ground)} /* the hollow letters' fill: frosted glass, a slight blur of what shows through (1.75px: the strokes are about 2px wide, and past about 2px the blur pulls in the ice around them and washes them out) */ .nav-frost{position:fixed;z-index:51;pointer-events:none;visibility:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-backdrop-filter:blur(1.75px);backdrop-filter:blur(1.75px); background:color-mix(in oklch, var(--lagoon) calc(38% * var(--glow, 1)), transparent)} /* a translucent lagoon tint over the blur: the ring's color, and contrast against the ice */ .nav-frost.is-on{visibility:visible} .desk > a:hover,.desk > a:focus-visible,.nav-drop > summary:hover,.nav-drop > summary:focus-visible,.nav-drop[open] > summary{background:var(--text-strong);color:var(--ground);outline:none} .menu{margin-left:auto;display:none;position:static} /* the Projects dropdown: the button opens a panel of every project, grouped under its category (each category links to its page), in the menu's thick material */ .nav-drop{position:relative;display:flex} .nav-drop > summary{list-style:none;cursor:pointer;gap:.5rem} .nav-drop > summary::-webkit-details-marker{display:none} .nav-drop > summary i{width:.42em;height:.42em;border:solid currentColor;border-width:0 .12em .12em 0;transform:translateY(-25%) rotate(45deg);transition:transform .2s ease} .nav-drop[open] > summary i{transform:translateY(20%) rotate(-135deg)} .drop-panel{position:absolute;right:0;top:calc(100% + var(--space-card));min-width:320px;padding:.5rem 0;background:var(--material-thick);border:1px solid var(--material-edge);border-radius:var(--radius-lg); -webkit-backdrop-filter:var(--material-blur);backdrop-filter:var(--material-blur);box-shadow:0 18px 50px color-mix(in oklch, var(--ground) 70%, transparent)} .drop-group + .drop-group{border-top:1px solid var(--line);margin-top:.35rem;padding-top:.35rem} .drop-cat,.panel-cat{display:block;padding:.55rem 1.2rem .35rem;font:700 .7rem/1 var(--font-condensed);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none} .drop-cat:hover,.panel-cat:hover{color:var(--text)} .drop-group > a:not(.drop-cat){display:flex;align-items:baseline;gap:.8rem;padding:.55rem 1.2rem;font:500 .92rem/1.2 var(--font-text);color:var(--text);text-decoration:none} .drop-group > a:not(.drop-cat):hover,.drop-group > a:not(.drop-cat):focus-visible{background:var(--title-ink);color:var(--ground)} .drop-group .num,.panel-group .num{font:500 .78rem/1 var(--font-code);color:var(--faint);min-width:1.4em} .drop-group > a:hover .num,.drop-group > a:focus-visible .num{color:inherit} /* the phone menu: Projects as a heading with its projects beneath, then About and Contact */ .panel-projects{border-bottom:1px solid var(--line);padding-bottom:.4rem} .panel-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem .4rem;font:500 1.05rem/1 var(--font-text)} .panel-head span{font:500 .8rem/1 var(--font-code);color:var(--faint)} .panel-group > a:not(.panel-cat){display:flex;align-items:baseline;gap:.8rem;padding:.55rem 1.4rem .55rem 2rem;font:500 .95rem/1.2 var(--font-text);color:var(--text);text-decoration:none;border:0} .panel-cat{padding-left:2rem} .menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;height:100%;box-sizing:border-box;padding:0 1.6rem;border-radius:0 var(--radius-lg) var(--radius-lg) 0; font:600 1.4rem/1 var(--font-condensed);letter-spacing:.1em;text-transform:uppercase;color:var(--text);transition:color .15s ease,background-color .15s ease} .menu summary:hover,.menu summary:focus-visible,.menu[open] summary{background:var(--text-strong);color:var(--ground);outline:none} .menu summary::-webkit-details-marker{display:none} .menu-panel{position:absolute;left:0;right:0;top:calc(100% + var(--space-card) / 2);background:var(--material-thick);border:1px solid var(--material-edge);border-radius:var(--radius-lg);padding:.4rem 0;overflow:hidden} .menu-panel > a{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem;text-decoration:none;border-bottom:1px solid var(--line);font:500 1.05rem/1 var(--font-text)} .menu-panel > a:last-child{border-bottom:0} .menu-panel > a span{font:500 .8rem/1 var(--font-code);color:var(--faint)} @media(max-width:900px){.desk{display:none}.menu{display:block;align-self:stretch}} /* ---------------------------------------------------------------- scrollbar The page scrollbar, in the site's own colors: a dark rail with a hairline edge and a floating pill thumb in the gradient of the page you're on (platinum on the home screen, each category's Chromatica family on its page; js/pages.js sets html[data-page]). The thumb thickens on hover and brightens while held. Chrome and Safari take the ::-webkit-scrollbar styles; Firefox, which has no thumb gradients, gets a thin platinum thumb. */ html{--sb:linear-gradient(180deg,var(--ice-850),var(--ice-550) 35%,var(--ice-310))} html[data-page]:not([data-page="home"]){--sb:linear-gradient(180deg,var(--lagoon-550),var(--lagoon-310) 55%,var(--azure-220))} html::-webkit-scrollbar{width:13px} html::-webkit-scrollbar-track{background:color-mix(in oklch, var(--ground) 86%, transparent);box-shadow:inset 1px 0 0 var(--line)} html::-webkit-scrollbar-thumb{min-height:56px;border:4px solid transparent;border-radius:var(--radius-pill);background:var(--sb) padding-box} html::-webkit-scrollbar-thumb:hover{border-width:3px} html::-webkit-scrollbar-thumb:active{border-width:2px;box-shadow:inset 0 0 0 20px color-mix(in oklch, var(--text) 18%, transparent)} html::-webkit-scrollbar-corner{background:transparent} @supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:var(--ice-550) var(--ground)}} /* ---------------------------------------------------------------- type roles */ .eyebrow{font:500 .8rem/1.2 var(--font-condensed);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .display{font:900 clamp(2.9rem,7vw,5.6rem)/.92 var(--font-caps);letter-spacing:.005em;margin:0} /* One-line display: sized to its column so the line never wraps. MF Caps Black sets "FEATURED PROJECTS" about 14.2em wide; dividing by 14.6 leaves a little air. The vw line is the fallback without container units. */ .intro{container-type:inline-size} .display.solid{font-family:var(--font-caps)} .page-title{color:var(--title-ink)} /* a page's own title (Contact's "Say hello") in the primary text colour, like About's name */ .display.one-line{white-space:nowrap;font-size:min(5.6rem,calc((100vw - 2 * var(--gutter)) / 14.6));font-size:min(5.6rem,calc(100cqi / 14.6))} .h-section{font:800 clamp(1.55rem,3.2vw,2.3rem)/1 var(--font-caps);letter-spacing:.02em;margin:0} .lede{font:400 clamp(1.05rem,1.6vw,1.22rem)/1.55 var(--font-text);color:var(--muted);max-width:var(--measure);margin:0} .prose{max-width:var(--measure)} .prose p{margin:0 0 1.05em} .prose h2{font:700 clamp(1.4rem,2.6vw,1.9rem)/1.15 var(--font-condensed);margin:2.2em 0 .6em} .prose h3{font:800 1rem/1.2 var(--font-caps);letter-spacing:.04em;margin:1.8em 0 .5em} .prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.05em} .prose li{margin:.3em 0} .prose strong{font-weight:700} .prose code,.code{font:500 .9em/1 var(--font-code)} .num{font:700 1em/1 var(--font-code)} /* ---------------------------------------------------------------- page frame */ main{padding-top:calc(var(--header-h) + var(--space-block) + 18px)} .intro{padding:var(--space-card) 0 var(--space-gutter-max)} .intro .eyebrow{margin-bottom:var(--space-card)} .intro .lede{margin-top:var(--space-stack)} footer.site{border-top:0;margin-top:var(--space-section);padding:var(--space-block) 0 calc(var(--space-section) + env(safe-area-inset-bottom));color:var(--faint);font:400 .85rem/1.5 var(--font-code)} footer.site .wrap{display:flex;flex-wrap:wrap;gap:var(--space-card) var(--space-block);justify-content:space-between;align-items:center} footer.site .strip{display:none} /* no rule or strip above the footer: it sits on the page as it is */ footer.site a{color:var(--muted);text-decoration:none;font-family:var(--font-text)} /* Contact in MF Text; the copyright stays in MF Mono */ footer.site a:hover{color:var(--text)} /* ---------------------------------------------------------------- sections + cards */ .section{margin-top:var(--space-section)} .section:first-of-type,.intro + .section{margin-top:0} .section-head{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:0 var(--space-block);padding-bottom:var(--space-stack);margin-bottom:var(--space-block);position:relative} .section-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--c,var(--lagoon-220)),var(--c2,var(--azure-220)) 30%,var(--line) 70%)} .section-num{font:900 clamp(3.4rem,8vw,6rem)/.8 var(--font-caps);background:linear-gradient(160deg,var(--chi,var(--lagoon-420)),var(--c,var(--lagoon-220)) 55%,var(--c2,var(--azure-220)));-webkit-background-clip:text;background-clip:text;color:transparent} .section-head .eyebrow{margin-bottom:.45rem} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:var(--space-block)} .cards.wide{grid-template-columns:1fr} .card{ --b:1.5px; position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--text); border-radius:var(--radius-xl); background: linear-gradient(var(--surface),var(--surface)) padding-box, linear-gradient(135deg,color-mix(in oklch, var(--c) 70%, transparent),color-mix(in oklch, var(--line) 80%, transparent) 40%,color-mix(in oklch, var(--c2) 70%, transparent)) border-box; border:var(--b) solid transparent; overflow:hidden;isolation:isolate; } .card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s ease; background:radial-gradient(120% 70% at 0% 0%,color-mix(in oklch, var(--c) 22%, transparent),transparent 60%),radial-gradient(100% 70% at 100% 100%,color-mix(in oklch, var(--c2) 18%, transparent),transparent 60%)} /* the light comes from the top left. At rest a card casts a short soft shadow down and to the right; hovered it lifts and is lit instead, in the open circle's colors: its azure ring on the edge, its lagoon glow cast the same way the shadow fell. The two never show together: the shadow fades out, then the glow fades in (and back the other way), each strength (--shade, --lit) animated on its own with the second one delayed. The shadow is darker than the ground (so it reads on it) and in the complement of its hue, 249 + 180 (chosen side by side over the ground's own hue: _preview/card-shadows.html) */ @property --shade{syntax:"";inherits:false;initial-value:1} @property --lit{syntax:"";inherits:false;initial-value:0} .card{--card-shadow:oklch(0.08 0.02 69);--shade:1;--lit:0; box-shadow:0 0 0 1px color-mix(in oklch, var(--azure-420) calc(45% * var(--lit)), transparent), 8px 10px 22px -9px color-mix(in oklch, var(--lagoon-420) calc(14% * var(--glow, 1) * var(--lit)), transparent), 18px 24px 44px -20px color-mix(in oklch, var(--lagoon-420) calc(6% * var(--glow, 1) * var(--lit)), transparent), 4px 6px 14px -4px color-mix(in oklch, var(--card-shadow) calc(35% * var(--shade)), transparent), 10px 14px 32px -10px color-mix(in oklch, var(--card-shadow) calc(22% * var(--shade)), transparent); transition:transform .35s cubic-bezier(.2,.7,.2,1),--lit .18s ease,--shade .22s ease .18s} /* leaving: glow out, then shadow in */ .card:hover{transform:translateY(-4px);--shade:0;--lit:1; transition:transform .35s cubic-bezier(.2,.7,.2,1),--shade .18s ease,--lit .22s ease .18s} /* arriving: shadow out, then glow in */ .card:hover::before,.card:focus-visible::before{opacity:1} .card:focus-visible{outline-offset:4px;border-radius:var(--radius-xl)} .thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--raised);border-bottom:1px solid var(--line)} .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)} .card:hover .thumb img{transform:scale(1.035)} .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,color-mix(in oklch, var(--surface) 65%, transparent));pointer-events:none} .card-body{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto 1fr;gap:.2rem var(--space-stack);padding:var(--space-block);align-items:start;flex:1} /* the text from the top, any spare height above the foot */ .card-num{grid-row:span 3;font:900 2.6rem/.82 var(--font-caps);background:linear-gradient(180deg,var(--chi),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent;padding-top:.1rem} .card-kicker{font:500 .78rem/1.2 var(--font-condensed);letter-spacing:.12em;text-transform:uppercase;color:var(--chi)} .card-title{font:800 clamp(1.25rem,2vw,1.5rem)/1.1 var(--font-caps);letter-spacing:.02em;margin:.15rem 0 .35rem} .card-desc{font:400 .98rem/1.5 var(--font-text);color:var(--muted);margin:0} .card-foot{grid-column:2;align-self:end;min-height:calc(1.56rem + 2px);display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem;align-items:center} /* on the card's bottom edge, level across a row (a tag's height even with no tags) */ .tag{font:500 .72rem/1 var(--font-condensed);letter-spacing:.08em;text-transform:uppercase;padding:.42rem .6rem;border-radius:var(--radius-pill);border:1px solid color-mix(in oklch, var(--c) 45%, var(--line));color:var(--text);background:color-mix(in oklch, var(--c) 10%, transparent)} .open{margin-left:auto;font:700 .82rem/1 var(--font-caps);letter-spacing:.06em;display:inline-flex;align-items:center;gap:.45rem;color:var(--chi)} .open i{display:inline-block;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--c),var(--c2));position:relative;transition:transform .3s ease} .open i::after{content:"";position:absolute;inset:6px 7px 6px 5px;border:solid var(--ground);border-width:2px 2px 0 0;transform:rotate(45deg)} .card:hover .open i{transform:translateX(3px)} /* wide card: thumbnail beside the text on desktop */ @media(min-width:900px){ .card.feature{display:grid;grid-template-columns:1.25fr 1fr} .card.feature .thumb{aspect-ratio:auto;min-height:340px;border-bottom:0;border-right:1px solid var(--line)} .card.feature .thumb img{position:absolute;inset:0} } .thumb.splash-thumb{background:var(--bg)} .thumb.poster-thumb img{object-position:50% 12%} @media(min-width:900px){.card.feature .thumb.poster-thumb{min-height:420px}} .thumb .mf-splash{position:absolute;inset:0} /* one accent for every project and page: page 2's lagoon into azure (no pink, violet or acid) */ .h-01,.h-02,.h-03,.h-04,.h-05{--c:var(--lagoon-220);--c2:var(--azure-150);--chi:var(--lagoon-420)} .s-1,.s-2,.s-3{--c:var(--lagoon-220);--c2:var(--azure-220);--chi:var(--lagoon-420)} /* one accent across the home pages: page 2's fill (lagoon into azure), for the cards' accents: the kicker, Open and its disc, and the tag capsules' rims; the page numbers are its outline */ :root{--acc-hi:var(--lagoon-420);--acc:var(--lagoon-220);--acc2:var(--azure-220); --acc-fill:linear-gradient(160deg,var(--acc-hi),var(--acc) 55%,var(--acc2))} .section-num{background:none;color:transparent;-webkit-text-stroke:1.5px var(--acc-hi)} /* the page numbers: outline only, no fill */ .card .card-kicker,.card .open{background-image:var(--acc-fill);-webkit-background-clip:text;background-clip:text;color:transparent} .card .open i{background:linear-gradient(135deg,var(--acc),var(--acc2))} /* the cards' only cue now there's no word: twice the size, and a stroke only, in the chroma control's lit inner ring (its color, glow and brightness) */ .card .open i{width:40px;height:40px;background:none;border:1.5px solid color-mix(in oklch, var(--azure-420) 80%, transparent); box-shadow:0 0 10px color-mix(in oklch, var(--lagoon-420) calc(55% * var(--glow, 1)), transparent),inset 0 0 8px color-mix(in oklch, var(--lagoon-420) calc(30% * var(--glow, 1)), transparent); filter:drop-shadow(0 0 4px color-mix(in oklch, var(--lagoon-420) calc(100% * var(--glow, 1)), transparent)) brightness(1.4)} .card .open i::after{inset:12px 14px 12px 10px;border-width:1.5px 1.5px 0 0;border-color:color-mix(in oklch, var(--azure-420) 80%, transparent)} .card .tag{position:relative;border-color:transparent;background:color-mix(in oklch, var(--acc) 10%, transparent)} .card .tag::before{content:"";position:absolute;inset:-1px;padding:1px;border-radius:inherit;background:linear-gradient(135deg,var(--acc-hi),var(--acc) 55%,var(--acc2));pointer-events:none; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} /* ---------------------------------------------------------------- buttons, fields */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.8rem 1.3rem;border-radius:var(--radius-md);font:700 .95rem/1 var(--font-caps);letter-spacing:.05em;text-decoration:none;color:var(--ground);border:0;cursor:pointer;background:linear-gradient(120deg,var(--lagoon-420),var(--azure-420) 50%,var(--lagoon-420));background-size:200% 100%;transition:background-position .6s ease} .btn:hover{background-position:100% 0} .btn.ghost{color:var(--text);background:transparent;border:1px solid color-mix(in oklch, var(--text) 28%, transparent)} .btn.ghost:hover{border-color:var(--text)} label{display:block;font:500 .8rem/1.2 var(--font-condensed);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem} input,textarea{width:100%;font:400 1rem/1.4 var(--font-text);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:.85rem .95rem;min-height:46px} input:focus,textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent} textarea{min-height:170px;resize:vertical} /* ---------------------------------------------------------------- pages The home document is four pages: the home screen, then one page per project category. Each is a sticky sheet; js/pages.js sets --stick so a page taller than the screen scrolls through before it sticks, and --cover (0 to 1) as the next sheet slides over it, which dims it and eases it back. The sheets carry the page background, fixed to the screen like the ground behind them, so they read as one surface with a lit top edge. */ :root{--next-h:clamp(64px,10svh,92px)} main.pages{padding-top:0} .page{position:sticky;top:var(--stick,0px);scroll-margin-top:calc(-1 * (var(--header-h) + 24px))} .page::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:var(--bg-edge);opacity:calc(var(--cover,0) * .62)} .page.is-covered{visibility:hidden} .page-inner{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;transform-origin:50% var(--origin,50%)} .page.is-receding .page-inner{transform:translateY(calc(var(--cover) * -3vh)) scale(calc(1 - var(--cover) * .05))} .page + .page{ background-color:var(--bg-floor);background-image:var(--bg-grad);background-size:100% 100vh;background-repeat:no-repeat;background-attachment:fixed; border-radius:var(--radius-xl) var(--radius-xl) 0 0; /* the lit edge and the shadow it casts fade in as the sheet starts to rise (--rise, js/pages.js), so a sheet waiting below the fold doesn't darken the page above it */ box-shadow:0 -1px 0 color-mix(in oklch, var(--ice-700) calc(40% * var(--rise, 1)), transparent),0 -28px 70px color-mix(in oklch, var(--ground) calc(60% * var(--rise, 1)), transparent); } .page-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-h) + var(--space-block) + 18px) 0 var(--space-section)} .page-head{padding-top:calc(var(--header-h) + var(--space-block) + 18px)} .page-head .section-head{margin-bottom:0;padding-bottom:0} .page-head .section-head::after{display:none} /* no rule under a page's number and title */ .page-head + .page-body{padding-top:var(--space-block)} .section-head h2:focus{outline:none} /* ---- paged (js/pages.js): one page per screen, nothing scrolls; a sweep moves between them. The pages stack in one fixed viewport; the one showing is .is-current, the one being revealed .is-incoming (clipped by the sweep). The layout tightens so a page fits, cards sit in one row (on phones, a sideways row you swipe), and anything still too tall is scaled to fit by the script */ html.is-paged,html.is-paged body{height:100%;overflow:hidden;overscroll-behavior:none} html.is-paged main.pages{position:fixed;inset:0;z-index:1} html.is-paged .page{position:absolute;inset:0;visibility:hidden;border-radius:0;box-shadow:none; background-color:var(--bg-floor);background-image:var(--bg-grad);background-size:100% 100%;background-repeat:no-repeat;background-attachment:scroll} html.is-paged .page.is-current{visibility:visible;z-index:1} html.is-paged .page.is-incoming{visibility:visible;z-index:2} html.is-paged .page-inner{height:100vh;height:100svh;min-height:0;overflow:hidden;transform:none!important} .page-sweep{position:fixed;inset:0;width:100%;height:100%;z-index:90;pointer-events:none;visibility:hidden} /* over everything, the navbar too */ html.is-paged .page-body{padding:calc(var(--header-h) + var(--space-card) + 14px) 0 var(--space-block)} /* the page's number and title sit at the top, under the navbar, centred; the cards centre in the space below, on their own */ html.is-paged .page-head{position:absolute;top:0;left:0;right:0;z-index:3;padding-top:calc(var(--header-h) + var(--space-card) + 44px)} html.is-paged .page-head .section-num{font-size:clamp(2.6rem,5vw,3.6rem)} html.is-paged .page-head .h-section{font-size:clamp(1.25rem,2.4vw,1.7rem)} /* the number stacked over the title, both centred on the page */ html.is-paged .page-head .section-head{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.1rem} html.is-paged .page-head + .page-body{padding-top:calc(var(--header-h) + var(--space-card) + 44px + 6.2rem + var(--space-block))} /* every card on a page shares one row in equal columns, whichever group it's in */ html.is-paged .groups{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--space-block);align-items:stretch} html.is-paged .group,html.is-paged .group .cards{display:contents} html.is-paged .groups > .cards{flex:1} html.is-paged .cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)} html.is-paged .thumb{max-height:32svh} html.is-paged .group .card.feature{display:flex;flex-direction:column} html.is-paged .group .card.feature .thumb{aspect-ratio:16/10;min-height:0;border-right:0;border-bottom:1px solid var(--line)} html.is-paged .group .card.feature .thumb img{position:static} html.is-paged .groups > .cards .card.feature .thumb{min-height:min(420px,46svh);max-height:none} /* the cards use the whole page: on wider screens the column runs out to the navbar's edges, and the cards take all the height between the page title and the scroll button, their pictures growing to fill it (cropped from the centre, like any thumbnail). The script still scales a page down if even the smallest pictures won't fit */ @media (min-width:701px){ html.is-paged .page:not(.page-home) .wrap{width:calc(100% - 2 * var(--nav-inset))} /* edge to edge with the navbar */ html.is-paged .page-body{min-height:0} /* held to the screen, so the pictures give up room before the page has to scale */ /* a row of cards shares two rows: the pictures, one height across every card, taking whatever room is left, and the texts below, as tall as the longest */ html.is-paged .groups{flex:1;min-height:0;grid-template-rows:minmax(120px,1fr) auto;grid-auto-rows:auto} html.is-paged .groups .card{grid-row:span 2;display:grid;grid-template-rows:subgrid} html.is-paged .thumb{aspect-ratio:auto;max-height:none;min-height:0} html.is-paged .thumb img{position:absolute;inset:0} /* the pictures now take whatever shape the space gives them, so each crop keeps what matters: a website screenshot its top (the header and the hero line), the Interstate slide its left (the title starts at the left edge), the poster its own setting */ html.is-paged .thumb:not(.poster-thumb) img{object-position:50% 0} html.is-paged .card[href*="typeface-presentation"] .thumb img{object-position:0 50%} /* a page with one card (Motion, Typography): the card fills the height, picture beside the text */ html.is-paged .groups > .cards{grid-row:span 2;grid-template-rows:minmax(0,1fr)} html.is-paged .groups > .cards .card.feature{grid-row:auto;display:grid;grid-template-rows:none} html.is-paged .groups > .cards .card.feature .thumb{min-height:0} html.is-paged .group .card.feature{display:grid;grid-template-columns:none;grid-template-rows:subgrid} /* Interstate, in a row */ html.is-paged .group .card.feature .thumb{aspect-ratio:auto;border-right:0} } html.is-paged .page footer.site{margin-top:0;padding:var(--space-card) 0 calc(var(--space-card) + env(safe-area-inset-bottom))} @media (max-width:700px){ html.is-paged .groups{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--space-card);margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scrollbar-width:none;overscroll-behavior-x:contain} html.is-paged .groups::-webkit-scrollbar{display:none} html.is-paged .group,html.is-paged .groups .cards{display:contents} html.is-paged .groups .card{flex:0 0 84%;scroll-snap-align:center} html.is-paged .groups > .cards .card:only-child{flex-basis:100%} /* a page with one card */ html.is-paged .groups .card.feature{display:flex;flex-direction:column} html.is-paged .groups .card.feature .thumb{aspect-ratio:16/10;min-height:0;max-height:30svh;border-right:0;border-bottom:1px solid var(--line)} html.is-paged .groups .card.feature .thumb img{position:static} } /* the home screen: exactly one screen tall, the line low on the left, the lattice behind */ .page-home .page-inner{height:100vh;height:100svh;min-height:0;isolation:isolate} .home-art{position:absolute;inset:0;z-index:-1;pointer-events:none} /* the line sits a little above the middle of the screen, clear of the navbar and the button */ .home-copy{margin-block:auto;padding:calc(var(--header-h) + 24px) 0 calc(60px + 2 * clamp(20px,4vh,36px) + 6vh + env(safe-area-inset-bottom));container-type:inline-size} .home-copy .eyebrow{margin:0 0 var(--space-stack)} /* three set lines; the longest ("the Senses.") is 8.52em wide in MF Caps Black. Wide screens give the line about 64% of the column, leaving the rest to the lattice's cluster; phones give it the full column. */ .home-title{line-height:.94;font-size:min(8rem,calc((100vw - 2 * var(--gutter)) * .64 / 8.6));font-size:min(8rem,calc(100cqi * .64 / 8.6))} .home-title > span{display:block;white-space:nowrap} /* tracking: MF Caps Black reads a touch loose at display size, so tighten it */ .home-title{letter-spacing:-.01em} /* optical left alignment: each line's box starts at the column edge, but its first letter carries its own left sidebearing, so the ink started at different places (H 0.092em in, T 0.028em, C 0.073em; the eyebrow's M 0.04em of its size). Pull each line left by that, so the flat stems (M, H, T) share one edge, and the round C overshoots it by about 1px (0.012em), as round letters should to look aligned */ .home-title > span:nth-child(1){margin-left:-.061em} .home-title > span:nth-child(2){margin-left:-.092em} .home-title > span:nth-child(3){margin-left:-.028em} .home-copy .eyebrow{margin-left:-.04em} /* the subheading under the title: the lede's MF Text, a step larger, in the primary text color, clear of the title by a block */ .home-sub{margin-top:var(--space-block);font-size:clamp(1.15rem,2vw,1.6rem);color:var(--title-ink);max-width:none} @media (max-width:700px){.home-title{font-size:calc((100vw - 2 * var(--gutter)) / 8.75);font-size:calc(100cqi / 8.75)}} /* the chunky bar at the foot of each page: full width, the next page's colors */ .page-next{ --g:var(--platinum-metal); --chev:var(--ice-700); position:relative;z-index:2;flex:none;display:flex;align-items:center;justify-content:center;gap:.85rem; width:100%;min-height:calc(var(--next-h) + env(safe-area-inset-bottom));padding:0 var(--gutter) env(safe-area-inset-bottom); color:var(--ground);text-decoration:none; font:900 clamp(1.05rem,2.1vw,1.45rem)/1 var(--font-caps);letter-spacing:.08em; background:var(--g);background-size:200% 100%; transition:background-position .7s cubic-bezier(.2,.7,.2,1); } .page-next.s-2,.page-next.s-3{--g:linear-gradient(90deg,var(--c),var(--chi) 25%,var(--c2) 50%,var(--chi) 75%,var(--c));--chev:var(--chi)} .page-next:hover{background-position:-100% 0} .page-next:focus-visible{outline:3px solid var(--ground);outline-offset:-7px;border-radius:0} .page-next-kicker{font:700 .62em/1 var(--font-condensed);letter-spacing:.2em;text-transform:uppercase;opacity:.72} .page-next-label b{font-weight:900;margin-right:.35em} .page-next-label{white-space:nowrap} @media (max-width:520px){.page-next{gap:.7rem;font-size:clamp(.95rem,4.6vw,1.1rem)}.page-next-kicker{display:none}} .page-next i{position:relative;flex:none;width:1.7em;height:1.7em;border-radius:50%;background:var(--ground);transition:transform .35s cubic-bezier(.2,.7,.2,1)} .page-next i::after{content:"";position:absolute;left:50%;top:44%;width:.42em;height:.42em;border:solid var(--chev);border-width:0 .15em .15em 0;transform:translate(-50%,-50%) rotate(45deg)} .page-next:hover i{transform:translateY(4px)} /* the home screen's button: a chunky rounded rectangle with a chevron, centred at the foot of the screen, in the design system's "Ghost, focused" style: the ghost button (raised fill, text-color chevron, a line-color hairline ring) wearing its focus ring (2px solid focus, 2px out), shown always. Under both, a third layer the size of the ring, in a thinner version of the navbar's material (a light tint, a soft backdrop blur, the hairline edge). The fill and the material are pseudo-elements so the material can sit beneath the fill inside the button's own stacking context. */ .page-next--home{--x:-50%;position:absolute;left:50%;bottom:calc(clamp(20px,4vh,36px) + env(safe-area-inset-bottom));transform:translateX(var(--x)); width:168px;height:60px;min-height:0;padding:0;border:0;border-radius:var(--radius-md); background:transparent;--chev:var(--text); outline:2px solid var(--focus);outline-offset:2px; animation:home-bob 2.4s cubic-bezier(.45,0,.55,1) infinite} @keyframes home-bob{0%,60%,100%{transform:translateX(var(--x))}30%{transform:translate(var(--x),5px)}} /* on the last page it points up, back to the home screen, and bobs upward */ .page-next--home.is-up{animation-name:home-bob-up} .page-next--home.is-up i::after{transform:translate(-50%,-25%) rotate(-135deg)} @keyframes home-bob-up{0%,60%,100%{transform:translateX(var(--x))}30%{transform:translate(var(--x),-5px)}} /* a page between the home page and the last one also has an up button (.page-next--back), hidden until the visitor has been to the last page (js/pages.js sets data-seen-end). Then the pair sits centred, down on the left and up on the right, 20px apart, the same buttons, and neither carries the word */ .page-next--back{display:none} html[data-seen-end] .page-next--back{display:flex;--x:10px} html[data-seen-end] .page-next--home:has(+ .page-next--back){--x:calc(-100% - 10px)} html[data-seen-end] .page-next--home:has(+ .page-next--back) .page-next-word{display:none} /* the pages leave room at their foot for it */ html.is-paged .page:not(.page-home) .page-inner{padding-bottom:calc(60px + 2 * clamp(20px,4vh,36px) + env(safe-area-inset-bottom))} html.is-paged .page-body{padding-bottom:var(--space-card)} html.is-paged .page footer.site{border-top:0;padding:0 0 var(--space-stack)} html.is-paged .page footer.site .strip{display:none} html.is-paged .page footer.site .wrap{padding-inline:var(--space-block);box-sizing:border-box} /* in from the edges, level with the cards' text */ /* on wider screens the footer is the bottom row, level with the scroll button: the copyright on the left, Contact on the right */ @media (min-width:701px){ html.is-paged .page footer.site{position:absolute;left:0;right:0;bottom:calc(clamp(20px,4vh,36px) + env(safe-area-inset-bottom));height:60px;padding:0;display:flex;align-items:center} } /* its face: the lattice's cells in the ring's lagoon, a wave falling through them point first like a chevron (js/scroll-button.js), and "Scroll" over it, haloed in the fill so it reads wherever the cells open */ .page-next--home i{position:absolute;inset:0;width:auto;height:auto;overflow:hidden;border-radius:var(--radius-md);background:transparent} .page-next--home i::after{content:none} .page-next--home i canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .page-next-word{position:relative;font:800 .9375rem/1 var(--font-caps);letter-spacing:.12em;text-transform:uppercase;color:var(--text-strong); text-shadow:0 0 2px var(--raised),0 0 5px var(--raised),0 0 9px var(--raised)} .page-next--home::before,.page-next--home::after{content:"";position:absolute;pointer-events:none} .page-next--home::before{inset:-4px;z-index:-2;border-radius:calc(var(--radius-md) + 4px); /* thin glass, the same material as the navbar */ background:var(--material-glass);-webkit-backdrop-filter:var(--material-glass-blur);backdrop-filter:var(--material-glass-blur); /* the ring as a light source: a tight halo and a wide, faint bloom behind the button, and a soft spill across the glass inside the ring */ box-shadow:inset 0 0 0 1px var(--material-edge), 0 0 6px 1px color-mix(in oklch, var(--focus) calc(70% * var(--glow, 1)), transparent), 0 0 18px 4px color-mix(in oklch, var(--focus) calc(38% * var(--glow, 1)), transparent), 0 0 44px 10px color-mix(in oklch, var(--focus) calc(16% * var(--glow, 1)), transparent), inset 0 0 8px color-mix(in oklch, var(--focus) calc(45% * var(--glow, 1)), transparent)} .page-next--home::after{inset:0;z-index:-1;border-radius:var(--radius-md);background:var(--membrane);-webkit-backdrop-filter:var(--membrane-blur);backdrop-filter:var(--membrane-blur);box-shadow:inset 0 0 0 1px var(--line),inset 0 0 14px color-mix(in oklch, var(--focus) calc(22% * var(--glow, 1)), transparent);transition:background-color .2s ease} .page-next--home:hover::after{background:linear-gradient(color-mix(in oklch, var(--text) 7%, transparent),color-mix(in oklch, var(--text) 7%, transparent)),var(--membrane)} /* a light wash over the membrane */ .page-next--home:focus-visible{outline:2px solid var(--focus);outline-offset:2px} @keyframes next-bob{0%,60%,100%{transform:none}30%{transform:translateY(4px)}} @media (prefers-reduced-motion:reduce){.page-next--home{animation:none}} /* reduced motion everywhere */ @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}