/* ============================================================ SEWN v3 — BRAND LAYER Loaded AFTER base.css. base.css keeps the demo mechanic; this file gives the page an actual point of view. Thesis: SEWN sells physical, dyed, printed things. The site should look dyed and printed too — grounds of saturated colour, oversized display type, blocks not beige. One system, three colourways (a merch company should be able to show its own). Switch with [data-cw] on . ============================================================ */ /* ---------- COLOURWAYS ---------- */ :root, html[data-cw="vat"]{ --eyebrow:#FF7A4D; --ground:#111C4E; /* indigo dye vat */ --ground-2:#0B1436; --accent:#FF4B12; /* hot thread */ --on-accent:#14120F; --on-ground:#FFFFFF; --ground-soft:rgba(255,255,255,.72); --paper:#F4EFE6; /* raw canvas */ --card:#FFFFFF; --ink:#14120F; --graphite:#4E4941; --muted:#6B655C; --line:#E5DDCF; --line-2:#D2C7B4; --thread:#FF4B12; --quiet:#EDE6DA; } html[data-cw="court"]{ --eyebrow:#FFC53D; --ground:#073B33; /* pine */ --ground-2:#04251F; --accent:#FFC53D; /* chalk yellow */ --on-accent:#12140F; --on-ground:#FFFFFF; --ground-soft:rgba(255,255,255,.74); --paper:#F5F2E9; --card:#FFFFFF; --ink:#12140F; --graphite:#4A4C42; --muted:#67695C; --line:#E3E0D3; --line-2:#CFCBBA; --thread:#C96A12; --quiet:#EBE7DA; } html[data-cw="press"]{ --eyebrow:#9A9AFF; --ground:#15141B; /* ink */ --ground-2:#0B0A10; --accent:#4B4BFF; /* screenprint blue */ --on-accent:#FFFFFF; --on-ground:#FFFFFF; --ground-soft:rgba(255,255,255,.70); --paper:#F4F3F7; --card:#FFFFFF; --ink:#131219; --graphite:#4A4855; --muted:#6A6878; --line:#E4E3EC; --line-2:#CFCEDC; --thread:#4B4BFF; --quiet:#EBEAF2; } /* ---------- TYPE ---------- */ :root{ --fd:"Bricolage Grotesque", "Geist", system-ui, sans-serif; --r:18px; --r-sm:12px; } .disp{font-family:var(--fd);font-weight:800;letter-spacing:-.035em;line-height:.98} body{background:var(--paper);color:var(--ink)} /* ---------- BUTTONS ---------- */ .btn{background:var(--ink);color:#fff;border-radius:999px;font-weight:600;padding:16px 28px} .btn:hover{background:#000} .btn--accent{background:var(--accent);color:var(--on-accent)} .btn--accent:hover{background:var(--accent);filter:brightness(.94)} .btn--ghost{background:transparent;border:1.6px solid var(--line-2);color:var(--ink)} .btn--onground{background:var(--accent);color:var(--on-accent)} .btn--onground:hover{filter:brightness(.94);background:var(--accent)} .btn--outline-g{background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.35)} .btn--outline-g:hover{background:transparent;border-color:var(--accent);color:var(--accent)} /* ============================================================ NAV — sits on the dark ground, no beige blur ============================================================ */ .nav{background:var(--ground);border-bottom:1px solid transparent;backdrop-filter:none} .nav.is-stuck{background:var(--ground);border-bottom-color:rgba(255,255,255,.10)} .nav__in{max-width:1320px} .mark{font-family:var(--fd);font-weight:800;font-size:23px;letter-spacing:-.04em;color:#fff} .mark__dot{width:7px;height:7px;background:var(--accent)} .nav__links > a,.seg__btn{color:var(--ground-soft)} .nav__links > a:hover,.seg__btn:hover{color:#fff;background:rgba(255,255,255,.08)} .nav .btn--sm{background:var(--accent);color:var(--on-accent);padding:11px 20px} .nav__burger span{background:#fff} .nav__mobile{background:var(--ground);border-top-color:rgba(255,255,255,.12)} .nav__mobile a{color:#fff;border-bottom-color:rgba(255,255,255,.12)} .nav__mobile .btn{background:var(--accent);color:var(--on-accent)} .seg__menu{border-color:var(--line)} /* ============================================================ HERO — full-bleed ground, oversized display, stage overlaps ============================================================ */ .hero{background:var(--ground);color:#fff;padding:76px 0 0;position:relative;overflow:hidden} .hero::before{content:"";position:absolute;width:760px;height:760px;border-radius:50%; background:var(--accent);opacity:.16;filter:blur(120px);top:-320px;right:-180px;pointer-events:none} .hero__head{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px; align-items:end;margin-bottom:44px} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--fm);font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow,var(--accent)); background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 32%,transparent); padding:8px 15px;border-radius:999px;margin:0 0 22px} .hero h1{font-family:var(--fd);font-weight:800;font-size:clamp(38px,7.6vw,104px); line-height:.95;letter-spacing:-.045em;margin:0;color:#fff} .hero h1 em{font-style:normal;color:var(--accent)} .hero__sub{margin:0;font-size:clamp(17px,1.9vw,21px);line-height:1.5;color:var(--ground-soft);max-width:40ch} .hero__act{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px} .hero__micro{margin:0;font-size:14px;color:rgba(255,255,255,.55)} .hero__stagewrap{position:relative;padding-bottom:0} .hero .stage{box-shadow:0 40px 90px -40px rgba(0,0,0,.55);border:0;border-radius:24px} /* the ground stops halfway down the stage */ .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:var(--paper)} .hero__stagewrap{z-index:2} /* ============================================================ PROOF BAND — accent block, the Linktree-grade punch ============================================================ */ .proof{background:var(--accent);color:var(--on-accent);padding:0} .proof__in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)} .proof__i{padding:46px 22px;text-align:center;border-left:2px solid color-mix(in srgb,var(--on-accent) 14%,transparent)} .proof__i:first-child{border-left:0} .proof__n{font-family:var(--fd);font-weight:800;font-size:clamp(32px,4vw,54px); letter-spacing:-.04em;line-height:1;margin:0} .proof__i p:last-child{margin:9px 0 0;font-size:13px;font-weight:600; opacity:.75;letter-spacing:.01em} /* ============================================================ BANDS ============================================================ */ .band{border-top:0;padding:96px 0} .band--quiet{background:var(--quiet)} .band__head{max-width:60ch;margin:0 0 44px} .band__head h2{font-family:var(--fd);font-weight:800;font-size:clamp(32px,4.6vw,58px); line-height:1.02;letter-spacing:-.04em;margin:0 0 16px} .band__head p{font-size:18px} .grid4 img{border-radius:20px} .grid4 figcaption{font-weight:600} /* steps as blocks, not outlined boxes */ .steps li{background:var(--card);border:0;border-radius:22px;padding:32px 28px; box-shadow:0 20px 44px -34px rgba(0,0,0,.35)} .steps__n{font-family:var(--fd);font-weight:800;font-size:34px;letter-spacing:-.03em; color:var(--accent);text-transform:none;margin-bottom:16px} .steps h3{font-family:var(--fd);font-weight:700;font-size:21px;letter-spacing:-.02em} /* ---------- WHY CARDS: colour blocks ---------- */ .why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .wcard{border-radius:24px;padding:34px 30px;min-height:190px;display:flex;flex-direction:column;gap:10px} .wcard .big{font-family:var(--fd);font-weight:800;font-size:clamp(26px,2.7vw,38px); letter-spacing:-.035em;line-height:1.02} .wcard p{margin:0;font-size:15.5px;line-height:1.5;font-weight:500;opacity:.82} .wcard--accent{background:var(--accent);color:var(--on-accent)} .wcard--ground{background:var(--ground);color:#fff} .wcard--ground .big{color:var(--accent)} .wcard--paper{background:var(--card);color:var(--ink);border:1.5px solid var(--line)} /* ---------- PRICING ---------- */ .tier{border-radius:24px;border:1.5px solid var(--line);padding:32px} .tier__price{font-family:var(--fd);font-weight:800;font-size:46px;letter-spacing:-.04em} .tier--on{background:var(--ground);color:#fff;border-color:var(--ground)} .tier--on .tier__price,.tier--on .mono{color:var(--accent)} .tier--on .tier__line{color:rgba(255,255,255,.78)} .tier--on .btn{background:var(--accent);color:var(--on-accent)} /* ---------- CLOSE ---------- */ .close{background:var(--ground);color:#fff;border-top:0;padding:120px 0;position:relative;overflow:hidden} .close::before{content:"";position:absolute;width:700px;height:700px;border-radius:50%; background:var(--accent);opacity:.15;filter:blur(120px);bottom:-340px;left:-120px} .close h2{position:relative;font-family:var(--fd);font-weight:800; font-size:clamp(36px,6vw,74px);letter-spacing:-.045em;line-height:1.0;margin:0 0 34px} .close h2 em{font-style:normal;color:var(--accent)} .close .btn{position:relative;background:var(--accent);color:var(--on-accent)} /* ---------- FOOT ---------- */ .foot{background:var(--ground-2);border-top:0;color:rgba(255,255,255,.55);padding:52px 0 64px} .foot .mark{color:#fff} .foot__legal{color:rgba(255,255,255,.45)} /* ---------- STAGE tweaks so it reads product, not document ---------- */ .stage{border-radius:24px} .cyc.is-on{border-color:var(--accent);box-shadow:0 0 0 2.5px color-mix(in srgb,var(--accent) 22%,transparent)} /* ============================================================ COLOURWAY SWITCHER — review control. Removed at sign-off. ============================================================ */ .cw{position:fixed;z-index:80;right:18px;bottom:18px;display:flex;align-items:center;gap:8px; background:rgba(20,18,15,.92);color:#fff;border-radius:999px;padding:8px 10px 8px 16px; box-shadow:0 18px 44px -20px rgba(0,0,0,.6);backdrop-filter:blur(8px)} .cw__lab{font-family:var(--fm);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:rgba(255,255,255,.6)} .cw button{border:0;cursor:pointer;border-radius:999px;padding:7px 13px;font-size:12.5px; font-weight:700;background:rgba(255,255,255,.12);color:#fff;font-family:var(--fs); letter-spacing:.02em;transition:.15s} .cw button:hover{background:rgba(255,255,255,.22)} .cw button.on{background:#fff;color:#14120F} .cw i{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:6px; vertical-align:-1px;border:1px solid rgba(255,255,255,.3)} @media (max-width:640px){.cw{right:10px;bottom:10px;padding:6px 8px 6px 12px} .cw__lab{display:none}.cw button{padding:6px 10px;font-size:11.5px}} /* ---------- RESPONSIVE ---------- */ @media (max-width:900px){ .why{grid-template-columns:1fr} .proof__in{grid-template-columns:repeat(2,1fr)} .proof__i:nth-child(3){border-left:0} .proof__i{border-top:2px solid color-mix(in srgb,var(--on-accent) 14%,transparent)} .proof__i:nth-child(-n+2){border-top:0} } @media (max-width:860px){ .hero__head{grid-template-columns:1fr;gap:22px;align-items:start} .hero{padding-top:52px} .band{padding:70px 0} .close{padding:88px 0} } @media (max-width:640px){ .hero h1{font-size:clamp(34px,9.2vw,44px);letter-spacing:-.035em} .hero__sub{font-size:17px} .hero__act .btn{flex:1 1 auto;justify-content:center} .proof__i{padding:34px 14px} .band__head h2{font-size:clamp(28px,7.4vw,38px)} .wcard{padding:28px 24px;min-height:0} .cw{transform:scale(.92);transform-origin:100% 100%} } /* the stage sits on the dark ground — force document colour inside it */ .stage,.stage *{color:inherit} .stage{color:var(--ink)} .stage .drop__title{color:var(--ink)} .stage .drop__sub,.stage .drop__help{color:var(--muted)} .stage .mono,.stage .stage__state{color:var(--graphite)} .stage .stage__label,.stage .cycbar__lead{color:var(--muted)} .stage .btn{background:var(--ink);color:#fff}