/* ============================================================ Writeinteractive — site stylesheet Single file. Two themes via / . Sections: tokens · reset · primitives · header/footer · agency homepage components · forms · blog · accessibility. ============================================================ */ @import url("./assets/fonts/_fonts.css"); /* ---- TOKENS ------------------------------------------------ */ :root { /* Brand — locked to logo orange #FE7E1D (Tim approved 2026-04-30) */ --accent: #FE7E1D; --accent-hover: #FF9244; --accent-ink: #ffffff; --accent-soft: #2a1a14; /* Secondary brand — Dan Martell-inspired cyan/light blue Used for: circle borders, eyebrows, secondary accents. Orange remains primary for CTAs and hover. */ --cyan: #3DAAFF; --cyan-bright: #6EC1FF; --cyan-soft: #1B3A5C; /* Agency theme — midnight indigo */ --agency-bg: #0f1729; --agency-surface: #161f37; --agency-elevated: #1d2747; --agency-ink: #f5f1ea; /* warm cream text */ --agency-ink-soft: #c5cbd9; /* lifted from #a8b2c8 \u2014 less dark on home lower-half */ --agency-ink-mute: #8e98ac; /* lifted from #6f7a92 */ --agency-hairline: #2a3656; --agency-hairline-bright: #3a4870; /* Blog theme — Backlinko-faithful */ --blog-bg: #ffffff; --blog-surface: #fafafa; --blog-ink: #1a1a1a; --blog-ink-soft: #555555; --blog-hairline: #e5e5e5; /* Type */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-sans: "General Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --font-blog: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Scale */ --step--2: 0.75rem; --step--1: 0.875rem; --step-0: 1rem; --step-1: 1.125rem; --step-2: 1.375rem; --step-3: 1.75rem; --step-4: 2.25rem; --step-5: 3rem; --step-6: 4rem; --step-7: 5.5rem; /* Rhythm */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4.5rem; --space-7: 6rem; /* Layout */ --container: 76rem; --container-narrow: 56rem; --measure: 38rem; --radius: 6px; --radius-lg: 14px; } /* ---- RESET ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.6; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; height: auto; display: block; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.1; font-weight: 600; } p { margin: 0 0 var(--space-3); } /* ============================================================ AGENCY THEME ============================================================ */ body.agency { background: var(--agency-bg); color: var(--agency-ink); } body.agency a { color: var(--accent); text-decoration: none; } body.agency a:hover { color: var(--accent-hover); } /* Inside body prose (bios, content paragraphs), use the theme blue with underline so links read as links — orange is reserved for CTAs/nav. */ body.agency .about-body a, body.agency .about-founder a { color: var(--cyan); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } body.agency .about-body a:hover, body.agency .about-founder a:hover { color: #6cc1ff; } body.agency ::selection { background: var(--accent); color: var(--accent-ink); } /* ---- LAYOUT PRIMITIVES ------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); } .container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--space-4); } .eyebrow { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 500; } /* ---- AGENCY HEADER ----------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(15, 23, 41, 0.85); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--agency-hairline); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); } .brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--agency-ink); } .brand img { height: 4.75rem; width: auto; /* Defensive: never let the flex container compress the logo's intrinsic width (was causing the squashed-look bug Tim flagged on mobile 2026-05-01) */ flex-shrink: 0; max-width: none; display: block; } @media (max-width: 56rem) { /* Mobile: smaller logo so the sticky header doesn't eat half the viewport */ .brand img { height: 3rem; } /* Header inner: tighter gap so logo + hamburger fit cleanly on small phones */ .site-header__inner { gap: var(--space-2); } } .nav { display: none; } .nav-cta { display: inline-flex; } .menu-toggle { display: none; } @media (min-width: 56rem) { .nav { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; } .nav > a, .nav > .has-dropdown > a { font-size: var(--step-0); /* bumped one step from --step--1 */ color: var(--agency-ink-soft); text-decoration: none; padding-block: 0.5rem; transition: color 0.15s ease; } .nav > a:hover, .nav > .has-dropdown > a:hover { color: var(--agency-ink); } .nav > a[aria-current="page"] { color: var(--accent); } } /* ---- MOBILE HAMBURGER (Cowork §2a) -------------------------- */ @media (max-width: 56rem) { .nav-cta { display: none; } .menu-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; /* meets 44×44 touch target minimum */ padding: 0; margin-left: auto; background: transparent; border: 1px solid var(--agency-hairline-bright); border-radius: var(--radius); cursor: pointer; color: var(--agency-ink); } body.blog .menu-toggle { border-color: var(--blog-hairline); color: var(--blog-ink); } .menu-toggle__line { display: block; width: 1.25rem; height: 2px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; } .menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } .mobile-menu[hidden] { display: none; } .mobile-menu { position: fixed; inset: 0; z-index: 100; background: var(--agency-bg); padding: var(--space-4); padding-top: 6rem; overflow-y: auto; display: flex; flex-direction: column; } body.blog .mobile-menu { background: var(--blog-bg); } .mobile-menu__nav { display: flex; flex-direction: column; gap: 0; width: 100%; } .mobile-menu__nav > a { font-family: var(--font-sans); font-size: var(--step-3); font-weight: 600; letter-spacing: -0.02em; color: var(--agency-ink); text-decoration: none; padding: var(--space-3) 0; border-bottom: 1px solid var(--agency-hairline); min-height: 3rem; display: flex; align-items: center; } body.blog .mobile-menu__nav > a { color: var(--blog-ink); border-bottom-color: var(--blog-hairline); } .mobile-menu__nav > a:hover { color: var(--accent); } .mobile-menu__nav > .btn { margin-top: var(--space-4); border-bottom: none; justify-content: center; } .mobile-menu__nav .mobile-menu__group { padding-block: var(--space-2); border-bottom: 1px solid var(--agency-hairline); } .mobile-menu__nav .mobile-menu__group h4 { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); margin-bottom: var(--space-2); font-weight: 500; } body.blog .mobile-menu__group h4 { color: var(--accent); } .mobile-menu__nav .mobile-menu__group a { display: block; padding: 0.6rem 0; font-size: var(--step-1); font-weight: 500; color: var(--agency-ink-soft); text-decoration: none; min-height: 2.75rem; } body.blog .mobile-menu__group a { color: var(--blog-ink-soft); } .mobile-menu__nav .mobile-menu__group a:hover { color: var(--accent); } /* Touch targets — bump form inputs on mobile (Cowork §2d) */ @media (max-width: 56rem) { .contact-form input, .contact-form textarea, .contact-form select { min-height: 2.75rem; font-size: 1rem; } .radio-group label { min-height: 2.75rem; } } /* ---------------------------------------------------------------- MOBILE HOMEPAGE — three circles above the fold (Tim, 2026-05-01) Force horizontal 3-column grid + shrink circle/icon/label/bg-numeral + tighten hero padding + hide long subhead so the circles enter viewport on a 375x667 iPhone SE without scrolling. ---------------------------------------------------------------- */ @media (max-width: 56rem) { /* Hero — tight, focused */ .hero { padding-block: var(--space-3) var(--space-2); } .hero__pre { margin-bottom: var(--space-2); padding: 0.3rem 0.75rem; font-size: 0.7rem; } .hero h1 { font-size: clamp(1.65rem, 7.5vw, 2.5rem); line-height: 1.05; max-width: 18ch; margin-bottom: 0; } .hero__sub { display: none; /* H1 + rotator carry the message on mobile */ } .rotator { margin-top: var(--space-3); font-size: clamp(1.4rem, 6vw, 2rem); } /* Circles — force 3-column horizontal grid, smaller, no wrap */ .circles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1); padding-block: var(--space-3); width: 100%; max-width: 100%; } .circle:hover { transform: none; } /* no lift on tap */ .circle__shape { width: clamp(4.5rem, 22vw, 6.75rem); height: clamp(4.5rem, 22vw, 6.75rem); border-width: 1.5px; } .circle__bg-num { font-size: clamp(3rem, 14vw, 5rem); } .circle__icon { width: 1.25rem; height: 1.25rem; margin-bottom: 0.2em; } .circle__label { font-size: 0.875rem; letter-spacing: -0.04em; /* tighter so "Implement" fits the circle */ white-space: nowrap; } .circle__caption { font-size: 0.625rem; margin-top: 0.35rem; letter-spacing: 0.1em; text-align: center; width: 100%; /* fill the grid cell so center works */ white-space: nowrap; /* keep IMPLEMENTATION on one line */ } /* Each circle item must center its own contents inside its grid cell */ .circle { align-items: center; width: 100%; } /* "Start a project" CTA — keep visible just below circles */ .home-cta { margin-top: var(--space-2); } } /* Even tighter on the smallest viewports (sub-360px), if needed */ @media (max-width: 22.5rem) { .hero h1 { font-size: 1.5rem; } .rotator { font-size: 1.25rem; } .circle__shape { width: 4.25rem; height: 4.25rem; } .circle__label { font-size: 0.875rem; } .circle__bg-num { font-size: 2.75rem; } } /* Services dropdown */ .has-dropdown { position: relative; } .has-dropdown > a::after { content: " \25BE"; /* solid down-pointing triangle */ font-size: 1em; /* bumped from 0.75em — was hard to see */ opacity: 0.85; margin-left: 0.2em; font-weight: 700; } .dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 38rem; padding: var(--space-4); background: var(--agency-surface); border: 1px solid var(--agency-hairline); border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(0,0,0,0.4); display: none; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: grid; } .dropdown__col h4 { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-1); } /* The "Explore X →" link is the ONLY interactive element per column (Cowork §3) */ .dropdown__col-link { display: inline-block; font-family: var(--font-sans); font-size: var(--step--1); font-weight: 600; color: var(--cyan); text-decoration: none; margin-bottom: var(--space-2); padding: 0.25rem 0; letter-spacing: -0.01em; } .dropdown__col-link:hover { color: var(--cyan-bright); } /* Sub-items below are NON-CLICKABLE descriptive bullets — Cowork §3 */ .dropdown__col ul { list-style: none; padding: 0; margin: 0; } .dropdown__col li { margin-bottom: 0.35em; font-size: var(--step--1); color: var(--agency-ink-mute); cursor: default; padding: 0.15rem 0; } .dropdown__col li::before { content: "· "; color: var(--agency-hairline-bright); } /* ---- BUTTONS ----------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.85rem 1.5rem; font-family: var(--font-sans); font-size: var(--step-0); font-weight: 500; text-decoration: none !important; border: 1px solid currentColor; border-radius: var(--radius); background: transparent; color: var(--agency-ink); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .btn:hover { background: var(--agency-ink); color: var(--agency-bg); border-color: var(--agency-ink); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) !important; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink) !important; transform: translateY(-1px); } .btn-arrow { display: inline-block; transition: transform 0.2s ease; } .btn:hover .btn-arrow { transform: translateX(4px); } .btn-sm { padding: 0.55rem 1.1rem; font-size: var(--step--1); } /* ============================================================ HOMEPAGE ============================================================ */ /* HERO ------------------------------------------------------- */ .hero { padding-block: clamp(var(--space-3), 3vw, var(--space-4)) clamp(var(--space-3), 2.5vw, var(--space-4)); text-align: center; } .hero__pre { display: inline-block; margin-bottom: var(--space-3); padding: 0.45rem 1rem; border: 1px solid var(--agency-hairline-bright); border-radius: 999px; font-family: var(--font-mono); font-size: var(--step-0); /* bumped from --step--1 */ letter-spacing: 0.08em; color: var(--agency-ink); } .hero__pre .dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); margin-right: 0.5rem; vertical-align: middle; } .hero h1 { font-family: var(--font-display); font-weight: 500; /* Lower bound tightened from step-5 to step-4 so the three circles enter viewport above the fold on a 375px-wide phone (Cowork §2c). */ font-size: clamp(var(--step-4), 5.5vw, var(--step-7)); letter-spacing: -0.025em; line-height: 1.02; max-width: 22ch; margin-inline: auto; font-variation-settings: "opsz" 144; } .hero h1 em { font-style: italic; color: var(--accent); } .hero__sub { margin-top: var(--space-3); max-width: 44rem; /* fits ~2 lines at this font size */ margin-inline: auto; font-size: var(--step-2); /* bumped from --step-1 — was too small */ color: var(--agency-ink-soft); line-height: 1.5; } .rotator { margin-top: var(--space-3); font-family: var(--font-display); font-size: clamp(var(--step-4), 5vw, var(--step-5)); letter-spacing: -0.03em; font-weight: 500; font-variation-settings: "opsz" 144; color: var(--agency-ink-mute); } .rotator__verb { color: var(--accent); font-style: italic; display: inline-block; min-width: 7ch; text-align: left; transition: opacity 0.3s ease, transform 0.3s ease; } /* CIRCLES ---------------------------------------------------- */ .circles { display: flex; justify-content: center; gap: clamp(var(--space-3), 4vw, var(--space-6)); padding-block: var(--space-3) var(--space-5); /* balanced spacing */ flex-wrap: wrap; } .circle { display: flex; flex-direction: column; align-items: center; text-decoration: none !important; color: var(--agency-ink); transition: transform 0.3s ease; } .circle:hover { transform: translateY(-6px); } .circle__shape { width: clamp(11rem, 18vw, 14rem); height: clamp(11rem, 18vw, 14rem); border-radius: 50%; border: 2px solid var(--cyan); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--agency-bg); position: relative; overflow: hidden; box-shadow: 0 0 0 0 rgba(61, 170, 255, 0); transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease; } .circle:hover .circle__shape { border-color: var(--cyan-bright); background: var(--agency-surface); box-shadow: 0 0 0 6px rgba(61, 170, 255, 0.12), 0 0 32px rgba(61, 170, 255, 0.25); } /* Big translucent background numeral — Dan Martell flourish */ .circle__bg-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-variation-settings: "opsz" 144; font-weight: 700; font-size: 11rem; line-height: 1; color: rgba(61, 170, 255, 0.08); pointer-events: none; user-select: none; z-index: 0; } .circle:hover .circle__bg-num { color: rgba(61, 170, 255, 0.14); } .circle__icon { width: 2.25rem; height: 2.25rem; color: var(--cyan); margin-bottom: 0.45em; position: relative; z-index: 1; transition: color 0.2s ease, transform 0.3s ease; } .circle:hover .circle__icon { color: var(--cyan-bright); transform: scale(1.08); } .circle__num { display: none; /* old small eyebrow replaced by bg numeral */ } .circle__label { font-family: var(--font-sans); font-size: var(--step-4); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: #ffffff; position: relative; z-index: 1; } .circle__caption { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); } /* CLIENT MARQUEE --------------------------------------------- */ .marquee { padding-block: var(--space-5); border-block: 1px solid var(--agency-hairline); background: var(--agency-surface); overflow: hidden; position: relative; } .marquee__label { text-align: center; margin-bottom: var(--space-3); color: var(--agency-ink-mute); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; } .marquee__viewport { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); } .marquee__track { display: flex; gap: clamp(var(--space-2), 3vw, var(--space-4)); /* tighter — was leaving big gaps */ align-items: center; animation: marquee 32s linear infinite; width: max-content; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } .marquee__item { font-family: var(--font-sans); font-size: var(--step-2); font-weight: 600; color: var(--agency-ink-soft); letter-spacing: -0.005em; white-space: nowrap; flex-shrink: 0; opacity: 0.75; transition: opacity 0.15s ease, color 0.15s ease; } /* Client logos — ONE consistent system. All logos sit directly on the dark midnight background (no pills). Two uniform variants: `--white` = forced to white silhouette via CSS filter (use for raster JPG/WebP/PNG with white backgrounds, OR single-color SVGs) `--color` = original colors (use for SVG/PNG with transparent bg that already has good contrast against dark navy) Same height. Same padding. Same hover. No exceptions. */ .marquee__logo { display: inline-flex; align-items: center; justify-content: center; height: 6rem; padding: 0.5rem 1.5rem; background: transparent; border: none; flex-shrink: 0; opacity: 0.85; transition: opacity 0.15s ease, transform 0.15s ease; } .marquee__logo:hover { opacity: 1; transform: translateY(-2px); } .marquee__logo img { height: 4.25rem; width: auto; max-width: 14rem; object-fit: contain; display: block; } /* Variant 1: force-white silhouette. For raster logos with white backgrounds AND single-color SVGs. The white-bg is converted to navy (invisible) and the dark logo content becomes pure white. */ .marquee__logo--white img { filter: brightness(0) invert(1); } /* Variant 2: original color. Transparent-bg color SVG/PNG that read fine on the navy background (Biogen blue+orange, MilliporeSigma purple, etc). */ .marquee__logo--color img { /* nothing — show as-is */ } .marquee__item:hover { opacity: 1; color: var(--agency-ink); } /* LATEST ARTICLES -------------------------------------------- */ .latest { padding-block: var(--space-7); } .latest__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); gap: var(--space-3); flex-wrap: wrap; } .latest h2 { font-family: var(--font-sans); font-size: var(--step-4); font-weight: 600; letter-spacing: -0.025em; } .latest__more { font-family: var(--font-mono); font-size: var(--step--1); color: var(--agency-ink-soft); text-decoration: none !important; } .latest__more:hover { color: var(--accent); } .cards { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 48rem) { .cards { grid-template-columns: repeat(3, 1fr); } } .card { display: block; padding: var(--space-4); background: var(--agency-surface); border: 1px solid var(--agency-hairline); border-radius: var(--radius-lg); text-decoration: none !important; color: var(--agency-ink); transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; height: 100%; } .card:hover { border-color: var(--cyan); transform: translateY(-3px); background: var(--agency-elevated); box-shadow: 0 8px 24px rgba(61, 170, 255, 0.12); } .card .eyebrow { display: block; margin-bottom: var(--space-2); } .card__title { font-family: var(--font-sans); font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0; color: var(--cyan); transition: color 0.15s ease; } .card:hover .card__title { color: var(--cyan-bright); } .card__excerpt { margin-top: var(--space-2); font-size: var(--step--1); color: var(--agency-ink-soft); line-height: 1.5; } /* CTA STRIP -------------------------------------------------- */ .cta-strip { margin-top: var(--space-5); padding-block: var(--space-7); border-top: 1px solid var(--agency-hairline); text-align: center; } .cta-strip h2 { font-family: var(--font-sans); font-size: clamp(var(--step-4), 5vw, var(--step-6)); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; max-width: 22ch; margin: 0 auto var(--space-4); } /* FOOTER ----------------------------------------------------- */ .site-footer { background: var(--agency-surface); border-top: 1px solid var(--agency-hairline); padding-block: var(--space-5); margin-top: var(--space-5); font-size: var(--step--1); color: var(--agency-ink-mute); } .site-footer__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; } @media (min-width: 48rem) { .site-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; } } .site-footer h5 { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--agency-ink); margin-bottom: var(--space-2); font-weight: 500; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: 0.4em; } .site-footer a { color: var(--agency-ink-soft); text-decoration: none; } .site-footer a:hover { color: var(--accent); } .site-footer__bottom { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--agency-hairline); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: var(--step--2); } .site-footer .brand img { height: 2.91rem; } /* +15% from 2.53rem (was +10% earlier) */ .site-footer__tagline { margin-top: var(--space-2); max-width: 22rem; color: var(--agency-ink-mute); font-size: var(--step--1); } /* ============================================================ INTERIOR PAGE PRIMITIVES (About, Services, Contact) Reused across all non-homepage agency pages ============================================================ */ .page-hero { /* Tightened 2026-05-03 — less dead space above the fold, balanced. */ padding-block: clamp(var(--space-3), 3vw, var(--space-4)) clamp(var(--space-3), 2.5vw, var(--space-4)); text-align: center; border-bottom: 1px solid var(--agency-hairline); } .page-hero__pre { display: inline-block; margin-bottom: var(--space-3); padding: 0.45rem 1rem; border: 1px solid var(--agency-hairline-bright); border-radius: 999px; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; color: var(--cyan); text-transform: uppercase; } .page-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(var(--step-4), 6vw, var(--step-6)); letter-spacing: -0.025em; line-height: 1.05; font-variation-settings: "opsz" 144; max-width: 22ch; margin-inline: auto; } .page-hero h1 em { font-style: italic; color: var(--accent); } .page-hero__sub { margin-top: var(--space-3); max-width: 44rem; margin-inline: auto; font-size: var(--step-2); color: var(--agency-ink-soft); line-height: 1.55; } /* Generic content section — used inside agency interior pages. Tightened 2026-05-01 per Tim: less padding above/below horizontal dividers. */ .section { padding-block: clamp(var(--space-3), 4vw, var(--space-5)); } .section--alt { background: var(--agency-surface); } .section__head { text-align: center; margin-bottom: var(--space-4); } .section__head .eyebrow { display: block; margin-bottom: var(--space-2); } .section__head h2 { font-family: var(--font-sans); font-size: clamp(var(--step-3), 4vw, var(--step-5)); font-weight: 600; letter-spacing: -0.025em; max-width: 22ch; margin-inline: auto; } .section__head p { margin-top: var(--space-3); max-width: 36rem; margin-inline: auto; color: var(--agency-ink-soft); } /* "Why us" 3-column proof blocks */ .proof-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 48rem) { .proof-grid { grid-template-columns: repeat(3, 1fr); } } .proof { text-align: center; padding: var(--space-3); } .proof__stat { font-family: var(--font-display); font-variation-settings: "opsz" 144; font-weight: 600; font-size: clamp(var(--step-5), 6vw, var(--step-6)); color: var(--cyan); line-height: 1; margin-bottom: var(--space-2); } .proof__label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--agency-ink-soft); margin-bottom: var(--space-2); } .proof p { margin: 0; color: var(--agency-ink-soft); font-size: var(--step--1); line-height: 1.5; } /* Package cards (flagship packages on service pages) */ .packages { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 48rem) { .packages { grid-template-columns: repeat(3, 1fr); } } .package { display: flex; flex-direction: column; padding: var(--space-4); background: var(--agency-surface); border: 1px solid var(--agency-hairline); border-radius: var(--radius-lg); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; height: 100%; } .package:hover { border-color: var(--cyan); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(61, 170, 255, 0.12); } .package__num { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; color: var(--cyan); text-transform: uppercase; margin-bottom: var(--space-2); } .package__name { font-family: var(--font-sans); font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; color: #ffffff; margin-bottom: var(--space-2); } .package__pitch { color: var(--agency-ink-soft); margin-bottom: var(--space-3); flex-grow: 1; } .package__includes { list-style: none; padding: 0; margin: 0 0 var(--space-3); font-size: var(--step--1); color: var(--agency-ink-soft); } .package__includes li { padding-left: 1.25rem; position: relative; margin-bottom: 0.4em; } .package__includes li::before { content: "→"; position: absolute; left: 0; color: var(--cyan); } .package__price { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); margin-bottom: var(--space-3); letter-spacing: 0.04em; } .package__cta { margin-top: auto; } /* Two-column custom-offerings list (on service pages) */ .offering-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--space-5); } @media (min-width: 48rem) { .offering-grid { grid-template-columns: 1fr 1fr; } } .offering h3 { font-family: var(--font-sans); font-size: var(--step-2); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--space-2); color: #ffffff; } .offering ul { list-style: none; padding: 0; margin: 0; color: var(--agency-ink-soft); } .offering li { padding: 0.4rem 0; border-bottom: 1px solid var(--agency-hairline); } .offering li:last-child { border-bottom: none; } /* FAQ — native
/ for zero JS */ .faq-list { max-width: 48rem; margin-inline: auto; } .faq-item { border-bottom: 1px solid var(--agency-hairline); } .faq-item summary { cursor: pointer; list-style: none; padding: var(--space-3) 0; font-family: var(--font-sans); font-size: var(--step-1); font-weight: 500; color: #ffffff; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.4rem; color: var(--cyan); transition: transform 0.2s ease; flex-shrink: 0; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item__body { padding: 0 0 var(--space-3); color: var(--agency-ink-soft); max-width: 42rem; } /* About page — first-person, longer-form copy */ .about-body { max-width: 42rem; margin-inline: auto; font-size: var(--step-1); line-height: 1.7; color: var(--agency-ink); } .about-body p { margin: 0 0 var(--space-3); } .about-body h2 { font-family: var(--font-sans); font-size: var(--step-3); font-weight: 600; letter-spacing: -0.02em; color: #ffffff; margin-top: var(--space-5); margin-bottom: var(--space-3); } .about-body ul { list-style: none; padding: 0; margin: 0 0 var(--space-3); } .about-body ul li { padding-left: 1.5rem; position: relative; margin-bottom: 0.4em; color: var(--agency-ink-soft); } .about-body ul li::before { content: "—"; position: absolute; left: 0; color: var(--cyan); } .about-founder { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: center; margin-top: var(--space-5); padding: var(--space-4); background: var(--agency-surface); border-radius: var(--radius-lg); border: 1px solid var(--agency-hairline); } @media (min-width: 40rem) { .about-founder { grid-template-columns: 12rem 1fr; gap: var(--space-5); } } .about-founder__photo { width: 12rem; height: 12rem; border-radius: 50%; background: var(--agency-elevated); border: 2px solid var(--cyan); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 4rem; color: var(--cyan); overflow: hidden; } .about-founder__photo img { width: 100%; height: 100%; object-fit: cover; } .about-founder h3 { font-family: var(--font-sans); font-size: var(--step-2); font-weight: 600; margin-bottom: var(--space-2); color: #ffffff; } .about-founder p { margin: 0; color: var(--agency-ink-soft); } /* Services overview — three big buckets */ .bucket-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 48rem) { .bucket-grid { grid-template-columns: repeat(3, 1fr); } } .bucket-card { display: flex; flex-direction: column; padding: var(--space-5); background: var(--agency-surface); border: 1px solid var(--agency-hairline); border-radius: var(--radius-lg); text-decoration: none !important; color: inherit; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; height: 100%; } .bucket-card:hover { border-color: var(--cyan); transform: translateY(-4px); box-shadow: 0 10px 28px rgba(61, 170, 255, 0.14); } .bucket-card__num { font-family: var(--font-mono); font-size: var(--step--2); color: var(--cyan); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--space-3); } .bucket-card__icon { width: 2.5rem; height: 2.5rem; color: var(--cyan); margin-bottom: var(--space-3); } .bucket-card__title { font-family: var(--font-sans); font-size: var(--step-3); font-weight: 600; letter-spacing: -0.025em; color: #ffffff; margin-bottom: var(--space-2); } .bucket-card__pitch { color: var(--agency-ink-soft); margin-bottom: var(--space-3); } .bucket-card__list { list-style: none; padding: 0; margin: 0 0 var(--space-3); font-size: var(--step--1); color: var(--agency-ink-soft); } .bucket-card__list li { padding: 0.25rem 0; } .bucket-card__more { margin-top: auto; font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); letter-spacing: 0.04em; } .bucket-card:hover .bucket-card__more { color: var(--accent-hover); } /* Contact form */ .contact-form { max-width: 36rem; margin-inline: auto; } .contact-form .field { display: block; margin-bottom: var(--space-3); } .contact-form .field label { display: block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); margin-bottom: var(--space-1); font-weight: 500; } .contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 0.85rem 1rem; font: inherit; background: var(--agency-bg); color: var(--agency-ink); border: 1px solid var(--agency-hairline-bright); border-radius: var(--radius); transition: border-color 0.15s ease; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--cyan); } .contact-form textarea { resize: vertical; min-height: 8rem; } .contact-form .field--actions { display: flex; justify-content: center; margin-top: var(--space-4); } /* ============================================================ BLOG THEME (Backlinko-faithful: white bg, default-blue links, sticky left TOC, big headings, big readable body) ============================================================ */ body.blog { background: var(--blog-bg); color: var(--blog-ink); font-family: var(--font-blog); line-height: 1.7; } body.blog ::selection { background: #d6e6ff; color: var(--blog-ink); } /* Body links — browser-default blue active, red OK only for visited */ body.blog a { color: #0066cc; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(0, 102, 204, 0.4); transition: text-decoration-color 0.15s ease; } body.blog a:hover { text-decoration-color: #0066cc; } body.blog a:visited { color: #6633a3; text-decoration-color: rgba(102, 51, 163, 0.35); } /* Blog header — light variant */ .site-header--blog { background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--blog-hairline); } .site-header--blog .brand img { filter: none; } body.blog .nav > a { color: var(--blog-ink-soft); } body.blog .nav > a:hover { color: var(--blog-ink); } body.blog .nav > a[aria-current="page"] { color: var(--accent); } body.blog .btn { color: var(--blog-ink); border-color: var(--blog-ink); } body.blog .btn:hover { background: var(--blog-ink); color: var(--blog-bg); } body.blog .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) !important; } body.blog .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } /* Blog index */ .blog-index__header { padding-block: var(--space-6) var(--space-4); border-bottom: 1px solid var(--blog-hairline); } .blog-index__header h1 { font-family: var(--font-blog); font-size: clamp(3.5rem, 8vw, 6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; margin-top: var(--space-3); color: var(--blog-ink); } .blog-index__header .eyebrow { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .blog-index__intro { margin-top: var(--space-3); font-size: var(--step-1); color: var(--blog-ink-soft); max-width: 36rem; } /* Blog category filter pills */ .blog-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; padding-block: var(--space-3); border-bottom: 1px solid var(--blog-hairline); margin-bottom: var(--space-2); } .blog-filter__label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blog-ink-soft); padding: 0.5rem 0; margin-right: 0.5rem; } .blog-filter__btn { background: transparent; border: 1px solid var(--blog-hairline); color: var(--blog-ink-soft); font-family: var(--font-blog); font-size: var(--step--1); padding: 0.45rem 1rem; border-radius: 999px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .blog-filter__btn:hover { border-color: var(--blog-ink); color: var(--blog-ink); } .blog-filter__btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: #fff7f1; font-weight: 500; } .blog-filter__count { margin-left: 0.4em; font-size: 0.85em; opacity: 0.6; } .post-list { list-style: none; padding: 0; margin: 0; } .post-list__item { border-bottom: 1px solid var(--blog-hairline); } .post-list__item[hidden] { display: none; } .post-list__item:last-child { border-bottom: none; } .post-list__link { display: block; padding-block: var(--space-4); text-decoration: none !important; color: inherit; } .post-list__link:hover .post-list__title { color: var(--accent); } .post-list__meta { display: flex; flex-wrap: wrap; gap: 0.5em; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blog-ink-soft); } .post-list__sep { opacity: 0.5; } .post-list__title { font-family: var(--font-blog); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: var(--space-2) 0 var(--space-2); color: var(--blog-ink); transition: color 0.15s ease; } .post-list__excerpt { margin: 0; color: var(--blog-ink-soft); font-size: var(--step-0); line-height: 1.55; max-width: 42rem; } .post-list__more { display: inline-block; margin-top: var(--space-2); font-size: var(--step--1); color: var(--accent); font-weight: 500; } /* Blog post header — Backlinko-style integrated banner (text left, image right). Per-category background color so the hero feels varied across posts. The renderer puts the post category as data-cat on .post__hero. */ .post__hero { display: grid; grid-template-columns: 1fr; /* Uniform agency-navy across all categories — matches the agency theme. Per-category color variation revisited later. */ background: var(--agency-bg, #0F1729); color: #fff; margin-bottom: var(--space-4); } @media (min-width: 760px) { .post__hero { grid-template-columns: 1.05fr 1fr; align-items: stretch; } } .post__hero__text { padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; text-align: left; } .post__crumbs { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8fd0ff; /* brighter than --cyan so it pops on navy */ margin-bottom: 1rem; } .post__crumbs a { color: #8fd0ff; text-decoration: none !important; font-weight: 700; } .post__crumbs a:hover { color: #b9e2ff; } .post__crumbs > a:last-of-type, .post__crumbs span { color: #8fd0ff; } .post__title { font-family: var(--font-blog); font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: #fff; max-width: 22ch; margin: 0 0 var(--space-3); } /* Author / date row inside the hero, with circular headshot avatar */ .post__byline { display: flex; align-items: center; gap: 0.75rem; color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; margin-top: 0.5rem; } .post__byline-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, 0.18); } .post__byline-text { display: flex; flex-direction: column; line-height: 1.3; } .post__byline-author { color: #fff; font-weight: 600; font-size: 0.95rem; } .post__byline-meta { color: rgba(255, 255, 255, 0.6); font-size: 0.82rem; } /* Image side of the side-by-side hero — uses background-image so the featured banner cover-fills the right column at any aspect ratio. */ .post__hero__img { background-size: cover; background-position: center; min-height: 260px; } @media (max-width: 760px) { .post__hero__img { min-height: 200px; order: -1; } /* on mobile, image stacks above text */ } .post__meta { display: inline-flex; flex-wrap: wrap; gap: 0.5em; font-size: var(--step--1); color: var(--blog-ink-soft); } .post__meta-sep { opacity: 0.5; } .post__layout { display: grid; grid-template-columns: 1fr; gap: var(--space-5); padding-top: var(--space-5); } /* TOC hidden on mobile per Tim 2026-05-04 — no floating menu, just hide. Reading-time sticker on the post hero already gives a sense of length. */ @media (max-width: 56rem) { .toc { display: none; } } /* Backlinko-style floating vertical share rail (desktop only). Sits in the right column of the post grid and sticks alongside scrolling content. */ .post__share-rail { display: none; } @media (min-width: 64rem) { .post__layout { grid-template-columns: 14rem minmax(0, 42rem) 5rem; gap: var(--space-6); justify-content: center; } .post__share-rail { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; position: sticky; top: 6rem; align-self: start; padding: 1rem 0; background: #fff; border-radius: var(--radius); box-shadow: 0 4px 18px rgba(15, 23, 41, 0.06); } .post__share-rail-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blog-ink-soft); margin-bottom: 0.25rem; } .rail-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 6px; background: var(--rail-bg, #444); color: #fff !important; cursor: pointer; text-decoration: none !important; transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 2px 0 rgba(0,0,0,0.18); } .rail-btn svg { width: 1.15rem; height: 1.15rem; } .rail-btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 6px 14px rgba(0,0,0,0.12); } .rail-btn:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(0,0,0,0.18); } .rail-btn--x { --rail-bg: #000000; } .rail-btn--facebook { --rail-bg: #1877F2; } .rail-btn--reddit { --rail-bg: #FF4500; } .rail-btn--linkedin { --rail-bg: #0A66C2; } .rail-btn--email { --rail-bg: #6B7280; } .rail-btn--copy { --rail-bg: var(--accent); } .rail-btn--copy.is-copied { --rail-bg: #16a34a; } } @media (min-width: 1280px) { .post__layout { grid-template-columns: 14rem minmax(0, 44rem) 6rem; } .rail-btn { width: 2.85rem; height: 2.85rem; } .rail-btn svg { width: 1.3rem; height: 1.3rem; } } .toc { display: none; } @media (min-width: 64rem) { .toc { display: block; position: sticky; top: 6rem; align-self: start; font-size: var(--step--1); border-left: 2px solid var(--blog-hairline); padding-left: var(--space-3); max-height: calc(100vh - 8rem); overflow-y: auto; } .toc__label { font-family: var(--font-mono); font-size: var(--step--2); color: var(--blog-ink-soft); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-2); } .toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; } .toc a { color: var(--blog-ink-soft); text-decoration: none !important; line-height: 1.4; display: block; padding-block: 0.25rem; border-left: 2px solid transparent; margin-left: -1.5rem; padding-left: 1.5rem; transition: color 0.15s ease, border-color 0.15s ease; } .toc a:hover { color: var(--blog-ink); } .toc a[aria-current="true"] { color: var(--accent); font-weight: 500; border-left-color: var(--accent); } } .post__body { font-size: 1.125rem; line-height: 1.7; color: var(--blog-ink); } /* Anchor scroll-offset: when a TOC link jumps to an H2, leave room above so the heading lands BELOW the sticky-ish viewport top, not behind it. */ .post__body h2[id], .post__body h3[id] { scroll-margin-top: 5rem; } .post__body > p:first-of-type { font-size: 1.25rem; line-height: 1.55; color: var(--blog-ink); font-weight: 400; } .post__body p { margin: 0 0 var(--space-3); } .post__body h2 { font-family: var(--font-blog); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--blog-ink); margin-top: var(--space-6); margin-bottom: var(--space-3); scroll-margin-top: 5rem; } .post__body h3 { font-family: var(--font-blog); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; margin-top: var(--space-5); margin-bottom: var(--space-2); color: var(--blog-ink); } .post__body ul, .post__body ol { padding-left: 1.5rem; margin: 0 0 var(--space-4); } .post__body li { margin-bottom: 0.5em; } .post__body ol li::marker { color: var(--accent); } /* USA Today-style orange triangle bullets for unordered lists */ .post__body ul { list-style: none; padding-left: 1.75rem; } .post__body ul > li { position: relative; } .post__body ul { padding-left: 1.6rem; /* room for triangle */ } .post__body ul > li { padding-left: 0.15rem; /* small gap between triangle and text */ } .post__body ul > li::before { content: "\25B6"; /* solid right-pointing triangle */ color: var(--accent); position: absolute; left: -1.15rem; /* closer to text */ top: 0.55em; /* nudged lower per Tim — visually centered */ font-size: 0.85em; line-height: 1; font-weight: 900; text-shadow: 0.5px 0 currentColor; } .post__body strong { font-weight: 700; color: var(--blog-ink); } .post__body img { max-width: 100%; height: auto; border-radius: var(--radius); margin-block: var(--space-4); display: block; } .post__body figure { margin: var(--space-4) 0; } .post__body figure img { margin: 0 auto; } /* (Removed the .post__body img[width] / figure img[width] override that was stealing specificity from .alignright/.alignleft and shrinking floated illustrations to their intrinsic width. Sizing now lives entirely in the alignment-class rules below + the .small-illust class.) */ /* For images explicitly aligned right (WP "alignright" or our wrapper), float alongside paragraph text. */ .post__body .alignright, .post__body img.alignright, .post__body figure.alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; width: 325px; /* consistent inline-illustration size */ max-width: 45%; } .post__body figure.alignright img, .post__body figure.alignleft img { width: 100%; height: auto; } .post__body .alignleft, .post__body img.alignleft { float: left; margin: 0.5rem 1.5rem 1rem 0; width: 325px; max-width: 45%; } .post__body .aligncenter, .post__body img.aligncenter, .post__body figure.aligncenter { margin-left: auto; margin-right: auto; } /* Small inline illustrations (e.g. 300x300 hedgehog, square logos) display at a consistent ~360px width. Marked by the renderer with .small-illust. */ .post__body figure.small-illust, .post__body img.small-illust { max-width: 360px; margin-left: auto; margin-right: auto; } .post__body figure.small-illust img { width: 100%; height: auto; } /* Floated small inline illustrations get the same target width */ .post__body figure.alignright, .post__body img.alignright, .post__body figure.alignleft, .post__body img.alignleft { width: 360px; max-width: 55%; /* let it actually reach 360 in the narrow column */ } @media (max-width: 600px) { .post__body .alignright, .post__body .alignleft, .post__body img.alignright, .post__body img.alignleft { float: none; max-width: 100%; margin: var(--space-3) auto; } } .post__body figcaption { font-size: var(--step--1); color: var(--blog-ink-soft); margin-top: var(--space-1); text-align: center; font-style: italic; } .post__body hr { border: none; border-top: 1px solid var(--blog-hairline); margin-block: var(--space-5); } /* Backlinko-style featured-image hero — sits between the post header and the body grid. Constrained to the narrow column, rounded, with soft shadow. */ .post__featured { margin: var(--space-4) auto var(--space-5); padding: 0 var(--space-3); } .post__featured-img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: var(--radius-lg, 14px); box-shadow: 0 6px 24px rgba(15, 23, 41, 0.12), 0 2px 6px rgba(15, 23, 41, 0.06); background: #f3f0ea; } @media (max-width: 600px) { .post__featured { padding: 0 var(--space-2); margin-bottom: var(--space-4); } .post__featured-img { max-height: 280px; border-radius: var(--radius); } } /* CTA buttons in body: standalone links with verb-prefixed text styled to match the agency "Start a project" button. Drives affiliate click-through. */ .post__body .cta-button-wrap { text-align: center; margin: var(--space-4) 0; } .post__body a.cta-button { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.6rem; background: var(--accent); color: #fff !important; font-family: var(--font-sans); font-weight: 700; font-size: 1.05rem; text-decoration: none !important; border-radius: 999px; box-shadow: 0 4px 14px rgba(254, 126, 29, 0.28); transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease; } .post__body a.cta-button::after { content: "→"; font-weight: 600; transition: transform 0.15s ease; } .post__body a.cta-button:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(254, 126, 29, 0.35); filter: brightness(1.05); } .post__body a.cta-button:hover::after { transform: translateX(3px); } /* Read Next pill — centered, theme-friendly arrow icon */ .post__body .read-next { display: flex; align-items: center; justify-content: center; gap: 0.65rem; flex-wrap: wrap; margin: var(--space-5) auto; padding: 0.85rem 1.5rem; max-width: max-content; background: #faf6f1; border: 1px solid #f0e6d8; border-left: 3px solid var(--accent); border-radius: 999px; font-size: 0.95em; } .post__body .read-next__label { font-family: var(--font-mono); font-size: 0.7em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .post__body .read-next a { color: var(--blog-ink); font-weight: 600; text-decoration: none; } .post__body .read-next a:hover { color: var(--accent); text-decoration: underline; } .post__body .read-next__arrow { color: var(--accent); font-weight: 700; } /* Key Takeaways callout — same family as the affiliate-disclosure box. The renderer wraps any H2 with text "Key Takeaways" plus its following list block in