/* ========================================================================== KAIVANT · Global Stylesheet · kaivant.org House style: stone ground, Fraunces editorial serif with italic emphasis, Roman-numeral section markers, the 改 motif, damson accent (used sparingly). Version 1.0 · 2026 · Single source of truth for kaivant.org -------------------------------------------------------------------------- Asset dependencies: /brand/KAIVANT-Logo.svg (placed in markup as inline SVG, not here) Type dependency: Fraunces + Inter, imported below. For best performance, remove the @import and load the same two families with a in . ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600&display=swap'); /* -------------------------------------------------------------------------- 1 · Tokens -------------------------------------------------------------------------- */ :root{ /* colour */ --stone:#F1EDE6; /* page ground */ --paper:#FBF9F5; /* raised surfaces, cards */ --ink:#1C1A17; /* primary text, dark bands */ --muted:#6E665C; /* secondary text */ --line:#DAD3C8; /* hairlines, borders */ --damson:#5E2A4D; /* accent only: rules, labels, featured tier, emphasis */ --damson-deep:#3E1C32; /* reserved for deep hover states */ /* type */ --font-display:"Fraunces",Georgia,serif; --font-body:"Inter",system-ui,sans-serif; /* layout */ --wrap:1120px; } /* -------------------------------------------------------------------------- 2 · Reset & base -------------------------------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--stone); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } a{color:inherit} /* -------------------------------------------------------------------------- 3 · Typography -------------------------------------------------------------------------- */ .serif{font-family:var(--font-display)} em,.it{font-family:var(--font-display);font-style:italic} .num{font-family:var(--font-display);font-weight:400} .eyebrow{ font-size:.72rem;text-transform:uppercase;letter-spacing:.2em; color:var(--damson);font-weight:600; } h2.head{ font-family:var(--font-display);font-weight:500; font-size:clamp(1.85rem,3.6vw,2.85rem);line-height:1.08; letter-spacing:-.01em;max-width:18ch; } h2.head em{color:var(--ink);font-weight:500} .lede{color:var(--muted);max-width:46ch;margin-top:18px;font-size:1.06rem} /* -------------------------------------------------------------------------- 4 · Layout -------------------------------------------------------------------------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px} section{padding:clamp(64px,9vw,118px) 0} /* -------------------------------------------------------------------------- 5 · Buttons -------------------------------------------------------------------------- */ .btn{ display:inline-block;font-family:var(--font-body);font-size:.82rem;font-weight:500; letter-spacing:.02em;text-decoration:none;padding:11px 20px;border-radius:2px; transition:all .2s;cursor:pointer;border:1px solid var(--ink); } .btn-ink{background:var(--ink);color:var(--stone)} .btn-ink:hover{background:#000} .btn-line{background:transparent;color:var(--ink)} .btn-line:hover{background:var(--ink);color:var(--stone)} .btn-stone{background:var(--paper);color:var(--ink);border-color:var(--paper)} .btn-stone:hover{background:#fff} /* -------------------------------------------------------------------------- 6 · Navigation -------------------------------------------------------------------------- */ header.nav{ position:sticky;top:0;z-index:50; background:rgba(241,237,230,.92); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); } .nav-in{display:flex;align-items:center;justify-content:space-between;height:66px} .brand{display:flex;align-items:center;gap:10px;text-decoration:none} .nav-links{display:flex;align-items:center;gap:30px} .nav-links a{text-decoration:none;font-size:.84rem;color:var(--muted);transition:color .2s} .nav-links a:hover{color:var(--ink)} .nav-toggle{display:none;background:none;border:none;cursor:pointer;font-size:1.4rem;color:var(--ink)} .brand-logo{height:30px;width:auto;display:block} footer.ft .brand-logo{height:36px} /* -------------------------------------------------------------------------- 7 · Hero (stone band — no marble) -------------------------------------------------------------------------- */ .hero{ background:var(--stone); border-bottom:1px solid var(--line); position:relative;overflow:hidden; } .hero .glyph{ position:absolute;right:-2vw;top:50%;transform:translateY(-50%); font-family:var(--font-display);font-size:34vw;line-height:1;color:rgba(94,42,77,.05); pointer-events:none;user-select:none; } .hero-in{position:relative;padding-top:clamp(70px,11vw,140px);padding-bottom:clamp(60px,9vw,118px)} .hero h1{ font-family:var(--font-display);font-weight:500;letter-spacing:-.015em; font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.02;max-width:16ch;margin-top:22px; } .hero h1 em{color:var(--damson);font-weight:500} .hero p{color:var(--muted);max-width:50ch;margin-top:26px;font-size:1.12rem} .hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} /* -------------------------------------------------------------------------- 8 · Manifesto -------------------------------------------------------------------------- */ .manifesto{background:var(--paper);border-bottom:1px solid var(--line)} .manifesto .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} .manifesto p.big{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;font-weight:400} .manifesto p.sub{color:var(--muted);font-size:1.05rem} /* -------------------------------------------------------------------------- 9 · Pillars (Roman-numeral grid) -------------------------------------------------------------------------- */ .pillars-head{margin-bottom:clamp(40px,6vw,66px)} .pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .pillar{background:var(--stone);padding:34px 30px 40px} .pillar .pn{font-family:var(--font-display);font-size:2.3rem;color:var(--damson);line-height:1;font-weight:400} .pillar .pl{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin:18px 0 10px} .pillar h3{font-family:var(--font-display);font-weight:500;font-size:1.22rem;line-height:1.25;margin-bottom:12px} .pillar p{font-size:.95rem;color:var(--muted)} /* -------------------------------------------------------------------------- 10 · Tiers (membership ladder) -------------------------------------------------------------------------- */ .tiers{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .tier-top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px;margin-bottom:clamp(36px,5vw,54px)} .tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(278px,1fr));gap:20px} .tier{background:var(--stone);border:1px solid var(--line);padding:34px 30px 32px;display:flex;flex-direction:column;position:relative} .tier.feat{border-color:var(--damson);box-shadow:0 18px 40px -28px rgba(62,28,50,.5)} .tier.feat::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:var(--damson)} .tier .badge{position:absolute;top:-11px;right:24px;background:var(--damson);color:var(--paper);font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;padding:5px 12px;border-radius:2px;font-weight:600} .tier .tname{font-family:var(--font-display);font-size:1.55rem;font-weight:500} .tier .tprice{font-family:var(--font-display);font-size:2rem;font-weight:500;margin:14px 0 4px} .tier .tprice small{font-family:var(--font-body);font-size:.8rem;color:var(--muted);font-weight:400;letter-spacing:.02em} .tier .tdesc{color:var(--muted);font-size:.92rem;min-height:46px;margin-bottom:18px} .tier ul{list-style:none;margin:0 0 24px;flex-grow:1} .tier li{font-size:.9rem;padding:8px 0 8px 22px;position:relative;border-top:1px solid var(--line)} .tier li:first-child{border-top:none} .tier li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:9px;border:1px solid var(--damson);border-radius:50%} .tier .req{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:18px} .tier .req b{color:var(--ink);font-weight:600} /* -------------------------------------------------------------------------- 11 · Comparison table -------------------------------------------------------------------------- */ .cmp-wrap{overflow-x:auto} table.cmp{width:100%;border-collapse:collapse;min-width:620px;margin-top:clamp(30px,4vw,46px)} table.cmp th,table.cmp td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--line);font-size:.9rem} table.cmp thead th{font-family:var(--font-display);font-weight:500;font-size:1.05rem;border-bottom:1.5px solid var(--ink)} table.cmp thead th.fkey{color:var(--damson)} table.cmp tbody th{font-weight:500;color:var(--muted)} table.cmp td{text-align:center;color:var(--muted)} table.cmp td.yes{color:var(--damson);font-weight:600} table.cmp .dash{color:var(--line)} /* -------------------------------------------------------------------------- 12 · Quotes (dark band) -------------------------------------------------------------------------- */ .quotes{background:var(--ink);color:var(--stone)} .quotes .eyebrow{color:#B98FA8} .qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:38px;margin-top:40px} .quote p{font-family:var(--font-display);font-style:italic;font-size:1.18rem;line-height:1.42;color:#EDE7DD} .quote .who{margin-top:18px;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#9A9087} /* -------------------------------------------------------------------------- 13 · CTA band (stone band — no marble) -------------------------------------------------------------------------- */ .cta-band{ color:var(--ink); background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .cta-band .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:54px;align-items:center} .cta-band h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1} .cta-band h2 em{color:var(--damson);font-weight:500} .cta-band p{color:var(--muted);margin-top:16px;max-width:40ch} .reg{display:flex;flex-direction:column;gap:12px} .reg input{padding:14px 16px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:.92rem;border-radius:2px} .reg input::placeholder{color:var(--muted)} .reg .btn{margin-top:4px;text-align:center} /* -------------------------------------------------------------------------- 14 · Footer (deep ink band) -------------------------------------------------------------------------- */ footer.ft{background:#15130F;color:#B6AEA2;position:relative;overflow:hidden;padding:clamp(56px,7vw,82px) 0 40px} footer.ft .fglyph{position:absolute;right:3vw;top:0;font-family:var(--font-display);font-size:15rem;line-height:1;color:rgba(94,42,77,.14);pointer-events:none} .ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;position:relative} .ft .mark{font-family:var(--font-display);font-weight:600;font-size:1.5rem;letter-spacing:.04em;color:var(--paper)} .ft .tagline{font-size:.9rem;margin-top:16px;max-width:32ch;line-height:1.55} .ft .tagline em{color:#D8CEC1} .ft h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:#807769;margin-bottom:16px;font-weight:600} .ft ul{list-style:none} .ft li{margin-bottom:10px} .ft a{text-decoration:none;font-size:.88rem;color:#B6AEA2;transition:color .2s} .ft a:hover{color:var(--paper)} .ft-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:54px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:.78rem;color:#807769} /* -------------------------------------------------------------------------- 15 · Accessibility & motion -------------------------------------------------------------------------- */ a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--damson);outline-offset:3px} .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important} .reveal{opacity:1!important;transform:none!important} } /* -------------------------------------------------------------------------- 16 · Responsive (<= 860px) -------------------------------------------------------------------------- */ @media (max-width:860px){ .nav-links{display:none} .nav-toggle{display:block} .nav-links.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 28px 18px} .nav-links.open a{padding:12px 0;width:100%;border-bottom:1px solid var(--line);font-size:.95rem} .nav-links.open .btn{margin-top:12px;border-bottom:none} .manifesto .wrap,.cta-band .wrap{grid-template-columns:1fr;gap:26px} .ft-top{grid-template-columns:1fr 1fr;gap:30px} }