/* Clay site — theme system + bento grid + glass widgets + editor chrome. Lifted from nxtwk's liquid-glass bento. A "theme" = a token scope below; add a new [data-theme="x"] block to add a theme. */ /* ── self-hosted variable fonts (served from /fonts) ── */ @font-face { font-family:'Satoshi'; src:url(/fonts/Satoshi-Variable.woff2) format('woff2'); font-weight:300 900; font-display:swap; } @font-face { font-family:'Mona Sans'; src:url(/fonts/MonaSans-VF.woff2) format('woff2'); font-weight:200 900; font-stretch:75% 125%; font-display:swap; } @font-face { font-family:'Montserrat'; src:url(/fonts/Montserrat.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Space Grotesk'; src:url(/fonts/SpaceGrotesk.woff2) format('woff2'); font-weight:300 700; font-display:swap; } @font-face { font-family:'Fraunces'; src:url(/fonts/Fraunces.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Awesome Serif'; src:url(/fonts/AwesomeSerif-VF.woff2) format('woff2'); font-weight:100 700; font-style:normal; font-display:swap; } @font-face { font-family:'Awesome Serif'; src:url(/fonts/AwesomeSerif-Italic-VF.woff2) format('woff2'); font-weight:100 700; font-style:italic; font-display:swap; } @font-face { font-family:'Victor Mono'; src:url(/fonts/VictorMono.woff2) format('woff2'); font-weight:100 700; font-display:swap; } @font-face { font-family:'Inter'; src:url(/fonts/Inter.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Anton'; src:url(/fonts/Anton.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Pixelify Sans'; src:url(/fonts/PixelifySans.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Sora'; src:url(/fonts/Sora.woff2) format('woff2'); font-weight:100 800; font-display:swap; } @font-face { font-family:'JetBrains Mono'; src:url(/fonts/JetBrainsMono.woff2) format('woff2'); font-weight:100 800; font-display:swap; } @font-face { font-family:'Bricolage Grotesque'; src:url(/fonts/Bricolage.woff2) format('woff2'); font-weight:200 800; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Bricolage Grotesque'; src:url(/fonts/Bricolage-ext.woff2) format('woff2'); font-weight:200 800; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Figtree'; src:url(/fonts/Figtree.woff2) format('woff2'); font-weight:300 900; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Figtree'; src:url(/fonts/Figtree-ext.woff2) format('woff2'); font-weight:300 900; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Instrument Serif'; src:url(/fonts/InstrumentSerif.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Instrument Serif'; src:url(/fonts/InstrumentSerif-Italic.woff2) format('woff2'); font-weight:400; font-style:italic; font-display:swap; } @font-face { font-family:'Space Mono'; src:url(/fonts/SpaceMono.woff2) format('woff2'); font-weight:400 700; font-display:swap; } @font-face { font-family:'Gabarito'; src:url(/fonts/Gabarito.woff2) format('woff2'); font-weight:400 900; font-display:swap; } @font-face { font-family:'Clay Area'; src:url(/fonts/ic-area.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Ashford'; src:url(/fonts/ic-fontspringdemoashf.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Bentona'; src:url(/fonts/ic-bentonawilson.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Benzin'; src:url(/fonts/ic-benzinregular.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Causten'; src:url(/fonts/ic-caustenregular.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Chloe'; src:url(/fonts/ic-chloe.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay F37 Moon'; src:url(/fonts/ic-f37moon.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Fifties'; src:url(/fonts/ic-vvdsfifties.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Flatline'; src:url(/fonts/ic-flatlinesans.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Genty'; src:url(/fonts/ic-gentydemo.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Growth'; src:url(/fonts/ic-growth.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Gunterz Round'; src:url(/fonts/ic-fontspringdemogunt.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Gunterz'; src:url(/fonts/ic-gunterz.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Inge'; src:url(/fonts/ic-inge.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Kapra Neue'; src:url(/fonts/ic-kapraneuepro.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Lapoya'; src:url(/fonts/ic-lapoya.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Lemon'; src:url(/fonts/ic-lemon.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Love'; src:url(/fonts/ic-love.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Mathreal'; src:url(/fonts/ic-mathreal.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Morning'; src:url(/fonts/ic-morningmemories.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Neiko'; src:url(/fonts/ic-neiko.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Nimbus'; src:url(/fonts/ic-nimbus.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Didot'; src:url(/fonts/ic-nndidotmodernstd.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Right Slab'; src:url(/fonts/ic-pprightslab.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Runalto'; src:url(/fonts/ic-runalto.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Sigurd'; src:url(/fonts/ic-sigurd.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Simplicité'; src:url(/fonts/ic-hvsimplicite.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Singleton'; src:url(/fonts/ic-singleton.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Swell'; src:url(/fonts/ic-swell.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Versailles'; src:url(/fonts/ic-versailles.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'Clay Voyage'; src:url(/fonts/ic-voyage.woff2) format('woff2'); font-weight:100 900; font-display:swap; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } :root { --gutter: clamp(12px, 3vw, 26px); --maxw: 1100px; /** * CLAY app chrome — FIXED, never follows the site theme. * * The brand is black and white with ONE warm accent. `--qck` is the accent's old name and stays * as one: every rule in this file and in the editor reads it, and renaming a token nobody sees * is churn with a chance of a miss. Clay's own type is Bricolage Grotesque for anything that is * a heading or the wordmark, Figtree for everything that is read. */ --qck: #C87F5E; --qck-ink: #1a0a04; --qck-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --brand-font: "Bricolage Grotesque", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* page background (per-site) */ --page-bg: #07070a; /* site-theme fallbacks (the real values are injected on .wrap) */ --ink: #F4F2EE; --ink-dim: rgba(244,242,238,0.62); --ink-faint: rgba(244,242,238,0.34); --hair: rgba(255,255,255,0.10); --accent: #C87F5E; --on-accent: #1a0a04; --card-bg: rgba(255,255,255,0.06); --card-border: rgba(255,255,255,0.14); --card-shadow: 0 22px 50px -24px rgba(0,0,0,0.55); --radius: 30px; --gap: 14px; --blur: 22px; --font: var(--qck-font); } /* ------------------------------- base ------------------------------- */ body { min-height: 100dvh; background: var(--page-bg); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; font: 16px/1.5 var(--qck-font); /* chrome default font */ -webkit-font-smoothing: antialiased; padding: var(--gutter); transition: background-color .3s; } a { color: inherit; } /* the SITE CANVAS — theme tokens are injected here, so the site changes but the Clay chrome (toolbar, modals) outside it never does */ .wrap { max-width: var(--maxw); margin: 0 auto; color: var(--ink); font-family: var(--font); container-type: inline-size; /* so device preview triggers the real layout */ transition: max-width .45s cubic-bezier(.32,.72,0,1); } /* leave room under the last block so the floating editor bar never covers it (editor only, not preview) */ body.is-owner:not(.preview) .wrap { padding-bottom: 96px; } /* device preview (desktop only) — constrain the canvas width */ body.dev-mobile .wrap { max-width: 400px; } body.dev-tablet .wrap { max-width: 800px; } /* site header (logo + name) */ .site-head { display: flex; align-items: center; gap: 14px; padding: 8px 4px 22px; } .site-logo { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; background: var(--card-bg); border: 1px solid var(--card-border); display: grid; place-items: center; font-weight: 700; font-size: 20px; } .site-id { min-width: 0; } .site-name { font-family: var(--h1-font, var(--font)); font-size: clamp(20px, 4vw, 30px); font-weight: 650; letter-spacing: -0.02em; } .site-tagline { font-family: var(--ds-font, var(--font)); color: var(--ink-dim); font-size: clamp(13px, 2vw, 15px); margin-top: 2px; } /* ------------------------------- grid ------------------------------- */ /* nxtwk-style bento: 12 cols + a FIXED row track so width and height are independent tiers. Height tiers span whole rows, so "1 tall = 2 short stacked" always lines up (4 rows + 3 gaps === two ×(2 rows + 1 gap) + gap). */ .clay-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); /* minmax(0,..) prevents min-content blowout */ grid-auto-rows: var(--row, 94px); grid-auto-flow: row dense; gap: var(--gap); } /* width tiers: small=4 (1/3) · medium=8 (2/3) · large=12 (full) */ .w { grid-column: span 8; min-width: 0; } .w.s { grid-column: span 4; } .w.m { grid-column: span 8; } .w.l { grid-column: span 12; } /* height tiers: compact · short · medium · tall (every .w carries exactly one) */ .w.h-xs { grid-row: span 1; } .w.h-s { grid-row: span 2; } .w.h-m { grid-row: span 3; } .w.h-l { grid-row: span 4; } /* v23: the portrait tier. Additive — every span above is unchanged, so nothing that already exists moves. 7 rows = 742px, which at the narrow width is the 0.5-ish portrait the widgets were drawn against. */ .w.h-xl { grid-row: span 8; } /* mobile: single column. Height tiers still apply (short/medium/tall) so the height tool works on the phone too — a min-height per tier, content can grow past it. */ @container (max-width: 720px) { .clay-grid { grid-auto-rows: auto; } .w, .w.s, .w.m, .w.l { grid-column: 1 / -1; } .w.h-xs, .w.h-s, .w.h-m, .w.h-l, .w.h-xl { grid-row: auto; } .w.h-xs { min-height: 0; } .w.h-s { min-height: 150px; } .w.h-m { min-height: 240px; } .w.h-l { min-height: 360px; } } /* ===== BENTO (P1): 3-col positioned grid · fixed square-ish cells · gaps show the themed backdrop ===== */ #grid.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: var(--bcell, 300px); grid-auto-flow: row dense; gap: 20px; max-width: 1200px; margin: 0 auto; } #grid.bento .w { margin: 0; width: auto; min-width: 0; min-height: 0; height: auto; } #grid.bento .w > .card, #grid.bento .w > .wg-image, #grid.bento .w > .wg-gallery, #grid.bento .w > .wg-map, #grid.bento .w > .wg-header, #grid.bento .w > .wg-hero { height: 100%; min-height: 0; } /* filler tile — one of the business's photos, fills a leftover slot so the grid is never holey */ #grid.bento .wg-filler { height: 100%; border-radius: var(--radius, 20px); background-size: cover; background-position: center; background-color: color-mix(in srgb, var(--accent, #C87F5E) 14%, rgba(255,255,255,0.045)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } #grid.bento .bx-filler[data-filler] { opacity: .96; } /* THE LAYOUT LIBRARY — a card per layout in Design, shaped like the theme cards next door because it is the same act: a big drawing of the thing, the one you are on marked, the page changing underneath. The sketch is a 3-column mini of the layout's first few blocks. */ .gp-prev { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(var(--rows, 1), 1fr); gap: 4px; height: 100%; width: 100%; } .gp-prev > span { background: rgba(255,255,255,0.30); border-radius: 4px; } .vibe-prev.lay { background: #101011; padding: 12px; display: flex; align-items: center; justify-content: center; } /* Square cells, so the drawing is the shape of the real grid rather than a squashed version of it: three columns against however many rows the sketch drew. */ .vibe-prev.lay .gp-prev { height: 100%; width: auto; aspect-ratio: calc(3 / var(--rows, 3)); } .vibe.on .gp-prev > span { background: color-mix(in srgb, #C87F5E 75%, #fff); } /* mobile: one column, stacked, full-width; positions ignored */ #grid.bento.m-stack { display: flex; flex-direction: column; gap: 16px; max-width: 520px; } #grid.bento.m-stack .w { grid-column: auto !important; grid-row: auto !important; min-height: 150px; } #grid.bento.m-stack .w > .card { height: auto; } /* ------------------------- smart layout (sections) ------------------------- */ /* #grid in sections mode is a vertical stack of bento blocks; each .sec is its own 12-col × N-row grid with fixed slots — no auto-flow, so nothing ever reflows on resize. */ .clay-grid.sec-mode { display: flex; flex-direction: column; gap: var(--gap); grid-template-columns: none; grid-auto-flow: initial; } .sec { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 1), minmax(var(--rowmin, 200px), auto)); gap: var(--gap); } .sec-slot { position: relative; min-width: 0; min-height: 0; } .sec-slot > .w { height: 100%; width: 100%; margin: 0; min-height: 0; } .sec-slot > .w, .sec-slot > .w.s, .sec-slot > .w.m, .sec-slot > .w.l { grid-column: auto; grid-row: auto; } /* the SECTION/slot drives height in smart mode — clear the widgets' intrinsic min-heights so the chosen section height actually applies (the row's --rowmin is the floor; tall content still grows). */ .clay-grid.sec-mode .sec-slot .card, .clay-grid.sec-mode .sec-slot .wg-image, .clay-grid.sec-mode .sec-slot .wg-gallery, .clay-grid.sec-mode .sec-slot .wg-map { min-height: 0; } /* empty slot — invisible on the live site, a dashed "add" target in the editor */ .sec-empty { border-radius: var(--radius); } body.is-owner:not(.preview) .sec-empty { border: 1.5px dashed rgba(255,255,255,0.26); background: rgba(15,15,18,0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; } .sec-add { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); border: 0; border-radius: 999px; padding: 9px 15px 9px 12px; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; } /* editor chrome lives inside the themed grid — always Clay UI font, never the site's theme font */ .sec-add, .sec-addrow, .sec-addrow span, .sec-tray, .sec-tray-h, .sec-chip, .sec-tools, .w-tools, .w-hidebadge, .m-infobox { font-family: var(--qck-font) !important; } .sec-add svg { width: 17px; height: 17px; } .sec-add:hover { background: color-mix(in srgb, var(--qck) 30%, rgba(255,255,255,0.1)); color: #fff; } body.preview .sec-empty, body:not(.is-owner) .sec-empty { display: none; } /* a fully-empty section collapses on the LIVE site (owner keeps it visible to fill it) */ /* An empty BENTO section is not drawn for a visitor. Scoped to the bento canvas: `.sec` is a plain name and a clay page uses it for its bands, which have no `.sec-slot` in them — so unscoped this rule hid every band of every clay page the moment you pressed Preview. */ body:not(.is-owner) .wrap .sec:not(:has(.sec-slot .w)), body.preview .wrap .sec:not(:has(.sec-slot .w)) { display: none; } /* section toolbar (owner) — floats top-center INSIDE the section (so a backdrop's overflow:hidden never clips it), appears on hover, clear of the widget tools (top-right) and hide badge (top-left) */ .sec-tools { display: none; } /* only on real hover/mouse devices — never on touch (so phones never get stuck-hover section chrome) */ @media (hover: hover) and (pointer: fine) { /* desktop-only: a vertical strip STRADDLING the section's left edge — half in the gutter, half over the edge, so it touches the section (hover never drops) and never clips off-screen. Top-aligned for short sections. The whole left edge is a reliable hover+click zone. */ body.is-owner:not(.preview):not(.dev-mobile):not(.dev-tablet) .sec > .sec-tools { display: none; position: absolute; top: 10px; left: 10px; z-index: 14; flex-direction: column; gap: 6px; } body.is-owner:not(.preview):not(.dev-mobile):not(.dev-tablet) .sec:hover > .sec-tools, body.is-owner:not(.preview):not(.dev-mobile):not(.dev-tablet) .sec-tools:hover { display: flex; } } .sec-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.16); background: rgba(18,18,20,0.92); color: #fff; backdrop-filter: blur(8px); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; } .sec-btn svg { width: 15px; height: 15px; } .sec-btn:hover { background: #000; } .sec-btn.sec-del:hover { background: #e0392b; border-color: #e0392b; } .sec-btn[disabled] { opacity: .35; pointer-events: none; } .sec-slot.drop { outline: 2px dashed var(--qck); outline-offset: -3px; border-radius: var(--radius); } .sec-dragsrc { opacity: .35; } /* section background — styled by a chosen PRESET (full card system; glass/gradient/image all work) */ .sec.has-bg { position: relative; border-radius: var(--radius); overflow: hidden; padding: clamp(16px, 2.2cqw, 30px); } .sec.has-bg > .sec-slot { z-index: 1; } .sec.has-bg > .sec-tools { z-index: 9; } .sec-bg { position: absolute; inset: 0; z-index: 0; border-radius: var(--radius); background-size: cover; background-position: center; } /* dock "+" chooser popover */ .add-chooser { position: fixed; z-index: 65; width: 230px; background: #161617; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 7px; box-shadow: 0 22px 50px -16px rgba(0,0,0,0.7); display: flex; flex-direction: column; gap: 4px; } .add-chooser button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: transparent; color: #fff; font: inherit; cursor: pointer; text-align: left; } .add-chooser button:hover { background: rgba(255,255,255,0.08); } .add-chooser .ac-ic { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--qck) 16%, transparent); color: var(--qck); display: grid; place-items: center; flex: 0 0 auto; } .add-chooser .ac-ic svg { width: 17px; height: 17px; } .add-chooser .ac-tx { display: flex; flex-direction: column; } .add-chooser .ac-tx b { font-size: 14.5px; font-weight: 700; } .add-chooser .ac-tx small { font-size: 12px; color: rgba(255,255,255,0.5); } /* "Add section" CTA in the add-mode modal */ .sm-addbtn { width: 100%; margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .sm-addbtn[disabled] { opacity: .45; cursor: default; } .sm-addbtn svg { width: 17px; height: 17px; } /* section background preset tiles + "New style" */ /* layout panel: action row + saved-layout delete badge */ .lay-row2 { display: flex; gap: 10px; margin: 14px 0; } .lay-row2 .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; padding: 12px 10px; } .lay-bico { display: inline-flex; } .lay-bico svg { width: 16px; height: 16px; } .tpl-opt { position: relative; } .tpl-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .12s; } .tpl-opt:hover .tpl-x, .tpl-opt.saved .tpl-x { opacity: 1; } .tpl-x svg { width: 12px; height: 12px; } /* section editor modal */ .sec-modal { max-width: 440px; width: 92vw; } .sec-modal .sm-body { margin: 0 -4px; padding: 0 4px; max-height: 68vh; overflow-y: auto; } /* filter the shapes by how many widgets they hold */ .sm-cnt { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 14px; } .sm-cntpill { min-width: 38px; height: 34px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 13.5px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); transition: background .15s, color .15s; white-space: nowrap; } .sm-cntpill:hover { color: #fff; } .sm-cntpill.on { background: var(--qck, #C87F5E); color: #fff; } .sm-lbl { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 4px 0 10px; } .sm-lbl .ep-mut { color: rgba(255,255,255,0.3); } /* smaller shape icons; ~2.5 rows visible then scrolls. align-items:start so the cards keep their aspect ratio instead of stretching to fill the (auto) grid-row height. */ .sm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: start; max-height: 380px; overflow-y: auto; padding: 2px 6px 2px 2px; } .sm-grid .sec-pat { aspect-ratio: 1.5; height: auto; align-self: start; } .sm-grid .sec-pat-prev { gap: 2px; padding: 5px; } .sm-bgrow { display: flex; align-items: center; gap: 9px; } .sm-bgthumb { width: 56px; height: 40px; border-radius: 9px; background-size: cover; background-position: center; flex: 0 0 auto; } .sm-bgbtn { flex: 1; } .sm-bgbtn.ghost { flex: 0 0 auto; opacity: .75; } .sm-bgadd { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; border: 1px dashed rgba(255,255,255,0.24); border-radius: 12px; background: transparent; color: rgba(255,255,255,0.72); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .sm-bgadd:hover { border-color: rgba(255,255,255,0.45); color: #fff; } .sm-bgadd svg { width: 18px; height: 18px; } /* the preset tiles inside the section modal — a touch tighter */ .sm-vibes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; max-height: 230px; overflow-y: auto; padding: 2px; } /* preview mode: editor-only section chrome is hidden */ body.preview .sec-addrow, body.preview .sec-tray { display: none; } /* "change widget type" row at the top of a widget's settings */ .wtype-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 13px; padding: 11px 13px; cursor: pointer; font: inherit; color: #fff; margin-bottom: 16px; } .wtype-row:hover { border-color: rgba(255,255,255,0.28); } .wtype-l { display: flex; align-items: center; gap: 11px; } .wtype-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.08); display: grid; place-items: center; } .wtype-ic svg { width: 16px; height: 16px; } .wtype-l > span:last-child { display: flex; flex-direction: column; text-align: left; } .wtype-lbl { font-size: 11px; color: rgba(255,255,255,0.45); font-weight: 600; } .wtype-cur { font-size: 14px; font-weight: 700; } .wtype-go { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 650; color: var(--qck); } .wtype-go svg { width: 14px; height: 14px; } /* unplaced-widgets tray + add-section button (owner only) */ .sec-tray { margin-top: 6px; border: 1.5px dashed rgba(255,255,255,0.28); border-radius: 16px; padding: 12px 14px; background: rgba(15,15,18,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .sec-tray .sec-chip-t { color: #fff; } .sec-tray .sec-chip-n { color: rgba(255,255,255,0.55); } .sec-tray .sec-chip { background: rgba(255,255,255,0.1); } .sec-tray-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; color: rgba(255,255,255,0.72); margin-bottom: 10px; } .sec-tray-h svg { width: 16px; height: 16px; } .sec-tray-row { display: flex; flex-wrap: wrap; gap: 8px; } .sec-chip { display: inline-flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 11px; padding: 8px 8px 8px 12px; cursor: grab; user-select: none; } .sec-chip-t { font-size: 12.5px; font-weight: 700; color: var(--ink); } .sec-chip-n { font-size: 12px; color: var(--ink-dim); max-width: 130px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sec-chip-x { width: 22px; height: 22px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-dim); cursor: pointer; display: grid; place-items: center; } .sec-chip-x svg { width: 12px; height: 12px; } .sec-addrow { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border: 1.5px dashed rgba(255,255,255,0.34); border-radius: 16px; background: rgba(15,15,18,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255,255,255,0.85); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; } .sec-addrow:hover { border-color: var(--qck); color: #fff; } .sec-addrow svg { width: 18px; height: 18px; } /* pattern picker popover */ .sec-pop { position: fixed; z-index: 120; width: 268px; background: #161617; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 14px; box-shadow: 0 28px 60px -20px rgba(0,0,0,0.7); } .sec-pop-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,0.5); margin-bottom: 10px; } .sec-pop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sec-pat { aspect-ratio: 1.3; padding: 0; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; background: #1f1f22; cursor: pointer; overflow: hidden; } .sec-pat.on { border-color: var(--qck, #C87F5E); box-shadow: 0 0 0 1px var(--qck, #C87F5E); } .sec-pat-prev { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(var(--rows, 1), 1fr); gap: 3px; width: 100%; height: 100%; padding: 6px; } .sec-pat-prev > span { background: rgba(255,255,255,0.34); border-radius: 3px; } /* templates gallery (Layout panel) */ .tpl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; } .tpl-opt { padding: 10px; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; background: #161617; cursor: pointer; font: inherit; color: #fff; display: flex; flex-direction: column; gap: 8px; } .tpl-opt:hover { border-color: rgba(255,255,255,0.34); } .tpl-prev { display: flex; flex-direction: column; gap: 4px; height: 76px; } .tpl-row { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(var(--rows, 1), 1fr); gap: 4px; flex: 1; } .tpl-row > span { background: rgba(255,255,255,0.22); border-radius: 4px; } .lay-smart { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; background: #161617; margin-bottom: 16px; } .lay-smart-tx { display: flex; flex-direction: column; gap: 3px; } .lay-smart-tx b { font-size: 14px; color: #fff; } .lay-smart-tx span { font-size: 12px; color: rgba(255,255,255,0.55); } .lay-hint { font-size: 12.5px; color: rgba(255,255,255,0.5); margin-bottom: 10px; } /* undo / redo dock — top-left, owner editor */ /* UNDO AND REDO CLEAR THE SITE'S OWN BAR. On a designed page the top-left corner belongs to the business — their name or their mark, in a bar that sticks — and these were landing straight on it. `--ed-top` is measured from the page itself (site.js), never assumed: how tall that bar is is the theme's business, and the product asks rather than guesses. */ .undo-dock { position: fixed; top: calc(var(--ed-top, 0px) + 16px); left: 16px; z-index: 70; display: flex; gap: 8px; } body.preview .undo-dock { display: none; } /** * AND NOT OVER A MODAL. * * Undo and redo float above the page at a fixed position, so opening anything — a product's detail * sheet, a widget's settings, the side panel — left two round buttons sitting on top of the thing * you had just opened, over its heading, doing nothing useful. There is nothing to undo *in* a * modal: what they act on is the page behind it, and the page behind it is not what you are * looking at. They come back the moment it closes. * * `wm-open` is a widget modal, `sheet-open` a designed page's section sheet, `fb-open` the feedback * form — all three are things laid OVER the page. The side panel is not: on a desktop it is a * column down the right and undo is the most-used control in the editor, so hiding it whenever the * panel is open would hide it almost always. On a phone the panel IS the screen, and there it goes * with the rest (below). */ body.wm-open .undo-dock, body.sheet-open .undo-dock, body.fb-open .undo-dock { opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .16s, transform .16s; } .ud-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(18,18,20,0.86); color: #fff; backdrop-filter: blur(10px); cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 26px -12px rgba(0,0,0,0.6); transition: opacity .12s, background .12s; } .ud-btn svg { width: 18px; height: 18px; } .ud-btn:hover { background: #000; } .ud-btn:disabled { opacity: .3; pointer-events: none; } /* mobile: sections collapse to a single stacked column. Section EDITING is desktop-only for now — on a phone we just show clean stacked widgets (each with its gear); no section tools/slots/add/tray. */ @container (max-width: 720px) { .sec { display: flex; flex-direction: column; height: auto; gap: var(--gap); } .sec-slot { grid-column: auto !important; grid-row: auto !important; } .sec-slot > .w { height: auto; } .sec-empty, .sec-tools, .sec-addrow, .sec-tray { display: none !important; } body:not(.is-owner) .sec-slot:has(> .w.hide-mobile), body.preview .sec-slot:has(> .w.hide-mobile) { display: none; } } /* real phones + device-preview — same cleanup regardless of how the breakpoint resolves */ /* UNDO STAYS. The rest of this row is the bento grid's section tooling, which mobile genuinely has none of — undo and redo are not that. They are the only way back from a mis-tap, and a phone is where mis-taps happen. Top-left, where they have always been. */ @media (max-width: 700px) { .sec-empty, .sec-tools, .sec-addrow, .sec-tray { display: none !important; } } /* UNDER THE HEADER, NOT BEHIND IT. This dropped the `--ed-top` offset on a phone and hard-coded 12px, so the moment a theme's nav became fixed the undo buttons sat underneath it — invisible, and the first tap hit the nav instead. The offset is measured for a reason; keep it. */ @media (max-width: 700px) { /* CLEAR OF IT, not flush against it. 10px under a fixed nav put the buttons touching its bottom edge, so on a page whose nav has no shadow they read as part of it — and the first tap went to whichever the thumb was nearer. A whole button's breathing room instead. */ .undo-dock { top: calc(var(--ed-top, 0px) + 18px); left: 10px; } /* and feedback comes up out of the bottom-left corner to sit opposite them, under the same bar — a pill floating over the page's last band is a pill covering somebody's content */ #fb-dock { top: calc(var(--ed-top, 0px) + 18px); left: auto; right: 10px; bottom: auto; } } body.dev-mobile .sec-empty, body.dev-mobile .sec-tools, body.dev-mobile .sec-addrow, body.dev-mobile .sec-tray, body.dev-tablet .sec-tools { display: none !important; } /* ===== mobile editor — the m-stack render: a flat single column of widgets (no sections) ===== */ #grid.m-stack .m-list { display: flex; flex-direction: column; gap: var(--gap); } #grid.m-stack .m-list > .w { width: 100%; margin: 0; } body.preview .w-mtools { display: none !important; } body.preview .m-infobox, body:not(.is-owner) .m-infobox { display: none !important; } /* mobile-editing hint is owner-only — never on a draft/visitor */ /* a generated DRAFT is a clean preview (claim → then edit): no editor chrome, just the Save & edit button */ /* small hint at the bottom of the mobile editor — point users to a bigger screen for desktop */ .m-infobox { display: flex; align-items: center; gap: 11px; padding: 13px 15px; margin-top: 4px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent); background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink-dim, rgba(130,130,140,0.85)); font-size: 12.5px; line-height: 1.45; } .m-infobox b { color: var(--ink, inherit); font-weight: 700; } .m-info-ic { display: inline-flex; flex: 0 0 auto; opacity: .8; } .m-info-ic svg { width: 19px; height: 19px; } /* mobile stack: cards size to content by default (no desktop min-height bleed); JS sets an inline min-height only for visual widgets + explicit mobile-height overrides (inline wins over this) */ #grid.m-stack .w.h-xs, #grid.m-stack .w.h-s, #grid.m-stack .w.h-m, #grid.m-stack .w.h-l { min-height: 0; } /* explicit mobile height: media FILLS the card (no empty gap); content CENTRES so a taller card looks intentional */ #grid.m-stack .card.m-fill { overflow: hidden; } #grid.m-stack .card.m-fill .wg-body, #grid.m-stack .card.m-fill .wg-strip { flex: 1 1 auto; min-height: 0; } #grid.m-stack .card.m-fill .wg-shot { height: 100%; aspect-ratio: auto; } #grid.m-stack .card.m-center .wg-body { justify-content: safe center; } /* the section modal is a dark sheet — keep its text readable on any theme (was inheriting theme ink) */ /* floating "which view am I editing" toggle — top-center, edit mode only */ body:not(.is-owner) .dev-float, body.preview .dev-float, body.tilt .dev-float { display: none !important; } /* desktop only — on a phone you're inherently editing mobile, so no switch is shown there */ @media (max-width: 760px) { .dev-float { display: none !important; } } /* Layout (sections/templates) is a desktop-only surface — mobile is a flat list, so hide it there */ body.dev-mobile #ed-bar [data-act="layout"] { display: none !important; } @media (max-width: 760px) { #ed-bar [data-act="layout"] { display: none !important; } } /* clear the floating toggle so it never overlaps the first section (desktop edit only) */ @media (min-width: 761px) { body.is-owner:not(.preview):not(.tilt) .wrap { padding-top: 56px; } } /* with the floating toggle handling edit, the dock's device row is just for Preview */ body:not(.preview) .ed-bar .ed-devices { display: none !important; } /* --------- card: the look is driven by the theme's FILL style --------- */ .card { position: relative; height: 100%; border-radius: var(--radius); overflow: hidden; isolation: isolate; padding: clamp(18px, 2.4cqw, 26px); transition: transform .18s cubic-bezier(.32,.72,0,1), border-radius .25s, box-shadow .2s; } a.card:hover { filter: brightness(1.04); } /* button/anchor cards (teasers, link, map-compact) — kill the UA button chrome so there's no double border */ button.card { -webkit-appearance: none; appearance: none; border: 0; font: inherit; text-align: inherit; color: inherit; } .card.w-openable { cursor: pointer; } /* Squircle corner tier = continuous curvature (iOS superellipse), not a circular arc with dead-straight sides. corner-shape needs a non-zero border-radius (already set) and falls back to normal rounding on browsers without support (Chrome 139+). */ [data-corner="squircle"] .card { corner-shape: squircle; } .vibe-card.is-squircle, .tmini-card.is-squircle, .preset-btn.is-squircle { corner-shape: squircle; } /* Fill styles are set per-widget (.w[data-i][data-fill]) so a widget can override the theme. The section header in inline mode is not a widget and carries no data-i, so it is named explicitly rather than by loosening the widget selector: dropping an attribute from fourteen rules changes their specificity, and a paint rule that starts losing to a rule it used to beat is a fault nobody can see coming. */ /* GLASS — nxtwk "liquid glass": multi-layer inset bevel + soft drop + radial sheen */ .w[data-i][data-fill="glass"] .card, .w.sec-headw[data-fill="glass"] .card { background: var(--card-bg); outline: var(--border-w, 1px) solid var(--card-border); outline-offset: 0; backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.25), inset 0 -1px 0 0 rgba(0,0,0,0.30), inset 1px 0 0 0 rgba(255,255,255,0.04), inset -1px 0 0 0 rgba(0,0,0,0.10), var(--card-drop, 0 20px 50px -20px rgba(0,0,0,0.55)), var(--card-glow, 0 0 transparent); } .w[data-i][data-fill="glass"] .card::before, .w.sec-headw[data-fill="glass"] .card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(140% 100% at 0% 0%, rgba(255,255,255,0.08), transparent 45%); } .w[data-i][data-fill="solid"] .card, .w.sec-headw[data-fill="solid"] .card { background: var(--card-bg); outline: var(--border-w, 1px) solid var(--card-border); outline-offset: 0; box-shadow: var(--card-drop, 0 16px 40px -30px rgba(0,0,0,0.4)), var(--card-glow, 0 0 transparent); } .w[data-i][data-fill="gradient"] .card, .w.sec-headw[data-fill="gradient"] .card { --ink: #fff; --ink-dim: rgba(255,255,255,0.82); --ink-faint: rgba(255,255,255,0.62); --hair: rgba(255,255,255,0.28); color: #fff; background: var(--card-grad, linear-gradient(150deg, hsl(var(--w-hue, 18) 88% 60%), hsl(calc(var(--w-hue, 18) + 34) 82% 46%))); border: 1px solid rgba(255,255,255,0.16); box-shadow: var(--card-drop, 0 26px 54px -24px hsl(var(--w-hue, 18) 80% 40% / .55)), var(--card-glow, 0 0 transparent); } .w[data-i][data-fill="gradient"] .card::before, .w.sec-headw[data-fill="gradient"] .card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 0 0, rgba(255,255,255,0.24), transparent 45%); } .w[data-i][data-fill="gradient"] .wg-header .btn-cta { background: rgba(255,255,255,0.92); color: #111; } .w[data-i][data-fill="outline"] .card, .w.sec-headw[data-fill="outline"] .card { background: var(--card-bg); outline: var(--border-w, 2px) solid var(--card-border); outline-offset: 0; box-shadow: var(--card-drop, none), var(--card-glow, 0 0 transparent); } /* bold = filled block, no border, heavy drop shadow (punchy/elevated) */ .w[data-i][data-fill="bold"] .card, .w.sec-headw[data-fill="bold"] .card { background: var(--card-bg); border: var(--border-w, 0) solid var(--card-border); box-shadow: var(--card-drop, 0 24px 50px -22px rgba(0,0,0,0.6)), var(--card-glow, 0 0 transparent); } .w[data-i][data-fill="plain"] .card, .w.sec-headw[data-fill="plain"] .card { background: var(--card-bg); border: 0; box-shadow: none; border-radius: 0; padding: clamp(6px,1.2cqw,12px) clamp(2px,1cqw,8px) clamp(16px,2cqw,22px); border-bottom: 1px solid var(--card-border); } /* gradglow — translucent glass surface with a coloured radial glow inside (refs #166/#168) */ .w[data-i][data-fill="gradglow"] .card, .w.sec-headw[data-fill="gradglow"] .card { background: var(--card-bg); outline: var(--border-w, 1px) solid var(--card-border); outline-offset: 0; backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.18), var(--card-drop, 0 22px 54px -24px rgba(0,0,0,0.55)), var(--card-glow, 0 0 transparent); overflow: hidden; } .w[data-i][data-fill="gradglow"] .card::before, .w.sec-headw[data-fill="gradglow"] .card::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(120% 120% at 18% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 58%), radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%); } .w[data-i][data-fill="gradglow"] .card > *:not(.wim):not(.ti-bg):not(.ti-scrim):not(.w-expand):not(.w-tools):not(.w-hidebadge):not(.lk-ext) { position: relative; z-index: 1; } .w[data-i][data-fill="gradglow"] .wg-image > .wim, .w[data-i][data-fill="gradglow"] .wg-gallery .wim, .w[data-i][data-fill="gradglow"] .wg-hero .ti-bg, .w[data-i][data-fill="gradglow"] .wg-hero .ti-scrim { z-index: 1; } /* keep absolute-fill backgrounds (image widget + hero poster) — glow must not collapse them */ /* duotone — a hard two-tone split block (--card-grad carries the split) */ .w[data-i][data-fill="duotone"] .card, .w.sec-headw[data-fill="duotone"] .card { background: var(--card-grad, linear-gradient(180deg, var(--card-bg) 52%, var(--accent) 52%)); border: 0; box-shadow: var(--card-drop, 0 20px 46px -24px rgba(0,0,0,0.5)), var(--card-glow, 0 0 transparent); } /* bare — no card at all, just the content (cardless header / section label) */ .w[data-i][data-fill="bare"] .card, .w.sec-headw[data-fill="bare"] .card { background: none !important; outline: 0 !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: clamp(4px,1cqw,10px) clamp(2px,0.8cqw,6px); } .wm-card[data-fill="gradglow"] { outline: var(--border-w, 1px) solid var(--card-border); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); box-shadow: var(--card-drop, 0 24px 60px -24px rgba(0,0,0,0.6)), var(--card-glow, 0 0 transparent); } .wm-card[data-fill="duotone"] { background: var(--card-grad, var(--card-bg)); } /* multi = each card a different colour from the theme palette; ink derives per card */ .w[data-i][data-fill="multi"] .card, .w.sec-headw[data-fill="multi"] .card { background: var(--w-card, #1c1c22); border: var(--border-w, 0) solid var(--card-border, transparent); /* honors the Border tab */ --ink: var(--w-cardink, #fff); --ink-dim: var(--w-carddim, rgba(255,255,255,0.7)); --ink-faint: var(--w-cardfaint, rgba(255,255,255,0.45)); --hair: var(--w-cardhair, rgba(255,255,255,0.18)); color: var(--w-cardink, #fff); box-shadow: var(--card-drop, 0 22px 50px -26px rgba(0,0,0,0.5)), var(--card-glow, 0 0 transparent); } .w[data-i][data-fill="multi"] .wg-header p, .w[data-i][data-fill="multi"] .wg-dsc, .w[data-i][data-fill="multi"] .lk-desc { color: var(--w-carddim, rgba(255,255,255,0.7)); } .w[data-i][data-fill="multi"] .ic, .w[data-i][data-fill="multi"] .wg-ico { background: var(--w-cardhair, rgba(255,255,255,0.16)); border-color: var(--w-cardhair, rgba(255,255,255,0.22)); color: var(--w-cardink); } /* accent-driven bits (hours time, link arrow) read as the card ink on a coloured card */ .w[data-i][data-fill="multi"] .hr-time, .w[data-i][data-fill="multi"] .hr-s-time, .w[data-i][data-fill="multi"] .lk-go { color: var(--w-cardink, #fff); opacity: .9; } /* IMAGE — an uploaded image as the card background, with a darken scrim for legibility */ .w[data-i][data-fill="image"] .card, .w.sec-headw[data-fill="image"] .card { background-image: var(--card-img); background-size: cover; background-position: center; --ink: #fff; --ink-dim: rgba(255,255,255,0.84); --ink-faint: rgba(255,255,255,0.62); --hair: rgba(255,255,255,0.22); --card-border: rgba(255,255,255,0.22); color: #fff; outline: var(--border-w, 0) solid var(--card-border); outline-offset: 0; box-shadow: var(--card-drop, 0 22px 50px -26px rgba(0,0,0,0.5)), var(--card-glow, 0 0 transparent); } .w[data-i][data-fill="image"] .card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,calc(var(--card-scrim, 0.4) * 0.45)), rgba(0,0,0,var(--card-scrim, 0.4))); } /* lift TEXT/content above the scrim — but never clobber absolutely-positioned helpers (.wim = the widget's own picture, the expand +, the editor tools/badge) */ .w[data-i][data-fill="image"] .card > *:not(.wim):not(.ti-bg):not(.ti-scrim):not(.w-expand):not(.w-tools):not(.w-hidebadge):not(.lk-ext) { position: relative; z-index: 1; } .w[data-i][data-fill="image"] .wg-hero .ti-bg, .w[data-i][data-fill="image"] .wg-hero .ti-scrim { z-index: 1; } /* ── the expand modal wears the OPENING widget's fill style (matches the card it came from) ── */ .wm-card[data-fill="glass"] { outline: var(--border-w, 1px) solid var(--card-border); backdrop-filter: blur(26px) saturate(140%); -webkit-backdrop-filter: blur(26px) saturate(140%); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.22), inset 0 -1px 0 0 rgba(0,0,0,0.3), var(--card-drop, 0 24px 60px -24px rgba(0,0,0,0.6)), var(--card-glow, 0 0 transparent); } .wm-card[data-fill="solid"] { outline: var(--border-w, 1px) solid var(--card-border); box-shadow: var(--card-drop, 0 24px 60px -30px rgba(0,0,0,0.5)), var(--card-glow, 0 0 transparent); } .wm-card[data-fill="bold"] { box-shadow: var(--card-drop, 0 24px 60px -22px rgba(0,0,0,0.6)), var(--card-glow, 0 0 transparent); } .wm-card[data-fill="outline"] { background: var(--wm-solid); outline: var(--border-w, 2px) solid var(--card-border); } .wm-card[data-fill="gradient"] { color: #fff; background: var(--card-grad, linear-gradient(150deg, hsl(var(--w-hue, 18) 88% 60%), hsl(calc(var(--w-hue, 18) + 34) 82% 46%))); } .wm-card[data-fill="image"] { color: #fff; background-image: var(--card-img); background-size: cover; background-position: center; } .wm-card[data-fill="image"]::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,calc(var(--card-scrim, 0.4) * 0.5)), rgba(0,0,0,var(--card-scrim, 0.4))); } .wm-card[data-fill="image"] > * { position: relative; z-index: 1; } /* a Link block whose card fill is an image → clean featured-link look: label bottom, badge corner, no extra thumbnail */ .w[data-i][data-fill="image"] .wg-link { flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 130px; } .w[data-i][data-fill="image"] .wg-link .lk-ic { background: rgba(0,0,0,0.42); color: #fff; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.18); } .w[data-i][data-fill="image"] .wg-link .lk-ic svg { color: #fff; } /* media widgets render their OWN picture full-bleed — it sits above the theme card-image + scrim */ .w[data-i][data-fill="image"] .wg-image > .wim, .w[data-i][data-fill="image"] .wg-gallery .wim { z-index: 1; } .w[data-i][data-fill="image"] .wg-image::after { display: none; } /* ── button styles (per-preset, set via data-btnstyle) ── */ [data-btnstyle="soft"] .btn-cta, [data-btnstyle="soft"] .wg-btn { background: color-mix(in srgb, var(--btn-bg) 18%, transparent) !important; color: var(--btn-bg) !important; } [data-btnstyle="outline"] .btn-cta, [data-btnstyle="outline"] .wg-btn { background: transparent !important; border: 1.5px solid var(--btn-bg); color: var(--btn-bg) !important; } [data-btnstyle="arrow"] .btn-cta { border-radius: 999px; padding: 8px 8px 8px 22px; gap: 12px; } [data-btnstyle="arrow"] .btn-cta::after { content: "→"; display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--btn-text, #fff); color: var(--btn-bg, #111); font-size: 16px; font-weight: 700; line-height: 1; } [data-btnstyle="arrow"] .wg-btn { position: relative; border-radius: 999px; padding-right: 46px; } [data-btnstyle="arrow"] .wg-btn::after { content: "→"; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--btn-text, #111); color: var(--btn-bg, #fff); font-size: 16px; font-weight: 700; line-height: 1; } /* soft / outline button styles apply to the Buttons widget too */ [data-btnstyle="soft"] .wg-btn { background: color-mix(in srgb, var(--btn-bg) 18%, transparent) !important; color: var(--btn-bg) !important; } [data-btnstyle="outline"] .wg-btn { background: transparent !important; border: 1.5px solid var(--btn-bg); color: var(--btn-bg) !important; } /* ── shared content elements themes can use ── */ .badge-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); white-space: nowrap; } .badge-pill svg { width: 13px; height: 13px; } .circ-btn { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); border: 0; cursor: pointer; text-decoration: none; transition: transform .14s, filter .14s; } .circ-btn:hover { transform: translateY(-2px); filter: brightness(1.05); } .circ-btn svg { width: 20px; height: 20px; } .circ-row { display: flex; gap: 10px; flex-wrap: wrap; } /* inner group: image + gradient fills, optional glow */ [data-infill="image"] .wg-inner { background-image: var(--in-img); background-size: cover; background-position: center; } .wg-inner { box-shadow: var(--in-glow, none); } /* icon chip style */ [data-icons="solid"] .wg-link .ic { background: var(--icon-color, var(--accent)); border-color: transparent; color: #fff; } [data-icons="line"] .wg-link .ic svg { color: var(--icon-color, var(--ink)); } .w[data-i][data-fill="gradient"] .wg-link .ic { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.3); color: #fff; } /* ------------------------- widget: header ------------------------- */ .wg-header { display: flex; flex-direction: column; justify-content: center; gap: 10px; } .wg-header h1 { overflow-wrap: anywhere; margin: 0; font-family: var(--h1-font, var(--font)); font-size: calc(clamp(28px, 5cqw, 48px) * var(--h1-scale, 1)); font-weight: var(--h1-weight, 700); font-style: var(--h1-style, normal); color: var(--h1-color, var(--ink)); text-shadow: var(--h1-glow, none); letter-spacing: -0.03em; line-height: 1.05; } .wg-header p { margin: 0; font-family: var(--h2-font, var(--font)); color: var(--h2-color, var(--ink-dim)); font-size: calc(clamp(15px, 2cqw, 19px) * var(--h2-scale, 1)); font-weight: var(--h2-weight, 600); font-style: var(--h2-style, normal); text-shadow: var(--h2-glow, none); max-width: 34ch; } [data-display="huge"] .wg-header h1 { font-size: calc(clamp(34px, 8cqw, 66px) * var(--h1-scale, 1)); letter-spacing: -0.045em; text-transform: uppercase; line-height: .92; } [data-display="serif"] .wg-header h1 { letter-spacing: -0.012em; font-size: calc(clamp(32px, 6.5cqw, 58px) * var(--h1-scale, 1)); } .wg-header .btn-cta { align-self: flex-start; margin-top: 8px; background: var(--btn-bg, #fff); color: var(--btn-text, #111); text-decoration: none; font-family: var(--btn-font, var(--lb-font, var(--font))); font-weight: var(--btn-weight, 650); font-size: calc(15px * var(--btn-size, 1)); padding: 12px 20px; border-radius: var(--btn-radius, calc(var(--radius) * 0.55 + 6px)); transition: transform .18s var(--ease, ease), filter .18s, box-shadow .18s; will-change: transform; } /* button hover animations (set per theme via data-bthover on .wrap) */ [data-bthover="lift"] .wg-header .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(0,0,0,.5); } [data-bthover="grow"] .wg-header .btn-cta:hover { transform: scale(1.05); } [data-bthover="fade"] .wg-header .btn-cta:hover { filter: brightness(.9); } [data-fill="gradient"] .wg-header .btn-cta { background: rgba(255,255,255,0.92); color: #111; } /* header with an image — reuses the text+image layout (.wg-textimage), styled as a hero */ .wg-hero .ti-text { gap: 11px; } .wg-hero .ti-text > .wg-social, .wg-hero .ti-overtext > .wg-social { margin-top: 6px; } .wg-hero .ti-text > h1 { margin: 0; font-family: var(--h1-font, var(--font)); font-size: calc(clamp(26px, 4.6cqw, 44px) * var(--h1-scale, 1)); font-weight: var(--h1-weight, 700); font-style: var(--h1-style, normal); color: var(--h1-color, var(--ink)); text-shadow: var(--h1-glow, none); letter-spacing: -0.03em; line-height: 1.05; } [data-display="huge"] .wg-hero .ti-text > h1 { font-size: calc(clamp(30px, 6.5cqw, 56px) * var(--h1-scale, 1)); letter-spacing: -0.045em; text-transform: uppercase; line-height: .94; } [data-display="serif"] .wg-hero .ti-text > h1 { letter-spacing: -0.012em; } .wg-hero .ti-text > p, .wg-hero .ti-overtext > p { margin: 0; font-family: var(--h2-font, var(--font)); color: var(--h2-color, var(--ink-dim)); font-size: calc(clamp(14px, 1.9cqw, 17px) * var(--h2-scale, 1)); font-weight: var(--h2-weight, 600); font-style: var(--h2-style, normal); max-width: 40ch; } .wg-hero .ti-overtext { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; } .wg-hero.ti-over .ti-overtext > p { color: rgba(255,255,255,0.9); } .wg-hero .ti-overtext > h1 { margin: 0; font-family: var(--h1-font, var(--font)); font-size: calc(clamp(26px, 5cqw, 46px) * var(--h1-scale, 1)); font-weight: var(--h1-weight, 700); color: #fff; letter-spacing: -0.03em; line-height: 1.05; } [data-display="huge"] .wg-hero .ti-overtext > h1 { letter-spacing: -0.045em; text-transform: uppercase; line-height: .94; } .wg-hero.ti-over .ti-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } /* stacked hero (image on top / below) — a banner sized to the card's height tier (never a deep tall crop that cuts faces, never taller than the block). Text fills + centres in the rest. */ .wg-hero.ti-below:not(.sz-l) .ti-img, .wg-hero.ti-above:not(.sz-l) .ti-img { flex: 0 0 auto; min-height: 0; aspect-ratio: auto; } .wg-hero.h-s.ti-below:not(.sz-l) .ti-img, .wg-hero.h-s.ti-above:not(.sz-l) .ti-img { height: 78px; } .wg-hero.h-m.ti-below:not(.sz-l) .ti-img, .wg-hero.h-m.ti-above:not(.sz-l) .ti-img { height: 146px; } .wg-hero.h-l.ti-below:not(.sz-l) .ti-img, .wg-hero.h-l.ti-above:not(.sz-l) .ti-img { height: 224px; } .wg-hero:not(.sz-l):not(.ti-over) .ti-text { flex: 1 1 auto; justify-content: center; } .wg-hero.ti-over .wg-ov { color: rgba(255,255,255,0.82); } .wg-hero.ti-over .ws-tx { color: rgba(255,255,255,0.9); } .wg-hero.ti-over .ws-tx b { color: #fff; } .wg-hero .btn-cta { align-self: flex-start; margin-top: 11px; background: var(--btn-bg, #fff); color: var(--btn-text, #111); text-decoration: none; font-family: var(--btn-font, var(--lb-font, var(--font))); font-weight: var(--btn-weight, 650); font-size: calc(15px * var(--btn-size, 1)); padding: 12px 20px; border-radius: var(--btn-radius, calc(var(--radius) * 0.55 + 6px)); transition: transform .18s var(--ease, ease), filter .18s, box-shadow .18s; } [data-bthover="lift"] .wg-hero .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(0,0,0,.5); } [data-bthover="grow"] .wg-hero .btn-cta:hover { transform: scale(1.05); } [data-bthover="fade"] .wg-hero .btn-cta:hover { filter: brightness(.9); } /* ---- header sizing: read well at every block size ---- */ .wg-hero { overflow: hidden; } /* large (wide) — side by side, big title */ .wg-hero.sz-l .ti-text > h1 { font-size: calc(clamp(28px, 4.4cqw, 46px) * var(--h1-scale, 1)); } /* medium — stacked banner + text, moderate title */ .wg-hero.sz-m .ti-text > h1, .wg-hero.sz-m .ti-overtext > h1 { font-size: calc(clamp(21px, 3cqw, 30px) * var(--h1-scale, 1)); } .wg-hero.sz-m .ti-text > p, .wg-hero.sz-m .ti-overtext > p { font-size: calc(clamp(13.5px, 1.6cqw, 16px) * var(--h2-scale, 1)); } /* small — compact poster: smaller title, tighter padding, smaller button + social */ .wg-hero.sz-s .ti-overtext > h1 { font-size: calc(clamp(18px, 2.4cqw, 24px) * var(--h1-scale, 1)); line-height: 1.08; } .wg-hero.sz-s .ti-overtext { padding: 14px; gap: 7px; } .wg-hero.sz-s .btn-cta, .wg-hero.sz-m.h-s .btn-cta { padding: 9px 14px; font-size: calc(13px * var(--btn-size, 1)); margin-top: 6px; } .wg-hero.sz-s .ti-text > .wg-social, .wg-hero.sz-s .ti-overtext > .wg-social { margin-top: 3px; } .wg-hero.sz-s .ws-star { width: 13px; height: 13px; } .wg-hero.sz-s .ws-tx { font-size: 12px; } .wg-hero.sz-s .ws-av { width: 24px; height: 24px; margin-left: -8px; } /* no-image header: sane title size for a small block (fit shrinks further if needed) */ .wg-header.sz-s h1 { font-size: calc(clamp(20px, 2.6cqw, 28px) * var(--h1-scale, 1)); } /* narrow canvas (mobile) — the wide side-by-side hero stacks (image on top, text below) so it never cramps */ @container (max-width: 560px) { .wg-hero.sz-l:not(.ti-over) { flex-direction: column !important; align-items: stretch; gap: 14px; } .wg-hero.sz-l:not(.ti-over) .ti-img { width: 100% !important; flex: 0 0 auto !important; height: 200px; min-height: 0; } .wg-hero.sz-l:not(.ti-over) .ti-text { flex: 1 1 auto; width: 100%; min-width: 0; } .wg-hero.sz-l .ti-text > h1 { font-size: calc(clamp(26px, 8cqw, 38px) * var(--h1-scale, 1)); } } /* ------------------------------- header ------------------------------------- ONE ARRANGEMENT, PARTS THAT APPEAR WHEN THEY HAVE SOMETHING TO SHOW. A background photo, a text block and a side photo: fill in a background and the text sits on it, fill in an image and it takes the other side, fill in both and you get both, fill in neither and the card is the preset's own colour. There is no second drawing to keep in step with the first. Both photos ANCHOR TO THE CARD AND SIZE FROM THE CARD — the background and the bled side photo are the only absolutely positioned things here, and both position against `.card`. No colour, radius or button shape is set here: surface, ink, accent and button radius are the preset's. The one exception is the legibility wash under text that sits ON the background photo, which exists so a title stays readable over whatever photo a business has — not a theme decision. The theme's own grade and overlay ride above it on ::after. */ .hd { position: relative; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; gap: clamp(14px, 2cqw, 26px); } .hd .hd-tx > h1, .hd .hd-tx > p { overflow-wrap: anywhere; } .hd .hd-tx { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 11px; } .hd .hd-photo { background-size: cover; background-position: center; } /* WHICH SIDE THE TEXT TAKES — the theme's call. `justify-content` is reset because `.wg-header` centres its column, and in a row that centres horizontally: with a bled side photo (absolute, out of the flow) the text would be the only item on the line and would centre into the photo's half. */ .hd.hd-al-right { flex-direction: row-reverse; } .hd.hd-al-right .hd-tx { align-items: flex-end; text-align: right; } .hd.hd-al-center .hd-tx { align-items: center; text-align: center; } .hd.hd-al-center:not(.hd-hasside) .hd-tx { margin: 0 auto; } .hd:not(.hd-hasside) .hd-tx { max-width: 44ch; } .hd.hd-al-center:not(.hd-hasside) .hd-tx { max-width: 52ch; } /* THE BACKGROUND PHOTO — the card itself. The card's own overflow clips it to the corner radius. */ /* `inset: 0` stops at the border box, so a card with a border shows a ring of its own surface around the photo — the lilac corner under a gradient card. The photo covers the border too. */ .w[data-i] .hd .hd-photo.hd-bg { position: absolute; inset: calc(-1 * var(--border-w, 0px)); z-index: 0; /* corner-shape must be inherited alongside the radius: a squircle theme sets it on `.card` only, so a photo with the SAME radius but a plain round corner cuts more than the card does and lets the card's own fill leak past it — a sliver of accent in the corner of the photo. Same fault the image+text photo layer carries a note about further down this file. */ border-radius: inherit; corner-shape: inherit; } .hd.hd-hasbg .hd-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(to right, rgba(0,0,0,.62), rgba(0,0,0,.28) 62%, rgba(0,0,0,.08)); } .w[data-base="light"] .hd.hd-hasbg .hd-bg::before { background: linear-gradient(to right, rgba(255,255,255,.78), rgba(255,255,255,.44) 62%, rgba(255,255,255,.12)); } .hd.hd-al-right.hd-hasbg .hd-bg::before { background: linear-gradient(to left, rgba(0,0,0,.62), rgba(0,0,0,.28) 62%, rgba(0,0,0,.08)); } .w[data-base="light"] .hd.hd-al-right.hd-hasbg .hd-bg::before { background: linear-gradient(to left, rgba(255,255,255,.78), rgba(255,255,255,.44) 62%, rgba(255,255,255,.12)); } .hd.hd-al-center.hd-hasbg .hd-bg::before { background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.34) 60%, rgba(0,0,0,.18)); } .w[data-base="light"] .hd.hd-al-center.hd-hasbg .hd-bg::before { background: linear-gradient(to top, rgba(255,255,255,.80), rgba(255,255,255,.50) 60%, rgba(255,255,255,.24)); } /* a cardless (bare) preset drops the card's padding — with a photo behind it there IS a surface, so the text needs the inset back or it sits on the card's very edge */ .w[data-i][data-fill="bare"] .hd.hd-hasbg { padding: clamp(18px, 2.4cqw, 26px); } /* THE SIDE PHOTO — inset as a block inside the card, or bled to the card's edge. The theme picks. */ .hd-hasside .hd-tx { flex: 1 1 52%; } .w[data-i] .hd .hd-side.hd-inset { position: relative; flex: 0 0 46%; align-self: stretch; border-radius: calc(var(--radius) * 0.66); } /* BLED: a half that runs to the card's three edges. It stays IN THE FLOW and the card's padding moves onto the text instead — as an absolutely-positioned layer it was out of the flow, so the text's share was a percentage of the CONTENT box while the photo's was a percentage of the PADDING box, and the two disagreed by exactly the padding: the text ran 21px under the photo. In the flow the two halves are measured by the same box and cannot overlap. No radius: the card's own overflow clips it to the corners. */ .w[data-i] .hd .hd-side.hd-fill { position: relative; flex: 0 0 48%; align-self: stretch; } .w[data-i] .hd:has(> .hd-side.hd-fill) { padding: 0; gap: 0; } /* outranks the bare preset's own padding */ .w[data-i] .hd:has(> .hd-side.hd-fill) .hd-tx { padding: clamp(18px, 2.4cqw, 26px); } /* COMPACT SHAPES — the same drawing with the parts that cannot fit dropped, never a clipped one. (The rest of that ladder is fitOneHeader, which drops parts once the title hits its floor.) */ .hd.h-xs .hd-tx > p, .hd.sz-s.h-s .hd-tx > p { display: none; } .hd.h-xs .wg-social, .hd.sz-s .wg-social { display: none; } .hd.h-xs .hd-tx { gap: 6px; } .hd.h-xs { padding: clamp(9px, 1.2cqw, 14px); } .hd.sz-s.hd-hasside { flex-direction: column; } .hd.sz-s .hd-tx, .hd.sz-s.hd-hasside .hd-tx { max-width: 100%; } .w[data-i] .hd.sz-s .hd-side.hd-inset { flex: 0 0 40%; } .w[data-i] .hd.sz-s .hd-side.hd-fill { flex: 0 0 40%; width: 100%; } .hd.h-xs .hd-side { display: none; } /* HEIGHT — half the screen or all of it, `dvh` so a phone's URL bar cannot make "full" overflow. Applied where the header owns its row: the bento's auto-sized first row, and the mobile stack, which has no fixed track at all. */ #grid.bento.hd-row1 { grid-template-rows: auto; } /* row 1 sizes to the header; the rest stay on --bcell */ #grid.bento .w > .card.hd-h-half { min-height: 50dvh; } #grid.bento .w > .card.hd-h-full { min-height: 100dvh; } #grid.m-stack .w > .card.hd-h-half { min-height: 50dvh; } #grid.m-stack .w > .card.hd-h-full { min-height: 92dvh; } /* a hair under, so the next card peeks and the page reads as scrollable */ /* the menu floats ON a big header — the card runs up behind it instead of losing that band to background. `--snav-h` is the bar's measured height, set in renderNav. LIVE AND PREVIEW ONLY: in the editor the header starts below the menu, where its top edge and tools can be reached. */ .wrap.nav-over #site-nav { margin-bottom: calc(-1 * var(--snav-h, 0px)); z-index: 40; } .wrap.nav-over #grid { position: relative; z-index: 1; } /* narrow canvas (phones, the mobile stack, a narrow preview) — the side photo goes under the text */ @container (max-width: 560px) { .hd.hd-hasside { flex-direction: column !important; } .hd.hd-hasside .hd-tx, .hd .hd-tx { max-width: 100%; } /* A PERCENTAGE BASIS NEEDS A DEFINITE HEIGHT TO RESOLVE AGAINST. In a grid slot the card has one and `flex: 0 0 46%` is a photo half; in the mobile stack the card is sized by its own content, so the same percentage resolves against nothing and the photo collapses to zero height — a header that silently loses its photo on phones. An aspect ratio takes its height from the width, which is definite in both places. */ .w[data-i] .hd .hd-side.hd-inset { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 10; } .w[data-i] .hd .hd-side.hd-fill { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 10; } /* the text spans the whole width here, so the wash runs up the card rather than across it — a left-to-right one fades out exactly where the last words sit */ .hd.hd-hasbg .hd-bg::before, .hd.hd-al-right.hd-hasbg .hd-bg::before { background: linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,.30) 58%, rgba(0,0,0,.06)); } .w[data-base="light"] .hd.hd-hasbg .hd-bg::before, .w[data-base="light"] .hd.hd-al-right.hd-hasbg .hd-bg::before { background: linear-gradient(to top, rgba(255,255,255,.82), rgba(255,255,255,.46) 58%, rgba(255,255,255,.10)); } } /* social-proof line (header) — star rating OR stacked avatars + a count/label */ .wg-social { display: inline-flex; align-items: center; gap: 9px; margin: 2px 0; flex-wrap: wrap; } .ws-stars { display: inline-flex; gap: 2px; } .ws-star { width: 15px; height: 15px; display: inline-grid; place-items: center; color: color-mix(in srgb, var(--ink) 26%, transparent); } .ws-star.on { color: #f5a623; } .ws-star svg { width: 100%; height: 100%; } .ws-avs { display: inline-flex; padding-left: 2px; } .ws-av { width: 32px; height: 32px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 2.5px var(--card-bg, #fff), 0 2px 5px -1px rgba(0,0,0,.28); margin-left: -11px; } .ws-avs .ws-av:first-child { margin-left: 0; } .wg-hero.ti-over .ws-av { box-shadow: 0 0 0 2.5px rgba(0,0,0,.35), 0 2px 5px -1px rgba(0,0,0,.4); } .ws-tx { font-family: var(--ds-font, var(--font)); font-size: 14px; color: var(--ink-dim); font-weight: 600; } .ws-tx b { color: var(--ink); font-weight: 750; } /* ============================ THE STATEMENT TILES ============================ One vocabulary shared by the widgets on /widgets: a giant number or headline, a small accent eyebrow, a muted subline, and either a circular arrow or a pill button in a fixed corner. THE DESIGN DOES NOT CHANGE WITH THE SIZE — ONLY THE SCALE. Everything inside is sized in `em` off one unit, and the unit is the only thing the size classes touch, so a corner icon stays in its corner and centred text stays centred at every shape the grid can make. (`cqw` would not do it: the container here is the page, not the card, so every card would get the same number.) NOTHING PRESET-OWNED IS PAINTED HERE. The surface is the card's, the ink is `--ink`, the eyebrow and the arrow are the preset's accent and button colours, and the pill is `.btn-cta` so it wears the theme's own button shape. */ /* a tile that IS a link must not wear the page's link styling — the card is the button, and an underline through a phone number reads as a mistake */ a.card.wd, a.card.wd:hover, a.card.wd * { text-decoration: none; } .wd { --wd-w: 15px; --wd-h: 1; font-size: calc(var(--wd-w) * var(--wd-h)); position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .wd.sz-s { --wd-w: 11px; } .wd.sz-m { --wd-w: 15px; } .wd.sz-l { --wd-w: 19px; } .wd.h-xs { --wd-h: .58; } .wd.h-s { --wd-h: .78; } .wd.h-m { --wd-h: 1; } .wd.h-l { --wd-h: 1.12; } .wd.h-xl { --wd-h: 1.28; } /* where the block sits in the card — the three arrangements the sheet uses */ .wd-end { justify-content: flex-end; } .wd-mid { justify-content: center; } .wd-split { justify-content: space-between; } .wd-eyebrow { font-family: var(--lb-font, var(--font)); font-size: 1.15em; font-weight: 700; color: var(--accent); line-height: 1.2; } .wd-num { font-family: var(--h1-font, var(--font)); font-weight: var(--h1-weight, 900); font-size: 7.4em; line-height: .85; letter-spacing: -0.04em; color: var(--h1-color, var(--ink)); } .wd-num small { font-size: .34em; color: var(--accent); font-weight: inherit; letter-spacing: 0; } .wd-num .wd-stop { color: var(--accent); font-size: .42em; letter-spacing: 0; vertical-align: baseline; } .wd-hero { font-family: var(--h1-font, var(--font)); font-weight: var(--h1-weight, 900); font-size: 3.1em; line-height: 1.02; letter-spacing: -0.02em; color: var(--h1-color, var(--ink)); overflow-wrap: anywhere; } .wd-ask { font-size: 2.5em; line-height: 1.1; } /* An INSTRUCTION, not a statement. "Call us now" reads as one phrase, so it keeps the display size and gets room to breathe under the icon; what was breaking it into a stack of single words was `wdLines` forcing a break at every space, not the size. `balance` is the safety net for the narrowest tiles, where three words genuinely cannot share a line. */ .wd-say { margin-top: .5em; overflow-wrap: normal; text-wrap: balance; } .wd.h-xs .wd-say, .wd.h-s .wd-say { margin-top: .28em; } .wd-sub { font-family: var(--ds-font, var(--font)); font-size: 1.4em; font-weight: 700; color: var(--ink-dim); line-height: 1.25; } .wd-gap { height: .5em; flex: 0 0 auto; } /* the circular arrow — the preset's button, kept in one corner at every size */ .wd-arrow { width: 3.6em; height: 3.6em; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--btn-bg); color: var(--btn-text); } .wd-arrow svg { width: 1.4em; height: 1.4em; stroke: currentColor; } .wd-tr { position: absolute; top: 2.1em; right: 2.1em; } .wd-br { position: absolute; bottom: 2.1em; right: 2.1em; } .wd-selfend { align-self: flex-end; } .wd-pill { align-self: flex-end; display: inline-flex; align-items: center; gap: .55em; font-size: 1.05em; } .wd-pill svg { width: 1em; height: 1em; stroke: currentColor; } .wd-name { font-family: var(--h1-font, var(--font)); font-weight: 800; font-size: 1.85em; line-height: 1.1; color: var(--h1-color, var(--ink)); letter-spacing: -0.01em; } .wd-num.wd-accent { color: var(--accent); font-size: 4.2em; line-height: 1; } .wd-mark { font-family: var(--h1-font, var(--font)); font-weight: var(--h1-weight, 900); font-size: 10em; line-height: .78; color: var(--accent); letter-spacing: -0.04em; } .wd.wd-center { align-items: center; text-align: center; } .wd-ring { position: relative; width: 11em; height: 11em; align-self: center; } .wd-ring-svg { width: 100%; height: 100%; display: block; } .wd-ring-bg { fill: none; stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: 10; } .wd-ring-fg { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; } .wd-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em; } .wd-ring-t { font-family: var(--h1-font, var(--font)); font-weight: var(--h1-weight, 900); font-size: 1.5em; line-height: 1; color: var(--h1-color, var(--ink)); } .wd-ring-s { font-family: var(--ds-font, var(--font)); font-size: .95em; font-weight: 700; color: var(--ink-dim); } .wd-icons { display: flex; gap: .5em; } .wd-ic-sm { width: 2.2em; height: 2.2em; display: grid; place-items: center; color: var(--icon-color, var(--accent)); } .wd-ic-sm svg { width: 100%; height: 100%; } .wd-ic { width: 3.4em; height: 3.4em; display: grid; place-items: center; color: var(--accent); } .wd-ic svg { width: 100%; height: 100%; } .wd-hd2 { display: flex; flex-direction: column; gap: .35em; } .wd-spacer { display: block; } /* a phone number is one line on the sheet — the fit pass shrinks it rather than wrapping it */ .wd-hero.wd-phone { white-space: nowrap; } .wd-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; } .wd-stack { display: flex; flex-direction: column; gap: .55em; align-items: flex-start; } .wd-status { display: flex; align-items: center; gap: .6em; } .wd-dot { width: .75em; height: .75em; border-radius: 50%; flex: 0 0 auto; background: var(--status-closed); } .wd-dot.on { background: var(--status-open); } .wd-arrow.wd-big { width: 5em; height: 5em; } .wd-arrow.wd-big svg { width: 1.8em; height: 1.8em; } .wd-cartslot .sh-cartpill { position: static; } /* a tile whose corner holds an arrow keeps clear of it */ .wd-hasarrow .wd-hd, .wd-hasarrow .wd-stack { padding-right: 4.4em; } .wd-tiny .wd-sub { font-size: 1.15em; } /* THE 94px SHAPE. A tile at that height has room for one line and nothing else, so everything but the statement comes off — the same ladder the header uses, and for the same reason: a part that is dropped is not a part that is clipped. */ .wd.h-xs { padding: clamp(9px, 1.2cqw, 14px) clamp(12px, 1.6cqw, 18px); justify-content: center; } .wd.h-xs .wd-sub, .wd.h-xs .wd-eyebrow, .wd.h-xs .wd-arrow, .wd.h-xs .wd-icons, .wd.h-xs .wd-ic, .wd.h-xs .wd-ring, .wd.h-xs .wd-status { display: none; } .wd.h-xs .wd-hero br, .wd.h-xs .wd-num br { display: none; } .wd.h-xs .wd-hero, .wd.h-xs .wd-ask { font-size: 2em; line-height: 1.05; } .wd.h-xs .wd-num { font-size: 2.6em; line-height: 1; } .wd.h-xs .wd-mark { font-size: 3em; line-height: 1; } .wd.h-xs .wd-name { font-size: 1.3em; } .wd.h-xs .wd-hd, .wd.h-xs .wd-hd2, .wd.h-xs .wd-stack { gap: .2em; } .wd.h-xs .wd-hasarrow .wd-stack { padding-right: 0; } /* ------------------------- widget: link ------------------------- */ a.wg-link { display: flex; flex-direction: column; gap: 10px; text-decoration: none; } .ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: calc(var(--radius) * 0.4 + 4px); background: var(--icon-chip, color-mix(in srgb, var(--ink) 9%, transparent)); border: 1px solid var(--card-border); display: grid; place-items: center; } .ic svg { width: 22px; height: 22px; } .wg-link .lk-label { font-family: var(--h1-font, var(--font)); font-weight: var(--h1-weight, 700); font-style: var(--h1-style, normal); color: var(--h1-color, var(--ink)); font-size: 18px; letter-spacing: -0.01em; } .wg-link .lk-desc { font-family: var(--ds-font, var(--font)); color: var(--ds-color, var(--ink-dim)); font-size: calc(14px * var(--ds-scale, 1)); font-weight: var(--ds-weight, 400); font-style: var(--ds-style, normal); } .wg-link .lk-host { font-family: var(--ds-font, var(--font)); color: var(--ink-faint); font-size: 12px; margin-top: auto; word-break: break-all; } .w.s a.wg-link .lk-desc { display: none; } /* ------------------------- widget: hours ------------------------- */ /* inner card: a styled group inside the widget (theme-controlled via Cards/Border → Inner) */ .wg-inner { background: var(--in-bg); border: var(--in-border-w, 0) solid var(--in-border, transparent); border-radius: var(--in-radius, 18px); padding: 6px 12px; margin: 14px 0 2px; } [data-infill="glass"] .wg-inner { backdrop-filter: blur(var(--in-blur, 20px)) saturate(140%); -webkit-backdrop-filter: blur(var(--in-blur, 20px)) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.30), 0 8px 24px -14px rgba(0,0,0,0.5), var(--in-glow, 0 0 transparent); } [data-infill="glass"] .wg-hours .row { border-bottom-color: rgba(255,255,255,0.08); } .wg-hours .row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--hair); font-family: var(--lb-font, var(--font)); font-size: calc(15px * var(--lb-scale, 1)); font-weight: var(--lb-weight, 400); font-style: var(--lb-style, normal); color: var(--lb-color, var(--ink)); } .wg-hours .row:last-child { border-bottom: 0; } .wg-hours .row.today { color: var(--accent); font-weight: 600; } .wg-hours .row .cl { font-family: var(--ds-font, var(--font)); color: var(--ds-color, var(--ink-dim)); font-weight: var(--ds-weight, 400); font-size: calc(1em * var(--ds-scale, 1) / var(--lb-scale, 1)); } .wg-hours .row.closed .cl { color: var(--ink-faint); } .w.s .wg-hours .row:nth-child(n+4) { display: none; } /* compact in square */ /* ===================== widgets v2 — every widget × every size its own layout ===================== */ .wg-link, .wg-text, .wg-contact, .wg-whatsapp, .wg-form, .wg-map, .wg-icons, .wg-gallery, .wg-hours { display: flex; flex-direction: column; } /* universal heading (overline) — consistent across every widget */ .wg-h { margin: 0 0 12px; font-family: var(--lb-font, var(--font)); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--lb-color, var(--ink-faint)); } .wg-bighead { margin: 0 0 6px; font-family: var(--h1-font, var(--font)); font-weight: var(--h1-weight, 800); font-style: var(--h1-style, normal); font-size: clamp(22px, 3.4cqw, 34px); color: var(--h1-color, var(--ink)); letter-spacing: -0.02em; line-height: 1.05; } /* shared base head: overline LABEL · TITLE · DESCRIPTION — each hidden when empty. Typography tracks the theme's per-element roles (label/title/description). */ .wg-head2 { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; min-width: 0; } .wg-head2:last-child { margin-bottom: 0; } /* ── unified body: pinned head above, body fills the remaining card height ── so widgets never leave a dead gap at the bottom and never overlap themselves. */ .wg-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .wg-body.bd-top { justify-content: flex-start; } .wg-body.bd-center { justify-content: safe center; } /* "safe" → never spill content over the head when it doesn't fit */ .wg-body.bd-between { justify-content: space-between; } .wg-body.bd-fill > * { flex: 1 1 auto; min-height: 0; } /* text widget: even breathing room between overline / title / paragraph (was cramped) */ .wg-text .wg-body { gap: 10px; } .wg-text .wg-bighead, .wg-text .wg-ttl { margin-bottom: 0; } .wg-ov { font-family: var(--lb-font, var(--font)); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--lb-color, var(--ink-faint)); } .wg-ttl { margin: 0; font-family: var(--h1-font, var(--font)); font-weight: var(--h1-weight, 700); font-style: var(--h1-style, normal); color: var(--h1-color, var(--ink)); text-shadow: var(--h1-glow, none); letter-spacing: -0.02em; line-height: 1.08; font-size: calc(clamp(18px, 2.4cqw, 23px) * var(--h1-scale, 1)); } .wg-dsc { margin: 0; font-family: var(--ds-font, var(--font)); color: var(--ds-color, var(--ink-dim)); font-weight: var(--ds-weight, 400); font-style: var(--ds-style, normal); font-size: calc(14px * var(--ds-scale, 1)); line-height: 1.5; } /* per-role text case (Aa / UPPER / lower / Title) — set per element in Design → Text, and on buttons in Design → Buttons */ .wg-header p, .wg-hero .ti-text > p, .wg-hero .ti-overtext > p { text-transform: var(--h2-transform, none); } .wg-dsc, .wg-sub { text-transform: var(--ds-transform, none); } .sz-l .wg-ttl { font-size: calc(clamp(22px, 3.2cqw, 32px) * var(--h1-scale, 1)); } .sz-l .wg-dsc { font-size: calc(15px * var(--ds-scale, 1)); } .sz-s .wg-ttl { font-size: calc(16px * var(--h1-scale, 1)); } .sz-s .wg-head2 { margin-bottom: 8px; } .ic.sm { width: 36px; height: 36px; } .ic.sm svg { width: 18px; height: 18px; } .lk-fav { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; } .wim-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 130px; color: var(--ink-faint); background: color-mix(in srgb, var(--ink) 5%, transparent); } .wim-empty svg { width: 36px; height: 36px; } /* "Add an image / Add photos" hint under the placeholder icon */ .wim-hint { display: block; font-family: var(--ds-font, var(--font)); font-size: 12px; font-weight: 600; letter-spacing: .01em; margin-top: 7px; opacity: .85; text-align: center; } /* ---- LINK — the whole card IS the button (one destination, opens a new tab) ---- */ .wg-link { position: relative; text-decoration: none; cursor: pointer; transition: transform .15s, filter .15s; } .wg-link:hover { transform: translateY(-2px); } /* icon chip uses the same --icon-bg/-bd/-fg tokens as every other widget (contact, form, …) so the Icons setting is consistent */ .wg-link .lk-ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: calc(var(--radius) * 0.3 + 4px); display: grid; place-items: center; background: var(--icon-bg, color-mix(in srgb, var(--accent) 14%, transparent)); border: 1px solid var(--icon-bd, transparent); color: var(--icon-fg, var(--accent)); overflow: hidden; } .wg-link .lk-ic svg { width: 22px; height: 22px; } .wg-link .lk-ic.lk-img { background-size: cover; background-position: center; border: 0; } .wg-link .lk-label { font-family: var(--h1-font, var(--font)); font-weight: var(--h1-weight, 700); font-style: var(--h1-style, normal); color: var(--h1-color, var(--ink)); font-size: clamp(16px, 2cqw, 19px); letter-spacing: -0.01em; min-width: 0; } /* external-link badge — top-right corner, like the + (signals: opens a new tab) */ .wg-link .lk-ext { position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); opacity: .85; transition: opacity .15s; } .wg-link:hover .lk-ext { opacity: 1; } .wg-link .lk-ext svg { width: 15px; height: 15px; } /* link bar — thumb left · label (wide & short); reserve room for the corner badge */ .wg-link.lk-bar { flex-direction: row; align-items: center; gap: 14px; padding-right: clamp(50px, 7cqw, 58px); } .wg-link.lk-bar .lk-label { flex: 1; } /* link tile — thumb on top · label under (small square, or any tall block) */ .wg-link.lk-tile { flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; } .wg-link.lk-tile .lk-ic { width: 50px; height: 50px; } .wg-link.lk-tile .lk-ic svg { width: 26px; height: 26px; } .wg-link.lk-tile.sz-s { justify-content: space-between; } .wg-link.lk-tile .lk-label { font-size: clamp(17px, 2.2cqw, 22px); } /* ---- TEXT ---- */ .wg-text { gap: 8px; justify-content: center; min-height: 0; } .wg-text .wg-body { min-height: 0; max-height: 100%; overflow: hidden; position: relative; } .wg-p { margin: 0; font-family: var(--ds-font, var(--font)); color: var(--ds-color, var(--ink-dim)); font-size: calc(15px * var(--ds-scale, 1)); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } /* clipped text fades out at the bottom so it's clear there's more — tap the card to read it all */ .wg-text.is-clamped .wg-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(transparent, var(--card-bg, rgba(0,0,0,0.4))); pointer-events: none; } .wg-text.sz-l .wg-p { font-size: 17px; } /* ---- IMAGE ---- */ .wg-image { padding: 0 !important; position: relative; min-height: 150px; } .wg-image.sz-l { min-height: 320px; } .wim { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 1; } /* INSET frame (preset "Media edge → Padded"): the photo becomes a rounded block inside the card padding */ .w[data-frame="inset"] .wg-image { --fpad: clamp(14px, 2.2cqw, 20px); padding: var(--fpad) !important; background: var(--card-bg); } .w[data-frame="inset"] .wg-image > .wim, .w[data-frame="inset"] .wg-image > .wim-empty { inset: var(--fpad); border-radius: var(--in-radius, 16px); overflow: hidden; } .w[data-frame="inset"] .wg-image .wg-imgcap { padding: 0 var(--fpad) var(--fpad); } /* deferred (lazy) photo placeholder — a faint fill until the image scrolls into view */ .lbg-ph { background-color: color-mix(in srgb, var(--ink) 7%, transparent); } /* blurhash placeholder — the photo's own decoded low-res preview, upscaled (soft) until it loads */ .lbg-bh { background-size: cover !important; background-position: center !important; } /* ── QR widget ── */ .wg-qr { display: flex; align-items: center; gap: clamp(12px, 3cqw, 22px); } .qr-img { flex: 0 0 auto; width: clamp(92px, 34%, 160px); aspect-ratio: 1; display: block; } .qr-img svg { width: 100%; height: 100%; display: block; } .qr-empty { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-faint); } .qr-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; } .qr-ov { white-space: nowrap; } .qr-title { font-family: var(--h1-font, var(--font)); font-weight: var(--h1-weight, 700); font-style: var(--h1-style, normal); font-size: clamp(18px, 2.4cqw, 25px); color: var(--h1-color, var(--ink)); line-height: 1.1; letter-spacing: -0.01em; } .qr-desc { margin: 0; } .wg-qr.sz-s { gap: 12px; } .wg-qr.sz-s .qr-img { width: clamp(74px, 40%, 96px); } .wg-qr.sz-s .qr-title { font-size: 16px; } /* tall/portrait cards → stack the QR on top, text centred below */ .wg-qr.h-l { flex-direction: column; text-align: center; justify-content: center; } .wg-qr.h-l .qr-img { width: clamp(120px, 52cqw, 220px); } .wg-qr.h-l .qr-tx { align-items: center; } /* styled dropdown (app-native replacement for native