/* ============================================================ THE 1% FORUM — SHARED DESIGN SYSTEM (theme.css) Dallas, TX · Feb 27–28, 2027 Black & gold · masculine · conversion-first Fonts (load in of every page): Cinzel 700/800/900 · Oswald 300/400/500/600/700 · Hanken Grotesk 300/400/500/600/700/800 ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root{ /* surfaces */ --ink-900:#060606; --ink-800:#0a0a0b; /* page background */ --ink-700:#101012; --panel:#141416; --panel-2:#1a1a1e; --panel-3:#202026; /* gold system */ --gold:#c9a24b; --gold-bright:#e8cd84; --gold-deep:#9d7b32; --gold-ink:#1a1407; /* text on gold */ --gold-glow:rgba(201,162,75,0.35); /* hairlines */ --line:rgba(201,162,75,0.20); --line-strong:rgba(201,162,75,0.42); --line-soft:rgba(255,255,255,0.07); /* text */ --text:#ece8e0; --text-dim:#b6b1a6; --muted:#8c877d; --muted-2:#605c53; /* signal — used sparingly, never as a CTA */ --crimson:#9c2b22; --crimson-bright:#c9483b; --ember:#c66a35; /* type */ --f-display:'Cinzel', Georgia, serif; --f-cond:'Oswald', 'Arial Narrow', sans-serif; --f-body:'Hanken Grotesk', system-ui, sans-serif; /* radius / shadow */ --r-sm:3px; --r-md:6px; --r-lg:10px; --shadow-card:0 24px 60px -28px rgba(0,0,0,0.85); --shadow-gold:0 14px 40px -14px var(--gold-glow); /* layout */ --maxw:1200px; --gut:clamp(20px,5vw,56px); } /* ---------- 2. RESET / BASE ---------- */ *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ background:var(--ink-800); color:var(--text); font-family:var(--f-body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ::selection{background:var(--gold);color:var(--gold-ink);} /* subtle page-top glow used on most pages */ .bg-glow{ position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(1100px 620px at 50% -8%, rgba(201,162,75,0.10), transparent 62%), radial-gradient(900px 500px at 100% 0%, rgba(155,120,50,0.06), transparent 60%); } /* ---------- 3. LAYOUT ---------- */ .container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:1;} .container--narrow{max-width:920px;} .section{padding-block:clamp(56px,8vw,118px);position:relative;} .section--tight{padding-block:clamp(40px,5vw,72px);} .center{text-align:center;} .divider{height:1px;background:var(--line-soft);border:0;} .rule-gold{width:62px;height:2px;border:0;margin:22px 0; background:linear-gradient(90deg,var(--gold),transparent);} .rule-gold.center{margin-inline:auto; background:linear-gradient(90deg,transparent,var(--gold),transparent);} /* ---------- 4. TYPOGRAPHY ---------- */ .eyebrow{ font-family:var(--f-cond);font-weight:500; text-transform:uppercase;letter-spacing:0.46em; font-size:clamp(11px,1.1vw,13px);color:var(--gold); } .kicker{ font-family:var(--f-cond);font-weight:500;text-transform:uppercase; letter-spacing:0.34em;font-size:13px;color:var(--gold-deep); display:inline-flex;align-items:center;gap:14px; } .kicker::before{content:"";width:30px;height:1px;background:var(--gold-deep);} .kicker.center{justify-content:center;} .kicker.center::after{content:"";width:30px;height:1px;background:var(--gold-deep);} .display{ font-family:var(--f-display);font-weight:800;line-height:0.98; letter-spacing:0.005em;text-transform:uppercase; } .h-hero{font-family:var(--f-display);font-weight:900;text-transform:uppercase; font-size:clamp(40px,7.4vw,104px);line-height:0.95;letter-spacing:0.005em;} .h1{font-family:var(--f-display);font-weight:800;text-transform:uppercase; font-size:clamp(32px,5vw,64px);line-height:1.02;} .h2{font-family:var(--f-display);font-weight:700;text-transform:uppercase; font-size:clamp(26px,3.6vw,44px);line-height:1.06;} .h3{font-family:var(--f-display);font-weight:700; font-size:clamp(20px,2.2vw,28px);line-height:1.15;letter-spacing:0.01em;} .gold{color:var(--gold-bright);} .gold-line{color:var(--gold);} .dim{color:var(--text-dim);} .lead{font-size:clamp(17px,1.5vw,20px);color:var(--text-dim);max-width:60ch;line-height:1.6;} .body-lg{font-size:18px;color:var(--text-dim);} p{color:var(--text-dim);} strong,b{color:var(--text);font-weight:700;} .label{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:0.2em; font-size:12px;font-weight:500;color:var(--muted);} /* ---------- 5. BUTTONS ---------- */ .btn{ font-family:var(--f-cond);font-weight:600;text-transform:uppercase; letter-spacing:0.14em;font-size:15px; display:inline-flex;align-items:center;justify-content:center;gap:0.6em; padding:16px 30px;border:1px solid transparent;border-radius:var(--r-sm); cursor:pointer;transition:transform .18s ease, box-shadow .25s ease, background .25s ease, color .2s ease, border-color .2s ease; white-space:nowrap;line-height:1; } .btn .arw{transition:transform .2s ease;} .btn:hover .arw{transform:translateX(4px);} /* PRIMARY — reserved ONLY for Register / Buy. The single focal CTA. */ .btn-primary{ color:var(--gold-ink); background:linear-gradient(177deg,#f0d79a 0%,var(--gold-bright) 22%,var(--gold) 55%,var(--gold-deep) 100%); border-color:rgba(255,240,200,0.5); box-shadow:var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,0.45); font-weight:700; } .btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 48px -14px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.6);} .btn-primary:active{transform:translateY(0);} /* SECONDARY — outline. community / dinner / events. Never primary styling. */ .btn-secondary{ color:var(--text);background:rgba(255,255,255,0.015); border-color:var(--line-strong); } .btn-secondary:hover{border-color:var(--gold);color:var(--gold-bright);background:rgba(201,162,75,0.06);} /* TERTIARY — text only, with arrow. lowest weight. */ .btn-tertiary{ padding:10px 4px;background:transparent;color:var(--gold); letter-spacing:0.16em;font-size:13.5px; } .btn-tertiary:hover{color:var(--gold-bright);} .btn-lg{padding:20px 40px;font-size:16px;} .btn-sm{padding:11px 20px;font-size:13px;letter-spacing:0.12em;} .btn-block{display:flex;width:100%;} /* ---------- 6. ANNOUNCEMENT BAR ---------- */ .ann{ position:sticky;top:0;z-index:60; background:linear-gradient(90deg,#0d0d0e,#161310 50%,#0d0d0e); border-bottom:1px solid var(--line); font-family:var(--f-cond); } .ann__inner{ max-width:var(--maxw);margin-inline:auto;padding:9px var(--gut); display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap; text-transform:uppercase;letter-spacing:0.14em;font-size:13px; } .ann__msg{color:var(--text-dim);} .ann__msg b{color:var(--gold-bright);font-weight:600;} .ann__count{display:inline-flex;gap:7px;align-items:center;color:var(--gold);font-weight:600;} .ann__count .seg{ background:rgba(201,162,75,0.10);border:1px solid var(--line); border-radius:3px;padding:3px 7px;min-width:34px;text-align:center; font-variant-numeric:tabular-nums;color:var(--gold-bright); } .ann__count .seg small{display:block;font-size:8.5px;letter-spacing:0.12em;color:var(--muted);margin-top:1px;} .ann__link{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px;font-weight:600;} /* ---------- 7. SITE HEADER (sticky) ---------- */ .site-header{ position:sticky;top:var(--ann-h,46px);z-index:50; background:rgba(10,10,11,0.82); backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%); border-bottom:1px solid var(--line-soft); transition:background .3s ease, border-color .3s ease; } .site-header__inner{ max-width:var(--maxw);margin-inline:auto;padding:14px var(--gut); display:flex;align-items:center;gap:24px; } .site-nav{display:flex;align-items:center;gap:30px;margin-left:auto;} .site-nav a{ font-family:var(--f-cond);text-transform:uppercase;letter-spacing:0.18em; font-size:13.5px;color:var(--text-dim);font-weight:500;transition:color .2s ease;position:relative;white-space:nowrap; } .site-nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .25s ease;} .site-nav a:hover{color:var(--gold-bright);} .site-nav a:hover::after{width:100%;} .nav-toggle{display:none;background:none;border:0;color:var(--text);cursor:pointer;margin-left:auto;} @media(max-width:900px){ .site-nav{display:none;} .nav-toggle{display:inline-flex;} } /* ---------- 8. LOGO / WORDMARK ---------- */ .wordmark{display:inline-flex;align-items:center;gap:13px;} .wordmark__mark{ width:38px;height:42px;flex:none;color:var(--gold); } .wordmark__txt{display:flex;flex-direction:column;line-height:1;} .wordmark__txt .t1{ font-family:var(--f-display);font-weight:800;text-transform:uppercase; letter-spacing:0.12em;font-size:18px;color:var(--text); } .wordmark__txt .t1 em{font-style:normal;color:var(--gold-bright);} .wordmark__txt .t2{ font-family:var(--f-cond);text-transform:uppercase;letter-spacing:0.34em; font-size:9px;color:var(--muted);margin-top:4px; } /* explicit logo-slot placeholder (client drops real logo here) */ .logo-slot{ display:inline-flex;align-items:center;justify-content:center;gap:8px; border:1px dashed var(--line-strong);border-radius:var(--r-sm); padding:14px 22px;color:var(--muted);font-family:var(--f-cond); text-transform:uppercase;letter-spacing:0.22em;font-size:11px; background:repeating-linear-gradient(135deg,rgba(201,162,75,0.04) 0 10px,transparent 10px 20px); } /* ---------- 9. CHIPS / PILLS ---------- */ .chip{ display:inline-flex;align-items:center;gap:8px; border:1px solid var(--line);border-radius:var(--r-sm); padding:7px 14px;background:rgba(255,255,255,0.015); font-family:var(--f-cond);text-transform:uppercase;letter-spacing:0.14em; font-size:12.5px;color:var(--text-dim); } .chip b{color:var(--gold);font-weight:600;} .pill{ display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line); border-radius:999px;padding:8px 17px;font-size:14px;color:var(--text); background:rgba(255,255,255,0.02); } .pill--scarce{border-color:rgba(156,43,34,0.5);color:var(--crimson-bright); background:rgba(156,43,34,0.08);font-family:var(--f-cond);text-transform:uppercase; letter-spacing:0.12em;font-size:12.5px;} .pill--scarce .dot{width:7px;height:7px;border-radius:50%;background:var(--crimson-bright); box-shadow:0 0 0 0 rgba(201,72,59,0.7);animation:pulse 2s infinite;} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(201,72,59,0.6);}70%{box-shadow:0 0 0 8px rgba(201,72,59,0);}100%{box-shadow:0 0 0 0 rgba(201,72,59,0);}} /* ---------- 10. CARDS ---------- */ .card{ background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line-soft);border-radius:var(--r-md); padding:26px;position:relative;overflow:hidden;box-shadow:var(--shadow-card); } .card--accent::before{content:"";position:absolute;inset:0 0 auto 0;height:2px; background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright),transparent);} .card__icon{color:var(--gold);margin-bottom:16px;} .card h3{margin-bottom:8px;} /* ---------- 11. STAT BAND ---------- */ .stat{display:flex;flex-direction:column;gap:4px;} .stat__num{font-family:var(--f-display);font-weight:800;color:var(--gold-bright); font-size:clamp(34px,4.4vw,56px);line-height:1;} .stat__label{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:0.2em; font-size:12.5px;color:var(--muted);} /* ---------- 12. QUOTE / TESTIMONIAL ---------- */ .quote-card{ background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line-soft);border-radius:var(--r-md);padding:30px 30px 26px;position:relative; } .quote-card .mark{font-family:var(--f-display);color:var(--gold);font-size:54px;line-height:0.5; height:24px;display:block;opacity:0.7;} .quote-card p{color:var(--text);font-size:17px;line-height:1.6;font-style:italic;} .quote-card .by{display:flex;align-items:center;gap:12px;margin-top:18px;} .quote-card .by .av{width:42px;height:42px;border-radius:50%;flex:none; background:linear-gradient(135deg,var(--panel-3),var(--ink-700));border:1px solid var(--line); display:grid;place-items:center;color:var(--gold);font-family:var(--f-display);font-weight:700;} .quote-card .by .nm{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:0.1em; font-size:13px;color:var(--text);} .quote-card .by .rl{font-size:12.5px;color:var(--muted);font-style:normal;} /* ---------- 13. MOTIF ICONS ---------- */ .motif{color:var(--gold);display:inline-block;} /* ---------- 14. FOOTER ---------- */ .site-footer{ background:linear-gradient(180deg,var(--ink-800),var(--ink-900)); border-top:1px solid var(--line);padding-block:60px 36px;position:relative;z-index:1; } .site-footer__grid{ max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut); display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px; } @media(max-width:760px){.site-footer__grid{grid-template-columns:1fr 1fr;gap:32px;}} @media(max-width:460px){.site-footer__grid{grid-template-columns:1fr;}} .foot-col h4{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:0.2em; font-size:12px;color:var(--gold-deep);margin-bottom:16px;} .foot-col a{display:block;color:var(--text-dim);font-size:14.5px;padding:5px 0;transition:color .2s;} .foot-col a:hover{color:var(--gold-bright);} .foot-blurb{color:var(--muted);font-size:14px;max-width:34ch;margin-top:14px;} .site-footer__base{ max-width:var(--maxw);margin:40px auto 0;padding:22px var(--gut) 0; border-top:1px solid var(--line-soft);display:flex;justify-content:space-between; gap:16px;flex-wrap:wrap;color:var(--muted-2);font-size:12.5px; font-family:var(--f-cond);text-transform:uppercase;letter-spacing:0.12em; } /* ---------- 15. UTIL ---------- */ .grid{display:grid;gap:20px;} .cols-2{grid-template-columns:repeat(2,1fr);} .cols-3{grid-template-columns:repeat(3,1fr);} .cols-4{grid-template-columns:repeat(4,1fr);} @media(max-width:860px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr;}} .flex{display:flex;} .gap-sm{gap:10px;}.gap{gap:18px;}.gap-lg{gap:30px;} .wrap{flex-wrap:wrap;} .items-center{align-items:center;} .mt-sm{margin-top:12px;}.mt{margin-top:24px;}.mt-lg{margin-top:40px;} /* ---------- 16. SECTION HEAD (shared) ---------- */ .section-head{max-width:64ch;margin-bottom:clamp(30px,4vw,52px);} .section-head.center{margin-inline:auto;text-align:center;} .section-head .h2{margin-top:12px;} .section-head .lead{margin-top:14px;} .section-head.center .lead{margin-inline:auto;} /* ---------- 17. BENEFIT TILE ---------- */ .benefit{ background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line-soft);border-radius:var(--r-md); padding:30px 26px;transition:border-color .25s ease, transform .25s ease; position:relative;overflow:hidden; } .benefit:hover{border-color:var(--line-strong);transform:translateY(-3px);} .benefit .ico{color:var(--gold);margin-bottom:18px;} .benefit h3{font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:.01em;margin-bottom:8px;} .benefit p{font-size:15px;line-height:1.55;} /* ---------- 18. SPEAKER CARD ---------- */ .spk-card{ position:relative;border:1px solid var(--line-soft);border-radius:var(--r-md); overflow:hidden;background:var(--panel);cursor:pointer;display:block; transition:border-color .25s ease, transform .25s ease; } .spk-card:hover{border-color:var(--gold);transform:translateY(-3px);} .spk-card__img{aspect-ratio:4/5;width:100%;object-fit:cover;object-position:center top; filter:grayscale(0.35) contrast(1.03) brightness(0.92);transition:filter .3s ease, transform .5s ease;} .spk-card:hover .spk-card__img{filter:grayscale(0) contrast(1.05) brightness(1);transform:scale(1.03);} .spk-card__grad{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 38%,rgba(8,8,9,0.55) 66%,rgba(6,6,6,0.96) 100%);} .spk-card__body{position:absolute;left:0;right:0;bottom:0;padding:20px;z-index:2;} .spk-card__name{display:block;font-family:var(--f-display);font-weight:700;font-size:21px;line-height:1.1;color:var(--text);} .spk-card__role{display:block;font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.16em; font-size:11.5px;color:var(--gold);margin-top:7px;} .spk-card__plus{position:absolute;top:14px;right:14px;z-index:2;width:30px;height:30px;border-radius:50%; border:1px solid var(--line-strong);background:rgba(10,10,11,.6);display:grid;place-items:center;color:var(--gold); opacity:0;transition:opacity .25s ease;} .spk-card:hover .spk-card__plus{opacity:1;} /* "more soon" tile */ .spk-card--soon{display:flex;flex-direction:column;align-items:center;justify-content:center; aspect-ratio:4/5;text-align:center;gap:14px;cursor:default; background:repeating-linear-gradient(135deg,rgba(201,162,75,0.03) 0 12px,transparent 12px 24px);} .spk-card--soon:hover{transform:none;border-color:var(--line-strong);} /* ---------- 19. FAQ ---------- */ .faq__item{border-bottom:1px solid var(--line-soft);} .faq__q{width:100%;background:none;border:0;cursor:pointer;text-align:left; display:flex;align-items:center;justify-content:space-between;gap:20px; padding:24px 4px;font-family:var(--f-display);font-weight:600;font-size:clamp(17px,1.8vw,21px);color:var(--text);} .faq__q .pm{flex:none;width:26px;height:26px;position:relative;color:var(--gold);transition:transform .3s ease;} .faq__q .pm::before,.faq__q .pm::after{content:"";position:absolute;background:currentColor;transition:opacity .3s ease;} .faq__q .pm::before{left:50%;top:4px;width:1.5px;height:18px;transform:translateX(-50%);} .faq__q .pm::after{top:50%;left:4px;height:1.5px;width:18px;transform:translateY(-50%);} .faq__item[open] .pm::before{opacity:0;} .faq__a{padding:0 4px 26px;color:var(--text-dim);font-size:16px;line-height:1.65;max-width:74ch;} .faq__a a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px;} /* ---------- 20. TICKET / PRICING ---------- */ .ticket{ background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:0;overflow:hidden; box-shadow:var(--shadow-card); } .ticket__head{padding:28px 32px;border-bottom:1px solid var(--line-soft); background:radial-gradient(120% 120% at 0% 0%, rgba(201,162,75,0.10), transparent 60%);} .ticket__name{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:26px;letter-spacing:.02em;} .ticket__price{display:flex;align-items:baseline;gap:12px;margin-top:12px;flex-wrap:wrap;} .ticket__now{font-family:var(--f-display);font-weight:800;font-size:48px;color:var(--gold-bright);line-height:1;} .ticket__was{font-family:var(--f-cond);font-size:18px;color:var(--muted);text-decoration:line-through;} .ticket__body{padding:26px 32px 32px;} .ticket__incl{list-style:none;display:grid;gap:13px;margin-bottom:26px;} .ticket__incl li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--text-dim);} .ticket__incl li svg{flex:none;color:var(--gold);margin-top:3px;} .addon{display:flex;gap:16px;align-items:center;padding:18px 20px;border:1px solid var(--line-soft); border-radius:var(--r-md);background:rgba(255,255,255,0.012);transition:border-color .2s ease;} .addon:hover{border-color:var(--line-strong);} .addon__tag{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--gold-deep);} .addon__name{font-family:var(--f-display);font-weight:700;font-size:18px;margin-top:3px;} .addon__price{margin-left:auto;font-family:var(--f-display);font-weight:700;color:var(--gold-bright);font-size:20px;white-space:nowrap;text-align:right;} .addon__go{flex:none;width:18px;height:18px;margin-left:16px;color:var(--gold-deep);} a.addon{text-decoration:none;color:inherit;align-items:center;} a.addon .addon__name{transition:color .2s ease;} a.addon:hover{border-color:var(--gold);background:rgba(201,162,75,0.04);} a.addon:hover .addon__name{color:var(--gold-bright);} a.addon .addon__go{transition:transform .2s ease,color .2s ease;} a.addon:hover .addon__go{color:var(--gold-bright);transform:translateX(3px);} /* ---------- 21. SECONDARY (demoted) CARD ---------- */ .sec-card{ display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:var(--r-md); border:1px solid var(--line-soft);background:linear-gradient(180deg,#141416,#0e0e10); transition:border-color .25s ease; } .sec-card:hover{border-color:var(--line-strong);} .sec-card__k{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.2em;font-size:11.5px;color:var(--gold-deep);} .sec-card h3{font-family:var(--f-display);font-weight:700;font-size:23px;} .sec-card p{font-size:14.5px;flex:1;} /* ---------- 22. GALLERY TEASER ---------- */ .gal{display:grid;gap:12px;grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;} @media(max-width:760px){.gal{grid-template-columns:repeat(2,1fr);}} .gal__cell{position:relative;border:1px solid var(--line-soft);border-radius:var(--r-sm);overflow:hidden; background:repeating-linear-gradient(135deg,#161618 0 14px,#101012 14px 28px); display:grid;place-items:center;color:var(--muted-2);} .gal__cell.tall{grid-row:span 2;} .gal__cell .ph{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--muted-2);} .gal__cell img{width:100%;height:100%;object-fit:cover;} /* ---------- 23. CTA BAND ---------- */ .cta-band{position:relative;text-align:center;padding-block:clamp(60px,8vw,110px); background:radial-gradient(900px 420px at 50% 120%, rgba(201,162,75,0.14), transparent 62%);} .cta-band::before,.cta-band::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line);} .cta-band::before{top:0;}.cta-band::after{bottom:0;} /* ---------- 24. MOBILE STICKY CTA BAR ---------- */ .mobile-cta{ position:fixed;left:0;right:0;bottom:0;z-index:90;display:none; align-items:center;gap:14px;padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px)); background:rgba(10,10,11,0.94);backdrop-filter:blur(14px); border-top:1px solid var(--line);box-shadow:0 -16px 40px -20px #000; } .mobile-cta__info{display:flex;flex-direction:column;line-height:1.1;} .mobile-cta__info span{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.16em;font-size:9.5px;color:var(--muted);} .mobile-cta__info b{font-family:var(--f-display);font-weight:800;font-size:19px;color:var(--gold-bright);} .mobile-cta .btn{margin-left:auto;flex:none;} @media(max-width:720px){ .mobile-cta{display:flex;} body{padding-bottom:76px;} .hero-switch{bottom:86px;} } /* ---------- 25. FOOTER LEGAL LINKS ---------- */ .site-footer__base a{color:inherit;transition:color .2s ease;text-underline-offset:3px;} .site-footer__base a:hover{color:var(--gold-bright);text-decoration:underline;} /* ---------- shared mobile nav ---------- */ .mnav{display:none;border-bottom:1px solid var(--line-soft);background:rgba(10,10,11,.97);} .mnav.open{display:block;} .mnav a{display:block;padding:14px var(--gut);font-family:var(--f-cond);text-transform:uppercase; letter-spacing:.16em;font-size:14px;color:var(--text-dim);border-top:1px solid var(--line-soft);} /* ---------- 26. PAGE HERO (shared sub-page header) ---------- */ .page-hero{padding-block:clamp(48px,6vw,86px) clamp(20px,3vw,30px);text-align:center;} /* ---------- 27. LEGAL / PROSE DOC ---------- */ .legal-doc{max-width:820px;} .legal-doc .upd{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.16em; font-size:12px;color:var(--muted-2);margin-bottom:34px;} .legal-doc h2{font-family:var(--f-display);font-weight:700;text-transform:uppercase; font-size:clamp(20px,2.4vw,27px);letter-spacing:.02em;color:var(--text); margin:42px 0 14px;padding-top:22px;border-top:1px solid var(--line-soft);} .legal-doc h2:first-of-type{border-top:0;padding-top:0;margin-top:8px;} .legal-doc h3{font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--gold-bright);margin:24px 0 8px;} .legal-doc p{color:var(--text-dim);font-size:16px;line-height:1.72;margin-bottom:14px;} .legal-doc ul{list-style:none;display:grid;gap:11px;margin:6px 0 18px;} .legal-doc ul li{display:flex;gap:12px;align-items:flex-start;color:var(--text-dim);font-size:15.5px;line-height:1.6;} .legal-doc ul li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:9px;} .legal-doc a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px;} .legal-doc strong{color:var(--text);} .legal-callout{border:1px solid var(--line);border-radius:var(--r-md);padding:20px 24px;margin:24px 0; background:radial-gradient(120% 120% at 0% 0%, rgba(201,162,75,0.07), transparent 60%);} .legal-callout p{margin:0;font-size:15px;} /* ---------- 28. FORM ---------- */ .form{display:grid;gap:20px;} .form-row{display:grid;gap:20px;grid-template-columns:1fr 1fr;} @media(max-width:560px){.form-row{grid-template-columns:1fr;}} .field{display:flex;flex-direction:column;gap:8px;} .field label{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;color:var(--gold-deep);} .field label .req{color:var(--crimson-bright);} .field input,.field select,.field textarea{ font-family:var(--f-body);font-size:15.5px;color:var(--text); background:rgba(255,255,255,0.02);border:1px solid var(--line-soft); border-radius:var(--r-sm);padding:14px 16px;width:100%;transition:border-color .2s ease, background .2s ease; } .field textarea{resize:vertical;min-height:128px;line-height:1.6;} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--gold);background:rgba(201,162,75,0.04);} .field input::placeholder,.field textarea::placeholder{color:var(--muted-2);} .field select option{background:#16150f;color:var(--text);font-family:var(--f-body);} .field select option[disabled]{color:var(--muted-2);} .field select{appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 22px) calc(50% - 3px),calc(100% - 16px) calc(50% - 3px); background-size:6px 6px,6px 6px;background-repeat:no-repeat;} .form-note{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--muted);} .form-success{display:none;border:1px solid var(--line-strong);border-radius:var(--r-md);padding:30px 32px;text-align:center; background:radial-gradient(120% 120% at 50% 0%, rgba(201,162,75,0.10), transparent 65%);} .form-success.show{display:block;} .form-success h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:24px;color:var(--gold-bright);margin-bottom:8px;} /* ---------- 29. CONTACT / INFO CARDS ---------- */ .info-card{display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:var(--r-md); border:1px solid var(--line-soft);background:linear-gradient(180deg,var(--panel-2),var(--panel));} .info-card .ic-k{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--gold-deep);} .info-card .ic-v{font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--text);} .info-card a{color:var(--gold-bright);} /* ---------- 30. VALUE STACK (register) ---------- */ .vstack{list-style:none;display:grid;gap:13px;} .vstack li{display:flex;gap:13px;align-items:flex-start;font-size:16px;color:var(--text-dim);} .vstack li svg{flex:none;color:var(--gold);margin-top:3px;} .vstack li b{color:var(--text);} /* ---------- 31. HOST / ABOUT ---------- */ .host-grid{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(28px,4vw,60px);align-items:center;} @media(max-width:900px){.host-grid{grid-template-columns:1fr;}} .host-portrait{position:relative;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden; box-shadow:var(--shadow-card);aspect-ratio:4/5;background:var(--panel);} .host-portrait img{width:100%;height:100%;object-fit:cover;} .host-portrait .badge{position:absolute;left:-16px;bottom:28px;background:var(--ink-800);border:1px solid var(--line-strong); border-radius:var(--r-md);padding:14px 18px;max-width:220px;box-shadow:var(--shadow-card);} @media(max-width:900px){.host-portrait .badge{left:14px;}}