/* * Shaupa public editorial contract. * * This file is intentionally framework-free: the React app imports it into * the Vite bundle, while server-rendered Jinja pages can link to * /static/public-editorial.css. All public surfaces share the same semantic * tokens, typography, controls, motion, responsive rhythm and colour-mode * switch (`data-editorial-mode="light|dark"` on ). */ :root, :root[data-editorial-mode='light'] { color-scheme: light; --public-page: #edf0ea; --public-panel: #f8faf6; --public-panel-subtle: #e4e9e2; --public-input: #dbe3d9; --public-ink: #17251d; --public-ink-body: #35453b; --public-ink-soft: #5b685f; --public-line: #bac4ba; --public-line-strong: #8d9b8f; --public-accent: #be442f; --public-on-accent: #fffaf5; --public-destructive: #a93434; --public-on-destructive: #ffffff; --public-focus: #b6412e; --public-backdrop: rgb(17 30 22 / 0.58); --public-shadow: 0 22px 60px rgb(23 37 29 / 0.16); --public-font-ui: Outfit, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; --public-font-display: Fraunces, Iowan Old Style, Baskerville, Georgia, serif; --public-radius-sm: 0.65rem; --public-radius-md: 1rem; --public-radius-lg: 1.5rem; --public-content: 74rem; --public-gutter: clamp(1.25rem, 4vw, 4rem); --public-motion-fast: 180ms; --public-motion-base: 360ms; --public-motion-slow: 620ms; --public-ease: cubic-bezier(0.2, 0.76, 0.24, 1); } :root[data-editorial-mode='dark'] { color-scheme: dark; --public-page: #172019; --public-panel: #202a22; --public-panel-subtle: #29352c; --public-input: #101812; --public-ink: #edf2e9; --public-ink-body: #d2dad1; --public-ink-soft: #aab5ab; --public-line: #3d4940; --public-line-strong: #647067; --public-accent: #f2785f; --public-on-accent: #1d211e; --public-destructive: #f08a86; --public-on-destructive: #241313; --public-focus: #f29b88; --public-backdrop: rgb(4 10 6 / 0.72); --public-shadow: 0 24px 70px rgb(0 0 0 / 0.34); } /* Inside the app, the established Find / Flow / Style / Boards variables are authoritative. SSR pages without those variables retain the safe fallbacks above. */ :root[data-shaupa-ui='editorial'] body { --public-page: var(--app-page, #edf0ea); --public-panel: var(--app-panel, #f8faf6); --public-panel-subtle: var(--app-panel-subtle, #e4e9e2); --public-input: var(--app-input-surface, #dbe3d9); --public-ink: var(--app-ink, #17251d); --public-ink-body: var(--app-ink-body, #35453b); --public-ink-soft: var(--app-ink-soft, #5b685f); --public-line: var(--app-line, #bac4ba); --public-line-strong: var(--app-line-strong, #8d9b8f); --public-accent: var(--app-accent, #be442f); --public-on-accent: var(--app-on-accent, #fffaf5); --public-backdrop: var(--app-modal-backdrop, rgb(17 30 22 / 0.58)); --public-shadow: var(--app-panel-shadow, 0 22px 60px rgb(23 37 29 / 0.16)); } /* The shared script also marks SSR documents as editorial. Keep their dark fallback dark even when the React-only --app-* layer is not present. */ :root[data-shaupa-ui='editorial'][data-editorial-mode='dark'] body { --public-page: var(--app-page, #172019); --public-panel: var(--app-panel, #202a22); --public-panel-subtle: var(--app-panel-subtle, #29352c); --public-input: var(--app-input-surface, #101812); --public-ink: var(--app-ink, #edf2e9); --public-ink-body: var(--app-ink-body, #d2dad1); --public-ink-soft: var(--app-ink-soft, #aab5ab); --public-line: var(--app-line, #3d4940); --public-line-strong: var(--app-line-strong, #647067); --public-accent: var(--app-accent, #f2785f); --public-on-accent: var(--app-on-accent, #1d211e); --public-backdrop: var(--app-modal-backdrop, rgb(4 10 6 / 0.72)); --public-shadow: var(--app-panel-shadow, 0 24px 70px rgb(0 0 0 / 0.34)); } /* Retailer palettes are vetted presets, selected by route configuration. The route supplies only a palette id, so arbitrary CMS colours cannot make controls unreadable. Accent channels also re-theme existing Tailwind-based search, Lens, product and modal controls across the complete route. */ :root[data-retailer-route] body { --app-accent: rgb(var(--a-600)); --thread-accent: rgb(var(--a-600)); --thread-accent-soft: rgb(var(--a-50)); --public-accent: rgb(var(--a-600)); --public-focus: rgb(var(--a-500)); } :root[data-retailer-palette='parade'] body { --a-50: 254 241 236; --a-100: 250 218 207; --a-200: 242 178 159; --a-300: 230 129 105; --a-400: 205 83 60; --a-500: 185 65 46; --a-600: 162 52 37; --a-700: 132 41 31; --a-800: 104 34 27; --a-900: 75 28 23; --retailer-signal: #f0be45; --retailer-wash: #f2d5c8; --retailer-mark: #7e2e27; --app-on-primary: #ffffff; --app-on-accent: #ffffff; --public-on-accent: #ffffff; } :root[data-retailer-palette='storybook'] body { --a-50: 251 241 246; --a-100: 247 219 233; --a-200: 235 177 207; --a-300: 214 125 172; --a-400: 181 81 132; --a-500: 157 61 105; --a-600: 132 48 85; --a-700: 107 39 69; --a-800: 84 33 57; --a-900: 61 27 43; --retailer-signal: #e7a945; --retailer-wash: #ead7e2; --retailer-mark: #78364f; --app-on-primary: #ffffff; --app-on-accent: #ffffff; --public-on-accent: #ffffff; } :root[data-retailer-palette='afterdark'] body { --a-50: 246 243 250; --a-100: 234 227 243; --a-200: 208 195 225; --a-300: 174 153 202; --a-400: 134 108 166; --a-500: 105 79 136; --a-600: 82 62 107; --a-700: 66 50 87; --a-800: 52 42 68; --a-900: 39 33 51; --retailer-signal: #d0db67; --retailer-wash: #dcd5e8; --retailer-mark: #443657; --app-on-primary: #ffffff; --app-on-accent: #ffffff; --public-on-accent: #ffffff; } :root[data-retailer-palette='habitat'] body { --a-50: 238 246 243; --a-100: 217 235 228; --a-200: 178 212 199; --a-300: 133 182 165; --a-400: 91 148 130; --a-500: 66 121 105; --a-600: 48 94 83; --a-700: 39 76 68; --a-800: 33 61 55; --a-900: 27 45 41; --retailer-signal: #d0a84c; --retailer-wash: #d5e4dc; --retailer-mark: #29564d; --app-on-primary: #ffffff; --app-on-accent: #ffffff; --public-on-accent: #ffffff; } :root[data-editorial-mode='dark'][data-retailer-palette='parade'] body { --a-50: 54 35 30; --a-100: 78 43 35; --a-200: 111 55 43; --a-300: 154 72 55; --a-400: 207 101 78; --a-500: 235 126 103; --a-600: 242 146 124; --a-700: 246 166 148; --a-800: 249 190 177; --a-900: 252 218 209; --retailer-signal: #f4cd65; --retailer-wash: #3e2a26; --retailer-mark: #f3a189; --app-on-primary: #172019; --app-on-accent: #172019; --public-on-accent: #172019; } :root[data-editorial-mode='dark'][data-retailer-palette='storybook'] body { --a-50: 52 31 42; --a-100: 76 37 55; --a-200: 108 48 74; --a-300: 149 67 101; --a-400: 190 97 132; --a-500: 222 132 162; --a-600: 235 157 183; --a-700: 241 179 199; --a-800: 246 201 216; --a-900: 250 224 234; --retailer-signal: #edbc61; --retailer-wash: #392a33; --retailer-mark: #e9a7be; --app-on-primary: #172019; --app-on-accent: #172019; --public-on-accent: #172019; } :root[data-editorial-mode='dark'][data-retailer-palette='afterdark'] body { --a-50: 38 31 47; --a-100: 53 41 68; --a-200: 73 55 94; --a-300: 98 73 125; --a-400: 132 105 163; --a-500: 166 143 194; --a-600: 191 171 214; --a-700: 208 192 225; --a-800: 225 214 237; --a-900: 240 233 247; --retailer-signal: #dbe875; --retailer-wash: #302b39; --retailer-mark: #c8b5df; --app-on-primary: #172019; --app-on-accent: #172019; --public-on-accent: #172019; } :root[data-editorial-mode='dark'][data-retailer-palette='habitat'] body { --a-50: 24 43 37; --a-100: 31 59 50; --a-200: 42 82 69; --a-300: 58 109 91; --a-400: 83 139 119; --a-500: 117 170 151; --a-600: 148 194 178; --a-700: 174 211 198; --a-800: 201 228 218; --a-900: 228 242 236; --retailer-signal: #ddb963; --retailer-wash: #24352f; --retailer-mark: #a3cdbd; --app-on-primary: #172019; --app-on-accent: #172019; --public-on-accent: #172019; } .public-editorial-page { min-height: 100%; background: var(--public-page); color: var(--public-ink); font-family: var(--public-font-ui); font-synthesis: none; text-rendering: optimizeLegibility; } .public-editorial-shell { width: min(100%, var(--public-content)); margin-inline: auto; padding-inline: var(--public-gutter); } .public-editorial-kicker { margin: 0; color: var(--public-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; line-height: 1.4; text-transform: uppercase; } .public-editorial-title { margin: 0; color: var(--public-ink); font-family: var(--public-font-display); font-size: clamp(2.9rem, 8vw, 7.25rem); font-weight: 500; letter-spacing: -0.055em; line-height: 0.9; } .public-editorial-deck { color: var(--public-ink-body); font-size: clamp(1rem, 1.8vw, 1.2rem); line-height: 1.55; } .public-editorial-panel { border: 1px solid var(--public-line); border-radius: var(--public-radius-md); background: var(--public-panel); color: var(--public-ink); box-shadow: var(--public-shadow); } .public-editorial-panel--subtle { background: var(--public-panel-subtle); box-shadow: none; } .public-editorial-rule { border: 0; border-top: 1px solid var(--public-line); } .public-editorial-control, .public-editorial-input { border: 1px solid var(--public-line-strong); border-radius: var(--public-radius-sm); background: var(--public-input); color: var(--public-ink); font: inherit; } .public-editorial-control { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1rem; cursor: pointer; font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: border-color var(--public-motion-fast) ease, background-color var(--public-motion-fast) ease, color var(--public-motion-fast) ease, transform var(--public-motion-fast) ease; } .public-editorial-control:hover:not(:disabled) { border-color: var(--public-ink); } .public-editorial-control:active:not(:disabled) { transform: translateY(1px); } .public-editorial-control--primary { border-color: var(--public-accent); background: var(--public-accent); color: var(--public-on-accent); } .public-editorial-control--destructive { border-color: var(--public-destructive); background: var(--public-destructive); color: var(--public-on-destructive); } .public-editorial-control:disabled { cursor: not-allowed; opacity: 0.58; } .public-editorial-input { width: 100%; min-height: 3rem; padding: 0.75rem 0.9rem; } .public-editorial-input::placeholder { color: var(--public-ink-soft); opacity: 1; } .public-editorial-page :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--public-focus) 74%, transparent); outline-offset: 3px; } .public-editorial-reveal { animation: public-editorial-reveal var(--public-motion-slow) var(--public-ease) both; } .public-editorial-reveal--2 { animation-delay: 90ms; } .public-editorial-reveal--3 { animation-delay: 180ms; } @keyframes public-editorial-reveal { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } } .public-editorial-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: 640px) { :root { --public-gutter: 1rem; } .public-editorial-title { font-size: clamp(2.75rem, 17vw, 4.5rem); } .public-editorial-control { min-height: 3rem; } } @media (prefers-reduced-motion: reduce) { :root { --public-motion-fast: 120ms; --public-motion-base: 160ms; --public-motion-slow: 180ms; } .public-editorial-reveal { animation-duration: 180ms; animation-name: public-editorial-fade; } .public-editorial-control:active:not(:disabled) { transform: none; } } @keyframes public-editorial-fade { from { opacity: 0; } to { opacity: 1; } } @media print { :root, :root[data-editorial-mode='dark'] { color-scheme: light; --public-page: #ffffff; --public-panel: #ffffff; --public-panel-subtle: #ffffff; --public-ink: #111111; --public-ink-body: #222222; --public-ink-soft: #444444; --public-line: #b8b8b8; --public-line-strong: #777777; --public-shadow: none; } .public-editorial-page { background: #ffffff !important; color: #111111 !important; } .public-editorial-panel { break-inside: avoid; box-shadow: none !important; } .public-editorial-no-print { display: none !important; } .public-editorial-reveal { animation: none !important; opacity: 1 !important; transform: none !important; } }