/* ============================================================ SoloMoto — tema "RACING DARK". Reinvenzione grafica ispirata al motociclismo moderno (MotoGP, Ducati, KTM: interfacce total black): asfalto e carbonio come superfici, arancio racing come accento, titoli condensati in corsivo (velocita'), tagli diagonali e bandiera a scacchi. SOLO stile: nessuna modifica a funzionalita' o struttura. Si appoggia al dark mode nativo di Bootstrap 5.3 (data-bs-theme="dark" impostato su in base.html). ============================================================ */ :root { --sm-asphalt: #0e1014; /* fondo pagina: asfalto notturno */ --sm-surface: #161920; /* superfici (card, form) */ --sm-surface-2: #1e222b; /* superfici in rilievo */ --sm-line: rgba(255,255,255,.08); --sm-text: #e8eaf0; --sm-text-dim: #9aa3b2; --sm-accent: #ff5a1f; /* arancio racing */ --sm-accent-dark: #d94510; --sm-gold: #f0be5a; /* oro: riservato agli 'Esperti' */ --sm-radius: .9rem; } /* ---------- Base: asfalto + trama carbonio ---------- */ body { font-family: "Titillium Web", "Segoe UI", system-ui, sans-serif; color: var(--sm-text); background: radial-gradient(ellipse 80% 50% at 70% -10%, rgba(255,90,31,.08), transparent 60%), repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px), var(--sm-asphalt) !important; } /* Titoli: Barlow Condensed = numeri di gara / livree */ h1, h2, h3, h4, h5, h6 { font-family: "Barlow Condensed", "Titillium Web", system-ui, sans-serif; font-weight: 700; letter-spacing: .01em; } h1 { font-weight: 800; font-style: italic; /* inclinazione = velocita' */ text-transform: uppercase; } /* slash arancione sotto gli h1 delle pagine (non negli hero, gia' decorati) */ h1::after { content: ""; display: block; width: 72px; height: 5px; margin-top: .4rem; background: linear-gradient(90deg, var(--sm-accent), var(--sm-accent-dark)); transform: skewX(-20deg); border-radius: 1px; } .hero h1::after, .rt-evento-hero h1::after { display: none; } a { text-decoration: none; } a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.card) { color: #ff8a5c; } a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.card):hover { color: var(--sm-accent); } /* ---------- Navbar: muretto box con linea racing ---------- */ .sm-navbar { background: linear-gradient(180deg, #0a0c10, #12151b); border-bottom: 3px solid var(--sm-accent); box-shadow: 0 6px 24px rgba(0,0,0,.45); } .sm-navbar .navbar-brand { color: var(--sm-accent) !important; font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-style: italic; font-size: 1.5rem; letter-spacing: .04em; text-transform: uppercase; } .sm-navbar .nav-link { color: #cfd3db; font-weight: 600; text-transform: uppercase; font-size: .86rem; letter-spacing: .06em; position: relative; transition: color .15s ease; } .sm-navbar .nav-link:hover, .sm-navbar .nav-link:focus { color: #fff; } .sm-navbar .navbar-nav .nav-link::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .1rem; height: 2px; background: var(--sm-accent); transform: scaleX(0) skewX(-20deg); transform-origin: left; transition: transform .2s ease; } .sm-navbar .navbar-nav .nav-link:hover::after { transform: scaleX(1) skewX(-20deg); } /* ---------- Hero: rettilineo notturno con taglio diagonale ---------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(115deg, #0a0c10 0%, #1a1e26 55%, #3a1d10 100%); color: #fff; border-radius: var(--sm-radius); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%); filter: drop-shadow(0 14px 30px rgba(0,0,0,.45)); } .hero::before { /* scie di sorpasso */ content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 115deg, transparent 0 150px, rgba(255,90,31,.12) 150px 156px, transparent 156px 240px, rgba(255,255,255,.05) 240px 244px ); pointer-events: none; } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); } .hero .lead { color: #c9cdd6; max-width: 60ch; } /* ---------- Card: pit-box in carbonio ---------- */ .card { background: linear-gradient(180deg, var(--sm-surface-2), var(--sm-surface)); border: 1px solid var(--sm-line); border-radius: var(--sm-radius); box-shadow: 0 3px 14px rgba(0,0,0,.35); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } a.card:hover, .card:hover { transform: translateY(-3px); border-color: rgba(255,90,31,.45); box-shadow: 0 12px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(255,90,31,.15); } .card .card-footer { background: transparent !important; border-top: 1px solid var(--sm-line); } /* ---------- Liste: cordolo che si accende ---------- */ .list-group-item { background: var(--sm-surface); border-color: var(--sm-line); border-left: 4px solid transparent; transition: border-color .15s ease, background .15s ease; } .list-group-item-action:hover { border-left-color: var(--sm-accent); background: var(--sm-surface-2); } /* ---------- Bottoni: livrea con angoli smussati ---------- */ .btn { font-weight: 600; border-radius: .55rem; } .btn-primary, .btn-warning { background: linear-gradient(135deg, var(--sm-accent), var(--sm-accent-dark)); border: none; color: #fff; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); } .btn-primary:hover, .btn-primary:focus, .btn-warning:hover, .btn-warning:focus { background: linear-gradient(135deg, #ff7a3c, var(--sm-accent)); color: #fff; } .btn-outline-danger, .btn-outline-primary { --bs-btn-color: #ff8a5c; --bs-btn-border-color: var(--sm-accent); --bs-btn-hover-bg: var(--sm-accent); --bs-btn-hover-border-color: var(--sm-accent); --bs-btn-hover-color: #fff; } /* 'outline-dark' e 'dark' sarebbero invisibili sul fondo scuro: li adattiamo */ .btn-outline-dark { --bs-btn-color: var(--sm-text); --bs-btn-border-color: rgba(255,255,255,.35); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #0e1014; --bs-btn-hover-border-color: #fff; } .btn-dark { --bs-btn-bg: var(--sm-surface-2); --bs-btn-border-color: rgba(255,255,255,.25); --bs-btn-hover-bg: #2a2f3a; --bs-btn-hover-border-color: rgba(255,255,255,.4); } /* ---------- Badge: targhette da paddock ---------- */ .badge { font-family: "Barlow Condensed", sans-serif; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .badge-livello { background: var(--sm-accent); } /* ---------- Neutralizzazione utility 'chiare' nei template ---------- */ /* (cosi' i template restano intatti e il tema resta centralizzato qui) */ .bg-white { background-color: var(--sm-surface) !important; } .bg-light { background-color: var(--sm-surface-2) !important; } .text-dark { color: var(--sm-text) !important; } /* ...ma sui badge colorati (bg-info/bg-warning) il testo scuro deve restare scuro */ .badge.text-dark { color: #15171d !important; } .text-muted { color: var(--sm-text-dim) !important; } .shadow-sm { box-shadow: 0 3px 14px rgba(0,0,0,.35) !important; } .text-danger, .bi.text-danger { color: var(--sm-accent) !important; } /* ---------- Mappa del percorso: dimensione contenuta ---------- */ /* Senza limite l'iframe 16:9 occupa tutta la larghezza (e quindi quasi tutto lo schermo). La contenuiamo e la incorniciamo in tema. */ .mappa-percorso { max-width: 640px; border: 1px solid var(--sm-line); border-radius: var(--sm-radius); overflow: hidden; } /* ---------- Form: focus in tinta ---------- */ .form-control, .form-select { background-color: #12151b; border-color: var(--sm-line); } .form-control:focus, .form-select:focus, textarea:focus { background-color: #12151b; border-color: rgba(255,90,31,.55); box-shadow: 0 0 0 .25rem rgba(255,90,31,.15); } /* ---------- Footer: traguardo ---------- */ .sm-footer { background: linear-gradient(180deg, #12151b, #0a0c10); border-top: 3px solid var(--sm-accent); position: relative; } .sm-footer::before { /* bandiera a scacchi sopra il bordo */ content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 10px; background: repeating-conic-gradient(#fff 0% 25%, transparent 0% 50%); background-size: 20px 20px; opacity: .12; pointer-events: none; } /* ---------- Scrollbar in tema (WebKit) ---------- */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--sm-asphalt); } ::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--sm-accent-dark); } /* ============================================================ Eventi SPECIALI dei road trip: veste 'premium' (scuro + oro), giri importanti riservati agli Esperti. ============================================================ */ .rt-eventi { background: linear-gradient(135deg, #14161c 0%, #23262f 60%, #2b2118 100%); border: 1px solid rgba(240, 190, 90, .35); border-radius: var(--sm-radius); box-shadow: 0 8px 30px rgba(0,0,0,.25); } .rt-eventi-sub { color: #b9bec9; } .rt-evento-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); transition: transform .15s ease, border-color .15s ease, background .15s ease; } .rt-evento-card:hover { transform: translateY(-2px); border-color: rgba(240,190,90,.6); background: rgba(255,255,255,.07); } .rt-badge-esperti { background: linear-gradient(135deg, var(--sm-gold), #d9922b); color: #1c1f26; } /* Hero delle pagine evento (form + dettaglio) */ .rt-evento-hero { background: linear-gradient(135deg, #14161c 0%, #23262f 55%, #2b2118 100%); border: 1px solid rgba(240,190,90,.35); color: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.30); } .rt-hero-sub { color: #b9bec9; } .rt-hero-title { font-weight: 700; letter-spacing: .2px; } /* Piastrelle dati nella pagina dettaglio evento */ .rt-stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: .6rem; padding: .75rem 1rem; height: 100%; } .rt-stat .rt-stat-label { color: #9aa0ab; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; } .rt-stat .rt-stat-value { color: #fff; font-weight: 600; font-size: 1.05rem; } .rt-gold { color: var(--sm-gold) !important; } .rt-hr { border-color: rgba(255,255,255,.12); }