/* ═════════════════════════════════════════════════════════════ SEO LOCALE — GLOBAL STYLES Loaded on every page: base, buttons, top-bar, nav, footer, mobile drawer, reveal animation, responsive. ═════════════════════════════════════════════════════════════ */ /* ── SELF-HOSTED URBANIST ── Six weights (Latin subset). Files originally pulled from the @fontsource/urbanist package (Apache 2.0; sourced from Google Fonts). Loaded with font-display:swap so text renders immediately in the system fallback and re-paints once the WOFF2 arrives. font-style:italic is intentionally omitted — the theme uses synthetic italics (browser-skewed) for the few italic spots, matching the existing site behavior. */ @font-face{ font-family:'Urbanist'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/urbanist-latin-400-normal.woff2') format('woff2'); } @font-face{ font-family:'Urbanist'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/urbanist-latin-600-normal.woff2') format('woff2'); } @font-face{ font-family:'Urbanist'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/urbanist-latin-700-normal.woff2') format('woff2'); } @font-face{ font-family:'Urbanist'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/urbanist-latin-800-normal.woff2') format('woff2'); } @font-face{ font-family:'Urbanist'; font-style:normal; font-weight:900; font-display:swap; src:url('../fonts/urbanist-latin-900-normal.woff2') format('woff2'); } /* ── ARCHIVO BLACK (display) + SPACE MONO (labels) ── The V6 concept's voice: uppercase Archivo Black for display headlines and Space Mono for kickers, labels, and fine print. Latin subsets, self-hosted (OFL). Referenced by the homepage (and future V6-styled templates) via the --disp / --mono2 tokens below; pages that never use them download nothing. */ @font-face{ font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/archivo-black-latin-normal.woff2') format('woff2'); } @font-face{ font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/space-mono-latin-400-normal.woff2') format('woff2'); } @font-face{ font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/space-mono-latin-700-normal.woff2') format('woff2'); } /* ── INSTRUMENT SERIF ITALIC (serif accent) ── Latin subset, italic 400 — the face's only weight (sourced from Google Fonts; OFL). The elegant editorial italic used for highlighted words inside headlines via .script-accent — the same accent voice as the Concept V6 mockups. Browsers don't download it on pages that never render the class, so pages without highlights pay zero font cost. */ @font-face{ font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/instrument-serif-latin-italic.woff2') format('woff2'); } /* ── Metric-matched fallbacks ── Every web font above swaps in over a system font, and the system font is a different width: a headline in Arial is 12% narrower than in Archivo Black, so when Archivo arrives the headline grows, wraps differently, and pushes everything under it down. That was a 0.20 layout shift on the homepage hero. These faces wrap the system fonts with size-adjust and vertical overrides so the fallback occupies the same space the web font will, and the swap changes the letterforms but moves nothing. Ratios were measured by rendering the same strings in both fonts (Liberation Sans / Mono / Serif are metric-identical to Arial / Courier New / Times New Roman). Vertical overrides are the web font's hhea metrics divided by size-adjust. ── */ @font-face{ font-family:'Archivo Black Fallback'; font-style:normal;font-weight:400; src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Helvetica-Bold'),local('Arial'); size-adjust:111.9%;ascent-override:78.5%;descent-override:18.8%;line-gap-override:0%; } @font-face{ font-family:'Space Mono Fallback'; font-style:normal;font-weight:400; src:local('Courier New'),local('CourierNewPSMT'),local('Courier'); size-adjust:102%;ascent-override:109.8%;descent-override:35.4%;line-gap-override:0%; } @font-face{ font-family:'Space Mono Fallback'; font-style:normal;font-weight:700; src:local('Courier New Bold'),local('CourierNewPS-BoldMT'),local('Courier Bold'),local('Courier New'); size-adjust:102%;ascent-override:109.8%;descent-override:35.4%;line-gap-override:0%; } @font-face{ font-family:'Urbanist Fallback'; font-style:normal;font-weight:400; src:local('Arial'),local('ArialMT'),local('Helvetica'); size-adjust:97.4%;ascent-override:97.5%;descent-override:25.7%;line-gap-override:0%; } @font-face{ font-family:'Urbanist Fallback'; font-style:normal;font-weight:600; src:local('Arial'),local('ArialMT'),local('Helvetica'); size-adjust:101%;ascent-override:94.1%;descent-override:24.8%;line-gap-override:0%; } @font-face{ font-family:'Urbanist Fallback'; font-style:normal;font-weight:700; src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Helvetica-Bold'); size-adjust:91.1%;ascent-override:104.3%;descent-override:27.4%;line-gap-override:0%; } @font-face{ font-family:'Urbanist Fallback'; font-style:normal;font-weight:800; src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Helvetica-Bold'); size-adjust:92.6%;ascent-override:102.6%;descent-override:27%;line-gap-override:0%; } @font-face{ font-family:'Urbanist Fallback'; font-style:normal;font-weight:900; src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Helvetica-Bold'); size-adjust:93.7%;ascent-override:101.4%;descent-override:26.7%;line-gap-override:0%; } @font-face{ font-family:'Instrument Serif Fallback'; font-style:italic;font-weight:400; src:local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT'),local('Times Italic'),local('Times-Italic'),local('Times New Roman'); size-adjust:89.2%;ascent-override:111%;descent-override:34.8%;line-gap-override:0%; } /* Serif-italic highlight word inside a headline: *

Results we'd put our name on.

* The 1.1em scale is calibrated so the serif's lowercase height * optically matches the surrounding Urbanist. Weight stays 400 — * it's the face's only weight; synthetic bolding would muddy the * strokes. Color defaults to the teal accent and can be * overridden by section-scoped rules (e.g. cream sections use a * darker teal for contrast). One word per headline, max. */ .script-accent{ font-family:'Instrument Serif','Instrument Serif Fallback',serif; font-style:italic; font-weight:400; font-size:1.1em; line-height:1; letter-spacing:0; /* Stays lowercase inside the uppercase Archivo Black display * headlines — that contrast is the whole V6 move. */ text-transform:none; padding:0 0.04em; /* Opt out of the site-wide gradient-text treatment on heading * (the `h1 em, h2 em, h3 em` rule below) — the script * accent replaces the gradient look, so the background clip is * reset and the color needs its own !important to beat that * rule's `color:transparent !important`. Section-scoped color * overrides (e.g. cream bands) must also carry !important. */ background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--teal) !important; } :root{ --teal:#16C0B7;--teal-dim:rgba(22,192,183,0.1);--teal-glow:rgba(22,192,183,0.35); --navy:#213E59;--navy-deep:#0d1f2d; --obsidian:#050b12;--surface:#0c1a26;--surface2:#0f2133; --text:#F8FAFC;--muted:#dfeffd;--border:rgba(22,192,183,0.13); --font:'Urbanist','Urbanist Fallback',sans-serif; /* Two-color accent system. Teal stays the interaction color * (links, buttons, hover states, anything clickable) and the * warm amber takes over for data — stats, metric numbers, * achievement badges, hero highlights, anywhere a number or * "this is impressive" needs to land. The split gives the * design two distinct visual roles so it stops feeling * monochromatic. */ /* Gradient text token — teal → sky. Applied to heading * tags and stat numbers via background-clip:text. The team * prefers this over solid amber or solid teal on accents. */ --text-grad:linear-gradient(135deg, #16C0B7 0%, #7dd3fc 100%); --accent:#16C0B7; --accent-glow:rgba(22,192,183,0.35); /* Display font for statistics — a monospace system stack * (SF Mono / JetBrains Mono / Cascadia / Menlo / Consolas) * that reads as "data / scoreboard" and is visibly distinct * from the Urbanist body font. Zero webfont load — every * modern OS has at least one font in this stack installed. * * Applied to every big-number element via the stat rollup * selector just below :root. */ --display-stat:ui-monospace,'SF Mono','JetBrains Mono','Cascadia Mono',Menlo,Consolas,monospace; /* ── LIGHT SECTION TOKENS ── * Light bands that break up the dark base so pages alternate * instead of running obsidian top to bottom. Ink is the * navy-leaning text color for copy on them; --teal-ink is a * darkened accent that keeps AA contrast where the brand teal * (#16C0B7) would wash out on a light background. Shared here so * the homepage and interior templates use identical values. * * These were warm — cream #F6F1E7 over beige #E7DECB — and the * names stuck around after the colors went cool, because they * are referenced from four stylesheets and forty templates. * Read "cream" and "sand" as "light band A" and "light band B". * * The two bands are one cool value and white, and they INVERT: * band A is tinted with white cards, band B is white with tinted * cards. That keeps a card legible on either one, and keeps two * light bands distinguishable from each other by more than the * ~4/255 that separates their backgrounds. */ /* The full team photo. Declared once here and referenced by every * section that uses it as a ground, so a new shoot is a one-line * change rather than a search across four stylesheets. */ /* ── ACCENT PALETTE ── * Hoisted from the per-page stylesheets, where each of ~20 files * declared its own identical copy. The accent utility classes at * the bottom of this file reference these, and a class in * global.css cannot depend on a token that only exists in some * page's stylesheet — .chip-red-soft rendered colorless on * AI Overviews for precisely that reason. * * Values verified identical in every file that declared them * before being hoisted; the page copies still win where present, * so nothing downstream changes. */ /* Declared by nine page stylesheets and by none of ours, so any * page that used var(--mono) without its own copy fell back to * nothing. Same shape as the --red bug. */ --mono:'JetBrains Mono',monospace; --green:#34d399; --red:#f87171; --amber:#fbbf24; --purple:#a78bfa; --blue:#60a5fa; --pink:#f472b6; --orange:#fb923c; --team-photo:url('../img/team-photo.webp'); --work-photo:url('/wp-content/uploads/2026/08/seo-team-working.jpg'); /* The developers at work — 2000px wide, so it holds up as a * full-bleed hero as well as a statement band. Used on the pages * about how the work gets built rather than the ones about search. */ --dev-photo:url('/wp-content/uploads/2026/08/devs-working.jpg'); /* The office set. Registered as tokens so any template can reach them the way it reaches the team and dev photos, rather than each one hardcoding an uploads path that breaks on a migration. The exterior is the one built for hero and statement duty — it is the widest of the set and has sky at the top, so a scrim over it keeps a headline readable where an interior shot would not. */ --office-photo:url('/wp-content/uploads/2026/08/office-outside.jpg'); --workspace-photo:url('/wp-content/uploads/2026/08/open-workspace.jpg'); --podcast-photo:url('/wp-content/uploads/2026/08/podcast.jpg'); --arcade-photo:url('/wp-content/uploads/2026/08/arcade-machine.jpg'); --greenscreen-photo:url('/wp-content/uploads/2026/08/green-screen.jpg'); --cream:#F4F7FB; --cream-card:#FFFFFF; --sand:#FFFFFF; --sand-card:#F4F7FB; --ink:#1E3448; --ink-soft:rgba(30,52,72,0.72); /* Was 0.5, which composites to rgb(137,150,162) on a light band — * 2.87:1 on white, well under AA, and every use of this token is * small text: fact labels, testimonial roles, the client-strip * label, price footnotes. 0.68 clears 4.5:1 on both light bands * while staying visibly lighter than --ink-soft, which is the * distinction the token exists to make. */ --ink-faint:rgba(30,52,72,0.68); /* Darkened from #0B8A82. On the lighter of the two warm bands it * measured 3.93:1 against small text — under the 4.5:1 floor. This * value clears 4.5 on cream (4.74) and on sand (4.97). */ --teal-ink:#0A7870; /* V6 type-system tokens (see @font-face block above). */ --disp:'Archivo Black','Archivo Black Fallback',sans-serif; --mono2:'Space Mono','Space Mono Fallback',ui-monospace,monospace; /* One button shape for the whole site. The nav's "Get a * Proposal" sticker button set the standard — rounded * rectangle, not a pill — so every .btn now matches it and * page-level pill overrides lose the cascade. */ --btn-radius:12px; } /* Stat number display treatment — applied to every large * metric / number element across the homepage, service * pages, about page, and interior templates. Uses the * monospace --display-stat stack for distinctive editorial * contrast against the Urbanist body font, plus tabular * lining numerals so different numbers line up vertically * in a grid of stat cards (e.g. "+138%" and "+271%" have * identical digit widths). */ .hero-stat-val, .ft-metric-big, .cs-stat-number, .a-stat-n, .ss-n, .ms-stat-val, .metric-num, .stat-val, .big-num{ font-family:var(--display-stat); font-feature-settings:"tnum" 1, "lnum" 1; letter-spacing:-1.5px; font-weight:800; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} /* ── BODY + SUBTLE GRAIN TEXTURE ── * * Layers a whisper-thin SVG fractal-noise pattern on top of * the obsidian background via background-image + blend-mode. * No pseudo-element, no z-index gymnastics — the grain lives * on the body's own background so it's guaranteed to sit * behind every piece of content without fighting section * stacking contexts. * * Why it matters against the "AI-generated design" tell: * perfectly flat color fields are a dead giveaway that a * machine did the comping. Real photos, real print, and * every hand-designed landing page of the last 10 years has * SOME grain — even if you don't consciously notice it. * Apple, Vercel, Anthropic, and Stripe all use variants of * this trick on their dark marketing sites. * * The noise is inlined as an SVG data URI (no extra HTTP * request) at 220×220 tile, soft-light blended at a very * low perceived intensity — below-threshold for conscious * perception, you only notice when it's removed. * * prefers-contrast: more drops the grain entirely so * high-contrast-mode users aren't fighting a noise texture * against their accessibility settings. Many sections have * their own background color — in those cases the grain * lives only in the body gaps (between sections), so it * reads as ambient atmosphere rather than overlay. */ body{ font-family:var(--font); color:var(--text); overflow-x:clip; font-size:19px;line-height:1.65;font-weight:400; background-color:var(--obsidian); background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat:repeat; background-size:220px 220px; background-blend-mode:soft-light; } @media (prefers-contrast: more){ body{background-image:none;} } /* ── LAYOUT ── */ .container{max-width:1360px;margin:0 auto;padding:0 2.5rem;} /* Header + footer use a wider container so the chrome * doesn't feel cramped on big monitors. Matched widths * (1600px) so the top and bottom of the page line up. * Earlier iteration used max-width:none for the footer * (true full bleed) but on 27"+ monitors the content * columns stretched uncomfortably wide. * The global 1360 .container stays as-is because every * other section was composed against that measure. */ #main-nav > .container{max-width:1600px;} .site-footer > .container{max-width:1600px;} .section-pad{padding:100px 0;} /* Mobile section rhythm. * * 100px of padding at each end of a section is right on a 1440px * screen and wrong on a 390px one, where it is a fifth of the * viewport at every boundary — with fourteen sections that alone * was several screens of nothing. The homepage measured 23.5 screens * tall on a phone against 15.4 on desktop, and this was most of the * difference. * * Applies site-wide: the interior templates use .section-pad too, * and their own bespoke section paddings are clamped, so they * already scale. This is the one that was not. */ @media (max-width:760px){ .section-pad{padding:54px 0;} } /* Mobile side gutters. * * The same argument horizontally: 2.5rem on each side is 80px of a * 390px viewport, so a fifth of every phone screen was gutter and * every line of copy was set 20% narrower than it needed to be. The * hero eyebrow ("SEO · Paid Media · Web Design — Philadelphia") * wrapped to two lines purely because of it. 20px still reads as a * margin and is the width most phone layouts settle on. */ @media (max-width:600px){ .container{padding:0 1.25rem;} } .section-sm{padding:72px 0;} .center{text-align:center;} .section-h{font-size:clamp(34px,4vw,54px);font-weight:900;margin-bottom:14px;letter-spacing:-0.5px;} .section-sub{color:var(--muted);font-size:18px;font-weight:400;line-height:1.7;max-width:620px;} .section-head{margin-bottom:56px;} .section-head.center .section-sub{margin:0 auto;} /* Eyebrow — plain uppercase marker, no pill. * * Every page CSS file (extracted from the standalone mockups) * has its own .eyebrow + .eyebrow-t variants that wrap the * label in a rounded pill with a teal-tinted bg and border. * That "chip" treatment is a classic AI-generated design tell * — every Lovable / v0 / Cursor-AI landing page has it. * * These rules use !important on the bg / border / padding so * they win the cascade no matter where in the page CSS layer * the conflicting rule lives. The label becomes what it should * be: a plain uppercase marker above the H2, not a decorative * chip. */ .eyebrow, .eyebrow-t{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono2); font-size:12px;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--teal); margin-bottom:14px; background:none !important; border:none !important; padding:0 !important; border-radius:0 !important; } /* Hexagon marker in place of the old icon — the brand mark used * as punctuation. currentColor keeps it correct on dark and * cream bands alike. */ .eyebrow::before, .eyebrow-t::before{ content:""; width:9px;height:10px; flex-shrink:0; background:currentColor; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); } /* Drop the optional icon inside eyebrow labels — on a plain * text label, a leading icon reads as decoration and brings * back the chip feel. Leaving the in the markup so future * edits can re-enable it per-page by overriding the rule. */ .eyebrow > i, .eyebrow-t > i{display:none;} h1,h2,h3,h4,h5,h6{font-family:var(--font);line-height:1.1;font-weight:900;} /* Heading accent — site-wide. The highlighted phrase inside a * heading renders in Instrument Serif italic against the heavy * display sans around it. This replaces the old teal-to-sky * gradient fill, which read as an AI-template tell and clashed * with the accent treatment used on the homepage. * * !important on the color is inherited from the rule this * replaces: dozens of per-page CSS files set color:var(--teal) * on individual h2-em selectors at (0,1,1) specificity, and * this needs to beat all of them without editing 30+ files. * Section-scoped overrides (cream bands) must therefore also * carry !important — see .il-warm below. */ h1 em, h2 em, h3 em{ font-family:'Instrument Serif','Instrument Serif Fallback',serif; font-style:italic; font-weight:400; font-size:1.1em; line-height:1; letter-spacing:0; text-transform:none; background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--teal) !important; } /* ── FAQ TOGGLE ── * The hexagon badge, promoted site-wide from the Local SEO page * where it was a one-off. Replaces the bare "+" glyph so the * accordion carries the brand mark like the eyebrows and seam * markers do. Rotating 45deg on open turns the plus into a * cross and stands the hexagon on its point. */ .faq-plus{ width:30px;height:34px;flex-shrink:0; clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); background:rgba(22,192,183,0.12); display:flex;align-items:center;justify-content:center; color:var(--teal); font-size:14px;font-weight:400;line-height:1; transition:transform 0.3s ease,background 0.3s ease,color 0.3s ease; } .faq-item.open .faq-plus{ transform:rotate(45deg); background:var(--teal); color:#050b12; } /* ── BUTTONS ── */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font);font-weight:800;font-size:16px;border:none;cursor:pointer;text-decoration:none;transition:all 0.25s ease;border-radius:var(--btn-radius);padding:15px 32px;} /* Primary "Get a Proposal" button — sticker style. * * Hand-designed press-into-shadow effect instead of the flat * teal fill with ambient glow. Three reasons to use this * pattern here: * * 1. It's distinctive. Modern but not AI-default — you * don't see it on every ChatGPT-generated landing page, * but Notion, Linear, and most indie-agency sites use * variants of it. Reads as "a human picked this." * * 2. The tactile affordance is real. Clicking physically * moves the button INTO its shadow — a metaphor the * user recognizes without thinking. Compare to a * flat hover glow which communicates nothing about * what clicking does. * * 3. It still works on every background. The offset * shadow is obsidian so it casts on any light hero * tone; on dark heroes it reads as a subtle pressed * border. The gradient-free fill means no AI shimmer. * * The arrow icon inside the button slides 3px right on * hover — a classic "proceed" cue, composed on top of the * parent's press transform so both motions play together. */ .btn-primary{ position:relative; background:var(--teal); color:var(--navy-deep); border:2px solid var(--teal); box-shadow:4px 4px 0 0 rgba(5,11,18,0.85); transition:transform 0.18s cubic-bezier(0.2,0,0,1), box-shadow 0.18s cubic-bezier(0.2,0,0,1), background 0.18s ease, border-color 0.18s ease, color 0.18s ease; will-change:transform; } .btn-primary i{ transition:transform 0.25s cubic-bezier(0.2,0,0,1); } /* The fill lightens on hover, so the label goes the other way: * down from --navy-deep to the obsidian the rest of the palette * uses, which takes the contrast from 9.0:1 to 10.6:1 and makes * the text sharpen as the background brightens rather than sit * still. The per-page stylesheets already set the resting label * to #050b12, so this is the one place where the hover color * has anything to move. */ .btn-primary:hover{ background:#1ad4ca; border-color:#1ad4ca; color:#050b12; transform:translate(2px,2px); box-shadow:2px 2px 0 0 rgba(5,11,18,0.85); } .btn-primary:hover i{ transform:translateX(3px); } .btn-primary:active{ transform:translate(4px,4px); box-shadow:0 0 0 0 rgba(5,11,18,0.85); } .btn-ghost{background:transparent;color:var(--text);border:2px solid rgba(248,250,252,0.2);} .btn-ghost:hover{border-color:var(--teal);color:var(--teal);} /* ══════════════════════════════════════════════════ ACCESSIBILITY — skip link + focus-visible defaults ══════════════════════════════════════════════════ Skip link is visually offscreen until it gets keyboard focus, then it slides into the top-left corner so screen-reader and keyboard-only users can jump straight to #main. :focus-visible adds the teal ring on every interactive element for keyboard users while leaving mouse-click focus alone. */ .skip-link{ position:fixed;top:-100px;left:8px;z-index:9999; padding:12px 20px;border-radius:8px; background:var(--teal);color:#050b12; font-family:var(--font);font-weight:800;font-size:14px; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,0.4); transition:top 0.2s ease; } .skip-link:focus,.skip-link:focus-visible{top:8px;outline:none;} #main{outline:none;} :focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:3px; } .btn:focus-visible, .nav-item-btn:focus-visible, .mob-toggle:focus-visible, .mob-close:focus-visible, .mob-acc-toggle:focus-visible, .mega-link:focus-visible, .mob-link:focus-visible, .mob-sublink:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; box-shadow:0 0 0 4px rgba(22,192,183,0.18); } /* Mouse users (no keyboard focus) shouldn't see the ring on click. */ .btn:focus:not(:focus-visible), .nav-item-btn:focus:not(:focus-visible), .mob-toggle:focus:not(:focus-visible), .mob-acc-toggle:focus:not(:focus-visible){outline:none;box-shadow:none;} /* ══════════════════════════════════════════════════ INTERIOR PAGE BREADCRUMB ══════════════════════════════════════════════════ Consolidated from 14 per-page CSS files that each had an identical .crumbs block. The only per-page variation was the accent color on the current-page label — that's now driven by the `--crumb-accent` custom property, which per-page CSS can override via a body rule (see pages/instagram.css, podcast.css, hosting.css, youtube.css). Padding clearance: top-bar (0–40) + fixed nav (36–106) combined with the nav's `box-shadow:0 12px 40px rgba(0,0,0,0.5)` bleeds visually to about y=150. 140px top padding places the breadcrumb text well clear of the shadow zone (~34px safety margin). */ .crumbs{padding:140px 0 20px;font-size:13px;color:var(--muted);} /* Featured-image heroes wash out the muted breadcrumb color — * boost contrast with a stronger color + text-shadow so the * crumbs remain legible over any uploaded image. */ .hero-has-image .crumbs, .loc-hero .crumbs, .ind-hero.hero-has-image .crumbs{ color:rgba(255,255,255,0.9); text-shadow:0 1px 6px rgba(0,0,0,0.6); } .hero-has-image .crumbs a, .loc-hero .crumbs a, .ind-hero.hero-has-image .crumbs a{color:rgba(255,255,255,0.9);} .hero-has-image .crumbs a:hover, .loc-hero .crumbs a:hover, .ind-hero.hero-has-image .crumbs a:hover{color:var(--teal);} .hero-has-image .crumbs i, .loc-hero .crumbs i, .ind-hero.hero-has-image .crumbs i{color:rgba(255,255,255,0.7);opacity:0.9;} .hero-has-image .crumbs span, .loc-hero .crumbs span, .ind-hero.hero-has-image .crumbs span{color:var(--teal);text-shadow:0 1px 6px rgba(0,0,0,0.5);} /* When the breadcrumb lives inside the hero section (the * standard layout), the hero's own top padding already * partially clears the fixed nav, so the crumbs need less * padding-top. z-index:1 sits above the ::before overlay. */ .hero .crumbs{padding-top:110px;position:relative;z-index:1;} .crumbs a{color:var(--muted);text-decoration:none;} .crumbs a:hover{color:var(--teal);} .crumbs i{font-size:9px;margin:0 8px;opacity:0.5;} .crumbs span{color:var(--crumb-accent,var(--teal));} /* ══════════════════════════════════════════════════ INTERIOR HERO — FEATURED-IMAGE BACKGROUND ══════════════════════════════════════════════════ Any interior template can opt into a featured-image hero by: 1. Setting a Featured Image on the WP page in /wp-admin/ 2. Adding `hero-has-image` to the
tag and an inline `style="background-image:url(...)"` from get_the_post_thumbnail_url( get_the_ID(), 'full' ) The dark vignette + subtle teal radial below keep hero text readable on top of any uploaded image. The vignette is darker at the top (.88) and bottom (.92) than in the middle (.75) so the image peeks through where the eye expects detail and the text edges fade into solid darkness. Per-page .hero::before accent gradients (e.g. local-seo's corner teal/navy radials) get overridden by .hero-has-image's higher specificity, so this class also acts as a clean reset for the hero background. */ /* ── HERO COPY SITS HIGH ── Every interior hero is a two-column grid with align-items:center and a tall demo on the right (a state card, a toggle, then a simulated pack, profile or SERP). Centering put the eyebrow level with the demo's middle and the headline a screen below its head. Above the stacking breakpoint the copy column starts at the top with a small offset instead, beside the demo's head. Local SEO got this first; it belongs to all of them. The attribute selector catches .hero-grid, .ind-hero-grid and .aiopt-hero-inner.hero-grid alike; stacked layouts (≤960px, see the responsive block) are untouched. */ @media(min-width:961px){ .hero [class*="hero-grid"]:not(.tm-hero-grid) > :first-child, .ind-hero [class*="hero-grid"] > :first-child, .loc-hero [class*="hero-grid"] > :first-child{ align-self:start; padding-top:clamp(8px,2.5vw,40px); } } /* Not the team member hero: its first column is the hexagon portrait, and padding on it pushed the photo down inside the teal frame so the frame read as a thick band along the top edges. */ .hero-has-image{ position:relative; /* anchor ::before overlay */ background-size:cover; background-position:center; background-repeat:no-repeat; isolation:isolate; /* so the photo's z-index:-1 stays inside */ } /* The photo itself (inc/hero-image.php, seolocale_hero_img()). A real so the browser can fetch it at high priority, pinned under the ::before scrim and above the section's own background. The .hero-wrap pages place theirs the same way, below their z-index:1 scrim and clear of the z-index:3 the page CSS gives their copy. */ .hero-has-image > .hero-photo, .hero-wrap > .hero-photo{ position:absolute;inset:0;z-index:-1; width:100%;height:100%;max-width:none;margin:0; object-fit:cover;object-position:center; border-radius:0;pointer-events:none;user-select:none; } .hero-wrap{isolation:isolate;} .hero-wrap > .hero-photo{object-position:center 62%;} /* An image that states its size (width + height attributes) only states its ratio: the stylesheet still decides the box, and a CSS width never squashes it against an attribute height. Zero specificity so every class rule wins. */ :where(img[width][height]){height:auto;} .hero-has-image::before{ content:'';position:absolute;inset:0; background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(22,192,183,0.06), transparent 60%), linear-gradient(180deg, rgba(5,11,18,0.88) 0%, rgba(5,11,18,0.75) 40%, rgba(5,11,18,0.92) 100%); pointer-events:none; z-index:0; } /* ══════════════════════════════════════════════════ WORDPRESS ADMIN BAR COMPATIBILITY ══════════════════════════════════════════════════ Logged-in users see WP's admin bar — 32px on desktop, 46px on screens ≤782px. WP adds `html{margin-top:32px!important}` and a `.admin-bar` class on body, but our theme's fixed top-bar and nav are positioned in viewport coordinates, so they sit underneath the admin bar until we push them down. The numbers: body.admin-bar .top-bar → top: 32px (was 0) body.admin-bar nav → top: 68px (32 + original 36) body.admin-bar #main-nav.scrolled → top: 32px (sticks under admin bar) */ body.admin-bar .top-bar{top:32px;} body.admin-bar #main-nav{top:68px;} body.admin-bar #main-nav.scrolled{top:68px;} @media screen and (max-width:782px){ body.admin-bar .top-bar{top:46px;} body.admin-bar #main-nav{top:82px;} body.admin-bar #main-nav.scrolled{top:82px;} } /* ══════════════════════════════════════════════════ TOP BAR — modern gradient announcement strip ══════════════════════════════════════════════════ */ .top-bar{ position:fixed;top:0;left:0;width:100%;z-index:310; height:40px; background:linear-gradient(90deg, #011931 0%, #0a2947 40%, #083152 70%, #011931 100%); border-bottom:1px solid rgba(22,192,183,0.18); display:flex;align-items:center; transition:transform 0.35s ease; } .top-bar.hidden{transform:translateY(-100%);} .top-bar-inner{ display:flex;align-items:center;justify-content:space-between; width:100%;padding:0 2.5rem;max-width:1600px;margin:0 auto; } /* Left: credibility row — clean inline icons. * * Restraint pass after iterating through boxed chips, full- * height tilted icons, and clipped bleed-bounds. The right * answer was the simplest one: inline glyphs at label size, * brand-tinted per badge, opacity tuned to feel like part of * the label rather than a separate element. * * No tilt, no box, no bleed — just a quiet proof-marker row * that lets the labels do the work. */ .top-bar-left{display:flex;align-items:center;gap:24px;} .tb-pill{ display:inline-flex;align-items:center;gap:8px; font-size:11px;font-weight:700;color:rgba(248,250,252,0.85); padding:0;background:transparent;border:none; white-space:nowrap;letter-spacing:0.02em; transition:color 0.2s; } .tb-pill:hover{color:#fff;} .tb-pill > i{ font-size:13px; line-height:1; background:none; border:none; padding:0; width:auto;height:auto; opacity:0.9; transition:opacity 0.2s ease; } .tb-pill:hover > i{opacity:1;} /* Per-badge brand color on the icon only — gives the row * subtle personality without adding any chip chrome. */ .tb-pill:nth-child(1) > i{color:#fbbf24;} .tb-pill:nth-child(3) > i{color:#4285F4;} .tb-pill:nth-child(5) > i{color:#16C0B7;} .tb-pill:nth-child(7) > i{color:#fb923c;} .tb-pill .tb-stars{color:#fbbf24;letter-spacing:1.5px;font-size:11px;} .tb-sep{width:1px;height:14px;background:rgba(255,255,255,0.1);margin:0;flex-shrink:0;align-self:center;} /* Right: socials + login */ .top-bar-right{display:flex;align-items:center;gap:12px;} .tb-socials{display:flex;align-items:center;gap:2px;} .tb-soc{ width:30px;height:30px;border-radius:7px; display:flex;align-items:center;justify-content:center; color:rgba(248,250,252,0.5);font-size:13px; text-decoration:none; transition:all 0.2s; } .tb-soc:hover{color:#fff;background:rgba(255,255,255,0.12);} /* Brand colors on hover */ .tb-soc.fb:hover{color:#1877f2;background:rgba(24,119,242,0.15);} .tb-soc.ig:hover{color:#e1306c;background:rgba(225,48,108,0.15);} .tb-soc.li:hover{color:#0a66c2;background:rgba(10,102,194,0.15);} .tb-soc.yt:hover{color:#ff0000;background:rgba(255,0,0,0.12);} .tb-soc.tw:hover{color:#fff;background:rgba(255,255,255,0.15);} .tb-sep-v{width:1px;height:20px;background:rgba(255,255,255,0.12);} .tb-login{ display:flex;align-items:center;gap:6px; font-size:11px;font-weight:800; color:var(--teal); text-decoration:none; padding:5px 12px;border-radius:6px; border:1px solid rgba(22,192,183,0.35); background:rgba(22,192,183,0.08); letter-spacing:0.04em;text-transform:uppercase; transition:all 0.2s;white-space:nowrap; } .tb-login i{font-size:10px;} .tb-login:hover{background:rgba(22,192,183,0.18);border-color:var(--teal);color:#fff;} /* Simplified top bar — one credential rather than a badge wall. * The Google Partner / Inc. 5000 / Philly Fast 50 chips that used * to sit beside this were four competing claims above the fold; * they now live on the homepage hero and the awards page where * they have room to mean something. .tb-pill / .tb-sep survive * below for any template still rendering them. */ .tb-rating{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:rgba(223,239,253,0.82); font-size:13px; font-weight:600; transition:color 0.2s; } .tb-rating:hover{color:var(--text);} .tb-rating .tb-stars{color:#F4B400;letter-spacing:1px;font-size:12px;} .tb-rating strong{color:var(--text);font-weight:800;} /* ══════════════════════════════════════════════════ MAIN NAV — two states: dark (top) + white (scrolled) ══════════════════════════════════════════════════ */ /* NOTE: these rules are intentionally scoped to #main-nav rather than * the bare `nav` element. Any other