/* Consolidated by ChatGPT: app.css (global styles + header/nav) */ /* === Inline (index.html) === */ /* ===== Decked Out — Blue/White/Black Theme (self-contained) ===== */ :root{ --bg:#f6f8fb; --card:#ffffff; --ink:#0b0b0b; --muted:#5b6573; --line:#e6ecf3; --blue-700:#0a4e96; --blue-600:#0e60ba; --blue-500:#1670d8; --blue-100:#e8f1ff; --shadow:0 6px 18px rgba(13,39,80,.08); --radius:14px; --radius-sm:10px; --radius-xs:8px; --max:1000px; } *{box-sizing:border-box} html,body{margin:0;height:100%} body{ font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink); background: radial-gradient(1200px 600px at 120% -10%, rgba(22,112,216,0.12), transparent 50%), radial-gradient(800px 400px at -10% -20%, rgba(14,96,186,0.10), transparent 40%), var(--bg); line-height:1.55; } a{color:var(--blue-600);text-decoration:none} a:hover{text-decoration:underline} a:focus-visible{outline:3px solid #9ec6ff;outline-offset:2px;border-radius:6px} .wrap{max-width:var(--max);margin:0 auto;padding:24px} header{background:linear-gradient(180deg,#0b1a2e 0%,#0f2541 100%);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)} .masthead{display:flex;gap:16px;align-items:center;justify-content:space-between} .brand{display:flex;gap:12px;align-items:center} .brand img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 1px 4px rgba(0,0,0,.25))} .brand-name{font-weight:800;letter-spacing:.2px} nav ul{list-style:none;display:flex;gap:10px;margin:0;padding:0;flex-wrap:wrap} nav a{ display:inline-block;padding:9px 14px;font-weight:700;letter-spacing:.1px;color:#eaf2ff; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15); border-radius:10px;backdrop-filter:saturate(120%) blur(2px); transition:transform .18s ease, background .18s ease, border-color .18s ease; } nav a:hover{transform:translateY(-1px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)} nav a.active{background:#1670d8;border-color:#1670d8;color:#fff} main{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-top:22px;box-shadow:var(--shadow)} section{padding:26px;border-top:1px solid #f0f4fa} section:first-child{border-top:none} h1{margin:0 0 8px;font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.2} h2{margin:18px 0 10px;font-size:1.1rem;text-transform:uppercase;letter-spacing:.12em;color:#0f2541} p{margin:0 0 10px} ul{margin:0 0 10px 20px} .muted{color:var(--muted)} .tag{ display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px; background:var(--blue-100);color:var(--blue-600);font-weight:800;font-size:.92rem } .tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue-600);box-shadow:0 0 0 3px rgba(22,112,216,.15)} .btn{ display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px; border:1px solid var(--blue-600);color:#fff;background:linear-gradient(180deg,var(--blue-600),var(--blue-700)); font-weight:800;text-decoration:none;box-shadow:0 4px 10px rgba(15,37,65,.18); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } .btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,37,65,.24)} .btn.secondary{background:#fff;color:var(--blue-600);border-color:var(--blue-600)} .btn.secondary:hover{filter:brightness(.98)} .figure{ border:1px dashed var(--line);border-radius:var(--radius-xs);padding:14px;text-align:center; background:linear-gradient(180deg,#fbfdff 0%,#f6f9ff 100%) } footer{text-align:center;font-size:.92rem;color:var(--muted);padding:22px 0 40px} :focus-visible{outline:3px solid #9ec6ff;outline-offset:2px;border-radius:8px} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} @media print{header,nav,.btn{display:none} main,section{border:none;box-shadow:none} a{text-decoration:underline}} body a{color:var(--link-color)!important;} body a:hover{color:var(--link-hover)!important;} /* === style.css === */ :root{ --bg-0:#0b1020; /* deep night */ --bg-1:#101735; /* indigo */ --bg-2:#182257; /* sapphire */ --ink:#e8eefc; /* pale ink */ --ink-dim:#bcc7e9; --card:#111830; /* dark card */ --card-2:#0d1428; --edge:#2a3d86; /* edge/border */ --glow:#5b7bff; /* arcane blue */ --glow-2:#8fb0ff; --glow-3:#3b56c9; --accent: var(--glow); --shadow:0 14px 36px rgba(0,0,0,.55); } html,body{height:100%;} body{ color:var(--ink); background: radial-gradient(1200px 800px at 10% -10%, rgba(143,176,255,.12), transparent 60%), radial-gradient(900px 700px at 90% 120%, rgba(59,86,201,.20), transparent 70%), linear-gradient(180deg, var(--bg-1), var(--bg-0) 50%, var(--bg-1)); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans"; line-height:1.55; } /* Arcane swirls as page accents */ body::before, body::after{ content:""; position:fixed; inset:-10%; pointer-events:none; z-index:0; background: radial-gradient(120px 120px at 20% 35%, rgba(143,176,255,.18), transparent 60%), conic-gradient(from 30deg at 80% 20%, rgba(91,123,255,.12), transparent 40%, rgba(91,123,255,.10), transparent 70%); filter: blur(12px) saturate(130%); animation: swirlA 28s linear infinite; opacity:.8; } body::after{ animation: swirlB 36s linear infinite reverse; opacity:.55; } @keyframes swirlA{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} } @keyframes swirlB{ from{ transform: rotate(0deg) scale(1.02);} to{ transform: rotate(-360deg) scale(1);} } /* Lightning bolt accent using SVG mask on headings & buttons */ .arcane-bolt{ position:relative; } .arcane-bolt::after{ content:""; position:absolute; left:-8px; top:-8px; right:-8px; bottom:-8px; border-radius:14px; background: radial-gradient(60px 60px at 12% 30%, rgba(143,176,255,.25), transparent 60%), radial-gradient(40px 40px at 85% 70%, rgba(91,123,255,.18), transparent 65%); mask: url('data:image/svg+xml;utf8,') center/30% no-repeat, linear-gradient(#fff,#fff); mix-blend-mode: screen; opacity:.35; } /* Containers */ .wrap{ position:relative; z-index:1; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0)); border-radius: 16px; padding: 1.25rem; } /* Masthead & nav */ .masthead .brand-name{ color:var(--ink); text-shadow:0 1px 0 rgba(0,0,0,.35); } nav ul li a{ color:var(--ink-dim); } nav ul li a.active{ color:var(--accent); text-shadow:0 0 10px rgba(143,176,255,.35); } /* Hero */ .hero{ position:relative; overflow:hidden; min-height:220px; display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1px solid rgba(91,123,255,.25); background: linear-gradient(180deg, rgba(16,23,53,.92), rgba(16,23,53,.78)); border-radius:18px; padding:1.25rem; box-shadow: var(--shadow); } .hero .hero-copy{ max-width:720px; } .hero .hero-title{ font-size: clamp(1.6rem, 3vw, 2.4rem); margin:0 0 .3rem 0; color:#f0f4ff; } .hero .hero-sub{ margin:0 0 .75rem 0; color: var(--ink-dim); } .hero .hero-cta{ display:flex; gap:.75rem; flex-wrap:wrap; } .hero .card-fan{ position:absolute; right:-40px; bottom:-40px; display:flex; gap:.4rem; transform: rotate(-12deg); filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); } .hero .fan-card{ width:160px; height:220px; background: linear-gradient(180deg, var(--card), var(--card-2)); border-radius: 14px; border:1px solid rgba(91,123,255,.25); box-shadow: 0 6px 22px rgba(0,0,0,.55); } /* Buttons & links */ a{ color:#cfe1ff; text-decoration:none; } a:hover{ color:#8fb0ff; text-decoration:underline; text-underline-offset:2px; } .button{ display:inline-block; padding:.6rem 1rem; border-radius:12px; background: linear-gradient(180deg, rgba(143,176,255,.12), rgba(59,86,201,.08)); border:1px solid rgba(91,123,255,.35); color:#f2f6ff; box-shadow: 0 8px 26px rgba(34,40,84,.55), inset 0 0 0 1px rgba(255,255,255,.04); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; } .button:hover{ transform: translateY(-2px); border-color: rgba(143,176,255,.8); box-shadow: 0 16px 40px rgba(34,40,84,.65), 0 0 0 2px rgba(143,176,255,.25) inset; } /* Card grid */ .card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:1rem; margin-top:1rem; } .card{ position:relative; background: linear-gradient(180deg, var(--card), var(--card-2)); border-radius: 16px; border:1px solid rgba(91,123,255,.25); box-shadow: var(--shadow); padding: 1rem; transform: translateZ(0); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover{ transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,.6); border-color: rgba(143,176,255,.5); } .card h3{ margin:0 0 .5rem 0; font-weight:700; color:#eaf0ff; } .card .meta{ color:#c7d2f3; font-size:.9rem; } /* Flip cards */ .card.flip{ perspective: 1000px; padding:0; background: transparent; border:none; box-shadow:none; } .card.flip .flip-inner{ position:relative; width:100%; height:260px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.6,.2,1); } .card.flip:hover .flip-inner{ transform: rotateY(180deg); } .card.flip .face{ position:absolute; inset:0; border-radius: 16px; overflow:hidden; background: linear-gradient(180deg, var(--card), var(--card-2)); border:1px solid rgba(91,123,255,.25); box-shadow: var(--shadow); backface-visibility: hidden; -webkit-backface-visibility: hidden; padding:1rem; } .card.flip .back{ transform: rotateY(180deg); background: linear-gradient(180deg, rgba(24,34,87,.95), rgba(24,34,87,.85)); color:#eaf0ff; } /* PDF viewer panels */ .pdf-viewer{ background: linear-gradient(180deg, rgba(16,23,53,.9), rgba(16,23,53,.7)); border: 1px solid rgba(91,123,255,.35); border-radius: 16px; padding: .75rem; box-shadow: var(--shadow); } .pdf-viewer iframe{ background:#0a0f22; border-radius: 10px; } /* Modal */ .modal{ position: fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(5,8,18,.75); z-index: 50; padding: 2vw; } .modal[open]{ display:flex; } .modal .modal-card{ background: linear-gradient(180deg, rgba(16,23,53,.95), rgba(16,23,53,.8)); border: 1px solid rgba(143,176,255,.35); border-radius: 16px; width: min(1100px, 96vw); box-shadow: var(--shadow); padding: .75rem; } .modal header{ display:flex; justify-content:space-between; align-items:center; color:#eaf0ff; padding:.25rem .5rem .5rem .5rem; } .modal .close{ background: transparent; border:1px solid rgba(143,176,255,.35); color:#dfe8ff; border-radius:8px; padding:.25rem .5rem; cursor:pointer; } .modal iframe{ width:100%; height:75vh; border-radius: 10px; display:block; background:#0a0f22; border:1px solid rgba(91,123,255,.35); } footer{ color:#cbd6f6; } /* Utility */ .grid-2{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; } @media (max-width: 900px){ .grid-2{ grid-template-columns: 1fr; } .hero .card-fan{ display:none; } } /* === ARCANE BLUE OVERHAUL === */ :root{ --bg-deep:#0a1026; --bg-mid:#121937; --bg-glow:#1f2e70; --parchment:#0f1531; /* dark parchment */ --ink:#cfe1ff; /* cool ink */ --accent:#4b6bce; /* sapphire */ --accent-bright:#8fb0ff; --accent-soft:#1b2a64; --gold:#b8891a; /* legacy var kept; unused visually */ --shadow:0 14px 40px rgba(4,8,24,.55); } html, body { height:100%; } body{ color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; line-height:1.55; background: radial-gradient(900px 500px at 65% -10%, rgba(79,118,255,.16), transparent 60%), radial-gradient(1200px 700px at -10% 110%, rgba(80,110,255,.12), transparent 60%), linear-gradient(180deg, var(--bg-mid), var(--bg-deep)); } /* Containers */ .wrap{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), radial-gradient(500px 180px at 50% 0, rgba(143,176,255,.06), transparent 60%); border-radius: 16px; padding: 1.25rem; box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03); } /* Nav */ nav ul li a{ color: #cfe1ff; } nav ul li a.active{ color: var(--accent-bright); text-shadow: 0 0 8px rgba(143,176,255,.4); } /* Buttons & Links */ body a{ color:#cfe1ff; text-decoration: none; } body a:hover{ color: var(--accent-bright); text-decoration: underline; text-underline-offset: 2px; } .button{ display:inline-block; padding:.6rem 1rem; border-radius:999px; border:1px solid rgba(143,176,255,.25); background: linear-gradient(180deg, rgba(30,50,120,.35), rgba(10,18,48,.55)); color:#eaf1ff; box-shadow: inset 0 0 0 1px rgba(143,176,255,.15), 0 8px 24px rgba(6,12,32,.6); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; } .button:hover{ transform: translateY(-2px); border-color: var(--accent-bright); box-shadow: 0 12px 34px rgba(16,30,80,.65); } .button:focus-visible{ outline: 2px solid var(--accent-bright); outline-offset: 2px; } /* Hero */ .hero{ position: relative; background: linear-gradient(180deg, rgba(18,26,64,.85), rgba(12,18,46,.75)); border: 1px solid rgba(143,176,255,.14); border-radius: 18px; padding: 1.25rem; box-shadow: var(--shadow); overflow:hidden; } .hero .hero-copy{ color:#e6eeff; } .hero .hero-title{ font-size: clamp(1.6rem, 3vw, 2.4rem); margin:0 0 .3rem 0; text-shadow: 0 2px 18px rgba(120,160,255,.25); } .hero .hero-sub{ opacity:.95; margin:0 0 .75rem 0; color:#c7d8ff; } /* (Lightning removed) */ /* Magical swirl overlay (subtle) */ .swirl-overlay{ position:fixed; inset:0; pointer-events:none; z-index: 1; background: radial-gradient(60px 200px at 20% 30%, rgba(120,160,255,.09), transparent 70%), radial-gradient(120px 400px at 75% 70%, rgba(120,160,255,.08), transparent 70%), conic-gradient(from 210deg at 20% 30%, rgba(100,140,255,.05), transparent 40%, rgba(100,140,255,.05), transparent 80%); mix-blend-mode: screen; } /* Card grid */ .card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; position:relative; z-index:2; } .card{ position:relative; background: linear-gradient(180deg, rgba(24,32,72,.85), rgba(14,20,52,.9)); border-radius: 16px; border: 1px solid rgba(143,176,255,.14); box-shadow: var(--shadow); padding: 1rem; transform: translateZ(0); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover{ transform: translateY(-6px); box-shadow: 0 18px 45px rgba(10,18,48,.8); border-color: rgba(143,176,255,.3); } .card h3{ margin:0 0 .5rem 0; font-weight:700; color:#e6eeff; } .card .meta{ color:#b9cbff; font-size:.9rem; } /* Flip card */ .card.flip{ background: transparent; border:none; box-shadow:none; padding:0; } .card.flip .flip-inner{ position:relative; width:100%; height:260px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.6,.2,1); } .card.flip:hover .flip-inner{ transform: rotateY(180deg); } .card.flip .face{ position:absolute; inset:0; border-radius: 16px; overflow:hidden; background: linear-gradient(180deg, rgba(24,32,72,.9), rgba(14,20,52,.95)); border:1px solid rgba(143,176,255,.16); box-shadow: var(--shadow); backface-visibility: hidden; -webkit-backface-visibility: hidden; padding:1rem; color:#dbe7ff; } .card.flip .back{ transform: rotateY(180deg); background: linear-gradient(180deg, rgba(40,56,120,.9), rgba(18,28,80,.92)); border:1px solid rgba(143,176,255,.25); } /* PDF viewer panels */ .pdf-viewer{ background: linear-gradient(180deg, rgba(18,26,64,.85), rgba(12,18,46,.75)); border: 1px solid rgba(143,176,255,.18); border-radius: 16px; padding: .75rem; box-shadow: var(--shadow); } .pdf-viewer iframe{ background: #0a0f24; border-radius: 10px; } /* Footer */ footer{ color:#b3c6ff; } /* Responsive */ @media (max-width: 900px){ .hero .lightning{ display:none; } } /* Hero-local swirls (decorative, non-blocking) */ .hero{ position: relative; } .hero .swirls{ position:absolute; inset:0; pointer-events:none; z-index: 0; background: radial-gradient(120px 380px at 15% 35%, rgba(120,160,255,.10), transparent 70%), radial-gradient(220px 520px at 85% 60%, rgba(120,160,255,.08), transparent 70%), conic-gradient(from 260deg at 30% 40%, rgba(120,160,255,.08), transparent 35%, rgba(120,160,255,.06), transparent 80%); mix-blend-mode: screen; animation: swirl-shift 24s linear infinite; } @keyframes swirl-shift { 0% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(0,-1%,0) rotate(2deg); } 100% { transform: translate3d(0,0,0) rotate(0deg); } } /* Ensure text / buttons are above any decorations */ .hero .hero-copy.on-top{ position: relative; z-index: 2; } .card, .pdf-viewer { position: relative; z-index: 1; } /* Remove any chance of decorative layers blocking interactions */ .swirl-overlay, .hero .swirls { pointer-events: none; } /* Home */ nav ul li:nth-child(2) a::before{ content:"📜"; } /* Project Details */ nav ul li:nth-child(3) a::before{ content:"🧙"; } /* Team */ nav ul li:nth-child(4) a::before{ content:"📚"; } /* Documents */ nav ul li:nth-child(5) a::before{ content:"🧪"; } /* Code & Demo */ nav ul li:nth-child(6) a::before{ content:"✉️"; } /* Contact */ /* Make cards obviously interactive */ .card[data-pdf], .card.flip{ cursor: pointer; } .card[data-pdf]:hover .front h3, .card.flip:hover .front h3 { text-decoration: underline; text-decoration-color: var(--accent-bright); } /* Page icons in nav (custom SVGs) */ nav ul li a::before{ content:""; display:inline-block; width:1.1em; height:1.1em; margin-right:.45rem; vertical-align:-0.15em; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 1px 2px rgba(16,30,80,.35)); } nav ul li:nth-child(1) a::before{ background-image:url('icons/home-quill.svg'); } nav ul li:nth-child(2) a::before{ background-image:url('icons/project-scroll.svg'); } nav ul li:nth-child(3) a::before{ background-image:url('icons/team-wizardhat.svg'); } nav ul li:nth-child(4) a::before{ background-image:url('icons/docs-books.svg'); } nav ul li:nth-child(5) a::before{ background-image:url('icons/code-flask.svg'); } nav ul li:nth-child(6) a::before{ background-image:url('icons/contact-envelope.svg'); } /* Brighter section headers for readability */ main h1, main h2, main h3, section > h1, section > h2, section > h3, .section h1, .section h2, .section h3 { color: #eaf1ff; /* very light sapphire-white */ text-shadow: 0 2px 10px rgba(120,160,255,.25); } /* Slight spacing to separate headers from content */ main h2 { margin-top: 1.2rem; margin-bottom: .6rem; } main h3 { margin-top: 1rem; margin-bottom: .5rem; } /* Document card fronts: icon-centric */ .face.front .doc-icon{ display:flex; align-items:center; justify-content:center; padding-top:.5rem; } .face.front .doc-icon img{ width: 72%; max-width: 220px; height:auto; display:block; filter: drop-shadow(0 8px 24px rgba(16,30,80,.45)); } .face.front .doc-label{ text-align:center; margin-top:.5rem; color:#eaf1ff; font-weight:600; letter-spacing:.2px; opacity:.95; } /* Backs: description text and actions */ .face.back .doc-desc{ color:#d2e0ff; margin: .25rem 0 .75rem 0; line-height:1.45; } .face.back .doc-actions{ display:flex; gap:.6rem; flex-wrap:wrap; } /* Arcane blue pulsing logo effect */ .brand img { height: 80px; /* adjust size as you like */ animation: pulseGlow 6s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(120,160,255,0.4)); } @keyframes pulseGlow { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(120,160,255,0.4)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 14px rgba(160,200,255,0.6)); } } /* === overhaul.css === */ /* === Decked Out UI Overhaul v2 — Arcane Minimal, freer flow, readable ink === */ /* Ensure readable light ink in dark theme */ html[data-theme="dark"]{ --ink: #e8eefc; --ink-dim: #c7d2ff; --card: #0e162e; --edge: #3a52a0; --bg-0: #0b1020; --bg-1: #101735; --glow: #5b7bff; } html{scroll-behavior:smooth} body{ color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Wider canvas with breathing room */ .wrap{max-width: 1200px; margin-inline:auto; padding-inline: 28px} /* Sticky, translucent header with pill nav */ header[role="banner"]{ position: sticky; top: 0; z-index: 80; backdrop-filter: saturate(130%) blur(10px); background: linear-gradient(180deg, rgba(10,16,40,.75), rgba(10,16,40,.45)); border-bottom: 1px solid rgba(120,160,255,.12); } .masthead{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:12px} .brand{display:flex; align-items:center; gap:10px} .brand img{height:34px; width:auto; filter: drop-shadow(0 2px 10px rgba(80,120,255,.25))} nav[aria-label="Primary"] ul{display:flex; gap:18px; margin:0; padding:0; list-style:none; flex-wrap:wrap} nav[aria-label="Primary"] a{ display:inline-block; padding:10px 12px; border-radius:999px; text-decoration:none; color:inherit; opacity:.96; transition: transform .12s ease, background-color .12s ease, opacity .12s ease; } nav[aria-label="Primary"] a:hover{opacity:1; transform: translateY(-1px); background: rgba(120,160,255,.10)} nav[aria-label="Primary"] a.active{background: rgba(120,160,255,.16); box-shadow: inset 0 0 0 1px rgba(120,160,255,.25)} /* Typography */ h1{font-size: clamp(30px, 2.2vw + 1rem, 44px); line-height:1.14; margin: 18px 0 10px} h2{font-size: clamp(20px, 1.1vw + .9rem, 26px); line-height:1.22; margin: 12px 0 8px} p, li{color: var(--ink); line-height:1.7} .muted{color: var(--ink-dim)} /* Free‑flowing sections: remove heavy card boxes */ .card{ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Instead, use gentle separators and spacing */ .grid{display: grid; gap: 26px} @media (min-width: 760px){ .grid{grid-template-columns: repeat(12, minmax(0,1fr))} .grid > * {grid-column: span 6} } /* Each item gets a soft halo and bottom divider, not a box */ .grid > * > .pair{ padding: 14px 0 20px; border-bottom: 1px solid rgba(140,180,255,.18); } .grid > *:last-child > .pair{border-bottom: 0} .pair{display:flex; gap:14px; align-items:flex-start} .pair img{width:32px; height:32px; filter: drop-shadow(0 0 10px rgba(120,160,255,.28))} /* Document tiles and modal: lighten surfaces, keep readability */ [class*="tile"], [data-pdf], .doc, .document-card{ background: linear-gradient(180deg, rgba(18,26,52,.35), rgba(16,22,44,.25)) !important; border: 0 !important; box-shadow: 0 16px 40px rgba(0,0,0,.40) !important; border-radius: 16px !important; } .modal[open]{backdrop-filter: blur(3px)} /* Subtle section glow on first block only */ main.wrap > :first-child{ background: radial-gradient(1000px 500px at 120% -10%, rgba(120,160,255,.10), transparent 40%), transparent; padding: clamp(6px, 1vw, 12px); border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(120,160,255,.06); } /* Links */ a:not([class]){color: inherit; text-decoration-color: rgba(160,200,255,.6); text-underline-offset: 2px} a:not([class]):hover{opacity:.96} /* HR divider */ hr{border:0; height:1px; background:linear-gradient(90deg, transparent, rgba(120,160,255,.22), transparent); margin:24px 0} /* === Home page layout (no borders, arcane bands) === */ .home .hero{ position: relative; padding: clamp(40px, 6vw, 120px) 0 clamp(24px, 3vw, 48px); background: radial-gradient(1200px 600px at 120% -20%, rgba(120,160,255,.16), transparent 40%), radial-gradient(1000px 500px at -10% 20%, rgba(80,140,255,.12), transparent 40%); border-radius: 20px; } .hero .sub{font-size: clamp(16px, .9vw + .8rem, 20px); color: var(--ink-dim); max-width: 62ch} .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top: 14px} .btn{cursor:pointer; text-decoration:none} .btn.pill{ border-radius:999px; padding:12px 16px; background: radial-gradient(120% 120% at 120% -20%, rgba(120,160,255,.26), rgba(120,160,255,.18)); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(140,180,255,.28), 0 10px 24px rgba(0,0,0,.35); transition: transform .12s ease; } .btn.pill:hover{transform: translateY(-1px)} .btn.ghost{ border-radius:999px; padding:12px 16px; background: rgba(120,160,255,.08); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(140,180,255,.22); } /* Bands: full-bleed feel without boxes */ .band{margin-top: clamp(26px, 4vw, 48px)} .band .band-inner{ padding: clamp(16px, 2vw, 28px); border-radius: 20px; background: linear-gradient(180deg, rgba(18,26,52,.60), rgba(16,22,44,.55)), radial-gradient(1200px 600px at 120% -20%, rgba(120,160,255,.10), transparent 40%); box-shadow: 0 20px 48px rgba(0,0,0,.45); } .features .band-inner{display:grid; gap:22px} @media (min-width: 840px){ .features .band-inner{grid-template-columns: repeat(3, minmax(0,1fr))} } .f{display:flex; gap:14px} .f img{width:36px; height:36px; filter: drop-shadow(0 0 12px rgba(120,160,255,.32))} .f h2{margin:2px 0 6px} /* Quick links — flowing tiles without borders */ .grid-3{display:grid; gap:16px} @media (min-width: 840px){ .grid-3{grid-template-columns: repeat(3, minmax(0,1fr))} } .q{ display:flex; flex-direction:column; gap:4px; padding:16px 18px; border-radius:16px; text-decoration:none; color:var(--ink); background: linear-gradient(180deg, rgba(18,26,52,.45), rgba(16,22,44,.35)); box-shadow: 0 16px 40px rgba(0,0,0,.40); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .q .kicker{font-size:12px; letter-spacing:.3px; text-transform:uppercase; color: var(--ink-dim)} .q .hint{color: var(--ink-dim); font-size: 14px} .q:hover{transform: translateY(-2px); filter: drop-shadow(0 0 10px rgba(120,160,255,.22))} /* Callout */ .callout .band-inner{ text-align:center } .callout .cta-row{ justify-content:center } /* Legacy content smoothing on Home */ .home.legacy .card, .home.legacy [class*="card"]{ background: transparent !important; border: 0 !important; box-shadow: none !important; } .home.legacy section, .home.legacy .section, .home.legacy .wrap-inner{ border: 0 !important; } /* === Home Rev3: restructure with original content preserved === */ .home.rev3 .hero--rev3{ padding: clamp(44px, 6vw, 128px) 0 clamp(24px, 3vw, 48px); background: radial-gradient(1200px 600px at 120% -20%, rgba(120,160,255,.18), transparent 40%), radial-gradient(1000px 500px at -10% 20%, rgba(80,140,255,.12), transparent 40%); border-radius: 20px; } .home.rev3 .features--rev3 .band-inner{display:grid; gap:22px} @media (min-width: 880px){ .home.rev3 .features--rev3 .band-inner{grid-template-columns: repeat(3, minmax(0,1fr))} } .home.rev3 .content-flow{ /* strip borders/boxes from legacy nodes and create breathing rhythm */ --flow: 18px; } .home.rev3 .content-flow > * + *{margin-top: var(--flow)} .home.rev3 .content-flow h1, .home.rev3 .content-flow h2, .home.rev3 .content-flow h3{margin-top: calc(var(--flow) * 1.2)} .home.rev3 .content-flow .card, .home.rev3 .content-flow [class*="card"], .home.rev3 .content-flow [class*="box"], .home.rev3 .content-flow [class*="panel"]{ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } .home.rev3 .legacy-content .band-inner{ background: linear-gradient(180deg, rgba(18,26,52,.58), rgba(16,22,44,.50)), radial-gradient(1200px 600px at 120% -20%, rgba(120,160,255,.08), transparent 40%); box-shadow: 0 20px 48px rgba(0,0,0,.45); border-radius: 20px; padding: clamp(16px, 2vw, 28px); } /* Keep readable ink */ .home.rev3 .content-flow, .home.rev3 .content-flow p, .home.rev3 .content-flow li{color: var(--ink)} /* Spacing + hover affordances for quicklinks remain from v2 */ /* === Immersive Narrative Homepage (no CTAs/links added) === */ .home.immersive .story{ display:block; margin-top: clamp(18px, 3vw, 36px); } .home.immersive .slice{ position: relative; margin: clamp(12px, 2.6vw, 28px) 0; padding: 0; border: 0; } .home.immersive .slice-inner{ padding: clamp(10px, 2vw, 18px) clamp(8px, 1.8vw, 16px); border-radius: 18px; background: radial-gradient(900px 420px at 110% -10%, rgba(120,160,255,.10), transparent 40%), linear-gradient(180deg, rgba(18,26,52,.55), rgba(16,22,44,.45)); box-shadow: 0 16px 40px rgba(0,0,0,.38); } /* Alternate glow intensity to avoid a repetitive feel */ .home.immersive .slice:nth-of-type(2n) .slice-inner{ background: radial-gradient(900px 420px at -10% 10%, rgba(120,160,255,.08), transparent 40%), linear-gradient(180deg, rgba(18,26,52,.48), rgba(16,22,44,.40)); } /* Typography & readability */ .home.immersive .slice-inner p{ color: var(--ink); line-height: 1.75; margin: 0; } /* First paragraph gets a lede treatment (styling only) */ .home.immersive .slice:first-of-type .slice-inner p{ font-size: clamp(18px, 1.1vw + .95rem, 22px); } /* Optional drop cap for the very first paragraph */ .home.immersive .slice:first-of-type .slice-inner p::first-letter{ float: left; font-size: 2.6em; line-height: .9; padding-right: .06em; color: var(--glow); font-weight: 700; filter: drop-shadow(0 0 8px rgba(120,160,255,.3)); } /* Headings & other blocks preserved if present */ .home.immersive .slice-inner h1, .home.immersive .slice-inner h2, .home.immersive .slice-inner h3{margin: 0 0 8px; color: var(--ink)} .home.immersive .slice-inner ul, .home.immersive .slice-inner ol{margin: 6px 0 0 1.2em} .home.immersive .slice-inner img{max-width:100%; height:auto; display:block; margin: 6px 0} /* Remove any residual borders from legacy classes inside */ .home.immersive .slice-inner .card, .home.immersive .slice-inner [class*="card"], .home.immersive .slice-inner [class*="box"], .home.immersive .slice-inner [class*="panel"]{ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* === Immersive (Strict) — No extra CTAs/links injected === */ .home.immersive.strict .story{margin-top: clamp(18px, 3vw, 36px)} .home.immersive.strict .slice{position:relative; margin: clamp(12px, 2.6vw, 28px) 0} .home.immersive.strict .slice-inner{ padding: clamp(10px, 2vw, 18px) clamp(8px, 1.8vw, 16px); border-radius: 18px; background: radial-gradient(900px 420px at 110% -10%, rgba(120,160,255,.10), transparent 40%), linear-gradient(180deg, rgba(18,26,52,.55), rgba(16,22,44,.45)); box-shadow: 0 16px 40px rgba(0,0,0,.38); } .home.immersive.strict .slice:nth-of-type(2n) .slice-inner{ background: radial-gradient(900px 420px at -10% 10%, rgba(120,160,255,.08), transparent 40%), linear-gradient(180deg, rgba(18,26,52,.48), rgba(16,22,44,.40)); } .home.immersive.strict .slice-inner p, .home.immersive.strict .slice-inner li{color: var(--ink); line-height:1.75; margin:0} .home.immersive.strict .slice-inner h1, .home.immersive.strict .slice-inner h2, .home.immersive.strict .slice-inner h3{margin: 0 0 8px; color: var(--ink)} .home.immersive.strict .slice-inner img{max-width:100%; height:auto; display:block; margin: 6px 0} /* Remove any legacy borders/shadows that might sneak in */ .home.immersive.strict .slice-inner .card, .home.immersive.strict .slice-inner [class*="card"], .home.immersive.strict .slice-inner [class*="box"], .home.immersive.strict .slice-inner [class*="panel"]{ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Subtle marker styling for retained headings */ .home.immersive.strict.curated .slice-inner h2{ opacity:.9; letter-spacing:.2px; } .home.immersive.strict.curated .slice-inner h2:after{ content:""; display:block; margin-top:8px; height:1px; background:linear-gradient(90deg, transparent, rgba(120,160,255,.22), transparent); } /* === Site-wide immersive narrative wrappers === */ main.wrap.immersive.site-wide .story{margin-top: clamp(18px, 3vw, 36px)} main.wrap.immersive.site-wide .slice{position:relative; margin: clamp(12px, 2.6vw, 28px) 0} main.wrap.immersive.site-wide .slice-inner{ padding: clamp(10px, 2vw, 18px) clamp(8px, 1.8vw, 16px); border-radius: 18px; background: radial-gradient(900px 420px at 110% -10%, rgba(120,160,255,.10), transparent 40%), linear-gradient(180deg, rgba(18,26,52,.55), rgba(16,22,44,.45)); box-shadow: 0 16px 40px rgba(0,0,0,.38); } main.wrap.immersive.site-wide .slice:nth-of-type(2n) .slice-inner{ background: radial-gradient(900px 420px at -10% 10%, rgba(120,160,255,.08), transparent 40%), linear-gradient(180deg, rgba(18,26,52,.48), rgba(16,22,44,.40)); } main.wrap.immersive.site-wide .slice-inner p, main.wrap.immersive.site-wide .slice-inner li{color: var(--ink); line-height:1.75; margin:0} main.wrap.immersive.site-wide .slice-inner h1, main.wrap.immersive.site-wide .slice-inner h2, main.wrap.immersive.site-wide .slice-inner h3{margin: 0 0 8px; color: var(--ink)} main.wrap.immersive.site-wide .slice-inner img{max-width:100%; height:auto; display:block; margin: 6px 0} /* === Upgraded Navbar (full-width, splayed) === */ header{position:relative} header .wrap{max-width:var(--max);} .masthead{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px} nav{width:100%} nav ul{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:0;margin:0;list-style:none} nav a{flex:1;text-align:center} @media (max-width:720px){ .masthead{grid-template-columns:1fr} nav ul{flex-wrap:wrap;justify-content:center} nav a{flex:0 1 auto} } /* === Team Flip Cards (updated) === */ .team-grid {display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px} @media (max-width:900px){ .team-grid{grid-template-columns:repeat(2, minmax(0,1fr))} } @media (max-width:600px){ .team-grid{grid-template-columns:1fr} } .flip-card{ perspective: 1000px; } .flip-inner{ position:relative; transform-style:preserve-3d; transition: transform .5s ease; } .flip-card:hover .flip-inner, .flip-card:focus-within .flip-inner, .flip-card.flipped .flip-inner { transform: rotateY(180deg); } .flip-front, .flip-back{ backface-visibility:hidden; -webkit-backface-visibility:hidden; } .flip-front{ position:relative; } .flip-back{ position:absolute; inset:0; transform: rotateY(180deg); } /* === Uniform team card height (desktop only) === */ @media (min-width: 900px){ .team-grid .card, .team-grid .flip-card { height: 440px; } .team-grid .flip-inner { height: 100%; } .team-grid .flip-front, .team-grid .flip-back { height: 100%; overflow: hidden; } .team-grid img { width: 100%; height: 100%; object-fit: cover; display:block; } } /* === PATCH: ensure uniform height applies to actual team container (.grid) and all flip-cards === */ @media (min-width: 900px){ .grid .card, .grid .flip-card, .flip-card { height: 440px; } .flip-inner { height: 100%; } .flip-front, .flip-back { height: 100%; overflow: hidden; } .flip-front img { width: 100%; height: 100%; object-fit: cover; display:block; } } /* === Navbar: Pill Tabs style === */ header{background:linear-gradient(180deg,#0b1a2e 0%,#0f2541 100%);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)} .masthead{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px} .brand{display:flex;gap:12px;align-items:center} .brand img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 1px 4px rgba(0,0,0,.25))} .brand-name{font-weight:800;letter-spacing:.2px} /* Base nav container */ nav{width:100%} nav ul{display:flex;gap:12px;margin:0;padding:0;list-style:none} /* Mobile: horizontal scroll pills */ @media (max-width: 719px){ nav ul{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:6px} nav li{flex:0 0 auto} nav a{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:9999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#eaf2ff;text-decoration:none} nav a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)} nav a.active,[aria-current="page"]{background:#1670d8;border-color:#1670d8;color:#fff} } /* Desktop: equal-width segmented pills */ @media (min-width: 720px){ nav{display:block} nav ul{align-items:center} nav li{flex:1 1 0} nav a{display:flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:9999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#eaf2ff;text-decoration:none;font-weight:700;letter-spacing:.15px;backdrop-filter:saturate(120%) blur(2px);transition:transform .18s ease, background .18s ease, border-color .18s ease} nav a:hover{transform:translateY(-1px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)} nav a.active,[aria-current="page"]{background:#1670d8;border-color:#1670d8;color:#fff} } /* === PATCH: keep pill nav single-line and make header full-width on desktop === */ @media (min-width: 900px){ header .wrap{max-width:none;padding-left:24px;padding-right:24px} nav ul{flex-wrap:nowrap} nav li{min-width:0} } /* === Arcane Glow enhancements === */ /* Hover fade-in is already subtle; add a touch more clarity */ nav a{ position:relative; isolation:isolate } @media (min-width: 720px){ nav a{ transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease } nav a:hover{ opacity: .98 } } /* Full-width glowing underline for active & hover */ nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; background:#1670d8; border-radius:999px; opacity:0; transform: translateY(4px); box-shadow: 0 0 10px rgba(22,112,216,.7), 0 0 18px rgba(22,112,216,.45); transition: opacity .22s ease, transform .22s ease; pointer-events:none; } /* Active page shows persistent glow */ nav a.active::after, nav a[aria-current="page"]::after{ opacity:1; transform: translateY(0) } /* Hover reveals glow */ nav a:hover::after{ opacity:1; transform: translateY(0) } /* Header shadow on scroll */ header{ transition: box-shadow .25s ease } header.scrolled{ box-shadow: 0 8px 24px rgba(4, 14, 28, .28) } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ nav a, nav a::after, header{ transition: none !important } } /* Hero subtitle styling */ .hero-subtitle{ margin-top: 6px; font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 600; color: var(--blue-500); letter-spacing: .15px; } /* === Team grid: 3 / 2 / 1 columns with 20px gaps === */ .team-grid { display:grid; gap:20px } @media (min-width: 900px){ .team-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (min-width: 600px) and (max-width: 899px){ .team-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 599px){ .team-grid { grid-template-columns: 1fr; } } /* === Team layout: horizontal (desktop), centered === */ @media (min-width: 900px){ .team-grid{ display:flex; justify-content:center; /* center the row within container */ align-items:stretch; gap:20px; flex-wrap:nowrap; /* single row */ } .team-grid > .flip-card, .team-grid > .card{ flex: 0 1 calc((100% - 40px) / 3); /* three across with 20px gaps */ max-width: calc((100% - 40px) / 3); } } /* Tablet: 2-up grid */ @media (min-width: 600px) and (max-width: 899px){ .team-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:20px; justify-items:center; } } /* Mobile: 1-up */ @media (max-width: 599px){ .team-grid{ display:grid; grid-template-columns: 1fr; gap:16px; justify-items:center; } } /* === Technologies page clean flow (no boxes/lines) === */ body.page-technologies section.story .slice{ border:0; background:transparent; box-shadow:none; padding:0; margin:0 } body.page-technologies section.story .slice + .slice{ border-top:0 } body.page-technologies section.story .slice .slice-inner{ padding:0 } /* Uniform rhythm: icon, heading, paragraph */ body.page-technologies section.story img[aria-hidden="true"]{ width:48px; height:48px; margin-bottom:10px; display:block; filter:drop-shadow(0 0 0 rgba(0,0,0,0)) } body.page-technologies section.story h1{ margin:0 0 8px } body.page-technologies section.story h2{ margin:18px 0 8px; font-size:clamp(1.15rem, 2vw, 1.25rem) } body.page-technologies section.story p{ margin:0 0 28px; line-height:1.65 } /* Keep the container centered like the rest of the site */ body.page-technologies .wrap{ max-width:var(--max); margin:0 auto; padding:24px } /* === Technologies page cleanup === */ .tech-page section{ border-top: none !important; } .tech-list, .project-list{ display:flex; flex-direction:column; gap: 26px; } .tech-item, .project-item{ padding: 0; border: none; background: transparent; box-shadow: none; } .tech-item h2, .project-item h2{ margin: 0 0 8px; font-size: clamp(1.2rem, 2.2vw, 1.4rem); } .tech-item p, .project-item p{ margin: 0; max-width: 72ch; } /* === Technologies: soft box layout === */ .tech-list, .project-list{ display:flex; flex-direction:column; gap:32px; max-width: 900px; margin: 0 auto; padding: 20px 0 60px; } .tech-item, .project-item{ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 28px 32px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); transition: transform .2s ease, box-shadow .2s ease; } .tech-item:hover, .project-item:hover{ transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); } .tech-item h2, .project-item h2{ margin-top:0; margin-bottom:10px; font-size: clamp(1.2rem, 2.2vw, 1.4rem); color: var(--blue-300); } .tech-item p, .project-item p{ margin:0; line-height:1.55; color: #e9ecf5; } /* === Technologies: Arcane Glow (cool blue) === */ .tech-item, .project-item{ background: linear-gradient(180deg, #0f1b2f 0%, #122a4f 100%); border: 1px solid rgba(22,112,216,0.25); border-radius: 18px; padding: 28px 32px; box-shadow: inset 0 0 6px rgba(0,0,0,0.4), 0 0 18px rgba(22,112,216,0.25); transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease; } .tech-item:hover, .project-item:hover{ transform: translateY(-3px); border-color: rgba(22,112,216,0.45); box-shadow: inset 0 0 8px rgba(0,0,0,0.45), 0 0 24px rgba(22,112,216,0.45), 0 0 40px rgba(22,112,216,0.25); } .tech-item h2, .project-item h2{ color: #5aa9ff; text-shadow: 0 0 6px rgba(22,112,216,0.45); } .tech-item p, .project-item p{ color: #eaf3ff; } /* === Arcane Glow: Header + Navbar harmonization === */ /* Header background matches tech boxes (cool blue gradient) */ header{ background: linear-gradient(180deg, #0f1b2f 0%, #122a4f 100%) !important; border-bottom: 1px solid rgba(22,112,216,0.25) !important; } /* Pill tabs: use arcane-blue outline + subtle fill */ @media (min-width: 720px){ nav a{ background: rgba(10, 24, 48, 0.22); border-color: rgba(22,112,216,0.25); color: #eaf3ff; box-shadow: 0 0 12px rgba(22,112,216,0.12) inset; } nav a:hover{ background: rgba(10, 24, 48, 0.34); border-color: rgba(22,112,216,0.38); } nav a.active, nav a[aria-current="page"]{ background: linear-gradient(180deg, rgba(22,112,216,0.22) 0%, rgba(22,112,216,0.34) 100%); border-color: rgba(22,112,216,0.55); color: #ffffff; box-shadow: inset 0 0 8px rgba(0,0,0,0.35), 0 0 18px rgba(22,112,216,0.45); } /* Full-width glowing underline already implemented; slightly brighten */ nav a::after{ box-shadow: 0 0 12px rgba(22,112,216,.8), 0 0 22px rgba(22,112,216,.5); } } /* Mobile pills maintain consistent look */ @media (max-width: 719px){ nav a{ background: rgba(10, 24, 48, 0.22); border-color: rgba(22,112,216,0.25); color: #eaf3ff; } nav a.active, nav a[aria-current="page"]{ background: linear-gradient(180deg, rgba(22,112,216,0.22) 0%, rgba(22,112,216,0.34) 100%); border-color: rgba(22,112,216,0.55); color: #ffffff; box-shadow: inset 0 0 8px rgba(0,0,0,0.35), 0 0 18px rgba(22,112,216,0.45); } } /* Slightly stronger shadow on scroll to match tech cards */ header.scrolled{ box-shadow: 0 10px 28px rgba(4,14,28,.35); } /* === Canonical Header + Pill Tabs (match index exactly) === */ /* Header background + border */ header{ background: linear-gradient(180deg, #0f1b2f 0%, #122a4f 100%) !important; border-bottom: 1px solid rgba(22,112,216,0.25) !important; } /* Layout */ header .wrap{ max-width:none; padding-left:24px; padding-right:24px } .masthead{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:16px } .brand{ display:flex; gap:12px; align-items:center } .brand img{ width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 1px 4px rgba(0,0,0,.25)) } .brand-name{ font-weight:800; letter-spacing:.2px } /* Pills */ nav{ width:100% } nav ul{ display:flex; gap:12px; margin:0; padding:0; list-style:none; flex-wrap:nowrap } nav li{ flex:1 1 0; min-width:0 } nav a{ display:flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:9999px; text-decoration:none; font-weight:700; letter-spacing:.15px; background: rgba(10, 24, 48, 0.22); color:#eaf3ff; border:1px solid rgba(22,112,216,0.25); backdrop-filter:saturate(120%) blur(2px); position:relative; isolation:isolate; transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease; } nav a:hover{ transform:translateY(-1px); background:rgba(10,24,48,0.34); border-color:rgba(22,112,216,0.38) } nav a.active, nav a[aria-current="page"]{ background: linear-gradient(180deg, rgba(22,112,216,0.22) 0%, rgba(22,112,216,0.34) 100%); border-color: rgba(22,112,216,0.55); color:#fff; box-shadow: inset 0 0 8px rgba(0,0,0,0.35), 0 0 18px rgba(22,112,216,0.45); } /* Full-width underline glow */ nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; background:#1670d8; border-radius:999px; opacity:0; transform:translateY(4px); box-shadow: 0 0 12px rgba(22,112,216,.8), 0 0 22px rgba(22,112,216,.5); transition: opacity .22s ease, transform .22s ease; pointer-events:none; } nav a.active::after, nav a[aria-current="page"]::after, nav a:hover::after{ opacity:1; transform:translateY(0) } /* Mobile: horizontal scroll pills */ @media (max-width: 719px){ nav ul{ overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:6px } nav li{ flex:0 0 auto } nav a{ padding:10px 16px } } /* Scroll shadow */ header{ transition: box-shadow .25s ease } header.scrolled{ box-shadow: 0 10px 28px rgba(4,14,28,.35) }