:root{ --ba-bg:#0b1220; --ba-surface:#0f1a2e; --ba-surface-2:#121f39; --ba-text:#e9eefc; --ba-muted:#b8c2e0; --ba-border:rgba(255,255,255,.12); --ba-accent:#ffcf09; --ba-accent-2:#ffd84d; --ba-shadow:0 20px 60px rgba(0,0,0,.45); --ba-radius:16px; --ba-radius-sm:12px; --ba-container:1100px; --ba-gutter:clamp(16px, 3vw, 28px); --ba-focus:0 0 0 3px rgba(255,207,9,.35); /* Aurora (animated) */ --ba-aurora-1: rgba(255,207,9,.16); --ba-aurora-2: rgba(77,153,255,.18); --ba-aurora-3: rgba(190,80,255,.14); } /* Page themes (set by JS on ) */ html[data-theme="home"]{ --ba-accent:#ffcf09; --ba-accent-2:#ffd84d; --ba-aurora-1: rgba(255,207,9,.16); --ba-aurora-2: rgba(77,153,255,.18); --ba-aurora-3: rgba(190,80,255,.14); } html[data-theme="garden"]{ --ba-accent:#2fe3a6; --ba-accent-2:#7df0c9; --ba-focus:0 0 0 3px rgba(47,227,166,.32); --ba-aurora-1: rgba(47,227,166,.16); --ba-aurora-2: rgba(120,255,190,.10); --ba-aurora-3: rgba(77,153,255,.12); } html[data-theme="build"]{ --ba-accent:#ff8d4d; --ba-accent-2:#ffb08a; --ba-focus:0 0 0 3px rgba(255,141,77,.32); --ba-aurora-1: rgba(255,141,77,.18); --ba-aurora-2: rgba(255,207,9,.10); --ba-aurora-3: rgba(77,153,255,.10); } html[data-theme="polish"]{ --ba-accent:#66b2ff; --ba-accent-2:#8cc6ff; --ba-focus:0 0 0 3px rgba(102,178,255,.30); --ba-aurora-1: rgba(102,178,255,.18); --ba-aurora-2: rgba(190,80,255,.12); --ba-aurora-3: rgba(255,207,9,.09); } html[data-theme="about"]{ --ba-accent:#b68cff; --ba-accent-2:#d0b3ff; --ba-focus:0 0 0 3px rgba(182,140,255,.30); --ba-aurora-1: rgba(182,140,255,.18); --ba-aurora-2: rgba(102,178,255,.12); --ba-aurora-3: rgba(255,207,9,.08); } *{box-sizing:border-box} html{color-scheme:dark} body{ margin:0; font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ba-text); background:radial-gradient(1000px 600px at 20% -20%, rgba(255,207,9,.08), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(77,153,255,.12), transparent 55%), var(--ba-bg); position:relative; } /* Subtle grain for a more “artful” feel */ body:before{ content:""; position:fixed; inset:-30vh -30vw; pointer-events:none; z-index:0; opacity:.06; background: repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,.14) 0 1px, transparent 1px 6px), repeating-radial-gradient(circle at 70% 60%, rgba(255,255,255,.10) 0 1px, transparent 1px 8px); mix-blend-mode:overlay; transform:translateZ(0); } img{max-width:100%;height:auto;display:block} a{color:inherit} /* Help avoid big synchronous paints when images load */ img{contain:paint} .container{max-width:var(--ba-container);margin:0 auto;padding:0 var(--ba-gutter)} .site-header{ position:sticky;top:0;z-index:50; backdrop-filter:saturate(130%) blur(10px); background:rgba(11,18,32,.78); border-bottom:1px solid var(--ba-border); } .header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0} .brand{display:flex;align-items:center;gap:12px;text-decoration:none} .brand__logo{width:44px;height:auto} .brand__name{font-weight:750;letter-spacing:.2px} .nav{display:flex;align-items:center;gap:12px} .nav__toggle{ display:none; appearance:none;border:1px solid var(--ba-border); background:rgba(255,255,255,.06);color:var(--ba-text); padding:10px 12px;border-radius:12px; } .nav__toggle:focus{outline:none;box-shadow:var(--ba-focus)} .nav__menu{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0} .nav__menu a{ display:inline-flex;align-items:center; padding:10px 12px;border-radius:999px; text-decoration:none;color:var(--ba-muted); position:relative; } .nav__menu a:after{ content:""; position:absolute; left:14px;right:14px;bottom:7px; height:1px; background:linear-gradient(90deg, transparent, rgba(255,207,9,.75), transparent); opacity:0; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease; } .nav__menu a:hover{color:var(--ba-text);background:rgba(255,255,255,.06)} .nav__menu a:hover:after{opacity:1;transform:translateY(0)} .nav__menu a[aria-current="page"]{color:var(--ba-bg);background:var(--ba-accent)} .nav__menu a[aria-current="page"]:after{opacity:0} .hero{padding:42px 0 26px;position:relative;overflow:hidden} .hero:before, .hero:after{ content:""; position:absolute; width:540px;height:540px; border-radius:999px; filter:blur(70px); opacity:.55; pointer-events:none; z-index:0; } .hero:before{background:var(--ba-aurora-2);left:-220px;top:-260px} .hero:after{background:var(--ba-aurora-1);right:-240px;top:-180px} .hero-aurora{ position:absolute;inset:-60px; pointer-events:none; z-index:0; } .hero-aurora span{ position:absolute; width:420px;height:420px; border-radius:999px; filter:blur(60px); mix-blend-mode:screen; opacity:.35; } .hero-aurora span:nth-child(1){background:var(--ba-aurora-1);left:12%;top:18%} .hero-aurora span:nth-child(2){background:var(--ba-aurora-2);left:58%;top:8%} .hero-aurora span:nth-child(3){background:var(--ba-aurora-3);left:44%;top:62%} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch;position:relative;z-index:1} /* Hero signature line art (injected by JS) */ .hero-art{ position:absolute; inset:-10% -8%; z-index:0; pointer-events:none; opacity:.92; } .hero-art svg{width:100%;height:100%} .hero-art path{ fill:none; stroke:rgba(255,255,255,.18); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; } .hero-art path.hero-art__accent{stroke:color-mix(in srgb, var(--ba-accent) 78%, rgba(255,255,255,.0));stroke-width:1.2;opacity:.85} .hero-art path.hero-art__soft{stroke:rgba(255,255,255,.10);opacity:.75} .hero-card{ border:1px solid var(--ba-border); border-radius:var(--ba-radius); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); box-shadow:var(--ba-shadow); overflow:hidden; will-change:transform, opacity; transform-style:preserve-3d; } .hero-copy{padding:28px} .kicker{display:inline-flex;gap:10px;align-items:center;color:var(--ba-muted);font-weight:600} .kicker:before{content:"";width:10px;height:10px;border-radius:999px;background:var(--ba-accent);box-shadow:0 0 0 3px rgba(255,207,9,.18)} .hero h1{margin:10px 0 10px;font-size:clamp(30px, 4.2vw, 48px);line-height:1.05} .hero p{margin:0 0 18px;color:var(--ba-muted)} .cta-row{display:flex;flex-wrap:wrap;gap:10px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:11px 14px;border-radius:12px; border:1px solid var(--ba-border); background:rgba(255,255,255,.06); color:var(--ba-text); text-decoration:none; transition:transform .16s ease, background .16s ease, box-shadow .16s ease; } .btn:hover{background:rgba(255,255,255,.09);transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn:focus{outline:none;box-shadow:var(--ba-focus)} .btn--primary{background:var(--ba-accent);border-color:transparent;color:#0b1220;font-weight:750} .btn--primary:hover{background:var(--ba-accent-2)} .hero-media{ min-height:280px; background-size:cover; background-position:50% 50%; position:relative; will-change:transform; } .hero-media:after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg, rgba(11,18,32,.0), rgba(11,18,32,.65)); } .section{padding:24px 0} .section h2{margin:0 0 12px;font-size:22px} .section p.lead{margin:0 0 14px;color:var(--ba-muted)} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .card{ border:1px solid var(--ba-border); border-radius:var(--ba-radius-sm); background:rgba(255,255,255,.04); padding:16px; transition:transform .18s ease, background .18s ease, border-color .18s ease; will-change:transform; } .card:hover{transform:translateY(-3px);background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.18)} .card h3{margin:0 0 6px} .card p{margin:0 0 12px;color:var(--ba-muted)} .card a{width:fit-content} .gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:10px} .gallery a{ grid-column:span 4; display:block; border-radius:14px; overflow:hidden; border:1px solid var(--ba-border); background:rgba(255,255,255,.03); position:relative; transform:translateZ(0); } .gallery a:before{ content:""; position:absolute;inset:-60% -40%; background:linear-gradient(105deg, transparent 45%, rgba(255,255,255,.16) 50%, transparent 55%); transform:translateX(-30%) rotate(10deg); opacity:0; transition:opacity .18s ease; pointer-events:none; } .gallery a:hover:before{opacity:1} .gallery img{width:100%;height:220px;object-fit:cover;transition:transform .35s ease} .gallery a:hover img{transform:scale(1.03)} .quote{ border:1px solid var(--ba-border); border-radius:var(--ba-radius); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); padding:18px; } .quote h2{margin:0 0 6px} .quote p{margin:0 0 12px;color:var(--ba-muted)} .quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .field{display:flex;flex-direction:column;gap:6px} .field span{color:var(--ba-muted);font-size:13px;font-weight:650} .field input,.field textarea{ width:100%; padding:11px 12px; border-radius:12px; border:1px solid var(--ba-border); background:rgba(11,18,32,.6); color:var(--ba-text); } .field input:focus,.field textarea:focus{outline:none;box-shadow:var(--ba-focus)} .field--full{grid-column:1/-1} .quote-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .fineprint{margin:10px 0 0;color:var(--ba-muted);font-size:13px} .site-footer{padding:22px 0 34px;margin-top:24px;border-top:1px solid var(--ba-border);color:var(--ba-muted)} .footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:start} .footer-grid a{color:var(--ba-text)} /* Scroll reveal baseline (works without anime.js too) */ .reveal{opacity:0;transform:translateY(14px);filter:saturate(.95)} .reveal.is-visible{opacity:1;transform:translateY(0);filter:saturate(1);transition:opacity .55s ease, transform .55s ease, filter .55s ease} /* Lightbox */ .lightbox{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:200} .lightbox[aria-hidden="false"]{display:flex} .lightbox__panel{width:min(1100px, calc(100vw - 28px));max-height:calc(100vh - 28px);border-radius:18px;overflow:hidden;border:1px solid var(--ba-border);background:#050912;box-shadow:var(--ba-shadow);position:relative;will-change:transform, opacity} .lightbox__img{width:100%;height:calc(100vh - 28px);max-height:calc(100vh - 28px);object-fit:contain;background:#050912} .lightbox__close{ position:absolute;top:10px;right:10px; width:42px;height:42px;border-radius:999px; border:1px solid var(--ba-border); background:rgba(255,255,255,.08); color:var(--ba-text); } .lightbox__close:focus{outline:none;box-shadow:var(--ba-focus)} /* Floating contact */ .float{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:120} .float a{box-shadow:0 12px 30px rgba(0,0,0,.45)} /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto !important} .btn,.card,.gallery img,.reveal.is-visible{transition:none !important} } /* Render optimization for long pages */ @supports (content-visibility: auto){ .section{content-visibility:auto;contain-intrinsic-size: 1px 900px} .site-footer{content-visibility:auto;contain-intrinsic-size: 1px 320px} } @media (max-width: 920px){ .hero-grid{grid-template-columns:1fr} .hero-media{min-height:210px} .cards{grid-template-columns:1fr} .gallery a{grid-column:span 6} } @media (max-width: 640px){ .nav__toggle{display:inline-flex} .nav__menu{ position:absolute;right:var(--ba-gutter);top:64px; width:min(360px, calc(100vw - 2*var(--ba-gutter))); flex-direction:column;align-items:stretch; padding:10px;border-radius:16px; border:1px solid var(--ba-border); background:rgba(11,18,32,.96); display:none; } .nav[data-open="true"] .nav__menu{display:flex} .nav__menu a{border-radius:12px} .gallery a{grid-column:span 12} .gallery img{height:240px} .quote-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} }