/* ===================================================== PromptlyLiz — TECHY THEME (Dark/Blue) Global stylesheet for nav, hero, library, FX, responsive ===================================================== */ :root { --bg:#0a0f1a; --card:#0f1625; --soft:#0c1423; --ink:#e5e7eb; --muted:#94a3b8; --border:#0b2a55; --radius:22px; --shadow:0 10px 30px rgba(2,6,23,.45); /* CTA + accent blues */ --cta:#3b82f6; --cta-shadow:#1e40af; --cta-grad-start:#2563eb; /* bright edge */ --cta-grad-end:#1e40af; /* darker base */ /* Techy FX palette */ --chip-bg:rgba(30,58,138,.25); --chip-ink:#e2e8f0; --fx-blue:#60a5fa; --fx-blue-soft:#3b82f6; --fx-grid-stroke:rgba(96,165,250,.35); --fx-trace-grad-1:#93c5fd; --fx-trace-grad-2:#3b82f6; } /* ---------- Base ---------- */ *{ box-sizing:border-box } html,body{ height:100%; margin:0; overflow-x:hidden } body{ font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; background:var(--bg); color:var(--ink); } .container{ max-width:1120px; margin:0 auto; padding:20px 20px 64px; position:relative; z-index:2 } /* ===================================================== NAV - Desktop: single line (links left, actions right) - Mobile: wraps cleanly into two lines (no overflow) ===================================================== */ header{ position:sticky; top:0; z-index:10; backdrop-filter:saturate(120%) blur(6px) } .nav{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:nowrap; padding:10px 12px; border-radius:0; background:rgba(10,15,26,.8); border:1px solid var(--border); box-shadow:var(--shadow) } .nav > nav{ display:flex; align-items:center; gap:8px; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none } .nav > nav::-webkit-scrollbar{ display:none } .nav a{ color:var(--ink); font-weight:700; text-decoration:none; padding:6px 10px; border-radius:8px } .nav a:hover{ color:var(--cta); background:rgba(59,130,246,.15) } .nav a.active{ color:var(--cta) } .nav-actions{ display:flex; align-items:center; gap:10px; margin-left:auto } .sub-btn,.login-btn,.logout-btn{ background:var(--cta); color:#fff; border:1px solid var(--cta-shadow); box-shadow:0 3px 0 var(--cta-shadow); border-radius:10px; cursor:pointer } .sub-btn{ padding:8px 12px; font-weight:700 } .login-btn,.logout-btn{ padding:6px 12px; font-weight:700; display:none } #plan-badge,.user-email{ display:none; padding:4px 10px; border-radius:999px; background:var(--chip-bg); color:var(--chip-ink); border:1px solid var(--border); font-size:11px; font-weight:600; white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis } /* ===================================================== HERO (two approaches) 1) Existing .hero/.hero-art (kept) 2) Reusable hero-figure + page-level overrides (recommended) ===================================================== */ /* 1) Your current hero grid */ .hero{ display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:24px; align-items:start; margin-top:28px } .hero-left h1{ font-size:clamp(32px,6vw,48px); margin:0 0 12px } .hero-left p,.hero-left li{ color:var(--muted) } .hero-art{ display:flex; align-items:center; justify-content:center; padding:16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow) } /* FIX: scale images properly */ .hero-art img{ max-width:100%; height:auto; border-radius:var(--radius); display:block } /* 2) New reusable hero-figure (use with , etc.) */ .hero-figure{ --img-w:260px; /* mobile width */ --img-w-lg:360px; /* desktop width */ --img-pad:12px; --img-radius:22px; --img-rotate:0deg; --img-shadow:0 12px 32px rgba(0,0,0,.3); --img-bg:none; /* color | gradient | url(...) */ display:inline-block; padding:var(--img-pad); border-radius:var(--img-radius); background:var(--img-bg); box-shadow:var(--img-shadow) } .hero-img{ width:var(--img-w); height:auto; display:block; transform:rotate(var(--img-rotate)); border-radius:calc(var(--img-radius) - 6px) } @media (min-width:900px){ .hero-img{ width:var(--img-w-lg) } } /* Page-specific overrides (set on ) */ .home-page .hero-figure{ --img-w:260px; --img-w-lg:360px; --img-bg:linear-gradient(135deg, rgba(59,130,246,.18), rgba(14,165,233,.12)); --img-rotate:0deg; } .practice-page .hero-figure{ --img-w:280px; --img-w-lg:400px; --img-bg:linear-gradient(135deg, rgba(59,130,246,.22), rgba(14,165,163,.16)); --img-rotate:0deg; } .library-page .hero-figure{ --img-w:240px; --img-w-lg:330px; --img-bg:radial-gradient(120% 120% at 20% 10%, #1a2b4a 0%, #0f1a2e 60%, transparent 100%); --img-rotate:-2deg; } .play-page .hero-figure{ --img-w:220px; --img-w-lg:300px; --img-bg:url("/img/pattern-grid.svg") center/cover no-repeat; --img-rotate:2deg; } .resources-page .hero-figure { --img-w:250px; --img-w-lg:340px; --img-bg:none; /* removed blue background */ --img-rotate:0deg; } /* ===================================================== Controls (Library) ===================================================== */ #controls{ display:grid; grid-template-columns:1.2fr .6fr .8fr; gap:10px; margin:24px 0 } #controls input,#controls select{ width:100%; background:#0c1423; color:var(--ink); border:1px solid var(--border); border-radius:14px; padding:12px; font-size:16px; outline:none } #controls input::placeholder{ color:#64748b } /* ===================================================== Library grid/cards (rendered by library.js) ===================================================== */ .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px } .card{ background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:14px; animation:fadeUp .6s ease-out both } .card__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px } .pill{ font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.35); color:#bfdbfe } .pill.level-easy{ background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.35); color:#bbf7d0 } .pill.level-medium{ background:rgba(59,130,246,.15); border-color:rgba(59,130,246,.35); color:#bfdbfe } .pill.level-hard{ background:rgba(245,158,11,.15); border-color:rgba(245,158,11,.35); color:#fde68a } .vars{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 } .chip{ background:#0c1423; border:1px dashed var(--border); padding:2px 6px; border-radius:8px; color:#cbd5e1 } textarea.prompt{ width:100%; min-height:120px; resize:vertical; border:1px solid var(--border); background:#0c1423; color:var(--ink); border-radius:12px; padding:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace } .vars-form{ display:grid; grid-template-columns:1fr; gap:6px; margin:8px 0 } .vars-form label{ display:grid; grid-template-columns:110px 1fr; align-items:center; gap:8px; font-size:14px } .vars-form input{ border:1px solid var(--border); background:#0c1423; color:var(--ink); border-radius:10px; padding:8px } .actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px } .btn{ cursor:pointer; border:1px solid var(--border); background:#0c1423; color:#cbd5e1; border-radius:12px; padding:10px 12px } .btn.copy{ background:var(--cta); color:#fff; border-color:var(--cta-shadow); box-shadow:0 3px 0 var(--cta-shadow) } /* Level picker (tabs) */ .level-picker{ margin:18px 0; display:flex; flex-wrap:wrap; gap:10px } .level-btn{ background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.35); color:#bfdbfe; padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer } .level-btn[data-level="easy"]{ background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.35); color:#bbf7d0 } .level-btn[data-level="hard"]{ background:rgba(245,158,11,.15); border-color:rgba(245,158,11,.35); color:#fde68a } .level-btn.active{ outline:2px solid var(--cta) } /* When no filter is set, show all (default behavior) */ /* ===================================================== CTA Box (under hero image) ===================================================== */ .hero-cta-box{ background:var(--soft); border:1px solid var(--border); border-radius:18px; padding:20px; margin:20px 0; text-align:center; box-shadow:0 4px 16px rgba(0,0,0,.35) } .btn-cta{ display:inline-block; background:var(--cta); color:#0A1222; font-weight:700; padding:12px 22px; border-radius:999px; text-decoration:none; box-shadow:0 6px 16px rgba(0,0,0,.35) } .btn-cta:hover{ background:#2563eb } .cta-sub{ margin-top:10px; color:var(--muted); font-size:.95rem } /* ===================================================== Footer ===================================================== */ .footer-pill{ margin:34px auto 0; max-width:840px; background:var(--chip-bg); border:1px solid var(--border); border-radius:32px; padding:16px 22px; text-align:center; font-weight:900; box-shadow:var(--shadow); color:var(--chip-ink) } footer{ margin-top:18px; color:var(--muted); display:flex; align-items:center; justify-content:space-between } .foot-links a{ color:inherit; text-decoration:none; margin-right:14px } .foot-links a:hover{ text-decoration:underline } /* ===================================================== Background FX (hex + map + traces) ===================================================== */ @keyframes tech-drift{ from{transform:translateX(0)} to{transform:translateX(-2000px)} } .tech-bg{ pointer-events:none; position:fixed; inset:0; z-index:-1 } .tech-hex{ position:fixed; right:-40vw; top:0; width:200vw; height:120vh; opacity:.20; animation:tech-drift 120s linear infinite } .tech-map{ position:fixed; inset:0; opacity:.18 } .tech-traces{ position:fixed; inset-inline:0; bottom:0; height:55vh } /* ===================================================== Animations ===================================================== */ @keyframes fadeUp{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} } /* ===================================================== Responsive — Mobile Rescue ===================================================== */ .container{ padding:14px 14px 56px } @media (max-width:980px){ header{ backdrop-filter:none } .hero{ grid-template-columns:1fr; gap:16px; margin-top:18px } .hero-art{ order:-1; padding:12px } #controls{ grid-template-columns:1fr } } /* Let nav wrap neatly to two lines on narrow screens */ @media (max-width:640px){ .nav{ flex-wrap:wrap } .level-btn{ flex:1 1 auto } } /* Optional: widen nav spacing on large desktops */ @media (min-width:1200px){ .nav a{ padding:8px 12px } } .tech-bg { pointer-events:none; position:fixed; inset:0; z-index:-1 } .tech-hex { position:fixed; right:-40vw; top:0; width:200vw; height:120vh; opacity:.20; animation:tech-drift 120s linear infinite } @keyframes tech-drift { from{transform:translateX(0)} to{transform:translateX(-2000px)} } /* ==== Reveal / Stagger ==== */ .reveal { opacity: 0; transform: translateY(14px); } .reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; } .stagger > * { opacity: 0; transform: translateY(10px); } .stagger.in > * { opacity: 1; transform: none; } .stagger.in > * { transition: opacity .55s ease, transform .55s ease; } .stagger.in > *:nth-child(1){ transition-delay:.05s } .stagger.in > *:nth-child(2){ transition-delay:.12s } .stagger.in > *:nth-child(3){ transition-delay:.19s } .stagger.in > *:nth-child(4){ transition-delay:.26s } /* ==== Cards: hover lift + glow ==== */ .card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; will-change: transform; } .card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.12); border-color: #93c5fd; /* lighter blue */ } /* Sticker wiggle when parent card hovers */ .card:hover .sticker { animation: wiggle .7s ease; } @keyframes wiggle { 0% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-5deg) translateY(-1px); } 50% { transform: rotate(0) translateY(0); } 75% { transform: rotate(5deg) translateY(-1px); } 100% { transform: rotate(0) translateY(0); } } /* ==== Buttons: micro-press & focus ring ==== */ a.cta, button.cta, .sub-btn, .login-btn, .logout-btn { transition: transform .06s ease, filter .2s ease, box-shadow .2s ease; } a.cta:active, button.cta:active, .sub-btn:active, .login-btn:active, .logout-btn:active { transform: translateY(1px); } a.cta:focus-visible, button.cta:focus-visible, .sub-btn:focus-visible, .login-btn:focus-visible, .logout-btn:focus-visible { outline: 2px solid #0ea5a3; outline-offset: 2px; } /* ==== Header: subtle drop when sticky ==== */ header { transition: box-shadow .25s ease, background .25s ease; } header.is-stuck .nav { box-shadow: 0 8px 30px rgba(0,0,0,.12); background: rgba(255,255,255,.82); } .btn-cta { display:inline-block; background:linear-gradient(135deg, var(--cta-grad-start), var(--cta-grad-end)); color:#E6F0FF; font-weight:700; padding:12px 22px; border-radius:999px; text-decoration:none; box-shadow:0 0 12px rgba(59,130,246,0.4); transition:all .25s ease; } .btn-cta:hover { background:linear-gradient(135deg, var(--fx-blue), var(--cta-grad-end)); box-shadow:0 0 18px rgba(59,130,246,0.6); transform:translateY(-2px); } /* ===== Fix: primary CTA buttons (real class used in markup) ===== */ /* Primary: remove the crisp strip; use a soft shadow instead */ .btn.btn-primary{ background: linear-gradient(135deg, var(--cta-grad-start), var(--cta-grad-end)); color: #E6F0FF; border: 1px solid var(--cta-shadow); /* replace the solid strip with a blur */ box-shadow: 0 8px 18px rgba(0,0,0,.28), /* soft drop shadow (no hard line) */ 0 0 12px rgba(59,130,246,.35); /* blue glow */ transition: transform .12s ease, box-shadow .2s ease, background .2s ease; } /* Hover: keep it soft too */ .btn.btn-primary:hover{ background: linear-gradient(135deg, var(--cta-grad-end), var(--cta-grad-start)); transform: translateY(-2px); box-shadow: 0 12px 22px rgba(0,0,0,.32), 0 0 20px rgba(59,130,246,.55), 0 0 32px rgba(104,181,255,.25) inset; } /* Make sure anchor-buttons never underline */ a.btn.btn-primary, a.btn.btn-primary:hover, a.btn.btn-primary:focus, a.btn.btn-primary:active, a.btn.btn-primary:visited { text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1; /* avoids baseline artifacts */ } .btn.btn-primary:active{ transform: translateY(0); } /* Optional: ghost buttons for "Coming Soon" etc. */ .btn.btn-ghost{ background: transparent; color: #bfdbfe; border: 1px solid rgba(59,130,246,.35); /* all sides */ text-decoration: none; /* just in case */ } .btn.btn-ghost[disabled]{ opacity: .65; cursor: default; } .pl-btn--outline{ --ring: var(--fx-blue, #4da6ff); --ink: var(--ink, #e9f1ff); border: 2px solid rgba(255,255,255,0.85); color: var(--ink); background: linear-gradient(#ffffff14,#ffffff08); /* faint frost */ box-shadow: 0 0 0 1px #ffffff1f inset, /* inner edge */ 0 10px 28px -8px rgba(77,166,255,.35), /* outer glow */ 0 2px 0 0 rgba(255,255,255,.06) inset; /* subtle bevel */ backdrop-filter: saturate(140%) blur(2px); -webkit-backdrop-filter: saturate(140%) blur(2px); text-shadow: 0 1px 0 rgba(0,0,0,.35); } .pl-btn--outline:hover{ border-color: var(--ring); background: rgba(77,166,255,.18); box-shadow: 0 0 0 2px rgba(77,166,255,.45), 0 12px 34px -8px rgba(77,166,255,.45); color:#fff; } .pl-btn--outline:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(13,22,37,.9), 0 0 0 6px rgba(77,166,255,.55); } /* glowing primary button */ .pl-btn--primary{ background: var(--fx-blue, #4da6ff); color: #0b1220; font-weight: 600; border-radius: 14px; padding: 12px 20px; box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset, 0 12px 28px -8px rgba(77,166,255,0.55), /* outer glow */ 0 4px 10px rgba(0,0,0,0.4); /* subtle depth */ transition: all .2s ease; } .pl-btn--primary:hover{ background: #5bb7ff; box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset, 0 14px 34px -6px rgba(77,166,255,0.7), 0 4px 12px rgba(0,0,0,0.45); transform: translateY(-1px); } .pl-btn--primary:active{ transform: translateY(0); box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset, 0 8px 18px -6px rgba(77,166,255,0.5), 0 4px 8px rgba(0,0,0,0.45); } /* ===== Fix: keep sticky header dark (remove the white background) ===== */ header.is-stuck .nav{ background: rgba(10,15,26,.82); /* dark translucent */ border-color: var(--border); box-shadow: 0 8px 30px rgba(0,0,0,.30); } header.is-stuck .nav a{ color: var(--ink); } header.is-stuck .nav a.active{ color: var(--fx-blue); } /* (Optional) unify focus ring to blue */ a.cta:focus-visible, button.cta:focus-visible, .sub-btn:focus-visible, .login-btn:focus-visible, .logout-btn:focus-visible, .btn:focus-visible, .btn.btn-primary:focus-visible{ outline: 2px solid var(--fx-blue); outline-offset: 2px; } /* ===================================================== GLOBAL CARD + PANEL MOTION (Hover & Scroll Reveal) ===================================================== */ /* --- Scroll reveal + hover lift --- */ .reveal { opacity: 0; transform: translateY(14px); } .reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; } .stagger > * { opacity: 0; transform: translateY(10px); } .stagger.in > * { opacity: 1; transform: none; } .stagger.in > * { transition: opacity .55s ease, transform .55s ease; } .stagger.in > *:nth-child(1){ transition-delay:.05s } .stagger.in > *:nth-child(2){ transition-delay:.12s } .stagger.in > *:nth-child(3){ transition-delay:.19s } .stagger.in > *:nth-child(4){ transition-delay:.26s } /* Smooth transforms + hover lift (desktop) */ .card, .panel { transition: transform .18s ease, box-shadow .18s ease; will-change: transform; } @media (any-hover:hover){ .card:hover, .panel:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.28); } } /* Mobile “lift-on-enter” feeling */ @media (any-hover:none){ .card.reveal.in, .panel.reveal.in { animation: lift-on-enter 520ms ease-out both; } @keyframes lift-on-enter { 0% { transform: translateY(10px); box-shadow: var(--shadow, 0 6px 16px rgba(0,0,0,.25)); } 40% { transform: translateY(-6px); box-shadow: 0 10px 28px rgba(0,0,0,.28); } 100% { transform: translateY(0); box-shadow: var(--shadow, 0 6px 16px rgba(0,0,0,.25)); } } } /* Accessibility: respect reduced motion */ @media (prefers-reduced-motion: reduce){ .reveal, .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ===== Legacy BGFX support (Story Forge) ===== */ @keyframes drift { 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} } .bgfx{ position:fixed; inset:0; pointer-events:none; z-index:-1; } .bgfx .layer{ position:absolute; inset:0; width:100%; height:100%; } .bgfx .layer.hex{ opacity:.18; animation:drift 12s ease-in-out infinite; } .bgfx .layer.map{ opacity:.08; animation:drift 22s ease-in-out infinite; } .bgfx .layer.trace{ opacity:.12; animation:drift 16s ease-in-out infinite; } /* make sure main content is above */ .container, header, .wrap, .card { position:relative; z-index:2; } /* ===== Generic row grid helpers (used across pages) ===== */ .row{ display:grid; gap:16px; } /* default = 1 column on mobile */ .row.cols-2{ grid-template-columns: 1fr; } .row.cols-3{ grid-template-columns: 1fr; } /* tablet: 2 cols */ @media (min-width:720px){ .row.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); } .row.cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)); } } /* desktop: 3 cols when requested */ @media (min-width:960px){ .row.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); } } /* ===================================================== GLOBAL FLOAT + FADE BEHAVIOR (Applies to all key interactive elements) ===================================================== */ /* --- Fade-in on scroll / load --- */ * { transition-property: opacity, transform, box-shadow, border-color, background, color; transition-duration: .4s; transition-timing-function: ease; } .reveal, .fade-in, .hover-lift, .card, .panel, .pill, .btn, .cta { opacity: 0; transform: translateY(10px); will-change: transform, opacity; } .reveal.in, .fade-in.is-visible, .hover-lift.is-visible, .card, .panel, .pill, .btn, .cta { opacity: 1; transform: none; } /* --- Hover lift / glow (desktop only) --- */ @media (any-hover:hover) { .card:hover, .panel:hover, .pill:hover, .btn:hover, .cta:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.28); border-color: #93c5fd; /* subtle blue glow */ } } /* --- Respect reduced motion --- */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } .card, .panel, .pill, .btn, .cta { transform: none !important; opacity: 1 !important; } } /* ===================================================== FORM ELEMENTS — Dark mode selects & textareas ===================================================== */ select, textarea, input[type="text"], input[type="number"], input[type="email"] { width: 100%; background: #0c1423; color: var(--ink); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 15px; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; appearance: none; /* removes native arrow */ } /* Custom arrow for selects */ select { background-image: linear-gradient(45deg, transparent 50%, #93c5fd 50%), linear-gradient(135deg, #93c5fd 50%, transparent 50%); background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 11px) calc(50% - 3px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } /* Hover/focus effects */ select:hover, textarea:hover, input:hover { border-color: #60a5fa; } select:focus, textarea:focus, input:focus { border-color: #93c5fd; box-shadow: 0 0 6px rgba(96,165,250,.4); } /* Option dropdown colors */ option { background: #0c1423; color: var(--ink); } /* ===================================================== STORY FORGE TAB BUTTONS — bright blue glow & active state ===================================================== */ .row.cols-2 .pill { flex: 1; text-align: center; background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.35); color: #bfdbfe; font-weight: 700; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: all .25s ease; box-shadow: 0 0 6px rgba(59,130,246,.25); } .row.cols-2 .pill:hover { background: linear-gradient(135deg, #60a5fa, #2563eb); color: #e6f0ff; box-shadow: 0 0 14px rgba(59,130,246,.55); transform: translateY(-2px); } .row.cols-2 .pill.active { background: linear-gradient(135deg, #3b82f6, #1e40af); color: #fff; border-color: #60a5fa; box-shadow: 0 0 16px rgba(59,130,246,.55); } /* ===================================================== STORY FORGE TAB BUTTONS (neutral tone, subtle glow) ===================================================== */ .tab-pill { flex: 1; text-align: center; background: var(--soft); /* deep navy from your palette */ border: 1px solid var(--border); color: var(--ink); font-weight: 700; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: all .25s ease; box-shadow: 0 0 6px rgba(0,0,0,.25); } .tab-pill:hover { background: linear-gradient(135deg, rgba(59,130,246,.1), rgba(14,165,233,.05)); color: var(--fx-blue); border-color: var(--fx-blue); box-shadow: 0 0 10px rgba(59,130,246,.25); transform: translateY(-2px); } .tab-pill.active { background: rgba(59,130,246,.08); border-color: var(--fx-blue-soft); color: var(--fx-blue); box-shadow: 0 0 12px rgba(59,130,246,.35); } /* ========================================================== Home PAGE — page-specific styles moved from inline