/* ============================================================ 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: 1000; 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 { position: relative; z-index: 1002; 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: absolute; top: 100%; left: 0; right: 0; z-index: 1001; background: var(--agency-bg); padding: var(--space-2) var(--space-4) var(--space-4); max-height: calc(100dvh - 5rem); overflow-y: auto; display: flex; flex-direction: column; border-bottom: 1px solid var(--agency-hairline); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24); } body.blog .mobile-menu { background: var(--blog-bg); } @media (min-width: 56rem) { .mobile-menu { display: none !important; } } body.nav-open .site-header { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); } .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; } .agency-signal { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; min-height: 2.25rem; margin-top: var(--space-3); padding: 0 0.8rem; border: 1px solid var(--agency-hairline-bright); border-radius: 999px; background: rgba(255, 255, 255, 0.035); color: var(--agency-ink-soft); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; } .hero .agency-signal, .page-hero .agency-signal { margin-inline: auto; } .agency-signal__label { color: var(--agency-ink-mute); text-transform: uppercase; } .agency-signal__count { color: var(--accent); font-weight: 800; } .agency-signal__count:empty::before { content: ""; color: var(--agency-ink-mute); font-weight: 500; } @media (max-width: 30rem) { .agency-signal { font-size: 0.78rem; } } /* 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: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); } .card__views { flex: 0 0 auto; color: var(--accent); font-weight: 750; } .card__views:empty { display: none; } .card__views:empty::before { content: ""; color: var(--agency-ink-mute); font-weight: 500; } .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; } @media (max-width: 30rem) { .card .eyebrow { align-items: flex-start; flex-direction: column; } } /* 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__views { color: var(--agency-ink-soft); font-variant-numeric: tabular-nums; } .site-footer__views-count { color: var(--accent); font-weight: 700; } .site-footer__views-count:empty::before { content: ""; color: var(--agency-ink-mute); font-weight: 500; } .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__views { color: var(--accent); font-weight: 700; } .post-list__views:empty { display: none; } .post-list__views:empty::before { content: ""; color: var(--blog-ink-soft); font-weight: 400; opacity: 0.55; } .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 { position: relative; 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: 0; } @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; margin-bottom: 1rem; } /* Force the same light-cyan across ALL link states — link, visited, hover, active, focus — otherwise visited links default to browser purple. */ .post__crumbs a, .post__crumbs a:link, .post__crumbs a:visited, .post__crumbs a:active, .post__crumbs a:focus { color: #8fd0ff !important; text-decoration: none !important; font-weight: 700; } .post__crumbs a:hover { color: #b9e2ff !important; } .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; } .post__byline-views { display: none; white-space: nowrap; } .post__byline-views.is-loaded { display: inline; } .post__byline-views-count { color: var(--accent); font-weight: 700; } .post__byline-views-count:empty::before { content: ""; color: rgba(255, 255, 255, 0.46); font-weight: 500; } .post__byline-disclosure { display: inline-flex; align-items: center; width: fit-content; margin-top: 0.45rem; padding: 0.28rem 0.55rem; border: 1px solid rgba(255, 126, 29, 0.55); border-radius: 999px; background: rgba(255, 126, 29, 0.12); color: rgba(255, 255, 255, 0.9); font-size: 0.78rem; line-height: 1.25; } .post__byline-disclosure strong { color: #fff; font-weight: 700; } .post__hero-disclosure { position: absolute; right: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.5rem); z-index: 2; max-width: min(22rem, calc(100% - 2rem)); margin: 0; padding: 0.5rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(15, 23, 41, 0.78); color: rgba(255, 255, 255, 0.9); font-size: 0.76rem; line-height: 1.35; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .post__hero-disclosure strong { color: #fff; font-weight: 700; } /* 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 { width: calc(100vw - 2rem); max-width: calc(100vw - 2rem); margin-inline: auto; overflow: hidden; border-radius: 8px; } .post__hero__text { padding: 1.65rem 1.25rem 1.9rem; } .post__hero__img { order: -1; /* on mobile, image stacks above text */ min-height: clamp(12rem, 44vw, 15rem); margin: 1rem 1rem 0; border-radius: 8px; } .post__hero-disclosure { position: static; order: 3; max-width: none; margin: 0 1.25rem 1.25rem; background: rgba(255, 255, 255, 0.09); } .post__title { max-width: none; } .post__byline { align-items: flex-start; } } .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-views { display: inline-flex; align-items: center; gap: 0.6rem; margin: calc(var(--space-5) * -0.65) 0 var(--space-5); padding: 0.55rem 0.8rem; border: 1px solid var(--blog-hairline); border-radius: 8px; background: #fff; color: var(--blog-ink-soft); font-size: 0.9rem; } .post-views__label { font-family: var(--font-mono); font-size: 0.76em; letter-spacing: 0.1em; text-transform: uppercase; } .post-views__count { color: var(--accent); font-weight: 750; } .post-views__count:empty::before { content: ""; color: var(--blog-ink-soft); font-weight: 500; opacity: 0.7; } .stack-orbit { margin: var(--space-4) 0 var(--space-3); perspective: 1100px; max-width: 100%; } .post__body .stack-orbit + h2 { margin-top: var(--space-2); } .stack-orbit__panel { position: relative; box-sizing: border-box; display: grid; grid-template-columns: 0.9fr 1.1fr; min-height: 23rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 75% 30%, rgba(143, 208, 255, 0.24), transparent 32%), linear-gradient(135deg, #0f1729 0%, #18213a 52%, #251a35 100%); color: #fff; box-shadow: 0 22px 60px rgba(15, 23, 41, 0.22); transform-style: preserve-3d; transition: transform 0.18s ease, box-shadow 0.18s ease; will-change: transform; } .stack-orbit__panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0.08), transparent 42%, rgba(231,109,31,0.12)); pointer-events: none; } .stack-orbit__copy { position: relative; z-index: 2; align-self: end; max-width: 22rem; min-width: 0; } .stack-orbit__eyebrow { margin: 0 0 0.7rem; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8fd0ff; } .stack-orbit__copy h3, .post__body .stack-orbit__copy h3 { margin: 0 0 0.8rem; color: var(--accent); font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.05; } .post__body .stack-orbit__copy p { margin: 0; color: rgba(255, 255, 255, 0.76); font-size: 0.98rem; overflow-wrap: anywhere; } .stack-orbit__stage { position: relative; min-height: 19rem; transform: translateZ(34px); max-width: 100%; } .stack-orbit__ring { position: absolute; inset: 50%; border: 1px solid rgba(143, 208, 255, 0.3); border-radius: 999px; transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-18deg); } .stack-orbit__ring--outer { width: min(26rem, 92%); aspect-ratio: 1; animation: orbitOuterDrift 18s linear infinite; } .stack-orbit__ring--inner { width: min(16rem, 58%); aspect-ratio: 1; border-color: rgba(231, 109, 31, 0.42); animation: orbitInnerDrift 14s linear infinite reverse; } .stack-orbit__node { position: absolute; display: grid; place-items: center; align-content: center; gap: 0.2rem; width: 6.3rem; min-height: 3.6rem; padding: 0.55rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; background: rgba(255,255,255,0.1); color: #fff; text-align: center; font-size: 0.78rem; font-weight: 750; line-height: 1.15; box-shadow: 0 12px 34px rgba(0,0,0,0.2); backdrop-filter: blur(10px); transform: translateZ(60px); } .stack-orbit__node strong, .post__body .stack-orbit__node strong { display: block; color: inherit; font-size: 0.78rem; line-height: 1.1; } .stack-orbit__node small { display: block; color: rgba(255, 255, 255, 0.72); font-size: 0.64rem; font-weight: 600; line-height: 1.18; } .stack-orbit__node--human { left: 50%; top: 50%; width: 7.2rem; min-height: 4.2rem; background: var(--accent); color: #fff; transform: translate(-50%, -50%) translateZ(86px); } .stack-orbit__node--human small { color: rgba(255, 255, 255, 0.78); } .stack-orbit__node--models { left: 8%; top: 18%; } .stack-orbit__node--agents { right: 4%; top: 16%; } .stack-orbit__node--voice { left: 0; bottom: 18%; } .stack-orbit__node--local { right: 8%; bottom: 14%; } .stack-orbit__node--qa { left: 43%; bottom: 0; } @media (max-width: 760px) { .stack-orbit { perspective: none; width: calc(100vw - 2rem); max-width: calc(100vw - 2rem); } .stack-orbit__panel { grid-template-columns: 1fr; min-height: auto; width: 100%; padding: 1rem; transform: none !important; touch-action: pan-y; } .stack-orbit__copy { align-self: auto; margin-bottom: var(--space-3); max-width: none; } .stack-orbit__copy h3 { font-size: clamp(1.45rem, 8vw, 1.9rem); } .stack-orbit__stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; min-height: auto; transform: none; } .stack-orbit__stage::before { content: ""; position: absolute; inset: -0.5rem; border-radius: 8px; background: radial-gradient(circle at 50% 30%, rgba(143, 208, 255, 0.18), transparent 36%), conic-gradient(from 0deg, rgba(231, 109, 31, 0.22), rgba(143, 208, 255, 0.2), rgba(231, 109, 31, 0.22)); opacity: 0.45; animation: mobileStackGlow 7s linear infinite; } .stack-orbit__node { position: relative; left: auto; right: auto; top: auto; bottom: auto; z-index: 2; width: auto; min-width: 0; min-height: 4.85rem; font-size: clamp(0.68rem, 3.4vw, 0.78rem); transform: none; } .stack-orbit__node strong, .post__body .stack-orbit__node strong { font-size: clamp(0.72rem, 3.4vw, 0.84rem); } .stack-orbit__node small { font-size: clamp(0.62rem, 3vw, 0.72rem); } .stack-orbit__node--human { grid-column: 1 / -1; width: auto; min-height: 4.5rem; } .stack-orbit__ring { display: none; } .stack-orbit__panel.is-mobile-active .stack-orbit__node { animation: mobileNodePop 0.55s ease both; } .stack-orbit__panel.is-mobile-active .stack-orbit__node:nth-of-type(2) { animation-delay: 0.04s; } .stack-orbit__panel.is-mobile-active .stack-orbit__node:nth-of-type(3) { animation-delay: 0.08s; } .stack-orbit__panel.is-mobile-active .stack-orbit__node:nth-of-type(4) { animation-delay: 0.12s; } .stack-orbit__panel.is-mobile-active .stack-orbit__node:nth-of-type(5) { animation-delay: 0.16s; } .stack-orbit__panel.is-mobile-active .stack-orbit__node:nth-of-type(6) { animation-delay: 0.2s; } } @media (max-width: 560px) { .stack-orbit__stage { grid-template-columns: 1fr; } .stack-orbit__node, .stack-orbit__node--human { min-height: 3.75rem; } } .systems-shift { margin: var(--space-5) 0; perspective: 1100px; max-width: 100%; } .systems-shift__panel { position: relative; box-sizing: border-box; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-4); min-height: 20rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid rgba(15, 23, 41, 0.08); border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 18% 20%, rgba(231, 109, 31, 0.16), transparent 34%), linear-gradient(135deg, #fff7f1 0%, #ffffff 46%, #eef6ff 100%); box-shadow: 0 18px 48px rgba(15, 23, 41, 0.12); transform-style: preserve-3d; transition: transform 0.18s ease, box-shadow 0.18s ease; will-change: transform; } .systems-shift__copy { align-self: center; position: relative; z-index: 2; min-width: 0; } .systems-shift__eyebrow { margin: 0 0 0.7rem; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 750; } .systems-shift__copy h3, .post__body .systems-shift__copy h3 { margin: 0 0 0.85rem; color: var(--blog-ink); font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.08; } .post__body .systems-shift__copy p { margin: 0; color: var(--blog-ink-soft); font-size: 0.98rem; overflow-wrap: anywhere; } .systems-shift__timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 0.65rem; transform: translateZ(42px); } .systems-shift__timeline::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 3px; background: linear-gradient(90deg, var(--accent), #8fd0ff); transform: translateY(-50%); opacity: 0.5; display: none; } .systems-shift__step { position: relative; z-index: 2; display: grid; gap: 0.25rem; min-height: 7rem; padding: 0.9rem 0.7rem; border: 1px solid rgba(15, 23, 41, 0.08); border-radius: 8px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 10px 24px rgba(15, 23, 41, 0.1); text-align: center; align-content: center; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .systems-shift__step:hover { border-color: rgba(231, 109, 31, 0.28); box-shadow: 0 14px 30px rgba(15, 23, 41, 0.16); } .systems-shift__step strong { color: var(--accent); font-size: 1.02rem; } .systems-shift__step small { color: var(--blog-ink-soft); font-size: 0.78rem; line-height: 1.25; } .systems-shift__step--one { transform: translateY(1.4rem); } .systems-shift__step--two { transform: translateY(-1rem); } .systems-shift__step--three { transform: translateY(0.8rem); } .systems-shift__step--four { transform: translateY(-1.3rem); } .author-bio-card { --author-photo-size: 10.25rem; display: grid; grid-template-columns: minmax(0, 1fr) var(--author-photo-size); grid-template-areas: "heading heading" "text image"; gap: var(--space-3); align-items: start; margin: var(--space-4) 0; padding: var(--space-4); border: 1px solid var(--blog-hairline); border-radius: 8px; background: #fff7f1; } .author-bio-card__heading, .post__body .author-bio-card__heading { grid-area: heading; margin: 0 0 0.75rem; color: var(--blog-ink); font-size: clamp(1.35rem, 3vw, 1.7rem); scroll-margin-top: 5rem; } .author-bio-card__text { grid-area: text; min-width: 0; } .author-bio-card__text p { margin: 0; color: var(--blog-ink); font-size: 0.98rem; line-height: 1.65; } .author-bio-card img { grid-area: image; width: var(--author-photo-size); aspect-ratio: 1; object-fit: cover; margin-block: 0; align-self: start; border-radius: 8px; border: 3px solid #fff; box-shadow: 0 10px 24px rgba(15, 23, 41, 0.16); } .post__body .author-bio-card img { width: var(--author-photo-size); margin-block: 0; align-self: start; } @media (max-width: 760px) { .systems-shift { perspective: none; width: calc(100vw - 2rem); max-width: calc(100vw - 2rem); } .systems-shift__panel, .author-bio-card { grid-template-columns: 1fr; } .systems-shift__panel { width: 100%; padding: 1rem; gap: var(--space-3); transform: none !important; touch-action: pan-y; } .systems-shift__copy h3 { font-size: clamp(1.45rem, 8vw, 1.85rem); } .systems-shift__timeline { grid-template-columns: 1fr; gap: 0.75rem; min-height: auto; padding-left: 0; transform: none; } .systems-shift__timeline::before { display: none; left: 0.45rem; right: auto; top: 0.7rem; bottom: 0.7rem; width: 3px; height: auto; transform: none; } .systems-shift__step, .systems-shift__step--one, .systems-shift__step--two, .systems-shift__step--three, .systems-shift__step--four { min-height: 4.65rem; padding: 0.85rem 0.9rem; text-align: left; transform: none; } .systems-shift__step::before { content: none; position: absolute; left: -1.1rem; top: 50%; width: 0.72rem; aspect-ratio: 1; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(231, 109, 31, 0.16); transform: translateY(-50%); } .systems-shift__panel.is-mobile-active .systems-shift__step { animation: mobileStepSlide 0.55s ease both; } .systems-shift__panel.is-mobile-active .systems-shift__step:nth-child(2) { animation-delay: 0.06s; } .systems-shift__panel.is-mobile-active .systems-shift__step:nth-child(3) { animation-delay: 0.12s; } .systems-shift__panel.is-mobile-active .systems-shift__step:nth-child(4) { animation-delay: 0.18s; } .author-bio-card { --author-photo-size: clamp(4.75rem, 20vw, 5.75rem); display: block; gap: 0.75rem; padding: 1rem; } .author-bio-card::after { content: ""; display: block; clear: both; } .author-bio-card__text { min-width: 0; } .author-bio-card__heading, .post__body .author-bio-card__heading { margin-bottom: 0.75rem; font-size: 1.25rem; } .author-bio-card img { float: right; width: var(--author-photo-size); margin: 0.15rem 0 0.75rem 0.9rem; border-width: 2px; } } @keyframes mobileStackGlow { to { transform: rotate(360deg); } } @keyframes orbitOuterDrift { from { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-18deg); } to { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(342deg); } } @keyframes orbitInnerDrift { from { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-18deg); } to { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(342deg); } } @keyframes workflowFill { from { transform: scaleY(0.08); } to { transform: scaleY(1); } } @keyframes workflowFillMobile { from { transform: scaleX(0.08); } to { transform: scaleX(1); } } @keyframes workflowWave { 0%, 100% { transform: translateY(0); opacity: 0.35; } 50% { transform: translateY(0.18rem); opacity: 0.68; } } @keyframes mobileNodePop { 0% { transform: scale(0.96); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } } @keyframes mobileStepSlide { 0% { transform: translateX(-0.35rem); } 60% { transform: translateX(0.12rem); } 100% { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .stack-orbit__stage::before, .stack-orbit__ring, .workflow-change__bar-fill, .workflow-change__bar-fill::after, .stack-orbit__panel.is-mobile-active .stack-orbit__node, .systems-shift__panel.is-mobile-active .systems-shift__step { animation: none; } } .workflow-change { margin: var(--space-5) 0; } .workflow-change__panel { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-4); align-items: end; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; color: #fff; background: radial-gradient(circle at 86% 18%, rgba(143, 208, 255, 0.22), transparent 32%), radial-gradient(circle at 12% 92%, rgba(231, 109, 31, 0.18), transparent 28%), linear-gradient(135deg, #0f1729 0%, #17203a 58%, #241a34 100%); box-shadow: 0 22px 58px rgba(15, 23, 41, 0.2); overflow: hidden; transform-style: preserve-3d; transition: transform 0.18s ease, box-shadow 0.18s ease; } .workflow-change__panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0.08), transparent 44%, rgba(231,109,31,0.11)); opacity: 0.9; pointer-events: none; } .workflow-change__panel:hover { box-shadow: 0 28px 70px rgba(15, 23, 41, 0.28); } .workflow-change__copy { position: relative; z-index: 2; min-width: 0; } .workflow-change__eyebrow, .writer-stack__eyebrow { margin: 0 0 0.7rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8fd0ff; font-weight: 750; } .workflow-change__copy h3, .post__body .workflow-change__copy h3, .writer-stack__copy h3, .post__body .writer-stack__copy h3 { margin: 0 0 0.85rem; color: #fff; font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.08; } .post__body .workflow-change__copy p { margin: 0; color: rgba(255, 255, 255, 0.76); font-size: 0.98rem; } .workflow-change__chart { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-items: end; min-height: 16rem; } .workflow-change__bar { position: relative; display: grid; align-content: end; min-height: 15rem; padding: 0.95rem 0.85rem; border-radius: 8px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 30px rgba(0, 0, 0, 0.12); overflow: hidden; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .workflow-change__bar:hover { transform: translateY(-0.25rem); border-color: rgba(143, 208, 255, 0.48); background: rgba(255, 255, 255, 0.13); } .workflow-change__bar-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar-height); background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 18%), linear-gradient(180deg, #8fd0ff 0%, var(--accent) 100%); opacity: 0.88; transform-origin: bottom; animation: workflowFill 1.05s cubic-bezier(.2,.8,.2,1) both; } .workflow-change__bar-fill::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.45rem; background: rgba(255, 255, 255, 0.34); animation: workflowWave 2.4s ease-in-out infinite; } .workflow-change__bar strong, .workflow-change__bar small { position: relative; z-index: 2; } .workflow-change__bar strong, .post__body .workflow-change__bar strong { color: #fff; font-size: 1rem; line-height: 1.1; text-shadow: 0 1px 7px rgba(0, 0, 0, 0.34); } .workflow-change__bar small, .post__body .workflow-change__bar small { color: rgba(255, 255, 255, 0.78); font-size: 0.76rem; line-height: 1.25; text-shadow: 0 1px 7px rgba(0, 0, 0, 0.28); } .writer-stack { margin: var(--space-5) 0; } .writer-stack__panel { padding: clamp(1.2rem, 3vw, 2rem); border-radius: 8px; color: #fff; background: radial-gradient(circle at 18% 18%, rgba(143, 208, 255, 0.2), transparent 36%), linear-gradient(135deg, #0f1729 0%, #18213a 52%, #251a35 100%); box-shadow: 0 22px 60px rgba(15, 23, 41, 0.2); overflow: hidden; } .writer-stack__copy { margin-bottom: var(--space-3); } .writer-stack__copy h3, .post__body .writer-stack__copy h3 { color: #fff; } .post__body .writer-stack__copy p { margin: 0; color: rgba(255, 255, 255, 0.76); font-size: 0.98rem; } .writer-stack__flow { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .writer-stack__flow::before { display: none; } .writer-stack__node { position: relative; z-index: 2; display: grid; gap: 0.35rem; align-content: center; min-height: 11rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.1); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16); transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .writer-stack__node:hover { border-color: rgba(143, 208, 255, 0.46); background: rgba(255, 255, 255, 0.14); transform: translateY(-0.35rem); } .writer-stack__node--middle { transform: translateY(-0.75rem); } .writer-stack__node--middle:hover { transform: translateY(-1.1rem); } .writer-stack__node--top { background: rgba(254, 126, 29, 0.2); transform: translateY(-1.5rem); } .writer-stack__node--top:hover { transform: translateY(-1.85rem); } .writer-stack__tag { width: fit-content; padding: 0.22rem 0.46rem; border-radius: 999px; background: rgba(143, 208, 255, 0.14); color: #8fd0ff; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; } .writer-stack__node strong, .post__body .writer-stack__node strong { color: #fff; font-size: 1rem; line-height: 1.15; } .writer-stack__node small { color: rgba(255, 255, 255, 0.78); font-size: 0.8rem; line-height: 1.35; } .writer-stack__ladder { display: grid; gap: 0.75rem; } .writer-stack__layer { position: relative; display: grid; gap: 0.25rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.1); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16); } .writer-stack__layer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.35rem; background: var(--accent); } .writer-stack__layer--middle { margin-left: 6%; } .writer-stack__layer--top { margin-left: 12%; background: rgba(254, 126, 29, 0.18); } .writer-stack__layer strong { color: var(--accent); font-size: 1rem; } .writer-stack__layer span { color: rgba(255, 255, 255, 0.76); font-size: 0.88rem; line-height: 1.35; } @media (max-width: 760px) { .workflow-change, .writer-stack { width: calc(100vw - 2rem); max-width: calc(100vw - 2rem); } .workflow-change__panel { grid-template-columns: 1fr; gap: var(--space-3); padding: 1rem; } .workflow-change__chart { grid-template-columns: 1fr; min-height: auto; } .workflow-change__bar { min-height: 5.25rem; padding-left: 1rem; } .workflow-change__bar-fill { top: 0; width: var(--bar-height); height: auto; right: auto; transform-origin: left; animation-name: workflowFillMobile; } .writer-stack__panel { padding: 1rem; } .writer-stack__flow { grid-template-columns: 1fr; } .writer-stack__flow::before { display: none; } .writer-stack__node, .writer-stack__node--middle, .writer-stack__node--top { min-height: auto; transform: none; } .writer-stack__layer, .writer-stack__layer--middle, .writer-stack__layer--top { margin-left: 0; } } .cost-tiers, .career-shift { margin: var(--space-5) 0; } .autopilot-map { margin: var(--space-5) 0; } .autopilot-map__panel { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: var(--space-4); align-items: center; padding: clamp(1.2rem, 3vw, 2rem); border-radius: 8px; color: #fff; background: radial-gradient(circle at 16% 18%, rgba(143, 208, 255, 0.22), transparent 34%), radial-gradient(circle at 86% 18%, rgba(231, 109, 31, 0.18), transparent 28%), linear-gradient(135deg, #101828 0%, #17203a 55%, #241a34 100%); box-shadow: 0 20px 50px rgba(15, 23, 41, 0.2); overflow: hidden; } .autopilot-map__eyebrow { margin: 0 0 0.7rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8fd0ff; font-weight: 750; } .autopilot-map__copy h3, .post__body .autopilot-map__copy h3 { margin: 0 0 0.85rem; color: #fff; font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.1; } .post__body .autopilot-map__copy p { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 0.98rem; line-height: 1.55; } .autopilot-map__flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; } .autopilot-map__node { display: grid; gap: 0.35rem; align-content: center; min-height: 9rem; padding: 1rem; border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .autopilot-map__node:hover { transform: translateY(-0.28rem); filter: saturate(1.06); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24); } .autopilot-map__node--now { background: linear-gradient(160deg, #e76d1f 0%, #a94714 100%); } .autopilot-map__node--next { background: linear-gradient(160deg, #2384c6 0%, #17557f 100%); } .autopilot-map__node--goal { background: linear-gradient(160deg, #198f71 0%, #0f5e4e 100%); } .autopilot-map__node span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); font-weight: 750; } .autopilot-map__node strong, .post__body .autopilot-map__node strong { color: #fff; font-size: 1rem; line-height: 1.15; } .autopilot-map__node small { color: rgba(255, 255, 255, 0.82); font-size: 0.78rem; line-height: 1.3; } .worst-box { margin: var(--space-5) 0; } .worst-box__panel { position: relative; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid rgba(35, 132, 198, 0.26); border-left: 0.45rem solid #2384c6; border-radius: 8px; background: radial-gradient(circle at 92% 8%, rgba(143, 208, 255, 0.28), transparent 32%), linear-gradient(135deg, #eaf6ff 0%, #f7fbff 54%, #eef6ff 100%); box-shadow: 0 16px 36px rgba(15, 23, 41, 0.09); } .worst-box__eyebrow { margin: 0 0 0.65rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #17557f; font-weight: 750; } .worst-box__panel h2, .post__body .worst-box__panel h2, .worst-box__panel h3, .post__body .worst-box__panel h3 { margin: 0 0 var(--space-3); color: var(--blog-ink); font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.12; } .post__body .worst-box__panel p { margin: 0 0 var(--space-3); color: var(--blog-ink); font-size: 1rem; line-height: 1.65; } .post__body .worst-box__panel p:last-child { margin-bottom: 0; font-weight: 650; } .cost-tiers__panel, .career-shift__panel { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--blog-hairline); border-radius: 8px; background: #f8fafc; box-shadow: 0 14px 34px rgba(15, 23, 41, 0.07); } .cost-tiers__intro { max-width: 36rem; margin-bottom: var(--space-3); } .cost-tiers__eyebrow, .career-shift__eyebrow { margin: 0 0 0.7rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blog-ink-soft); font-weight: 750; } .cost-tiers__intro h3, .post__body .cost-tiers__intro h3, .career-shift__copy h3, .post__body .career-shift__copy h3 { margin: 0 0 0.75rem; color: var(--blog-ink); font-size: clamp(1.3rem, 3vw, 1.85rem); line-height: 1.12; } .post__body .cost-tiers__intro p, .post__body .career-shift__copy p { margin: 0; color: var(--blog-ink-soft); font-size: 0.98rem; } .cost-tiers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .cost-tier { display: grid; gap: 0.25rem; padding: 1rem; border: 1px solid rgba(15, 23, 41, 0.08); border-radius: 8px; background: #fff; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .cost-tier:hover { transform: translateY(-0.25rem); border-color: rgba(231, 109, 31, 0.25); box-shadow: 0 12px 28px rgba(15, 23, 41, 0.1); } .cost-tier strong, .post__body .cost-tier strong { color: var(--blog-ink); font-family: var(--font-mono); font-size: 1rem; } .cost-tier span { color: var(--blog-ink); font-weight: 750; } .post__body .cost-tier p { margin: 0; color: var(--blog-ink-soft); font-size: 0.9rem; line-height: 1.45; } .cost-tier--warning { border-color: rgba(231, 109, 31, 0.22); background: #fff8f2; } .career-shift__panel { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-4); align-items: center; background: radial-gradient(circle at 92% 12%, rgba(231, 109, 31, 0.12), transparent 28%), #f8fafc; } .career-shift__flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; align-items: stretch; } .career-shift__flow span { position: relative; display: grid; align-content: center; min-height: 6.5rem; gap: 0.25rem; padding: 0.95rem; border-radius: 8px; background: #fff; border: 1px solid rgba(15, 23, 41, 0.08); box-shadow: 0 10px 24px rgba(15, 23, 41, 0.06); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .career-shift__flow span:hover { transform: translateY(-0.25rem); border-color: rgba(143, 208, 255, 0.45); box-shadow: 0 14px 30px rgba(15, 23, 41, 0.12); } .career-shift__flow span::after { content: ""; position: absolute; right: -0.48rem; top: 50%; width: 0.5rem; height: 0.5rem; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: translateY(-50%) rotate(45deg); transition: transform 0.18s ease; } .career-shift__flow span:hover::after { transform: translate(0.12rem, -50%) rotate(45deg); } .career-shift__flow span:last-child::after { display: none; } .career-shift__flow strong, .post__body .career-shift__flow strong { color: var(--blog-ink); font-size: 1rem; } .career-shift__flow small { color: var(--blog-ink-soft); font-size: 0.78rem; line-height: 1.25; } @media (max-width: 760px) { .cost-tiers, .career-shift, .autopilot-map, .worst-box { width: calc(100vw - 2rem); max-width: calc(100vw - 2rem); } .cost-tiers__panel, .career-shift__panel, .autopilot-map__panel, .worst-box__panel { padding: 1rem; } .cost-tiers__grid, .career-shift__panel, .career-shift__flow, .autopilot-map__panel, .autopilot-map__flow { grid-template-columns: 1fr; } .autopilot-map__node { min-height: 5.25rem; } .career-shift__flow span { min-height: 4.65rem; } .career-shift__flow span::after { right: 50%; top: auto; bottom: -0.5rem; transform: translateX(50%) rotate(135deg); } } .draft-notice { display: flex; justify-content: center; gap: 0.75rem; padding: 0.8rem 1rem; background: #fff7f1; border-bottom: 1px solid #ffd9c2; color: var(--blog-ink); font-size: 0.92rem; } .draft-notice strong { color: var(--accent); } /* ============================================================ INTERNAL OPS PAGE ============================================================ */ .ops-page { background: #f7f4ef; color: var(--blog-ink); } .ops-shell { width: min(68rem, calc(100% - 2rem)); margin: 0 auto; padding: var(--space-5) 0 var(--space-6); } .ops-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .ops-header .brand img { height: 2rem; } .ops-header h1 { margin: 0; font-family: var(--font-blog); font-size: clamp(2rem, 4vw, 3rem); } .ops-eyebrow { margin: 0 0 0.25rem; font-family: var(--font-mono); font-size: var(--step--2); color: var(--blog-ink-soft); text-transform: uppercase; letter-spacing: 0.08em; } .ops-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin-bottom: var(--space-4); } .ops-card { display: grid; gap: 0.35rem; padding: 1rem; border: 1px solid var(--blog-hairline); border-radius: 8px; background: #fff; text-decoration: none !important; color: var(--blog-ink); } .ops-card span { font-family: var(--font-mono); font-size: var(--step--2); color: var(--blog-ink-soft); text-transform: uppercase; letter-spacing: 0.08em; } .ops-card strong { font-size: 1rem; } .ops-section { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--blog-hairline); border-radius: 8px; background: #fff; } .ops-section--alert { border-color: rgba(231, 109, 31, 0.28); background: #fff8f2; } .ops-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-3); } .ops-section h2 { margin: 0; font-size: 1.3rem; } .ops-section p { margin: 0; color: var(--blog-ink-soft); } .ops-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin-bottom: var(--space-4); } .ops-kpi { display: grid; gap: 0.35rem; padding: 1rem; border: 1px solid var(--blog-hairline); border-radius: 8px; background: #fff; } .ops-kpi span { font-family: var(--font-mono); font-size: var(--step--2); color: var(--blog-ink-soft); text-transform: uppercase; letter-spacing: 0.08em; } .ops-kpi strong { font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1; } .ops-kpi small { color: var(--blog-ink-soft); } .ops-two-col { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr); gap: var(--space-4); align-items: start; } .ops-two-col .ops-section { margin-top: 0; } .ops-list { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; } .ops-list__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: 0.85rem 0; border-top: 1px solid var(--blog-hairline); } .ops-list__item:first-child { border-top: 0; } .ops-list__item a { color: var(--blog-ink); font-weight: 650; text-decoration-color: rgba(231, 109, 31, 0.35); } .ops-list__item span, .ops-empty { color: var(--blog-ink-soft); font-size: 0.92rem; } .ops-checklist { display: grid; gap: 0.85rem; list-style: none; padding: 0; margin: 0; } .ops-checklist li { display: grid; gap: 0.2rem; padding-left: 1.25rem; position: relative; } .ops-checklist li::before { content: ""; position: absolute; top: 0.45rem; left: 0; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--accent); } .ops-checklist span { color: var(--blog-ink-soft); } .ops-badge { display: inline-flex; align-items: center; width: fit-content; padding: 0.25rem 0.5rem; border-radius: 999px; background: #eef2ff; color: #293462; font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .ops-badge--hot { background: #fff0e6; color: #9a3b00; } .ops-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .ops-action { display: grid; gap: 0.7rem; padding: 1rem; border: 1px solid var(--blog-hairline); border-radius: 8px; background: #fbfaf8; } .ops-action h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; } .ops-action p { margin: 0; } .ops-priority { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--blog-ink); color: #fff; font-weight: 700; } .ops-table-wrap { overflow-x: auto; } .ops-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .ops-table th, .ops-table td { padding: 0.75rem 0.65rem; border-top: 1px solid var(--blog-hairline); text-align: left; vertical-align: top; } .ops-table th { border-top: 0; color: var(--blog-ink-soft); font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.07em; } .ops-table td:nth-child(1), .ops-table td:nth-child(3), .ops-table td:nth-child(4) { white-space: nowrap; } .ops-pill-list { display: flex; flex-wrap: wrap; gap: 0.6rem; } .ops-pill-list span { display: inline-flex; padding: 0.45rem 0.65rem; border: 1px solid var(--blog-hairline); border-radius: 999px; background: #fbfaf8; color: var(--blog-ink); font-size: 0.95rem; } @media (max-width: 760px) { .ops-grid { grid-template-columns: 1fr 1fr; } .ops-kpis, .ops-two-col, .ops-action-grid { grid-template-columns: 1fr; } .ops-section__head { display: grid; } .ops-list__item { grid-template-columns: 1fr; gap: 0.25rem; } } /* ============================================================ INTERNAL REVENUE DASHBOARD ============================================================ */ .dashboard-page { --dash-bg: #f3f6f8; --dash-ink: #182230; --dash-muted: #667085; --dash-soft: #eef2f6; --dash-card: #ffffff; --dash-line: #d9e0e8; --dash-orange: #ff6b22; --dash-cyan: #00a6c8; --dash-green: #238a63; --dash-gold: #e6a93b; --dash-red: #c2410c; background: linear-gradient(rgba(24, 34, 48, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 34, 48, 0.045) 1px, transparent 1px), linear-gradient(180deg, #fbfcfd 0%, #eef4f7 52%, #f9faf8 100%); background-size: 32px 32px, 32px 32px, auto; color: var(--dash-ink); } .dash-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 64px; } .dash-hero, .dash-panel, .dash-kpi, .dash-task { border: 1px solid var(--dash-line); border-radius: 8px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 48px rgba(24, 34, 48, 0.08); } .dash-hero { overflow: hidden; position: relative; } .dash-hero::before { content: ""; display: block; height: 7px; background: linear-gradient(90deg, var(--dash-orange), var(--dash-cyan), var(--dash-green), var(--dash-gold)); } .dash-topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 28px 0; } .dash-brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; } .dash-brand img { display: block; width: clamp(220px, 22vw, 300px); height: auto; max-width: 100%; object-fit: contain; flex: 0 0 auto; } .dash-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .dash-nav a, .dash-action-link, .dash-offer-row a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--dash-line); border-radius: 8px; background: #fff; color: var(--dash-ink); font-weight: 700; text-decoration: none; box-shadow: 0 8px 18px rgba(24, 34, 48, 0.06); } .dash-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dash-hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr); gap: 32px; align-items: stretch; padding: 34px 28px 30px; } .dash-hero-copy { display: grid; align-content: center; gap: 18px; min-width: 0; } .dash-kicker { margin: 0; color: var(--dash-orange); font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .dash-hero h1 { max-width: 760px; margin: 0; font-family: var(--font-blog); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: 0; } .dash-hero-copy p:not(.dash-kicker) { max-width: 650px; margin: 0; color: var(--dash-muted); font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.65; } .dash-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; } .dash-action-link--primary { border-color: transparent; background: var(--dash-ink); color: #fff; } .dash-signal-panel { display: grid; align-content: space-between; gap: 22px; min-height: 360px; padding: 22px; border: 1px solid rgba(24, 34, 48, 0.16); border-radius: 8px; background: linear-gradient(135deg, rgba(255, 107, 34, 0.12), transparent 42%), linear-gradient(160deg, #12202d 0%, #24364a 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } .dash-panel-top, .dash-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .dash-panel-top span, .dash-panel-top strong { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.08em; } .dash-panel-top strong { color: #8ee8ff; } .dash-big-number { display: grid; gap: 4px; } .dash-big-number span { font-size: clamp(4rem, 12vw, 8.5rem); font-weight: 800; line-height: 0.84; } .dash-big-number small { color: rgba(255, 255, 255, 0.72); font-size: 1rem; } .dash-sparkline { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: 8px; height: 92px; padding-top: 10px; } .dash-sparkline span { min-height: 8px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #8ee8ff, var(--dash-orange)); } .dash-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dash-mini-grid div { display: grid; gap: 4px; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; background: rgba(255, 255, 255, 0.08); } .dash-mini-grid strong { font-size: 1.5rem; } .dash-mini-grid span { color: rgba(255, 255, 255, 0.68); font-size: 0.88rem; } .dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; } .dash-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding: 8px; border: 1px solid var(--dash-line); border-radius: 8px; background: rgba(255, 255, 255, 0.78); box-shadow: 0 10px 28px rgba(24, 34, 48, 0.06); } .dash-tab { min-height: 42px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--dash-muted); font: inherit; font-weight: 800; cursor: pointer; } .dash-tab.is-active { border-color: var(--dash-line); background: var(--dash-ink); color: #fff; box-shadow: 0 8px 20px rgba(24, 34, 48, 0.14); } .dash-tab-panel[hidden] { display: none; } .dash-kpi { display: grid; gap: 8px; min-height: 150px; padding: 18px; box-shadow: 0 12px 28px rgba(24, 34, 48, 0.07); } .dash-kpi span { font-family: var(--font-mono); font-size: var(--step--2); color: var(--dash-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .dash-kpi strong { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 0.94; } .dash-kpi small { color: var(--dash-muted); } .dash-kpi--ink { border-top: 5px solid var(--dash-ink); } .dash-kpi--orange { border-top: 5px solid var(--dash-orange); } .dash-kpi--cyan { border-top: 5px solid var(--dash-cyan); } .dash-kpi--green { border-top: 5px solid var(--dash-green); } .dash-grid { display: grid; gap: 16px; margin-top: 16px; } .dash-grid--top { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr); } .dash-grid--middle { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); } .dash-panel, .dash-section { padding: 22px; } .dash-section { margin-top: 16px; border: 1px solid var(--dash-line); border-radius: 8px; background: rgba(255, 255, 255, 0.72); } .dash-section-head { margin-bottom: 18px; } .dash-section-head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.05; } .dash-chip { display: inline-flex; align-items: center; width: fit-content; min-height: 28px; padding: 0 10px; border-radius: 999px; background: #e8f7fb; color: #036880; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .dash-chip--hot { background: #fff0e6; color: var(--dash-red); } .dash-status { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 28px; padding: 0 10px; border-radius: 999px; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .dash-status--hot { background: #fff0e6; color: var(--dash-red); } .dash-status--refresh { background: #fff7d6; color: #765300; } .dash-status--hold { background: #eef3f7; color: #465465; } .dash-status--watch { background: #e8f7fb; color: #036880; } .dash-status--audit { background: #edf7ed; color: #255f3a; } .dash-bars { display: grid; gap: 12px; } .dash-bar-row { display: grid; grid-template-columns: 2rem minmax(12rem, 1fr) max-content minmax(120px, 0.7fr) 4rem; gap: 12px; align-items: center; min-height: 58px; padding: 8px 10px; border-radius: 10px; color: var(--dash-ink); text-decoration: none; transition: background 150ms ease, transform 150ms ease; } .dash-bar-row:hover, .dash-bar-row:focus-visible { background: rgba(255, 255, 255, 0.72); transform: translateX(2px); } .dash-bar-row__rank { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: var(--dash-soft); font-family: var(--font-mono); font-size: var(--step--2); font-weight: 800; } .dash-bar-row__copy { display: grid; gap: 4px; min-width: 0; } .dash-bar-row__title { min-width: 0; overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .dash-bar-row__date { color: #6f7f91; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; } .dash-bar-row__move { display: -webkit-box; overflow: hidden; color: var(--dash-muted); font-size: var(--step--2); line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .dash-bar-row__track, .dash-table-meter { display: block; height: 12px; overflow: hidden; border-radius: 999px; background: #e7edf3; } .dash-bar-row__track span, .dash-table-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--dash-orange), var(--dash-cyan)); } .dash-bar-row strong { text-align: right; } .dash-panel--pressure { display: grid; align-content: start; gap: 18px; } .dash-radar { position: relative; display: grid; place-items: center; width: min(100%, 260px); aspect-ratio: 1; margin: 0 auto; } .dash-radar__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--dash-orange) 0 37.1%, var(--dash-cyan) 37.1% 78.2%, var(--dash-soft) 78.2% 100%); box-shadow: inset 0 0 0 28px #fff; } .dash-radar__core { position: relative; display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%; background: var(--dash-ink); color: #fff; text-align: center; } .dash-radar__core strong { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.08em; } .dash-radar__core span { font-size: 1.8rem; font-weight: 800; } .dash-note { margin: 0; color: var(--dash-muted); line-height: 1.6; } .dash-offer-row { display: flex; flex-wrap: wrap; gap: 10px; } .dash-action-board { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 4px; } .dash-task { display: grid; align-content: start; gap: 12px; min-height: 330px; padding: 16px; box-shadow: 0 10px 24px rgba(24, 34, 48, 0.06); } .dash-task--hot { border-color: rgba(255, 107, 34, 0.45); background: linear-gradient(180deg, #fff7f1 0%, #fff 45%); } .dash-rank { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 999px; background: var(--dash-ink); color: #fff; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 800; } .dash-task h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; } .dash-task p, .dash-task__move { margin: 0; color: var(--dash-muted); line-height: 1.52; } .dash-task__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .dash-task__tags span { padding: 4px 8px; border-radius: 999px; background: var(--dash-soft); color: var(--dash-ink); font-size: 0.78rem; font-weight: 700; } .dash-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .dash-kanban > div { padding: 14px; border: 1px solid var(--dash-line); border-radius: 8px; background: #fff; } .dash-kanban h3 { margin: 0 0 10px; font-size: 1rem; } .dash-kanban ul { display: grid; gap: 9px; padding-left: 1.1rem; margin: 0; color: var(--dash-muted); line-height: 1.45; } .dash-panel--stack { background: #182230; color: #fff; } .dash-panel--stack .dash-kicker { color: #8ee8ff; } .dash-panel--stack h2 { color: #fff; } .dash-offers { display: grid; gap: 10px; } .dash-offers a { display: grid; gap: 3px; padding: 13px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; } .dash-offers span { color: rgba(255, 255, 255, 0.68); } .dash-table-wrap { overflow-x: auto; } .dash-table { width: 100%; min-width: 1160px; border-collapse: collapse; font-size: 0.95rem; } .dash-table th, .dash-table td { padding: 13px 10px; border-top: 1px solid var(--dash-line); text-align: left; vertical-align: middle; } .dash-table th { border-top: 0; color: var(--dash-muted); font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.07em; } .dash-table td:nth-child(1), .dash-table td:nth-child(3), .dash-table td:nth-child(4), .dash-table td:nth-child(5) { white-space: nowrap; font-weight: 750; } .dash-table td:nth-child(6) { min-width: 150px; } .dash-table td:nth-child(7) { white-space: nowrap; } .dash-table td:nth-child(8) { min-width: 260px; color: var(--dash-muted); line-height: 1.45; } .dash-section--keywords { background: linear-gradient(135deg, #ffffff 0%, #eef8fb 100%); } .dash-keyword-cloud { display: flex; flex-wrap: wrap; gap: 10px; } .dash-keyword-cloud span { display: inline-flex; padding: 9px 12px; border: 1px solid var(--dash-line); border-radius: 999px; background: #fff; color: var(--dash-ink); font-weight: 700; } .dash-section--blog-plan { background: linear-gradient(135deg, rgba(255, 107, 34, 0.12), transparent 48%), linear-gradient(180deg, #fff 0%, #f4f9fb 100%); } .dash-todo-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dash-todo-lanes article { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--dash-line); border-radius: 8px; background: #fff; } .dash-todo-lanes span { width: fit-content; padding: 4px 8px; border-radius: 999px; background: var(--dash-ink); color: #fff; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 800; } .dash-todo-lanes h3 { margin: 0; font-size: 1.05rem; } .dash-todo-lanes p { margin: 0; color: var(--dash-muted); line-height: 1.52; } .dash-pipeline-list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; border: 1px solid var(--dash-line); border-radius: 8px; overflow: hidden; background: #fff; } .dash-pipeline-list li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(9rem, 0.34fr); gap: 14px; align-items: start; padding: 14px 16px; border-top: 1px solid var(--dash-line); } .dash-pipeline-list li:first-child { border-top: 0; } .dash-pipeline-list li:hover { background: #fbfcfd; } .dash-pipeline-num { display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 8px; background: var(--dash-ink); color: #fff; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 800; } .dash-pipeline-list strong { display: block; color: var(--dash-ink); font-size: 1rem; line-height: 1.25; } .dash-pipeline-list p { margin: 0.28rem 0 0; color: var(--dash-muted); line-height: 1.48; } .dash-pipeline-list small { justify-self: end; width: fit-content; max-width: 100%; padding: 0.32rem 0.55rem; border-radius: 999px; background: var(--dash-soft); color: var(--dash-ink); font-size: 0.78rem; font-weight: 800; line-height: 1.2; text-align: right; } .dash-pipeline-list small a { color: var(--dash-ink); } .dash-pipeline-list--compact li { grid-template-columns: 3rem minmax(0, 1fr) auto; } .dash-pipeline-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .dash-pipeline-card { display: grid; align-content: start; gap: 14px; min-height: 330px; padding: 16px; border: 1px solid var(--dash-line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(24, 34, 48, 0.06); } .dash-pipeline-card--hot { border-color: rgba(255, 107, 34, 0.45); background: linear-gradient(180deg, #fff7f1 0%, #fff 45%); } .dash-pipeline-card__head { display: flex; align-items: center; gap: 10px; } .dash-pipeline-card__head span { display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 8px; background: var(--dash-ink); color: #fff; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 800; } .dash-pipeline-card h3 { margin: 0; font-size: 1.1rem; } .dash-pipeline-card ul { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; } .dash-pipeline-card li { display: grid; gap: 4px; padding: 10px 0 0; border-top: 1px solid var(--dash-line); } .dash-pipeline-card li:first-child { padding-top: 0; border-top: 0; } .dash-pipeline-card strong { color: var(--dash-ink); font-size: 0.96rem; line-height: 1.25; } .dash-pipeline-card span:not(.dash-pipeline-card__head span) { color: var(--dash-muted); font-size: 0.84rem; line-height: 1.36; } .dash-program-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .dash-program { display: grid; gap: 10px; min-height: 210px; padding: 16px; border: 1px solid var(--dash-line); border-radius: 8px; background: #fff; box-shadow: 0 10px 22px rgba(24, 34, 48, 0.05); } .dash-program--hot { border-color: rgba(255, 107, 34, 0.4); background: linear-gradient(180deg, #fff7f1 0%, #fff 58%); } .dash-program > span { width: fit-content; padding: 4px 8px; border-radius: 999px; background: #e8f7fb; color: #036880; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .dash-program h3 { margin: 0; font-size: 1.13rem; line-height: 1.2; } .dash-program p { margin: 0; color: var(--dash-muted); line-height: 1.52; } .dash-program div { display: flex; flex-wrap: wrap; gap: 8px; align-self: end; margin-top: auto; } .dash-program a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border: 1px solid var(--dash-line); border-radius: 8px; background: var(--dash-soft); color: var(--dash-ink); font-size: 0.88rem; font-weight: 800; text-decoration: none; } .dash-idea-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .dash-idea { display: grid; gap: 10px; min-height: 190px; padding: 16px; border: 1px solid var(--dash-line); border-radius: 8px; background: #fff; box-shadow: 0 10px 22px rgba(24, 34, 48, 0.05); } .dash-idea--hot { border-color: rgba(255, 107, 34, 0.4); background: linear-gradient(180deg, #fff7f1 0%, #fff 55%); } .dash-idea div { display: grid; gap: 6px; } .dash-idea span { width: fit-content; padding: 4px 8px; border-radius: 999px; background: #e8f7fb; color: #036880; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .dash-idea strong { font-size: 1.12rem; line-height: 1.25; } .dash-idea p, .dash-idea small { margin: 0; color: var(--dash-muted); line-height: 1.52; } .dash-idea small a { color: var(--dash-ink); font-weight: 800; } @media (max-width: 980px) { .dash-topbar, .dash-hero-grid, .dash-grid--top, .dash-grid--middle, .dash-kpis, .dash-kanban, .dash-todo-lanes, .dash-pipeline-lanes, .dash-program-grid, .dash-idea-grid { grid-template-columns: 1fr; } .dash-topbar { display: grid; } .dash-nav { justify-content: flex-start; } .dash-signal-panel { min-height: 300px; } } @media (max-width: 640px) { .dash-shell { width: min(100% - 20px, 1180px); padding-top: 10px; } .dash-topbar, .dash-hero-grid, .dash-panel, .dash-section { padding-left: 14px; padding-right: 14px; } .dash-brand img { width: min(220px, 72vw); height: auto; } .dash-nav a, .dash-action-link { flex: 1 1 100%; justify-content: center; } .dash-hero h1 { font-size: clamp(2.35rem, 13vw, 4.2rem); } .dash-bar-row { grid-template-columns: 2rem minmax(0, 1fr) 3.4rem; align-items: start; } .dash-bar-row__copy { grid-column: 2 / -1; } .dash-bar-row .dash-status { grid-column: 2 / -1; justify-self: start; } .dash-bar-row__track { grid-column: 1 / -1; } .dash-bar-row__views { grid-column: 1; grid-row: 2; text-align: center; } .dash-action-board { grid-template-columns: repeat(5, minmax(240px, 82vw)); } .dash-pipeline-list li, .dash-pipeline-list--compact li { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 10px; } .dash-pipeline-list small { grid-column: 2; justify-self: start; text-align: left; } } .post__layout { display: grid; grid-template-columns: 1fr; gap: var(--space-5); padding-top: var(--space-3); } /* 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: 11rem minmax(0, 1fr) 15.625rem; gap: var(--space-3); 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: 0.85rem; background: #fff; border-radius: var(--radius); box-shadow: 0 4px 18px rgba(15, 23, 41, 0.06); } .post__share-rail-label, .post__sponsor-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; } .post__sponsor-label { color: #8b8b8b; font-size: 0.64rem; margin-bottom: 0; } .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; } .post__rail-sponsor, .post__rail-ads { display: grid; gap: 0.55rem; width: 100%; } .post__rail-sponsor { justify-items: center; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--blog-hairline); } .post__rail-ads { gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--blog-hairline); } .rail-ad { display: grid; align-content: space-between; gap: 0.45rem; min-height: 9.5rem; padding: 0.85rem; border-radius: 8px; color: #fff !important; text-decoration: none !important; overflow: hidden; box-shadow: 0 12px 26px rgba(15, 23, 41, 0.14); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .rail-ad:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 16px 34px rgba(15, 23, 41, 0.2); } .rail-ad--rankiq { background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent 40%), linear-gradient(160deg, #182230 0%, #2b3650 52%, #ff6b22 100%); } .rail-ad--wispr { background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 42%), linear-gradient(160deg, #06394a 0%, #007f9f 54%, #21a875 100%); } .rail-ad--image { display: block; width: 100%; max-width: 15.625rem; min-height: 0; padding: 0; aspect-ratio: 1 / 1; background: #061f32; } .rail-ad--image picture, .rail-ad--image img { display: block; width: 100%; height: 100%; } .rail-ad--image img { object-fit: cover; margin: 0; border-radius: 8px; } .rail-ad__label { width: fit-content; padding: 0.2rem 0.42rem; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.88); font-family: var(--font-mono); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .rail-ad strong { color: #fff; font-size: 1.18rem; line-height: 1.05; } .rail-ad small { color: rgba(255, 255, 255, 0.78); font-size: 0.78rem; line-height: 1.35; } } @media (min-width: 1280px) { .post__layout { grid-template-columns: 12rem minmax(0, 43.375rem) 16.625rem; gap: var(--space-4); } .post__share-rail { padding: 0.5rem; } .post__rail-sponsor, .post__rail-ads { max-width: 15.625rem; } .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); } .toc__item--h3 a { font-size: 0.92em; padding-left: 2.25rem; } } .post__body { font-size: 1.125rem; line-height: 1.7; color: var(--blog-ink); } @media (max-width: 760px) { .post__layout, .post__body { min-width: 0; } .post__body { width: calc(100vw - 2rem); max-width: calc(100vw - 2rem); overflow-wrap: break-word; } .post__body > * { max-width: 100%; } } /* 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:first-of-type + h2 { margin-top: var(--space-3); } .post__body p { margin: 0 0 var(--space-3); } .post__body .editor-note { margin: 0 0 var(--space-4); padding: clamp(1rem, 2vw, 1.25rem); border: 1px solid rgba(254, 126, 29, 0.24); border-left: 4px solid var(--accent); border-radius: 8px; background: linear-gradient(135deg, rgba(254, 126, 29, 0.12), rgba(254, 126, 29, 0.04)); box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06); } .post__body .editor-note__label { margin: 0 0 0.35rem; color: var(--accent); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .post__body .editor-note__text { color: var(--blog-ink); font-size: 1rem; line-height: 1.55; } .post__body .editor-note__text a { font-weight: 700; } .post__body > h2:first-of-type + p::first-letter, .post__body > h2:first-of-type + figure.cartoon-float + p::first-letter { float: left; margin: 0.1rem 0.65rem 0.15rem 0; padding: 0.22rem 0.42rem 0.28rem; color: #fff; background: linear-gradient(135deg, var(--agency-bg) 0%, var(--agency-elevated) 100%); border: 1px solid var(--agency-hairline-bright); font-family: var(--font-display); font-size: clamp(2.85rem, 7vw, 4.1rem); font-weight: 700; line-height: 0.8; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.24); box-shadow: 0 8px 18px rgba(15, 23, 41, 0.16); } .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: calc(var(--space-5) + var(--space-1)); margin-bottom: var(--space-3); scroll-margin-top: 5rem; } .post__body > h2:first-child { margin-top: 0; } .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); } @media (max-width: 600px) { .post__body > h2:first-of-type + p::first-letter, .post__body > h2:first-of-type + figure.cartoon-float + p::first-letter { margin-right: 0.5rem; padding: 0.2rem 0.36rem 0.24rem; font-size: 3rem; } } .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: 48% !important; max-width: 48% !important; min-width: 280px; margin-right: 0; } .post__body figure.alignright img, .post__body figure.alignleft img, .post__body img.alignright, .post__body img.alignleft { width: 100% !important; height: auto !important; max-width: 100% !important; } .post__body figure.cartoon-float.alignright { float: right !important; width: min(350px, 55%) !important; max-width: 55% !important; min-width: 290px; margin: 0 0 var(--space-3) var(--space-4) !important; } .post__body figure.cartoon-float.alignright img { width: 100% !important; height: auto !important; max-width: 100% !important; } @media (max-width: 56rem) { .post__body figure.alignright, .post__body img.alignright, .post__body figure.alignleft, .post__body img.alignleft { width: 100% !important; max-width: 100% !important; float: none !important; margin: var(--space-3) auto !important; } } @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; } } @media (max-width: 43.99rem) { .post__body figure.cartoon-float.alignright { float: none !important; width: min(350px, 100%) !important; max-width: 100% !important; margin: var(--space-3) 0 var(--space-3) auto !important; } } .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 .screenshot-placeholder { margin: var(--space-4) 0; } .post__body .ph-box { border: 2px dashed var(--blog-hairline); border-radius: var(--radius); background: #fafbff; color: var(--blog-ink-soft); padding: var(--space-4); text-align: center; } .post__body .ph-box strong { display: inline-block; color: var(--blog-ink); margin-bottom: 0.35rem; } .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

. */ .post__body .key-takeaways { margin: var(--space-5) 0; padding: clamp(1.05rem, 2.4vw, 1.35rem) clamp(1.05rem, 2.4vw, 1.5rem); background: #f3fbff; border: 1px solid #cfe8f3; border-left: 4px solid #4aa6c8; border-radius: 8px; box-shadow: 0 12px 30px rgba(15, 23, 41, 0.05); } .post__body .key-takeaways h2, .post__body .key-takeaways h3 { margin: 0 0 var(--space-2); font-size: 1.5rem; color: #123f52; } .post__body .key-takeaways ul, .post__body .key-takeaways ol { margin-bottom: 0; } /* Pros/Cons two-column box. Renderer pairs an H3 "Pros" + ul with an H3 "Cons" + ul into a side-by-side .pros-cons grid. Check/X icons via ::before. */ .post__body .pros-cons { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: var(--space-5) 0; } @media (min-width: 640px) { .post__body .pros-cons { grid-template-columns: 1fr 1fr; } } .post__body .pros-cons__col { padding: 1.25rem 1.5rem; border-radius: var(--radius); background: #faf6f1; border: 1px solid #f0e6d8; } .post__body .pros-cons__col--pros { border-top: 4px solid #16a34a; } .post__body .pros-cons__col--cons { border-top: 4px solid #dc2626; } .post__body .pros-cons__col h3 { margin: 0 0 var(--space-2); font-size: 1.25rem; color: var(--blog-ink); display: flex; align-items: center; gap: 0.55rem; } .post__body .pros-cons__col--pros h3::before { content: "✓"; color: #fff; background: #16a34a; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 800; } .post__body .pros-cons__col--cons h3::before { content: "\00d7"; color: #fff; background: #dc2626; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800; } .post__body .pros-cons__col ul { margin: 0; padding-left: 1.5rem; } .post__body .pros-cons__col ul > li::before { /* Override the default orange triangle inside pros/cons */ content: ""; } .post__body .pros-cons__col--pros ul > li::before { content: "✓"; color: #16a34a; left: -1.25rem; top: 0; font-size: 1em; } .post__body .pros-cons__col--cons ul > li::before { content: "\00d7"; color: #dc2626; left: -1.25rem; top: 0; font-size: 1.1em; } /* Pinterest pin styling: shrink 20% + soft cream backdrop */ .post__body .pinterest-pin { text-align: center; margin: var(--space-5) auto; padding: 1rem; background: #faf6f1; border-radius: var(--radius-lg, 14px); max-width: 80%; } .post__body .pinterest-pin img { max-width: 80%; margin: 0 auto; display: block; } /* Compact affiliate disclosure callout after the lede */ .post__body .affiliate-disclosure { display: block; margin: 0.85rem 0 var(--space-4); padding: 0.72rem 0.9rem; background: #fff9f1; border: 1px solid rgba(254, 126, 29, 0.28); border-left: 4px solid var(--accent); border-radius: 8px; font-size: 0.88em; color: #5a4a36; } .post__body .affiliate-disclosure__label { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blog-ink); font-weight: 800; margin: 0 0 0.22rem; } .post__body .affiliate-disclosure__icon { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 999px; background: rgba(254, 126, 29, 0.16); color: var(--accent); font-family: var(--font-sans); font-size: 0.68rem; font-weight: 900; line-height: 1; } .post__body .affiliate-disclosure p { margin: 0; line-height: 1.4; } .post__body .affiliate-disclosure strong { font-weight: 800; } .post__body .affiliate-toolbox { display: grid; gap: 0.85rem; margin: var(--space-5) 0; padding: clamp(1.1rem, 3vw, 1.5rem); border: 1px solid rgba(254, 126, 29, 0.24); border-left: 4px solid var(--accent); border-radius: 8px; background: linear-gradient(135deg, rgba(254, 126, 29, 0.1), transparent 48%), linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); box-shadow: 0 16px 38px rgba(15, 23, 41, 0.08); } .post__body .affiliate-toolbox__eyebrow { margin: 0; color: var(--accent); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .post__body .affiliate-toolbox h2 { margin: 0; color: var(--blog-ink); font-size: clamp(1.35rem, 2.6vw, 1.75rem); } .post__body .affiliate-toolbox p { margin: 0; color: var(--blog-ink-soft); line-height: 1.6; } .post__body .affiliate-toolbox__links { display: flex; flex-wrap: wrap; gap: 0.6rem; } .post__body .affiliate-toolbox__links a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.9rem; border-radius: 8px; background: var(--agency-bg); color: #fff !important; font-size: 0.92rem; font-weight: 800; text-decoration: none !important; } .post__body .affiliate-toolbox__links a:nth-child(2) { background: #007f9f; } .post__body blockquote { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--accent); background: #fff7f1; font-style: italic; color: var(--blog-ink); } .post__body blockquote p { margin: 0; } .post__body blockquote.cta--affiliate { position: relative; display: grid; grid-template-columns: 2.85rem minmax(0, 1fr); gap: 0.9rem; align-items: start; margin: var(--space-5) 0; padding: clamp(1rem, 2.4vw, 1.25rem); border: 1px solid rgba(254, 126, 29, 0.26); border-left: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(254, 126, 29, 0.14), rgba(255, 255, 255, 0.94) 48%, rgba(0, 127, 159, 0.12)), #fff; box-shadow: 0 18px 42px rgba(15, 23, 41, 0.08); font-style: normal; } .post__body blockquote.cta--affiliate::before { content: ""; width: 2.85rem; height: 2.85rem; border-radius: 10px; background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203a3%203%200%200%200-3%203v6a3%203%200%200%200%206%200V6a3%203%200%200%200-3-3Z%27/%3E%3Cpath%20d%3D%27M19%2010v2a7%207%200%200%201-14%200v-2%27/%3E%3Cpath%20d%3D%27M12%2019v3%27/%3E%3Cpath%20d%3D%27M8%2022h8%27/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 1.35rem 1.35rem; box-shadow: 0 10px 22px rgba(254, 126, 29, 0.28); margin-top: 0.1rem; } .post__body blockquote.cta--affiliate p { margin: 0; line-height: 1.55; } .post__body blockquote.cta--affiliate strong { color: var(--blog-ink); font-size: 1.05rem; } .post__body blockquote.cta--affiliate a { color: var(--accent) !important; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; } .post__body code { font-family: var(--font-mono); font-size: 0.92em; background: #f3f3f3; padding: 0.1em 0.35em; border-radius: 3px; } .post__body pre { background: #1a1a1a; color: #f5f5f5; padding: var(--space-3); border-radius: var(--radius); overflow-x: auto; font-size: 0.9em; margin-block: var(--space-3); } .post__body pre code { background: none; padding: 0; color: inherit; } /* Responsive 16:9 video embed */ .video-wrap { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ margin-block: var(--space-4); border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .table-wrap { overflow-x: auto; margin-block: var(--space-4); border: 1px solid var(--blog-hairline); border-radius: var(--radius); background: #fff; } .post__body table { width: 100%; border-collapse: collapse; font-size: 0.95em; } .post__body th, .post__body td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--blog-hairline); vertical-align: top; } .post__body th, .post__body th strong, .post__body th * { font-weight: 700; color: #fff !important; /* force white over orange — overrides theme link/strong colors */ background: #172033; border-bottom: 2px solid rgba(255,255,255,0.12); letter-spacing: 0.01em; } .post__body th a { color: #fff !important; text-decoration: underline; text-decoration-thickness: 2px; } .post__body tr:nth-child(even) td { background: #faf6f1; } .post__body td a { word-break: break-word; } /* keep long URLs from blowing out cells */ /* Bold orange numbered-list markers */ .post__body ol li::marker { color: var(--accent); font-weight: 800; } .post__body tr:last-child td { border-bottom: none; } .post__body .concern-table-wrap { margin: var(--space-4) 0 var(--space-5); padding: 0.35rem; border: 1px solid rgba(23, 32, 51, 0.1); border-radius: 12px; background: linear-gradient(135deg, rgba(254, 126, 29, 0.18), rgba(0, 127, 159, 0.12)); box-shadow: 0 18px 42px rgba(15, 23, 41, 0.08); overflow-x: auto; } .post__body table.concern-table { border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 10px; background: #fff; } .post__body table.concern-table th { background: linear-gradient(135deg, #172033, #243049); } .post__body table.concern-table th:first-child { border-top-left-radius: 10px; } .post__body table.concern-table th:last-child { border-top-right-radius: 10px; } .post__body table.concern-table td { border-bottom-color: rgba(23, 32, 51, 0.1); } .post__body table.concern-table td:first-child { width: 28%; color: var(--blog-ink); font-weight: 700; } .post__body table.concern-table td:nth-child(3) { background: #f0fbfd; color: #0c5363; font-weight: 650; } .post__body table.concern-table tr:nth-child(even) td { background: #fbfcfc; } .post__body table.concern-table tr:nth-child(even) td:nth-child(3) { background: #eaf8fb; } .post__body .concern-table__item { display: inline-flex; align-items: center; gap: 0.55rem; } .post__body .concern-table__item::before { content: ""; width: 0.58rem; height: 0.58rem; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(254, 126, 29, 0.14); flex: 0 0 auto; } @media (max-width: 760px) { .post__body blockquote.cta--affiliate { grid-template-columns: 1fr; } .post__body blockquote.cta--affiliate a { white-space: normal; } .post__body .concern-table-wrap { padding: 0; border: 0; background: transparent; box-shadow: none; overflow-x: visible; } .table-wrap { overflow-x: visible; border: 0; background: transparent; margin-block: var(--space-4); } .post__body table, .post__body thead, .post__body tbody, .post__body tr, .post__body th, .post__body td { display: block; } .post__body thead { display: none; } .post__body tbody { display: grid; gap: 0.85rem; } .post__body tr { margin: 0; padding: 0; border: 1px solid var(--blog-hairline); border-left: 0.4rem solid var(--accent); border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(15, 23, 41, 0.07); overflow: hidden; } .post__body tr:nth-child(even) td { background: transparent; } .post__body td { display: grid; grid-template-columns: 1fr; gap: 0.25rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--blog-hairline); font-size: 0.92rem; background: #fff; } .post__body td::before { content: attr(data-label); color: var(--accent); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; } .post__body td:first-child { background: #fff7f1; font-weight: 650; } .post__body td:first-child::before { color: #172033; } .post__body td:last-child { border-bottom: 0; } } /* Blog post share strip */ .post__share { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--blog-hairline); } .post__share-label { display: block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blog-ink-soft); margin-bottom: var(--space-2); } .post__share-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; } /* Bottom share buttons — rounded squares matching the floating share rail */ .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.85rem; height: 2.85rem; border: 0; border-radius: 8px; background: var(--share-bg, #444); color: #fff !important; cursor: pointer; text-decoration: none !important; box-shadow: 0 2px 0 rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.08); transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease; } .share-btn span { display: none; } /* icon-only — labels live in aria-label */ .share-btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } .share-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 8px 18px rgba(0,0,0,0.15); filter: brightness(1.08); } .share-btn:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(0,0,0,0.2); } .share-btn--x { --share-bg: #000000; } .share-btn--facebook { --share-bg: #1877F2; } .share-btn--reddit { --share-bg: #FF4500; } .share-btn--linkedin { --share-bg: #0A66C2; } .share-btn--email { --share-bg: #6B7280; } .share-btn--copy { --share-bg: var(--accent); } .share-btn--copy.is-copied { --share-bg: #16a34a; } /* Blog post CTA at the bottom */ .post__cta { margin-top: var(--space-6); padding: var(--space-5); background: #fff7f1; border: 1px solid #ffd9c2; border-radius: var(--radius-lg); text-align: center; } .post__cta h2 { font-size: 1.75rem; margin-top: 0; margin-bottom: var(--space-2); } .post__cta p { max-width: 36rem; margin: 0 auto var(--space-3); color: var(--blog-ink-soft); } /* Blog footer — lighter */ .site-footer--blog { background: #fafafa; color: var(--blog-ink-soft); border-top: 1px solid var(--blog-hairline); } .site-footer--blog h5 { color: var(--blog-ink); } .site-footer--blog a { color: var(--blog-ink-soft); } .site-footer--blog a:hover { color: var(--accent); } .site-footer--blog__bottom { border-top-color: var(--blog-hairline); } /* ============================================================ ACCESSIBILITY ============================================================ */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .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; } /* Skip-link becomes visible on keyboard focus (Cowork §7c) */ .sr-only:focus { position: fixed; top: 1rem; left: 1rem; width: auto; height: auto; padding: 0.75rem 1rem; margin: 0; clip: auto; white-space: normal; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); z-index: 1000; font-weight: 500; text-decoration: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } }