/* ========================================================================== Auburn High School — Global Styles (Futuristic / Glass / Blue Theme) - Mobile-first, responsive, accessible - Prefers-reduced-motion respected - Light/Dark via [data-theme] on :root (default = dark) ========================================================================== */ /* =========================== THEME TOKENS =============================== */ :root{ /* Colors (Dark default) */ --bg:#0b0e13; --bg-2:#0c111a; --panel:#11151b; --panel-2:#0e1217; --border:rgba(255,255,255,.08); --text:#eaf1ff; --muted:#9bb0cc; --blue:#0d6efd; --blue-2:#52a8ff; --blue-3:#2b8cff; --red:#e63946; --red-2:#ff6b6b; --purple:#6a4c93; --purple-2:#9d4edd; --yellow:#ffd60a; --yellow-2:#ffea3d; --success:#2ecc71; --warn:#f1c40f; --danger:#ff4d4d; --focus:#8ac4ff; /* Effects */ --shadow-1: 0 6px 18px rgba(0,0,0,.35); --shadow-2: 0 16px 40px rgba(0,0,0,.45); --inner-1: inset 0 1px 0 rgba(255,255,255,.06); /* Radii / spacing */ --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-2xl:32px; --space-1:6px; --space-2:10px; --space-3:14px; --space-4:18px; --space-5:24px; --space-6:30px; /* Transitions */ --t-fast:150ms cubic-bezier(.2,.8,.2,1); --t-base:240ms cubic-bezier(.2,.8,.2,1); --t-slow:420ms cubic-bezier(.2,.8,.2,1); } /* Clean light theme (enabled via or :root[data-theme="light"]) */ :root[data-theme="light"]{ --bg:#f5f7fb; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f0f3f8; --text:#0b1220; --muted:#4b5a70; --border:rgba(0,0,0,.08); --blue:#0d6efd; --blue-2:#2b8cff; --blue-3:#2b8cff; --shadow-1: 0 6px 18px rgba(0,0,0,.08); --shadow-2: 0 20px 60px rgba(0,0,0,.12); --inner-1: inset 0 1px 0 rgba(255,255,255,.6); } /* Respect system light preference only if you don't force dark via data-theme */ @media (prefers-color-scheme: light) { :root { color-scheme: light; --bg:#f5f7fb; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f0f3f8; --text:#0b1220; --muted:#4b5a70; --border:rgba(0,0,0,.08); --blue:#0d6efd; --blue-2:#2b8cff; --blue-3:#2b8cff; --shadow-1: 0 6px 18px rgba(0,0,0,.08); --shadow-2: 0 20px 60px rgba(0,0,0,.12); --inner-1: inset 0 1px 0 rgba(255,255,255,.6); } } /* Lock form controls for dark defaults unless overridden */ :root { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* ============================ RESET / BASE ============================== */ /* DO NOT put tags inside CSS */ *,*::before,*::after{ box-sizing:border-box; } html{ line-height:1.4; -webkit-text-size-adjust:100%; } html,body{ height:100%; } body{ margin:0; font-family: ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; color:var(--text); background: radial-gradient(1200px 700px at 50% -15%, rgba(82,168,255,0.16), transparent 60%), linear-gradient(180deg,#070a0f,#0b0e13 30%,#06090d); min-height:100vh; } :root[data-theme="light"] body{ background: radial-gradient(1200px 700px at 50% -15%, rgba(82,168,255,0.18), transparent 60%), linear-gradient(180deg,#eef3fb,#f6f8fc 30%,#ffffff); } img,video{ max-width:100%; height:auto; display:block; } svg{ display:block; } button,input,select,textarea{ font:inherit; color:inherit; } a{ color:inherit; text-decoration:none; } :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:8px; } #starfield{ position:fixed; inset:0; z-index:-1; pointer-events:none; display:block; width:100%; height:100%; } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; scroll-behavior:auto !important; } } /* ============================ LAYOUT UTILS ============================== */ .container{ width:100%; max-width:1100px; margin-inline:auto; padding-inline:18px; } .grid{ display:grid; gap:16px; } .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } @media (max-width:960px){ .grid-4{ grid-template-columns:repeat(3,1fr); } } @media (max-width:780px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } } .flex{ display:flex; gap:12px; align-items:center; } .center{ display:grid; place-items:center; } .hidden{ display:none !important; } .small{ font-size:12px; color:var(--muted); } /* ============================== HEADER ================================== */ .header{ position:sticky; top:0; z-index:100; background:linear-gradient(180deg, rgba(17,21,27,.92), rgba(17,21,27,.70)); border-bottom:1px solid var(--border); backdrop-filter:blur(8px); } :root[data-theme="light"] .header{ background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80)); border-bottom:1px solid var(--border); } .nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; gap:12px; max-width:1100px; margin:0 auto; } .brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; color:var(--text); } .brand .logo{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),var(--blue-2)); color:#fff; font-weight:900; box-shadow:0 8px 24px rgba(13,110,253,.35); position:relative; overflow:hidden; } .brand .logo::after{ content:""; position:absolute; inset:-40% -20% auto auto; width:60px; height:60px; background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); opacity:.55; transform:translate(18px,-18px); } .links a{ color:var(--muted); margin-left:16px; font-weight:600; transition:color var(--t-fast); } .links a:hover{ color:var(--text); } /* Mobile nav */ .menu-btn{ display:none; } @media (max-width:820px){ .links{ display:none; } .menu-btn{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:var(--panel); box-shadow:var(--inner-1); transition:transform var(--t-fast); } .menu-btn:active{ transform:scale(.98); } .mobile-menu{ position:fixed; inset:64px 10px auto 10px; z-index:90; background: var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); backdrop-filter:blur(10px); box-shadow:var(--shadow-2); padding:12px; } .mobile-menu a{ display:block; padding:12px 10px; border-radius:10px; color:var(--text); } .mobile-menu a:hover{ background:rgba(255,255,255,.06); } } /* Active nav underline */ .nav a.active{ color:#fff; position:relative; } .nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:linear-gradient(90deg,var(--blue),var(--blue-2)); border-radius:2px; } :root[data-theme="light"] .nav a.active{ color:var(--text); } /* =============================== HERO =================================== */ .hero{ min-height:calc(100vh - 70px); display:grid; place-items:center; text-align:center; padding:40px 18px; position:relative; overflow:hidden; } .hero::before{ content:""; position:absolute; inset:8% 6% auto 6%; height:180px; border-radius:999px; filter:blur(40px); background:radial-gradient(circle, rgba(82,168,255,.22), rgba(82,168,255,0) 65%); opacity:.8; pointer-events:none; } .hero::after{ content:""; position:absolute; inset:auto 0 10% 0; height:140px; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%); filter:blur(30px); opacity:.6; pointer-events:none; } .card{ display:inline-block; padding:28px 30px; border-radius:var(--r-xl); border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); backdrop-filter:blur(10px); box-shadow:var(--shadow-2), var(--inner-1); transition:transform var(--t-base), opacity var(--t-base); } .card:hover{ transform:translateY(-3px); } h1{ margin:0 0 10px; font-size:clamp(34px,4.2vw,48px); line-height:1.06; background:linear-gradient(90deg,var(--blue-2),#fff); -webkit-background-clip:text; background-clip:text; color:transparent; } #homeTitle.lux-title{ font-size:clamp(36px,4.6vw,54px); letter-spacing:.6px; } .brand-kicker{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(12,16,32,.55); color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:2px; } .brand-kicker .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue-2); box-shadow:0 0 12px var(--blue-2); } .hero-tagline{ font-size:16px; color:var(--muted); margin:14px auto 18px; max-width:520px; } .hero-highlights{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:18px 0 14px; } .hero-pill{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:rgba(20,24,40,.65); text-align:left; box-shadow:var(--inner-1); } .hero-pill span{ font-weight:700; } .hero-pill .icon{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,.14); } .hero-orbits{ position:absolute; inset:auto 0 -20px 0; height:120px; pointer-events:none; display:flex; justify-content:center; gap:14px; opacity:.7; } .hero-orbits span{ display:inline-block; width:120px; height:120px; border-radius:50%; border:1px solid rgba(255,255,255,.08); transform:scale(.7); animation:orbit-float 10s ease-in-out infinite; } .hero-orbits span:nth-child(2){ width:160px; height:160px; animation-delay:1.4s; opacity:.55; } .hero-orbits span:nth-child(3){ width:210px; height:210px; animation-delay:2.2s; opacity:.4; } .rocket-mark{ position:absolute; top:-18px; right:-18px; width:86px; height:86px; border-radius:22px; border:1px solid rgba(255,255,255,.16); background:linear-gradient(140deg, rgba(13,110,253,.4), rgba(13,110,253,0)); display:grid; place-items:center; font-size:30px; box-shadow:var(--shadow-1); animation:float 8s ease-in-out infinite; } #date{ opacity:.9; font-size:16px; margin:6px 0 2px; } #time{ opacity:.95; font-size:28px; font-weight:800; margin:0 0 18px; letter-spacing:.3px; } /* Countdown */ .countdown{ display:flex; gap:10px; justify-content:center; margin-top:10px; flex-wrap:wrap; } .box{ min-width:92px; padding:12px 10px; border-radius:14px; background:var(--panel); border:1px solid var(--border); } .box .num{ font-size:26px; font-weight:800; } .box .lbl{ font-size:12px; color:var(--muted); margin-top:2px; } .countdown .box{ background:rgba(15,19,35,.75); box-shadow:var(--inner-1); } /* ============================== BUTTONS ================================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 14px; border-radius:12px; border:1px solid var(--border); background:var(--panel); color:var(--text); font-weight:700; transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast); box-shadow:var(--inner-1); } .btn:hover{ background:var(--panel-2); } .btn:active{ transform:translateY(1px); } .btn.primary{ background:linear-gradient(135deg,var(--blue),var(--blue-2)); border-color:transparent; color:#fff; box-shadow:0 10px 30px rgba(13,110,253,.35); } .btn.primary:hover{ filter:brightness(1.05); } /* =============================== BADGES ================================= */ .badge{ display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 10px; border-radius:999px; border:1px solid var(--border); background:var(--panel); color:var(--muted); font-size:12px; font-weight:700; } .badge.blue{ color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-2)); border-color:transparent; } .badge.red{ color:#fff; background:linear-gradient(135deg,var(--red),var(--red-2)); border-color:transparent; } .badge.purple{ color:#fff; background:linear-gradient(135deg,var(--purple),var(--purple-2)); border-color:transparent; } .badge.yellow{ color:#000; background:linear-gradient(135deg,var(--yellow),var(--yellow-2)); border-color:transparent; } .badge.success{ background:rgba(46,204,113,.12); color:var(--success); } .badge.warn{ background:rgba(241,196,15,.12); color:var(--warn); } .badge.danger{ background:rgba(255,77,77,.12); color:var(--danger); } .badge.live{ color:#fff; background:linear-gradient(135deg,#ff3b3b,#ff7a7a); border-color:transparent; box-shadow:0 0 0 0 rgba(255,59,59,.5); animation:pulse 1.6s ease-out infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,59,59,.45); } 80%{ box-shadow:0 0 0 14px rgba(255,59,59,0); } 100%{ box-shadow:0 0 0 0 rgba(255,59,59,0); } } /* =============================== CARDS ================================== */ .panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-1), var(--inner-1); padding:16px; } .panel.glass{ background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); backdrop-filter:blur(10px); } .card-list{ display:grid; gap:14px; } .card-item{ display:grid; gap:10px; padding:14px; border-radius:16px; border:1px solid var(--border); background:var(--panel); } .card-item:hover{ outline:1px solid rgba(255,255,255,.12); } .card-item .title{ font-weight:800; letter-spacing:.2px; } .card-item .meta{ color:var(--muted); font-size:14px; } .card-item .row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:space-between; } /* Product polish */ .product{ transition:transform var(--t-base), box-shadow var(--t-base); } .product:hover{ transform:translateY(-4px); box-shadow:0 18px 50px rgba(0,0,0,.35); } .product .media-item{ position:relative; overflow:hidden; } .product .media-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,0.08), rgba(255,255,255,0)); transform:translateX(-120%); transition:transform 900ms cubic-bezier(.2,.8,.2,1); pointer-events:none; } .product:hover .media-item::after{ transform:translateX(120%); } /* ============================== TABLES ================================== */ .table-wrapper{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .table{ width:100%; border-collapse:collapse; border-spacing:0; font-size:14px; border:1px solid var(--border); border-radius:14px; overflow:hidden; min-width:400px; } .table th,.table td{ padding:12px 10px; text-align:left; border-bottom:1px solid var(--border); } .table th{ background:var(--panel-2); color:var(--muted); font-weight:800; } .table tr:hover td{ background:rgba(255,255,255,.03); } @media (max-width:560px){ .table th,.table td{ white-space:nowrap; } } :root[data-theme="light"] .table th{ background:var(--panel-2); color:var(--muted); } :root[data-theme="light"] .table tr:hover td{ background:rgba(0,0,0,.03); } /* =============================== FORMS ================================== */ .form{ display:grid; gap:12px; } .input,.select,.textarea{ width:100%; border-radius:12px; border:1px solid var(--border); background:var(--panel); color:var(--text); padding:12px 12px; box-shadow:var(--inner-1); } .textarea{ min-height:120px; resize:vertical; } .label{ font-size:13px; color:var(--muted); } .help{ font-size:12px; color:var(--muted); } .inline{ display:flex; gap:10px; flex-wrap:wrap; } @media (max-width:560px){ .inline{ flex-direction:column; } } /* ============================== MEDIA GRID ============================== */ .media-grid{ display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); } .media-item{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:#000; } .media-item img,.media-item video{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; transform:scale(1.001); transition:transform var(--t-slow); } .media-item:hover img,.media-item:hover video{ transform:scale(1.03); } .media-caption{ position:absolute; inset:auto 0 0 0; padding:10px; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.7)); color:#fff; font-size:12px; } @media (max-width:880px){ .media-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .media-grid{ grid-template-columns:1fr; } } /* =============================== TOASTS ================================= */ .toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:200; padding:12px 14px; border-radius:12px; color:#fff; font-weight:700; font-size:14px; box-shadow:var(--shadow-2); } .toast.info{ background:linear-gradient(135deg,var(--blue),var(--blue-2)); } .toast.success{ background:linear-gradient(135deg,#1dbf73,#2ecc71); } .toast.warn{ background:linear-gradient(135deg,#ffb020,#f1c40f); color:#0b0e13; } .toast.error{ background:linear-gradient(135deg,#ff4d4d,#ff6b6b); } @media (max-width:560px){ .toast{ font-size:15px; } } /* =============================== SECTIONS =============================== */ .section{ padding:28px 0; } .section .section-title{ font-weight:900; letter-spacing:.3px; margin-bottom:12px; } .section .section-sub{ color:var(--muted); margin-top:-4px; margin-bottom:12px; } .section .section-kicker{ text-transform:uppercase; letter-spacing:2px; font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:8px; margin-bottom:10px; } .section .section-kicker::before{ content:""; width:18px; height:2px; background:linear-gradient(90deg,var(--blue-2),transparent); } .lux-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .lux-card{ padding:18px; border-radius:18px; border:1px solid var(--border); background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow:var(--shadow-1); position:relative; overflow:hidden; } .lux-card::after{ content:""; position:absolute; inset:auto -30% -40% auto; width:120px; height:120px; background:radial-gradient(circle, rgba(82,168,255,.28), rgba(82,168,255,0) 60%); opacity:.7; } .lux-card .lux-icon{ width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:rgba(12,16,32,.6); border:1px solid rgba(255,255,255,.12); margin-bottom:10px; font-size:20px; } .lux-card .lux-title{ font-weight:800; margin:6px 0; } .lux-card .lux-text{ color:var(--muted); font-size:14px; } .stat-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); } .stat-card{ border-radius:16px; border:1px solid var(--border); padding:14px; background:rgba(14,18,30,.72); text-align:left; } .stat-card .stat-value{ font-size:22px; font-weight:900; } .stat-card .stat-label{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:1.5px; } .accent-divider{ height:1px; background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(82,168,255,.45), rgba(255,255,255,.08)); margin:18px 0; } .rocket-trail{ position:relative; display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(12,16,32,.55); } .rocket-trail::after{ content:""; position:absolute; right:-34px; width:28px; height:2px; background:linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,0)); opacity:.7; } @keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } } @keyframes orbit-float{ 0%,100%{ transform:translateY(0) scale(.72); } 50%{ transform:translateY(-6px) scale(.78); } } /* ================================ FOOTER ================================ */ .footer{ text-align:center; color:var(--muted); font-size:12px; padding:28px 0 40px; border-top:1px solid var(--border); margin-top:40px; } /* ============================== CALENDAR ================================ */ .calendar{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; } .cal-cell{ padding:10px; border:1px solid var(--border); border-radius:12px; min-height:80px; background:var(--panel); } .cal-cell .day{ font-weight:800; color:var(--muted); font-size:12px; } .cal-cell.today{ border-color:var(--blue-2); box-shadow:0 0 0 2px rgba(82,168,255,.25) inset; } .cal-cell .dot{ width:8px; height:8px; border-radius:50%; background:var(--blue-2); box-shadow:0 0 12px var(--blue-2); } /* ========================= MICRO ANIMATIONS ============================= */ .hover-up{ transition:transform var(--t-base), opacity var(--t-base); } .hover-up:hover{ transform:translateY(-3px); } .glow{ box-shadow:0 0 0 0 rgba(13,110,253,.45); animation:glow 1.8s ease-out infinite; } @keyframes glow{ 0%{ box-shadow:0 0 0 0 rgba(13,110,253,.35); } 80%{ box-shadow:0 0 0 14px rgba(13,110,253,0); } 100%{ box-shadow:0 0 0 0 rgba(13,110,253,0); } }