/* ============================================================================================== HALO — photographs, glass and a ring that draws itself. SCOPED. Every rule lives under `:is(.halo,._halo)`, because the editor's own stylesheets are on the same page whenever an owner is editing and they carry unscoped rules for `.card`, `.wrap`, `.field` and `.sheet`. Unscoped element rules made the two fight; a test fails on the next collision. THE PALETTE IS ONE COLOUR AND ONE GROUND. The owner picks the accent; the paper and the ink are the mode. Everything else — the glass, the lines, the soft ink, what goes on top of the accent — is MIXED from those three, so there is never a second set of values to keep in step. AND THERE ARE THREE GROUNDS, not two: light, dark, and ON A PHOTOGRAPH. A band standing on a picture turns the pair over — ink becomes the paper colour, paper becomes near-black — and every tint follows, glass included. That is the whole reason text is safe on a picture nobody has seen. A custom property computes where it is DECLARED, so a block that redefines --ink must redefine everything mixed from it. That is why the same eight lines appear three times below rather than once: it is not duplication, it is the only way the mixes actually recompute. ============================================================================================ */ /* THE CONTAINER IS DECLARED HERE, by the theme, or every @container rule below matches nothing on a real page — silently, and only on a real page, because the harnesses declare it for you. */ #clay-page{container-type:inline-size;container-name:page} /* WHY EVERY RULE IS `:is(.halo,._halo)`. The page carries the theme's KEY as its class, and a draft folder is named with a leading underscore — so this theme is `._halo` today and `.halo` the day the folder is renamed to make it live. The brief promises that going live is a rename and NOTHING ELSE; a stylesheet scoped to one of the two names would quietly stop matching at the exact moment it started being served. */ /* THE ACCENT LIVES ON :root, NOT ON THE SCOPE CLASS — and this is not a style choice. The owner's colour arrives as ``, written AFTER this stylesheet. `:root` and `:is(.halo,._halo)` have the SAME specificity, but the scope class is on the page element itself, so a `--accent` declared there shadows the inherited one for everything inside it — and every business got this theme's default orange however blue their logo was. The default belongs where it can be overridden. */ :root{--accent:#C87F5E} :is(.halo,._halo){ --ink:#14120F; --paper:#F4F1EE; /* the glass, and the two lines that give it an edge */ --glass:color-mix(in oklab, var(--paper) 66%, transparent); --glass-2:color-mix(in oklab, var(--paper) 84%, transparent); --edge:color-mix(in oklab, var(--ink) 13%, transparent); --edge-lit:color-mix(in oklab, var(--paper) 74%, transparent); --soft:color-mix(in oklab, var(--ink) 64%, var(--paper)); --faint:color-mix(in oklab, var(--ink) 40%, var(--paper)); --line:color-mix(in oklab, var(--ink) 16%, var(--paper)); --fill:color-mix(in oklab, var(--ink) 6%, var(--paper)); /* CONTRAST, COMPUTED. What goes on top of the accent, and the accent as text on the paper — so a lime or a yellow brand is as safe as a navy and nobody has to remember to check one. */ --on-accent:#fff; --accent-text:color-mix(in oklab, var(--accent) 82%, var(--ink)); --r:22px; --r-s:14px; --r-p:999px; --display:"Instrument Serif", "Times New Roman", Georgia, serif; --text:"Figtree", "Inter", system-ui, -apple-system, sans-serif; --photo-filter:saturate(.96) contrast(1.02); background:var(--paper);color:var(--ink); font:16px/1.55 var(--text); -webkit-font-smoothing:antialiased; } /* A PALE ACCENT NEEDS DARK INK ON IT. `color-contrast()` is not everywhere yet, so the switch is the one thing this design asks the owner's colour about — via a relative-luminance test that every engine we serve does support. */ @supports (color:oklch(from red l c h)){ :is(.halo,._halo){--on-accent:oklch(from var(--accent) clamp(0,(0.62 - l) * 1000,1) 0 0);} } /* DARK IS THE SAME DESIGN WITH THE GROUND TURNED OVER. Two values change; every mix follows. */ :root[data-mode="dark"] :is(.halo,._halo), :is(.halo,._halo)[data-mode="dark"]{ --ink:#F6F3F0; --paper:#0C0B0D; --glass:color-mix(in oklab, var(--paper) 56%, transparent); --glass-2:color-mix(in oklab, var(--paper) 76%, transparent); --edge:color-mix(in oklab, var(--ink) 17%, transparent); --edge-lit:color-mix(in oklab, var(--ink) 24%, transparent); --soft:color-mix(in oklab, var(--ink) 64%, var(--paper)); --faint:color-mix(in oklab, var(--ink) 40%, var(--paper)); --line:color-mix(in oklab, var(--ink) 16%, var(--paper)); --fill:color-mix(in oklab, var(--ink) 8%, var(--paper)); --accent-text:color-mix(in oklab, var(--accent) 88%, var(--paper)); } :is(.halo,._halo) *{box-sizing:border-box} :is(.halo,._halo) img{max-width:100%;display:block} /* ── CONTAINMENT ──────────────────────────────────────────────────────────────────────────────── The editor's stylesheets are unscoped and load on an owner's page. These four names are theirs as well as ours, so they are reset inside the design and restated below on our own terms. */ :is(.halo,._halo) .wrap{max-width:none;margin:0;padding:0;container-type:normal} :is(.halo,._halo) .card{position:static;height:auto;border-radius:0;overflow:visible;isolation:auto;background:none;border:0} :is(.halo,._halo) .field{margin-bottom:0} :is(.halo,._halo) .sheet{width:auto;max-width:none;max-height:none;overflow:visible;color:inherit;background:none;border:0;box-shadow:none} :is(.halo,._halo) button{font:inherit;color:inherit;background:none;border:0;text-align:inherit;cursor:pointer} :is(.halo,._halo) a{color:inherit;text-decoration:none} :is(.halo,._halo) ul,:is(.halo,._halo) li{margin:0;padding:0;list-style:none} :is(.halo,._halo) p,:is(.halo,._halo) h1,:is(.halo,._halo) h2,:is(.halo,._halo) h3,:is(.halo,._halo) blockquote{margin:0} /* ── BANDS AND THEIR GROUND ───────────────────────────────────────────────────────────────────── Big, and mostly full height: this design says "this matters" with room rather than with weight. A band with NO photograph paints its own weather in ::before — the accent poured in from an edge that TURNS band by band (`--turn` is an angle, set per band in the drawing, so a linear gradient can simply be aimed at it). A band WITH one has a .sky instead, and its own ink. */ :is(.halo,._halo) .band{position:relative;isolation:isolate;overflow:hidden; padding:clamp(56px,6.4cqw,112px) 0;display:grid;align-items:center} /* A BAND OWNS THE SCREEN. 'sections are not full height' — they are now, all of them. */ :is(.halo,._halo) .band.full{min-height:100svh} :is(.halo,._halo) .band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: linear-gradient(var(--turn,0deg), color-mix(in oklab, var(--accent) 30%, transparent) 0%, color-mix(in oklab, var(--accent) 7%, transparent) 22%, transparent 46%), radial-gradient(80% 60% at 90% 8%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%)} :is(.halo,._halo) .band.pic::before{content:none} :is(.halo,._halo) .wrap{position:relative;z-index:2;width:min(100% - clamp(22px,5cqw,80px), 1180px); margin-inline:auto} :is(.halo,._halo) .wrap.wide{width:min(100% - clamp(22px,5cqw,80px), 1400px)} :is(.halo,._halo) .wrap.mid{width:min(100% - clamp(22px,5cqw,80px), 900px)} /* THE PHOTOGRAPH IS THE GROUND, and it is still a photograph — 2px of softening and a scrim, not 56px of blur. The wash is written first in the markup and lifted over the picture here, so the first in any band is a real photograph of something (which is how the contract test finds a theme's picture frame). */ :is(.halo,._halo) .sky{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none; background:var(--fill)} :is(.halo,._halo) .sky-p{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover; /* SOFT FOCUS, NOT A PHOTOGRAPH AND NOT A GRADIENT. 2px of blur on a 1400px picture is a sharp picture: the page came out as stock photographs with words dropped on them. 30px is the distance at which a room is still plainly a room and stops competing with the type — the scale hides the soft edge blur leaves at the frame. */ filter:blur(30px) saturate(.82) brightness(1.02);transform:scale(1.16)} /* The scrim, and the pour of their accent coming in from the angle this band was given. THE POUR IS A LIGHT, NOT A LID. The first version ran the accent at 86% across a quarter of the band and every photograph underneath it may as well not have been taken — the page came out as one long orange gradient. It is strong at the very edge and gone within a fifth of the way in. */ :is(.halo,._halo) .sky-wash{position:absolute;inset:0;z-index:1; background: linear-gradient(var(--turn,0deg), color-mix(in oklab, var(--accent) 72%, transparent) 0%, color-mix(in oklab, var(--accent) 24%, transparent) 18%, transparent 42%), linear-gradient(100deg, color-mix(in oklab, #07060A 52%, transparent) 0%, color-mix(in oklab, #07060A 20%, transparent) 44%, transparent 76%), linear-gradient(0deg, color-mix(in oklab, #07060A 46%, transparent) 0%, color-mix(in oklab, #07060A 16%, transparent) 32%, transparent 60%)} /* ON A PICTURE, THE GROUND IS TURNED OVER — and every tint mixed from it with it. */ :is(.halo,._halo) .band.pic{ --ink:#FFFDFB; --paper:#100E10; --glass:color-mix(in oklab, var(--paper) 62%, transparent); --glass-2:color-mix(in oklab, var(--paper) 74%, transparent); --edge:color-mix(in oklab, var(--ink) 22%, transparent); --edge-lit:color-mix(in oklab, var(--ink) 30%, transparent); --soft:color-mix(in oklab, var(--ink) 88%, var(--paper)); --faint:color-mix(in oklab, var(--ink) 74%, var(--paper)); --line:color-mix(in oklab, var(--ink) 22%, var(--paper)); --fill:color-mix(in oklab, var(--ink) 12%, var(--paper)); --accent-text:color-mix(in oklab, var(--accent) 62%, var(--ink)); color:var(--ink)} :is(.halo,._halo) .band.pic .d,:is(.halo,._halo) .band.pic .quote{ text-shadow:0 2px 40px color-mix(in oklab, #07060A 45%, transparent)} /* THE EYEBROW ON A PICTURE IS A CHIP, not four pale letters hoping for a dark patch. Small text in the accent over an unknown photograph is the one thing on this page that cannot be made safe by a shadow — so it gets a piece of the same glass everything else stands on. */ :is(.halo,._halo) .band.pic .eyebrow{display:inline-flex;align-items:center; padding:7px 14px;border-radius:var(--r-p);margin-bottom:18px; color:color-mix(in oklab, var(--accent) 82%, #fff); background:var(--glass);border:1px solid var(--edge); -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4); text-shadow:none} :is(.halo,._halo) .band.pic .lede{text-shadow:0 1px 22px color-mix(in oklab, #07060A 55%, transparent)} /* ── GLASS ────────────────────────────────────────────────────────────────────────────────────── Glass is for OBJECTS — a stat, a card, a form, a list, the bar. Never for a band: eleven glass slabs down a page is eleven lids over eleven photographs, which is what the first draft of this theme was and why it read as fog. */ :is(.halo,._halo) .glass,:is(.halo,._halo) .stat,:is(.halo,._halo) .card,:is(.halo,._halo) .who, :is(.halo,._halo) .pane,:is(.halo,._halo) .film{ background:var(--glass);border:1px solid var(--edge);border-radius:var(--r); -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4); box-shadow:0 26px 64px -40px color-mix(in oklab, #07060A 70%, transparent), inset 0 1px 0 var(--edge-lit)} /* ── TYPE ─────────────────────────────────────────────────────────────────────────────────────── Set, not scaled: the phone sizes are decided rather than derived, which is why the display face holds its character at 390px instead of becoming a small headline. */ :is(.halo,._halo) .d{font-family:var(--display);font-weight:400;letter-spacing:-.018em;line-height:1.02; font-size:clamp(38px,6.2cqw,86px)} :is(.halo,._halo) .hero .d{font-size:clamp(44px,8.6cqw,124px)} :is(.halo,._halo) .eyebrow{font-size:clamp(11px,.95cqw,13px);letter-spacing:.19em;text-transform:uppercase; font-weight:600;color:var(--accent-text);margin-bottom:14px} :is(.halo,._halo) .lede{margin-top:18px;font-size:clamp(15px,1.35cqw,19px);line-height:1.6;color:var(--soft); max-width:56ch} :is(.halo,._halo) .quote{font-family:var(--display);font-weight:400;line-height:1.14;letter-spacing:-.015em; font-size:clamp(28px,4.6cqw,64px);max-width:20ch} :is(.halo,._halo) .by{margin-top:18px;font-size:14px;color:var(--faint)} /* ── THE HALO ─────────────────────────────────────────────────────────────────────────────────── A number inside a ring that DRAWS as the band comes up the screen — the only hard-edged element in the design and the only moving one. `pathLength="100"` on the circles is why the dash maths below is plain arithmetic instead of the circumference of a circle of radius 54. */ :is(.halo,._halo) .ring{position:relative;display:grid;place-items:center; width:clamp(132px,16cqw,196px);aspect-ratio:1;flex:0 0 auto} :is(.halo,._halo) .ring.sm{width:clamp(64px,7cqw,84px)} :is(.halo,._halo) .ring-s{position:absolute;inset:0;width:100%;height:100%;overflow:visible; transform:rotate(-90deg)} :is(.halo,._halo) .ring-s circle{fill:none;stroke-linecap:round} :is(.halo,._halo) .ring-b{stroke:var(--accent);stroke-width:1.5;opacity:.28} /* AN SVG CHILD TURNS ROUND ITS OWN ORIGIN, WHICH IS THE TOP-LEFT OF THE CANVAS unless it is told otherwise — so the turning arc left the ring entirely and drew a stray crescent in the corner of the band. `transform-box:fill-box` is what makes "centre" mean the centre of the circle. */ :is(.halo,._halo) .ring-t{stroke:var(--accent);stroke-width:1;opacity:.16; stroke-dasharray:100;stroke-dashoffset:62;transform-box:fill-box;transform-origin:center} :is(.halo,._halo) .ring-a{stroke:var(--accent);stroke-width:6; stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--f,1) * 100); filter:drop-shadow(0 6px 18px color-mix(in oklab, var(--accent) 55%, transparent))} :is(.halo,._halo) .ring-c{position:relative;display:grid;place-items:center;gap:3px;text-align:center; width:72%;padding:4px} :is(.halo,._halo) .ring-c b{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.8cqw,52px); line-height:1} :is(.halo,._halo) .ring.sm .ring-c b{font-size:clamp(19px,2cqw,26px)} :is(.halo,._halo) .ring-c span{font-size:clamp(9px,.78cqw,11px);letter-spacing:.09em;text-transform:uppercase; color:var(--faint);max-width:12ch;line-height:1.25} /* A ROW OF THEM IS A ROW, not three of the hero's ring: the About band puts three facts side by side and at full size they wrapped onto two lines and swallowed the paragraph above them. */ :is(.halo,._halo) .rings{display:flex;gap:clamp(14px,2cqw,30px);flex-wrap:wrap;margin-top:clamp(26px,3cqw,44px)} :is(.halo,._halo) .rings .ring{width:clamp(104px,11cqw,142px)} :is(.halo,._halo) .rings .ring .ring-c b{font-size:clamp(22px,2.4cqw,32px)} /* IT DRAWS AS YOU ARRIVE — where the engine can drive an animation from the scroll. Everywhere else the ring is simply already true, which is a state a reader can live with for ever. */ @supports (animation-timeline: view()){ :is(.halo,._halo) .ring-a{animation:halo-draw linear both;animation-timeline:view(); animation-range:entry 15% cover 42%} :is(.halo,._halo) .ring-t{animation:halo-turn linear both;animation-timeline:view(); animation-range:entry 0% cover 70%} } @keyframes halo-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:calc(100 - var(--f,1) * 100)}} @keyframes halo-turn{from{transform:rotate(0deg)}to{transform:rotate(150deg)}} /* ── BUTTONS ──────────────────────────────────────────────────────────────────────────────────── Three: the filled one, the glass one beside it, and a pale one for the single solid band. */ :is(.halo,._halo) .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(26px,3cqw,40px);align-items:center} :is(.halo,._halo) .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:50px;padding:0 26px;border-radius:var(--r-p);font-weight:600;font-size:15px; border:1px solid var(--edge);background:var(--glass-2);color:var(--ink); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); transition:transform .16s cubic-bezier(.2,.7,.25,1), box-shadow .16s, background .16s} :is(.halo,._halo) .btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -14px color-mix(in oklab, #07060A 60%, transparent)} :is(.halo,._halo) .btn:active{transform:translateY(0)} :is(.halo,._halo) .btn.fill{background:var(--accent);color:var(--on-accent);border-color:transparent; box-shadow:0 14px 34px -16px color-mix(in oklab, var(--accent) 80%, transparent)} :is(.halo,._halo) .btn.pale{background:var(--paper);color:var(--ink);border-color:transparent} :is(.halo,._halo) .btn.ghost{background:transparent} :is(.halo,._halo) .btn.sm{min-height:38px;padding:0 16px;font-size:14px} :is(.halo,._halo) .btn:focus-visible,:is(.halo,._halo) a:focus-visible,:is(.halo,._halo) button:focus-visible, :is(.halo,._halo) summary:focus-visible,:is(.halo,._halo) input:focus-visible,:is(.halo,._halo) select:focus-visible, :is(.halo,._halo) textarea:focus-visible,:is(.halo,._halo) .tab-r:focus-visible + .tab-strip{ outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} /* ── THE HERO ─────────────────────────────────────────────────────────────────────────────────── The picture, the name over it, and two things floating at the far side — the shape every reference in the brief used, and the one the first draft replaced with a grey box. */ :is(.halo,._halo) .hero{min-height:100svh} :is(.halo,._halo) .hero-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(20px,3cqw,50px);align-items:end} :is(.halo,._halo) .hero-t{max-width:20ch} :is(.halo,._halo) .hero-t .lede{max-width:44ch} :is(.halo,._halo) .hero-s{display:grid;gap:12px;justify-items:end;align-content:end} :is(.halo,._halo) .stat{display:flex;align-items:center;gap:14px;padding:14px 20px 14px 14px; border-radius:var(--r);min-width:min(100%,250px)} :is(.halo,._halo) .stat-t{display:grid;gap:2px;min-width:0} :is(.halo,._halo) .stat-t b{font-weight:600;font-size:16px;line-height:1.2} :is(.halo,._halo) .stat-t span{font-size:13px;color:var(--faint);line-height:1.35} :is(.halo,._halo) .stat > .dot{margin-left:6px} /* ── ROWS ───────────────────────────────────────────────────────────────────────────────────── */ :is(.halo,._halo) .rows{display:grid} :is(.halo,._halo) .rows.glass{margin-top:clamp(22px,2.6cqw,36px);padding:8px clamp(16px,2cqw,26px)} /* A ROW IS A GRID, and that is not a preference: the runtime writes basket lines as `
`, so a theme whose .row is a FLEX row ignores that inline column plan entirely. The middle column then has no width, the quantity stepper inside it wraps onto three lines, and a pill with a 999px radius around a tall box is a big grey circle — which is exactly what the cart looked like. */ :is(.halo,._halo) .row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline; gap:16px;padding:15px 0;border-top:1px solid var(--line)} :is(.halo,._halo) .row > *{min-width:0} :is(.halo,._halo) .row h3{font-weight:600;font-size:16px;line-height:1.3} :is(.halo,._halo) .row p{font-size:13.5px;color:var(--soft);line-height:1.45;margin-top:2px} :is(.halo,._halo) .row:first-child{border-top:0} :is(.halo,._halo) .row b{font-weight:600;font-size:16px} :is(.halo,._halo) .row span{display:block;margin-top:3px;font-size:14px;color:var(--soft);line-height:1.5} :is(.halo,._halo) .row em{font-style:normal;font-variant-numeric:tabular-nums; color:var(--accent-text);font-weight:600;white-space:nowrap} /* ── THE TAB STRIP ────────────────────────────────────────────────────────────────────────────── A menu's COURSES, switched with no script: radios, and nth-of-type to match the pane. Six at most, which is why there are six pairs of rules and not a loop. */ :is(.halo,._halo) .menu-h{margin-top:clamp(20px,2.4cqw,30px)} :is(.halo,._halo) .tabs{margin-top:clamp(18px,2.2cqw,28px)} :is(.halo,._halo) .tab-r{position:absolute;opacity:0;pointer-events:none;width:0;height:0} /* it is a CONTROL, so it is the width of its own buttons — a segmented switch stretched across a 1140px band is a rule with three words floating in it */ :is(.halo,._halo) .tab-strip{display:flex;width:max-content;max-width:100%;gap:4px;padding:5px;border-radius:var(--r-p); background:var(--glass);border:1px solid var(--edge); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); overflow-x:auto;scrollbar-width:none;margin-bottom:clamp(14px,1.8cqw,22px)} :is(.halo,._halo) .tab-strip::-webkit-scrollbar{display:none} :is(.halo,._halo) .tab-b{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;cursor:pointer; min-height:42px;padding:0 18px;border-radius:var(--r-p);font-size:14.5px;font-weight:600; color:var(--soft);white-space:nowrap;transition:background .18s, color .18s} :is(.halo,._halo) .tab-b i{font-style:normal;font-size:11.5px;letter-spacing:.04em;color:var(--faint); font-variant-numeric:tabular-nums} :is(.halo,._halo) .tab-b:hover{color:var(--ink)} :is(.halo,._halo) .tab-panes{position:relative} /* THE MENU IS A PANE OF GLASS. It was a bare list on the weather; a list of dishes and prices is an object on the page, and every other object here is glass. */ :is(.halo,._halo) .pane{background:var(--glass);border:1px solid var(--edge);border-radius:var(--r); -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4); box-shadow:0 26px 64px -40px color-mix(in oklab, #07060A 70%, transparent), inset 0 1px 0 var(--edge-lit)} :is(.halo,._halo) .pane{display:none;overflow:hidden; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch} /* a course with no photograph is not a half-empty pane — it is a full-width list */ :is(.halo,._halo) .pane:not(:has(.pane-p)){grid-template-columns:1fr} :is(.halo,._halo) .tab-panes.one .pane{display:grid} :is(.halo,._halo) .pane-p{position:relative;min-height:200px} :is(.halo,._halo) .pane-p .img{position:absolute;inset:0;border-radius:0} :is(.halo,._halo) .pane-t{padding:clamp(18px,2.2cqw,30px)} :is(.halo,._halo) .pane-n{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint); margin-bottom:6px} :is(.halo,._halo) .tab-r:nth-of-type(1):checked ~ .tab-panes > .pane:nth-child(1), :is(.halo,._halo) .tab-r:nth-of-type(2):checked ~ .tab-panes > .pane:nth-child(2), :is(.halo,._halo) .tab-r:nth-of-type(3):checked ~ .tab-panes > .pane:nth-child(3), :is(.halo,._halo) .tab-r:nth-of-type(4):checked ~ .tab-panes > .pane:nth-child(4), :is(.halo,._halo) .tab-r:nth-of-type(5):checked ~ .tab-panes > .pane:nth-child(5), :is(.halo,._halo) .tab-r:nth-of-type(6):checked ~ .tab-panes > .pane:nth-child(6){display:grid; animation:halo-pane .32s cubic-bezier(.2,.7,.25,1) both} :is(.halo,._halo) .tab-r:nth-of-type(1):checked ~ .tab-strip > .tab-b:nth-child(1), :is(.halo,._halo) .tab-r:nth-of-type(2):checked ~ .tab-strip > .tab-b:nth-child(2), :is(.halo,._halo) .tab-r:nth-of-type(3):checked ~ .tab-strip > .tab-b:nth-child(3), :is(.halo,._halo) .tab-r:nth-of-type(4):checked ~ .tab-strip > .tab-b:nth-child(4), :is(.halo,._halo) .tab-r:nth-of-type(5):checked ~ .tab-strip > .tab-b:nth-child(5), :is(.halo,._halo) .tab-r:nth-of-type(6):checked ~ .tab-strip > .tab-b:nth-child(6){ background:var(--paper);color:var(--ink); box-shadow:0 6px 18px -10px color-mix(in oklab, #07060A 60%, transparent)} :is(.halo,._halo) .tab-r:nth-of-type(1):checked ~ .tab-strip > .tab-b:nth-child(1) i, :is(.halo,._halo) .tab-r:nth-of-type(2):checked ~ .tab-strip > .tab-b:nth-child(2) i, :is(.halo,._halo) .tab-r:nth-of-type(3):checked ~ .tab-strip > .tab-b:nth-child(3) i, :is(.halo,._halo) .tab-r:nth-of-type(4):checked ~ .tab-strip > .tab-b:nth-child(4) i, :is(.halo,._halo) .tab-r:nth-of-type(5):checked ~ .tab-strip > .tab-b:nth-child(5) i, :is(.halo,._halo) .tab-r:nth-of-type(6):checked ~ .tab-strip > .tab-b:nth-child(6) i{color:var(--accent-text)} @keyframes halo-pane{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ── CARDS, as a rail ─────────────────────────────────────────────────────────────────────────── A rail on every width, because three cards stacked is three screens of scrolling for one band and the card has to stay big enough to want. It ends AT the screen and fades. */ :is(.halo,._halo) .rail{margin-top:clamp(24px,3cqw,40px);display:grid;gap:clamp(12px,1.6cqw,20px); grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:stretch} /* ONE PRODUCT IS NOT A BILLBOARD. Four cards divide the row; one took the whole of it, and a 4:3 frame 1400px wide is a photograph a metre tall. A shop with one thing in it gets a card. */ :is(.halo,._halo) .rail.n1{grid-auto-flow:row;grid-template-columns:minmax(0,460px)} :is(.halo,._halo) .rail.n2{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,480px))} :is(.halo,._halo) .rail.n3{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))} :is(.halo,._halo) .card{display:flex;flex-direction:column;border-radius:var(--r-s);overflow:hidden; transition:transform .18s cubic-bezier(.2,.7,.25,1), box-shadow .18s} :is(.halo,._halo) .card:hover{transform:translateY(-3px); box-shadow:0 24px 48px -24px color-mix(in oklab, #07060A 74%, transparent)} /* a card is something you want, at a size you can see it — 4:5, the way a product is shot */ :is(.halo,._halo) .card .img{aspect-ratio:4/5} :is(.halo,._halo) .card.nopic .card-t{padding-top:clamp(22px,2.4cqw,30px)} :is(.halo,._halo) .card-t{padding:18px 20px 20px;display:flex;flex-direction:column;gap:4px;flex:1} :is(.halo,._halo) .card-t b{font-weight:600;font-size:clamp(17px,1.5cqw,20px);line-height:1.25} :is(.halo,._halo) .card-t span{font-size:13.5px;color:var(--soft);line-height:1.45} :is(.halo,._halo) .card-f{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} :is(.halo,._halo) .card-f em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums; color:var(--accent-text)} :is(.halo,._halo) .card.gone{opacity:.62} :is(.halo,._halo) .tag{font-style:normal;font-size:11px;letter-spacing:.05em;text-transform:uppercase; padding:4px 8px;border-radius:999px;background:var(--fill);color:var(--soft)} :is(.halo,._halo) .tag.out{background:color-mix(in oklab, var(--ink) 82%, var(--paper));color:var(--paper)} /* ── PHOTOGRAPHS ──────────────────────────────────────────────────────────────────────────────── Graded, every one of them — a generated page carries pictures from a stock library, a photographer and somebody's phone at once, and grading only the opening one makes the join worse rather than better. */ :is(.halo,._halo) .img{position:relative;overflow:hidden;background:var(--fill);border-radius:inherit} :is(.halo,._halo) .img img{width:100%;height:100%;object-fit:cover;filter:var(--photo-filter)} :is(.halo,._halo) .img.round{border-radius:50%;aspect-ratio:1;width:96px} /* a real, framed photograph — the one place a picture is shown AS a picture rather than as ground */ :is(.halo,._halo) .frame{border-radius:var(--r);overflow:hidden;border:1px solid var(--edge); box-shadow:0 40px 90px -50px color-mix(in oklab, #07060A 80%, transparent)} :is(.halo,._halo) .frame .img{aspect-ratio:4/5} :is(.halo,._halo) .two{display:grid;gap:clamp(24px,3.4cqw,60px); grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center} :is(.halo,._halo) .two-t{min-width:0} :is(.halo,._halo) .plates{margin-top:clamp(24px,3cqw,40px);display:grid;gap:clamp(10px,1.4cqw,16px); grid-template-columns:repeat(4,1fr)} :is(.halo,._halo) .plate{border-radius:var(--r-s);overflow:hidden;aspect-ratio:4/3; border:1px solid var(--edge);transition:transform .18s} :is(.halo,._halo) .plate:hover{transform:scale(1.015)} :is(.halo,._halo) .plate .img{height:100%} /* the first plate takes the room of four — one leads, the rest follow */ :is(.halo,._halo) .plates.n5 .plate:first-child,:is(.halo,._halo) .plates.n4 .plate:first-child, :is(.halo,._halo) .plates.n3 .plate:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto} :is(.halo,._halo) .plates.n1{grid-template-columns:1fr} :is(.halo,._halo) .plates.n1 .plate{aspect-ratio:16/9} :is(.halo,._halo) .plates.n2{grid-template-columns:repeat(2,1fr)} /* ── QUESTIONS ──────────────────────────────────────────────────────────────────────────────── */ :is(.halo,._halo) .qs{display:grid} :is(.halo,._halo) .qs.glass{margin-top:clamp(22px,2.6cqw,36px);padding:6px clamp(16px,2cqw,26px)} :is(.halo,._halo) .q{border-top:1px solid var(--line)} :is(.halo,._halo) .q:first-child{border-top:0} :is(.halo,._halo) .q summary{display:flex;align-items:center;gap:16px;padding:17px 0;cursor:pointer; font-size:clamp(16px,1.5cqw,19px);font-weight:600;list-style:none} :is(.halo,._halo) .q summary::-webkit-details-marker{display:none} :is(.halo,._halo) .q summary i{margin-left:auto;flex:0 0 auto;position:relative;width:15px;height:15px} :is(.halo,._halo) .q summary i::before,:is(.halo,._halo) .q summary i::after{content:"";position:absolute;inset:50% 0 auto; height:1.5px;background:currentColor;transform:translateY(-50%);transition:transform .2s} :is(.halo,._halo) .q summary i::after{transform:translateY(-50%) rotate(90deg)} :is(.halo,._halo) .q[open] summary i::after{transform:translateY(-50%) rotate(0)} :is(.halo,._halo) .q .a{padding:0 0 18px;color:var(--soft);line-height:1.62;max-width:62ch} /* ── HOURS ──────────────────────────────────────────────────────────────────────────────────── */ :is(.halo,._halo) .open{display:flex;align-items:center;gap:10px;margin-top:16px; font-size:clamp(19px,2.2cqw,32px);font-family:var(--display)} :is(.halo,._halo) .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto; box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent)} :is(.halo,._halo) .open a{font-family:var(--text);font-size:14px;color:var(--soft);text-decoration:underline; text-underline-offset:3px} :is(.halo,._halo) .days{display:grid;gap:2px} :is(.halo,._halo) .days.glass{margin-top:clamp(20px,2.4cqw,32px);padding:10px} :is(.halo,._halo) .days li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-s)} :is(.halo,._halo) .days li.today{background:var(--fill)} :is(.halo,._halo) .days b{font-weight:600;font-size:15px} :is(.halo,._halo) .days em{margin-left:auto;font-style:normal;color:var(--soft); font-variant-numeric:tabular-nums} :is(.halo,._halo) .days i{font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--accent-text)} /* ── PLACE ──────────────────────────────────────────────────────────────────────────────────── */ :is(.halo,._halo) .place{display:grid;gap:clamp(24px,3cqw,44px);grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center} :is(.halo,._halo) .ways{display:grid;gap:2px} :is(.halo,._halo) .ways.glass{margin-top:clamp(20px,2.4cqw,30px);padding:10px} :is(.halo,._halo) .way{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:var(--r-s); transition:background .14s} :is(.halo,._halo) .way:hover{background:var(--fill)} :is(.halo,._halo) .way-i{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:50%; background:var(--fill);color:var(--accent-text)} :is(.halo,._halo) .way-t{display:grid;min-width:0} :is(.halo,._halo) .way-t span{font-size:12px;color:var(--faint);letter-spacing:.04em} :is(.halo,._halo) .way-t b{font-weight:600;font-size:15.5px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} :is(.halo,._halo) .way-g{margin-left:auto;color:var(--faint);flex:0 0 auto} :is(.halo,._halo) .map{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1; border:1px solid var(--edge)} :is(.halo,._halo) .map-g{position:absolute;inset:-50%;display:grid;grid-template-columns:repeat(3,1fr); width:200%;height:200%} :is(.halo,._halo) .map-g img{width:100%;height:100%;object-fit:cover} :is(.halo,._halo) .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:46px;height:46px;border-radius:50%;display:grid;place-items:center;overflow:hidden; background:var(--paper);border:2px solid var(--accent); box-shadow:0 10px 24px -10px color-mix(in oklab, #07060A 70%, transparent)} :is(.halo,._halo) .pin img{width:100%;height:100%;object-fit:cover} :is(.halo,._halo) .pin i{width:12px;height:12px;border-radius:50%;background:var(--accent)} :is(.halo,._halo) .map-a{position:absolute;right:8px;bottom:8px;font-size:10px;padding:3px 8px; border-radius:999px;background:var(--glass-2);color:var(--soft)} /* ── FORMS ──────────────────────────────────────────────────────────────────────────────────── */ :is(.halo,._halo) .form{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))} :is(.halo,._halo) .form.glass{margin-top:clamp(22px,2.6cqw,34px);padding:clamp(18px,2.2cqw,30px)} :is(.halo,._halo) .fld{display:grid;gap:6px} :is(.halo,._halo) .fld.wide,:is(.halo,._halo) .form .btn,:is(.halo,._halo) .form .note{grid-column:1/-1} :is(.halo,._halo) .lab{font-size:12.5px;color:var(--faint);letter-spacing:.03em} :is(.halo,._halo) .fld input,:is(.halo,._halo) .fld select,:is(.halo,._halo) .fld textarea{ width:100%;min-height:48px;padding:12px 15px;border-radius:var(--r-s); background:var(--glass-2);border:1px solid var(--edge);color:var(--ink);font:inherit; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} :is(.halo,._halo) .fld textarea{min-height:112px;resize:vertical} :is(.halo,._halo) .fld input::placeholder,:is(.halo,._halo) .fld textarea::placeholder{color:var(--faint)} :is(.halo,._halo) .fld input:invalid:not(:placeholder-shown){border-color:color-mix(in oklab,#e5484d 60%,var(--edge))} :is(.halo,._halo) .note{font-size:13.5px;color:var(--soft);min-height:1.2em} /* ── PEOPLE · MARKS · FILM · EMBED ──────────────────────────────────────────────────────────── */ :is(.halo,._halo) .whos{margin-top:clamp(24px,3cqw,40px);display:grid;gap:clamp(14px,1.8cqw,24px); grid-template-columns:repeat(4,1fr)} :is(.halo,._halo) .whos.n1{grid-template-columns:minmax(0,320px)} :is(.halo,._halo) .whos.n2{grid-template-columns:repeat(2,1fr)} :is(.halo,._halo) .whos.n3{grid-template-columns:repeat(3,1fr)} :is(.halo,._halo) .who{display:grid;justify-items:center;text-align:center;gap:6px;padding:22px 16px; border-radius:var(--r-s)} :is(.halo,._halo) .who b{font-weight:600;font-size:16px;margin-top:8px} :is(.halo,._halo) .who span{font-size:13.5px;color:var(--soft)} :is(.halo,._halo) .who-i{display:grid;place-items:center;width:96px;height:96px;border-radius:50%; background:var(--accent);color:var(--on-accent);font-family:var(--display);font-size:38px} :is(.halo,._halo) .who-l{display:flex;gap:8px;margin-top:8px} :is(.halo,._halo) .who-l a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%; background:var(--fill);color:var(--soft)} :is(.halo,._halo) .marks{margin-top:clamp(20px,2.4cqw,30px);display:flex;gap:8px;flex-wrap:wrap} :is(.halo,._halo) .mk{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 15px; border-radius:var(--r-p);background:var(--glass-2);border:1px solid var(--edge);font-size:14px} :is(.halo,._halo) .mk:hover{background:var(--fill)} :is(.halo,._halo) .film{margin-top:clamp(24px,3cqw,38px);position:relative;border-radius:var(--r); overflow:hidden;aspect-ratio:16/9} :is(.halo,._halo) .film video{width:100%;height:100%;object-fit:cover;display:block} :is(.halo,._halo) .film .img{height:100%} :is(.halo,._halo) .play{position:absolute;inset:0;display:grid;place-items:center} :is(.halo,._halo) .play i{display:grid;place-items:center;width:72px;height:72px;border-radius:50%; background:var(--glass-2);border:1px solid var(--edge-lit); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} :is(.halo,._halo) .play i::after{content:"";border-left:18px solid currentColor;border-top:11px solid transparent; border-bottom:11px solid transparent;margin-left:5px} :is(.halo,._halo) .qr{margin-top:24px;max-width:240px} :is(.halo,._halo) .qr .img{aspect-ratio:1;border-radius:var(--r-s)} /* ── THE QUOTE BAND ─────────────────────────────────────────────────────────────────────────── */ :is(.halo,._halo) .said-w{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3cqw,56px); align-items:center} :is(.halo,._halo) .said-t{min-width:0} /* ── THE ONE SOLID BAND ───────────────────────────────────────────────────────────────────────── A page of glass on photographs is a page where nothing has weight. Once — at the band that most wants somebody to act — the accent is the ground and the button is the pale thing on it. AND EVERYTHING IN IT IS CENTRED, boxes included: `.lede` is 56 characters wide, so centring the text and not the box left the words sitting off to one side of a centred button. */ :is(.halo,._halo) .band.solid{background:var(--accent);color:var(--on-accent); --soft:color-mix(in oklab, var(--on-accent) 82%, var(--accent)); --faint:color-mix(in oklab, var(--on-accent) 62%, var(--accent)); --accent-text:var(--on-accent); --edge:color-mix(in oklab, var(--on-accent) 28%, transparent)} :is(.halo,._halo) .band.solid::before{content:none} :is(.halo,._halo) .band.solid .sky{opacity:.26;mix-blend-mode:soft-light} :is(.halo,._halo) .band.solid .wrap{text-align:center} :is(.halo,._halo) .band.solid .lede,:is(.halo,._halo) .band.solid .d{margin-inline:auto} :is(.halo,._halo) .band.solid .acts{justify-content:center} /* ── THE DOCK — the bar and the badge ─────────────────────────────────────────────────────────── STICKY, NOT FIXED. `position:fixed` fixes to the WINDOW: in the editor's phone preview the bar ran the full width of the laptop behind the little page it belonged to, and it sat underneath the editor's own bar where nobody could see it. Sticky keeps it inside the page it is part of, at the size that page is. */ :is(.halo,._halo) .dock{position:sticky;bottom:0;z-index:40;display:flex;align-items:center; justify-content:center;padding:0 12px max(14px,env(safe-area-inset-bottom));pointer-events:none; margin-top:clamp(20px,3cqw,40px)} :is(.halo,._halo) .dock > *{pointer-events:auto} /* while an owner is editing, the editor's own bar owns the bottom of the window */ body[data-owner]:not(.preview) :is(.halo,._halo) .dock{padding-bottom:86px} :is(.halo,._halo) .bar{position:relative;display:flex;justify-content:center;max-width:100%} :is(.halo,._halo) .bar-in{display:flex;align-items:center;gap:clamp(8px,1.4cqw,20px); max-width:100%;padding:8px 8px 8px 18px;border-radius:var(--r-p); background:var(--glass-2);border:1px solid var(--edge); -webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6); box-shadow:0 22px 50px -24px color-mix(in oklab, #07060A 74%, transparent), inset 0 1px 0 var(--edge-lit)} :is(.halo,._halo) .mark{display:flex;align-items:center;flex:0 0 auto;max-width:40%} :is(.halo,._halo) .mark-img{height:26px;width:auto;object-fit:contain} :is(.halo,._halo) .mark-t{font-family:var(--display);font-size:19px;line-height:1;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} :is(.halo,._halo) .bar-links{display:flex;align-items:center;gap:clamp(10px,1.4cqw,20px);min-width:0} :is(.halo,._halo) .bar-links a{font-size:14px;color:var(--soft);white-space:nowrap;transition:color .14s} :is(.halo,._halo) .bar-links a:hover{color:var(--ink)} :is(.halo,._halo) .bar-end{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto} :is(.halo,._halo) .bar-cart{position:relative;display:grid;place-items:center;width:38px;height:38px; border-radius:50%;background:var(--fill)} :is(.halo,._halo) .bar-cart b{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px; border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:11px; display:grid;place-items:center} /* THE WAY TO THE REST IS ON EVERY WIDTH. It used to appear only on a phone, so a business with eight pages had four of them reachable on a laptop and no sign the others existed. */ :is(.halo,._halo) .bar-more{display:flex;flex-direction:column;gap:4px;width:38px;height:38px; border-radius:50%;background:var(--fill);align-items:center;justify-content:center} :is(.halo,._halo) .bar-more i{display:block;width:15px;height:1.5px;background:currentColor;border-radius:2px; transition:transform .2s} :is(.halo,._halo) .bar-more[aria-expanded="true"] i:first-child{transform:translateY(2.75px) rotate(45deg)} :is(.halo,._halo) .bar-more[aria-expanded="true"] i:last-child{transform:translateY(-2.75px) rotate(-45deg)} /* the whole menu: a PANEL over the bar, never a screen. Twelve links blown up to fill a phone is a page nobody asked to open — it scrolls inside itself instead. */ :is(.halo,._halo) .bar-all{position:absolute;left:auto;right:0;bottom:calc(100% + 10px); width:min(320px,86cqw);max-height:min(52svh,420px);overflow-y:auto;overscroll-behavior:contain; display:grid;gap:2px;padding:10px;border-radius:var(--r);scrollbar-width:none; background:var(--glass-2);border:1px solid var(--edge); -webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6); box-shadow:0 26px 60px -26px color-mix(in oklab, #07060A 74%, transparent)} :is(.halo,._halo) .bar-all::-webkit-scrollbar{display:none} :is(.halo,._halo) .bar-all[hidden]{display:none} :is(.halo,._halo) .bar-all a{padding:13px 14px;border-radius:var(--r-s);font-size:16px} :is(.halo,._halo) .bar-all a:hover{background:var(--fill)} /* ── THE BADGE ───────────────────────────────────────────────────────────────────────────────── A referral rather than a credit line: the mark, then the words. It rides in the dock at the far left, so it can never sit on top of the bar or escape the page in a phone preview. */ :is(.halo,._halo) .qck-badge{position:absolute;left:14px;bottom:max(14px,env(safe-area-inset-bottom)); transform:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px; border-radius:var(--r-p);max-width:none; font-size:12px;font-weight:600;color:var(--soft);background:var(--glass-2);border:1px solid var(--edge); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} /* THE OWNER IS NOT THE AUDIENCE FOR IT. Every other renderer hides the badge while somebody is editing and shows it in preview and to visitors; this one showed it always, so an owner had a referral pill sitting in the corner of their own workspace. `transform:none` is not decoration either — the bento badge is centred with translateX(-50%), and that rule reached this one and pulled it half its own width off the left edge of the page. */ body[data-owner]:not(.preview) :is(.halo,._halo) .qck-badge{display:none} body.preview :is(.halo,._halo) .qck-badge{display:inline-flex;bottom:max(14px,env(safe-area-inset-bottom))} :is(.halo,._halo) .qck-badge:hover{transform:translateY(-1px)} :is(.halo,._halo) .qb-mark{display:inline-flex;align-items:center;flex:0 0 auto} :is(.halo,._halo) .qb-mark svg{height:15px;width:auto;display:block} :is(.halo,._halo) .qb-tx{white-space:nowrap} /* ── FOOTER ─────────────────────────────────────────────────────────────────────────────────── */ /* THE END OF THE PAGE IS STILL THE PAGE. It was a flat grey block with a list of links in it — the one band with none of the design on it. It keeps the light (the accent pours in from the corner, the way every band's does), the name is set in the display face, and the links are a column of real size rather than a paragraph of small grey text. */ :is(.halo,._halo) .foot{position:relative;overflow:hidden; padding:clamp(56px,6cqw,96px) 0 clamp(34px,3.4cqw,52px); background:var(--fill);border-top:1px solid var(--line)} :is(.halo,._halo) .foot::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: linear-gradient(200deg, color-mix(in oklab, var(--accent) 26%, transparent) 0%, color-mix(in oklab, var(--accent) 6%, transparent) 22%, transparent 48%), radial-gradient(70% 60% at 92% 4%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%)} :is(.halo,._halo) .foot .wrap{position:relative;z-index:1} :is(.halo,._halo) .foot-g{display:grid;gap:clamp(24px,3cqw,48px); grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start} :is(.halo,._halo) .foot-m{height:44px;width:auto;object-fit:contain} :is(.halo,._halo) .foot-n{font-family:var(--display);font-size:clamp(28px,3cqw,40px);line-height:1} :is(.halo,._halo) .foot-l{display:grid;gap:10px;justify-items:start;align-content:start} :is(.halo,._halo) .foot-l a{font-size:clamp(15px,1.3cqw,17px);color:var(--soft); border-bottom:1px solid transparent;transition:color .14s, border-color .14s} :is(.halo,._halo) .foot-l a:hover{color:var(--ink);border-color:var(--accent)} :is(.halo,._halo) .foot-a{display:grid;gap:14px;justify-items:start;min-width:0} /* the contact band's text column, beside the map */ :is(.halo,._halo) .place-t{min-width:0} /* ── THE OWNER IS LOOKING ─────────────────────────────────────────────────────────────────────── The gear the editor puts on each band, and the two states a band can be in while being edited. `.band-edit` is the WRAPPER the render puts round each section for the owner. It used to be called `band` — the same name the theme's own
carries — so every band rule applied twice and the editor showed a paper-coloured gap above and below every section on the page. */ :is(.halo,._halo) .band-edit{position:relative;display:block} :is(.halo,._halo) .band-gear{position:absolute;top:14px;right:14px;z-index:6;width:36px;height:36px; display:grid;place-items:center;border-radius:50%; background:var(--glass-2);border:1px solid var(--edge);color:var(--ink); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .16s} /* THE FOOTER AND THE BAR ARE SECTIONS TOO. Their gear was drawn — every band's is — but the only rule that revealed one asked for a `.band-edit` wrapper, and these two are not wrapped: they are drawn from the site rather than from a widget. So the two sections an owner most often wants to edit were the two with no way in. */ [data-owner] :is(.halo,._halo) .band-edit:hover .band-gear, [data-owner] :is(.halo,._halo) .foot:hover .band-gear, [data-owner] :is(.halo,._halo) .bar:hover .band-gear, [data-owner] :is(.halo,._halo) .band-gear:focus-visible{opacity:1} /* the bar is a floating pill: its gear sits ON it, not in the corner of the page */ :is(.halo,._halo) .bar .band-gear{top:auto;bottom:calc(100% + 8px);right:6px} [data-owner] :is(.halo,._halo) .is-off{opacity:.4} [data-owner] :is(.halo,._halo) .is-off::after{content:"";position:absolute;inset:0;z-index:5; background:repeating-linear-gradient(45deg, transparent 0 12px, color-mix(in oklab, var(--ink) 6%, transparent) 12px 24px);pointer-events:none} [data-owner] :is(.halo,._halo) .derived{position:relative} :is(.halo,._halo) .empty-band .lede{color:var(--faint)} /* ── THE ICON SLOT ──────────────────────────────────────────────────────────────────────────── */ :is(.halo,._halo) .ico{display:inline-grid;place-items:center;width:1.05em;height:1.05em;flex:0 0 auto} :is(.halo,._halo) .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6} /* ══ THE PHONE ═════════════════════════════════════════════════════════════════════════════════ Not the desktop narrowed — a second design in the same voice. Container queries on the page, never @media, because the editor previews a phone by narrowing #clay-page and a media query never sees that. ═══════════════════════════════════════════════════════════════════════════════════════════ */ @container page (max-width: 760px){ /* the gutter is the first thing to go on a screen that is already narrow */ :is(.halo,._halo) .wrap,:is(.halo,._halo) .wrap.wide,:is(.halo,._halo) .wrap.mid{width:calc(100% - 22px)} /* every band owns the screen: one idea at a time, rather than four bands passing in a second */ :is(.halo,._halo) .band.full{min-height:88svh} :is(.halo,._halo) .band{padding:44px 0} /* A PHONE IS A TALL PICTURE WITH WRITING ALONG THE BOTTOM. The scrim that darkens the left of a wide band leaves the bottom of a narrow one bright, and the words sat on the brightest part of somebody's photograph. Down here the scrim runs up from the floor instead. */ :is(.halo,._halo) .band.pic .sky-wash{ background: linear-gradient(var(--turn,0deg), color-mix(in oklab, var(--accent) 58%, transparent) 0%, color-mix(in oklab, var(--accent) 14%, transparent) 14%, transparent 32%), linear-gradient(0deg, color-mix(in oklab, #07060A 80%, transparent) 0%, color-mix(in oklab, #07060A 46%, transparent) 34%, color-mix(in oklab, #07060A 12%, transparent) 70%, transparent 100%)} /* the hero stacks, the words sit on the floor of the picture, and the stats become a rail */ :is(.halo,._halo) .hero{align-items:end} :is(.halo,._halo) .hero-in{grid-template-columns:1fr;align-items:end;gap:22px} :is(.halo,._halo) .hero-t{max-width:none} :is(.halo,._halo) .hero-s{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);justify-items:stretch} :is(.halo,._halo) .stat{min-width:0;padding:10px 12px;gap:10px;border-radius:var(--r-s)} :is(.halo,._halo) .stat-t b{font-size:14px} :is(.halo,._halo) .stat-t span{font-size:11.5px} :is(.halo,._halo) .two,:is(.halo,._halo) .said-w{grid-template-columns:1fr} :is(.halo,._halo) .frame .img{aspect-ratio:4/3} :is(.halo,._halo) .pane{grid-template-columns:1fr} :is(.halo,._halo) .pane-p{min-height:0;aspect-ratio:16/10} /* two buttons side by side leave neither tappable: they stack, full width, the first one leads */ :is(.halo,._halo) .acts{gap:8px} :is(.halo,._halo) .acts .btn{width:100%} /* A RAIL, NOT A STACK. It ends AT the screen — the padding is on the last card, never the track, or every card stops short — and it FADES at the right edge, because a card sliced flat by the viewport is indistinguishable from a broken layout. */ :is(.halo,._halo) .rail{grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory; margin-inline:-11px;padding-inline:11px; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); scrollbar-width:none} :is(.halo,._halo) .rail::-webkit-scrollbar{display:none} :is(.halo,._halo) .card{scroll-snap-align:start} :is(.halo,._halo) .rail > :last-child{margin-right:11px} /* plates are LANDSCAPE, the way a phone is held — near-square five deep is two thousand pixels of scroll for one gallery */ :is(.halo,._halo) .plates{grid-template-columns:1fr;gap:8px} :is(.halo,._halo) .plates .plate{aspect-ratio:16/10} :is(.halo,._halo) .plates.n5 .plate:first-child,:is(.halo,._halo) .plates.n4 .plate:first-child, :is(.halo,._halo) .plates.n3 .plate:first-child{grid-column:auto;grid-row:auto;aspect-ratio:16/10} /* THE MAP GOES. The screen is not wide enough for a legible map AND for the ways to reach somebody to stay above the fold — and the ways are what this band is for. */ :is(.halo,._halo) .place{grid-template-columns:1fr} :is(.halo,._halo) .map{display:none} :is(.halo,._halo) .form{grid-template-columns:1fr} :is(.halo,._halo) .whos,:is(.halo,._halo) .whos.n2,:is(.halo,._halo) .whos.n3{grid-template-columns:1fr 1fr} :is(.halo,._halo) .foot-g{grid-template-columns:1fr} :is(.halo,._halo) .foot-l{grid-template-columns:1fr 1fr;display:grid} /* the halo is smaller but never small — it is still the thing your eye lands on */ :is(.halo,._halo) .ring{width:124px} /* THE BAR STOPS BEING A PILL and becomes a bar of the same glass — the same idea at a size that can be pressed. The menu control is at the FAR edge, where a thumb reaches without moving. */ :is(.halo,._halo) .bar{width:100%} :is(.halo,._halo) .bar-in{width:100%;padding:8px 8px 8px 14px} :is(.halo,._halo) .bar-links{display:none} :is(.halo,._halo) .bar-in .btn{display:none} :is(.halo,._halo) .bar-in .btn.fill{display:inline-flex} :is(.halo,._halo) .bar-all{width:100%;right:0} /* the badge sits above the bar rather than beside it — there is no beside on a phone */ :is(.halo,._halo) .dock{flex-direction:column;align-items:stretch;gap:8px;padding-bottom:max(12px,env(safe-area-inset-bottom))} :is(.halo,._halo) .qck-badge{position:static;align-self:flex-start;height:30px;font-size:11px} body[data-owner]:not(.preview) :is(.halo,._halo) .qck-badge{bottom:auto} } /* the narrowest real phone */ @container page (max-width: 400px){ :is(.halo,._halo) .hero .d{font-size:40px} :is(.halo,._halo) .rail{grid-auto-columns:84%} :is(.halo,._halo) .whos,:is(.halo,._halo) .whos.n2,:is(.halo,._halo) .whos.n3{grid-template-columns:1fr} } /* MOTION MAY NEVER HIDE ANYTHING. Every starting state here is one a reader could live with for ever: the ground drifts, and nothing fades in from nothing. */ @media (prefers-reduced-motion: no-preference){ :is(.halo,._halo) .sky-p{animation:halo-drift 48s ease-in-out infinite alternate} } @keyframes halo-drift{ from{transform:scale(1.06) translate3d(0,0,0)} to{transform:scale(1.14) translate3d(-1.5%,-1%,0)} } @media (prefers-reduced-motion: reduce){ :is(.halo,._halo) .pane{animation:none !important} } /* ══ THE SHEETS ════════════════════════════════════════════════════════════════════════════════ A sheet is a PAGE, not a dialog: it takes the screen, it has an address, and the back button closes it. It is also a continuation of THIS page — the same glass, the same rings, the same cards — with one thing changed: on a phone the shop band is a rail and the shop SHEET is a grid, because nobody swipes sideways through twelve products looking for one. ═══════════════════════════════════════════════════════════════════════════════════════════ */ :is(.halo,._halo) .sheet-host{position:fixed;inset:0;z-index:60} :is(.halo,._halo) .sheet-host[hidden]{display:none} /* the page behind goes properly out of focus — the sheet is the only thing in focus while it is open, which is the whole reason it is allowed to cover a page this photographic */ :is(.halo,._halo) .sheet-veil{position:absolute;inset:0;overflow:auto;padding:clamp(12px,2.4cqw,40px); background:color-mix(in oklab, #07060A 58%, transparent); -webkit-backdrop-filter:blur(30px) saturate(.9);backdrop-filter:blur(30px) saturate(.9)} :is(.halo,._halo) .sheet{position:relative;margin:0 auto;max-width:1040px; /* its own container, so the phone rules below fire on the sheet's width rather than the page's */ container-type:inline-size;container-name:page; border-radius:var(--r);padding:clamp(22px,3cqw,44px); /* GLASS, not cream. 92% paper is an opaque box with a blur behind it doing nothing you can see; at 78% the page reads through it and the sheet belongs to the same design as the bar. */ background:color-mix(in oklab, var(--paper) 78%, transparent);border:1px solid var(--edge-lit); -webkit-backdrop-filter:blur(34px) saturate(1.6);backdrop-filter:blur(34px) saturate(1.6); box-shadow:0 40px 100px -50px color-mix(in oklab, #07060A 80%, transparent), inset 0 1px 0 var(--edge-lit)} :is(.halo,._halo) .sheet-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:clamp(18px,2.2cqw,30px)} :is(.halo,._halo) .sheet-head .d{font-size:clamp(28px,3.6cqw,48px)} :is(.halo,._halo) .sheet-head > div{min-width:0} :is(.halo,._halo) .sheet-head .btn{margin-left:auto;flex:0 0 auto} :is(.halo,._halo) .sheet-body{display:grid;gap:clamp(16px,2cqw,26px)} /* everything the RUNTIME writes into a sheet, given the same voice as everything we write */ :is(.halo,._halo) .sheet h3{font-weight:600;font-size:17px;line-height:1.3} :is(.halo,._halo) .sheet p{font-size:14.5px;color:var(--soft);line-height:1.55} :is(.halo,._halo) .sheet .eyebrow{margin-bottom:8px} /* a product suggested under another one: the runtime writes button.card with an image and a price */ :is(.halo,._halo) [data-others]{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:clamp(10px,1.4cqw,16px)} :is(.halo,._halo) [data-others] .card{padding:0;text-align:left;align-items:stretch} :is(.halo,._halo) [data-others] .card > div{padding:12px 14px} :is(.halo,._halo) [data-others] .card .price{padding:0 14px 14px;font-size:16px} :is(.halo,._halo) [data-badges]{display:flex;gap:6px;flex-wrap:wrap} /* A PHOTOGRAPH IS LOOKED AT IN A DARK ROOM. The viewer used the same pale glass as every other sheet, so a picture sat in a cream box with a strip of thumbnails on a white shelf under it — the one sheet whose whole job is the picture. It gets its own ground, and the picture fills it. */ :is(.halo,._halo) .viewer .sheet{max-width:1180px;background:color-mix(in oklab, #07060A 62%, transparent); border-color:color-mix(in oklab,#fff 16%, transparent);color:#F6F3F0; --ink:#F6F3F0;--soft:color-mix(in oklab,#F6F3F0 74%,#07060A);--faint:color-mix(in oklab,#F6F3F0 52%,#07060A); --fill:color-mix(in oklab,#fff 10%,transparent);--edge:color-mix(in oklab,#fff 18%,transparent)} :is(.halo,._halo) .viewer .shot .img{aspect-ratio:auto;height:min(68svh,760px);background:transparent} :is(.halo,._halo) .viewer .shot img{object-fit:contain} :is(.halo,._halo) .viewer .sheet-head .d{color:#F6F3F0} /* the category strip — one line that scrolls, never four rows of pills that push the first item off the screen and then follow you down the page */ :is(.halo,._halo) .chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} :is(.halo,._halo) .chips::-webkit-scrollbar{display:none} :is(.halo,._halo) .chip{flex:0 0 auto;min-height:38px;padding:0 15px;border-radius:var(--r-p);font-size:14px; background:var(--fill);color:var(--soft);border:1px solid transparent;white-space:nowrap} :is(.halo,._halo) .chip.on{background:var(--accent);color:var(--on-accent)} /* a group of rows, headed by its category — with the category's own photograph where it has one */ :is(.halo,._halo) .grp + .grp{margin-top:clamp(24px,3cqw,40px)} :is(.halo,._halo) .grp-p{border-radius:var(--r-s);overflow:hidden;aspect-ratio:21/7;margin-bottom:14px} :is(.halo,._halo) .grp-p img{width:100%;height:100%;object-fit:cover;filter:var(--photo-filter)} :is(.halo,._halo) .grp-t{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6cqw,34px); line-height:1.1;margin-bottom:4px} :is(.halo,._halo) .grp-t i{font-style:normal;font-family:var(--text);font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--faint);margin-left:8px;white-space:nowrap} :is(.halo,._halo) .grp-n{font-size:14px;color:var(--soft);margin-bottom:10px;max-width:58ch} /* a row with a photograph is its own drawing — a menu where three of thirty have one is not the same list as one with none */ :is(.halo,._halo) .row.haspic{align-items:center} :is(.halo,._halo) .row-p{flex:0 0 auto;width:56px;height:56px;border-radius:12px;overflow:hidden; background:var(--fill)} :is(.halo,._halo) .row-p img{width:100%;height:100%;object-fit:cover;filter:var(--photo-filter)} :is(.halo,._halo) .row-t{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px} :is(.halo,._halo) .row .now{font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--accent-text);margin-left:8px} :is(.halo,._halo) .row.today{background:var(--fill);border-radius:var(--r-s);padding-inline:12px} /* a quotation in a set, and a person in one */ :is(.halo,._halo) .said{padding:18px 0;border-top:1px solid var(--line)} :is(.halo,._halo) .said:first-child{border-top:0} :is(.halo,._halo) .said blockquote{font-family:var(--display);font-size:clamp(19px,2.2cqw,27px);line-height:1.25; max-width:44ch} :is(.halo,._halo) .sheet-whos{display:grid;gap:clamp(12px,1.6cqw,20px); grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} /* THE SHEET'S GRID IS NOT THE BAND'S. The band is a rail; this wraps and scrolls down, the way the sheet already scrolls. A theme that reuses the band's grid unchanged ships the rail. */ :is(.halo,._halo) .sheet-cards{display:grid;gap:clamp(12px,1.6cqw,20px); grid-template-columns:repeat(auto-fill,minmax(210px,1fr))} :is(.halo,._halo) .sheet-more{display:flex;align-items:center;gap:14px;margin-top:8px} :is(.halo,._halo) .sheet-more .grp-t{margin:0} :is(.halo,._halo) .sheet-more .btn{margin-left:auto} /* the prose page a long story gets */ :is(.halo,._halo) .prose{max-width:66ch;display:grid;gap:16px} :is(.halo,._halo) .prose p{color:var(--soft);line-height:1.68;font-size:16px} :is(.halo,._halo) .prose h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.4cqw,30px); margin-top:10px} /* ── ONE PRODUCT ────────────────────────────────────────────────────────────────────────────── */ :is(.halo,._halo) .pdp{display:grid;gap:clamp(20px,2.6cqw,40px);grid-template-columns:minmax(0,1fr) minmax(0,1fr)} :is(.halo,._halo) .pdp-p{display:grid;gap:10px;align-content:start} :is(.halo,._halo) .img.main{aspect-ratio:4/5;border-radius:var(--r-s)} /* the runtime fills [data-thumbs] with `.img` DIVS carrying their own inline sizing — a rule written for bare children styled nothing at all, in the viewer and in a product */ :is(.halo,._halo) .thumbs,:is(.halo,._halo) .strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none} :is(.halo,._halo) .thumbs::-webkit-scrollbar,:is(.halo,._halo) .strip::-webkit-scrollbar{display:none} :is(.halo,._halo) .thumbs .img,:is(.halo,._halo) .strip .img{width:72px;flex:0 0 auto;border-radius:12px; border:1px solid var(--edge);cursor:pointer;transition:border-color .14s, opacity .14s} :is(.halo,._halo) .thumbs .img:hover,:is(.halo,._halo) .strip .img:hover{border-color:var(--accent)} :is(.halo,._halo) .thumbs .img.on,:is(.halo,._halo) .strip .img.on{border-color:var(--accent)} :is(.halo,._halo) .pdp-t{display:grid;gap:18px;align-content:start} :is(.halo,._halo) .pdp-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap} /* `.price` is written by the runtime as well as by us — a basket line and a product both use it */ :is(.halo,._halo) .price{font-family:var(--display);font-size:clamp(24px,2.8cqw,34px);line-height:1; color:var(--accent-text);font-variant-numeric:tabular-nums;white-space:nowrap} :is(.halo,._halo) .fine{font-size:13px;color:var(--faint);line-height:1.5} :is(.halo,._halo) .buyrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap} :is(.halo,._halo) .buyrow .btn{flex:1;min-width:160px} /* the stepper — in a product sheet, and smaller in a basket line */ :is(.halo,._halo) .qty{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:var(--r-p); background:var(--fill);border:1px solid var(--edge)} :is(.halo,._halo) .qty button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center; font-size:17px;line-height:1} :is(.halo,._halo) .qty button:hover{background:var(--glass-2)} :is(.halo,._halo) .qty b{min-width:28px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600} /* the options the runtime writes per product: a word, or a colour */ :is(.halo,._halo) .opts{display:flex;gap:8px;flex-wrap:wrap} :is(.halo,._halo) .opt{min-height:40px;padding:0 14px;border-radius:var(--r-p);font-size:14px; background:var(--fill);border:1px solid var(--edge);color:var(--soft)} :is(.halo,._halo) .opt.on{background:var(--accent);color:var(--on-accent);border-color:transparent} :is(.halo,._halo) .opt.off{opacity:.38;pointer-events:none;text-decoration:line-through} /* ── THE BASKET ─────────────────────────────────────────────────────────────────────────────── */ :is(.halo,._halo) .total{display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding-top:18px;border-top:1px solid var(--line)} :is(.halo,._halo) .total .d{font-family:var(--display);font-size:clamp(20px,2.2cqw,28px)} :is(.halo,._halo) .btn.wide{width:100%} :is(.halo,._halo) .line{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)} :is(.halo,._halo) .line:first-child{border-top:0} :is(.halo,._halo) .line .img{width:56px;height:56px;border-radius:12px;flex:0 0 auto} :is(.halo,._halo) .line b{font-weight:600;font-size:15px} :is(.halo,._halo) .line span{display:block;font-size:13px;color:var(--soft)} /* ── THE BOOKING WALK ───────────────────────────────────────────────────────────────────────── */ :is(.halo,._halo) .steps{display:grid;gap:10px} :is(.halo,._halo) .step{border-radius:var(--r-s);border:1px solid var(--edge);background:var(--glass-2); overflow:hidden} :is(.halo,._halo) .step-head{display:flex;align-items:center;gap:12px;width:100%;padding:15px 16px; text-align:left} :is(.halo,._halo) .step-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%; background:var(--fill);font-size:13px;font-weight:600;flex:0 0 auto} :is(.halo,._halo) .step.on .step-n,:is(.halo,._halo) .step[open] .step-n{background:var(--accent);color:var(--on-accent)} :is(.halo,._halo) .step-t{font-weight:600;font-size:15px} :is(.halo,._halo) .step-v{margin-left:auto;font-size:13.5px;color:var(--soft);text-align:right; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52%} :is(.halo,._halo) .step-body{padding:0 16px 18px;display:none} :is(.halo,._halo) .step.on .step-body{display:block} :is(.halo,._halo) .cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-bottom:10px} /* THE DAYS AND THE TIMES ARE , NOT