/* QCK 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; } @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:'QCK Area'; src:url(/fonts/ic-area.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Ashford'; src:url(/fonts/ic-fontspringdemoashf.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Bentona'; src:url(/fonts/ic-bentonawilson.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Benzin'; src:url(/fonts/ic-benzinregular.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Causten'; src:url(/fonts/ic-caustenregular.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Chloe'; src:url(/fonts/ic-chloe.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK F37 Moon'; src:url(/fonts/ic-f37moon.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Fifties'; src:url(/fonts/ic-vvdsfifties.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Flatline'; src:url(/fonts/ic-flatlinesans.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Genty'; src:url(/fonts/ic-gentydemo.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Growth'; src:url(/fonts/ic-growth.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Gunterz Round'; src:url(/fonts/ic-fontspringdemogunt.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Gunterz'; src:url(/fonts/ic-gunterz.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Inge'; src:url(/fonts/ic-inge.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Kapra Neue'; src:url(/fonts/ic-kapraneuepro.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Lapoya'; src:url(/fonts/ic-lapoya.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Lemon'; src:url(/fonts/ic-lemon.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Love'; src:url(/fonts/ic-love.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Mathreal'; src:url(/fonts/ic-mathreal.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Morning'; src:url(/fonts/ic-morningmemories.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Neiko'; src:url(/fonts/ic-neiko.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Nimbus'; src:url(/fonts/ic-nimbus.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Didot'; src:url(/fonts/ic-nndidotmodernstd.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Right Slab'; src:url(/fonts/ic-pprightslab.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Runalto'; src:url(/fonts/ic-runalto.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Sigurd'; src:url(/fonts/ic-sigurd.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Simplicité'; src:url(/fonts/ic-hvsimplicite.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Singleton'; src:url(/fonts/ic-singleton.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Swell'; src:url(/fonts/ic-swell.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK Versailles'; src:url(/fonts/ic-versailles.woff2) format('woff2'); font-weight:100 900; font-display:swap; } @font-face { font-family:'QCK 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; /* QCK app chrome — FIXED, never follows the site theme */ --qck: #FB5A2D; --qck-ink: #1a0a04; --qck-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, 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: #FB5A2D; --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 QCK 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). */ .qck-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) { .qck-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, #FB5A2D) 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; } /* layout gallery picker */ .gp-modal { max-width: 540px; width: 92vw; } .gp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 2px; } .gp-item { display: flex; flex-direction: column; gap: 9px; padding: 11px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.045); color: #fff; cursor: pointer; font: inherit; } .gp-item:hover { background: rgba(255,255,255,0.08); } /* QCK chrome → always the QCK orange, never the site's theme accent */ .gp-item.on { border-color: #FB5A2D; box-shadow: 0 0 0 2px color-mix(in srgb, #FB5A2D 60%, transparent); } .gp-prevwrap { aspect-ratio: 1 / 1; width: 100%; } .gp-prev { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(var(--rows, 1), 1fr); gap: 3px; height: 100%; } .gp-prev > span { background: rgba(255,255,255,0.30); border-radius: 3px; } .gp-item.on .gp-prev > span { background: color-mix(in srgb, #FB5A2D 75%, #fff); } .gp-name { font-size: 12px; font-weight: 650; text-align: center; color: rgba(255,255,255,0.85); } /* mobile: one column, stacked, full-width; positions ignored */ /* BAND — the tenth layout. Full-width cards, capped at 1200, stacked, height from content. This is the one layout where the card is not a box: `grid-auto-rows` never applies because the container is a flex column, so `height: 100%` on the card has nothing to resolve against and is released to `auto`. Everything that assumed a definite height needs a floor instead of a track, which is what --band-min is for — without it an empty-ish widget collapses to a sliver and a full-bleed media child (image, gallery, map) resolves to zero and disappears. */ #grid.bento.stacked { display: flex; flex-direction: column; gap: 64px; max-width: 1200px; margin: 0 auto; } #grid.bento.stacked > .sec-band { width: 100%; } #grid.bento.stacked .w { grid-column: auto !important; grid-row: auto !important; width: auto; min-width: 0; height: auto; min-height: var(--band-min, 200px); } #grid.bento.stacked .w > .card, #grid.bento.stacked .w > .wg-image, #grid.bento.stacked .w > .wg-gallery, #grid.bento.stacked .w > .wg-map, #grid.bento.stacked .w > .wg-header, #grid.bento.stacked .w > .wg-hero { height: auto; min-height: var(--band-min, 200px); } /* Media that filled a definite-height box now needs its own floor, or it resolves to nothing. */ #grid.bento.stacked .wg-image, #grid.bento.stacked .wg-gallery, #grid.bento.stacked .wg-map { min-height: 340px; } #grid.bento.stacked .wg-header, #grid.bento.stacked .wg-hero { min-height: 380px; } /* SECTIONS IN BAND — eyebrow · title · description · CTA · image · content. Every part is rendered only when filled, so an absent part costs nothing: there is no empty box to collapse. Paint is untouched here — every colour reads a preset variable, as the guards require. */ .sec-band { position: relative; display: grid; gap: var(--sec-gap, 26px); background-size: cover; background-position: center; border-radius: var(--radius, 20px); /* the surface itself — the preset's, resolved onto the section in buildSection */ background-color: var(--card-bg, rgba(255,255,255,.04)); border: 1px solid var(--card-border, transparent); color: var(--ink, #fff); font-family: var(--font, inherit); padding: var(--sec-pad, 40px); } /* ONE SURFACE, NOT TWO. Inside a section the widget's card stops being a card: the section is already the surface, and a card on a card is the box-in-a-box that made the head look like it was floating above the content rather than sitting on it. */ /* NOT `.sec-content > .w > .card` — that is (0,2,1) and the paint comes from `.w[data-i][data-fill="solid"] .card`, which is (0,3,1) and declared later. It never applied, so the section rendered a card inside a card. It is also `outline`, not `border`, so `border: 0` removed nothing. Scoped through #grid to win outright, and every surface property named. */ #grid.bento.stacked .sec-content > .w.in-sec > .card, #grid.bento.stacked .sec-content > .w.in-sec > .wg-image, #grid.bento.stacked .sec-content > .w.in-sec > .wg-gallery, #grid.bento.stacked .sec-content > .w.in-sec > .wg-map, #grid.bento.stacked .sec-content > .w.in-sec > .wg-hero { background: none; outline: 0; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; } .sec-band[data-density="tight"] { --sec-gap: 18px; --sec-pad: 28px; } .sec-band[data-density="generous"] { --sec-gap: 30px; --sec-pad: 48px; } /* TITLE ABOVE — head, then content. TITLE LEFT — head in a column beside it. NONE — content only. */ .sec-band[data-title="above"], .sec-band[data-title="none"] { grid-template-columns: 1fr; } .sec-band[data-title="left"] { grid-template-columns: minmax(220px, 28%) 1fr; align-items: start; column-gap: 40px; } .sec-band[data-align="centred"] .sec-head { text-align: center; margin-inline: auto; max-width: 62ch; } .sec-band[data-align="centred"][data-title="left"] { grid-template-columns: 1fr; } /* a left rail cannot also be centred */ .sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .sec-band[data-align="centred"] .sec-head { align-items: center; } .sec-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink, #fff); opacity: .45; } .sec-title { margin: 0; font-family: var(--ds-font, var(--font, inherit)); font-size: clamp(24px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink, #fff); } .sec-desc { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.5; color: var(--ink, #fff); opacity: .68; } .sec-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 4px; padding: 12px 22px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; border: 0; border-radius: var(--btn-radius, 999px); background: var(--accent, #FB5A2D); color: var(--on-accent, #fff); } /* IMAGE PLACEMENTS — five real arrangements, built once and reused by every section. This is where themes differ: same widget, same data, a full-bleed background versus a square beside the text reads as a different site. A placement is a COMPONENT, not a toggle. */ .sec-img { border-radius: var(--in-radius, 16px); background-size: cover; background-position: center; } /* background — full-bleed behind the whole section, with a scrim so any photo stays legible */ .sec-band[data-image="background"] { background-size: cover; background-position: center; } .sec-band[data-image="background"]::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.66)); } .sec-band[data-image="background"] > * { position: relative; z-index: 1; } /* left-square — a square beside the text. The square is the point: it never stretches. */ .sec-band[data-image="left-square"] { grid-template-columns: minmax(200px, 34%) 1fr; column-gap: 40px; align-items: center; } .sec-band[data-image="left-square"] > .sec-img { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 1; align-self: center; } .sec-band[data-image="left-square"] > .sec-head, .sec-band[data-image="left-square"] > .sec-content { grid-column: 2; } /* left-full — full height beside the text, so the section reads as two panels */ .sec-band[data-image="left-full"] { grid-template-columns: minmax(220px, 40%) 1fr; column-gap: 40px; align-items: stretch; padding: 0; overflow: hidden; } .sec-band[data-image="left-full"] > .sec-img { grid-column: 1; grid-row: 1 / span 2; border-radius: 0; align-self: stretch; min-height: 340px; } .sec-band[data-image="left-full"] > .sec-head { grid-column: 2; padding: var(--sec-pad, 48px) var(--sec-pad, 48px) 0 0; } .sec-band[data-image="left-full"] > .sec-content { grid-column: 2; padding: 0 var(--sec-pad, 48px) var(--sec-pad, 48px) 0; } /* behind-text — full width with the text over it. The image belongs to the HEAD, not the section: the content below stays on the card surface and readable. */ .sec-band[data-image="behind-text"] > .sec-head { position: relative; isolation: isolate; padding: 44px; border-radius: var(--in-radius, 16px); overflow: hidden; color: #fff; } .sec-band[data-image="behind-text"] > .sec-head::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--sec-photo); background-size: cover; background-position: center; } .sec-band[data-image="behind-text"] > .sec-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.7)); } .sec-band[data-image="behind-text"] > .sec-head .sec-eyebrow, .sec-band[data-image="behind-text"] > .sec-head .sec-title, .sec-band[data-image="behind-text"] > .sec-head .sec-desc { color: #fff; opacity: 1; } .sec-band[data-image="behind-text"] > .sec-head .sec-desc { opacity: .84; } /* CONTENT — the widget, and only its rows/cards/media. Its card chrome is released: inside a section the surface belongs to the section, not to a tile. */ .sec-content { min-width: 0; } /* Media in a section is a band, not a tile: it gets a height of its own rather than the 200px floor a stacked card falls back to, which made the map read as a letterbox strip. */ .sec-content .wg-map, .sec-content .wg-gallery { min-height: 420px; } .sec-content > .w { width: auto; min-height: 0; } .sec-content > .w > .card { height: auto; min-height: 0; } /* SHOW LESS RATHER THAN SHRINK — a cap, not a smaller type size. */ .sec-band[style*="--sec-cap"] .sec-content .gal-cell:nth-child(n + var(--sec-cap)) { display: none; } /* At 390 everything is one column — the left rail and the left image both fold. */ @media (max-width: 560px) { .sec-band[data-title="left"], .sec-band[data-image^="left"] { grid-template-columns: 1fr; } .sec-band[data-image^="left"] > .sec-head, .sec-band[data-image^="left"] > .sec-content { grid-column: 1; } .sec-band[data-image="left-full"] > .sec-head, .sec-band[data-image="left-full"] > .sec-content { padding-inline: 24px; } .sec-band[data-image="behind-text"] > .sec-head { padding: 24px; } .sec-band[data-image="background"] { padding: 24px; } .sec-img { min-height: 200px; } } #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; } body.is-dragging #grid.bento .w { transition: none; } /* ------------------------- 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. */ .qck-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). */ .qck-grid.sec-mode .sec-slot .card, .qck-grid.sec-mode .sec-slot .wg-image, .qck-grid.sec-mode .sec-slot .wg-gallery, .qck-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 QCK 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(--accent) 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) */ body:not(.is-owner) .sec:not(:has(.sec-slot .w)), body.preview .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(--accent); 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, #FB5A2D); 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(--accent); 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, #FB5A2D); box-shadow: 0 0 0 1px var(--qck, #FB5A2D); } .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-dock { position: fixed; top: 16px; left: 16px; z-index: 70; display: flex; gap: 8px; } body.preview .undo-dock { display: none; } .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 */ @media (max-width: 700px) { .sec-empty, .sec-tools, .sec-addrow, .sec-tray, .undo-dock { display: none !important; } } 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 */ /* GLASS — nxtwk "liquid glass": multi-layer inset bevel + soft drop + radial sheen */ .w[data-i][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 { 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 { 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 { --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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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)); } } /* 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; } /* ------------------------- 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