/* ============================================================================ The Brick Exchange — shared design system Themeable via [data-theme="pile|exchange|workshop|modular"] on . Lego-playful, premium, responsive, reduced-motion aware. ========================================================================== */ :root{ --red:#d01012; --yellow:#ffcf00; --blue:#0a6cb7; --green:#00963b; --orange:#f5821f; --maxw:1180px; --radius:18px; --radius-sm:12px; --font-display:"Fredoka","Baloo 2",system-ui,sans-serif; --font-body:"Inter",system-ui,-apple-system,sans-serif; /* theme defaults (pile) */ --bg:#fbfaf6; --bg2:#f1eee5; --ink:#191a2b; --muted:#5b5d72; --card:#ffffff; --line:rgba(20,20,40,.10); --accent:var(--red); --accent-ink:#fff; --glow:transparent; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,.display{font-family:var(--font-display); font-weight:600; line-height:1.04; margin:0} a{color:inherit; text-decoration:none} img{max-width:100%} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px} .eyebrow{font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.74rem; color:var(--accent)} .muted{color:var(--muted)} /* ---- THEMES ------------------------------------------------------------- */ body[data-theme="pile"]{ --bg:#fbfaf6; --bg2:#f1eee5; --ink:#191a2b; --muted:#5b5d72; --card:#fff; --accent:var(--red); --accent-ink:#fff; } body[data-theme="exchange"]{ --bg:#0a0d1a; --bg2:#11162a; --ink:#eaf0ff; --muted:#9aa6c8; --card:rgba(255,255,255,.045); --line:rgba(140,170,255,.16); --accent:#2fe3ff; --accent-ink:#04121a; --glow:rgba(47,227,255,.45); } body[data-theme="workshop"]{ --bg:#f4ecdd; --bg2:#ece0c9; --ink:#2a2117; --muted:#6f6452; --card:#fffdf7; --line:rgba(60,45,20,.14); --accent:#2f7d36; --accent-ink:#fff; } body[data-theme="modular"]{ --bg:#edeae2; --bg2:#e2ddd1; --ink:#23262c; --muted:#646a74; --card:#fbfaf6; --line:rgba(30,35,45,.12); --accent:#e0892a; --accent-ink:#1c130a; } /* ---- studs & bricks (decorative) --------------------------------------- */ .stud-row{display:flex; gap:10px} .stud{width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.85), rgba(0,0,0,.12) 70%), var(--c,var(--accent)); box-shadow:inset 0 -2px 3px rgba(0,0,0,.25);} .brik{position:relative; border-radius:10px; background:var(--c,var(--accent)); box-shadow:inset 0 -7px 0 rgba(0,0,0,.20), 0 8px 18px rgba(0,0,0,.16);} .brik::before{content:""; position:absolute; left:0; right:0; top:-7px; height:14px; background-image:radial-gradient(circle, var(--c,var(--accent)) 50%, transparent 52%); background-size:25% 100%; background-repeat:repeat-x; filter:brightness(1.06);} /* ---- nav ---------------------------------------------------------------- */ .nav{position:fixed; inset:0 0 auto 0; z-index:50; backdrop-filter:blur(10px); background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--line);} .nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px} .brand{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:600; font-size:1.18rem; white-space:nowrap} .brand .mark{width:38px; height:30px; flex:0 0 auto} .nav-links{display:flex; gap:26px; align-items:center} .nav-links a{font-weight:600; color:var(--muted); font-size:.96rem} .nav-links a:hover{color:var(--ink)} .nav-cta{display:flex; gap:12px; align-items:center} .burger{display:none; width:44px; height:40px; border:1px solid var(--line); border-radius:10px; background:var(--card); cursor:pointer; align-items:center; justify-content:center} .burger span,.burger span::before,.burger span::after{content:""; display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:.25s} .burger span::before{position:absolute; top:-6px} .burger span::after{position:absolute; top:6px} /* ---- buttons ------------------------------------------------------------ */ .btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:1rem; padding:13px 22px; border-radius:14px; cursor:pointer; border:none; transition:transform .12s ease, box-shadow .12s ease; text-decoration:none} .btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:0 6px 0 color-mix(in srgb, var(--accent) 62%, #000), 0 12px 26px var(--glow);} .btn-primary:active{transform:translateY(5px); box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 62%,#000)} .btn-ghost{background:var(--card); color:var(--ink); border:1px solid var(--line)} .btn-ghost:hover{transform:translateY(-2px)} .btn-sm{padding:9px 16px; font-size:.9rem; border-radius:11px; box-shadow:0 4px 0 color-mix(in srgb, var(--accent) 62%, #000)} /* ---- hero --------------------------------------------------------------- */ .hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden} .hero canvas{position:absolute; inset:0; width:100%; height:100%; display:block} /* theme-aware scrim: protects the text column, leaves right-side bricks vivid */ .hero::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(100deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 36%, transparent 66%);} .hero .wrap{position:relative; z-index:2; padding-top:90px; padding-bottom:60px} .hero h1{text-shadow:0 1px 0 color-mix(in srgb, var(--bg) 55%, transparent)} .hero h1{font-size:clamp(2.5rem,7vw,5.2rem); letter-spacing:-.01em} .hero p.lead{font-size:clamp(1.05rem,2.2vw,1.35rem); max-width:30ch; color:var(--muted); margin:22px 0 30px} .hero .cta-row{display:flex; gap:14px; flex-wrap:wrap} .pill{display:inline-flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line); padding:7px 14px; border-radius:999px; font-weight:600; font-size:.85rem; margin-bottom:22px} .pill .dot{width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 30%,transparent)} /* ---- ticker ------------------------------------------------------------- */ .ticker{overflow:hidden; border-block:1px solid var(--line); background:var(--bg2)} .ticker-track{display:flex; gap:42px; white-space:nowrap; padding:13px 0; width:max-content; animation:scroll-x 32s linear infinite} .ticker:hover .ticker-track{animation-play-state:paused} .tk{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.95rem; font-variant-numeric:tabular-nums} .tk .up{color:var(--green)} .tk .dn{color:var(--red)} .tk .set{color:var(--muted)} @keyframes scroll-x{to{transform:translateX(-50%)}} /* ---- sections ----------------------------------------------------------- */ section{position:relative} .section{padding:clamp(64px,9vw,120px) 0} .section h2{font-size:clamp(1.9rem,4.4vw,3.1rem)} .lead-2{font-size:1.1rem; color:var(--muted); max-width:54ch; margin-top:14px} .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px} .stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px} .stat b{font-family:var(--font-display); font-size:2.1rem; display:block} .stat span{color:var(--muted); font-size:.9rem; font-weight:600} .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:42px} .feature{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:transform .2s ease, box-shadow .2s ease; position:relative; overflow:hidden} .feature:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.12)} .feature .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px; background:color-mix(in srgb, var(--accent) 16%, transparent); font-size:1.4rem} .feature h3{font-size:1.25rem; margin-bottom:8px} .feature p{color:var(--muted); font-size:.97rem; margin:0} .feature .tag{position:absolute; top:16px; right:16px; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)} .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:42px; counter-reset:s} .step{position:relative; padding:24px 20px; border:1px dashed var(--line); border-radius:var(--radius); background:var(--card)} .step::before{counter-increment:s; content:counter(s); font-family:var(--font-display); font-weight:600; width:38px; height:38px; border-radius:10px; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; margin-bottom:12px; box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 60%,#000)} .step h4{font-family:var(--font-display); font-weight:600; font-size:1.08rem; margin:0 0 6px} .step p{margin:0; color:var(--muted); font-size:.92rem} .cta-band{background:var(--accent); color:var(--accent-ink); border-radius:26px; padding:clamp(34px,5vw,60px); text-align:center; position:relative; overflow:hidden} .cta-band h2{color:var(--accent-ink); font-size:clamp(1.8rem,4vw,3rem)} .cta-band .btn-ghost{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); color:var(--accent-ink)} footer{padding:50px 0 70px; border-top:1px solid var(--line); color:var(--muted)} footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center} /* ---- sign-in ------------------------------------------------------------ */ .auth{min-height:100svh; display:grid; grid-template-columns:1.05fr .95fr} .auth-brand{position:relative; overflow:hidden; background:var(--bg2); display:flex; flex-direction:column; justify-content:space-between; padding:40px} .auth-brand canvas{position:absolute; inset:0; width:100%; height:100%} .auth-brand .inner{position:relative; z-index:2} .auth-brand h2{font-size:clamp(2rem,3.4vw,3rem); margin-top:18px; max-width:14ch} .auth-form{display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg)} .auth-card{width:min(420px,100%)} .auth-card h1{font-size:2rem; margin-bottom:6px} .field{margin:16px 0} .field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:7px} .field input{width:100%; padding:14px 15px; border-radius:13px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:1rem; font-family:var(--font-body); transition:.15s} .field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)} .auth-card .btn-primary{width:100%; justify-content:center; margin-top:8px} .auth-row{display:flex; justify-content:space-between; align-items:center; font-size:.88rem; color:var(--muted); margin-top:14px} .divider{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.82rem; margin:20px 0} .divider::before,.divider::after{content:""; height:1px; background:var(--line); flex:1} /* ---- gallery ------------------------------------------------------------ */ .gal-hero{padding:90px 0 30px; text-align:center} .gal-hero h1{font-size:clamp(2.4rem,6vw,4.4rem)} .logos{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; margin:30px 0 10px} .logo-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; text-align:center} .logo-card svg{height:54px; width:auto} .logo-card small{display:block; margin-top:14px; color:var(--muted); font-weight:600} .concepts{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin:24px 0 60px} .ccard{border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#fff; transition:transform .2s, box-shadow .2s} .ccard:hover{transform:translateY(-6px); box-shadow:0 22px 50px rgba(0,0,0,.14)} .ccard .top{height:150px; display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-size:1.5rem} .ccard .body{padding:22px} .ccard .body p{color:var(--muted); margin:.4rem 0 16px} .ccard .links{display:flex; gap:10px} /* reveal (GSAP enhances; visible by default if JS/anim off) */ [data-reveal]{opacity:1} .js [data-reveal]{opacity:0; transform:translateY(22px)} /* ---- responsive --------------------------------------------------------- */ @media (max-width:880px){ .nav-links{position:fixed; inset:68px 0 auto 0; flex-direction:column; background:var(--bg); border-bottom:1px solid var(--line); padding:18px 22px; gap:16px; transform:translateY(-130%); transition:.3s; z-index:40} .nav-links.open{transform:translateY(0)} .burger{display:flex} /* stronger, top-anchored scrim so the headline + copy stay legible over a busy portrait scene */ .hero::before{background:linear-gradient(168deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 50%, transparent 92%)} .stats{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:1fr} .steps{grid-template-columns:1fr 1fr} .auth{grid-template-columns:1fr} .auth-brand{min-height:38vh} .concepts{grid-template-columns:1fr} } @media (max-width:600px){ /* phones: keep logo + hamburger; the hero carries the primary CTA, so drop the nav button to avoid overlap */ .nav-cta .btn{display:none} .brand{font-size:1.05rem} .brand .mark{width:32px; height:26px} } @media (max-width:520px){ .steps{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} } @media (prefers-reduced-motion:reduce){ .ticker-track{animation:none} *{scroll-behavior:auto} } /* ============================================================================ BX nav — desktop grouped dropdowns + mobile arc-burst bottom nav (2026-07) Uses var(--accent) (amber on the pile theme). bx- prefixed to avoid clashes. ========================================================================== */ .bx-nav{display:flex;align-items:center;gap:15px} .bx-nav a,.bx-grp>button{font-family:var(--font-body);font-size:.9rem;color:var(--muted);white-space:nowrap;background:none;border:0;cursor:pointer;padding:6px 2px;display:inline-flex;align-items:center;gap:5px;line-height:1} .bx-nav a:hover,.bx-grp>button:hover{color:var(--ink)} .bx-nav a.on{color:var(--accent);font-weight:700} .bx-grp{position:relative} .bx-grp>button .cx{font-size:.6rem;transition:transform .18s} .bx-grp.open>button{color:var(--ink);font-weight:600} .bx-grp.open>button .cx{transform:rotate(180deg)} .bx-menu{position:absolute;top:calc(100% + 9px);left:-10px;min-width:206px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:7px;display:none;z-index:60;box-shadow:0 16px 36px rgba(90,60,10,.16)} .bx-grp.open .bx-menu{display:block} .bx-menu a{display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:9px;color:var(--ink);font-size:.9rem} .bx-menu a:hover{background:var(--bg2)} .bx-menu a.on{color:var(--accent);font-weight:700} .bx-menu .k{width:20px;text-align:center;font-size:1rem} .bx-sell{color:var(--accent-ink)!important;background:var(--accent);border-radius:999px;padding:7px 16px!important;font-weight:700} .bx-sell:hover{filter:brightness(.93)} .bx-bell{position:relative;font-size:1.05rem} .bx-bell .bx-badge{position:absolute;top:-7px;right:-10px;background:var(--accent);color:#fff;font-size:.62rem;font-weight:700;border-radius:9px;padding:0 5px} .bx-nav a:focus-visible,.bx-grp>button:focus-visible,.bx-menu a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:7px} /* ---- mobile arc-burst (phones/tablets) ---- */ .bx-mnav{display:none} @media(max-width:900px){ .bx-nav{display:none} .bx-mnav{display:block} main.wrap{padding-bottom:118px!important} } .bx-scrim{position:fixed;inset:0;background:rgba(42,26,5,.30);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:44} .bx-mnav.open .bx-scrim{opacity:1;pointer-events:auto} .bx-bar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:46;display:flex;align-items:center;gap:2px;padding:7px 10px;border-radius:999px;width:min(94vw,430px);justify-content:space-between;background:rgba(255,253,248,.82);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(48,38,22,.18);box-shadow:0 16px 44px rgba(90,60,10,.30);transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s ease,padding .3s ease} .bx-bar.shrink{transform:translateX(-50%) scale(.82) translateY(6px);opacity:.92;padding:5px 8px} .bx-tab{flex:1;background:none;border:0;color:var(--muted);font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:14px;font-size:9.5px;font-weight:600;text-decoration:none} .bx-tab .ic{font-size:19px;line-height:1} .bx-tab.on{color:var(--ink)} .bx-tab.on .ic{filter:drop-shadow(0 0 7px rgba(163,90,7,.5))} .bx-cwrap{flex:0 0 auto;width:60px;display:flex;justify-content:center} .bx-center{width:54px;height:54px;margin-top:-26px;border-radius:50%;color:#fff;font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;background:linear-gradient(135deg,#e0973a,#a35a07);border:2px solid var(--card);box-shadow:0 6px 18px rgba(163,90,7,.45);transition:transform .4s ease,box-shadow .3s ease;font-family:inherit;line-height:1} .bx-center:active{transform:scale(.93)} .bx-mnav.open .bx-center{transform:rotate(135deg) scale(1.06);box-shadow:0 0 22px rgba(199,125,42,.8),0 6px 18px rgba(163,90,7,.4)} .bx-arc{position:fixed;left:50%;bottom:calc(40px + env(safe-area-inset-bottom,0px));width:0;height:0;z-index:45;pointer-events:none} .bx-x{position:absolute;left:0;bottom:0;width:56px;transform:translate(-50%,10px) scale(.2);opacity:0;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;text-decoration:none;transition:transform .45s cubic-bezier(.34,1.55,.5,1),opacity .3s ease} .bx-mnav.open .bx-x{opacity:1;pointer-events:auto} .bx-x .b{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink);background:rgba(255,253,248,.9);border:1px solid rgba(48,38,22,.18);box-shadow:0 8px 20px rgba(90,60,10,.28);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} .bx-x .l{font-size:9.5px;color:var(--ink);font-weight:600;white-space:nowrap;text-shadow:0 1px 3px rgba(255,253,248,.9)} .bx-x:nth-child(1){transition-delay:0s}.bx-x:nth-child(2){transition-delay:.035s}.bx-x:nth-child(3){transition-delay:.07s}.bx-x:nth-child(4){transition-delay:.105s}.bx-x:nth-child(5){transition-delay:.14s}.bx-x:nth-child(6){transition-delay:.175s}.bx-x:nth-child(7){transition-delay:.21s} .bx-mnav.open .bx-x:nth-child(1){transform:translate(calc(-50% - 132px),-40px) scale(1)} .bx-mnav.open .bx-x:nth-child(2){transform:translate(calc(-50% - 104px),-96px) scale(1)} .bx-mnav.open .bx-x:nth-child(3){transform:translate(calc(-50% - 52px),-134px) scale(1)} .bx-mnav.open .bx-x:nth-child(4){transform:translate(-50%,-150px) scale(1)} .bx-mnav.open .bx-x:nth-child(5){transform:translate(calc(-50% + 52px),-134px) scale(1)} .bx-mnav.open .bx-x:nth-child(6){transform:translate(calc(-50% + 104px),-96px) scale(1)} .bx-mnav.open .bx-x:nth-child(7){transform:translate(calc(-50% + 132px),-40px) scale(1)} .bx-center:focus-visible,.bx-tab:focus-visible,.bx-x:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px} @media(prefers-reduced-motion:reduce){.bx-x,.bx-bar,.bx-center{transition:opacity .2s ease}} /* ---- bare mode (auth pages hide app chrome) + branded login ---- */ body.bx-bare .topbar, body.bx-bare .bx-mnav, body.bx-bare footer{display:none!important} body.bx-bare main.wrap{padding:0!important;max-width:none} .bx-auth{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh} .bx-auth-brand{background:linear-gradient(150deg,#c9791f 0%,#a35a07 55%,#7a4205 100%);color:#fff;display:flex;align-items:center;padding:56px clamp(28px,5vw,72px);position:relative;overflow:hidden} .bx-auth-brand::after{content:"";position:absolute;right:-90px;bottom:-90px;width:320px;height:320px;border-radius:34px;background:rgba(255,255,255,.07);transform:rotate(18deg)} .bx-auth-brand::before{content:"";position:absolute;right:70px;top:-60px;width:150px;height:150px;border-radius:26px;background:rgba(255,255,255,.06);transform:rotate(-12deg)} .bx-auth-brand>div{position:relative;z-index:1;max-width:440px} .bx-auth-logo{font-family:var(--font-display);font-weight:700;font-size:1.5rem;display:flex;align-items:center;gap:8px;margin-bottom:26px} .bx-auth-brand h1{font-family:var(--font-display);color:#fff;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.05;margin:0 0 14px} .bx-auth-brand p{color:rgba(255,255,255,.9);font-size:1.02rem;line-height:1.6;margin:0 0 26px} .bx-auth-feat{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px} .bx-auth-feat li{display:flex;align-items:center;gap:11px;font-weight:600;font-size:.98rem} .bx-auth-feat li .k{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex:0 0 auto} .bx-auth-panel{display:flex;align-items:center;justify-content:center;padding:44px 24px;background:var(--bg)} .bx-auth-card{width:100%;max-width:392px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:34px 32px;box-shadow:0 18px 50px rgba(90,60,10,.10)} .bx-auth-card h2{font-family:var(--font-display);font-size:1.6rem;margin:0 0 4px} .bx-auth-card .bx-sub{color:var(--muted);font-size:.92rem;margin:0 0 20px} .bx-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .bx-field label{font-size:.82rem;font-weight:600;color:var(--muted)} .bx-field input{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:1rem;font-family:var(--font-body);color:var(--ink)} .bx-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(163,90,7,.16)} .bx-auth-btn{width:100%;justify-content:center;margin-top:6px;padding:13px;border-radius:12px;border:0;background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:600;font-size:1rem;cursor:pointer} .bx-auth-btn:hover{filter:brightness(.94)} .bx-auth-err{background:#fbe9e2;border:1px solid #eabfae;color:#b23b16;border-radius:10px;padding:9px 12px;font-size:.88rem;font-weight:600;margin:0 0 14px} .bx-auth-switch{color:var(--muted);font-size:.9rem;margin:16px 0 0;text-align:center} .bx-auth-switch a{color:var(--accent);font-weight:700} .bx-auth-note{color:var(--muted);font-size:.72rem;margin:16px 0 0;text-align:center;opacity:.8} @media(max-width:820px){ .bx-auth{grid-template-columns:1fr} .bx-auth-brand{padding:40px 28px 30px;min-height:auto} .bx-auth-brand h1{font-size:1.9rem} .bx-auth-feat{display:none} .bx-auth-panel{padding:28px 20px 50px} }