/* ========================================================================== ROC UI — TOKEN del design system di RuleOfCool.it -------------------------------------------------------------------------- Un solo posto per colori, tipografia, spazi, raggi, ombre e livelli. Tutto il resto (roc.css, partial, pagine) consuma SOLO queste variabili: se un colore serve e non c'è, si aggiunge QUI, non si scrive un esadecimale nel template. Bootstrap 5.3 (con data-bs-theme="dark" sull') viene configurato rimappando le SUE variabili sulle nostre, nella sezione finale: niente Sass, niente build, e i 235 template continuano a usare le classi che conoscono. Direzione: «fantasy moderno» — Cinzel per i titoli (richiama il lettering del logo), Inter per il testo, palette dal logo (rosso #820000 su nero), oro come secondo accento, neutri caldi. ========================================================================== */ /* -------------------------------------------------------------------------- Font self-hosted (public/fonts, licenza SIL Open Font License). Solo i subset latin/latin-ext: gli altri non servono alle lingue del portale. -------------------------------------------------------------------------- */ @font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/cinzel-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/cinzel-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Long Shot: il carattere del logo. SOLO per il marchio (navbar, footer): non ha accenti, né «&», «:» e virgolette, quindi non può fare i titoli. Basic latin e basta. */ @font-face { font-family: "Long Shot"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/long-shot.ttf") format("truetype"); unicode-range: U+0020-007E; } :root { /* ---------- Palette primitiva (non usarla direttamente nelle pagine) ---------- */ /* Rosso del logo */ --roc-red-900: #4a0000; --roc-red-800: #660000; --roc-red-700: #820000; /* il rosso del d20 */ --roc-red-600: #9b0000; --roc-red-500: #b8141c; --roc-red-400: #d8474d; /* icone e bordi su scuro */ --roc-red-300: #e8666b; /* testo e link su scuro (contrasto 5:1 sulle card) */ --roc-red-200: #f2a3a6; --roc-red-100: #fbe0e1; /* Oro: secondo accento, con parsimonia (livelli, Master, maestrie) */ --roc-gold-700: #8a6d14; --roc-gold-600: #a8861c; --roc-gold-500: #c9a227; --roc-gold-400: #d9b84a; --roc-gold-300: #e8cf7a; /* Neutri caldi */ --roc-n-0: #0e0f11; --roc-n-50: #141518; --roc-n-100: #191b1f; --roc-n-150: #1d2025; --roc-n-200: #24272d; --roc-n-250: #2b2f36; --roc-n-300: #343841; --roc-n-400: #454a55; --roc-n-500: #626775; --roc-n-600: #868b96; --roc-n-700: #a5a8b1; --roc-n-800: #cbccd2; --roc-n-900: #e9e6df; --roc-n-950: #f7f4ec; /* ---------- Tipografia ---------- */ --roc-font-brand: "Long Shot", "Cinzel", Georgia, serif; /* solo il marchio */ --roc-font-display: "Cinzel", "Palatino Linotype", "Book Antiqua", Georgia, serif; --roc-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --roc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --roc-fs-xs: .75rem; --roc-fs-sm: .875rem; --roc-fs-md: 1rem; --roc-fs-lg: 1.125rem; --roc-fs-xl: 1.25rem; --roc-h1: clamp(1.55rem, 1.15rem + 1.6vw, 2.2rem); --roc-h2: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); --roc-h3: clamp(1.1rem, .95rem + .6vw, 1.35rem); --roc-h4: 1.125rem; --roc-h5: 1rem; --roc-h6: .9rem; /* ---------- Forme ---------- */ --roc-r-sm: 6px; --roc-r: 8px; --roc-r-lg: 12px; --roc-r-xl: 16px; --roc-r-pill: 999px; --roc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --roc-shadow: 0 8px 24px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .03); --roc-shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .85); --roc-z-sticky: 1020; --roc-z-nav: 1030; --roc-z-drawer: 1045; --roc-z-modal: 1055; --roc-z-toast: 1090; --roc-nav-h: 60px; --roc-page-gutter: .75rem; /* padding laterale del container di pagina (12px) */ /* ---------- Alias LEGACY ---------- Nomi usati da ~1400 style inline e da vecchi partial (var(--accent), var(--bg-card)…). Restano validi e puntano ai token nuovi: non se ne aggiungono altri. */ --bg-dark: var(--roc-bg); --bg-card: var(--roc-surface); --bg-card-header: var(--roc-surface-2); --accent: var(--roc-primary); --accent-hover: var(--roc-primary-hover); --accent-glow: rgba(130, 0, 0, .35); --text-light: var(--roc-text); --text-muted: var(--roc-text-muted); --text-color: var(--roc-text); --border-color: var(--roc-border); --success-color: var(--roc-success-bg); --warning-color: var(--roc-warning-bg); --danger-color: var(--roc-danger-bg); --info-color: var(--roc-info-bg); --input-bg: var(--roc-input-bg); --card-bg: var(--roc-surface); --background-color: var(--roc-bg); --dark-bg: var(--roc-bg); --dark-accent: var(--roc-primary); --dark-text: var(--roc-text); --dark-border: var(--roc-border); --dark-card-bg: var(--roc-surface); --dark-input-bg: var(--roc-input-bg); } /* ========================================================================== TEMA SCURO (predefinito) — token semantici + rimappatura Bootstrap 5.3. Viene dopo bootstrap.min.css, quindi vince. `:root` e `[data-bs-theme=dark]` insieme perché Bootstrap dichiara il tema scuro sul secondo. Il tema chiaro, più sotto, ridefinisce OGNI token semantico: le variabili Bootstrap puntano ai token e seguono da sole. ========================================================================== */ :root, [data-bs-theme="dark"] { color-scheme: dark; --roc-bg: var(--roc-n-50); --roc-bg-rgb: 20, 21, 24; --roc-bg-deep: var(--roc-n-0); --roc-surface: var(--roc-n-150); /* card */ --roc-surface-2: var(--roc-n-200); --roc-surface-2-rgb: 36, 39, 45; /* intestazioni card, barre */ --roc-surface-3: var(--roc-n-250); --roc-surface-3-rgb: 43, 47, 54; /* hover, campi */ --roc-input-bg: var(--roc-n-250); --roc-border: var(--roc-n-300); --roc-border-strong: var(--roc-n-400); --roc-text: var(--roc-n-900); --roc-text-rgb: 233, 230, 223; --roc-text-strong: var(--roc-n-950); --roc-text-strong-rgb: 247, 244, 236; --roc-text-2: var(--roc-n-800); --roc-text-muted: var(--roc-n-700); --roc-text-muted-rgb: 165, 168, 177; --roc-text-faint: var(--roc-n-600); --roc-text-faint-rgb: 134, 139, 150; --roc-primary: var(--roc-red-700); --roc-primary-hover: var(--roc-red-600); --roc-primary-active: var(--roc-red-800); --roc-primary-fg: var(--roc-red-300); /* rosso come TESTO su scuro */ --roc-primary-icon: var(--roc-red-400); --roc-primary-rgb: 130, 0, 0; --roc-accent: var(--roc-gold-500); --roc-accent-fg: var(--roc-gold-400); --roc-accent-rgb: 201, 162, 39; --roc-link: var(--roc-red-300); --roc-link-rgb: 232, 102, 107; --roc-link-hover: var(--roc-red-200); --roc-link-hover-rgb: 242, 163, 166; --roc-focus: rgba(201, 162, 39, .45); --roc-glow: rgba(130, 0, 0, .16); /* alone in cima alla pagina */ /* Semantici: -bg per i riempimenti (testo bianco sopra), -fg per testo e icone. Il rosso di errore è VOLUTAMENTE diverso dal rosso del brand. */ --roc-success-bg: #2f9e5a; --roc-success-fg: #5fc47f; --roc-success-rgb: 47, 158, 90; --roc-warning-bg: #d9902a; --roc-warning-fg: #e9a83a; --roc-warning-rgb: 217, 144, 42; --roc-danger-bg: #de4c47; --roc-danger-fg: #f0716c; --roc-danger-rgb: 222, 76, 71; --roc-info-bg: #3b83d1; --roc-info-fg: #6aa9e8; --roc-info-rgb: 59, 131, 209; --roc-secondary-bg: var(--roc-n-400); --roc-secondary-fg: var(--roc-n-800); --roc-secondary-rgb: 69, 74, 85; --roc-magic-bg: #8b6fd0; --roc-magic-fg: #b39bea; --roc-magic-rgb: 139, 111, 208; --roc-expertise-bg: #2fa39a; --roc-expertise-fg: #5ec9c0; --roc-expertise-rgb: 47, 163, 154; --roc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --roc-shadow: 0 8px 24px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .03); --roc-shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .85); --roc-tooltip-bg: var(--roc-n-950); --roc-tooltip-fg: var(--roc-n-50); /* ---- Bootstrap → token ---- */ --bs-font-sans-serif: var(--roc-font-sans); --bs-font-monospace: var(--roc-font-mono); --bs-body-font-family: var(--roc-font-sans); --bs-body-font-size: 1rem; --bs-body-line-height: 1.55; --bs-body-bg: var(--roc-bg); --bs-body-bg-rgb: var(--roc-bg-rgb); --bs-body-color: var(--roc-text); --bs-body-color-rgb: var(--roc-text-rgb); --bs-emphasis-color: var(--roc-text-strong); --bs-emphasis-color-rgb: var(--roc-text-strong-rgb); --bs-secondary-color: var(--roc-text-muted); --bs-secondary-color-rgb: var(--roc-text-muted-rgb); /* .text-muted, .form-text */ --bs-secondary-bg: var(--roc-surface-2); --bs-secondary-bg-rgb: var(--roc-surface-2-rgb); --bs-tertiary-color: var(--roc-text-faint); --bs-tertiary-color-rgb: var(--roc-text-faint-rgb); --bs-tertiary-bg: var(--roc-surface-3); --bs-tertiary-bg-rgb: var(--roc-surface-3-rgb); --bs-heading-color: var(--roc-text-strong); --bs-border-color: var(--roc-border); --bs-border-color-translucent: rgba(128, 128, 128, .2); --bs-border-radius: var(--roc-r); --bs-border-radius-sm: var(--roc-r-sm); --bs-border-radius-lg: var(--roc-r-lg); --bs-border-radius-xl: var(--roc-r-xl); --bs-border-radius-xxl: 20px; --bs-border-radius-pill: var(--roc-r-pill); --bs-box-shadow: var(--roc-shadow); --bs-box-shadow-sm: var(--roc-shadow-sm); --bs-box-shadow-lg: var(--roc-shadow-lg); --bs-link-color: var(--roc-link); --bs-link-color-rgb: var(--roc-link-rgb); --bs-link-hover-color: var(--roc-link-hover); --bs-link-hover-color-rgb: var(--roc-link-hover-rgb); --bs-link-decoration: none; --bs-code-color: var(--roc-accent-fg); --bs-highlight-bg: rgba(201, 162, 39, .3); --bs-highlight-color: var(--roc-text-strong); --bs-focus-ring-width: .2rem; --bs-focus-ring-color: var(--roc-focus); /* Colori semantici (alimentano .bg-*, .text-*, .border-* via -rgb). light e dark restano fissi in entrambi i temi: .bg-dark è scuro anche sul chiaro. */ --bs-primary: var(--roc-primary); --bs-primary-rgb: var(--roc-primary-rgb); --bs-secondary: var(--roc-secondary-bg); --bs-secondary-rgb: var(--roc-secondary-rgb); --bs-success: var(--roc-success-bg); --bs-success-rgb: var(--roc-success-rgb); --bs-info: var(--roc-info-bg); --bs-info-rgb: var(--roc-info-rgb); --bs-warning: var(--roc-warning-bg); --bs-warning-rgb: var(--roc-warning-rgb); --bs-danger: var(--roc-danger-bg); --bs-danger-rgb: var(--roc-danger-rgb); --bs-light: var(--roc-n-900); --bs-light-rgb: 233, 230, 223; --bs-dark: var(--roc-n-100); --bs-dark-rgb: 25, 27, 31; /* Varianti «emphasis / subtle»: alert, .text-*-emphasis, .bg-*-subtle */ --bs-primary-text-emphasis: var(--roc-primary-fg); --bs-secondary-text-emphasis: var(--roc-text-2); --bs-success-text-emphasis: var(--roc-success-fg); --bs-info-text-emphasis: var(--roc-info-fg); --bs-warning-text-emphasis: var(--roc-warning-fg); --bs-danger-text-emphasis: var(--roc-danger-fg); --bs-light-text-emphasis: var(--roc-text-strong); --bs-dark-text-emphasis: var(--roc-text-2); --bs-primary-bg-subtle: color-mix(in srgb, var(--roc-primary) 22%, var(--roc-surface)); --bs-secondary-bg-subtle: color-mix(in srgb, var(--roc-secondary-bg) 22%, var(--roc-surface)); --bs-success-bg-subtle: color-mix(in srgb, var(--roc-success-bg) 16%, var(--roc-surface)); --bs-info-bg-subtle: color-mix(in srgb, var(--roc-info-bg) 16%, var(--roc-surface)); --bs-warning-bg-subtle: color-mix(in srgb, var(--roc-warning-bg) 16%, var(--roc-surface)); --bs-danger-bg-subtle: color-mix(in srgb, var(--roc-danger-bg) 16%, var(--roc-surface)); --bs-light-bg-subtle: var(--roc-surface-2); --bs-dark-bg-subtle: var(--roc-surface-3); --bs-primary-border-subtle: color-mix(in srgb, var(--roc-primary) 55%, var(--roc-border)); --bs-secondary-border-subtle: var(--roc-border-strong); --bs-success-border-subtle: color-mix(in srgb, var(--roc-success-bg) 45%, var(--roc-border)); --bs-info-border-subtle: color-mix(in srgb, var(--roc-info-bg) 45%, var(--roc-border)); --bs-warning-border-subtle: color-mix(in srgb, var(--roc-warning-bg) 45%, var(--roc-border)); --bs-danger-border-subtle: color-mix(in srgb, var(--roc-danger-bg) 45%, var(--roc-border)); --bs-light-border-subtle: var(--roc-border-strong); --bs-dark-border-subtle: var(--roc-border); --bs-form-valid-color: var(--roc-success-fg); --bs-form-valid-border-color: var(--roc-success-bg); --bs-form-invalid-color: var(--roc-danger-fg); --bs-form-invalid-border-color: var(--roc-danger-bg); } /* ========================================================================== TEMA CHIARO (a scelta dell'utente: data-bs-theme="light" sull'). Ridefinisce OGNI token semantico. I neutri sono caldi, da pergamena, e i colori-testo sono più scuri per tenere il contrasto. Navbar e footer restano scuri in entrambi i temi (regole in roc.css): tengono il marchio leggibile. ========================================================================== */ [data-bs-theme="light"] { color-scheme: light; --roc-bg: #f6f3ec; --roc-bg-rgb: 246, 243, 236; --roc-bg-deep: #ebe7de; --roc-surface: #ffffff; --roc-surface-2: #f2eee5; --roc-surface-2-rgb: 242, 238, 229; --roc-surface-3: #e9e4d9; --roc-surface-3-rgb: 233, 228, 217; --roc-input-bg: #ffffff; --roc-border: #dcd6c9; --roc-border-strong: #bfb8a9; --roc-text: #1f2024; --roc-text-rgb: 31, 32, 36; --roc-text-strong: #0e0f11; --roc-text-strong-rgb: 14, 15, 17; --roc-text-2: #3a3c42; --roc-text-muted: #5d606a; --roc-text-muted-rgb: 93, 96, 106; --roc-text-faint: #7f838d; --roc-text-faint-rgb: 127, 131, 141; --roc-primary: var(--roc-red-700); --roc-primary-hover: var(--roc-red-600); --roc-primary-active: var(--roc-red-800); --roc-primary-fg: var(--roc-red-700); /* sul chiaro il rosso del logo è leggibile così com'è */ --roc-primary-icon: var(--roc-red-600); --roc-accent: var(--roc-gold-500); --roc-accent-fg: var(--roc-gold-700); --roc-link: var(--roc-red-600); --roc-link-rgb: 155, 0, 0; --roc-link-hover: var(--roc-red-800); --roc-link-hover-rgb: 102, 0, 0; --roc-focus: rgba(130, 0, 0, .3); --roc-glow: rgba(130, 0, 0, .07); --roc-success-bg: #2a8a4f; --roc-success-fg: #1e6f3e; --roc-success-rgb: 42, 138, 79; --roc-warning-bg: #d28a22; --roc-warning-fg: #8a5a12; --roc-warning-rgb: 210, 138, 34; --roc-danger-bg: #cf3c37; --roc-danger-fg: #b0261f; --roc-danger-rgb: 207, 60, 55; --roc-info-bg: #2f6fb5; --roc-info-fg: #1f5a9a; --roc-info-rgb: 47, 111, 181; --roc-secondary-bg: #6b7080; --roc-secondary-fg: #4b4f59; --roc-secondary-rgb: 107, 112, 128; --roc-magic-bg: #7a5fc4; --roc-magic-fg: #5a44a3; --roc-magic-rgb: 122, 95, 196; --roc-expertise-bg: #23948b; --roc-expertise-fg: #1a7169; --roc-expertise-rgb: 35, 148, 139; --roc-shadow-sm: 0 1px 2px rgba(20, 21, 24, .12); --roc-shadow: 0 8px 24px -12px rgba(20, 21, 24, .28); --roc-shadow-lg: 0 24px 60px -24px rgba(20, 21, 24, .4); --roc-tooltip-bg: #1f2024; --roc-tooltip-fg: #f7f4ec; --bs-border-color-translucent: rgba(0, 0, 0, .12); --bs-highlight-bg: rgba(201, 162, 39, .35); --bs-light-text-emphasis: var(--roc-text-2); --bs-dark-text-emphasis: var(--roc-text-strong); --bs-light-bg-subtle: var(--roc-surface-2); --bs-dark-bg-subtle: var(--roc-surface-3); }