/* ════════════════════════════════════════════════════════════════════════ a quiet counter — shared content-page styles (blog, articles, partner) Matches the landing rebuild: Bricolage Grotesque + DM Sans + DM Mono, warm-maximal palette, deep-green sticky header. Buildless. Restyles the EXISTING markup/classes of these pages — no HTML/JS changes required beyond swapping the font + stylesheet links. ════════════════════════════════════════════════════════════════════════ */ :root{ --green:#293a28; --green-2:#2f5d3a; --green-ink:#1e2a1d; --cream:#F7EFE0; --cream-2:#efe3cd; --cream-3:#e7d9bf; --paper:#fffdf8; --ink:#241a12; --ink-soft:#5a4a39; --pencil:#7a6a55; --parch:#f3ead8; --parch-dim:rgba(243,234,216,.72); --turmeric:#D9A441; --miso:#C97A2F; --paprika:#B85439; --sumac:#8E3B2A; --saffron:#E5B23D; --cardamom:#6F7F4C; --olive:#A9B582; --radius:16px; --radius-lg:24px; --maxw:1200px; --gutter:clamp(18px,4vw,56px); --ease-back:cubic-bezier(.34,1.56,.64,1); --shadow-md:0 8px 24px rgba(60,40,20,.12); --shadow-lg:0 22px 60px rgba(60,40,20,.20); --font-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif; --font-body:"DM Sans",system-ui,-apple-system,sans-serif; --font-mono:"DM Mono",ui-monospace,Menlo,monospace; /* legacy aliases (some inline styles in markup reference --pencil) */ } *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-body); font-size:clamp(16px,1.05vw,17.5px); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img{ max-width:100%; } a{ color:var(--green-2); text-decoration:none; } a:hover{ text-decoration:underline; text-underline-offset:3px; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; letter-spacing:-.025em; line-height:1.02; margin:0; } /* display-heading accent: solid colour fill, never italics */ h1 em,h2 em,h3 em,.blog-hero em,.partner-hero-title em,.cta-title em{ font-style:normal; color:var(--paprika); } p{ margin:0; } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .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; } .sr-only:focus{ position:fixed; top:8px; left:8px; width:auto; height:auto; clip:auto; background:var(--paper); padding:8px 14px; border-radius:8px; z-index:200; } .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--green-2); } .wordmark{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; } .mono-sample,.mono{ font-family:var(--font-mono); font-size:.92em; background:var(--cream-2); padding:1px 6px; border-radius:6px; } /* ── header ───────────────────────────────────────────────────────────── */ .site-nav{ position:sticky; top:0; z-index:100; background:var(--green); color:var(--parch); border-bottom:1px solid rgba(0,0,0,.18); transition:box-shadow .25s; } .site-nav[data-scrolled="1"]{ box-shadow:0 6px 24px rgba(0,0,0,.22); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:clamp(56px,7vh,66px); } .brand-link{ display:flex; align-items:center; gap:10px; color:var(--parch); } .brand-link:hover{ text-decoration:none; } .brand-mark{ width:28px; height:28px; border-radius:7px; } .brand-name,.brand-name .wordmark{ font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--parch); letter-spacing:-.02em; } .nav-actions{ display:flex; align-items:center; gap:14px; } .nav-link{ color:var(--parch-dim); font-weight:600; font-size:.92rem; } .nav-link:hover{ color:var(--parch); text-decoration:none; } .nav-program-label{ color:var(--parch-dim); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; } /* ── buttons ──────────────────────────────────────────────────────────── */ .btn-primary,.btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:99px; font-weight:700; font-size:.95rem; border:0; cursor:pointer; white-space:nowrap; text-align:center; font-family:inherit; transition:transform .18s var(--ease-back), box-shadow .2s, background .2s; } .btn-primary{ background:var(--ink); color:#ffe6c2; box-shadow:var(--shadow-md); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); text-decoration:none; } .btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px rgba(36,26,18,.22); } .btn-ghost:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 2px rgba(36,26,18,.5); text-decoration:none; } /* header sits on deep green → invert button colours there */ .site-nav .btn-primary{ background:var(--parch); color:var(--green-ink); box-shadow:none; } .site-nav .btn-primary:hover{ box-shadow:0 6px 18px rgba(0,0,0,.25); } .site-nav .btn-ghost{ color:var(--parch); box-shadow:inset 0 0 0 2px rgba(243,234,216,.4); } .site-nav .btn-ghost:hover{ box-shadow:inset 0 0 0 2px var(--parch); } /* ── footer ───────────────────────────────────────────────────────────── */ .site-foot{ background:var(--green-ink); color:var(--parch); margin-top:clamp(60px,9vh,110px); padding-block:clamp(34px,5vh,56px); } .foot-inner{ display:flex; flex-wrap:wrap; gap:18px 24px; justify-content:space-between; align-items:center; } .foot-brand{ display:flex; align-items:center; gap:10px; } .foot-brand .brand-mark{ width:22px; height:22px; } .site-foot .wordmark{ color:var(--parch); } .foot-links{ display:flex; flex-wrap:wrap; gap:18px; } .foot-links a{ color:var(--parch-dim); font-size:.92rem; } .foot-links a:hover{ color:var(--parch); } /* ── blog index ───────────────────────────────────────────────────────── */ .blog-hero{ padding-block:clamp(48px,8vh,96px) clamp(24px,4vh,42px); } .blog-hero .eyebrow{ display:block; margin-bottom:16px; } .blog-hero h1{ font-size:clamp(2.4rem,6vw,4.4rem); max-width:16ch; } .blog-hero-lead{ margin-top:18px; max-width:60ch; color:var(--ink-soft); font-size:clamp(1.02rem,1.3vw,1.2rem); } .article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); padding-bottom:clamp(40px,7vh,90px); } .article-card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--cream-3); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); transition:transform .2s var(--ease-back), box-shadow .25s; color:var(--ink); } .article-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); text-decoration:none; } .article-card-img{ aspect-ratio:16/10; overflow:hidden; background:var(--cream-2); } .article-card-img img{ width:100%; height:100%; object-fit:cover; } .article-card-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; } .article-card-cat{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green-2); } .article-card-title{ font-size:1.2rem; line-height:1.1; } .article-card-excerpt{ color:var(--ink-soft); font-size:.95rem; } .article-card-meta{ margin-top:auto; font-family:var(--font-mono); font-size:.72rem; color:var(--pencil); } /* ── article page ─────────────────────────────────────────────────────── */ .article-page{ padding-top:clamp(28px,5vh,52px); } .article-shell{ max-width:760px; } .breadcrumbs{ font-family:var(--font-mono); font-size:.72rem; color:var(--pencil); margin-bottom:22px; } .breadcrumbs a{ color:var(--pencil); } .breadcrumbs a:hover{ color:var(--green-2); } .article-header .eyebrow{ display:block; margin-bottom:14px; } .article-header h1{ font-size:clamp(2rem,4.6vw,3.3rem); } .article-deck{ margin-top:18px; font-size:clamp(1.1rem,1.5vw,1.35rem); color:var(--ink-soft); line-height:1.45; } .article-meta{ margin-top:14px; font-family:var(--font-mono); font-size:.74rem; color:var(--pencil); } .article-hero-img{ margin:clamp(24px,4vw,40px) 0; } .article-hero-img img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); max-height:480px; object-fit:cover; } .article-body{ font-size:1.08rem; line-height:1.72; color:#33271c; } .article-body h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin:1.8em 0 .5em; } .article-body h3{ font-size:1.25rem; margin:1.5em 0 .4em; } .article-body p{ margin:0 0 1.1em; } .article-body ul,.article-body ol{ margin:0 0 1.2em; padding-left:1.3em; } .article-body li{ margin-bottom:.5em; } .article-body strong{ font-weight:700; color:var(--ink); } .article-body em{ font-style:italic; } /* genuine emphasis in prose */ .article-body a{ color:var(--green-2); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; } .article-figure{ margin:clamp(22px,3.5vw,36px) 0; } .article-figure img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow-md); } .article-figure figcaption{ margin-top:10px; font-size:.85rem; color:var(--pencil); text-align:center; } .article-cta{ background:var(--cream-2); border:1px solid var(--cream-3); border-radius:var(--radius); padding:22px 24px; margin:clamp(26px,4vw,40px) 0; } .article-cta h3{ font-size:1.3rem; } .article-cta p{ margin-top:8px; color:var(--ink-soft); } .cta-links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; } .cta-links a{ display:inline-flex; align-items:center; height:44px; padding:0 20px; border-radius:99px; font-weight:700; font-size:.92rem; background:var(--ink); color:#ffe6c2; } .cta-links a:hover{ text-decoration:none; transform:translateY(-2px); } .cta-links a.secondary{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px rgba(36,26,18,.22); } .related{ margin-top:clamp(40px,6vh,72px); padding-top:28px; border-top:1px solid var(--cream-3); } .related h2,.related h3{ font-size:1.4rem; margin-bottom:16px; } .related a{ color:var(--green-2); } .related-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .related-list a{ font-weight:600; } /* ── partner program ──────────────────────────────────────────────────── */ .partner-hero{ padding-block:clamp(40px,7vh,84px) clamp(28px,4vh,48px); } .partner-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,4vw,64px); align-items:center; } .partner-hero-copy .eyebrow{ display:block; margin-bottom:16px; } .partner-hero-title{ font-size:clamp(2.4rem,5.6vw,4.6rem); } .partner-hero-lead{ margin-top:20px; max-width:48ch; color:var(--ink-soft); font-size:clamp(1.02rem,1.3vw,1.2rem); } .partner-hero-visual{ margin:0; } .hero-carousel{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; } .hero-carousel-viewport{ border-radius:26px; overflow:hidden; box-shadow:var(--shadow-lg); background:var(--cream-2); max-width:300px; } .hero-carousel-slides{ list-style:none; margin:0; padding:0; position:relative; } .hero-carousel-slide{ display:none; } .hero-carousel-slide.is-active{ display:block; } .hero-carousel-slide img{ width:100%; height:auto; display:block; } .hero-carousel-nav{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:0; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-md); cursor:pointer; display:grid; place-items:center; transition:transform .18s var(--ease-back); } .hero-carousel-nav:hover{ transform:scale(1.08); } .hero-carousel-nav:disabled{ opacity:.4; cursor:default; } .hero-carousel-dots{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:7px; } .hero-carousel-dot{ width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.55); cursor:pointer; padding:0; } .hero-carousel-dot[aria-current="true"]{ background:#fff; } .hero-caption{ margin-top:14px; text-align:center; font-family:var(--font-mono); font-size:.74rem; color:var(--pencil); } .spec-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--cream-3); border:1px solid var(--cream-3); border-radius:var(--radius); overflow:hidden; margin-block:clamp(20px,3vw,36px); } .spec-cell{ background:var(--paper); padding:18px 20px; display:flex; flex-direction:column; gap:3px; } .spec-label{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pencil); } .spec-value{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; } .spec-note{ font-size:.78rem; color:var(--ink-soft); } .prog-block{ padding-block:clamp(36px,6vh,72px); } .prog-band{ padding-block:clamp(40px,6vh,80px); background:var(--paper); border-block:1px solid var(--cream-3); } .prog-block-inner{ max-width:760px; } .section-label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--green-2); margin-bottom:18px; } .band-head{ margin-bottom:clamp(20px,3vw,34px); } .band-intro{ margin-top:10px; max-width:56ch; color:var(--ink-soft); } .prose{ font-size:1.08rem; line-height:1.7; color:#33271c; max-width:68ch; } .prose--muted{ color:var(--pencil); } .fit-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.6vw,22px); } .fit-grid--three{ grid-template-columns:repeat(3,1fr); } .fit-card{ background:var(--paper); border:1px solid var(--cream-3); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-md); } .fit-card h3{ font-size:1.2rem; margin-bottom:8px; } .fit-card p{ color:var(--ink-soft); font-size:.96rem; } .steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,20px); } .step-card{ background:var(--paper); border:1px solid var(--cream-3); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-md); } .step-num{ font-family:var(--font-mono); font-weight:500; font-size:.8rem; color:var(--paprika); } .step-card h3{ font-size:1.1rem; margin:10px 0 8px; } .step-card p{ color:var(--ink-soft); font-size:.92rem; } .prog-cta{ background:var(--green); color:var(--parch); padding-block:clamp(46px,7vh,90px); margin-top:clamp(36px,6vh,72px); } .prog-cta-inner{ max-width:640px; text-align:center; margin-inline:auto; } .cta-title{ font-size:clamp(2rem,4vw,3.2rem); color:var(--parch); } .prog-cta p{ margin-top:14px; color:var(--parch-dim); } .cta-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:26px; } .prog-cta .btn-primary{ background:var(--parch); color:var(--green-ink); } .prog-cta .btn-ghost{ color:var(--parch); box-shadow:inset 0 0 0 2px rgba(243,234,216,.4); } .cta-contact{ margin-top:18px; font-size:.88rem; color:var(--parch-dim); } .prog-cta .cta-contact a{ color:var(--parch); text-decoration:underline; } /* ── enquire form ─────────────────────────────────────────────────────── */ .enquire-page{ padding-block:clamp(34px,5vh,64px) clamp(48px,7vh,90px); } .enquire-shell{ max-width:620px; margin-inline:auto; padding-inline:var(--gutter); } .enquire-head .eyebrow{ display:block; margin-bottom:14px; } .enquire-title{ font-size:clamp(2rem,4.2vw,3rem); } .enquire-lead{ margin-top:16px; color:var(--ink-soft); } /* The hidden attribute must always win, even over display rules like .enquire-form's flex (author display beats the UA [hidden] style otherwise, leaving "hidden" forms visible). */ [hidden]{ display:none !important; } .enquire-success{ background:#eef4ea; border:1px solid #cfe0c8; color:var(--green-2); border-radius:var(--radius); padding:18px 20px; margin-top:24px; font-weight:600; } .enquire-form{ margin-top:28px; display:flex; flex-direction:column; gap:18px; } .field{ display:flex; flex-direction:column; gap:7px; } .field-label{ font-weight:700; font-size:.9rem; } .field-input,.field-select,.field-textarea{ width:100%; font-family:inherit; font-size:1rem; color:var(--ink); background:var(--paper); border:1.5px solid var(--cream-3); border-radius:12px; padding:12px 14px; transition:border-color .2s; } .field-input:focus,.field-select:focus,.field-textarea:focus{ outline:none; border-color:var(--green-2); } .field-textarea{ min-height:108px; resize:vertical; line-height:1.55; } .field-hint{ font-size:.82rem; color:var(--pencil); } .field-err{ color:var(--paprika); font-weight:600; font-size:.9rem; } .fieldset{ border:1.5px solid var(--cream-3); border-radius:var(--radius); padding:16px 18px; margin:0; } .fieldset-legend{ font-weight:700; font-size:.9rem; padding:0 6px; } .platform-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px 16px; margin-top:6px; } .check-row{ display:flex; align-items:center; gap:8px; font-size:.95rem; cursor:pointer; } .check-row input{ accent-color:var(--green-2); width:17px; height:17px; } .other-platform{ margin-top:12px; } .enquire-form .btn-primary{ width:100%; height:50px; } .enquire-foot{ margin-top:20px; text-align:center; color:var(--pencil); font-size:.9rem; } /* ── creator card (partner hero placeholder + public profile header) ───── */ .creator-card{ background:var(--paper); border:1px solid var(--cream-3); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:22px; width:100%; max-width:380px; margin-inline:auto; position:relative; } .creator-card .preview-tag{ position:absolute; top:14px; right:14px; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--pencil); background:var(--cream-2); padding:3px 8px; border-radius:99px; } .creator-top{ display:flex; align-items:center; gap:14px; } .creator-avatar{ width:62px; height:62px; border-radius:50%; background:linear-gradient(160deg,#C97A2F,#8E3B2A); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.5rem; flex:0 0 auto; } .creator-name{ font-family:var(--font-display); font-weight:800; font-size:1.25rem; letter-spacing:-.02em; } .creator-handle{ font-size:.85rem; color:var(--pencil); } .creator-bio{ margin-top:14px; font-size:.92rem; color:var(--ink-soft); line-height:1.5; } .creator-stats{ display:flex; gap:22px; margin-top:16px; } .creator-stat b{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; display:block; line-height:1; } .creator-stat span{ font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--pencil); } /* reusable social icon row (profile, partner pages, portal) */ .social-row{ display:flex; gap:9px; flex-wrap:wrap; } .social-link{ width:38px; height:38px; border-radius:10px; background:var(--cream-2); color:var(--ink); display:grid; place-items:center; transition:transform .18s var(--ease-back), background .2s; } .social-link:hover{ transform:translateY(-2px); background:var(--cream-3); text-decoration:none; } .social-link svg{ width:19px; height:19px; fill:currentColor; display:block; } .social-link.on-green{ background:rgba(255,255,255,.12); color:var(--parch); } .social-link.on-green:hover{ background:rgba(255,255,255,.22); } .creator-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; } .creator-thumb{ aspect-ratio:1; border-radius:12px; box-shadow:var(--shadow-md); } /* ── hero dashboard mini-cards (partner + brand hero, sample data) ─────── */ /* Static, non-interactive illustrations of real Studio/campaign dashboards. All numbers are illustrative; every metric maps to something the app genuinely tracks. Classes are `hd-` prefixed to avoid page-level collisions. */ .hd-card{ padding-top:26px; } .hd-tag{ position:absolute; top:14px; right:14px; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--pencil); background:var(--cream-2); padding:3px 8px; border-radius:99px; } .hd-eyebrow{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pencil); } .hd-title{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; margin-top:4px; } .hd-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; } .hd-tile{ background:var(--cream); border:1px solid var(--cream-3); border-radius:12px; padding:11px 12px; min-width:0; } .hd-tile b{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.15rem,4.4vw,1.35rem); display:block; line-height:1.05; } .hd-tile span{ font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; color:var(--pencil); display:block; margin-top:5px; line-height:1.25; } .hd-list{ margin-top:18px; display:flex; flex-direction:column; gap:12px; } .hd-list-label{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--pencil); } .hd-row{ display:grid; gap:6px; } .hd-row-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .hd-row-name{ font-size:.9rem; font-weight:600; color:var(--ink); } .hd-row-meta{ font-family:var(--font-mono); font-size:.7rem; color:var(--pencil); flex:0 0 auto; white-space:nowrap; } .hd-bar{ height:6px; border-radius:99px; background:var(--cream-2); overflow:hidden; } .hd-bar > i{ display:block; height:100%; border-radius:99px; background:var(--green-2); } .hd-table{ width:100%; border-collapse:collapse; margin-top:8px; } .hd-table th{ text-align:right; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--pencil); font-weight:500; padding:0 0 7px; border-bottom:1px solid var(--cream-3); } .hd-table th:first-child{ text-align:left; } .hd-table td{ padding:9px 0; border-bottom:1px solid var(--cream-2); font-size:.88rem; } .hd-table td:first-child{ font-weight:600; color:var(--ink); } .hd-table td.num{ text-align:right; font-family:var(--font-mono); font-size:.82rem; color:var(--ink-soft); } .hd-table tr:last-child td{ border-bottom:0; } /* ── public profile page ──────────────────────────────────────────────── */ .profile-page{ padding-bottom:120px; } .profile-hero{ background:var(--green); color:var(--parch); padding-block:clamp(34px,6vh,64px); } .profile-hero .creator-avatar{ width:84px; height:84px; font-size:2rem; box-shadow:0 6px 20px rgba(0,0,0,.25); } .profile-hero-grid{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; } .profile-hero h1{ font-size:clamp(1.9rem,4vw,3rem); color:var(--parch); } .profile-hero .handle{ font-family:var(--font-mono); font-size:.8rem; color:var(--parch-dim); margin-top:4px; } .profile-hero .bio{ color:var(--parch-dim); margin-top:12px; max-width:52ch; } .profile-hero .stats{ display:flex; gap:26px; margin-top:16px; } .profile-hero .stats b{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; display:block; line-height:1; color:var(--parch); } .profile-hero .stats span{ font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--parch-dim); } .profile-actions{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; } .profile-hero .social-row{ margin-top:18px; } .profile-section-label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green-2); margin:clamp(34px,5vh,56px) 0 18px; } .precipe-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px); } .precipe{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--paper); border:1px solid var(--cream-3); box-shadow:var(--shadow-md); display:flex; flex-direction:column; } .precipe-img{ aspect-ratio:4/3; position:relative; } .precipe-img img{ width:100%; height:100%; object-fit:cover; } .precipe-img.tile{ display:grid; place-items:center; color:#fff; font-size:2rem; } .precipe-body{ padding:14px 15px 16px; } .precipe-body h3{ font-size:1.05rem; line-height:1.1; } .precipe-meta{ font-family:var(--font-mono); font-size:.66rem; color:var(--pencil); margin-top:7px; display:flex; gap:10px; flex-wrap:wrap; } .precipe-frag{ margin-top:11px; font-size:.84rem; color:var(--ink-soft); line-height:1.45; position:relative; max-height:84px; overflow:hidden; } .precipe-frag::after{ content:""; position:absolute; inset:auto 0 0 0; height:46px; background:linear-gradient(to top, var(--paper), transparent); } .precipe-lock{ margin-top:10px; display:flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700; color:var(--green-2); } .profile-cta-bar{ position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--ink); color:#ffe6c2; padding:14px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:14px; box-shadow:0 -8px 30px rgba(0,0,0,.18); } .profile-cta-bar p{ font-weight:600; font-size:.95rem; } .profile-cta-bar .btn-primary{ background:var(--parch); color:var(--green-ink); } /* ── embeddable "Add to a quiet counter" buttons (showcase swatches) ────── */ .embed-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:24px; } .embed-swatch{ background:var(--paper); border:1px solid var(--cream-3); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-md); } .embed-swatch .render{ min-height:64px; display:flex; align-items:center; justify-content:center; padding:14px; border-radius:12px; background:var(--cream-2); margin-bottom:14px; } .embed-swatch .render.on-dark{ background:#241a12; } .embed-swatch h3{ font-size:1rem; margin-bottom:4px; } .embed-swatch p{ font-size:.84rem; color:var(--ink-soft); } .embed-code{ margin-top:12px; } .embed-code textarea{ width:100%; font-family:var(--font-mono); font-size:.72rem; color:var(--ink); background:var(--cream); border:1px solid var(--cream-3); border-radius:10px; padding:10px; resize:vertical; min-height:64px; } .embed-copy{ margin-top:8px; font-size:.78rem; font-weight:700; color:var(--green-2); background:none; border:0; cursor:pointer; padding:0; } /* ── responsive ───────────────────────────────────────────────────────── */ @media (max-width:1024px){ .article-grid{ grid-template-columns:repeat(2,1fr); } .partner-hero-grid{ grid-template-columns:1fr; } .partner-hero-visual{ max-width:380px; margin-inline:auto; } .spec-bar{ grid-template-columns:repeat(2,1fr); } .fit-grid,.fit-grid--three{ grid-template-columns:repeat(2,1fr); } .steps-grid{ grid-template-columns:repeat(2,1fr); } .precipe-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .article-grid{ grid-template-columns:1fr; } .spec-bar{ grid-template-columns:1fr 1fr; } .fit-grid,.fit-grid--three,.steps-grid{ grid-template-columns:1fr; } .precipe-grid{ grid-template-columns:repeat(2,1fr); } .platform-grid{ grid-template-columns:1fr; } .nav-program-label{ display:none; } .foot-inner{ flex-direction:column; align-items:flex-start; } .profile-cta-bar p{ font-size:.85rem; } /* tighten the sticky header so long button labels (e.g. "Apply for a brand account", "Partner Studio") stay on one centred line and fit on phones */ .nav-actions{ gap:10px; } .site-nav .btn-primary,.site-nav .btn-ghost{ height:38px; padding:0 14px; font-size:.82rem; } } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.001s !important; transition-duration:.1s !important; scroll-behavior:auto !important; } }