/** * shared.css — component primitives used across multiple pages. * * Contents: * - Layout primitives: .container, .section, .section-tight * - Decorative backdrops: .aurora, .aurora-amber, .grid-overlay * - Eyebrow + dot patterns: .eyebrow, .eyebrow-dot * - Status pill + pulsing dot: .status-pill, .status-dot * - Animated link: .link-underline * - Button base + chip variants: .btn, .btn-chip, .btn-chip-cta * - INNOV8 CTA pill primitive: .innov8-cta-pill (extracted in PR #146 / #124 slice 1) * - Page-header partial: .innov8-page-header-* (used by 6+ static pages) * * Loaded on every page from base.njk AFTER base.css. Wrapped in @layer * components so cascade order matches the original (Tailwind sets the @layer * order; this file's components layer slots in between base + utilities). * * Extracted from src/assets/css/app.css as part of #147 PR 1 — CSS file split * foundation. Originally lived at app.css lines 514-873 (components additions * block) and 5131-5206 (PAGE HEADER PARTIAL). Content byte-for-byte preserved * from the original. * * Companion files: * - app.css — Tailwind entry + @theme tokens (compiled to tailwind.css) * - base.css — semantic tokens, typography, @font-face, resets, a11y * - nav.css — nav-specific styles (migrated from nav.njk per #147) * - footer.css — footer-specific styles (migrated from footer.njk per #147) * - pages/*.css — per-page styles (lands in PR 2 + PR 3 of #147) */ @layer components { /* ───────────────────────────────────────────────────────────────────── LAYOUT — container + section primitives ───────────────────────────────────────────────────────────────────── */ .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; } .section { padding: 128px 0; position: relative; } .section-tight { padding: 96px 0; position: relative; } @media (max-width: 768px) { .container { padding: 0 20px; } .section { padding: 80px 0; } .section-tight { padding: 56px 0; } } /* ───────────────────────────────────────────────────────────────────── AURORA BACKDROP — brand's signature drifting glow + grid overlay. Use as fixed first-children of in base.njk to sit behind all content via z-index. Animations honor prefers-reduced-motion above. ───────────────────────────────────────────────────────────────────── */ .aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .aurora::before, .aurora::after { content: ''; position: absolute; border-radius: 999px; filter: blur(80px); } .aurora::before { left: -10%; top: -30%; width: 60%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(31, 86, 245, 0.55), transparent 70%); animation: aurora-drift 16s ease-in-out infinite alternate; } .aurora::after { right: -10%; bottom: -30%; width: 55%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(95, 236, 253, 0.4), transparent 70%); animation: aurora-drift 18s ease-in-out infinite alternate-reverse; } .aurora-amber { position: absolute; left: 45%; top: 25%; width: 28%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(245, 158, 11, 0.15), transparent 70%); filter: blur(80px); border-radius: 999px; pointer-events: none; animation: aurora-drift 22s ease-in-out infinite alternate; } @keyframes aurora-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(4%, 3%, 0) scale(1.08); } } .grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 56px 56px; background-position: -1px -1px; pointer-events: none; mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); } /* ───────────────────────────────────────────────────────────────────── STATUS PILL — eyebrow-shaped capsule with a pulsing green dot. Used in nav (engagement status) + footer (availability). ───────────────────────────────────────────────────────────────────── */ .status-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-overline); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-tertiary); padding: 4px 12px; border-radius: var(--radius-pill); } .status-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--color-success); box-shadow: 0 0 0 0 rgba(34, 201, 138, 0.5); animation: status-pulse 2.6s ease-out infinite; } @keyframes status-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 201, 138, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(34, 201, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 201, 138, 0); } } /* ───────────────────────────────────────────────────────────────────── EYEBROW — small all-caps mono label used above section headings. ───────────────────────────────────────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-overline); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-spark); } .eyebrow-dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--accent-spark); box-shadow: 0 0 8px var(--color-cyan-300); } /* ───────────────────────────────────────────────────────────────────── LINK — animated cyan underline on hover, used in footer columns + in-body inline links. ───────────────────────────────────────────────────────────────────── */ .link-underline { color: var(--fg-primary); text-decoration: none; background-image: linear-gradient(to right, var(--color-cyan-300), var(--color-cyan-300)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size 220ms var(--ease-out), color 220ms; padding-bottom: 2px; } .link-underline:hover { background-size: 100% 1px; color: var(--color-cyan-300); } .link-underline:focus-visible { outline: 2px solid var(--color-cyan-300); outline-offset: 4px; border-radius: var(--radius-xs); } /* ───────────────────────────────────────────────────────────────────── BUTTONS — base + chip-CTA variant (the "Start a project" pill in the nav). The broader button library (.btn-primary / .btn-secondary / .btn-amber / .btn-ghost) lands in Sprint 2 / WS3 component work when actual page CTAs need them; for #31+#32+#33 we only port what the nav actually uses. ───────────────────────────────────────────────────────────────────── */ .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 500; font-size: var(--text-caption); border: none; padding: 12px 22px; color: #fff; cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: all 160ms var(--ease-out); } .btn:active { transform: scale(0.985); } .btn:focus-visible { outline: 2px solid var(--color-cyan-300); outline-offset: 3px; } .btn-chip { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 12px; border-radius: var(--radius-pill); background-color: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 11px; transition: transform 220ms var(--ease-spring), background-color 160ms, border-color 160ms; } .btn-chip-cta { background: var(--color-blue-500); border-radius: var(--radius-pill); padding: 9px 8px 9px 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); } .btn-chip-cta:hover { background: var(--color-blue-400); } .btn-chip-cta:hover .btn-chip { transform: translateX(2px); background: rgba(0, 0, 0, 0.4); } /* ───────────────────────────────────────────────────────────────────── INNOV8 CTA PILL — #124 DRY pass primitive. The canonical "Start a conversation" / "Get in touch" / "Probe another route" pill button. Accent-spark fill, mono uppercase label, gap-widening + cyan-glow hover. Three callsites consolidated: - Default : case-study + in-dev-case-study CTA buttons, client-detail CTA button. Padding 14×28, font-size 15, weight 600. - --small modifier : 404 page welcome CTA. Padding 9×16, font-size 13, weight 700. Stacks with --lifts. - --lifts modifier : Adds translateY(-1px) hover lift + a softer drop-shadow glow (matches the prior .innov8-404-welcome-cta's hover treatment). Stacks with --small. Pre-#124 the same vocabulary was duplicated across .innov8-cs-cta-button, .innov8-cd-cta-button, and .innov8-404-welcome-cta (each with their own hover + reduced-motion blocks). The duplication was flagged in the comment above .innov8-404-welcome-cta as "could be DRY'd into a `.innov8-cta-pill` later"; this is that later. One intentional visual consolidation: the 404's hover transitions were on var(--duration-fast) (120ms); they now use var(--duration-base) (220ms) for consistency with the other pill callsites. The slower hover is barely perceptible and unifies the site-wide motion vocabulary. ──────────────────────────────────────────────────────────────────────── */ .innov8-cta-pill { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: var(--radius-pill); background-color: var(--accent-spark); color: var(--color-ink-1000); font-family: var(--font-mono); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: gap var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .innov8-cta-pill:hover, .innov8-cta-pill:focus-visible { gap: 14px; background: var(--color-cyan-200); box-shadow: var(--shadow-glow-cyan); outline: none; } /* Compact variant — smaller padding + font-size, heavier weight to keep optical balance at the smaller scale. Used on the 404 page. */ .innov8-cta-pill--small { padding: 9px 16px; font-size: 13px; font-weight: 700; } /* Lift variant — adds a translateY(-1px) hover affordance plus a softer drop-shadow glow (instead of the default multi-layer halo). Used on the 404 page; stacks with --small. */ .innov8-cta-pill--lifts:hover, .innov8-cta-pill--lifts:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(95, 236, 253, 0.6); } @media (prefers-reduced-motion: reduce) { .innov8-cta-pill, .innov8-cta-pill:hover, .innov8-cta-pill:focus-visible, .innov8-cta-pill--lifts:hover, .innov8-cta-pill--lifts:focus-visible { transition: none; transform: none; gap: 10px; } } /*───────────────────────────────────────────────────────────────────── PAGE HEADER PARTIAL ───────────────────────────────────────────────────────────────────── The shared hero-header pattern for non-home content pages: about, services, recommendations, contact, and any future page that needs the same eyebrow / title / lead / extras shape. Markup is the macro in `src/_includes/partials/page-header.njk`. Previously this CSS was duplicated as four near-identical blocks (`.innov8-{about,srv,rl,contact}-hero` + `-hero-inner` + `-eyebrow` + `-title` + `-lead`). Consolidating into a single `.innov8-page- header-*` set deletes ~80 lines and removes the maintenance hazard of "fix the hero CSS in four places, keep it consistent in three." Pre-pays a small contribution to the #124 audit. Top padding floors at 120px so the eyebrow clears the floating glass-pill nav (position: fixed; top: 28px; height: ~70px). Title max-width is 22ch across the board — short titles like "Get in touch." simply don't fill the line, which is fine because `text-wrap: balance` keeps the layout pleasant regardless. The previous per-page max-widths (18ch on contact, 22ch elsewhere) didn't produce a meaningfully different visual once balance landed. The `.innov8-page-header-extras` slot beneath the lead carries whatever the consuming page needs — contact's availability pill, recommendations' source link, etc. The slot owns its top margin so the lead doesn't have to know whether extras exist. ───────────────────────────────────────────────────────────────────── */ .innov8-page-header { position: relative; padding: clamp(120px, 11vw, 160px) 0 clamp(36px, 4.5vw, 56px); background: radial-gradient(80% 60% at 20% 0%, rgba(31, 86, 245, 0.16), transparent 60%), radial-gradient(60% 50% at 90% 20%, rgba(95, 236, 253, 0.08), transparent 60%), var(--color-ink-1000); } .innov8-page-header-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; } .innov8-page-header-eyebrow { margin-bottom: clamp(18px, 2vw, 24px); } .innov8-page-header-title { margin: 0; max-width: 22ch; font-family: var(--font-display); font-weight: 700; font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); color: var(--fg-primary); text-transform: uppercase; text-wrap: balance; } .innov8-page-header-lead { margin: clamp(20px, 2.4vw, 28px) 0 0; max-width: 64ch; font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: var(--leading-base); color: var(--fg-secondary); text-wrap: pretty; } .innov8-page-header-extras { margin-top: clamp(20px, 2.4vw, 28px); } }