/* ============================================================ Mike Moll — site.css (production design system) Razor / hairline aesthetic · true black · one accent (sky blue) Fonts: Libre Franklin (headings) + Poppins (body) Load once per page from : Also load the fonts once per page (see brief). NOTE: this file controls STYLE ONLY. It never changes links, forms, tracking, or copy. ============================================================ */ :root{ --font-head:'Libre Franklin',system-ui,sans-serif; --font-body:'Poppins',system-ui,sans-serif; --bg:#000000; /* true black canvas */ --ink:#ffffff; /* headings */ --text:#d7d7d7; /* body copy */ --muted:#9a9a9a; /* eyebrows, labels, captions */ --hair:rgba(255,255,255,0.20); /* 1px razor lines */ --accent:#38b6ff; /* sky blue — the ONLY accent */ --accent-ink:#000000; /* text on an accent fill */ --max:1080px; } *{box-sizing:border-box;margin:0;padding:0;border-radius:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--text);font-family:var(--font-body); font-size:17px;line-height:1.72;letter-spacing:-.005em;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} html,body{overflow-x:clip} img{max-width:100%;display:block} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .wrap{max-width:var(--max);margin:0 auto;padding:0 32px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} h1,h2,h3{font-family:var(--font-head);color:var(--ink);font-weight:600;letter-spacing:-.02em;line-height:1.12} /* --- eyebrow (plain text, no tick) --- */ .eye{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.2em; text-transform:uppercase;color:var(--muted);margin-bottom:18px} .eye.loose{margin-bottom:34px} .eyebrow{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px} /* --- buttons & links (squared, razor) --- Uses the site's EXISTING button class names so current markup restyles automatically. .ghost is an alias of .btn-ghost for new snippets. */ .btn{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:13px; letter-spacing:.05em;text-transform:uppercase;padding:13px 22px;border:1px solid transparent;transition:.14s;cursor:pointer} .btn-primary,.btn-blue{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn-primary:hover,.btn-blue:hover{background:transparent;color:var(--accent)} .btn-ghost,.ghost{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:13px; letter-spacing:.05em;text-transform:uppercase;padding:12px 22px;border:1px solid var(--hair);color:var(--ink);background:transparent;transition:.14s;cursor:pointer} .btn-ghost:hover,.ghost:hover{border-color:var(--ink)} .btn-lg{padding:16px 26px;font-size:14px} .alink{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--accent);letter-spacing:.02em} .alink:hover{color:var(--ink)} /* hand-drawn circle around a CTA (wrap the link in span.circled + the svg) */ .circled{position:relative;display:inline-block;padding:8px 24px;margin-top:4px} .circled .scribble{position:absolute;inset:-10px -10px -12px -10px;width:calc(100% + 20px); height:calc(100% + 22px);overflow:visible;transform:rotate(-1.4deg);pointer-events:none} .circled .scribble path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke} /* --- nav --- */ .site-nav{border-bottom:1px solid var(--hair)} .site-nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px} .logo{font-family:var(--font-head);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--ink)} .logo i{color:var(--accent);font-style:normal} .site-nav .links{display:flex;gap:28px;align-items:center;font-family:var(--font-head);font-weight:500;font-size:14px;color:var(--muted)} .site-nav .links a:hover{color:var(--ink)} .burger{display:none} /* --- hero --- */ .hero{padding:96px 0 32px} .hero h1{font-size:clamp(2.6rem,6vw,4.1rem);letter-spacing:-.03em;line-height:1.06;max-width:17ch} .hero p{font-size:1.22rem;color:var(--text);margin:26px 0 34px;max-width:52ch} .hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:74px} /* --- stat band (de-boxed: vertical dividers only) --- */ .hero .stats{display:grid;grid-template-columns:repeat(3,1fr)} .hero .stats>div{padding:0 34px;border-left:1px solid var(--hair)} .hero .stats>div:first-child{border-left:none;padding-left:0} .hero .stats b{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:2.2rem;letter-spacing:-.02em;display:block;line-height:1} .hero .stats span{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:8px;display:block} /* --- sections --- */ .section{padding:80px 0;border-top:1px solid var(--hair)} .section .h2{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:14px} .lead{color:var(--text);max-width:56ch;margin-bottom:40px} /* --- two offer cards (share a single divider) --- */ .grid2{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hair)} .grid2 .card{padding:38px 34px;border-left:1px solid var(--hair)} .grid2 .card:first-child{border-left:none} .card .tag{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px} .card h3{font-size:1.5rem;margin-bottom:14px} .card p{color:var(--text);margin-bottom:22px} .card ul{list-style:none;margin-bottom:26px} .card li{position:relative;padding-left:24px;margin-bottom:11px;color:var(--text);font-size:17px} .card li::before{content:"+";position:absolute;left:0;top:0;color:var(--accent);font-weight:700;font-family:var(--font-head)} /* --- meet + photo + blue-check credentials --- */ .meetgrid{display:grid;grid-template-columns:1.25fr .95fr;gap:46px;align-items:start;margin-bottom:34px} .meetphoto{border:1px solid var(--hair);line-height:0} .meetphoto img{width:100%;height:auto} .lede{color:var(--text);max-width:60ch} .creds{display:grid;grid-template-columns:1fr 1fr;gap:15px 44px} .creds div{position:relative;padding-left:30px;color:var(--text);font-size:17px} .creds div::before{content:"\2713";position:absolute;left:0;top:0;color:var(--accent);font-weight:700;font-family:var(--font-head)} /* --- reviews (contact-sheet grid, shared dividers) --- */ .revs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair);border-bottom:none;border-right:none} .rev{padding:30px 28px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)} .rev p{color:var(--text);font-size:17px;line-height:1.55;margin-bottom:18px} .rev b{font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--text);text-transform:uppercase;letter-spacing:.04em} .rev b em{color:var(--muted);font-style:normal;font-weight:500} /* --- resource cards --- */ .res{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair);border-left:none} .res .card{padding:32px 28px;border-left:1px solid var(--hair)} .res h3{font-size:1.25rem;margin-bottom:10px} .res p{color:var(--text);font-size:17px;margin-bottom:20px} /* newsletter field (one flush box, single divider) */ .nl{display:flex;border:1px solid var(--hair)} .nl input{flex:1;width:0;min-width:0;background:transparent;border:none;color:var(--ink);font-family:var(--font-body);font-size:14px;padding:11px 12px} .nl input:focus{outline:none} .nl:focus-within{outline:2px solid var(--accent);outline-offset:2px} .nl button{font-family:var(--font-head);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em; border:none;border-left:1px solid var(--hair);background:var(--accent);color:var(--accent-ink);padding:0 16px;cursor:pointer} .rlinks{display:flex;flex-direction:column;gap:12px;align-items:flex-start} /* --- footer --- */ .site-foot{border-top:1px solid var(--hair);padding:46px 0;color:var(--muted);font-size:14px} .site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center} .site-foot a:hover{color:var(--ink)} .site-foot .fl{display:flex;gap:20px} /* radios/checkboxes must never inherit full-width input styling */ input[type="radio"],input[type="checkbox"]{width:auto !important;flex:none !important} /* --- responsive --- */ @media(max-width:760px){ .grid2,.hero .stats,.revs,.res,.creds,.meetgrid{grid-template-columns:minmax(0,1fr)} .grid2 .card,.res .card{border-left:none;border-top:1px solid var(--hair)} .grid2 .card:first-child,.res .card:first-child{border-top:none} .hero .stats{gap:22px 0}.hero .stats>div{border-left:none;padding:0} .rev{border-right:none} .revs{border-right:1px solid var(--hair)} .res{border-left:1px solid var(--hair)} .hero{padding:70px 0 28px} /* nav becomes burger + dropdown panel */ .site-nav{position:relative} .site-nav .links{display:none;position:absolute;top:100%;left:0;right:0;z-index:40; background:var(--bg);border-bottom:1px solid var(--hair); flex-direction:column;align-items:stretch;gap:0;padding:0} .site-nav.open .links{display:flex} .site-nav .links a{padding:16px 32px;border-top:1px solid var(--hair);font-size:14px} .site-nav .links .btn{border:none;border-top:1px solid var(--hair);text-align:left; padding:16px 32px !important;color:var(--accent);background:transparent} .burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; width:40px;height:40px;background:transparent;border:none;cursor:pointer;padding:0} .burger span{display:block;width:20px;height:1.5px;background:var(--ink);transition:.18s} .site-nav.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .site-nav.open .burger span:nth-child(2){opacity:0} .site-nav.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* 16px input stops iOS focus auto-zoom */ .nl input{font-size:16px} .nl button{font-size:13px} } /* ============================================================ Compatibility layer — tokens + shared classes referenced by per-page styles (legacy var names now resolve to the razor system, so page-specific blocks inherit the new look). ============================================================ */ :root{ --canvas:#000000;--surface:#000000;--surface-2:#000000; --hairline:rgba(255,255,255,0.20);--hairline-2:rgba(255,255,255,0.30); --accent-2:#38b6ff; --display:'Libre Franklin',system-ui,sans-serif; --body:'Poppins',system-ui,sans-serif; } .text-link{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--accent);letter-spacing:.02em} .text-link:hover{color:var(--ink)} .nav-cta{font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:11px 16px;border:1px solid var(--hair);color:var(--ink);transition:.14s} .nav-cta:hover{border-color:var(--ink)} .btn-accent{background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink)} .btn-accent:hover{background:transparent;color:var(--accent)} .site-foot .socials,.site-foot .foot-legal{display:flex;gap:20px} /* --- small-phone refinements --- */ @media(max-width:480px){ .error-cta{flex-direction:column;align-items:stretch;text-align:center} .loop{font-size:0;gap:8px} .loop span{font-size:15px} }