/* css/site/base.css */ /* ========================================================================== Weesify public pages: the base part (ADR-0068 §9). Tokens, the page shell, typography, shared primitives (buttons, cards, inputs), block wrappers, styling tokens, animations. Every page bundle starts with it, and module pages (forms, store, bookings, courses, community) use it with their module parts. Themed entirely by --site-* tokens set on .ws-site from the document theme (Theme::cssVars). Scoped under .ws-site so the builder canvas can include the same rules inside the app. ========================================================================== */ @font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/fonts/Poppins-Regular.woff") format("woff"); } @font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/fonts/Poppins-Medium.woff") format("woff"); } @font-face { font-family: "Poppins"; font-weight: 600 700; font-display: swap; src: url("/fonts/Poppins-Bold.woff") format("woff"); } @font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/fonts/Lora-Italic-Variable.woff") format("woff"); } @font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap; src: url("/fonts/Manrope-Variable.woff") format("woff"); } @font-face { font-family: "Urbanist"; font-weight: 100 900; font-display: swap; src: url("/fonts/Urbanist-Variable.woff") format("woff"); } /* R34C · Arabic faces (Noto Kufi / Noto Naskh Arabic, OFL, subset to Arabic). unicode-range keeps Latin pages from ever fetching them. */ @font-face { font-family: "Noto Naskh Arabic"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("/fonts/NotoNaskhArabic-Variable.woff") format("woff"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; } @font-face { font-family: "Noto Kufi Arabic"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("/fonts/NotoKufiArabic-Variable.woff") format("woff"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/InstrumentSerif-Italic.woff") format("woff"); } /* Right-to-left (ADR-0058). This file ships in every bundle, including the standalone public one, so the direction primitives live here too: the transform sign, mirrored icons, and machine text that stays left to right. */ [dir="rtl"] { --dir-sign: -1; } [dir="ltr"] { --dir-sign: 1; } [dir="rtl"] .flip-rtl { --flip-x: -1; transform: scaleX(-1); } [dir="rtl"] .ws-page input:is([type="url"], [type="email"], [type="tel"]) { direction: ltr; } /* ---- Page shell -------------------------------------------------------------------------------------------- */ .ws-site :is(h1, h2, h3, h4, p, summary, b, strong, blockquote, figcaption) { color: inherit; } .ws-site :is(b, strong) { font-weight: 700; } /* never inherit the app theme inside the builder canvas / thumbnails */ .ws-page { margin: 0; min-height: 100dvh; -webkit-font-smoothing: antialiased; } .ws-page *, .ws-page *::before, .ws-page *::after, .ws-frame, .ws-frame *, .ws-frame *::before, .ws-frame *::after { box-sizing: border-box; } .ws-page main { min-height: 100dvh; } .ws-site { --gap: 12px; position: relative; min-height: 100%; background: var(--site-bg); color: var(--site-text); font-family: var(--site-font); font-size: 15px; line-height: 1.55; font-weight: 500; -webkit-font-smoothing: antialiased; overflow: hidden; overflow: clip; } .ws-page .ws-site { min-height: 100dvh; } .ws-site-inner { width: 100%; max-width: 560px; margin: 0 auto; padding: 44px 18px 40px; display: flex; flex-direction: column; gap: var(--gap); position: relative; } .ws-site a { color: inherit; text-decoration: none; } .ws-site svg { width: 18px; height: 18px; flex: none; } .ws-block { position: relative; animation: ws-rise .5s cubic-bezier(.2,.8,.2,1) both; } .ws-block:nth-child(2) { animation-delay: .04s } .ws-block:nth-child(3) { animation-delay: .08s } .ws-block:nth-child(4) { animation-delay: .12s } .ws-block:nth-child(5) { animation-delay: .16s } .ws-block:nth-child(n+6) { animation-delay: .2s } @keyframes ws-rise { from { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { .ws-block { animation: none; } } /* ---- Shared primitives: buttons (themed by .ws-btn-*), cards, inputs --------------------------------------- */ /* Buttons (themed by .ws-btn-*) */ .ws-button { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 18px; border-radius: var(--site-radius); font-weight: 700; letter-spacing: -0.01em; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s, border-color .18s; } .ws-button:hover { transform: translateY(-2px); } .ws-button:active { transform: translateY(0) scale(.99); } .ws-button:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; } .ws-button-label { flex: 1; text-align: center; } .ws-button-icon, .ws-button-arrow { width: 22px; display: grid; place-items: center; opacity: .85; } .ws-button-arrow { opacity: 0; transform: translate(-4px, 4px); transition: opacity .18s, transform .18s; } .ws-button:hover .ws-button-arrow { opacity: .7; transform: none; } .ws-btn-solid .ws-button { background: var(--site-btn-bg); color: var(--site-btn-text); box-shadow: 0 1px 2px rgb(0 0 0 / .08); } .ws-btn-solid .ws-button:hover { box-shadow: 0 10px 24px -12px rgb(0 0 0 / .45); } .ws-btn-soft .ws-button { background: color-mix(in oklab, var(--site-btn-bg) 16%, transparent); color: var(--site-text); border: 1px solid color-mix(in oklab, var(--site-btn-bg) 30%, transparent); backdrop-filter: blur(8px); } .ws-btn-soft .ws-button:hover { background: color-mix(in oklab, var(--site-btn-bg) 24%, transparent); } .ws-btn-outline .ws-button { background: transparent; color: var(--site-text); border: 1.5px solid var(--site-text); } .ws-btn-outline .ws-button:hover { background: var(--site-text); color: var(--site-bg-base); } .ws-btn-shadow .ws-button { background: var(--site-surface); color: var(--site-text); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 8px 22px -10px rgb(0 0 0 / .25); } .ws-btn-shadow .ws-button:hover { box-shadow: 0 16px 32px -12px rgb(0 0 0 / .32); } .ws-site .ws-button-featured { background: var(--site-accent) !important; color: var(--site-accent-text) !important; border-color: transparent !important; box-shadow: 0 12px 28px -14px var(--site-accent) !important; } .ws-site .ws-button-outline { background: transparent !important; color: var(--site-text) !important; border: 1.5px solid currentColor !important; box-shadow: none !important; } .ws-placeholder { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 16px; border-radius: var(--site-radius); border: 1.5px dashed color-mix(in oklab, var(--site-text) 22%, transparent); color: var(--site-muted); font-size: 14px; } /* Cards (capture, countdown) */ .ws-card { padding: var(--b-pad, 20px); border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); background: var(--b-bg, var(--site-surface)); color: var(--b-fg, inherit); border: var(--b-border, 1px solid color-mix(in oklab, var(--site-text) 9%, transparent)); box-shadow: var(--b-shadow, 0 12px 32px -22px rgb(0 0 0 / .35)); text-align: var(--b-align, center); } .ws-card-title { margin: 0; font-size: 1.05rem; font-weight: 600; } .ws-card-text { margin: 6px 0 0; color: var(--site-muted); font-size: 14px; } .ws-capture-form { margin-top: 14px; display: grid; gap: 8px; } .ws-capture-row { display: flex; gap: 8px; } .ws-input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: calc(var(--site-radius) - 2px); border: 1px solid color-mix(in oklab, var(--site-text) 18%, transparent); background: color-mix(in oklab, var(--site-surface) 80%, white); color: #0E1A15; font: inherit; } .ws-input:focus { outline: 3px solid color-mix(in oklab, var(--site-accent) 45%, transparent); border-color: var(--site-accent); } .ws-submit { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 18px; border: 0; border-radius: calc(var(--site-radius) - 2px); background: var(--site-accent); color: var(--site-accent-text); font: inherit; font-weight: 600; cursor: pointer; transition: filter .15s, transform .15s; } .ws-submit:hover { filter: brightness(1.05); transform: translateY(-1px); } .ws-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--site-muted); text-align: start; } .ws-consent input { margin-top: 3px; accent-color: var(--site-accent); } .ws-success { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 14px 0 0; color: var(--site-text); font-weight: 500; } .ws-success svg { color: var(--site-accent); } .ws-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } .ws-report-link { display: block; width: max-content; margin: 10px auto 0; font-size: 12px; opacity: .55; color: inherit; text-decoration: underline; text-underline-offset: 3px; } .ws-report-link:hover { opacity: .9; } /* ---- Branding, empty states, system pages (gate / 404 / sensitive) ----------------------------------------- */ /* Branding + empty */ .ws-branding { margin: 22px auto 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--site-text, #0E1A15); background: color-mix(in oklab, var(--site-surface, #fff) 70%, transparent); border: 1px solid color-mix(in oklab, var(--site-text, #0E1A15) 10%, transparent); backdrop-filter: blur(6px); opacity: .85; } .ws-branding:hover { opacity: 1; } .ws-branding svg { width: 16px !important; height: 14px !important; color: #0BC284; } .ws-empty { padding: 40px 16px; text-align: center; color: var(--site-muted); border: 1.5px dashed color-mix(in oklab, var(--site-text) 18%, transparent); border-radius: var(--site-radius); } /* System pages (gate / 404 / sensitive) */ .ws-system { --site-text: #0E1A15; --site-muted: #56655E; --site-accent: #0BC284; --site-accent-text: #fff; --site-surface: #fff; --site-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; font-family: "Poppins", system-ui, sans-serif; color: #0E1A15; background: radial-gradient(90% 60% at 50% 0%, #D6FAEA 0%, #F6FAF8 55%, #FFFFFF 100%); } .ws-system main { min-height: 0; } .ws-system-card { width: 100%; max-width: 400px; padding: 32px 28px; text-align: center; background: #fff; border: 1px solid #E3E9E6; border-radius: 22px; box-shadow: 0 30px 60px -30px rgb(8 50 36 / .35); } .ws-system-card h1 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; } .ws-system-card p { margin: 8px 0 0; color: #56655E; font-size: 14px; } .ws-system-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: #EAFDF5; color: #067A53; } .ws-system-icon svg { width: 24px; height: 24px; } .ws-system-links { margin-top: 18px; font-size: 14px; color: #6B7280; } .ws-system-links a { color: #067A53; font-weight: 600; text-decoration: none; } .ws-system-links a:hover { text-decoration: underline; } .ws-brand-icon svg { width: 32px; height: 26px; } .ws-gate-form { margin-top: 18px; display: grid; gap: 10px; } .ws-gate-form .ws-submit { width: 100%; } .ws-error { margin: 0 !important; color: #C93434 !important; font-size: 13px !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 420px) { .ws-capture-row { flex-direction: column; } .ws-capture-row .ws-input { flex: none; width: 100%; } .ws-submit { width: 100%; } } .ws-system a.ws-submit, .ws-branding { text-decoration: none; } /* ---- Premium layer (was "v2" in site.css) ------------------------------------------------------------------- */ .ws-dark { color-scheme: dark; } .ws-btn-glass .ws-button { background: color-mix(in oklab, var(--site-surface) 100%, transparent); color: var(--site-text); border: 1px solid color-mix(in oklab, var(--site-text) 12%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 10px 30px -18px rgb(0 0 0 / .5); } .ws-btn-glass .ws-button:hover { background: color-mix(in oklab, var(--site-text) 10%, transparent); border-color: color-mix(in oklab, var(--site-accent) 45%, transparent); } .ws-button-icon { width: 34px; height: 34px; margin-block: -4px; margin-inline: -6px 0; border-radius: calc(var(--site-radius) - 6px); background: color-mix(in oklab, currentColor 10%, transparent); opacity: 1; } .ws-button-icon svg { width: 17px; height: 17px; } .ws-button-featured { position: relative; overflow: hidden; } .ws-button-featured::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: -30%; width: 30%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgb(255 255 255 / .35), transparent); animation: ws-sheen 4.5s ease-in-out infinite; } @keyframes ws-sheen { 0%, 60% { left: -40%; } 100% { left: 130%; } } .ws-card-glass { --site-blur: blur(18px) saturate(1.4); --site-line: color-mix(in oklab, var(--site-text) 11%, transparent); } .ws-card-glass .ws-card { background: var(--b-bg, var(--site-surface)); backdrop-filter: var(--b-blur, blur(18px) saturate(1.4)); -webkit-backdrop-filter: var(--b-blur, blur(18px) saturate(1.4)); border-color: color-mix(in oklab, var(--site-text) 11%, transparent); } .ws-card { border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); padding: var(--b-pad, 22px); } .ws-card-title { font-family: var(--site-heading); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; } .ws-dark .ws-input { background: rgb(255 255 255 / .08); color: var(--site-text); border-color: rgb(255 255 255 / .14); } .ws-dark .ws-input::placeholder { color: color-mix(in oklab, var(--site-text) 50%, transparent); } /* ========================================================================== ADR-0068 display layer ========================================================================== */ /* ---- Tokens the theme doesn't set on older token arrays, and colours for text over media ---------------------- */ .ws-site { --site-on-media: #FFFFFF; --site-ink-dark: #0E1A15; --site-ink-light: #FFFFFF; --site-shadow-sm: 0 1px 2px rgba(0,0,0,.08); --site-shadow-md: 0 12px 32px -22px rgba(0,0,0,.35); --site-shadow-lg: 0 24px 48px -24px rgba(0,0,0,.45); --site-shadow-float: 0 40px 80px -32px rgba(0,0,0,.5); --site-btn-radius: var(--site-radius); --site-line: color-mix(in oklab, var(--site-text) 9%, transparent); --site-gap: var(--gap); --site-ease: cubic-bezier(.2,.8,.2,1); } .ws-space-compact { --gap: 9px; --pad-k: .85; } .ws-space-airy { --gap: 18px; --pad-k: 1.2; } .ws-bshape-square { --site-btn-radius: 0px; } .ws-bshape-pill { --site-btn-radius: 999px; } .ws-bshape-leaf { --site-btn-radius: calc(var(--site-radius) + 12px) 4px; } .ws-site .ws-button { border-radius: var(--site-btn-radius); font-family: var(--site-btn-font, inherit); } /* ---- The page frame: the container every responsive rule queries (ADR-0068 §5) -------------------------------- */ .ws-frame { container: ws-page / inline-size; position: relative; z-index: 1; width: 100%; } .ws-frame > * { --w: var(--w-m, 560px); } @container ws-page (min-width: 600px) { .ws-frame > * { --w: var(--w-t, 560px); } } @container ws-page (min-width: 1024px) { .ws-frame > * { --w: var(--w-d, 560px); } } .ws-frame .ws-site-inner { max-width: var(--w, 560px); } .ws-site > .ws-frame:only-child, .ws-page .ws-frame { min-height: inherit; } /* ---- Backgrounds: in site/blocks/_background.css, linked by pages that use one (owner item 2) ------------------ */ /* ---- Block wrapper and the styling tokens (block.style → ws-s-{prop}-{value} → --b-* custom properties) ------- */ .ws-block { --b-bg: initial; --b-fg: initial; --b-border: initial; --b-radius: initial; --b-shadow: initial; --b-pad: initial; --b-blur: initial; --b-scale: 1; --b-fit: initial; --b-align: initial; --b-justify: initial; --cols: initial; min-width: 0; } .ws-surface { background: var(--b-bg, var(--site-surface)); color: var(--b-fg, inherit); border: var(--b-border, 1px solid var(--site-line)); border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); box-shadow: var(--b-shadow, var(--site-shadow-md)); backdrop-filter: var(--b-blur, var(--site-blur, none)); -webkit-backdrop-filter: var(--b-blur, var(--site-blur, none)); } .ws-s-surface-none { --b-bg: transparent; --b-border: 0 solid transparent; --b-shadow: none; --b-pad: 0px; } .ws-s-surface-solid { --b-bg: var(--site-surface); } .ws-s-surface-soft { --b-bg: color-mix(in oklab, var(--b-accent, var(--site-accent)) 12%, transparent); --b-border: 1px solid color-mix(in oklab, var(--b-accent, var(--site-accent)) 24%, transparent); --b-shadow: none; } .ws-s-surface-glass { --b-bg: color-mix(in oklab, var(--site-surface) 55%, transparent); --b-blur: blur(16px) saturate(1.4); --b-border: 1px solid color-mix(in oklab, var(--site-text) 13%, transparent); } .ws-s-surface-outline { --b-bg: transparent; --b-border: 1.5px solid color-mix(in oklab, currentColor 70%, transparent); --b-shadow: none; } .ws-s-surface-gradient { --b-bg: radial-gradient(90% 90% at 100% 0%, rgb(255 255 255 / .3), transparent 55%), linear-gradient(150deg, color-mix(in oklab, var(--b-accent, var(--site-accent)) 88%, #fff), color-mix(in oklab, var(--b-accent, var(--site-accent)) 68%, #000)); --b-fg: var(--site-on-media); --b-border: 0 solid transparent; --b-shadow: 0 14px 30px -18px rgb(0 0 0 / .5); } .ws-s-surface-accent { --b-bg: var(--b-accent, var(--site-accent)); --b-fg: var(--b-accent-text, var(--site-accent-text)); --b-border: 0 solid transparent; --b-shadow: 0 14px 30px -16px var(--b-accent, var(--site-accent)); } .ws-s-surface-image { --b-fg: var(--site-on-media); --b-border: 0 solid transparent; --b-bg: var(--b-bgi, var(--site-cover)) 50% 50% / cover no-repeat, var(--site-ink-dark); } .ws-s-shape-square { --b-radius: 0px; --site-btn-radius: 0px; } .ws-s-shape-rounded { --b-radius: max(14px, calc(var(--site-radius) + 4px)); --site-btn-radius: max(12px, var(--site-radius)); } .ws-s-shape-pill { --b-radius: 999px; --site-btn-radius: 999px; } .ws-s-shape-organic { --b-radius: 30px 10px 30px 10px; --site-btn-radius: 24px 8px 24px 8px; } .ws-s-elevation-none { --b-shadow: none; } .ws-s-elevation-sm { --b-shadow: var(--site-shadow-sm); } .ws-s-elevation-md { --b-shadow: var(--site-shadow-md); } .ws-s-elevation-lg { --b-shadow: var(--site-shadow-lg); } .ws-s-elevation-float { --b-shadow: var(--site-shadow-float); } .ws-s-text-light { --b-fg: var(--site-ink-light); color: var(--site-ink-light); --site-muted: color-mix(in oklab, var(--site-ink-light) 72%, transparent); } .ws-s-text-dark { --b-fg: var(--site-ink-dark); color: var(--site-ink-dark); --site-muted: color-mix(in oklab, var(--site-ink-dark) 68%, transparent); } .ws-s-align-start { --b-align: start; --b-justify: flex-start; text-align: start; } .ws-s-align-center { --b-align: center; --b-justify: center; text-align: center; } .ws-s-width-content { max-width: 100%; } .ws-s-width-wide { width: min(100cqw - 24px, 100% + 240px); max-width: none; margin-inline: calc((100% - min(100cqw - 24px, 100% + 240px)) / 2); } .ws-s-width-full { width: 100cqw; max-width: none; margin-inline: calc(50% - 50cqw); --b-radius: 0px; } .ws-s-padding-none { --b-pad: 0px; } .ws-s-padding-s { --b-pad: 12px; } .ws-s-padding-m { --b-pad: 20px; } .ws-s-padding-l { --b-pad: 32px; } .ws-s-size-s { --b-scale: .9; font-size: .93em; } .ws-s-size-m { --b-scale: 1; } .ws-s-size-l { --b-scale: 1.12; font-size: 1.06em; } .ws-s-size-xl { --b-scale: 1.28; font-size: 1.14em; } .ws-s-border-none { --b-border: 0 solid transparent; } .ws-s-border-hairline { --b-border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent); } .ws-s-border-strong { --b-border: 2px solid currentColor; } .ws-s-media-fit-cover { --b-fit: cover; } .ws-s-media-fit-contain { --b-fit: contain; } .ws-s-accent { --site-accent: var(--b-accent); --site-accent-text: var(--b-accent-text); } /* Hover (interactive surfaces carry .ws-hov) */ .ws-hov { transition: transform .2s var(--site-ease), box-shadow .2s, background .18s, border-color .18s; } .ws-hov:hover { transform: translateY(var(--b-hover-y, -2px)) rotate(var(--b-hover-rot, 0deg)); } .ws-hov:active { transform: translateY(0) scale(.99); } /* Keyboard focus (R56): a ring in the element's own text colour (it reads on the card it sits on) haloed by the accent, so a light accent on a light card still shows a clear ring. Mouse and touch focus show none; the colour never changes. */ .ws-hov:focus-visible, .ws-site :is(a, button, summary):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; box-shadow: 0 0 0 5px color-mix(in oklab, var(--site-accent) 55%, transparent); } .ws-s-hover-lift { --b-hover-y: -4px; } .ws-s-hover-glow .ws-hov:hover { box-shadow: 0 0 0 3px color-mix(in oklab, var(--site-accent) 35%, transparent), 0 18px 40px -18px var(--site-accent); } .ws-s-hover-tilt { --b-hover-y: -3px; --b-hover-rot: -1.2deg; } .ws-s-hover-none .ws-hov:hover, .ws-s-hover-none .ws-button:hover { transform: none; } /* ---- Custom button and block styling (owner fix R6D). Values arrive as --b-* custom properties on the block wrapper (StyleTokens::vars, allow-listed hex / clamped numbers / built gradients only); these rules win over the surface, theme fill and presentation-system button looks, in light and dark alike. */ .ws-site .ws-s-bgx { --b-bg: var(--b-bgx); --b-fg: var(--b-bgx-fg); } .ws-site .ws-s-bgx.ws-surface, .ws-site .ws-s-bgx :is(.ws-surface, .ws-card) { background: var(--b-bgx); color: var(--b-bgx-fg); } /* ---- Block backgrounds that keep words readable over image and video page backgrounds (owner fix R56) ----------- Solid colour: any hex (--b-bgc, with the ink that reads on it unless Text colour is chosen). Image: the block's own picture (--b-bgi, a checked workspace media URL) or, without one, the theme cover. Readability overlay: a dark or light scrim (--b-scrim, 0–.9) laid over the block's background, and over the shade of cards whose words sit on a photo. */ .ws-site .ws-s-bgc { --b-bg: var(--b-bgc); } .ws-site .ws-s-bgc:not(.ws-s-text-light, .ws-s-text-dark) { --b-fg: var(--b-bgc-fg); } .ws-site .ws-s-bgc.ws-surface, .ws-site .ws-s-bgc :is(.ws-surface, .ws-card), .ws-site .ws-block.ws-boxless.ws-s-bgc { background: var(--b-bgc); color: var(--b-fg); --site-muted: color-mix(in oklab, var(--b-fg) 72%, transparent); } .ws-site .ws-s-surface-image.ws-surface, .ws-site .ws-s-surface-image :is(.ws-surface, .ws-card), .ws-site .ws-block.ws-boxless.ws-s-surface-image { background: var(--b-bg); color: var(--b-fg); --site-muted: color-mix(in oklab, var(--b-fg) 78%, transparent); } .ws-site :is(.ws-s-scrim-dark, .ws-s-scrim-light) { --b-scrim-layer: linear-gradient(rgb(var(--b-scrim-rgb) / var(--b-scrim, .45)), rgb(var(--b-scrim-rgb) / var(--b-scrim, .45))); } .ws-site .ws-s-scrim-none { --b-scrim: 0; } /* "Off": an explicit no-overlay (paints nothing) */ .ws-site .ws-s-scrim-dark { --b-scrim-rgb: 0 0 0; } .ws-site .ws-s-scrim-light { --b-scrim-rgb: 255 255 255; } .ws-site .ws-s-scrim-dark:not(.ws-s-text-light, .ws-s-text-dark) { --b-fg: var(--site-ink-light); } .ws-site .ws-s-scrim-light:not(.ws-s-text-light, .ws-s-text-dark) { --b-fg: var(--site-ink-dark); } .ws-site :is(.ws-s-scrim-dark, .ws-s-scrim-light):is(.ws-surface, .ws-boxless), .ws-site :is(.ws-s-scrim-dark, .ws-s-scrim-light) :is(.ws-surface, .ws-card) { background: var(--b-scrim-layer), var(--b-bg, var(--site-surface)); color: var(--b-fg); --site-muted: color-mix(in oklab, var(--b-fg) 76%, transparent); } .ws-site .ws-block.ws-boxless:is(.ws-s-scrim-dark, .ws-s-scrim-light) { background: var(--b-scrim-layer), var(--b-bg, transparent); border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); } .ws-site .ws-block.ws-boxless:is(.ws-s-scrim-dark, .ws-s-scrim-light):not([class*="ws-s-padding-"]) { padding: 16px; } /* Accent-coloured small print (eyebrows) is mixed with the block's ink, so a light accent stays readable on a light colour. */ .ws-site :is(.ws-s-bgc, .ws-s-surface-image, .ws-s-scrim-dark, .ws-s-scrim-light) .ws-eyebrow { color: color-mix(in oklab, var(--site-accent) 45%, var(--b-fg, currentColor)); } /* Cards whose words sit on their photo: the overlay replaces the built-in shade, at the chosen strength. */ .ws-site :is(.ws-s-scrim-dark, .ws-s-scrim-light) :is(.ws-ic-shade, .ws-bn-shade, .ws-ev-shade, .ws-ctab-shade, .ws-yt-shade, .sp-hero-shade, .ws-sl-shade, .ws-fl-shade) { background: linear-gradient(180deg, rgb(var(--b-scrim-rgb) / calc(var(--b-scrim, .45) * .7)), rgb(var(--b-scrim-rgb) / var(--b-scrim, .45)) 45%, rgb(var(--b-scrim-rgb) / min(1, calc(var(--b-scrim, .45) + .15)))); } .ws-site .ws-s-scrim-light :has(> :is(.ws-ic-shade, .ws-bn-shade, .ws-ev-shade, .ws-ctab-shade, .ws-yt-shade, .sp-hero-shade, .ws-sl-shade, .ws-fl-shade)) { color: var(--b-fg); } .ws-site .ws-s-scrim-light :has(> :is(.ws-ic-shade, .ws-bn-shade, .ws-ev-shade, .ws-ctab-shade, .ws-yt-shade, .sp-hero-shade, .ws-sl-shade, .ws-fl-shade)) :is(.ws-t1, .ws-t2, .ws-tx, .ws-eyebrow, .ws-meta, h2, h3, p) { color: inherit; } .ws-site .ws-block.ws-s-btn-bg :is(.ws-button, .ws-hero-btn, .ws-submit, .ws-ctab-btn, .ws-ev-btn, .ws-pt-cta, .ws-sl-cta, .ws-bk-btn, .ws-atc-btn, .ws-td-btn, .ws-bg-btn, .ws-live-cta, .ws-svc-cta, .ws-dl-btn, .ws-st-cta) { background: var(--b-btn-bg) !important; color: var(--b-btn-fg) !important; border-color: transparent !important; } .ws-site .ws-block.ws-s-btn-fg :is(.ws-button, .ws-hero-btn, .ws-submit, .ws-ctab-btn, .ws-ev-btn, .ws-pt-cta, .ws-sl-cta, .ws-bk-btn, .ws-atc-btn, .ws-td-btn, .ws-bg-btn, .ws-live-cta, .ws-svc-cta, .ws-dl-btn, .ws-st-cta) { color: var(--b-btn-fg) !important; } .ws-site .ws-block.ws-s-btn-bd :is(.ws-button, .ws-hero-btn, .ws-submit, .ws-ctab-btn, .ws-ev-btn, .ws-pt-cta, .ws-sl-cta, .ws-bk-btn, .ws-atc-btn, .ws-td-btn, .ws-bg-btn, .ws-live-cta, .ws-svc-cta, .ws-dl-btn, .ws-st-cta) { border: var(--b-bw, 1.5px) solid var(--b-btn-bd) !important; } .ws-site .ws-block.ws-s-bw:not(.ws-s-btn-bd) :is(.ws-button, .ws-hero-btn, .ws-submit, .ws-ctab-btn, .ws-ev-btn, .ws-pt-cta, .ws-sl-cta, .ws-bk-btn, .ws-atc-btn, .ws-td-btn, .ws-bg-btn, .ws-live-cta, .ws-svc-cta, .ws-dl-btn, .ws-st-cta) { border-width: var(--b-bw) !important; border-style: solid !important; } .ws-site .ws-block.ws-s-radius { --b-radius: var(--b-rad); --site-btn-radius: var(--b-rad); } .ws-site .ws-block.ws-s-radius :is(.ws-button, .ws-hero-btn, .ws-submit, .ws-ctab-btn, .ws-ev-btn, .ws-pt-cta, .ws-sl-cta, .ws-bk-btn, .ws-atc-btn, .ws-td-btn, .ws-bg-btn, .ws-live-cta, .ws-svc-cta, .ws-dl-btn, .ws-st-cta) { border-radius: var(--b-rad) !important; } .ws-site .ws-block.ws-s-op { opacity: var(--b-op); } .ws-site .ws-block.ws-s-shadow-none :is(.ws-button, .ws-hero-btn, .ws-submit, .ws-ctab-btn, .ws-ev-btn, .ws-pt-cta, .ws-sl-cta, .ws-bk-btn, .ws-atc-btn, .ws-td-btn, .ws-bg-btn, .ws-live-cta, .ws-svc-cta, .ws-dl-btn, .ws-st-cta), .ws-s-shadow-none { --b-shadow: none; } .ws-site .ws-block.ws-s-shadow-none :is(.ws-button, .ws-hero-btn, .ws-submit, .ws-ctab-btn, .ws-ev-btn, .ws-pt-cta, .ws-sl-cta, .ws-bk-btn, .ws-atc-btn, .ws-td-btn, .ws-bg-btn, .ws-live-cta, .ws-svc-cta, .ws-dl-btn, .ws-st-cta) { box-shadow: none !important; } .ws-site .ws-block.ws-s-shadow-soft { --b-shadow: 0 6px 18px -10px color-mix(in oklab, var(--b-shc, #000) 45%, transparent); } .ws-site .ws-block.ws-s-shadow-medium { --b-shadow: 0 14px 32px -14px color-mix(in oklab, var(--b-shc, #000) 60%, transparent); } .ws-site .ws-block.ws-s-shadow-glow { --b-shadow: 0 0 0 1px color-mix(in oklab, var(--b-shc, var(--site-accent)) 40%, transparent), 0 10px 34px -6px color-mix(in oklab, var(--b-shc, var(--site-accent)) 75%, transparent); } .ws-site .ws-block:is(.ws-s-shadow-soft, .ws-s-shadow-medium, .ws-s-shadow-glow, .ws-s-shc:not(.ws-s-shadow-none)) :is(.ws-button, .ws-hero-btn, .ws-submit, .ws-ctab-btn, .ws-ev-btn, .ws-pt-cta, .ws-sl-cta, .ws-bk-btn, .ws-atc-btn, .ws-td-btn, .ws-bg-btn, .ws-live-cta, .ws-svc-cta, .ws-dl-btn, .ws-st-cta) { box-shadow: var(--b-shadow) !important; } .ws-site .ws-block.ws-s-btn-size-sm .ws-button { min-height: 44px; padding: 8px 14px; font-size: 14px; } .ws-site .ws-block.ws-s-btn-size-md .ws-button { min-height: 54px; } .ws-site .ws-block.ws-s-btn-size-lg .ws-button { min-height: 68px; padding-inline: 24px; font-size: 17px; } .ws-site .ws-block.ws-s-btn-size-full { width: 100cqw; max-width: none; margin-inline: calc(50% - 50cqw); } .ws-site .ws-block.ws-s-btn-size-full .ws-button { border-radius: 0 !important; min-height: 64px; } .ws-site .ws-block.ws-s-btn-size-sm:not(.ws-s-text-align-start, .ws-s-text-align-end) .ws-button { width: fit-content; margin-inline: auto; } .ws-s-icon-pos-start .ws-button :is(.ws-button-icon, .ws-button-thumb) { order: 0; } .ws-s-icon-pos-end .ws-button :is(.ws-button-icon, .ws-button-thumb) { order: 3; } .ws-s-icon-pos-end .ws-button .ws-button-arrow { order: 2; } .ws-s-icon-pos-none .ws-button :is(.ws-button-icon, .ws-button-thumb) { display: none; } .ws-s-text-align-start { text-align: start; --b-align: start; --b-justify: flex-start; } .ws-s-text-align-center { text-align: center; --b-align: center; --b-justify: center; } .ws-s-text-align-end { text-align: end; --b-align: end; --b-justify: flex-end; } .ws-s-text-align-start .ws-button-label { text-align: start; } .ws-s-text-align-center .ws-button-label { text-align: center; } .ws-s-text-align-end .ws-button-label { text-align: end; } .ws-s-weight-400 { --b-weight: 400; } .ws-s-weight-500 { --b-weight: 500; } .ws-s-weight-600 { --b-weight: 600; } .ws-s-weight-700 { --b-weight: 700; } .ws-s-weight-800 { --b-weight: 800; } /* R50 style audit: weight and spacing reach every word of the block (bold words in rich text stay a step heavier). */ .ws-site .ws-block[class*="ws-s-weight-"], .ws-site .ws-block[class*="ws-s-weight-"] :not(strong, b, svg, svg *) { font-weight: var(--b-weight) !important; } .ws-site .ws-block[class*="ws-s-weight-"] :is(strong, b) { font-weight: max(700, calc(var(--b-weight) + 200)) !important; } .ws-s-tracking-tight { --b-track: -0.03em; } .ws-s-tracking-normal { --b-track: 0em; } .ws-s-tracking-wide { --b-track: .04em; } .ws-s-tracking-wider { --b-track: .1em; } .ws-site .ws-block[class*="ws-s-tracking-"], .ws-site .ws-block[class*="ws-s-tracking-"] * { letter-spacing: var(--b-track) !important; } .ws-s-hover-darken .ws-hov:hover, .ws-site .ws-s-hover-darken :is(.ws-button, .ws-hero-btn, .ws-submit, .ws-ctab-btn, .ws-ev-btn, .ws-pt-cta, .ws-sl-cta, .ws-bk-btn, .ws-atc-btn, .ws-td-btn, .ws-bg-btn, .ws-live-cta, .ws-svc-cta, .ws-dl-btn, .ws-st-cta):hover { filter: brightness(.88); transform: none; } @media (prefers-reduced-motion: reduce) { .ws-site .ws-block :is(.ws-button, .ws-hero-btn, .ws-submit, .ws-ctab-btn, .ws-ev-btn, .ws-pt-cta, .ws-sl-cta, .ws-bk-btn, .ws-atc-btn, .ws-td-btn, .ws-bg-btn, .ws-live-cta, .ws-svc-cta, .ws-dl-btn, .ws-st-cta):hover { transform: none; } } /* ---- R50 style audit: controls that had no effect on many blocks ------------------------------------------------- Text alignment reaches text that sets its own alignment; "Narrow" width really narrows; border width also sizes the block's own border; blocks without a card of their own (headings, plain text, icon rows… PageRenderer adds .ws-boxless when the style asks for a box) paint the surface, corners, border, shadow and padding on the wrapper. */ .ws-site .ws-block[class*="ws-s-text-align-"] :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, summary, dt, dd, label, .ws-t1, .ws-t2, .ws-tx, .ws-chead, .ws-text, .ws-image-cap) { text-align: var(--b-align) !important; } .ws-site .ws-block[class*="ws-s-text-align-"] :is(.ws-text, .ws-chead) :is(ul, ol) { text-align: start !important; } .ws-site .ws-block.ws-s-width-content { width: min(100%, 420px); max-width: 100%; margin-inline: auto; } .ws-site .ws-block.ws-s-bw:not(.ws-s-border-none) { --b-border: var(--b-bw) solid color-mix(in oklab, currentColor 32%, transparent); } .ws-site .ws-block.ws-s-bw.ws-s-border-hairline { --b-border: var(--b-bw) solid color-mix(in oklab, var(--site-text) 14%, transparent); } .ws-site .ws-block.ws-s-bw.ws-s-border-strong { --b-border: var(--b-bw) solid currentColor; } .ws-site .ws-block[class*="ws-s-media-fit-"] :is(img, video):not(.ws-button-icon img, .ws-button-thumb img) { object-fit: var(--b-fit) !important; } .ws-site .ws-block.ws-s-shc:not([class*="ws-s-shadow-"]) { --b-shadow: 0 14px 32px -14px color-mix(in oklab, var(--b-shc) 60%, transparent); } .ws-site .ws-block.ws-boxless { background: var(--b-bg, transparent); color: var(--b-fg, inherit); border: var(--b-border, 0 solid transparent); border-radius: var(--b-radius, 0px); box-shadow: var(--b-shadow, none); padding: var(--b-pad, 0px); backdrop-filter: var(--b-blur, none); -webkit-backdrop-filter: var(--b-blur, none); } .ws-site .ws-block.ws-boxless:is(.ws-s-surface-solid, .ws-s-surface-soft, .ws-s-surface-glass, .ws-s-surface-outline, .ws-s-surface-gradient, .ws-s-surface-accent, .ws-s-surface-image, .ws-s-bgx):not([class*="ws-s-padding-"]) { padding: 16px; } .ws-site .ws-block.ws-boxless.ws-s-bgx { background: var(--b-bgx); color: var(--b-bgx-fg); } .ws-site .ws-block.ws-boxless.ws-s-surface-image { background: var(--b-bg); } /* ---- Item primitives shared by the variants --------------------------------------------------------------------- */ .ws-media { display: block; width: 100%; height: 100%; object-fit: var(--b-fit, cover); } .ws-media-ph { display: grid; place-items: center; width: 100%; height: 100%; min-height: 64px; color: color-mix(in oklab, var(--site-accent-text) 85%, transparent); background: radial-gradient(90% 90% at 100% 0%, rgb(255 255 255 / .28), transparent 55%), linear-gradient(150deg, color-mix(in oklab, var(--site-accent) 80%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 55%, var(--site-text))); } .ws-media-ph svg { width: 28%; height: auto; max-width: 44px; opacity: .9; } .ws-ico { width: 40px; height: 40px; flex: none; border-radius: calc(var(--site-radius) - 4px); display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); } .ws-ico svg { width: 19px; height: 19px; } .ws-t1 { margin: 0; font-family: var(--site-heading); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; font-size: calc(1.04rem * var(--b-scale, 1)); overflow-wrap: anywhere; } .ws-t2 { margin: 0; color: var(--site-muted); font-size: 13.5px; font-weight: 500; line-height: 1.4; } .ws-tx { margin: 0; color: var(--site-muted); font-size: 14px; line-height: 1.55; } .ws-tx p { margin: 0 0 .6em; } .ws-tx p:last-child { margin: 0; } .ws-eyebrow { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--site-accent); } .ws-badge { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; background: var(--site-accent); color: var(--site-accent-text); } .ws-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--site-muted); } .ws-meta li { display: inline-flex; align-items: center; gap: 5px; } .ws-meta svg { width: 14px; height: 14px; } .ws-price { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .ws-price s { font-weight: 500; font-size: .86em; color: var(--site-muted); } .ws-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; } .ws-rating svg { width: 14px; height: 14px; color: var(--site-accent); fill: currentColor; } .ws-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: var(--site-btn-radius); background: var(--site-accent); color: var(--site-accent-text); font-weight: 700; font-size: 14px; white-space: nowrap; } .ws-cta svg { width: 16px; height: 16px; } .ws-go { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, currentColor 8%, transparent); transition: transform .2s var(--site-ease), background .2s; } .ws-go svg { width: 16px; height: 16px; } .ws-hov:hover .ws-go { transform: translateX(calc(3px * var(--dir-sign, 1))); } .ws-copied { outline: 2px solid var(--site-accent) !important; } /* ---- Collections: one markup, layouts switched by CSS (ADR-0068 §5) --------------------------------------------- */ .ws-many { position: relative; min-width: 0; } .ws-chead { display: grid; gap: 4px; margin: 0 0 12px; text-align: var(--b-align, start); } .ws-chead h2 { margin: 0; font-family: var(--site-heading); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.025em; } .ws-chead p { margin: 0; color: var(--site-muted); font-size: 14px; } .ws-track { display: grid; gap: var(--c-gap, 10px); min-width: 0; } .ws-car-nav { display: none; gap: 8px; justify-content: flex-end; margin-top: 10px; } .ws-car-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--site-line); background: var(--site-surface); color: var(--site-text); display: grid; place-items: center; cursor: pointer; box-shadow: var(--site-shadow-sm); transition: opacity .2s, transform .2s; } .ws-car-nav button:hover { transform: translateY(-1px); } .ws-car-nav button[disabled] { opacity: .35; cursor: default; } .ws-car-nav svg { width: 18px; height: 18px; } html:not(.ws-js) .ws-mode-public .ws-car-nav { display: none !important; } .ws-ci { position: relative; min-width: 0; } /* ---- Behaviour animations (reveal on scroll; only with site.js, never under reduced motion) --------------------- */ .ws-block.ws-a { animation: none; } .ws-js .ws-mode-public .ws-a:not(.is-in) { opacity: 0; } .ws-js .ws-mode-public .ws-a-rise:not(.is-in) { transform: translateY(22px); } .ws-js .ws-mode-public .ws-a-scale:not(.is-in) { transform: scale(.95); } .ws-js .ws-mode-public .ws-a-slide:not(.is-in) { transform: translateX(calc(28px * var(--dir-sign, 1))); } .ws-js .ws-mode-public .ws-a-stagger:not(.is-in) { opacity: 1; } .ws-js .ws-mode-public .ws-a-stagger:not(.is-in) .ws-track > * { opacity: 0; transform: translateY(14px); } .ws-a, .ws-a-stagger .ws-track > * { transition: opacity .7s ease, transform .7s var(--site-ease); } .ws-a-stagger .ws-track > * { transition-delay: calc(min(var(--i, 0), 10) * 70ms); } .ws-motion-none .ws-block { animation: none; } .ws-motion-none :is(.ws-hov, .ws-button, .ws-a) { transition: none; } .ws-motion-none .ws-button-featured::after { animation: none; } /* ---- Sticky slot (sticky CTA bar, announcement, floating button) ------------------------------------------------ */ .ws-sticky { position: sticky; bottom: 0; z-index: 40; display: grid; justify-items: center; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); pointer-events: none; } .ws-sticky > * { pointer-events: auto; width: min(100%, var(--w-m, 560px)); } .ws-sticky .ws-block { animation: none; } /* ---- Builder canvas and thumbnails -------------------------------------------------------------------------------- */ .ws-mode-canvas .ws-block.is-hidden { opacity: .38; } .ws-mode-canvas .ws-block.is-empty > .ws-placeholder { min-height: 72px; } .ws-is-thumb { pointer-events: none; } .ws-is-thumb .ws-block { animation: none; } .ws-is-thumb .ws-site-inner { padding-block: 20px; } /* ---- Reduced motion: everything stills, including the featured sheen and animated backgrounds ------------------ */ @media (prefers-reduced-motion: reduce) { .ws-site *, .ws-site *::before, .ws-site *::after, .ws-site { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .ws-button-featured::after, .ws-sheen::after { display: none; } .ws-js .ws-a, .ws-js .ws-a-stagger .ws-track > * { opacity: 1 !important; transform: none !important; } } .ws-dark .ws-branding { background: rgb(255 255 255 / .08); color: var(--site-text); border-color: rgb(255 255 255 / .12); } /* ---- Lightbox (galleries; built by site.js) ------------------------------------------------------------------------ */ .ws-lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 56px 12px; background: rgb(6 8 7 / .92); } .ws-lightbox[hidden] { display: none; } .ws-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px -30px rgb(0 0 0 / .8); } .ws-lightbox button { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; } .ws-lightbox button:hover, .ws-lightbox button:focus-visible { background: rgb(255 255 255 / .24); outline: 2px solid rgb(255 255 255 / .6); } .ws-lb-close { top: 12px; inset-inline-end: 12px; } .ws-lb-prev { inset-inline-start: 12px; top: 50%; transform: translateY(-50%); } .ws-lb-next { inset-inline-end: 12px; top: 50%; transform: translateY(-50%); } .ws-lb-count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgb(255 255 255 / .8); font-size: 13px; font-weight: 600; } .ws-lb-fig { margin: 0; display: grid; justify-items: center; align-content: center; gap: 12px; width: 100%; height: 100%; min-height: 0; } .ws-lb-fig img { max-height: calc(100% - 44px); min-height: 0; } .ws-lb-cap { max-width: 60ch; color: rgb(255 255 255 / .88); font: 500 14px/1.45 system-ui, sans-serif; text-align: center; } .ws-lb-cap[hidden] { display: none; } .ws-lightbox button[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { .ws-lightbox:not([hidden]) .ws-lb-fig img { animation: ws-lb-in .28s cubic-bezier(.2,.8,.2,1); } } @keyframes ws-lb-in { from { opacity: 0; transform: scale(.97); } } /* ---- Flow: shells that place single items two to a row on larger screens (systems add .ws-flow-half via blockClasses) */ .ws-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; } .ws-flow > .ws-block { grid-column: 1 / -1; min-width: 0; } @container ws-page (min-width: 600px) { .ws-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ws-flow > .ws-flow-half { grid-column: auto; align-self: stretch; } .ws-flow > .ws-flow-half > :not(.ws-sheet) { height: 100%; } } /* Items over media keep light text (links inherit the page colour otherwise). */ .ws-site :is(.ws-sv-image-card, .ws-sv-banner, .ws-mg-lead, .ws-tile-x.has-media) { color: var(--site-on-media); } .ws-site .ws-tile-x:not(.has-media) { color: var(--b-fg, var(--site-on-media)); } .ws-site .ws-sv-premium { color: var(--site-ink-light); } .ws-site .ws-surface { color: var(--b-fg, var(--site-text)); } /* ---- Item parts shared by several variants (text block, thumbnails, price pill, bento tiles) ---- */ .ws-on-media { position: absolute; top: 12px; inset-inline-start: 12px; box-shadow: 0 6px 16px -8px rgb(0 0 0 / .5); } .ws-txt { display: grid; gap: 4px; min-width: 0; } .ws-eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ws-txt .ws-t1 { font-size: calc(1.12rem * var(--b-scale, 1)); } .ws-txt .ws-tx { margin-top: 2px; } .ws-tx.is-clamped { display: -webkit-box; -webkit-line-clamp: var(--clamp, 3); -webkit-box-orient: vertical; overflow: hidden; } .ws-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; } .ws-thumb { width: calc(56px * var(--b-scale, 1)); height: calc(56px * var(--b-scale, 1)); flex: none; border-radius: max(8px, calc(var(--site-radius) - 2px)); overflow: hidden; display: grid; place-items: center; } .ws-thumb .ws-ico { width: 100%; height: 100%; border-radius: inherit; } .ws-thumb img { width: 100%; height: 100%; object-fit: cover; } .ws-pill { flex: none; padding: 7px 12px; border-radius: 999px; font-weight: 800; font-size: 13.5px; background: var(--site-accent); color: var(--site-accent-text); font-variant-numeric: tabular-nums; } .ws-tile-x { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 150px; aspect-ratio: 1; padding: var(--b-pad, 16px); overflow: hidden; isolation: isolate; text-align: start; border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); color: var(--b-fg, var(--site-on-media)); box-shadow: var(--b-shadow, 0 16px 32px -20px rgb(0 0 0 / .5)); border: var(--b-border, 0 solid transparent); background: var(--b-bg, radial-gradient(90% 90% at 100% 0%, rgb(255 255 255 / .32), transparent 55%), linear-gradient(150deg, color-mix(in oklab, var(--site-accent) 88%, #fff), color-mix(in oklab, var(--site-accent) 68%, #000))); } .ws-tile-x .ws-tile-bg { position: absolute; inset: 0; z-index: -2; transition: transform .6s var(--site-ease); } .ws-tile-x:hover .ws-tile-bg { transform: scale(1.05); } .ws-tile-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / .05) 30%, rgb(0 0 0 / .68)); } .ws-tile-x.has-media { color: var(--site-on-media); } .ws-tile-top { display: flex; justify-content: space-between; align-items: flex-start; } .ws-tile-x .ws-tile-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in oklab, currentColor 18%, transparent); } .ws-tile-x .ws-tile-icon svg { width: 20px; height: 20px; } .ws-tile-x .ws-tile-arrow { position: static; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, currentColor 18%, transparent); } .ws-tile-x .ws-tile-arrow svg { width: 14px; height: 14px; } .ws-tile-x .ws-tile-text { display: grid; gap: 3px; } .ws-tile-x .ws-tile-text b { font-family: var(--site-heading); font-size: calc(1.15rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; } .ws-tile-x .ws-tile-text small { font-size: 12.5px; opacity: .78; font-weight: 600; } .ws-tile-price { font-weight: 800 !important; opacity: 1 !important; } .ws-s-surface-solid .ws-tile-x, .ws-s-surface-none .ws-tile-x, .ws-s-surface-outline .ws-tile-x, .ws-s-surface-glass .ws-tile-x, .ws-s-surface-soft .ws-tile-x { color: var(--b-fg, var(--site-text)); } .ws-s-surface-soft .ws-tile-x .ws-tile-icon, .ws-s-surface-solid .ws-tile-x .ws-tile-icon { background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); } /* Mixed-language content: each paragraph takes its direction from its own first strong letter, so English text on an Arabic page (or the reverse) keeps its punctuation at the right end. */ .ws-site :where(p, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption, dd, dt, td, th, summary, label, small) { unicode-bidi: plaintext; } /* Rich text from the builder's editor (Batch 1 · item 3): the alignment and size classes RichText keeps, on paragraphs, list items and quotes. The builder canvas and its editor use these same rules. */ .ws-site :is(p, li, blockquote).rt-align-start { text-align: start; } .ws-site :is(p, li, blockquote).rt-align-center { text-align: center; } .ws-site :is(p, li, blockquote).rt-align-end { text-align: end; } .ws-site :is(p, li, blockquote).rt-align-justify { text-align: justify; hyphens: auto; } .ws-site :is(p, li, blockquote).rt-size-sm { font-size: .875em; } .ws-site :is(p, li, blockquote).rt-size-lg { font-size: 1.2em; line-height: 1.45; } .ws-site :is(p, li, blockquote).rt-size-xl { font-size: 1.5em; line-height: 1.3; letter-spacing: -0.01em; } .ws-text blockquote { margin: 0 0 .7em; padding-inline-start: .9em; border-inline-start: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); font-style: italic; } /* R34C · Arabic sites: Naskh for text, Kufi for headings; the theme's stacks stay behind them for Latin runs. */ :is([dir="rtl"], [lang="ar"]) .ws-site { font-family: "Noto Naskh Arabic", var(--site-font); line-height: 1.7; } :is([dir="rtl"], [lang="ar"]) .ws-site :is(h1, h2, h3, .ws-t1, .ws-card-title, .ws-chead h2, .ws-tile-x .ws-tile-text b, [class$="-title"], [class*="-title "], [class$="-name"], [class*="-name "], [class*="-heading"], .sf-hero-mark, .cm-head h1) { font-family: "Noto Kufi Arabic", var(--site-heading, var(--site-font)); line-height: 1.4; } :is([dir="rtl"], [lang="ar"]) .ws-site :is(h1, h2, h3, h4, p, b, strong, span, a, [class]) { letter-spacing: 0 !important; } /* css/site/modules/forms.css */ /* Weesify Forms: hosted, embedded and in the builder canvas (ADR-0016). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */ /* ---- Weesify Forms (hosted, embedded, builder canvas) ---- */ .wf { display: grid; gap: 18px; text-align: start; } .wf-head { display: grid; gap: 8px; } .wf-title { font-family: var(--site-heading); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--site-text); margin: 0; } .wf-intro { color: var(--site-muted); font-size: 15px; line-height: 1.55; margin: 0; white-space: pre-line; } .wf-progress { height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--site-text) 10%, transparent); overflow: hidden; } .wf-progress span { display: block; height: 100%; border-radius: inherit; background: var(--site-accent); transition: width .35s cubic-bezier(.2,.8,.2,1); } .wf-stepcount { margin: -8px 0 0; font-size: 12px; font-weight: 600; color: var(--site-muted); letter-spacing: .02em; } .wf:not(.wf-js) .wf-stepcount, .wf:not(.wf-js) .wf-progress { display: none; } .wf-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; } .wf-step[hidden] { display: none; } .wf-step-title { font-family: var(--site-heading); font-size: 1.2rem; font-weight: 700; color: var(--site-text); padding: 0; margin-bottom: 4px; } .wf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .wf-field { grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; position: relative; } .wf-field.wf-w-half { grid-column: span 1; } @media (max-width: 520px) { .wf-field.wf-w-half { grid-column: 1 / -1; } } /* A form in a narrow place on a wide screen (a join or checkout sheet, a column) stacks its half-width fields too. */ .wf-grid { container-type: inline-size; } @container (max-width: 400px) { .wf-field.wf-w-half { grid-column: 1 / -1; } } .wf-field[hidden] { display: none; } .wf-label { font-weight: 600; font-size: 14px; color: var(--site-text); } .wf-req { font-style: normal; color: var(--site-accent); margin-inline-start: 3px; } .wf-help { font-size: 12.5px; color: var(--site-muted); margin: -2px 0 2px; line-height: 1.45; } .wf-input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; border-radius: calc(var(--site-radius) - 4px); border: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); background: color-mix(in oklab, var(--site-surface) 85%, white); color: #0E1A15; font: inherit; font-size: 15px; transition: border-color .15s, box-shadow .15s; } .ws-dark .wf-input { background: rgb(255 255 255 / .06); color: var(--site-text); border-color: rgb(255 255 255 / .16); } .wf-input::placeholder { color: color-mix(in oklab, var(--site-muted) 80%, transparent); } .wf-input:focus { outline: none; border-color: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); } .wf-textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; } .wf-select-wrap { position: relative; } .wf-select-wrap::after { content: ""; position: absolute; inset-inline-end: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--site-muted); border-bottom: 2px solid var(--site-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .wf-select { appearance: none; padding-inline-end: 40px; } .wf-choices { display: grid; gap: 8px; } .wf-choice { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: calc(var(--site-radius) - 4px); border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent); background: color-mix(in oklab, var(--site-surface) 90%, transparent); cursor: pointer; font-size: 15px; color: var(--site-text); transition: border-color .15s, background .15s; } .wf-choice input { position: absolute; opacity: 0; pointer-events: none; } .wf-choice-mark { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--site-text) 30%, transparent); display: grid; place-items: center; transition: all .15s; } .wf-t-checkboxes .wf-choice-mark { border-radius: 6px; } .wf-choice:has(input:checked) { border-color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 10%, var(--site-surface)); } .wf-choice input:checked + .wf-choice-mark { border-color: var(--site-accent); background: var(--site-accent); box-shadow: inset 0 0 0 3px var(--site-surface); } .wf-t-checkboxes .wf-choice input:checked + .wf-choice-mark { box-shadow: none; background: var(--site-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; } .wf-choice:has(input:focus-visible) { box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); } .wf-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; } .wf-rating input { position: absolute; opacity: 0; pointer-events: none; } .wf-rating label { cursor: pointer; color: color-mix(in oklab, var(--site-text) 22%, transparent); transition: color .12s, transform .12s; } .wf-rating label svg { width: 34px; height: 34px; fill: currentColor; } .wf-rating label:hover, .wf-rating label:hover ~ label, .wf-rating input:checked ~ label { color: #F5B82E; } .wf-rating label:hover { transform: scale(1.08); } .wf-rating input:focus-visible + label { outline: 3px solid color-mix(in oklab, var(--site-accent) 45%, transparent); border-radius: 8px; } .wf-consent { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: calc(var(--site-radius) - 4px); background: color-mix(in oklab, var(--site-accent) 7%, transparent); font-size: 13.5px; line-height: 1.45; color: var(--site-text); cursor: pointer; } .wf-consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--site-accent); flex: none; } .wf-heading { font-family: var(--site-heading); font-size: 1.25rem; margin: 8px 0 0; color: var(--site-text); letter-spacing: -0.02em; } .wf-paragraph { margin: 0; color: var(--site-muted); line-height: 1.55; white-space: pre-line; } .wf-break { display: flex; align-items: center; gap: 10px; color: var(--site-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .wf-break::before, .wf-break::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklab, var(--site-text) 14%, transparent); } .wf-break span { display: inline-flex; align-items: center; gap: 6px; } .wf-break svg { width: 14px; height: 14px; } .wf-field.has-error .wf-input, .wf-field.has-error .wf-choice { border-color: #E5484D; } .wf-error { margin: 0; font-size: 12.5px; color: #E5484D; font-weight: 600; } .wf-alert { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgb(229 72 77 / .1); color: #C4333A; font-size: 14px; font-weight: 600; } .wf-alert svg { width: 18px; height: 18px; flex: none; } .wf-nav { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 4px; } .wf-nav .ws-submit { min-width: 140px; height: 50px; gap: 8px; } .wf-nav .ws-submit svg { width: 16px; height: 16px; } .wf-submit.is-sending { opacity: .7; } .wf-back { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: auto; background: none; border: 0; font: inherit; font-weight: 600; color: var(--site-muted); cursor: pointer; padding: 10px 4px; } .wf-back svg { width: 16px; height: 16px; } .wf-back[hidden], .wf-next[hidden], .wf-submit[hidden] { display: none; } @media (max-width: 420px) { .wf-nav .ws-submit { flex: 1; } } .wf-logic-badge { position: absolute; top: -9px; inset-inline-end: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #fff; background: #7C5CFF; z-index: 2; } .wf-logic-badge svg { width: 11px; height: 11px; } /* Hosted form page */ .wf-page { min-height: 100dvh; background: var(--site-bg); color: var(--site-text); font-family: var(--site-font); } .wf-page-cover { height: clamp(120px, 22vw, 200px); background: var(--site-cover); } .wf-page-inner { width: min(640px, 100% - 28px); margin: calc(-1 * clamp(60px, 10vw, 100px)) auto 40px; } .wf-page-card { padding: clamp(22px, 5vw, 40px); border-radius: calc(var(--site-radius) + 10px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 8%, transparent); box-shadow: 0 30px 80px -40px rgb(0 0 0 / .45); backdrop-filter: blur(12px); } .wf-page-by { display: none; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; font-weight: 600; color: var(--site-muted); } .wf-page-by i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-style: normal; color: var(--site-accent-text); background: var(--site-accent); font-weight: 800; } .wf-done { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 20px 0; } .wf-done-icon { width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 20px 40px -20px var(--site-accent); animation: wf-pop .5s cubic-bezier(.2,1.4,.4,1); } .wf-done-icon svg { width: 34px; height: 34px; } .wf-done h1 { font-family: var(--site-heading); font-size: 1.8rem; margin: 6px 0 0; letter-spacing: -0.03em; } .wf-done p { color: var(--site-muted); margin: 0; max-width: 44ch; line-height: 1.55; white-space: pre-line; } .wf-done .wf-note { margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: color-mix(in oklab, var(--site-accent) 10%, transparent); color: var(--site-text); font-size: 14px; font-weight: 600; } @keyframes wf-pop { from { transform: scale(.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .wf-done-icon { animation: none; } .wf-progress span { transition: none; } } .ws-block-form .ws-card { text-align: start; } /* R4C: rich form blocks */ .wf-parts { display: grid; gap: 10px; } .wf-parts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wf-parts-2 .wf-span-2 { grid-column: 1 / -1; } @container (max-width: 400px) { .wf-parts-2 { grid-template-columns: 1fr; } } .wf-phone { grid-template-columns: minmax(104px, 128px) minmax(0, 1fr); } .wf-sub { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--site-muted); } .wf-affix { display: flex; align-items: stretch; } .wf-affix .wf-input { border-start-start-radius: 0; border-end-start-radius: 0; } .wf-affix.is-end .wf-input { border-radius: calc(var(--site-radius) - 4px) 0 0 calc(var(--site-radius) - 4px); } .wf-affix-tag { display: grid; place-items: center; padding-inline: 14px; font-weight: 700; font-size: 13px; color: var(--site-muted); background: color-mix(in oklab, var(--site-text) 6%, transparent); border: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); border-inline-end: 0; border-radius: calc(var(--site-radius) - 4px) 0 0 calc(var(--site-radius) - 4px); } .wf-affix.is-end .wf-affix-tag { border-inline-end: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); border-inline-start: 0; border-radius: 0 calc(var(--site-radius) - 4px) calc(var(--site-radius) - 4px) 0; } .wf-scale { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; } .wf-scale-11 { --n: 11; } .wf-scale-10 { --n: 10; } .wf-scale-7 { --n: 7; } .wf-scale-5 { --n: 5; } .wf-scale-3 { --n: 3; } @media (max-width: 520px) { .wf-scale-11, .wf-scale-10 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .wf-scale-pt { position: relative; } .wf-scale-pt input, .wf-pic input, .wf-matrix input { position: absolute; opacity: 0; pointer-events: none; } .wf-scale-pt span { display: grid; place-items: center; min-height: 44px; border-radius: calc(var(--site-radius) - 6px); border: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); font-weight: 700; cursor: pointer; transition: background .12s, color .12s; } .wf-scale-pt input:checked + span { background: var(--site-accent); color: var(--site-accent-text); border-color: var(--site-accent); } .wf-scale-pt input:focus-visible + span, .wf-pic input:focus-visible + .wf-pic-img { box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); } .wf-scale-ends { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--site-muted); } .wf-slider { display: flex; align-items: center; gap: 12px; } .wf-slider input { flex: 1; accent-color: var(--site-accent); min-height: 44px; } .wf-slider output { min-width: 64px; text-align: center; font-weight: 700; padding: 8px 10px; border-radius: 10px; background: color-mix(in oklab, var(--site-accent) 12%, transparent); } .wf-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .wf-choice .wf-other-input { position: static; opacity: 1; pointer-events: auto; height: 38px; flex: 1; min-width: 0; } .wf-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .wf-pic { position: relative; display: grid; gap: 6px; cursor: pointer; } .wf-pic-img { aspect-ratio: 4 / 3; border-radius: calc(var(--site-radius) - 4px); overflow: hidden; border: 2px solid color-mix(in oklab, var(--site-text) 12%, transparent); display: grid; place-items: center; background: color-mix(in oklab, var(--site-text) 5%, transparent); } .wf-pic-img img { width: 100%; height: 100%; object-fit: cover; } .wf-pic input:checked + .wf-pic-img { border-color: var(--site-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--site-accent) 25%, transparent); } .wf-pic-label { font-weight: 600; font-size: 14px; text-align: center; } .wf-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .wf-rank li { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; } .wf-matrix-wrap { overflow-x: auto; } .wf-matrix { width: 100%; border-collapse: collapse; font-size: 13px; } .wf-matrix th, .wf-matrix td { padding: 8px 6px; text-align: center; border-bottom: 1px solid color-mix(in oklab, var(--site-text) 8%, transparent); } .wf-matrix th[scope="row"] { text-align: start; font-weight: 600; } .wf-matrix thead th { font-weight: 600; color: var(--site-muted); font-size: 12px; } .wf-matrix label { display: inline-grid; place-items: center; width: 44px; height: 44px; cursor: pointer; position: relative; } .wf-matrix label::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--site-text) 30%, transparent); } .wf-matrix label:has(input:checked)::before { border-color: var(--site-accent); background: var(--site-accent); box-shadow: inset 0 0 0 3px var(--site-surface); } .wf-matrix label:has(input:focus-visible)::before { box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); } .wf-sign { position: relative; border: 1px dashed color-mix(in oklab, var(--site-text) 25%, transparent); border-radius: calc(var(--site-radius) - 4px); background: color-mix(in oklab, var(--site-text) 3%, var(--site-surface)); } .wf-sign canvas { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; } .wf-sign-clear { position: absolute; top: 6px; inset-inline-end: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: color-mix(in oklab, var(--site-text) 8%, transparent); color: var(--site-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .wf-sign-hint { position: absolute; bottom: 8px; inset-inline-start: 12px; font-size: 11px; color: var(--site-muted); pointer-events: none; } .wf-divider { border: 0; height: 1px; margin: 4px 0; background: color-mix(in oklab, var(--site-text) 14%, transparent); } .wf-spacer-sm { height: 8px; } .wf-spacer-md { height: 24px; } .wf-spacer-lg { height: 48px; } .wf-rich { color: var(--site-text); line-height: 1.6; } .wf-rich > :first-child { margin-top: 0; } .wf-rich > :last-child { margin-bottom: 0; } .wf-rich a { color: var(--site-accent); } .wf-image { margin: 0; display: grid; gap: 6px; } .wf-image img { width: 100%; height: auto; border-radius: calc(var(--site-radius) - 4px); display: block; } .wf-image figcaption { font-size: 12.5px; color: var(--site-muted); } .wf-video { aspect-ratio: 16 / 9; border-radius: calc(var(--site-radius) - 4px); overflow: hidden; background: #000; } .wf-video iframe { width: 100%; height: 100%; border: 0; } .wf-media-empty { display: flex; align-items: center; gap: 8px; padding: 14px; border-radius: 12px; border: 1px dashed color-mix(in oklab, var(--site-text) 20%, transparent); color: var(--site-muted); font-size: 13px; } .wf-media-empty svg { width: 18px; height: 18px; flex: none; } .wf-video-ph { aspect-ratio: 16 / 9; justify-content: center; } .wf-appointment { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-radius: calc(var(--site-radius) - 4px); background: color-mix(in oklab, var(--site-accent) 8%, transparent); } .wf-appointment p { margin: 0; font-weight: 600; } .wf-appt-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; text-decoration: none; } .wf-appt-btn svg { width: 16px; height: 16px; } .wf-consent a { color: var(--site-accent); margin-inline-start: 4px; } /* R5A: dropdown "Other" reveals its text box (CSS only, CSP-safe). */ .wf-select-other { display: none; margin-block-start: 8px; } .wf-select-wrap:has(option[value="__other"]:checked) + .wf-select-other { display: block; } /* R5E: file upload block */ .wf-file { display: grid; gap: 6px; } .wf-file-input { min-block-size: 44px; inline-size: 100%; padding: 10px 12px; border: 1px dashed color-mix(in oklab, var(--site-text) 25%, transparent); border-radius: calc(var(--site-radius) - 4px); background: color-mix(in oklab, var(--site-text) 3%, var(--site-surface)); color: var(--site-text); font: inherit; cursor: pointer; } .wf-file-input:focus-visible { outline: 2px solid var(--site-accent, currentColor); outline-offset: 2px; } .wf-file-input::file-selector-button { margin-inline-end: 12px; padding: 8px 14px; border: 0; border-radius: calc(var(--site-radius) - 6px); background: color-mix(in oklab, var(--site-text) 10%, transparent); color: inherit; font: inherit; cursor: pointer; } .wf-file-hint { display: flex; align-items: center; gap: 6px; } .wf-file-hint svg { inline-size: 14px; block-size: 14px; flex: none; } /* css/site/modules/sheets.css */ /* Module actions: the trigger card and the sheet (ADR-0012). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */ /* ---- Module actions: premium trigger card + sheet (forms today; store, bookings, courses next) ---- */ .ws-action-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); color: var(--site-text); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); box-shadow: 0 14px 34px -22px rgb(0 0 0 / .45); overflow: hidden; isolation: isolate; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; text-decoration: none; } .ws-action-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--site-accent) 22%, transparent), transparent 55%); } .ws-action-card:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -24px rgb(0 0 0 / .5); } .ws-action-card:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; } .ws-action-icon { width: 48px; height: 48px; flex: none; border-radius: 15px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 10px 22px -12px var(--site-accent); } .ws-action-icon svg { width: 22px; height: 22px; } .ws-action-text { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: start; } .ws-action-text b { font-family: var(--site-heading); font-size: 16px; letter-spacing: -0.01em; } .ws-action-text small { color: var(--site-muted); font-size: 12.5px; font-weight: 500; } .ws-action-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--site-text) 7%, transparent); transition: transform .2s; } .ws-action-go svg { width: 16px; height: 16px; } .ws-action-card:hover .ws-action-go { transform: translateX(calc(3px * var(--dir-sign, 1))); background: var(--site-accent); color: var(--site-accent-text); } .ws-sheet { position: fixed; inset: 0; z-index: 100; display: grid; align-items: end; justify-items: center; } .ws-sheet[hidden] { display: none; } .ws-sheet-backdrop { position: absolute; inset: 0; background: rgb(8 10 9 / .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .28s ease; } .ws-sheet-panel { position: relative; width: min(560px, 100%); max-height: min(92dvh, 900px); overflow-y: auto; overscroll-behavior: contain; background: var(--site-bg-base); background-image: var(--site-bg); color: var(--site-text); font-family: var(--site-font); border-radius: 28px 28px 0 0; box-shadow: 0 -30px 80px -30px rgb(0 0 0 / .6); transform: translateY(40px); opacity: 0; transition: transform .38s cubic-bezier(.2,.9,.25,1), opacity .25s ease; padding-bottom: env(safe-area-inset-bottom); } .ws-sheet.is-open .ws-sheet-backdrop { opacity: 1; } .ws-sheet.is-open .ws-sheet-panel { transform: none; opacity: 1; } @media (min-width: 640px) { .ws-sheet { align-items: center; padding: 24px; } .ws-sheet-panel { border-radius: 28px; transform: translateY(16px) scale(.98); } } .ws-sheet-grab { display: block; width: 44px; height: 5px; border-radius: 999px; margin: 10px auto 0; background: color-mix(in oklab, var(--site-text) 22%, transparent); } @media (min-width: 640px) { .ws-sheet-grab { display: none; } } .ws-sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 16px; background: linear-gradient(var(--site-bg-base) 70%, color-mix(in oklab, var(--site-bg-base) 0%, transparent)); } .ws-sheet-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--site-cover); opacity: .9; } .ws-sheet-icon { width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 12px 24px -14px var(--site-accent); } .ws-sheet-icon svg { width: 22px; height: 22px; } .ws-sheet-titles { flex: 1; min-width: 0; } .ws-sheet-titles h2 { margin: 2px 0 4px; font-family: var(--site-heading); font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.025em; } .ws-sheet-titles p { margin: 0; color: var(--site-muted); font-size: 14px; line-height: 1.5; white-space: pre-line; } .ws-sheet-close { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: color-mix(in oklab, var(--site-text) 8%, transparent); color: var(--site-text); cursor: pointer; } .ws-sheet-close:hover { background: color-mix(in oklab, var(--site-text) 14%, transparent); } .ws-sheet-close svg { width: 18px; height: 18px; } .ws-sheet-body { padding: 4px 20px 24px; } .ws-sheet-body .wf { background: var(--site-surface); padding: 18px; border-radius: calc(var(--site-radius) + 4px); border: 1px solid color-mix(in oklab, var(--site-text) 8%, transparent); } html.ws-sheet-lock, html.ws-sheet-lock body { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .ws-sheet-panel, .ws-sheet-backdrop { transition: none; } } .ws-action-thumb { width: 56px; height: 56px; flex: none; border-radius: 14px; object-fit: cover; box-shadow: 0 10px 22px -14px rgb(0 0 0 / .5); } .ws-action-meta { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--site-accent); color: var(--site-accent-text); font-weight: 800; font-size: 13.5px; box-shadow: 0 10px 20px -12px var(--site-accent); } /* css/site/modules/commerce.css */ /* Shop: product details, checkout and the pay page (ADR-0014). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */ /* ---- Shop: product details + checkout ---- */ .shop { display: grid; gap: 14px; text-align: start; } .shop-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--site-radius) + 2px); box-shadow: 0 20px 44px -28px rgb(0 0 0 / .55); } .shop-name { margin: 4px 0 0; font-family: var(--site-heading); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--site-text); } .shop-tagline { margin: -6px 0 0; color: var(--site-muted); font-size: 15px; } .shop-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; } .shop-price b { font-family: var(--site-heading); font-size: 1.7rem; letter-spacing: -0.03em; color: var(--site-text); } .shop-price s { color: var(--site-muted); font-size: 15px; } .shop-save { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-text); } .shop-desc { color: var(--site-text); opacity: .86; line-height: 1.6; white-space: pre-line; font-size: 15px; } .shop-includes { list-style: none; margin: 0; padding: 14px; display: grid; gap: 9px; border-radius: calc(var(--site-radius) - 2px); background: color-mix(in oklab, var(--site-accent) 7%, transparent); } .shop-includes li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; font-weight: 600; color: var(--site-text); } .shop-includes svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--site-accent); stroke-width: 3; } .shop-form { display: grid; gap: 14px; padding-top: 6px; border-top: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); } .shop-buy { width: 100%; height: 54px; gap: 10px; font-size: 16px; } .shop-buy svg { width: 18px; height: 18px; } .shop-trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--site-muted); text-align: center; } .shop-trust svg { width: 14px; height: 14px; } .shop-delivery-msg { margin: 6px 0 0; padding: 14px; border-radius: 14px; background: color-mix(in oklab, var(--site-accent) 8%, transparent); white-space: pre-line; line-height: 1.55; } .shop-dl-title { margin: 18px 0 8px; font-family: var(--site-heading); font-size: 1.1rem; } .shop-dl { display: grid; gap: 10px; } /* Checkout in the sheet (ADR-0014): the details form gives way to Weesify's own pay page in a frame. */ .shop-payframe { display: block; width: 100%; min-height: 420px; border: 0; border-radius: calc(var(--site-radius) + 2px); background: transparent; } .shop-payframe[hidden] { display: none; } /* B4 · Q4: an inline checkout keeps its unused pay frame out of the layout */ .shop.is-paying > :not(.shop-payframe) { display: none; } body.is-framed { background: transparent; } body.is-framed .wf-page { min-height: 0; padding: 0; background: transparent; } body.is-framed .wf-page-inner { padding: 0; } body.is-framed .wf-page-card { box-shadow: none; padding: 4px 2px 12px; background: transparent; border: 0; } /* Weesify pay page */ .pay { display: grid; gap: 16px; } .pay-summary { display: grid; gap: 4px; padding: 16px 18px; border-radius: calc(var(--site-radius) + 2px); background: color-mix(in oklab, var(--site-accent) 7%, var(--site-card)); border: 1px solid color-mix(in oklab, var(--site-accent) 18%, transparent); } .pay-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--site-text); } .pay-line b { font-family: var(--site-heading); font-size: 1.6rem; letter-spacing: -0.03em; white-space: nowrap; } .pay-line.is-muted { color: var(--site-muted); font-size: 13px; } .pay-test { display: flex; gap: 8px; align-items: center; margin: 0; padding: 9px 12px; border-radius: 12px; background: #FFF6DB; color: #7A5A00; font-size: 13px; font-weight: 600; } .pay-test svg, .pay-alert svg { width: 16px; height: 16px; flex: none; } .pay-alert { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #FDECEC; color: #9B1C1C; font-size: 14px; } .pay-alert[hidden] { display: none; } .pay-form { display: grid; gap: 14px; } .pay-element { min-height: 140px; } .pay-card { font-variant-numeric: tabular-nums; letter-spacing: .06em; } .pay-hint { margin: -4px 0 0; text-align: center; color: var(--site-muted); font-size: 12.5px; } .shop-buy.is-busy { opacity: .7; pointer-events: none; } /* B4 · Q4: the gift card's "who is it for?" part of the checkout. */ .gc-for { margin: 0; padding: 14px; min-width: 0; border: 1px dashed color-mix(in oklab, var(--site-accent) 45%, transparent); border-radius: calc(var(--site-radius) - 2px); background: color-mix(in oklab, var(--site-accent) 6%, transparent); } .gc-for > legend { display: inline-flex; align-items: center; gap: 6px; padding-inline: 6px; } .gc-for > legend svg { width: 16px; height: 16px; color: var(--site-accent); } .gc-for > .wf-help { margin: 0 0 8px; } /* R17B · ways to pay + PayPal / Apple Pay / Google Pay */ .pay-methods { display: grid; gap: 10px; margin-block: 4px 2px; } .pay-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pay-switch-opt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px; padding-inline: 12px; border-radius: 12px; border: 1.5px solid var(--site-line, rgb(0 0 0 / .12)); background: transparent; color: inherit; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; } .pay-switch-opt svg { inline-size: 18px; block-size: 18px; } .pay-switch-opt[aria-pressed="true"] { border-color: var(--site-accent, #10b981); box-shadow: inset 0 0 0 1px var(--site-accent, #10b981); } .pay-switch-opt:focus-visible { outline: 2px solid var(--site-accent, #10b981); outline-offset: 2px; } .pay-pp { display: inline-grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 6px; background: #003087; color: #fff; font-weight: 800; font-style: italic; font-size: 12px; } .pay-ways-label { margin: 0; font-size: 12px; color: var(--site-muted); } .pay-ways { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .pay-way { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--site-soft, rgb(0 0 0 / .05)); font-size: 12.5px; } .pay-way svg { inline-size: 14px; block-size: 14px; } .pay-express:empty { display: none; } .pay-express { margin-block-end: 6px; } .pay-paypal { min-block-size: 48px; } /* css/site/modules/reporting.css */ /* Reporting a page (ADR-0017). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */ /* Reporting (ADR-0017) */ .ws-report-link { display: block; width: max-content; margin: 10px auto 0; font-size: 12px; opacity: .55; color: inherit; text-decoration: underline; text-underline-offset: 3px; } .ws-report-link:hover { opacity: .9; } .ws-report { display: grid; gap: 14px; margin-top: 22px; text-align: start; } .ws-field { display: grid; gap: 6px; font-weight: 600; font-size: 14px; } .ws-field small { font-weight: 500; opacity: .7; } .ws-field textarea.ws-input { height: auto; padding: 12px 14px; resize: vertical; } .ws-field select.ws-input { appearance: auto; } .ws-error { color: #D93A3A; font-weight: 600; opacity: 1 !important; } .ws-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } /* css/site/modules/bookings.css */ /* Bookings (ADR-0022). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */ /* Bookings (ADR-0022): day chips, time grid, booking card ------------------------------------------------------- */ .bk { display: grid; gap: 12px; margin: 4px 0 18px; } .bk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--site-muted); } .bk-meta svg { width: 15px; height: 15px; } .bk-meta span { opacity: .5; } .bk-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; } .bk-day { flex: none; scroll-snap-align: start; cursor: pointer; } .bk-day input { position: absolute; opacity: 0; pointer-events: none; } .bk-day span { display: grid; justify-items: center; gap: 0; width: 60px; padding: 9px 0; border-radius: calc(var(--site-radius) + 2px); border: 1.5px solid color-mix(in oklab, var(--site-text) 14%, transparent); background: var(--site-surface); color: var(--site-text); transition: border-color .15s, background .15s, transform .15s; } .bk-day span b { font-size: 20px; line-height: 1.15; font-weight: 800; } .bk-day span small { font-size: 11px; color: var(--site-muted); font-weight: 600; } .bk-day:hover span { transform: translateY(-1px); } .bk-day input:checked + span { background: var(--site-accent); border-color: var(--site-accent); color: var(--site-accent-text); } .bk-day input:checked + span small { color: inherit; opacity: .85; } .bk-day input:focus-visible + span { outline: 3px solid color-mix(in oklab, var(--site-accent) 45%, transparent); outline-offset: 2px; } .bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; } .bk-times-head { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--site-heading); } @supports selector(:has(a)) { .bk-times-head { display: none; } } .bk-time { cursor: pointer; } .bk-time input { position: absolute; opacity: 0; pointer-events: none; } .bk-time span { display: grid; justify-items: center; padding: 11px 6px; border-radius: calc(var(--site-radius) - 2px); border: 1.5px solid color-mix(in oklab, var(--site-text) 14%, transparent); background: var(--site-surface); font-weight: 700; font-size: 15px; color: var(--site-text); transition: border-color .15s, background .15s; } .bk-time span small { font-size: 11px; font-weight: 600; color: var(--site-muted); } .bk-time:hover span { border-color: var(--site-accent); } .bk-time input:checked + span { background: var(--site-accent); border-color: var(--site-accent); color: var(--site-accent-text); } .bk-time input:checked + span small { color: inherit; } .bk-time input:focus-visible + span { outline: 3px solid color-mix(in oklab, var(--site-accent) 45%, transparent); outline-offset: 2px; } .bk.has-error .bk-times { outline: 2px solid #D93A3A; outline-offset: 6px; border-radius: 8px; } .bk-card { display: grid; gap: 8px; margin: 16px 0; padding: 16px 18px; border-radius: calc(var(--site-radius) + 4px); border: 1px solid color-mix(in oklab, var(--site-text) 12%, transparent); background: var(--site-surface); color: var(--site-text); font-size: 15px; } .bk-card b { font-size: 18px; color: var(--site-heading); } .bk-card span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bk-card svg { width: 16px; height: 16px; color: var(--site-muted); flex: none; } .bk-card small { color: var(--site-muted); } .bk-card a { color: var(--site-accent); font-weight: 700; } .bk-cancel { margin-top: 14px; } .bk-cancel summary { cursor: pointer; font-size: 14px; color: var(--site-muted); font-weight: 600; } .bk-cancel details[open] summary { margin-bottom: 10px; } /* css/site/modules/courses.css */ /* Courses (ADR-0023, ADR-0041). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */ /* Courses (ADR-0023): curriculum on the sales page, the student area, certificates ------------------------------- */ .cs-curr { margin: 6px 0 20px; padding: 16px; border-radius: calc(var(--site-radius) + 4px); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); background: color-mix(in oklab, var(--site-surface) 80%, transparent); } .cs-curr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; } .cs-curr-head b { color: var(--site-heading); font-size: 16px; } .cs-curr-head span { font-size: 13px; color: var(--site-muted); } .cs-curr-section { margin: 12px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--site-muted); } .cs-curr-list { list-style: none; margin: 0; padding: 0; display: grid; } .cs-curr-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid color-mix(in oklab, var(--site-text) 8%, transparent); font-size: 14.5px; color: var(--site-text); } .cs-curr-list li:first-child { border-top: 0; } .cs-curr-icon svg { width: 16px; height: 16px; color: var(--site-muted); display: block; } .cs-curr-title { flex: 1; min-width: 0; } .cs-curr-list small { color: var(--site-muted); font-size: 12px; } .cs-curr-preview { font-size: 12.5px; font-weight: 700; color: var(--site-accent); text-decoration: none; padding: 3px 9px; border-radius: 99px; background: color-mix(in oklab, var(--site-accent) 12%, transparent); } .cs-curr-by { margin: 10px 0 0; font-size: 13px; color: var(--site-muted); } .cs-access { margin-top: 12px; font-size: 13.5px; } .cs-access summary { cursor: pointer; color: var(--site-muted); font-weight: 600; } .cs-access-form { display: grid; gap: 8px; margin-top: 10px; } .lr { min-height: 100dvh; background: var(--site-bg-base); color: var(--site-text); font-family: var(--site-font); } .lr-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 12px clamp(14px, 3vw, 28px); background: color-mix(in oklab, var(--site-surface) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); } .lr-bar-title { display: grid; flex: 1; min-width: 0; } .lr-bar-title small { font-size: 11.5px; color: var(--site-muted); font-weight: 600; } .lr-bar-title b { color: var(--site-heading); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lr-progress { width: min(200px, 30vw); height: 8px; border-radius: 99px; background: color-mix(in oklab, var(--site-text) 10%, transparent); overflow: hidden; } .lr-progress span { display: block; height: 100%; border-radius: inherit; background: var(--site-accent); transition: width .5s; } .lr-pct { font-weight: 800; font-size: 13px; color: var(--site-heading); min-width: 38px; text-align: end; } .lr-cta { font-weight: 800; font-size: 14px; padding: 9px 16px; border-radius: 99px; background: var(--site-accent); color: var(--site-accent-text); text-decoration: none; } .lr-body { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1180px; margin: 0 auto; gap: 24px; padding: 20px clamp(14px, 3vw, 28px) 60px; } @media (min-width: 960px) { .lr-body { grid-template-columns: 300px minmax(0, 1fr); } .lr-nav { position: sticky; top: 76px; align-self: start; max-height: calc(100dvh - 96px); overflow: auto; } } .lr-nav-toggle { border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); padding: 6px; } .lr-nav-toggle summary { display: flex; justify-content: space-between; padding: 10px 12px; font-weight: 800; cursor: pointer; color: var(--site-heading); list-style: none; } .lr-nav-toggle summary span { color: var(--site-muted); font-weight: 600; font-size: 13px; } .lr-nav-section { margin: 10px 12px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--site-muted); } .lr-nav ol { list-style: none; margin: 0; padding: 0; } .lr-nav li a, .lr-nav-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; color: var(--site-text); text-decoration: none; font-size: 14px; } .lr-nav li a:hover { background: color-mix(in oklab, var(--site-text) 6%, transparent); } .lr-nav li.is-current a { background: color-mix(in oklab, var(--site-accent) 14%, transparent); font-weight: 700; } .lr-nav li i { flex: none; width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; border: 1.5px solid color-mix(in oklab, var(--site-text) 20%, transparent); } .lr-nav li i svg { width: 12px; height: 12px; } .lr-nav li.is-done i { background: var(--site-accent); border-color: var(--site-accent); color: var(--site-accent-text); } .lr-nav li.is-locked { opacity: .55; } .lr-nav li small { display: block; font-size: 11.5px; color: var(--site-muted); } .lr-main { min-width: 0; } .lr-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--site-accent); } .lr-title { margin: 0 0 16px; color: var(--site-heading); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); letter-spacing: -0.03em; line-height: 1.12; } .lr-video { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--site-radius) + 6px); overflow: hidden; background: #000; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .5); margin-bottom: 22px; } .lr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .lr-text { font-size: 16.5px; line-height: 1.7; max-width: 70ch; } .lr-text h2 { font-size: 1.3rem; color: var(--site-heading); margin: 24px 0 8px; } .lr-text a { color: var(--site-accent); font-weight: 600; } .lr-text ul { padding-inline-start: 20px; } .lr-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); flex-wrap: wrap; } .lr-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--site-text); text-decoration: none; padding: 12px 14px; border-radius: 12px; } .lr-btn svg, .lr-done svg { width: 16px; height: 16px; } .lr-done { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 22px; } .lr-empty, .lr-finished { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 40px 20px; border-radius: calc(var(--site-radius) + 6px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); margin-bottom: 20px; } .lr-empty svg { width: 28px; height: 28px; color: var(--site-muted); } .lr-empty h1, .lr-finished h1 { margin: 6px 0 0; color: var(--site-heading); font-size: 1.5rem; } .lr-finished span svg { width: 44px; height: 44px; color: var(--site-accent); } .lr-finished .ws-submit { width: auto; padding: 0 24px; margin-top: 10px; display: inline-flex; align-items: center; text-decoration: none; } .lr-preview-note { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--site-muted); margin: 0 0 12px; } .lr-preview-note svg { width: 15px; height: 15px; } .lr-preview-note a { color: var(--site-accent); font-weight: 700; } .cert-page { margin: 0; min-height: 100dvh; display: grid; place-items: center; background: radial-gradient(circle at 20% 10%, #EDE7FF, transparent 50%), radial-gradient(circle at 90% 90%, #D8F7EA, transparent 50%), #F7F8F5; font-family: Georgia, 'Times New Roman', serif; color: #14201A; padding: 20px; } .cert { width: min(900px, 100%); aspect-ratio: 1.414; max-height: 90dvh; background: #fff; border-radius: 14px; box-shadow: 0 50px 100px -40px rgb(20 32 26 / .35); padding: clamp(14px, 2.5vw, 26px); } .cert-inner { height: 100%; border: 2px solid #D9CFB0; outline: 1px solid #D9CFB0; outline-offset: -8px; border-radius: 8px; display: grid; align-content: center; justify-items: center; text-align: center; padding: 4%; gap: 4px; } .cert-org { margin: 0; font-family: -apple-system, 'Segoe UI', sans-serif; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: clamp(10px, 1.3vw, 13px); color: #7C5CFF; } .cert-kicker { margin: 6px 0 14px; font-size: clamp(18px, 3vw, 30px); letter-spacing: .02em; } .cert-small { margin: 0; font-style: italic; color: #56655E; font-size: clamp(11px, 1.4vw, 15px); } .cert-name { margin: 6px 0; font-size: clamp(24px, 5vw, 52px); font-weight: 400; border-bottom: 1px solid #D9CFB0; padding: 0 5% 6px; } .cert-course { margin: 6px 0 16px; font-size: clamp(16px, 2.6vw, 26px); font-weight: 700; } .cert-meta { display: flex; gap: clamp(14px, 4vw, 48px); flex-wrap: wrap; justify-content: center; font-family: -apple-system, 'Segoe UI', sans-serif; } .cert-meta span { display: grid; } .cert-meta small { font-size: 11px; color: #8A9690; text-transform: uppercase; letter-spacing: .08em; } .cert-meta b { font-size: clamp(12px, 1.5vw, 15px); } .cert-void { color: #C0392B; font-weight: 700; font-family: sans-serif; } .cert-foot { margin: 18px 0 0; font-family: sans-serif; font-size: 11px; color: #8A9690; } .cert { --cert-accent: #7C5CFF; } .cert-page { align-content: center; gap: 14px; } .cert-logo { max-height: clamp(26px, 5vw, 48px); max-width: 40%; object-fit: contain; margin-bottom: 6px; } .cert-org { color: var(--cert-accent); } .cert-classic .cert-inner { border-color: color-mix(in oklab, var(--cert-accent) 45%, #D9CFB0); outline-color: color-mix(in oklab, var(--cert-accent) 45%, #D9CFB0); } .cert-modern { position: relative; overflow: hidden; font-family: -apple-system, 'Segoe UI', sans-serif; } .cert-modern::before { content: ''; position: absolute; inset-block: 0; inset-inline: 0 auto; width: clamp(10px, 2.2vw, 22px); background: var(--cert-accent); } .cert-modern .cert-inner { border: 0; outline: 0; justify-items: start; text-align: start; padding-inline-start: 9%; } .cert-modern .cert-kicker { font-weight: 800; letter-spacing: -0.02em; } .cert-modern .cert-name { font-weight: 800; letter-spacing: -0.03em; padding-inline-start: 0; border-bottom-color: var(--cert-accent); border-bottom-width: 3px; } .cert-modern .cert-meta { justify-content: flex-start; } .cert-minimal .cert-inner { border: 0; outline: 0; } .cert-minimal .cert-kicker::before { content: ''; display: block; width: 56px; height: 3px; margin: 0 auto 14px; background: var(--cert-accent); border-radius: 3px; } .cert-minimal .cert-name { border-bottom: 0; } .cert-sign { display: grid; justify-items: center; } .cert-sign i { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: clamp(18px, 2.6vw, 28px); line-height: 1; border-bottom: 1px solid #C9CFCB; padding: 0 12px 2px; color: #14201A; } .cert-modern .cert-sign { justify-items: start; } .cert-actions { margin: 0; text-align: center; font-family: -apple-system, 'Segoe UI', sans-serif; } .cert-actions a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px; background: #14201A; color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; } .cert-actions svg { width: 16px; height: 16px; } @media print { .cert-page { background: #fff; } .cert { box-shadow: none; } .cert-actions { display: none; } } /* Course depth (ADR-0041): quizzes, assignments and lesson discussions in the student area ------------------------ */ .lr-note { margin: 0 0 12px; font-size: 14px; color: var(--site-muted); font-weight: 600; } .lr-quiz, .lr-work { margin-top: 26px; display: grid; gap: 16px; } .lr-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: q; } .lr-q { counter-increment: q; padding: 18px; border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); } .lr-q fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; } .lr-q-prompt { margin: 0; padding: 0; display: flex; gap: 10px; align-items: flex-start; font-weight: 700; color: var(--site-heading); font-size: 16px; line-height: 1.4; } .lr-q-prompt::before { content: counter(q); flex: none; width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; font-size: 12.5px; background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); } .lr-q legend.lr-q-prompt { margin-bottom: 12px; } .lr-q-prompt small { font-weight: 500; color: var(--site-muted); } .lr-q-mark { margin-inline-start: auto; flex: none; width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; } .lr-q-mark svg { width: 14px; height: 14px; } .lr-q.is-right { border-color: color-mix(in oklab, #10B981 45%, transparent); } .lr-q.is-right .lr-q-mark { background: #10B981; color: #fff; } .lr-q.is-wrong { border-color: color-mix(in oklab, #EF4444 40%, transparent); } .lr-q.is-wrong .lr-q-mark { background: #EF4444; color: #fff; } .lr-q-answer { margin-block: 10px 0; margin-inline: 36px 0; font-size: 14px; font-weight: 700; color: var(--site-text); } .lr-q-why { margin-block: 6px 0; margin-inline: 36px 0; font-size: 14px; color: var(--site-muted); line-height: 1.55; } .lr-score { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 28px 20px; border-radius: calc(var(--site-radius) + 6px); color: #fff; background: linear-gradient(135deg, #0F766E, #10B981); box-shadow: 0 30px 60px -34px rgb(16 185 129 / .7); } .lr-score.is-fail { background: linear-gradient(135deg, #7C2D12, #F97316); box-shadow: 0 30px 60px -34px rgb(249 115 22 / .7); } .lr-score b { font-size: clamp(2.6rem, 2rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.04em; } .lr-score span { font-weight: 700; opacity: .92; } .lr-score small { opacity: .85; } .lr-score .ws-submit { width: auto; padding: 0 22px; margin-top: 8px; display: inline-flex; align-items: center; text-decoration: none; background: #fff; color: #14201A; } .lr-status { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); } .lr-status > svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--site-muted); } .lr-status b { display: block; color: var(--site-heading); } .lr-status small { color: var(--site-muted); font-size: 12.5px; } .lr-status.is-approved { border-color: color-mix(in oklab, #10B981 45%, transparent); background: color-mix(in oklab, #10B981 8%, var(--site-surface)); } .lr-status.is-approved > svg { color: #10B981; } .lr-status.is-changes_requested { border-color: color-mix(in oklab, #F59E0B 50%, transparent); background: color-mix(in oklab, #F59E0B 8%, var(--site-surface)); } .lr-status.is-changes_requested > svg { color: #D97706; } .lr-feedback { margin: 10px 0 0; padding: 10px 12px; border-inline-start: 3px solid var(--site-accent); border-radius: 6px; background: color-mix(in oklab, var(--site-text) 4%, transparent); white-space: pre-line; font-size: 14.5px; } .lr-mywork { padding: 14px 16px; border-radius: 12px; background: color-mix(in oklab, var(--site-text) 4%, transparent); } .lr-mywork small { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--site-muted); } .lr-mywork p { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; } .lr-work .lr-btn { justify-self: start; padding-inline-start: 0; } .lr-work-form { display: grid; gap: 14px; padding: 20px; border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); } .lr-work-form h2 { margin: 0; font-size: 1.15rem; color: var(--site-heading); } .lr-work-form .ws-submit, .lr-quiz-form .ws-submit { justify-self: start; } .lr-quiz-form { display: grid; gap: 16px; } .lr-disc { margin-top: 40px; padding-top: 24px; border-top: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); display: grid; gap: 14px; } .lr-disc h2 { margin: 0; font-size: 1.2rem; color: var(--site-heading); display: flex; align-items: center; gap: 8px; } .lr-disc h2 span { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 99px; background: color-mix(in oklab, var(--site-text) 8%, transparent); color: var(--site-muted); } .lr-c { padding: 14px 16px; border-radius: calc(var(--site-radius) + 2px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 9%, transparent); } .lr-c header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; } .lr-c header b { color: var(--site-heading); } .lr-c header small { color: var(--site-muted); font-size: 12px; margin-inline-start: auto; } .lr-c p { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; } .lr-c.is-reply { margin: 10px 0 0 clamp(8px, 3vw, 24px); background: color-mix(in oklab, var(--site-text) 3%, transparent); } .lr-c.is-team { border-color: color-mix(in oklab, var(--site-accent) 35%, transparent); } .lr-c-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--site-accent); color: var(--site-accent-text); } .lr-c-reply { margin-top: 8px; } .lr-c-reply summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--site-accent); list-style: none; } .lr-c-reply form { display: grid; gap: 8px; margin-top: 8px; } .lr-c-reply .lr-btn { justify-self: start; padding: 8px 0; } .lr-c-new { display: grid; gap: 10px; } .lr-c-new .ws-submit { justify-self: start; width: auto; padding: 0 22px; } .lr-nav li .lr-kind { display: inline-block; margin-inline-start: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--site-accent); } /* Instructors on the course sales page (ADR-0041) */ .crs-team { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); } .crs-person { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); } .crs-person-photo { flex: none; width: 56px; height: 56px; border-radius: 99px; background: color-mix(in oklab, var(--site-accent) 18%, transparent) center / cover no-repeat; display: grid; place-items: center; font-weight: 800; color: var(--site-accent); font-size: 20px; } .crs-person b { display: block; color: var(--site-heading); } .crs-person small { display: block; color: var(--site-muted); font-size: 13px; font-weight: 600; } .crs-person p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; } /* css/site/modules/community.css */ /* Community (ADR-0024, ADR-0031). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */ /* ---------------------------------------------------------------- community (ADR-0024) */ .cm, .cm-gate, .cm-inside { --cm-line: color-mix(in oklab, var(--site-text) 10%, transparent); --cm-soft: color-mix(in oklab, var(--site-text) 5%, transparent); } .cm { min-height: 100dvh; background: var(--site-bg-base); color: var(--site-text); font-family: var(--site-font); } .cm-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 10px clamp(14px, 3vw, 28px); background: color-mix(in oklab, var(--site-surface) 90%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--cm-line); } .cm-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: inherit; } .cm-logo { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; object-fit: cover; font-weight: 800; color: var(--site-accent-text); background: linear-gradient(145deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 55%, #7C5CFF)); } .cm-brand-text { display: grid; min-width: 0; } .cm-brand-text small { font-size: 11.5px; color: var(--site-muted); font-weight: 600; } .cm-brand-text b { color: var(--site-heading); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cm-me { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--site-heading); font-weight: 700; font-size: 14px; padding-block: 4px; padding-inline: 4px 12px; border-radius: 99px; border: 1px solid var(--cm-line); background: var(--site-surface); } .cm-me.is-active { border-color: var(--site-accent); } .cm-me-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 520px) { .cm-me-name { display: none; } .cm-me { padding: 3px; } } .cm-av { width: 36px; height: 36px; border-radius: 99px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--site-heading); background: color-mix(in oklab, var(--site-accent) 18%, var(--site-surface)); } .cm-av.is-team { color: #fff; background: linear-gradient(145deg, #1F2925, #5B3BE8); } .cm-av-sm { width: 30px; height: 30px; font-size: 12.5px; } .cm-av-lg { width: 48px; height: 48px; font-size: 18px; } .cm-body { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1180px; margin: 0 auto; gap: 18px; padding: 14px clamp(14px, 3vw, 28px) 64px; } .cm-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * clamp(14px, 3vw, 28px)); padding: 2px clamp(14px, 3vw, 28px); } .cm-nav::-webkit-scrollbar { display: none; } .cm-nav-item { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 13px; border-radius: 99px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--site-text); background: var(--site-surface); border: 1px solid var(--cm-line); } .cm-nav-item svg { width: 15px; height: 15px; color: var(--site-muted); } .cm-nav-item small { color: var(--site-muted); font-weight: 600; font-size: 12px; } .cm-nav-item.is-active { background: var(--site-accent); color: var(--site-accent-text); border-color: transparent; } .cm-nav-item.is-active svg, .cm-nav-item.is-active small { color: inherit; opacity: .8; } .cm-side { display: none; } @media (min-width: 900px) { .cm-body { grid-template-columns: 230px minmax(0, 1fr); gap: 28px; padding-top: 24px; } .cm-nav { flex-direction: column; margin: 0; padding: 0; overflow: visible; position: sticky; top: 80px; align-self: start; } .cm-nav-item { border: 0; background: transparent; border-radius: 12px; padding: 10px 12px; } .cm-nav-item span { flex: 1; } .cm-nav-item:hover { background: var(--cm-soft); } .cm-nav-item.is-active { background: var(--site-surface); color: var(--site-heading); box-shadow: 0 1px 0 var(--cm-line), 0 10px 24px -18px rgb(0 0 0 / .35); } .cm-nav-item.is-active svg { color: var(--site-accent); opacity: 1; } } @media (min-width: 1180px) { .cm-body { grid-template-columns: 230px minmax(0, 1fr) 280px; } .cm-side { display: grid; gap: 14px; align-content: start; position: sticky; top: 80px; align-self: start; } } .cm-main { min-width: 0; display: grid; gap: 14px; align-content: start; } .cm-head h1 { margin: 0; color: var(--site-heading); font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.1; } .cm-head p { margin: 6px 0 0; color: var(--site-muted); font-size: 15px; max-width: 60ch; } .cm-card { background: var(--site-surface); border: 1px solid var(--cm-line); border-radius: calc(var(--site-radius) + 6px); padding: 16px; display: grid; gap: 8px; } .cm-card b { color: var(--site-heading); } .cm-card p { margin: 0; } .cm-muted { color: var(--site-muted); font-size: 14px; } .cm-pre { white-space: pre-line; } .cm-stat { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; } .cm-stat svg { width: 15px; height: 15px; color: var(--site-accent); } .cm-powered { font-size: 12px; color: var(--site-muted); margin: 4px 4px 0; } .cm-powered a { color: inherit; } .cm-alert, .cm-ok, .cm-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px 14px; border-radius: 14px; font-size: 14px; } .cm-alert { background: color-mix(in oklab, #E5484D 12%, var(--site-surface)); color: color-mix(in oklab, #E5484D 70%, var(--site-heading)); } .cm-ok { background: color-mix(in oklab, var(--site-accent) 14%, var(--site-surface)); color: var(--site-heading); } .cm-note { background: var(--cm-soft); color: var(--site-muted); } .cm-note a { color: var(--site-accent); font-weight: 700; } .cm-alert svg, .cm-ok svg, .cm-note svg { width: 16px; height: 16px; flex: none; } .cm-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--site-text); background: var(--site-surface); border: 1px solid var(--cm-line); border-radius: 12px; padding: 10px 12px; resize: vertical; } .cm-input:focus { outline: 2px solid color-mix(in oklab, var(--site-accent) 45%, transparent); outline-offset: 1px; } .cm-compose { display: flex; gap: 12px; align-items: flex-start; background: var(--site-surface); border: 1px solid var(--cm-line); border-radius: calc(var(--site-radius) + 6px); padding: 14px; box-shadow: 0 18px 40px -32px rgb(0 0 0 / .45); } .cm-compose-fields { flex: 1; min-width: 0; display: grid; gap: 8px; } .cm-compose .cm-input { border-color: transparent; background: var(--cm-soft); } .cm-input-title { font-weight: 700; } .cm-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cm-select { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--site-text); background: var(--cm-soft); border: 0; border-radius: 99px; padding: 8px 12px; max-width: 60vw; } .cm-btn { width: auto; min-height: 40px; padding: 0 18px; display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; } .cm-btn svg { width: 15px; height: 15px; } .cm-btn-ghost { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 700; color: var(--site-heading); background: transparent; border: 1px solid var(--cm-line); border-radius: 12px; padding: 9px 14px; cursor: pointer; } .cm-btn-ghost svg { width: 15px; height: 15px; } .cm-btn-ghost.is-danger { color: #D93036; border-color: color-mix(in oklab, #D93036 35%, transparent); } .cm-rules summary { cursor: pointer; font-size: 13px; color: var(--site-muted); font-weight: 600; } .cm-rules p { white-space: pre-line; font-size: 13.5px; color: var(--site-muted); margin: 6px 0 0; } .cm-feed { display: grid; gap: 12px; } .cm-post { position: relative; background: var(--site-surface); border: 1px solid var(--cm-line); border-radius: calc(var(--site-radius) + 6px); padding: 16px 16px 10px; } .cm-post.is-pinned { border-color: color-mix(in oklab, var(--site-accent) 45%, transparent); } .cm-post.is-hidden, .cm-comment.is-hidden { opacity: .6; border-style: dashed; } .cm-post-head { display: flex; align-items: center; gap: 10px; } .cm-meta { margin: 0; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 7px; row-gap: 0; font-size: 14px; } .cm-meta b { color: var(--site-heading); } .cm-meta-sub, .cm-meta time { color: var(--site-muted); font-size: 12.5px; } .cm-post-head .cm-meta-sub { flex-basis: 100%; } .cm-meta-sub a { color: inherit; font-weight: 600; text-decoration: none; } .cm-badge { font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 2px 8px; border-radius: 99px; color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 13%, transparent); } .cm-badge.is-team { color: #fff; background: linear-gradient(90deg, #1F2925, #5B3BE8); } .cm-badge.is-hidden { color: #B25E00; background: color-mix(in oklab, #F5A524 18%, transparent); } .cm-badge.is-you { color: var(--site-muted); background: var(--cm-soft); } .cm-pin svg { width: 16px; height: 16px; color: var(--site-accent); } .cm-post-title { margin: 12px 0 0; font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--site-heading); } h1.cm-post-title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); letter-spacing: -0.02em; } .cm-post-title a { color: inherit; text-decoration: none; } .cm-text { font-size: 15.5px; line-height: 1.6; margin-top: 8px; overflow-wrap: anywhere; } .cm-text p { margin: 0 0 8px; } .cm-text h2 { font-size: 1.05rem; color: var(--site-heading); margin: 12px 0 6px; } .cm-text ul { margin: 0 0 8px; padding-inline-start: 20px; } .cm-text a { color: var(--site-accent); font-weight: 600; } .cm-more { display: inline-block; font-size: 14px; font-weight: 700; color: var(--site-accent); text-decoration: none; margin-top: -2px; } .cm-post-foot { display: flex; gap: 4px; margin-top: 8px; border-top: 1px solid var(--cm-line); padding-top: 6px; } .cm-act { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--site-muted); background: transparent; border: 0; border-radius: 10px; padding: 8px 10px; cursor: pointer; text-decoration: none; } .cm-act:hover { background: var(--cm-soft); color: var(--site-heading); } .cm-act svg { width: 17px; height: 17px; } .cm-act.is-liked { color: #E5486F; } .cm-act.is-liked svg { fill: currentColor; } .cm-act.is-static { cursor: default; } .cm-act.is-static:hover { background: none; color: var(--site-muted); } .cm-menu { position: relative; } .cm-menu summary { list-style: none; cursor: pointer; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--site-muted); } .cm-menu summary::-webkit-details-marker { display: none; } .cm-menu summary svg { width: 18px; height: 18px; } .cm-menu[open] summary { background: var(--cm-soft); } .cm-menu-pop { position: absolute; inset-inline-end: 0; top: 36px; z-index: 4; width: 250px; display: grid; gap: 2px; padding: 6px; background: var(--site-surface); border: 1px solid var(--cm-line); border-radius: 14px; box-shadow: 0 24px 50px -20px rgb(0 0 0 / .35); } .cm-menu-pop button { display: flex; align-items: center; gap: 9px; width: 100%; font: inherit; font-size: 14px; font-weight: 600; text-align: start; color: var(--site-text); background: transparent; border: 0; border-radius: 10px; padding: 9px 10px; cursor: pointer; } .cm-menu-pop button:hover { background: var(--cm-soft); } .cm-menu-pop button svg { width: 15px; height: 15px; color: var(--site-muted); } .cm-menu-pop .is-danger { color: #D93036; } .cm-report-form { display: grid; gap: 6px; } .cm-report-form .cm-input { font-size: 13.5px; padding: 8px 10px; } .cm-empty { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 44px 20px; border-radius: calc(var(--site-radius) + 6px); border: 1px dashed var(--cm-line); color: var(--site-muted); } .cm-empty svg { width: 28px; height: 28px; } .cm-empty h2 { margin: 6px 0 0; font-size: 1.1rem; color: var(--site-heading); } .cm-empty p { margin: 0; } .cm-pager { display: flex; justify-content: space-between; } .cm-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--site-muted); text-decoration: none; } .cm-back svg { width: 15px; height: 15px; } .cm-comments { display: grid; gap: 10px; } .cm-comments h2 { margin: 6px 0 0; font-size: 1rem; color: var(--site-heading); } .cm-comment { display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--site-surface); border: 1px solid var(--cm-line); } .cm-comment-main { flex: 1; min-width: 0; } .cm-comment .cm-text { margin-top: 4px; font-size: 15px; } .cm-comment-tools { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .cm-link { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--site-muted); background: none; border: 0; padding: 0; cursor: pointer; list-style: none; } .cm-report summary::-webkit-details-marker { display: none; } .cm-report[open] { flex-basis: 100%; } .cm-report .cm-report-form { margin-top: 6px; grid-template-columns: 1fr auto; } .cm-compose-comment { box-shadow: none; } .cm-search { position: relative; } .cm-search svg { position: absolute; inset-inline-start: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--site-muted); } .cm-search .cm-input { padding-inline-start: 36px; } .cm-head .cm-search { margin-top: 14px; max-width: 460px; } .cm-head .cm-search .cm-input { padding-inline-end: 38px; border-radius: 99px; } .cm-search-clear { position: absolute; inset-inline-end: 8px; top: 50%; translate: 0 -50%; width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; color: var(--site-muted); } .cm-search .cm-search-clear svg { position: static; translate: none; width: 14px; height: 14px; } .cm-search-clear:hover { background: var(--cm-soft); color: var(--site-heading); } .cm-search input[type=search]::-webkit-search-cancel-button { display: none; } .cm-results { margin: 0; font-size: 14px; color: var(--site-muted); font-weight: 600; } .cm-people { display: grid; gap: 10px; } @media (min-width: 640px) { .cm-people { grid-template-columns: 1fr 1fr; } } .cm-person { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--site-surface); border: 1px solid var(--cm-line); } .cm-person-name { margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .cm-person-name b { color: var(--site-heading); } .cm-person-bio { margin: 3px 0; font-size: 14px; } .cm-person small { color: var(--site-muted); font-size: 12.5px; } .cm-form { gap: 12px; } .cm-field { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--site-heading); } .cm-field small { color: var(--site-muted); font-weight: 500; } .cm-check { display: flex; align-items: center; gap: 9px; font-size: 14px; } .cm-check input { width: 18px; height: 18px; accent-color: var(--site-accent); } .cm-danger summary { cursor: pointer; font-weight: 700; color: #D93036; } /* What's inside (community/inside): its own copy of the list rules, because a bio page's join sheet loads this module but not the courses one, where the shared .cs-curr list lives (without them the icons render at full width). */ .cm-inside { margin: 6px 0 20px; padding: 16px; border-radius: calc(var(--site-radius) + 4px); border: 1px solid var(--cm-line); background: color-mix(in oklab, var(--site-surface) 80%, transparent); } .cm-inside .cs-curr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin: 0 0 8px; } .cm-inside .cs-curr-head b { color: var(--site-heading); font-size: 16px; } .cm-inside .cs-curr-head span { font-size: 13px; color: var(--site-muted); } .cm-inside .cs-curr-list { list-style: none; margin: 0; padding: 0; display: grid; } .cm-inside .cs-curr-list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--cm-line); font-size: 14.5px; color: var(--site-text); } .cm-inside .cs-curr-list li:first-child { border-top: 0; } .cm-inside .cs-curr-icon { flex: none; padding-top: 2px; } .cm-inside .cs-curr-icon svg { width: 16px; height: 16px; color: var(--site-muted); display: block; } .cm-inside .cs-curr-title { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; } .cm-inside .cs-curr-preview { flex: none; font-size: 12.5px; font-weight: 700; color: var(--site-accent); text-decoration: none; padding: 3px 9px; border-radius: 99px; background: color-mix(in oklab, var(--site-accent) 12%, transparent); } .cm-inside .cs-access { margin-top: 12px; font-size: 13.5px; } .cm-inside .cs-access summary { cursor: pointer; color: var(--site-muted); font-weight: 600; min-height: 44px; display: flex; align-items: center; } .cm-inside .cs-access-form { display: grid; gap: 8px; margin-top: 10px; } .cm-inside-desc { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--site-muted); } .cm-gate { display: grid; justify-items: center; text-align: center; gap: 8px; } .cm-gate-mark { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; overflow: hidden; color: var(--site-accent-text); background: linear-gradient(145deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 55%, #7C5CFF)); box-shadow: 0 20px 40px -20px color-mix(in oklab, var(--site-accent) 80%, transparent); } .cm-gate-mark svg { width: 30px; height: 30px; } .cm-gate-mark img { width: 100%; height: 100%; object-fit: cover; } .cm-gate-by { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--site-muted); text-transform: uppercase; letter-spacing: .05em; } .cm-gate h1 { margin: 0; color: var(--site-heading); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.1; } .cm-gate-tag { margin: 0; color: var(--site-muted); font-size: 16px; } .cm-gate-count { display: inline-flex; align-items: center; gap: 7px; margin: 6px 0; font-size: 14px; font-weight: 700; } .cm-gate-count svg { width: 16px; height: 16px; color: var(--site-accent); } .cm-gate-spaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .cm-gate-spaces a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--site-text); border: 1px solid var(--cm-line); } .cm-gate-spaces svg { width: 14px; height: 14px; color: var(--site-muted); } .cm-gate-spaces small { color: var(--site-accent); font-weight: 700; } .cm-gate-join { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; margin-top: 8px; } .cm-gate-join svg { width: 18px; height: 18px; } .cm-gate .cs-access { width: 100%; } .cm-row { display: flex; flex-wrap: wrap; gap: 8px; } .cm-gate-av { font-size: 26px; font-weight: 800; color: var(--site-accent-text); background: var(--site-accent); } /* In-community notifications (ADR-0031) */ .cm-bell { position: relative; margin-inline-start: auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 99px; border: 1px solid var(--cm-line); background: var(--site-surface); color: var(--site-heading); flex: none; } .cm-bell svg { width: 18px; height: 18px; } .cm-bell.is-active { border-color: var(--site-accent); } .cm-bell-count { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--site-accent); color: var(--site-on-accent, #fff); font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--site-bg, #fff); } .cm-inbox { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .cm-note-item a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: calc(var(--site-radius) + 4px); border: 1px solid var(--cm-line); background: var(--site-surface); text-decoration: none; color: var(--site-text); } .cm-note-item a:hover { border-color: color-mix(in oklab, var(--site-accent) 45%, var(--cm-line)); } .cm-note-item a { position: relative; } .cm-note-item.is-new a { border-color: color-mix(in oklab, var(--site-accent) 45%, var(--cm-line)); box-shadow: inset 3px 0 0 var(--site-accent); } .cm-note-item.is-new time::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: var(--site-accent); margin-inline-end: 6px; vertical-align: 1px; } .cm-note-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--cm-soft); color: var(--site-heading); } .cm-note-icon svg { width: 16px; height: 16px; } .cm-note-icon.is-announcement { background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); } .cm-note-text { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } .cm-note-text b { color: var(--site-heading); } .cm-note-text small { display: block; margin-top: 3px; color: var(--site-muted); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cm-note-item time { font-size: 12px; color: var(--site-muted); white-space: nowrap; } /* css/site/modules/shop-extras.css */ /* Product options, discounts and licence keys (ADR-0037-0039). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */ /* Product options (ADR-0037) */ .shop-variants { border: 0; margin: 0; padding: 0; min-width: 0; } .shop-variants legend { padding: 0; margin-bottom: 8px; } .shop-variant { justify-content: flex-start; } .shop-variant-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; } .shop-variant-name small { display: block; font-weight: 500; font-size: 12.5px; color: var(--site-muted); } .shop-variant-price { flex: none; display: inline-flex; align-items: baseline; gap: 6px; font-weight: 700; font-variant-numeric: tabular-nums; } .shop-variant-price s { font-weight: 500; font-size: 13px; color: var(--site-muted); } .shop-variant.is-out { opacity: .55; cursor: not-allowed; } .shop-variant.is-out .shop-variant-title { text-decoration: line-through; text-decoration-thickness: 1px; } .shop-add { margin-top: 10px; } /* Discounts (ADR-0038) */ .shop-sale { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 0; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-text); } .shop-sale svg { width: 15px; height: 15px; color: var(--site-accent); } .shop-price s { color: var(--site-muted); font-size: 15px; } .shop-code { border-radius: calc(var(--site-radius) - 4px); border: 1px dashed color-mix(in oklab, var(--site-text) 22%, transparent); padding: 10px 14px; font-size: 14px; } .shop-code summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--site-text); list-style: none; } .shop-code summary::-webkit-details-marker { display: none; } .shop-code summary svg { width: 16px; height: 16px; } .shop-code .wf-input { margin-top: 10px; text-transform: uppercase; letter-spacing: .04em; } .shop-code[open] { border-style: solid; } /* Licence keys on the order page (ADR-0039) */ .lic-list { display: grid; gap: 10px; } .lic { display: grid; gap: 6px; padding: 12px 14px; border-radius: calc(var(--site-radius) - 4px); border: 1px solid color-mix(in oklab, var(--site-text) 12%, transparent); background: color-mix(in oklab, var(--site-surface) 92%, transparent); min-width: 0; } .lic small { color: var(--site-muted); font-size: 13px; } .lic-key { display: block; padding: 10px 12px; border-radius: 10px; background: color-mix(in oklab, var(--site-text) 6%, transparent); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .04em; color: var(--site-text); overflow-wrap: anywhere; user-select: all; cursor: copy; } .lic-key.is-copied { outline: 2px solid var(--site-accent); } .lic-devices { margin: 2px 0 0; font-size: 13px; color: var(--site-muted); } .lic-device { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; } .lic-device span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; } .lic-device svg { width: 15px; height: 15px; flex: none; } .lic-device button { flex: none; border: 0; background: none; font: inherit; font-weight: 600; color: var(--site-accent); cursor: pointer; } .shop-tax { margin: -4px 0 0; font-size: 13px; color: var(--site-muted); } /* R17C · conversion tools in the checkout summary and the receipt's upsell */ .cv-summary { display: grid; gap: 12px; } .cv-bump { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: calc(var(--site-radius) - 4px); border: 2px dashed color-mix(in oklab, var(--site-accent, var(--site-text)) 55%, transparent); background: color-mix(in oklab, var(--site-accent, var(--site-text)) 7%, transparent); cursor: pointer; min-block-size: 44px; } .cv-bump input { inline-size: 22px; block-size: 22px; flex: none; margin-block-start: 2px; accent-color: var(--site-accent, var(--site-text)); } .cv-bump-body { display: grid; gap: 4px; min-inline-size: 0; } .cv-bump-head { font-weight: 700; color: var(--site-text); } .cv-bump-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 14px; color: var(--site-text); } .cv-bump-meta s, .cv-price s { opacity: .6; font-size: 13px; } .cv-bump-hint, .cv-fine { font-size: 12.5px; opacity: .72; color: var(--site-text); margin: 0; } .cv-tips, .cv-plan { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-inline-size: 0; } .cv-tips legend, .cv-plan legend { font-weight: 600; font-size: 14px; color: var(--site-text); padding: 0; margin-block-end: 6px; } .cv-tips legend small { font-weight: 400; opacity: .7; margin-inline-start: 6px; } .cv-chips { display: flex; flex-wrap: wrap; gap: 8px; } .cv-chip { position: relative; } .cv-chip input { position: absolute; opacity: 0; inset: 0; } .cv-chip span { display: inline-flex; gap: 6px; align-items: center; min-block-size: 44px; padding-inline: 14px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--site-text) 22%, transparent); font-size: 14px; color: var(--site-text); cursor: pointer; } .cv-chip span small { opacity: .65; } .cv-chip input:checked + span { border-color: var(--site-accent, var(--site-text)); background: color-mix(in oklab, var(--site-accent, var(--site-text)) 12%, transparent); font-weight: 600; } .cv-chip input:focus-visible + span { outline: 2px solid var(--site-accent, var(--site-text)); outline-offset: 2px; } .cv-tips:not(:has(input[value="custom"]:checked)) .cv-tip-amount { display: none; } .cv-plan-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; min-block-size: 44px; border-radius: calc(var(--site-radius) - 4px); border: 1px solid color-mix(in oklab, var(--site-text) 18%, transparent); cursor: pointer; color: var(--site-text); } .cv-plan-opt:has(input:checked) { border-color: var(--site-accent, var(--site-text)); background: color-mix(in oklab, var(--site-accent, var(--site-text)) 8%, transparent); } .cv-plan-opt input { margin-block-start: 3px; accent-color: var(--site-accent, var(--site-text)); } .cv-plan-opt span { display: grid; gap: 2px; } .cv-plan-opt small { opacity: .72; font-size: 12.5px; } .cv-later { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--site-text); opacity: .85; margin: 0; } .cv-later svg { inline-size: 16px; block-size: 16px; flex: none; } .cv-upsell { margin-block: 20px; padding: 18px; border-radius: var(--site-radius); border: 2px solid var(--site-accent, var(--site-text)); display: grid; gap: 12px; text-align: start; } .cv-upsell h2 { font-size: 20px; margin: 0; color: var(--site-text); } .cv-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; opacity: .7; margin: 0; color: var(--site-text); } .cv-upsell-row { display: flex; gap: 12px; align-items: center; } .cv-upsell-row img { border-radius: 10px; object-fit: cover; flex: none; } .cv-upsell-name { font-weight: 600; margin: 0; color: var(--site-text); } .cv-price { margin: 0; display: flex; gap: 8px; align-items: baseline; color: var(--site-text); } /* css/site/modules/storefront.css */ /* ========================================================================== Storefront, cart and "find my orders" (ADR-0033). Public pages, themed by --site-* tokens. Mobile-first: one column of cards, a sticky cart bar; two to three columns from tablet up. ========================================================================== */ .sf { overflow: visible; overflow-x: clip; --sf-line: color-mix(in oklab, var(--site-text) 10%, transparent); --sf-soft: color-mix(in oklab, var(--site-accent) 10%, transparent); } .sf svg { width: 16px; height: 16px; } /* Top bar */ .sf-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, env(safe-area-inset-left), calc((100% - 1080px) / 2)); padding-top: max(10px, env(safe-area-inset-top)); background: color-mix(in oklab, var(--site-bg-base) 78%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--sf-line); } .sf-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; } .sf-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--site-heading); letter-spacing: -0.01em; } .sf-mark { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; font-style: normal; font-weight: 800; background: var(--site-accent); color: var(--site-accent-text); } .sf-logo { width: 30px; height: 30px; border-radius: 10px; object-fit: cover; flex: none; } .sf-cart-btn, .sf-back { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 14px; flex: none; background: var(--site-surface); border: 1px solid var(--sf-line); box-shadow: 0 8px 20px -14px rgb(0 0 0 / .4); transition: transform .15s, box-shadow .15s; } .sf-cart-btn:hover, .sf-back:hover { transform: translateY(-1px); } .sf-cart-btn.has-items { background: var(--site-accent); color: var(--site-accent-text); border-color: transparent; } .sf .sf-badge { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; font-size: 12px; background: var(--site-accent-text); color: var(--site-accent); } .sf-cart-btn:focus-visible, .sf-back:focus-visible, .sf-btn:focus-visible, .sf-chip:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; } /* Hero */ .sf-hero { position: relative; } .sf-hero-cover { height: clamp(110px, 20vw, 190px); background: var(--site-cover); } .sf-hero-inner { width: min(1080px, 100% - 32px); margin: calc(-1 * clamp(44px, 7vw, 64px)) auto 0; position: relative; display: grid; justify-items: start; gap: 8px; } .sf-hero-mark, .sf-hero-logo { width: clamp(76px, 12vw, 96px); height: clamp(76px, 12vw, 96px); border-radius: 26px; border: 4px solid var(--site-bg-base); box-shadow: 0 18px 40px -20px rgb(0 0 0 / .5); } .sf-hero-mark { display: grid; place-items: center; font-family: var(--site-heading); font-size: clamp(2rem, 1.5rem + 2vw, 2.7rem); font-weight: 800; background: var(--site-accent); color: var(--site-accent-text); } .sf-hero-logo { object-fit: cover; background: var(--site-surface); } .sf-title { margin: 6px 0 0; font-family: var(--site-heading); font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); line-height: 1.02; letter-spacing: -0.035em; } .sf-intro { margin: 0; max-width: 62ch; color: var(--site-muted); font-size: 15.5px; line-height: 1.55; } .sf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--site-muted); } .sf-meta svg { width: 14px; height: 14px; } /* Body */ .sf-body { width: min(1080px, 100% - 32px); margin: 22px auto 0; display: grid; gap: 16px; } .sf-alert { margin: 0; } .sf-note { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--sf-soft); font-size: 14px; font-weight: 600; } .sf-toast { display: flex; align-items: center; gap: 12px; padding-block: 10px; padding-inline: 12px 10px; border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); border: 1px solid var(--sf-line); box-shadow: 0 18px 40px -24px rgb(0 0 0 / .5); animation: sf-drop .45s cubic-bezier(.2,1.2,.4,1) both; } .sf-toast-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--site-accent); color: var(--site-accent-text); } .sf-toast-text { display: grid; min-width: 0; flex: 1; line-height: 1.3; } .sf-toast-text small { color: var(--site-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf a.sf-toast-go { flex: none; padding: 9px 14px; border-radius: 999px; font-weight: 700; font-size: 13.5px; background: var(--site-text); color: var(--site-bg-base); } @keyframes sf-drop { from { opacity: 0; transform: translateY(-8px) scale(.98); } } .sf-tools { display: grid; gap: 12px; } .sf-search { position: relative; display: flex; align-items: center; } .sf-search svg { position: absolute; inset-inline-start: 14px; color: var(--site-muted); pointer-events: none; } .sf-search input { width: 100%; height: 46px; padding-block: 0; padding-inline: 40px 14px; border-radius: 999px; border: 1px solid var(--sf-line); background: var(--site-surface); color: var(--site-text); font: inherit; font-size: 15px; } .sf-search input:focus { outline: none; border-color: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 18%, transparent); } .sf-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); } .sf-chips::-webkit-scrollbar { display: none; } .sf-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; border: 1px solid var(--sf-line); background: var(--site-surface); color: var(--site-text); } .sf-chip svg { width: 15px; height: 15px; opacity: .8; } .sf-chip.is-on { background: var(--site-text); color: var(--site-bg-base); border-color: transparent; } /* Product grid */ .sf-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .sf-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); border-radius: calc(var(--site-radius) + 6px); background: var(--site-surface); border: 1px solid var(--sf-line); overflow: hidden; box-shadow: 0 16px 36px -28px rgb(0 0 0 / .5); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; animation: ws-rise .45s cubic-bezier(.2,.8,.2,1) both; } .sf-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgb(0 0 0 / .55); } .sf-card.is-added { box-shadow: 0 0 0 3px color-mix(in oklab, var(--site-accent) 45%, transparent), 0 26px 50px -30px rgb(0 0 0 / .55); } .sf-card-media { position: relative; display: grid; place-items: center; min-height: 112px; min-width: 0; background: var(--sf-soft); color: var(--site-accent); overflow: hidden; } .sf-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); } .sf-card:hover .sf-card-media img { transform: scale(1.04); } .sf-card-media.is-blank { background: radial-gradient(120% 120% at 0% 0%, color-mix(in oklab, var(--site-accent) 30%, transparent), transparent 60%), var(--sf-soft); } .sf-card-media.is-blank > svg { width: 34px; height: 34px; stroke-width: 1.6; } .sf-kind { display: none; } .sf-save { position: absolute; top: 8px; inset-inline-start: 8px; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: var(--site-accent); color: var(--site-accent-text); } .sf-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; min-width: 0; } .sf-card-name { margin: 0; font-family: var(--site-heading); font-size: 1.05rem; line-height: 1.2; letter-spacing: -0.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sf-card-name a:hover { text-decoration: underline; text-underline-offset: 3px; } .sf-card-tag { margin: 0; font-size: 13.5px; color: var(--site-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sf-card-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .sf-price { margin: 0; display: flex; align-items: baseline; gap: 6px; } .sf-price b { font-family: var(--site-heading); font-size: 1.12rem; letter-spacing: -0.02em; } .sf-price s { font-size: 13px; color: var(--site-muted); } .sf-add { margin: 0; } .sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: calc(var(--site-radius) - 4px); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; background: var(--site-btn-bg); color: var(--site-btn-text); transition: transform .15s, filter .15s; white-space: nowrap; } .sf-btn:hover { transform: translateY(-1px); filter: brightness(1.06); } .sf-btn.is-ghost { background: transparent; color: var(--site-text); box-shadow: inset 0 0 0 1.5px var(--sf-line); } .sf-btn.is-in { background: var(--sf-soft); color: var(--site-text); } .sf-btn.is-off { background: transparent; color: var(--site-muted); cursor: default; box-shadow: inset 0 0 0 1.5px var(--sf-line); } .sf-btn.is-busy, .ws-submit.is-busy { opacity: .7; pointer-events: none; } .sf-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 48px 20px; border-radius: calc(var(--site-radius) + 6px); border: 1.5px dashed var(--sf-line); } .sf-empty-icon { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--sf-soft); color: var(--site-accent); } .sf-empty-icon svg { width: 28px; height: 28px; } .sf-empty h2 { margin: 6px 0 0; font-family: var(--site-heading); font-size: 1.35rem; letter-spacing: -0.02em; } .sf-empty p { margin: 0 0 8px; color: var(--site-muted); } .sf-foot { width: min(1080px, 100% - 32px); margin: 36px auto 0; padding: 18px 0 calc(110px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--sf-line); font-size: 13px; font-weight: 600; color: var(--site-muted); } .sf-foot > a:first-child { display: inline-flex; align-items: center; gap: 6px; } .sf-foot > a:first-child:hover { color: var(--site-text); } .sf-foot .ws-branding { margin: 0; } /* Sticky cart bar (phones) */ .sf a.sf-bar { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding-block: 8px; padding-inline: 12px 8px; border-radius: 999px; background: var(--site-text); color: var(--site-bg-base); box-shadow: 0 20px 44px -16px rgb(0 0 0 / .55); animation: sf-up .5s cubic-bezier(.2,1.2,.4,1) both; } .sf-bar-count { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; } .sf-bar-total { flex: 1; font-weight: 700; font-size: 14px; opacity: .85; } .sf .sf-bar-go { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; background: var(--site-accent); color: var(--site-accent-text); } @keyframes sf-up { from { opacity: 0; transform: translateY(20px); } } /* Cart page */ .sf-cart-title { margin: 6px 0 0; font-family: var(--site-heading); font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); letter-spacing: -0.035em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .sf-cart-title small { font-family: var(--site-font); font-size: 14px; font-weight: 700; color: var(--site-muted); letter-spacing: 0; } .sf-cart-grid { display: grid; gap: 16px; align-items: start; } .sf-lines { display: grid; margin: 0; border-radius: calc(var(--site-radius) + 6px); background: var(--site-surface); border: 1px solid var(--sf-line); overflow: hidden; transition: opacity .2s; } .sf-lines.is-saving { opacity: .6; } .sf-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px; } .sf-line + .sf-line { border-top: 1px solid var(--sf-line); } .sf-line-img { position: relative; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--sf-soft); color: var(--site-accent); } .sf-line-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sf-line-main { display: grid; gap: 3px; min-width: 0; } .sf-line-name { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } .sf-line-variant { display: block; font-size: 13px; color: var(--site-muted); margin-top: 1px; } .sf-line-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--site-muted); } .sf-line-note svg { width: 13px; height: 13px; } .sf-line-ctl { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .sf-qty select { height: 34px; padding-block: 0; padding-inline: 12px 28px; border-radius: 10px; border: 1px solid var(--sf-line); background: var(--site-surface); color: var(--site-text); font: inherit; font-weight: 700; font-size: 14px; } .sf-qty-one { font-size: 13px; font-weight: 700; color: var(--site-muted); } .sf-remove { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--site-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .sf-remove:hover { color: #C4333A; background: rgb(229 72 77 / .08); } .sf-remove svg { width: 14px; height: 14px; } .sf-line-price { display: grid; justify-items: end; gap: 2px; text-align: end; } .sf-line-price b { font-family: var(--site-heading); font-size: 1.02rem; white-space: nowrap; } .sf-line-price small { font-size: 12px; color: var(--site-muted); white-space: nowrap; } .sf-update { padding: 0 14px 14px; } .sf-summary { display: grid; gap: 16px; padding: 18px; border-radius: calc(var(--site-radius) + 6px); background: var(--site-surface); border: 1px solid var(--sf-line); box-shadow: 0 26px 60px -40px rgb(0 0 0 / .5); } .sf-sum-rows { display: grid; gap: 8px; } .sf-sum-rows p { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--site-muted); } .sf-sum-total { padding-top: 10px; border-top: 1px solid var(--sf-line); color: var(--site-text) !important; font-weight: 700; } .sf-sum-total b { font-family: var(--site-heading); font-size: 1.45rem; letter-spacing: -0.02em; } .sf-checkout { border-top: 0; padding-top: 0; } .sf-foot-by { font-weight: 600; } /* Find my orders */ .sf-lookup { display: grid; gap: 12px; } .sf-lookup-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 18px 36px -18px var(--site-accent); } .sf-lookup-icon svg { width: 26px; height: 26px; } .sf-lookup-title { margin: 6px 0 0; font-family: var(--site-heading); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem); letter-spacing: -0.035em; } .sf-lookup-text { margin: 0 0 4px; color: var(--site-muted); line-height: 1.55; } /* Receipt: the lines of a cart order */ .ord-lines { display: grid; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); } .ord-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); font-size: 14.5px; } .ord-lines li span { min-width: 0; overflow-wrap: anywhere; } .ord-lines li small { color: var(--site-muted); font-weight: 700; } .ord-lines li b { white-space: nowrap; } .ord-lines li.is-total { border-bottom: 0; font-weight: 800; } .ord-find { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--site-muted); } .ord-find a { text-decoration: underline; text-underline-offset: 3px; } @media (min-width: 640px) { .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .sf-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .sf-card-media { aspect-ratio: 4 / 3; min-height: 0; } .sf-kind { position: absolute; top: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: color-mix(in oklab, var(--site-surface) 82%, transparent); color: var(--site-text); backdrop-filter: blur(8px); } .sf-kind svg { width: 13px; height: 13px; } .sf-save { top: 10px; inset-inline-start: 10px; } .sf-card-body { padding: 16px 18px 18px; gap: 6px; } .sf-card-name { font-size: 1.18rem; } .sf-tools { grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); align-items: center; } .sf-chips { margin: 0; padding: 2px 0; mask-image: none; flex-wrap: wrap; overflow: visible; } .sf-foot { padding-bottom: 40px; } .sf a.sf-bar { inset-inline-start: auto; inset-inline-end: 24px; bottom: 24px; min-width: 340px; } } @media (min-width: 960px) { .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sf-cart-grid { grid-template-columns: minmax(0, 1fr) 380px; } .sf-summary { position: sticky; top: 76px; } } @media (prefers-reduced-motion: reduce) { .sf-card, .sf-toast, .sf-bar { animation: none; } .sf-card:hover { transform: none; } } /* On a product page: add to the shop's cart instead of buying now */ .sf-also { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed color-mix(in oklab, var(--site-text) 14%, transparent); } .sf-also form { margin: 0; } .sf-also-btn { width: 100%; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: calc(var(--site-radius) - 2px); font: inherit; font-weight: 700; cursor: pointer; background: transparent; color: var(--site-text); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--site-text) 16%, transparent); transition: background .15s; } .sf-also-btn:hover { background: color-mix(in oklab, var(--site-accent) 10%, transparent); } .sf-also-btn svg, .sf-also-link svg { width: 16px; height: 16px; } .sf-also-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--site-muted); } .sf-also-link:hover { color: var(--site-text); } /* The small live preview on the Storefront settings screen (app). Unlayered, like the rest of this file, so it wins over the page's own breakpoints. */ .sfa-mini { height: 560px; border-radius: 26px; overflow: hidden auto; scrollbar-width: none; font-size: 13px; } .sfa-mini .sf-hero-cover { height: 84px; } .sfa-mini .sf-hero-inner { width: calc(100% - 24px); margin-top: -34px; gap: 4px; } .sfa-mini .sf-hero-mark, .sfa-mini .sf-hero-logo { width: 60px; height: 60px; border-radius: 18px; font-size: 1.5rem; border-width: 3px; } .sfa-mini .sf-title { font-size: 1.4rem; margin-top: 2px; } .sfa-mini .sf-intro { font-size: 12.5px; } .sfa-mini .sf-body { width: calc(100% - 24px); margin-top: 14px; padding-bottom: 20px; } .sfa-mini .sf-grid { grid-template-columns: 1fr; gap: 10px; } .sfa-mini .sf-card { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: none; animation: none; } .sfa-mini .sf-card-media { aspect-ratio: 1; } .sfa-mini .sf-card-body { padding: 10px 12px; } .sfa-mini .sf-card-name { font-size: .92rem; } .sfa-mini .sf-price b { font-size: .95rem; } .sfa-mini .sf-btn { height: 30px; padding: 0 10px; font-size: 12px; } .sfa-mini .sf-kind { display: none; } .sfa-mini .sf-empty { padding: 28px 12px; } .sfa-mini .sf-hero-inner { margin: -34px auto 0; } .sfa-mini .sf-card:hover { transform: none; } /* Discounts (ADR-0038) */ .sf-sum-rows .sf-sum-off { color: var(--site-accent); font-weight: 600; } .sf-sum-off span:first-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .sf-sum-off svg { width: 15px; height: 15px; flex: none; } .sf-sum-off small { font-weight: 500; color: var(--site-muted); } .sf-code { border-radius: calc(var(--site-radius) - 2px); border: 1px dashed var(--sf-line); padding: 10px 12px; font-size: 14px; } .sf-code summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--site-text); list-style: none; } .sf-code summary::-webkit-details-marker { display: none; } .sf-code svg { width: 16px; height: 16px; flex: none; } .sf-code-form { display: flex; gap: 8px; margin-top: 10px; } .sf-code-form .wf-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .04em; } .sf-code-form .sf-btn { flex: none; } .sf-code .wf-error { margin: 8px 0 0; } .sf-code.is-on { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-style: solid; background: color-mix(in oklab, var(--site-accent) 8%, transparent); } .sf-code.is-on span { display: inline-flex; align-items: center; gap: 6px; } /* R17F · affiliate sign-up and dashboard */ .aff-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 16px 0; } .aff-stats > div { padding: 12px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 12px; } .aff-stats dt { font-size: .8rem; opacity: .7; } .aff-stats dd { margin: 4px 0 0; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; } .aff-h2 { font-size: 1.05rem; margin: 20px 0 6px; } .aff-links, .aff-rows { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; } .aff-links li { display: grid; gap: 6px; } .aff-links .wf-input { font-size: .85rem; direction: ltr; } .aff-rows li { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; padding-block: 8px; border-block-end: 1px solid color-mix(in srgb, currentColor 10%, transparent); } .aff-terms { max-block-size: 160px; overflow: auto; font-size: .85rem; padding: 10px; border-radius: 10px; background: color-mix(in srgb, currentColor 5%, transparent); margin-block-end: 8px; } /* R17E: buyer "Request a refund" on the receipt */ .ord-refund { margin-block-start: 18px; padding-block-start: 12px; border-block-start: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); } .ord-refund summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; font-weight: 600; } .ord-refund-form { display: grid; gap: 8px; margin-block-start: 8px; text-align: start; } .ord-refund-form label { font-size: 13.5px; opacity: .8; } .ord-refund-form textarea, .ord-refund-form input { inline-size: 100%; min-block-size: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--site-text) 20%, transparent); background: transparent; color: inherit; font: inherit; } .ord-refund-form button { min-block-size: 44px; border-radius: 999px; border: 0; padding-inline: 20px; font-weight: 600; background: var(--site-accent, var(--site-text)); color: var(--site-accent-text, var(--site-bg)); cursor: pointer; justify-self: start; } .ord-refund-error { color: #c0392b; font-size: 13.5px; margin: 0; } /* css/site/modules/article.css */ /* Articles (B3 · U3): the full text in the page's sheet and on its own page. Comfortable measure and rhythm. */ .bp-article { display: grid; gap: 12px; text-align: start; } .bp-cover { border-radius: var(--site-radius); overflow: hidden; aspect-ratio: 16 / 9; } .bp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .bp-cat { width: fit-content; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 12%, transparent); } .bp-h1 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.12; letter-spacing: -0.035em; font-family: var(--site-heading, inherit); } .bp-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--site-muted); font-size: 13.5px; font-weight: 600; } .bp-meta span { display: inline-flex; align-items: center; gap: 6px; } .bp-meta svg { width: 15px !important; height: 15px !important; } .bp-body { font-size: 16.5px; line-height: 1.75; max-width: 68ch; } .bp-body :is(h2, h3, h4) { margin: 1.4em 0 .4em; line-height: 1.25; letter-spacing: -0.02em; } .bp-body p { margin: 0 0 1em; } .bp-body a { color: var(--site-accent); text-decoration: underline; text-underline-offset: 3px; } .bp-body blockquote { margin: 1.2em 0; padding-inline-start: 16px; border-inline-start: 3px solid var(--site-accent); font-style: italic; } .bp-body :is(ul, ol) { padding-inline-start: 1.3em; margin: 0 0 1em; } .bp-page { max-width: 760px; margin-inline: auto; } .bp-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--site-muted); font-weight: 700; font-size: 14px; } .bp-back svg { width: 16px; height: 16px; } /* css/site/modules/donations.css */ /* Donations in the checkout (hosted product page and the bio-page sheet): amount chips, "Other", message. */ .dn { border: 0; margin: 0; padding: 0; min-width: 0; } .dn legend { padding: 0; margin-bottom: 8px; } .dn-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .dn-chip { position: relative; cursor: pointer; min-width: 0; } .dn-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .dn-chip-in { display: grid; place-items: center; align-content: center; gap: 2px; min-height: 56px; padding: 8px 10px; text-align: center; border-radius: calc(var(--site-radius) - 2px); border: 1.5px solid color-mix(in oklab, var(--site-text) 14%, transparent); background: color-mix(in oklab, var(--site-surface) 88%, transparent); color: var(--site-text); transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; } .dn-chip.has-emoji .dn-chip-in { min-height: 76px; } .dn-chip-in b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .dn-chip-in small { font-size: 11.5px; font-weight: 700; color: var(--site-muted); line-height: 1.2; } .dn-emoji { font-size: 22px; line-height: 1; } .dn-chip:hover .dn-chip-in { border-color: color-mix(in oklab, var(--site-accent) 55%, transparent); transform: translateY(-1px); } .dn-chip input:checked + .dn-chip-in { border-color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 12%, var(--site-surface)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--site-accent) 22%, transparent); } .dn-chip input:checked + .dn-chip-in small { color: var(--site-accent); } .dn-chip input:focus-visible + .dn-chip-in { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; } .dn-custom { display: grid; gap: 6px; margin-top: 12px; } .dn:has(.dn-chip-other input:not(:checked)) .dn-custom { display: none; } .dn-amount { position: relative; display: flex; align-items: center; } .dn-amount > span { position: absolute; inset-inline-start: 14px; font-weight: 800; color: var(--site-muted); pointer-events: none; } .dn-amount .wf-input { padding-inline-start: 38px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } .dn-opt { font-weight: 500; font-size: 12px; color: var(--site-muted); } @media (prefers-reduced-motion: reduce) { .dn-chip-in { transition: none; } .dn-chip:hover .dn-chip-in { transform: none; } } /* ---- Support blocks on the page (donate, fundraiser, tip jar, supporter perks): shared parts ---------------------- */ .sp-donate, .sp-card { position: relative; overflow: hidden; text-align: var(--b-align, start); } .sp-body { display: grid; gap: 14px; padding: var(--b-pad, 22px); } .sp-head { display: flex; align-items: center; gap: 12px; } .sp-head-t { display: grid; gap: 4px; min-width: 0; } .sp-title { margin: 0; font-family: var(--site-heading); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; font-size: calc(1.36rem * var(--b-scale, 1)); overflow-wrap: anywhere; } .sp-text { margin: 0; color: var(--site-muted); font-size: 14.5px; line-height: 1.55; } .sp-badge { width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; color: var(--site-accent-text); background: radial-gradient(90% 90% at 100% 0%, color-mix(in oklab, var(--site-surface) 35%, transparent), transparent 60%), var(--site-accent); box-shadow: 0 10px 22px -12px var(--site-accent); } .sp-badge svg { width: 22px; height: 22px; } .sp-media { aspect-ratio: 16 / 9; overflow: hidden; } .sp-media .ws-media { transition: transform .8s var(--site-ease); } .sp-donate:hover .sp-media .ws-media { transform: scale(1.03); } /* Amount chips */ .sp-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @container ws-page (min-width: 440px) { .sp-chips { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); } } .sp-chip { position: relative; display: grid; place-items: center; align-content: center; gap: 1px; min-height: 52px; padding: 8px 10px; text-align: center; border-radius: calc(var(--site-radius) - 2px); border: 1.5px solid color-mix(in oklab, var(--site-text) 12%, transparent); background: color-mix(in oklab, var(--site-bg-base) 55%, var(--site-surface)); color: var(--site-text); } .sp-chip b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .sp-chip small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--site-accent); } .sp-chip:hover { border-color: color-mix(in oklab, var(--site-accent) 60%, transparent); } .sp-chip.is-popular { border-color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 11%, var(--site-surface)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--site-accent) 16%, transparent); } .sp-chip-other b { font-size: 14px; font-weight: 700; color: var(--site-muted); } .sp-chips-l .sp-chip { min-height: 66px; } .sp-chips-l .sp-chip b { font-size: 19px; } .sp-chip.has-emoji { min-height: 84px; gap: 3px; } .sp-emoji { font-size: 26px; line-height: 1; transition: transform .25s var(--site-ease); } .sp-chip:hover .sp-emoji { transform: scale(1.15) rotate(-6deg); } /* The main button and the footnote */ .sp-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: var(--site-btn-radius); font-weight: 800; font-size: 15.5px; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 14px 28px -16px var(--site-accent); transition: transform .18s var(--site-ease), filter .18s; } .sp-cta:hover { transform: translateY(-2px); filter: brightness(1.05); } .sp-cta svg { width: 18px; height: 18px; } .sp-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: -2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--site-muted); } .sp-foot span { display: inline-flex; align-items: center; gap: 5px; } .sp-foot svg { width: 14px; height: 14px; } /* Compact row and pill */ .sp-compact { display: flex; align-items: center; gap: 12px; min-height: 64px; padding-block: 12px; padding-inline: 14px 12px; text-align: start; } .sp-compact-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); } .sp-compact-ico svg { width: 20px; height: 20px; } .sp-compact-t { display: grid; gap: 2px; min-width: 0; flex: 1; } .sp-compact-t .ws-t2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-pill { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 800; font-size: 13.5px; background: var(--site-accent); color: var(--site-accent-text); } .sp-btn .ws-button-icon { color: inherit; } @media (prefers-reduced-motion: reduce) { .sp-media .ws-media, .sp-emoji, .sp-cta { transition: none; } } .sp-chips .sp-chip-other { grid-column: 1 / -1; min-height: 44px; border-style: dashed; background: transparent; } .sp-chips-l .sp-chip-other { min-height: 48px; } .sp-chips .sp-chip-other b { font-size: 14px; } /* css/site/modules/event-programme.css */ /* EV5 · Weesify Events programme pages (public): speaker portal, call for speakers, personal agenda, agenda section. Scoped to .evp. Light and dark (prefers-color-scheme, or data-theme on ). Logical properties only (RTL). */ .evp { --evp-bg: #F3F6F4; --evp-surface: #FFFFFF; --evp-soft: #EEF3F0; --evp-line: #E1E8E4; --evp-text: #0E1A15; --evp-muted: #56655E; --evp-faint: #8A9690; --evp-ink: #0E1A15; --evp-on-ink: #FFFFFF; --evp-accent: #7C5CFF; --evp-accent-soft: #EFEBFF; --evp-good: #067A53; --evp-good-soft: #DDF8EC; --evp-warn: #9A5B00; --evp-warn-soft: #FFF1D6; --evp-bad: #B42323; --evp-bad-soft: #FDE7E7; --evp-shadow: 0 1px 2px rgba(14, 26, 21, .05), 0 12px 32px -12px rgba(14, 26, 21, .14); --evp-hero: radial-gradient(120% 140% at 0% 0%, #2B1F66 0%, #0E1A15 55%), #0E1A15; min-height: 100vh; background: var(--evp-bg); color: var(--evp-text); font-family: "Manrope", system-ui, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .evp { --evp-bg: #0B110E; --evp-surface: #121A16; --evp-soft: #18221D; --evp-line: #23302A; --evp-text: #EEF4F1; --evp-muted: #A3B2AB; --evp-faint: #73827B; --evp-ink: #F2F7F4; --evp-on-ink: #0E1A15; --evp-accent: #9C86FF; --evp-accent-soft: #241D45; --evp-good: #5BE3AE; --evp-good-soft: #10291F; --evp-warn: #F2C26B; --evp-warn-soft: #2C2210; --evp-bad: #FF8A8A; --evp-bad-soft: #301616; --evp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6); --evp-hero: radial-gradient(120% 140% at 0% 0%, #2B1F66 0%, #070B09 60%), #070B09; } } html[data-theme="dark"] .evp { --evp-bg: #0B110E; --evp-surface: #121A16; --evp-soft: #18221D; --evp-line: #23302A; --evp-text: #EEF4F1; --evp-muted: #A3B2AB; --evp-faint: #73827B; --evp-ink: #F2F7F4; --evp-on-ink: #0E1A15; --evp-accent: #9C86FF; --evp-accent-soft: #241D45; --evp-good: #5BE3AE; --evp-good-soft: #10291F; --evp-warn: #F2C26B; --evp-warn-soft: #2C2210; --evp-bad: #FF8A8A; --evp-bad-soft: #301616; --evp-hero: radial-gradient(120% 140% at 0% 0%, #2B1F66 0%, #070B09 60%), #070B09; } .evp *, .evp *::before, .evp *::after { box-sizing: border-box; } .evp a { color: inherit; } .evp :focus-visible { outline: 2px solid var(--evp-accent); outline-offset: 2px; border-radius: 6px; } .evp svg { width: 1em; height: 1em; flex: none; } .evp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Hero band */ .evp-hero { position: relative; background: var(--evp-hero); color: #fff; padding-block: 28px 76px; padding-inline: 20px; overflow: hidden; } .evp-hero::after { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; width: 60vw; max-width: 560px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 255, .45), rgba(255, 122, 61, .18) 45%, transparent 70%); filter: blur(10px); pointer-events: none; } .evp-hero-in { position: relative; z-index: 1; max-width: 980px; margin-inline: auto; } .evp-by { display: flex; margin: 0; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: rgba(255, 255, 255, .78); } .evp-by i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .14); font-style: normal; font-size: 12px; } .evp-kicker { display: inline-flex; align-items: center; gap: 6px; margin-block: 22px 8px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .evp-title { margin: 0; font-family: "Urbanist", "Manrope", sans-serif; font-weight: 800; font-size: clamp(30px, 6vw, 52px); line-height: 1.02; letter-spacing: -0.045em; } .evp-title em { font-family: inherit; font-weight: inherit; font-style: normal; letter-spacing: -0.01em; color: #C9BCFF; } .evp-sub { margin-block: 12px 0; max-width: 620px; color: rgba(255, 255, 255, .78); font-size: 15px; } .evp-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-block-start: 16px; font-size: 13.5px; color: rgba(255, 255, 255, .86); } .evp-meta span { display: inline-flex; align-items: center; gap: 6px; } .evp-main { position: relative; z-index: 2; max-width: 980px; margin: -52px auto 0; padding: 0 16px 64px; display: grid; gap: 16px; } .evp-card { background: var(--evp-surface); border: 1px solid var(--evp-line); border-radius: 24px; box-shadow: var(--evp-shadow); padding: 22px; } .evp-card h2 { margin: 0 0 4px; font-family: "Urbanist", "Manrope", sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -0.03em; } .evp-card h3 { margin: 0; font-size: 15px; font-weight: 800; } .evp-lead { margin: 0 0 16px; color: var(--evp-muted); font-size: 14px; } .evp-grid2 { display: grid; gap: 16px; } @media (min-width: 860px) { .evp-grid2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } } /* Notices */ .evp-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; } .evp-note svg { margin-block-start: 3px; } .evp-note.is-good { background: var(--evp-good-soft); color: var(--evp-good); } .evp-note.is-warn { background: var(--evp-warn-soft); color: var(--evp-warn); } .evp-note.is-bad { background: var(--evp-bad-soft); color: var(--evp-bad); } .evp-note.is-info { background: var(--evp-accent-soft); color: var(--evp-accent); } /* Forms */ .evp-form { display: grid; gap: 14px; } .evp-row { display: grid; gap: 14px; } @media (min-width: 640px) { .evp-row { grid-template-columns: 1fr 1fr; } } .evp-field { display: grid; gap: 6px; } .evp-field label, .evp-label { font-size: 13px; font-weight: 700; color: var(--evp-text); } .evp-field small { color: var(--evp-faint); font-size: 12.5px; font-weight: 500; } .evp-input, .evp textarea, .evp select { width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--evp-line); background: var(--evp-soft); color: var(--evp-text); font: inherit; font-size: 15px; transition: border-color .14s, background .14s; } .evp textarea { min-height: 120px; resize: vertical; } .evp-input:focus, .evp textarea:focus, .evp select:focus { outline: none; border-color: var(--evp-accent); background: var(--evp-surface); box-shadow: 0 0 0 4px var(--evp-accent-soft); } .evp-err { color: var(--evp-bad); font-size: 13px; font-weight: 600; } .evp-field.has-error .evp-input, .evp-field.has-error textarea { border-color: var(--evp-bad); } .evp-choices { display: flex; flex-wrap: wrap; gap: 8px; } .evp-choice { position: relative; } .evp-choice input { position: absolute; opacity: 0; inset: 0; } .evp-choice span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--evp-line); background: var(--evp-soft); font-size: 14px; font-weight: 700; cursor: pointer; } .evp-choice input:checked + span { background: var(--evp-ink); color: var(--evp-on-ink); border-color: var(--evp-ink); } .evp-choice input:focus-visible + span { outline: 2px solid var(--evp-accent); outline-offset: 2px; } .evp-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } .evp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent; background: var(--evp-ink); color: var(--evp-on-ink); font: inherit; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .08s, opacity .14s; } .evp-btn:hover { opacity: .92; } .evp-btn:active { transform: scale(.98); } .evp-btn.is-ghost { background: transparent; color: var(--evp-text); border-color: var(--evp-line); } .evp-btn.is-accent { background: var(--evp-accent); color: #fff; } .evp-btn.is-good { background: var(--evp-good-soft); color: var(--evp-good); } .evp-btn.is-sm { min-height: 36px; padding: 6px 12px; font-size: 13px; border-radius: 10px; } .evp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* Speaker header */ .evp-person { display: flex; gap: 16px; align-items: center; } .evp-avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; flex: none; overflow: hidden; background: linear-gradient(135deg, #7C5CFF, #FF7A3D); color: #fff; font-family: "Urbanist", sans-serif; font-weight: 800; font-size: 22px; } .evp-avatar img { width: 100%; height: 100%; object-fit: cover; } .evp-avatar.is-lg { width: 96px; height: 96px; border-radius: 28px; font-size: 32px; } .evp-avatar.is-sm { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; } /* Progress ring + checklist */ .evp-progress { display: flex; gap: 14px; align-items: center; margin-block-end: 12px; } .evp-ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none; background: conic-gradient(var(--evp-accent) calc(var(--p) * 1%), var(--evp-soft) 0); } .evp-ring b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--evp-surface); font-size: 14px; font-weight: 800; } .evp-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .evp-check li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--evp-muted); } .evp-check li i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--evp-line); font-style: normal; } .evp-check li.is-done { color: var(--evp-text); } .evp-check li.is-done i { background: var(--evp-good); border-color: var(--evp-good); color: #fff; } /* Day tabs */ .evp-days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block-end: 2px; } .evp-days::-webkit-scrollbar { display: none; } .evp-day-tab { flex: none; display: grid; gap: 0; min-width: 84px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--evp-line); background: var(--evp-surface); text-decoration: none; font-size: 12px; color: var(--evp-muted); font-weight: 700; } .evp-day-tab b { font-size: 15px; color: var(--evp-text); font-weight: 800; } .evp-day-tab[aria-current="true"] { background: var(--evp-ink); border-color: var(--evp-ink); color: rgba(255, 255, 255, .7); } .evp-day-tab[aria-current="true"] b { color: var(--evp-on-ink); } .evp-seg { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--evp-soft); border: 1px solid var(--evp-line); } .evp-seg a { padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 800; text-decoration: none; color: var(--evp-muted); } .evp-seg a[aria-current="page"] { background: var(--evp-surface); color: var(--evp-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } /* Timeline of sessions */ .evp-day { display: grid; gap: 10px; } .evp-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block: 8px 2px; } .evp-day-head h2 { font-size: 19px; } .evp-zone { font-size: 12px; color: var(--evp-faint); font-weight: 700; } .evp-slot { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; } @media (min-width: 640px) { .evp-slot { grid-template-columns: 92px minmax(0, 1fr); } } .evp-time { padding-block-start: 16px; text-align: end; font-variant-numeric: tabular-nums; } .evp-time b { display: block; font-family: "Urbanist", sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; } .evp-time small { display: block; color: var(--evp-faint); font-size: 12px; font-weight: 700; } .evp-time [data-evp-viewer] { color: var(--evp-accent); } .evp-session { --track: var(--evp-line); position: relative; display: grid; gap: 8px; padding: 16px 18px; padding-inline-start: 20px; border-radius: 20px; background: var(--evp-surface); border: 1px solid var(--evp-line); box-shadow: var(--evp-shadow); overflow: hidden; scroll-margin-block-start: 16px; } .evp-session::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--track); } .evp-session.is-break { background: repeating-linear-gradient(135deg, var(--evp-soft) 0 10px, transparent 10px 20px), var(--evp-surface); box-shadow: none; } .evp-session.is-mine { border-color: var(--evp-accent); box-shadow: 0 0 0 3px var(--evp-accent-soft), var(--evp-shadow); } .evp-session.is-past { opacity: .62; } .evp-session h3 { font-family: "Urbanist", "Manrope", sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .evp-session p { margin: 0; color: var(--evp-muted); font-size: 14px; } .evp-tags { display: flex; flex-wrap: wrap; gap: 6px; } .evp-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--evp-soft); color: var(--evp-muted); font-size: 12px; font-weight: 800; } .evp-tag.is-track { color: var(--evp-text); } .evp-tag.is-track::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--track); } .evp-tag.is-good { background: var(--evp-good-soft); color: var(--evp-good); } .evp-tag.is-warn { background: var(--evp-warn-soft); color: var(--evp-warn); } .evp-tag.is-bad { background: var(--evp-bad-soft); color: var(--evp-bad); } .evp-tag.is-accent { background: var(--evp-accent-soft); color: var(--evp-accent); } .evp-speakers { display: flex; flex-wrap: wrap; gap: 10px 16px; } .evp-speaker { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; } .evp-speaker b { display: block; font-weight: 800; color: var(--evp-text); } .evp-speaker small { display: block; color: var(--evp-faint); font-size: 12px; } .evp-session-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding-block-start: 4px; } .evp-session-foot form { margin: 0; } .evp-warnline { display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--evp-warn); } .evp-cap { font-size: 12.5px; color: var(--evp-faint); font-weight: 700; } .evp-cap meter { width: 80px; height: 6px; vertical-align: middle; } /* Lists in the portal */ .evp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .evp-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 16px; background: var(--evp-soft); } .evp-list li > div { min-width: 0; } .evp-list b { display: block; font-size: 14px; overflow-wrap: anywhere; } .evp-list small { color: var(--evp-faint); font-size: 12.5px; } .evp-empty { padding: 26px 16px; text-align: center; color: var(--evp-muted); border: 1.5px dashed var(--evp-line); border-radius: 18px; font-size: 14px; } .evp-foot { text-align: center; color: var(--evp-faint); font-size: 12px; padding-block: 8px 24px; } details.evp-more > summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--evp-accent); list-style: none; } details.evp-more > summary::-webkit-details-marker { display: none; } @media (prefers-reduced-motion: no-preference) { .evp-session, .evp-card { animation: evp-rise .42s cubic-bezier(.2, .8, .2, 1) both; } @keyframes evp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } } @media (max-width: 520px) { .evp-card { padding: 18px; border-radius: 20px; } .evp-hero { padding-block-end: 70px; } .evp-session { padding: 14px; padding-inline-start: 16px; } } /* css/site/modules/interact.css */ /* B3 · C3 shared pieces for interactive blocks (waitlist, RSVP, call me back, request a call, SMS sign-up, coupon, pay me, bookings): a heading stack, the pill email row, the phone picker, choice chips, fact pills and the "done" state. */ .ix { position: relative; display: grid; gap: 16px; padding: var(--b-pad, 22px); text-align: start; } .ix-plain { padding: var(--b-pad, 0); } .ix-head { display: grid; gap: 6px; align-content: start; } .ix-top { display: flex; align-items: center; gap: 12px; } .ix-badge { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 12px 24px -14px var(--site-accent); } .ix-badge svg { width: 22px; height: 22px; } .ix-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.3rem * var(--b-scale, 1)); font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; } .ix-text { margin: 0; color: var(--site-muted); font-size: 14.5px; line-height: 1.55; } .ix-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; } .ix-fact { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: color-mix(in oklab, var(--site-accent) 11%, transparent); color: var(--site-text); } .ix-fact svg { width: 14px; height: 14px; color: var(--site-accent); } .ix-fact.is-hot { background: color-mix(in oklab, var(--site-accent) 92%, transparent); color: var(--site-accent-text); } .ix-fact.is-hot svg { color: currentColor; } .ix-form { display: grid; gap: 10px; margin: 0; } .ix-row { display: flex; gap: 8px; padding: 5px; border-radius: calc(var(--site-btn-radius) + 4px); background: color-mix(in oklab, var(--site-surface) 82%, white); border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent); } .ws-dark .ix-row { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .16); } .ix-row:focus-within { border-color: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); } .ix-row .ix-in { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; } .ix-row .ix-in:focus { outline: none; } .ix-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 0; border-radius: var(--site-btn-radius); background: var(--site-accent); color: var(--site-accent-text); font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: 0 12px 26px -16px var(--site-accent); transition: transform .18s var(--site-ease), filter .18s; } .ix-go:hover { transform: translateY(-1px); filter: brightness(1.05); } .ix-go svg { width: 17px; height: 17px; } .ix-go.is-wide { width: 100%; min-height: 50px; } .ix-go[disabled] { cursor: default; } @container ws-page (max-width: 420px) { .ix-row { flex-direction: column; padding: 6px; } .ix-row .ix-go { width: 100%; } } .ix-consent { display: flex; gap: 9px; align-items: flex-start; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--site-muted); } .ix-consent input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--site-accent); } .ix-fine { margin: 0; font-size: 12px; line-height: 1.45; color: var(--site-muted); display: flex; gap: 6px; align-items: flex-start; } .ix-fine svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--site-accent); } /* Phone: a country picker and the number, as one field. */ .ix-phone { display: flex; gap: 0; border-radius: calc(var(--site-radius) - 4px); border: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); background: color-mix(in oklab, var(--site-surface) 85%, white); overflow: hidden; } .ws-dark .ix-phone { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .16); } .ix-phone:focus-within { border-color: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); } .ix-phone select, .ix-phone input { height: 48px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; } .ix-phone select { flex: none; max-width: 42%; padding-inline: 12px 6px; border-inline-end: 1px solid color-mix(in oklab, var(--site-text) 12%, transparent); font-weight: 700; } .ix-phone input { flex: 1; min-width: 0; padding-inline: 12px; } .ix-phone select:focus, .ix-phone input:focus { outline: none; } .ix-phone .wf-input { border: 0; box-shadow: none; } /* Choice chips (preferred times, guests): radios or checkboxes that look like pills. */ .ix-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; } .ix-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; border-radius: 999px; cursor: pointer; border: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); background: color-mix(in oklab, var(--site-surface) 90%, transparent); font-size: 14px; font-weight: 650; } .ix-chip input { position: absolute; opacity: 0; pointer-events: none; } .ix-chip svg { width: 15px; height: 15px; color: var(--site-accent); } .ix-chip:has(input:checked) { border-color: var(--site-accent); background: var(--site-accent); color: var(--site-accent-text); } .ix-chip:has(input:checked) svg { color: currentColor; } .ix-chip:has(input:focus-visible) { box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 25%, transparent); } .ix-legend { padding: 0; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--site-text); } /* Done. */ .ix-done { display: grid; justify-items: center; gap: 10px; padding: 14px 6px 6px; text-align: center; } .ix-done p { margin: 0; font-weight: 650; max-width: 40ch; } .ix-done small { color: var(--site-muted); font-size: 13px; } .ix-done-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 14px 30px -16px var(--site-accent); animation: ix-pop .5s var(--site-ease) both; } .ix-done-icon svg { width: 26px; height: 26px; stroke-width: 3; } @keyframes ix-pop { from { transform: scale(.6); opacity: 0; } } .ix-people { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--site-muted); } .ix-dots { display: inline-flex; } .ix-dots i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--site-surface); margin-inline-start: -7px; background: linear-gradient(140deg, color-mix(in oklab, var(--site-accent) 85%, white), color-mix(in oklab, var(--site-accent) 55%, var(--site-ink-dark))); } .ix-dots i:first-child { margin-inline-start: 0; } .ix-dots i:nth-child(2) { filter: hue-rotate(40deg); } .ix-dots i:nth-child(3) { filter: hue-rotate(-40deg); } @media (prefers-reduced-motion: reduce) { .ix-done-icon { animation: none; } .ix-go { transition: none; } } .ix fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .ix .wf-grid > .ix-fine, .ix .wf-grid > .wf-alert { grid-column: 1 / -1; } /* Links styled as buttons keep their colours over the page's link reset (.ws-site a). */ .ws-site a.ix-go { color: var(--site-accent-text); } /* css/site/modules/locks.css */ /* Locked blocks (B5, ADR-0068 §7): the card shown instead of the content. */ .ws-lock { position: relative; display: grid; justify-items: center; gap: 10px; padding: 26px 22px 22px; text-align: center; border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); overflow: hidden; isolation: isolate; } .ws-lock::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9; background: radial-gradient(120% 80% at 50% -10%, color-mix(in oklab, var(--site-accent) 22%, transparent), transparent 60%), repeating-linear-gradient(135deg, color-mix(in oklab, var(--site-text) 4%, transparent) 0 10px, transparent 10px 20px); } .ws-lock-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--site-accent) 70%, transparent); } .ws-lock-icon svg { width: 24px; height: 24px; } .ws-lock-title { margin: 4px 0 0; font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; font-family: var(--site-heading, inherit); } .ws-lock-text { margin: 0; max-width: 34ch; color: var(--site-muted); font-size: 14.5px; } .ws-lock-error { margin: 0; padding: 6px 12px; border-radius: 999px; background: color-mix(in oklab, #D14343 14%, transparent); color: inherit; font-size: 13.5px; font-weight: 600; } .ws-lock-form { display: grid; gap: 10px; width: min(100%, 380px); margin-block-start: 4px; } .ws-lock-row { display: flex; gap: 8px; } .ws-lock-row .ws-input { flex: 1 1 auto; min-height: 46px; } .ws-lock-form .ws-submit, .ws-lock-cta { min-height: 46px; } .ws-lock-form > .ws-submit { width: 100%; } .ws-lock-cta { gap: 10px; margin-block-start: 4px; text-decoration: none; } .ws-lock-price { padding: 2px 8px; border-radius: 999px; background: color-mix(in oklab, var(--site-accent-text) 18%, transparent); font-size: 13px; } .ws-lock-note { margin: 0; color: var(--site-muted); font-size: 12.5px; max-width: 38ch; } .ws-lock .ws-consent { font-size: 12.5px; color: var(--site-muted); text-align: start; } @media (max-width: 420px) { .ws-lock-row { flex-direction: column; } } /* css/site/modules/reviews.css */ /* Leave a review (B3 · U3): the signed review page — a radio star picker that works without scripts. */ .rv-form { display: grid; gap: 10px; text-align: start; } .rv-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--site-muted); } .rv-title { margin: 0 0 4px; font-size: clamp(1.4rem, 4vw, 1.8rem); line-height: 1.15; letter-spacing: -0.03em; } .rv-label { font-weight: 700; font-size: 14px; margin-top: 6px; } .rv-opt { color: var(--site-muted); font-weight: 500; } .rv-note { margin: 0; color: var(--site-muted); font-size: 13px; } .rv-err { margin: 0; color: var(--site-danger, hsl(358 75% 59%)); font-size: 13px; font-weight: 600; } .rv-body { height: auto; min-height: 120px; padding-block: 12px; resize: vertical; line-height: 1.5; } .rv-stars-set { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; } .rv-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; } .rv-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rv-stars label { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; cursor: pointer; color: color-mix(in oklab, var(--site-text) 22%, transparent); transition: color .15s, transform .15s, background .15s; } .rv-stars label svg { width: 30px; height: 30px; fill: currentColor; } .rv-stars label:hover, .rv-stars label:hover ~ label, .rv-stars input:checked ~ label { color: var(--site-star, hsl(42 96% 52%)); } .rv-stars label:hover { transform: scale(1.08); } .rv-stars input:focus-visible + label { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 1px; } .rv-send { margin-top: 8px; height: 50px; }