/* CORA, the look of F2 (2026-09-23): a dark glass interface with a slow living background, on every page. Bootstrap 5.3 does the heavy lifting through data-bs-theme on , set by head.jspf before the first paint from the person's choice (dark by default); this file adds the glass, the accent and the motion. Only transform and opacity are animated, so the office PCs stay at 60 fps, and prefers-reduced-motion (or the "Animazioni ridotte" switch) stops all of it. */ :root { --cora-red: #e5202e; --cora-amber: #f7a81b; --cora-cyan: #45d4ff; --cora-ok: #2fd08a; --cora-bad: #ff5468; --cora-accent: linear-gradient(135deg, #e5202e 0%, #f7a81b 100%); --cora-radius: 18px; } [data-bs-theme="dark"] { --cora-bg-0: #05070d; --cora-glass: rgba(20, 27, 45, .58); --cora-glass-strong: rgba(24, 32, 54, .82); --cora-line: rgba(148, 170, 220, .14); --cora-line-strong: rgba(148, 170, 220, .28); --cora-muted: #93a0bd; --cora-shadow: 0 20px 60px -20px rgba(0, 0, 0, .7); --bs-body-bg: #05070d; --bs-body-color: #e8ecf6; --bs-border-color: rgba(148, 170, 220, .18); --bs-secondary-color: #93a0bd; } [data-bs-theme="light"] { --cora-bg-0: #eef1f7; --cora-glass: rgba(255, 255, 255, .66); --cora-glass-strong: rgba(255, 255, 255, .9); --cora-line: rgba(30, 45, 80, .10); --cora-line-strong: rgba(30, 45, 80, .22); --cora-muted: #5b6478; --cora-shadow: 0 20px 50px -24px rgba(30, 45, 80, .35); --bs-body-bg: #eef1f7; } body { background: var(--cora-bg-0); font-family: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", sans-serif; } h1, h2, h3, .cora-page-title, .navbar-brand { font-family: "Space Grotesk Variable", "Space Grotesk", Inter, system-ui, sans-serif; } /* ───────── living background: two blurred blobs drifting slowly and a faint grid ───────── */ .cora-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .cora-bg::before, .cora-bg::after { content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .26; will-change: transform; } .cora-bg::before { background: radial-gradient(circle, #e5202e, transparent 60%); top: -25vmax; left: -15vmax; animation: cora-drift1 38s ease-in-out infinite alternate; } .cora-bg::after { background: radial-gradient(circle, #1f5fff, transparent 60%); bottom: -30vmax; right: -20vmax; animation: cora-drift2 44s ease-in-out infinite alternate; } .cora-bg .cora-grid { position: absolute; inset: -50%; background-image: linear-gradient(var(--cora-line) 1px, transparent 1px), linear-gradient(90deg, var(--cora-line) 1px, transparent 1px); background-size: 56px 56px; opacity: .35; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%); animation: cora-gridmove 60s linear infinite; } [data-bs-theme="light"] .cora-bg::before, [data-bs-theme="light"] .cora-bg::after { opacity: .12; } @keyframes cora-drift1 { to { transform: translate(18vmax, 12vmax) scale(1.15); } } @keyframes cora-drift2 { to { transform: translate(-16vmax, -10vmax) scale(1.1); } } @keyframes cora-gridmove { to { transform: translate(56px, 56px); } } /* ───────── the experimental badge: striped, with a sheen passing ───────── */ .cora-experimental { position: relative; overflow: hidden; text-align: center; padding: 6px 12px; font: 600 11.5px/1.2 "Space Grotesk Variable", "Space Grotesk", Inter, sans-serif; letter-spacing: .14em; color: #1b1300; background: repeating-linear-gradient(135deg, #f7a81b 0 14px, #ffc24d 14px 28px); display: flex; gap: 8px; align-items: center; justify-content: center; } .cora-experimental::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: cora-sheen 5.5s ease-in-out infinite; } @keyframes cora-sheen { 60%, 100% { transform: translateX(100%); } } /* ───────── navbar and surfaces as glass ───────── */ .cora-navbar.navbar { background: var(--cora-glass) !important; border-bottom: 1px solid var(--cora-line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } [data-bs-theme="light"] .cora-navbar.navbar { --bs-navbar-color: #1f2937; --bs-navbar-hover-color: #000; --bs-navbar-brand-color: #111; --bs-navbar-active-color: #000; } .cora-navbar .navbar-brand span { font-weight: 700; letter-spacing: .06em; background: var(--cora-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .card, .modal-content, .dropdown-menu, .list-group-item, .toast { --bs-card-bg: var(--cora-glass-strong); --bs-modal-bg: var(--cora-glass-strong); --bs-dropdown-bg: var(--cora-glass-strong); } .card, .modal-content { border: 1px solid var(--cora-line); border-radius: var(--cora-radius); box-shadow: var(--cora-shadow); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); } .table { --bs-table-bg: transparent; } .btn-primary { --bs-btn-bg: #d9302a; --bs-btn-border-color: #d9302a; --bs-btn-hover-bg: #c0241f; --bs-btn-hover-border-color: #c0241f; --bs-btn-active-bg: #a91d19; } .cora-theme-btn { border: 1px solid var(--cora-line); background: transparent; color: inherit; border-radius: 12px; padding: 6px 10px; } .cora-theme-btn:hover { border-color: var(--cora-line-strong); } /* ───────── motion off ───────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } :root.cora-reduced *, :root.cora-reduced *::before, :root.cora-reduced *::after { animation: none !important; transition: none !important; } /* F3: Cosa so di te */ .cora-mem-card { transition: transform .2s ease, border-color .2s ease; } .cora-mem-card:hover { transform: translateY(-1px); } .cora-mem-trial { border-style: dashed; opacity: .85; }