/* ========================================================================== site.css — Agent A: reset, tokens, typography, header/nav, footer, .btn-pill, .rule, layout container, utilities, lightbox. Block section internals (.blk-*) live in sections.css (Agent C). ========================================================================== */ /* ---------- Fonts -------------------------------------------------------- */ @font-face { font-family:"Raleway"; font-weight:300; font-style:normal; font-display:swap; src:url("/assets/fonts/raleway-300.woff2") format("woff2"); } @font-face { font-family:"Raleway"; font-weight:400; font-style:normal; font-display:swap; src:url("/assets/fonts/raleway-400.woff2") format("woff2"); } @font-face { font-family:"Raleway"; font-weight:700; font-style:normal; font-display:swap; src:url("/assets/fonts/raleway-700.woff2") format("woff2"); } @font-face { font-family:"Raleway"; font-weight:800; font-style:normal; font-display:swap; src:url("/assets/fonts/raleway-800.woff2") format("woff2"); } @font-face { font-family:"Raleway"; font-weight:900; font-style:normal; font-display:swap; src:url("/assets/fonts/raleway-900.woff2") format("woff2"); } /* ---------- Token fallbacks (theme_css_vars() overrides in ) ------- */ :root{ --c-bg:#000000; --c-accent:#DFFF00; --c-text:#FFFFFF; --c-muted:#CCCCCC; --c-footer-bg:#DFFF00; --c-footer-text:#000000; --font-scale:1; --wrap:980px; --header-h:64px; } /* ---------- Reset -------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); } body{ margin:0; } /* full-bleed section breakouts (sections.css) use 100vw — keep the page from side-scrolling */ html, body{ overflow-x:hidden; } h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote{ margin:0; } ul,ol{ padding:0; list-style:none; } img,svg{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } input,textarea,select,button{ font-family:inherit; } :focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; } /* ---------- Base typography --------------------------------------------- */ body{ font-family:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight:400; font-size:calc(16px * var(--font-scale)); line-height:1.55; color:var(--c-text); background:var(--c-bg); text-align:center; -webkit-font-smoothing:antialiased; min-height:100vh; } h1,h2,h3,h4{ font-weight:800; line-height:1.15; letter-spacing:.06em; text-transform:uppercase; } h2.section-heading{ color:var(--c-accent); font-weight:900; font-size:clamp(1.6rem,4.4vw,2.6rem); letter-spacing:.05em; } p{ margin:0 0 1rem; } p:last-child{ margin-bottom:0; } strong,b{ font-weight:800; } a.textlink,.richtext a{ color:var(--c-accent); text-decoration:none; } .richtext a:hover{ text-decoration:underline; } /* ---------- Layout ------------------------------------------------------- */ .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; } .site-main{ display:block; } /* generic block rhythm — internals owned by sections.css */ .blk{ padding-block:clamp(28px,6vw,64px); } /* ---------- Skip link ---------------------------------------------------- */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--c-accent); color:#000; padding:10px 16px; font-weight:800; } .skip-link:focus{ left:8px; top:8px; } /* ---------- Header / nav ------------------------------------------------- */ .site-header{ position:sticky; top:0; z-index:100; background:#000; border-bottom:1px solid rgba(255,255,255,.06); } .header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h); gap:16px; } .site-logo{ display:inline-flex; align-items:center; } /* wordmark */ .brandmark{ font-weight:900; letter-spacing:.02em; text-transform:uppercase; font-size:1.35rem; line-height:1; white-space:nowrap; display:inline-block; } .brandmark .bm-y{ color:var(--c-accent); } .brandmark .bm-w{ color:var(--c-text); } .brandmark-sm{ font-size:1.05rem; } /* desktop nav */ .nav-desktop{ display:flex; align-items:center; gap:0; flex-wrap:wrap; justify-content:flex-end; } .nav-link{ font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-text); padding:6px 14px; transition:color .15s ease; } .nav-link:hover,.nav-link.is-active{ color:var(--c-accent); } .nav-sep{ width:1px; height:16px; background:rgba(255,255,255,.35); display:inline-block; } /* hamburger */ .nav-toggle{ display:none; width:44px; height:44px; padding:10px; } .nav-toggle span{ display:block; height:2px; background:var(--c-text); margin:5px 0; transition:.2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* mobile overlay menu */ .nav-mobile{ position:fixed; inset:0; z-index:200; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:24px; } .nav-mobile[hidden]{ display:none; } .nav-mobile .nav-close{ position:absolute; top:14px; right:18px; font-size:2.4rem; line-height:1; color:var(--c-text); width:48px; height:48px; } .nav-mobile-links{ display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; } .nav-mobile .nav-link{ font-size:1.15rem; letter-spacing:.16em; padding:14px 20px; width:100%; max-width:360px; } body.nav-open{ overflow:hidden; } @media (max-width:768px){ .nav-desktop{ display:none; } .nav-toggle{ display:block; } } /* ---------- Buttons (.btn-pill) ----------------------------------------- */ .btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; } .btn-row-center{ justify-content:center; } .btn-row-left{ justify-content:flex-start; } .btn-row-right{ justify-content:flex-end; } .btn-pill{ display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; padding:12px 26px; border-radius:999px; border:2px solid var(--c-accent); color:var(--c-accent); background:transparent; transition:background-color .15s ease,color .15s ease; cursor:pointer; } .btn-pill:hover,.btn-pill:focus-visible{ background:var(--c-accent); color:#000; } .btn-pill-solid{ background:var(--c-accent); color:#000; } .btn-pill-solid:hover,.btn-pill-solid:focus-visible{ background:#fff; color:#000; border-color:#fff; } /* ---------- Rule / spacer ----------------------------------------------- */ .rule{ border:0; height:1px; background:rgba(255,255,255,.55); width:60%; max-width:520px; margin:26px auto; } .spacer{ width:100%; } /* ---------- Honeypot (antispam) ----------------------------------------- */ .qf-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; } /* ---------- Fallback footer --------------------------------------------- */ .site-footer-fallback{ background:var(--c-footer-bg); color:var(--c-footer-text); padding:28px 0; text-align:center; margin-top:40px; } .site-footer-fallback p{ margin:2px 0; font-weight:700; letter-spacing:.06em; } .site-footer-fallback .footer-version{ font-size:.72rem; opacity:.6; font-weight:400; letter-spacing:.1em; } /* ---------- 404 ---------------------------------------------------------- */ .blk-notfound{ padding-block:clamp(60px,14vw,140px); } .notfound-copy p{ color:var(--c-muted); } /* ---------- Lightbox ----------------------------------------------------- */ .lightbox{ position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.94); display:flex; align-items:center; justify-content:center; padding:5vh 4vw; } .lightbox[hidden]{ display:none; } .lightbox .lb-img{ max-width:92vw; max-height:90vh; width:auto; height:auto; object-fit:contain; box-shadow:0 10px 60px rgba(0,0,0,.6); } .lightbox button{ position:absolute; color:#fff; font-size:2rem; line-height:1; width:56px; height:56px; display:flex; align-items:center; justify-content:center; opacity:.85; transition:opacity .15s ease; } .lightbox button:hover{ opacity:1; } .lb-close{ top:12px; right:16px; font-size:2.6rem; } .lb-prev{ left:8px; top:50%; transform:translateY(-50%); } .lb-next{ right:8px; top:50%; transform:translateY(-50%); } @media (max-width:600px){ .lb-prev,.lb-next{ top:auto; bottom:14px; transform:none; } .lb-prev{ left:24px; } .lb-next{ right:24px; } } /* ---------- Reduced motion ---------------------------------------------- */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }