/* ========================================================================== Unodevs — Contour. The demo built around the Volume hero, extended to a whole site. The hero is a radial lattice read at a low angle: rings of points on a paper ground, ink in the troughs, a warm accent only on the crests. This stylesheet takes those four ideas — paper, ink, contour, one warm accent — and applies them to every other section, so the page below the hero looks like it belongs to the hero rather than like a different site underneath it. Light on purpose. Almost every WebGL theme is dark, and a dark band across the top of a light site is a seam. Here the canvas and the page are the same paper, so the hero has no visible edge at all. PALETTE, MEASURED — every pairing that carries text: ink #14181f on paper #f6f4ef = 16.19:1 ink #14181f on surface #efe9e0 = 14.75:1 muted #5d6672 on paper = 5.29:1 muted #5d6672 on surface = 4.82:1 accent #b03d22 on paper = 5.40:1 accent #b03d22 on surface = 4.92:1 paper #f6f4ef on ink (button) = 16.19:1 white #ffffff on accent = 5.94:1 The accent was solved for rather than picked. The terracotta this demo started with, #c2552b, measures 4.13:1 on paper — fine for a heading, failing for the label text it also has to serve. #b03d22 keeps the warmth and passes in both directions with margin, which matters because the accent is used BOTH as text on paper and as a ground under white. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ body.u-style-contour { --u-ct-paper: #f6f4ef; --u-ct-surface: #efe9e0; --u-ct-ink: #14181f; --u-ct-muted: #5d6672; --u-ct-accent: #b03d22; /* One hairline, defined once. The whole design is ruled rather than boxed, so this is the most-used value in the file. */ --u-ct-rule: 1px solid rgba(20, 24, 31, 0.14); --u-ct-rule-strong: 1px solid rgba(20, 24, 31, 0.32); --u-mono-stack: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: -0.011em; } /* -------------------------------------------------------------------------- 2. The field -------------------------------------------------------------------------- One fixed canvas behind the ENTIRE site, not just the hero. Every section scrolls over the same continuous surface, which is the whole point of the demo — the hero is where you meet the lattice, not the only place it is. Painted on in CSS as well, so the paper ground and a static contour wash are already there for anyone the canvas is refused to. -------------------------------------------------------------------------- */ body.u-style-contour { background-color: var(--u-ct-paper); /* A very soft static suggestion of the field, for the no-canvas case. Two wide radial washes rather than an image: no request, no file. */ background-image: radial-gradient(120% 80% at 50% 100%, rgba(20, 24, 31, 0.055) 0%, rgba(20, 24, 31, 0) 60%), radial-gradient(90% 60% at 80% 90%, rgba(176, 61, 34, 0.045) 0%, rgba(176, 61, 34, 0) 55%); background-attachment: fixed; } .u-contour-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; } .u-contour-field canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 900ms ease; } /* Fades in over the painted ground rather than replacing it, so there is no moment where the page changes colour. */ .u-contour-field.is-live canvas { opacity: 1; } @media (prefers-reduced-motion: reduce) { .u-contour-field { display: none; } } /* -------------------------------------------------------------------------- 3. Chrome -------------------------------------------------------------------------- */ /* The header is paper too. It sits on the lattice with a rule under it and nothing else — no fill, no shadow, no glass. */ body.u-style-contour .u-header-bar { background: transparent; border: 0; border-radius: 0; box-shadow: none; } /* * Scrolled, it earns a ground — but only just. * * The lattice is still moving behind it, and a solid bar would freeze a * rectangle of it. A near-opaque paper tint plus a blur keeps the nav * readable while the points continue to drift underneath. */ body.u-style-contour .u-header.is-scrolled .u-header-bar { background: rgba(246, 244, 239, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: var(--u-ct-rule); } body.u-style-contour .u-header-nav a { font-family: var(--u-mono-stack); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--u-ct-ink); } body.u-style-contour .u-header-nav a:hover { color: var(--u-ct-accent); } /* Bottom bar: a floating pill of paper, ruled rather than shadowed. */ body.u-style-contour .u-bottomnav-inner { background: rgba(246, 244, 239, 0.88); border: var(--u-ct-rule-strong); border-radius: 999px; box-shadow: 0 10px 30px rgba(20, 24, 31, 0.10); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.u-style-contour .u-bnav-tab { color: var(--u-ct-muted); } body.u-style-contour .u-bnav-tab.is-active { color: var(--u-ct-ink); } body.u-style-contour .u-bnav-pill { background: rgba(176, 61, 34, 0.12); } /* The drawer is opaque. Transparency over a moving lattice is a menu you cannot read. */ body.u-style-contour .u-drawer-panel { background: var(--u-ct-paper); border-color: rgba(20, 24, 31, 0.18); } body.u-style-contour .u-footer { background: transparent; border-top: var(--u-ct-rule-strong); } /* -------------------------------------------------------------------------- 4. Type -------------------------------------------------------------------------- */ body.u-style-contour .u-section-title, body.u-style-contour .u-hero-title, body.u-style-contour .u-page-title { font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; color: var(--u-ct-ink); } body.u-style-contour .u-section-title { font-size: clamp(2.1rem, 5.5vw, 4.2rem); } /* The section head is ruled off, the way a contour map labels a band. */ body.u-style-contour .u-section-head { max-width: 34ch; padding-bottom: 20px; border-bottom: var(--u-ct-rule-strong); margin-bottom: clamp(30px, 4vw, 56px); } body.u-style-contour .u-lead, body.u-style-contour .u-section-text { color: var(--u-ct-muted); line-height: 1.55; } /* Monospaced labels, taken straight from the hero's own vocabulary. */ body.u-style-contour .u-eyebrow, body.u-style-contour .u-mono { font-family: var(--u-mono-stack); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--u-ct-accent); font-weight: 500; } /* -------------------------------------------------------------------------- 5. Surfaces — ruled, not boxed -------------------------------------------------------------------------- */ /* * No shadows anywhere. * * The hero is a flat field of points on paper. Lifting every card off that * paper with a drop shadow would put two contradictory depth cues on one * screen — a surface with no thickness, and a dozen things floating above * it. Rules keep everything in the same plane, which is what a contour * drawing is. */ body.u-style-contour .u-card, body.u-style-contour .u-tile, body.u-style-contour .u-person, body.u-style-contour .u-package, body.u-style-contour .u-acc-item { background: rgba(239, 233, 224, 0.55); border: var(--u-ct-rule); border-radius: 6px; box-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } body.u-style-contour .u-card:hover, body.u-style-contour .u-tile:hover, body.u-style-contour .u-package:hover { border-color: rgba(176, 61, 34, 0.45); background: rgba(239, 233, 224, 0.85); } /* Stats are the one place the accent gets to be large. */ body.u-style-contour .u-stat strong, body.u-style-contour .u-hero-metric strong { color: var(--u-ct-accent); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } body.u-style-contour .u-section { padding-block: clamp(76px, 10vw, 148px); } /* A hairline between sections, so the page reads as bands of a survey. */ body.u-style-contour .u-section + .u-section { border-top: var(--u-ct-rule); } /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ body.u-style-contour .u-btn { border-radius: 999px; font-family: var(--u-mono-stack); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; padding: 1em 1.7em; border: var(--u-ct-rule-strong); box-shadow: none; transition: background-color 140ms linear, color 140ms linear, border-color 140ms linear; } body.u-style-contour .u-btn:active { transform: none; } body.u-style-contour .u-btn-primary { background: var(--u-ct-ink); border-color: var(--u-ct-ink); color: var(--u-ct-paper); --btn-fg: var(--u-ct-paper); } body.u-style-contour .u-btn-primary:hover { background: var(--u-ct-accent); border-color: var(--u-ct-accent); color: #ffffff; --btn-fg: #ffffff; } body.u-style-contour .u-btn-ghost { background: transparent; color: var(--u-ct-ink); --btn-fg: var(--u-ct-ink); } body.u-style-contour .u-btn-ghost:hover { background: var(--u-ct-ink); color: var(--u-ct-paper); --btn-fg: var(--u-ct-paper); } /* -------------------------------------------------------------------------- 7. The hero seam -------------------------------------------------------------------------- */ /* The canvas paints its own paper ground, so the hero must not carry a border or a different background — the whole point is that there is no visible join between the lattice and the page. */ body.u-style-contour .u-volume { border: 0; background: transparent; } /* The lattice is busiest in the middle, which is where the headline sits. A soft paper wash behind the type keeps it legible without drawing a panel around it. */ body.u-style-contour .u-volume-inner::before { content: ""; position: absolute; inset: -40px -60px; z-index: -1; background: radial-gradient( ellipse at 30% 50%, rgba(246, 244, 239, 0.92) 0%, rgba(246, 244, 239, 0.72) 45%, rgba(246, 244, 239, 0) 78% ); pointer-events: none; } /* -------------------------------------------------------------------------- 8. Print -------------------------------------------------------------------------- */ @media print { .u-contour-field { display: none; } body.u-style-contour { background-image: none; background: #ffffff; color: #000000; } body.u-style-contour .u-volume-still, body.u-style-contour .u-volume-inner::before { display: none; } body.u-style-contour .u-volume { min-height: 0; padding-block: 24px; } body.u-style-contour .u-card, body.u-style-contour .u-tile, body.u-style-contour .u-person, body.u-style-contour .u-package, body.u-style-contour .u-acc-item { background: transparent; border-color: #999999; backdrop-filter: none; -webkit-backdrop-filter: none; break-inside: avoid; } }