/* ============================================================================ AVEXO CREDIT — site.css Site-only layout on top of the House Design System (tokens.css + components.css). Light: . Serif = Charter (prose), mono = system (data). Grayscale-first; exactly one amber signal per view (reserved for the CTA). ============================================================================ */ /* ---- Charter (self-hosted; site + deck prose) ------------------------------ */ @font-face{font-family:"Charter";src:url("fonts/charter_regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Charter";src:url("fonts/charter_italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"Charter";src:url("fonts/charter_bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Charter";src:url("fonts/charter_bold_italic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap} /* ---- base ------------------------------------------------------------------ */ *{box-sizing:border-box} html{font-size:17px;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-serif); font-size:var(--fs-300); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; } .wrap{max-width:1080px; margin:0 auto; padding:0 var(--sp-6)} p{margin:var(--sp-3) 0} a{color:inherit} /* ---- top bar --------------------------------------------------------------- */ .topbar{ position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:var(--rule-thin) solid var(--rule); } .topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:56px} .brand{font-family:var(--font-mono); font-size:var(--fs-200); letter-spacing:.02em; font-weight:600; text-decoration:none} .brand .mark{color:var(--accent)} .navlinks{display:flex; gap:var(--sp-5); align-items:center} .navlinks a{ font-family:var(--font-mono); font-size:var(--fs-50); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-muted); text-decoration:none; } .navlinks a:hover{color:var(--ink)} .navlinks a.cta{color:var(--accent); border:var(--rule-thin) solid var(--accent); padding:.5em .9em; border-radius:var(--radius)} .navlinks a.cta:hover{background:var(--accent); color:var(--bg)} .navtoggle{display:none} /* ---- hero ------------------------------------------------------------------ */ .hero{padding:var(--sp-9) 0 var(--sp-8)} .hero .eyebrow{margin-bottom:var(--sp-4)} .hero h1{font-size:var(--fs-800); line-height:1.05; letter-spacing:var(--tracking-tight); max-width:15ch; margin:0} .hero .sub{max-width:52ch; color:var(--ink-muted); font-size:var(--fs-400); line-height:var(--lh-snug); margin-top:var(--sp-5)} .hero .sub strong{color:var(--ink); font-weight:700} .hero-actions{display:flex; gap:var(--sp-4); align-items:center; margin-top:var(--sp-6); flex-wrap:wrap} .btn{ font-family:var(--font-mono); font-size:var(--fs-100); letter-spacing:.02em; text-decoration:none; padding:.7em 1.2em; border-radius:var(--radius); display:inline-block; } .btn.primary{background:var(--accent); color:var(--bg); border:var(--rule-thin) solid var(--accent)} .btn.primary:hover{background:var(--amber-dim); border-color:var(--amber-dim)} .btn.ghost{border:var(--rule-thin) solid var(--rule-strong); color:var(--ink)} .btn.ghost:hover{border-color:var(--ink)} /* ---- generic section ------------------------------------------------------- */ .section{padding:var(--sp-8) 0; border-top:var(--rule-thin) solid var(--rule)} .section > .lead{max-width:60ch} .section-head{margin-bottom:var(--sp-6)} .section-head h2{font-family:var(--font-serif); font-weight:700; font-size:var(--fs-600); letter-spacing:var(--tracking-tight); margin:var(--sp-2) 0 0} .section-head p{max-width:58ch; color:var(--ink-muted); margin-top:var(--sp-3)} /* ---- pipeline spine -------------------------------------------------------- */ .spine{ border:var(--rule-thin) solid var(--rule); padding:var(--sp-7) var(--sp-6) var(--sp-6); background:var(--bg-sunken); } /* stage rail — a hairline carrying a diamond node under each stage */ .spine-stages{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); padding-top:30px; } .spine-stages::before{ content:""; position:absolute; top:5px; left:10%; right:10%; border-top:var(--rule-thin) solid var(--rule-strong); } .stage{ position:relative; text-align:center; padding:0 var(--sp-3); } .stage::before{ content:""; position:absolute; top:1px; left:50%; margin-left:-4.5px; width:9px; height:9px; background:var(--ink); transform:rotate(45deg); box-shadow:0 0 0 4px var(--bg-sunken); } .stage .n{ font-family:var(--font-mono); font-size:var(--fs-50); color:var(--ink-faint); display:block; } .stage .s{ font-family:var(--font-mono); font-size:var(--fs-100); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); display:block; margin-top:var(--sp-1); } .stage .d{ font-size:var(--fs-100); color:var(--ink-muted); display:block; margin-top:var(--sp-2); line-height:1.4; max-width:22ch; margin-left:auto; margin-right:auto; } /* owned stretch (persona pages) — larger ink node + underlined label, no fill */ .stage.own::before{ width:11px; height:11px; margin-left:-5.5px; top:0; } .stage.own .n{ color:var(--ink-muted); } .stage.own .s{ border-bottom:2px solid var(--ink); padding-bottom:2px; display:inline-block; } /* layer bands — brackets that span the exact stages they cover (gantt-style) */ .spine-layers{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-4); margin-top:var(--sp-6); } .layer{ border-top:2px solid var(--ink); padding-top:var(--sp-3); } .layer.l1{ grid-column:1 / 2; } .layer.l2{ grid-column:2 / 4; } .layer.l3{ grid-column:4 / 6; } .layer .lab{ font-family:var(--font-mono); font-size:var(--fs-50); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink); display:flex; justify-content:space-between; gap:var(--sp-2); } .layer .lab .owner{ color:var(--ink-faint); } .layer .txt{ font-size:var(--fs-100); color:var(--ink-muted); margin-top:var(--sp-2); line-height:1.45; } /* ---- ask → answer block (analytics "ask why, get the answer") -------------- */ .ask{border:var(--rule-thin) solid var(--rule); background:var(--bg-sunken); padding:var(--sp-5)} .ask + .ask{margin-top:var(--sp-4)} .ask .q{font-family:var(--font-mono); font-size:var(--fs-100); color:var(--ink-muted); display:flex; gap:var(--sp-2)} .ask .q::before{content:"?"; color:var(--accent); font-weight:700} .ask .a{font-family:var(--font-serif); font-size:var(--fs-400); line-height:var(--lh-snug); color:var(--ink); margin-top:var(--sp-3)} /* ---- module list (persona capabilities) ------------------------------------ */ .modules{border-top:var(--rule-thin) solid var(--rule); margin-top:var(--sp-5)} /* ---- problem -> solution (reuses the deck's problem/solution engine) -------- */ .ps{margin-top:var(--sp-5)} .ps-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); padding:var(--sp-4) 0; border-top:var(--rule-hair) solid var(--rule); align-items:baseline} .ps-row.head{border-top:var(--rule-thin) solid var(--rule-strong); padding-bottom:var(--sp-2)} .ps-row.head span{font-family:var(--font-mono); font-size:var(--fs-50); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-muted)} .ps-row .p{color:var(--ink-muted)} .ps-row .s{color:var(--ink)} .ps-row .s strong{font-weight:700} @media(max-width:820px){ .ps-row{grid-template-columns:1fr; gap:var(--sp-2)} .ps-row.head{display:none} .ps-row .p::before{content:"Today"; display:block; font-family:var(--font-mono); font-size:var(--fs-50); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--sp-1)} .ps-row .s::before{content:"With Avexo"; display:block; font-family:var(--font-mono); font-size:var(--fs-50); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-faint); margin:var(--sp-2) 0 var(--sp-1)} } /* ---- land & expand steps --------------------------------------------------- */ .expand{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5)} .expand .step{border-top:2px solid var(--ink); padding-top:var(--sp-3)} .expand .step .n{font-family:var(--font-mono); font-size:var(--fs-50); color:var(--ink-faint); letter-spacing:var(--tracking-label)} .expand .step h4{font-family:var(--font-serif); font-weight:700; font-size:var(--fs-400); margin:var(--sp-2) 0} .expand .step p{font-size:var(--fs-200); color:var(--ink-muted); margin:0} /* ---- persona router -------------------------------------------------------- */ .personas{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--rule-thin); background:var(--rule); border:var(--rule-thin) solid var(--rule)} .persona{ background:var(--bg); padding:var(--sp-5); text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:var(--sp-2); transition:background .12s ease; } .persona:hover{background:var(--bg-raised)} .persona .role{font-family:var(--font-mono); font-size:var(--fs-50); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-muted)} .persona h3{font-family:var(--font-serif); font-weight:700; font-size:var(--fs-500); margin:0} .persona .val{color:var(--ink-muted); font-size:var(--fs-200); flex:1} .persona .go{font-family:var(--font-mono); font-size:var(--fs-100); color:var(--ink)} .persona .go::after{content:" \2192"} /* → */ /* ---- final CTA ------------------------------------------------------------- */ .cta-band{padding:var(--sp-8) 0} .cta-band .box{ border:var(--rule-thin) solid var(--rule-strong); background:var(--bg-sunken); padding:var(--sp-7); display:flex; justify-content:space-between; align-items:center; gap:var(--sp-6); } .cta-band h2{font-family:var(--font-serif); font-weight:700; font-size:var(--fs-600); margin:0; max-width:20ch} .cta-band p{color:var(--ink-muted); margin-top:var(--sp-2); max-width:40ch} /* ---- footer ---------------------------------------------------------------- */ .foot{border-top:var(--rule-thin) solid var(--rule); padding:var(--sp-6) 0 var(--sp-8); margin-top:var(--sp-6)} .foot .wrap{display:flex; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap} .foot .col .lab{font-family:var(--font-mono); font-size:var(--fs-50); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:var(--sp-2)} .foot .col a{display:block; color:var(--ink-muted); text-decoration:none; font-size:var(--fs-200); padding:.15em 0} .foot .col a:hover{color:var(--ink)} .foot .fine{font-family:var(--font-mono); font-size:var(--fs-50); color:var(--ink-faint); line-height:1.6; max-width:40ch} .geo-switch{display:flex; align-items:baseline; gap:var(--sp-4); margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:var(--rule-hair) solid var(--rule); font-family:var(--font-mono); font-size:var(--fs-50); flex-wrap:wrap} .geo-switch .lab{letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-faint)} .geo-switch a{color:var(--ink-muted); text-decoration:none; letter-spacing:.02em} .geo-switch a:hover{color:var(--ink)} /* ---- responsive ------------------------------------------------------------ */ @media(max-width:820px){ .spine-stages{grid-template-columns:1fr; padding-top:0; gap:var(--sp-5)} .spine-stages::before{display:none} .stage{text-align:left; padding:0 0 0 var(--sp-4); border-left:var(--rule-thin) solid var(--rule-strong)} .stage::before{left:0; top:5px; margin-left:-4.5px} .stage .d{margin-left:0; margin-right:0} .spine-layers{grid-template-columns:1fr} .layer.l1,.layer.l2,.layer.l3{grid-column:auto} .expand{grid-template-columns:1fr} .personas{grid-template-columns:1fr} .cta-band .box{flex-direction:column; align-items:flex-start} } @media(max-width:640px){ html{font-size:16px} .navlinks{display:none} .navlinks.open{display:flex; position:absolute; top:56px; left:0; right:0; flex-direction:column; background:var(--bg); border-bottom:var(--rule-thin) solid var(--rule); padding:var(--sp-4) var(--sp-6); gap:var(--sp-4)} .navtoggle{display:block; background:none; border:var(--rule-thin) solid var(--rule-strong); color:var(--ink); font-family:var(--font-mono); font-size:var(--fs-100); padding:.4em .7em; border-radius:var(--radius); cursor:pointer} .hero h1{font-size:var(--fs-700)} }