/** * Backlot Child Theme — Design Tokens * Derivato da: docs/design-system.md v1.1.0 * * Tutte le variabili del design system Backlot, prefissate `--backlot-` * per evitare conflitti con Astra/TutorLMS/plugin terzi. * * NON modificare i valori direttamente: aggiorna prima docs/design-system.md * e poi sincronizza qui (il doc è la single source of truth). */ :root { /* =========================== 01. COLORI BASE =========================== */ --backlot-bg: #0B0908; /* background pagina, nero cinematic */ --backlot-surface-1: #13100E; /* card di base */ --backlot-surface-2: #181513; /* surface secondaria, hover, input */ --backlot-surface-3: #1F1B17; /* surface terziaria, code block, deep hover */ --backlot-text: #F2E8DA; /* testo primario, beige chiaro */ --backlot-text-secondary: #D5C9B8; /* testo secondario, sottotitoli */ --backlot-text-muted: #8A7D6F; /* meta, caption, hint */ --backlot-text-dim: #56504A; /* placeholder, disabled, separator */ --backlot-gold: #C9A84C; /* accento principale */ --backlot-gold-soft: #F5C66B; /* highlight, glow */ --backlot-gold-deep: #9B7A2E; /* gradient end, focus ring deep */ --backlot-amber: #B07828; /* accento caldo alternativo */ --backlot-border: rgba(140, 126, 112, 0.08); /* separator subtle */ --backlot-border-gold: rgba(201, 168, 76, 0.16); /* border premium */ --backlot-glow-gold: rgba(201, 168, 76, 0.07); /* halo soft */ --backlot-overlay: rgba(11, 9, 8, 0.85); /* modal backdrop */ --backlot-focus-ring: rgba(245, 198, 107, 0.45); /* focus a11y */ /* =========================== 02. COLORI SEMANTICI =========================== */ --backlot-success: #22C55E; /* lezione completata, quiz corretto */ --backlot-warning: #F59E0B; /* in corso, attenzione */ --backlot-error: #DC2626; /* quiz sbagliato, errore form */ --backlot-info: #3B82F6; /* notifica info (riserva) */ --backlot-locked: #3A3530; /* stato bloccato Premium */ /* =========================== 03. COLORI LAND (accenti per identità Land) Base sempre dark+oro, gli accent compaiono solo su: icona Land, bordo card Land, header Land. =========================== */ --backlot-land-cd: #C9A84C; /* Character District — gold warm */ --backlot-land-pl: #B07828; /* Production Lot — amber/rame */ --backlot-land-va: #1E3A2A; /* The Vault — verde foresta */ --backlot-land-to: #8A2B2B; /* The Tower — rosso terra */ /* =========================== 04. TYPOGRAPHY =========================== */ /* Font families — gli stack di fallback servono fino a font caricato */ --backlot-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --backlot-font-serif: 'Cormorant', Georgia, 'Times New Roman', serif; --backlot-font-display: 'Geist', 'Plus Jakarta Sans', system-ui, sans-serif; --backlot-font-mono: 'Geist Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --backlot-font-body: var(--backlot-font-sans); /* Font size scale (display fluidi con clamp, body fissi per leggibilità) */ --backlot-fs-display-xl: clamp(36px, 5vw, 56px); /* H1 dashboard */ --backlot-fs-display-lg: clamp(28px, 4vw, 40px); /* H2 sezione */ --backlot-fs-display-md: clamp(22px, 3vw, 30px); /* H3 */ --backlot-fs-h4: 20px; /* H4 card title */ --backlot-fs-h5: 17px; /* H5 sub-card */ --backlot-fs-body-lg: 17px; /* paragrafo lezione */ --backlot-fs-body: 15px; /* body standard */ --backlot-fs-body-sm: 14px; /* meta, caption */ --backlot-fs-xs: 13px; /* hint, footer */ --backlot-fs-eyebrow: 12px; /* uppercase label */ --backlot-fs-micro: 11px; /* badge, micro tag */ /* Font weights — usa numeri per chiarezza */ --backlot-fw-regular: 400; --backlot-fw-medium: 500; --backlot-fw-semibold: 600; --backlot-fw-bold: 700; /* Line heights */ --backlot-lh-display: 1.1; --backlot-lh-heading: 1.25; --backlot-lh-tight: 1.4; --backlot-lh-body: 1.65; /* generosa, per lettura lunga */ /* Letter spacing */ --backlot-ls-eyebrow: 0.14em; /* uppercase label */ --backlot-ls-tight: -0.01em; /* display large compact */ /* =========================== 05. SPACING (scala 4-base) =========================== */ --backlot-space-1: 4px; --backlot-space-2: 8px; --backlot-space-3: 12px; --backlot-space-4: 16px; --backlot-space-5: 20px; --backlot-space-6: 24px; /* card padding standard */ --backlot-space-7: 28px; /* button padding */ --backlot-space-8: 32px; /* card padding grande */ --backlot-space-10: 40px; --backlot-space-12: 48px; /* sezione padding Y */ --backlot-space-16: 64px; /* sezione cinematic */ --backlot-space-20: 80px; --backlot-space-24: 96px; /* =========================== 06. BORDER RADIUS =========================== */ --backlot-radius-pill: 60px; /* button, CTA, toggle */ --backlot-radius-circle: 50%; /* avatar, dot */ --backlot-radius-badge: 30px; /* badge Pass/Premium */ --backlot-radius-card: 16px; /* card lezione, card Land */ --backlot-radius-card-soft: 14px; /* card secondaria, voucher */ --backlot-radius-item: 12px; /* quiz option, sidebar item */ --backlot-radius-input: 10px; /* input, textarea, select */ --backlot-radius-sm: 8px; /* bullet, micro-card */ --backlot-radius-image: 6px; /* thumbnail */ --backlot-radius-hairline: 2px; /* progress bar, divider line */ /* =========================== 07. SHADOW & GLOW =========================== */ --backlot-shadow-card: 0 6px 20px rgba(201, 168, 76, 0.18); --backlot-shadow-card-hover: 0 12px 32px rgba(201, 168, 76, 0.32); --backlot-shadow-elevation: 0 16px 40px rgba(0, 0, 0, 0.36); --backlot-shadow-premium-rim: inset 0 0 0 1px rgba(201, 168, 76, 0.04); --backlot-shadow-premium-glow: 0 12px 36px rgba(201, 168, 76, 0.04); --backlot-shadow-premium-glow-hover: 0 18px 48px rgba(201, 168, 76, 0.10); --backlot-shadow-pulse: 0 0 8px rgba(201, 168, 76, 0.65); --backlot-shadow-rim-light: inset 0 1px 0 rgba(242, 232, 218, 0.05); /* Modal: backdrop scuro + halo gold soft */ --backlot-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 80px rgba(201, 168, 76, 0.08); /* Focus tastiera (a11y, sostituisce outline default) */ --backlot-shadow-focus-ring: 0 0 0 3px rgba(201, 168, 76, 0.15), 0 0 12px rgba(245, 198, 107, 0.45); /* Quiz risposta corretta / lezione completata */ --backlot-shadow-success-ring: 0 0 0 4px rgba(34, 197, 94, 0.25), 0 0 20px 6px rgba(34, 197, 94, 0.55), 0 0 40px 12px rgba(34, 197, 94, 0.25); /* Drop-shadow per SVG/icon */ --backlot-glow-gem: drop-shadow(0 0 10px rgba(245, 198, 107, 0.55)); --backlot-glow-icon: drop-shadow(0 0 6px rgba(201, 168, 76, 0.4)); /* =========================== 08. TRANSITIONS =========================== */ --backlot-transition-fast: 0.15s ease; --backlot-transition-base: 0.25s ease; /* default */ --backlot-transition-medium: 0.35s ease; --backlot-transition-slow: 0.5s ease; --backlot-easing-cinematic: cubic-bezier(0.4, 0, 0.2, 1); --backlot-transition-accordion: 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* =========================== 09. GRADIENTS =========================== */ --backlot-gradient-gold: linear-gradient(135deg, #C9A84C 0%, #B07828 100%); --backlot-gradient-gold-soft: linear-gradient(135deg, #F5C66B 0%, #E8C25A 45%, #C9A84C 100%); --backlot-gradient-gold-frame: linear-gradient(140deg, #F5E4B3 0%, #D4AF6B 30%, #8C6A2F 55%, #F5C66B 80%, #D4AF6B 100%); --backlot-gradient-ambient: radial-gradient(ellipse at 50% 100%, rgba(201, 168, 76, 0.08), transparent 60%); --backlot-gradient-tracker: linear-gradient(90deg, #F5C66B 0%, #22C55E 100%); /* =========================== 10. Z-INDEX (scala definita) =========================== */ --backlot-z-base: 1; --backlot-z-sticky: 100; /* header, sticky bar */ --backlot-z-drawer: 500; /* sidebar drawer mobile */ --backlot-z-overlay: 900; /* modal backdrop */ --backlot-z-modal: 1000; /* modal content */ --backlot-z-toast: 1100; /* notifications */ --backlot-z-tooltip: 1200; /* tooltips, popover */ /* ============================================================ 11. ASTRA GLOBAL COLOR REMAP Astra usa --ast-global-color-{0..8} ovunque (container bg, article bg, sidebar widget, footer, ecc.). Rimappandole qui dark+oro Backlot, evitiamo guerre di specificity contro le classi Astra (.ast-separate-container, .ast-article-inner, ecc.) e tutto si propaga in cascade naturale. Definite DOPO i token --backlot-* in modo che possano riusarli direttamente. ============================================================ */ --ast-global-color-0: var(--backlot-text); /* primary text / link base */ --ast-global-color-1: var(--backlot-gold-soft); /* link hover */ --ast-global-color-2: var(--backlot-text); /* heading */ --ast-global-color-3: var(--backlot-text-muted); /* meta / subtle text */ --ast-global-color-4: var(--backlot-surface-1); /* article/content bg */ --ast-global-color-5: var(--backlot-bg); /* page bg (separate-container) */ --ast-global-color-6: var(--backlot-surface-2); /* alternate bg */ --ast-global-color-7: var(--backlot-surface-3); /* subtle bg */ --ast-global-color-8: var(--backlot-border-gold); /* border accent */ /* TutorLMS color remap — solo i token che impattano leggibilità body. Override completo TutorLMS arriva in B3 (tutor-override.css). Qui SOLO il body-color perché TutorLMS imposta `p { color: var(--tutor-body-color) }` e il default #212327 è quasi invisibile su dark. */ --tutor-body-color: var(--backlot-text); /* WP block editor preset color remap (usato da global-styles-inline) */ --wp--preset--color--ast-global-color-0: var(--backlot-text); --wp--preset--color--ast-global-color-1: var(--backlot-gold-soft); --wp--preset--color--ast-global-color-2: var(--backlot-text); --wp--preset--color--ast-global-color-3: var(--backlot-text-muted); --wp--preset--color--ast-global-color-4: var(--backlot-surface-1); --wp--preset--color--ast-global-color-5: var(--backlot-bg); --wp--preset--color--ast-global-color-6: var(--backlot-surface-2); --wp--preset--color--ast-global-color-7: var(--backlot-surface-3); --wp--preset--color--ast-global-color-8: var(--backlot-border-gold); /* ============================================================ 12. BRAND-EVOCATIVE ALIASES (Brief B2) Nomi più "parlanti" del brand per i componenti. Entrambe le forme (-bg/-ink, -text/-cream, ecc.) sono valide e puntano allo stesso valore — usa quella più leggibile nel contesto. ============================================================ */ --backlot-ink: var(--backlot-bg); /* nero cinematic */ --backlot-cream: var(--backlot-text); /* beige #F2E8DA */ --backlot-gold-dark: var(--backlot-gold-deep); /* gold scuro */ --backlot-green-forest: var(--backlot-land-va); /* verde foresta Vault */ --backlot-red-terra: var(--backlot-land-to); /* rosso terra Tower */ --backlot-text-primary: var(--backlot-text); --backlot-text-on-gold: var(--backlot-bg); /* testo dark su gradient gold */ /* Radius alias generici (per ergonomia naming) */ --backlot-radius-sm-alias: var(--backlot-radius-sm); /* 8px */ --backlot-radius-md: var(--backlot-radius-card-soft); /* 14px */ --backlot-radius-lg: var(--backlot-radius-card); /* 16px */ /* Font-size alias */ --backlot-font-xs: var(--backlot-fs-micro); /* 11px */ --backlot-font-sm: var(--backlot-fs-body-sm); /* 14px */ --backlot-font-md: var(--backlot-fs-body); /* 15px */ --backlot-font-lg: var(--backlot-fs-body-lg); /* 17px */ /* ============================================================ 13. POLISH DECORATIVO (Brief B3-POLISH-MAX) Token estratti dai pattern Shopify (vedi shopify-decorations.md) per replicare il signature look "art-deco cinematic premium". ============================================================ */ /* Corner brackets — decorazione NUOVA Backlot (non presente in Shopify) */ --backlot-corner-size: 16px; --backlot-corner-thickness: 1.5px; --backlot-corner-color: rgba(245, 198, 107, 0.4); --backlot-corner-color-hover: var(--backlot-gold); --backlot-corner-offset: 8px; /* spazio dall'angolo della card */ /* Multi-layer shadows (signature pattern .pack--pro) — verbatim dalla landing */ --backlot-shadow-premium-stack: 0 0 0 1px rgba(201, 168, 76, 0.18), 0 0 0 4px rgba(11, 9, 8, 0.92), 0 0 0 5px rgba(201, 168, 76, 0.14), 0 12px 36px rgba(201, 168, 76, 0.04); --backlot-shadow-premium-stack-hover: 0 0 0 1px rgba(201, 168, 76, 0.28), 0 0 0 4px rgba(11, 9, 8, 0.92), 0 0 0 5px rgba(201, 168, 76, 0.22), 0 18px 48px rgba(201, 168, 76, 0.12); /* Inset gold strata */ --backlot-shadow-inset-gold: inset 0 1px 0 rgba(245, 198, 107, 0.2), inset 0 0 0 1px rgba(245, 198, 107, 0.12); --backlot-shadow-inset-gold-strong: inset 0 0 0 1px rgba(201, 168, 76, 0.28), inset 0 1px 0 rgba(245, 198, 107, 0.3); /* Drop-shadow gold per intensità */ --backlot-shadow-drop-gold-subtle: 0 2px 8px rgba(245, 198, 107, 0.06); --backlot-shadow-drop-gold: 0 4px 20px rgba(245, 198, 107, 0.10); --backlot-shadow-drop-gold-strong: 0 8px 40px rgba(245, 198, 107, 0.18); /* Gradient gold raffinati — verbatim dalla landing */ --backlot-gradient-gold-refined: linear-gradient(135deg, #C9A84C 0%, #B07828 100%); --backlot-gradient-gold-text: linear-gradient(135deg, #F5C66B 0%, #E8C25A 45%, #C9A84C 100%); --backlot-gradient-gold-metallic: linear-gradient(160deg, #F5E4B3 0%, #D4AF6B 35%, #8C6A2F 70%, #F5C66B 100%); --backlot-gradient-gold-radial-glow: radial-gradient(circle at 50% 50%, rgba(245, 198, 107, 0.14) 0%, rgba(201, 168, 76, 0.04) 70%, transparent 100%); /* Premium transitions */ --backlot-transition-smooth: all 300ms cubic-bezier(0.4, 0, 0.2, 1); --backlot-transition-decorative: all 500ms cubic-bezier(0.23, 1, 0.32, 1); /* Editorial typography knobs */ --backlot-ls-display-tight: -0.025em; /* hero headline */ --backlot-ls-eyebrow-wide: 0.18em; /* eyebrow uppercase mono */ --backlot-ls-eyebrow-extra-wide: 0.34em; /* hero brand-sub */ --backlot-ls-tag: 0.24em; /* ticket-tag mono */ }