/* ============================================================ BagD — shared styles Light theme is the default; add class "theme-dark" to for the dark (creators) pages. ============================================================ */ :root{ --blue:#2563EB; --blue-bright:#3B82F6; --blue-deep:#1D4ED8; --blue-tint:#EAF1FE; --navy:#0B1B3A; --bg:#F7F9FD; --card:#FFFFFF; --ink:#0B1B3A; --mut:#5B6B85; --line:#E4EAF4; --accent:var(--blue); --shadow:0 10px 30px rgba(11,27,58,.07); --radius:18px; } .theme-dark{ --bg:#070F22; --card:#0D1B3B; --ink:#F4F7FD; --mut:#9EB0D0; --line:#1C2E55; --blue-tint:#12234A; --accent:var(--blue-bright); --shadow:0 14px 36px rgba(0,0,0,.45); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Manrope',system-ui,-apple-system,sans-serif; background:var(--bg);color:var(--ink); font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit} img,svg{display:block;max-width:100%} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px} ::selection{background:var(--blue);color:#fff} .wrap{max-width:1080px;margin:0 auto;padding:0 20px} /* ---------- nav ---------- */ .nav{ position:sticky;top:0;z-index:60; background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .nav-in{max-width:1080px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px} .nav .logo{text-decoration:none;flex:none} .nav .logo img{height:29px;width:auto} .nav-links{display:none;gap:26px;font-size:14.5px;font-weight:700} .nav-links a{text-decoration:none;color:var(--mut);transition:color .15s ease} .nav-links a:hover{color:var(--ink)} @media(min-width:720px){.nav-links{display:flex}} /* ---------- buttons ---------- */ .btn{ display:inline-block;text-align:center;text-decoration:none;cursor:pointer; font-family:inherit;font-weight:800;font-size:15px;letter-spacing:-.1px; padding:14px 26px;border-radius:13px;border:0; background:var(--blue);color:#fff; box-shadow:0 4px 14px rgba(37,99,235,.28); transition:transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(37,99,235,.34);background:var(--blue-deep)} .btn:active{transform:translateY(0) scale(.98)} .btn-ghost{ background:transparent;color:var(--ink); border:1.5px solid var(--line);box-shadow:none; } .btn-ghost:hover{background:var(--card);border-color:var(--mut);box-shadow:none;transform:translateY(-1px)} .btn-navy{background:var(--navy);box-shadow:0 4px 14px rgba(11,27,58,.25)} .btn-navy:hover{background:#12264E;box-shadow:0 8px 20px rgba(11,27,58,.3)} .btn-sm{padding:10px 18px;font-size:13.5px;border-radius:11px} .btn-block{width:100%} /* ---------- type ---------- */ .kick{ font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);margin-bottom:16px; } h1{ font-size:clamp(38px,9vw,72px);font-weight:800; letter-spacing:-.033em;line-height:1.02; text-wrap:balance; } h1 .hl{color:var(--accent)} h2{ font-size:clamp(27px,5.4vw,42px);font-weight:800; letter-spacing:-.025em;line-height:1.08;margin-bottom:14px; text-wrap:balance; } .sub{ font-size:17px;color:var(--mut);max-width:52ch; margin:18px 0 0;font-weight:500; } .sub b{color:var(--ink);font-weight:700} .fine{font-size:12.5px;color:var(--mut);margin-top:14px;font-weight:600;letter-spacing:.02em} section{padding:72px 0} @media(min-width:760px){section{padding:104px 0}} .center{text-align:center} .center .sub{margin-left:auto;margin-right:auto} /* ---------- hero ---------- */ .hero{padding:64px 0 30px} @media(min-width:760px){.hero{padding:104px 0 48px}} /* ---------- cards / grids ---------- */ .card{ background:var(--card);border:1px solid var(--line); border-radius:var(--radius);box-shadow:var(--shadow); } .grid2{display:grid;gap:18px} @media(min-width:760px){.grid2{grid-template-columns:1fr 1fr;gap:24px}} .grid3{display:grid;gap:16px} @media(min-width:760px){.grid3{grid-template-columns:repeat(3,1fr);gap:22px}} /* ---------- doors (index) ---------- */ .door{ display:flex;flex-direction:column;gap:12px; padding:32px 26px;text-align:left;position:relative;overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; } .door:hover{transform:translateY(-3px)} .door .kick{margin-bottom:2px} .door h3{font-size:23px;font-weight:800;letter-spacing:-.02em} .door p{color:var(--mut);font-size:15.5px} .door .btn{margin-top:12px;align-self:flex-start} .door-dark{ background:var(--navy);border-color:#1C2E55;color:#F4F7FD; } .door-dark p{color:#9EB0D0} .door-dark .kick{color:var(--blue-bright)} /* ---------- offer cards ---------- */ .offers{display:grid;gap:14px;margin-top:40px} @media(min-width:720px){.offers{grid-template-columns:1fr 1fr;gap:18px}} .offer{ padding:20px 20px 18px;display:flex;flex-direction:column;gap:8px; transition:transform .2s ease, border-color .2s ease; } .offer:hover{transform:translateY(-3px);border-color:var(--accent)} .offer-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .chip{ font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--accent);background:var(--blue-tint); padding:5px 11px;border-radius:99px; } .offer-top .spots{font-size:12px;font-weight:700;color:var(--mut)} .offer h3{font-size:17.5px;font-weight:800;letter-spacing:-.015em;line-height:1.25} .offer .meta{font-size:12.5px;font-weight:600;color:var(--mut);letter-spacing:.04em} .offer .deal{font-size:16px;font-weight:800;margin-top:2px} .offer .deal s{color:var(--mut);font-weight:600} .offer .deal .zero{color:var(--accent)} .offer .brief{ font-size:12.5px;font-weight:700;color:var(--mut); border:1px dashed var(--line);border-radius:9px;padding:7px 11px; margin-top:6px;align-self:flex-start; } /* ---------- steps ---------- */ .steps{margin-top:40px} .step{padding:26px 24px} .step .n{ width:38px;height:38px;border-radius:12px;background:var(--blue);color:#fff; display:flex;align-items:center;justify-content:center; font-weight:800;font-size:17px;margin-bottom:16px; box-shadow:0 4px 12px rgba(37,99,235,.3); } .step b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px} .step p{font-size:14.5px;color:var(--mut)} /* ---------- checklist ---------- */ .checks{list-style:none;margin:30px 0 0;display:grid;gap:14px;max-width:560px} .checks li{display:flex;gap:13px;align-items:flex-start;font-size:16px;font-weight:500} .checks li em{font-style:normal;color:var(--accent);font-weight:700} .checks .tick{ flex:none;width:24px;height:24px;border-radius:8px;margin-top:2px; background:var(--blue-tint);color:var(--accent); display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:800; } /* ---------- receipt (business math) ---------- */ .receipt{ padding:28px 26px;max-width:440px; border-top:6px solid var(--blue); } .receipt h3{ font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--mut);margin-bottom:18px; } .receipt .line{ display:flex;justify-content:space-between;gap:12px; font-size:14.5px;font-weight:600;padding:9px 0; border-bottom:1px dashed var(--line); } .receipt .line span:last-child{font-weight:800;flex:none} .receipt .total{ display:flex;justify-content:space-between;padding:14px 0 4px; font-size:17px;font-weight:800;color:var(--blue); } .receipt .note{font-size:12.5px;color:var(--mut);font-weight:600;margin-top:12px;line-height:1.55} /* ---------- forms ---------- */ .waitlist{display:flex;flex-direction:column;gap:10px;max-width:460px;margin-top:28px} .waitlist input{ font-family:inherit;font-size:16px;font-weight:600; padding:14px 17px;border-radius:13px;width:100%; border:1.5px solid var(--line);background:var(--card);color:var(--ink); transition:border-color .15s ease; } .waitlist input::placeholder{color:var(--mut);font-weight:500} .waitlist input:focus{outline:none;border-color:var(--accent)} .waitlist.inline{flex-direction:column} @media(min-width:540px){ .waitlist.inline{flex-direction:row} .waitlist.inline input{flex:1} .waitlist.inline .btn{flex:none} } .form-msg{ display:none;max-width:460px;margin-top:28px; padding:15px 18px;border-radius:13px; font-size:14.5px;font-weight:700; } .form-msg.ok{background:var(--blue-tint);color:var(--accent)} .form-msg.err{background:#FDECEC;color:#B4232C} .theme-dark .form-msg.err{background:#3A1220;color:#FF8A93} .sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ---------- CTA band ---------- */ .band{ background:var(--navy);color:#F4F7FD;border-radius:24px; padding:52px 26px;position:relative;overflow:hidden; } .band .kick{color:var(--blue-bright)} .band .sub{color:#9EB0D0} .band .sub b{color:#fff} .band .waitlist input{background:#0D1B3B;border-color:#1C2E55;color:#F4F7FD} .band .waitlist input::placeholder{color:#7E92B8} .band .tagmark{ position:absolute;right:-40px;bottom:-56px;width:250px;opacity:.10; pointer-events:none; } @media(min-width:760px){.band{padding:68px 60px}} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line);padding:30px 0 42px;margin-top:20px} footer .wrap{ display:flex;justify-content:space-between;align-items:center; gap:14px;flex-wrap:wrap; font-size:13px;font-weight:600;color:var(--mut); } footer a{text-decoration:none;color:var(--ink)} footer a:hover{text-decoration:underline;text-underline-offset:3px} footer .foot-links{display:flex;gap:18px;flex-wrap:wrap} /* ---------- reveal on scroll ---------- Hidden state only applies when JS has tagged , so content is never invisible if scripts fail to load. */ .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease} .js .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js .reveal{opacity:1;transform:none;transition:none} .btn,.door,.offer{transition:none} }