/* ────────────────────────────────────────────────────────────────── Coffee on Cue — Capability Aesthetic Shared stylesheet for static HTML landing pages in /public. React pages already inherit equivalent tokens via src/index.css. Tokens generated from /DESIGN.md (root) — see scripts/build-tokens.mjs. DO NOT EDIT --coc-* tokens here. Edit /DESIGN.md and run `npm run tokens`. Single source of truth: /DESIGN.md. ────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Lora:ital,wght@0,500;0,600;1,400;1,500;1,600&display=swap'); @import url('./generated-aesthetic-tokens.css'); /* When a static page wants the editorial dark canvas as default, add class="aesthetic" on or . This is opt-in so pages can migrate one-by-one without breaking their existing layout. */ .aesthetic { background-color: var(--coc-section-dark); color: var(--coc-cream); font-family: var(--coc-font-body); } .aesthetic h1, .aesthetic h2, .aesthetic h3, .aesthetic h4, .aesthetic h5, .aesthetic h6 { font-family: var(--coc-font-heading); font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; } .aesthetic h1 em, .aesthetic h2 em, .aesthetic h3 em, .aesthetic h4 em, .aesthetic h1 .accent, .aesthetic h2 .accent, .aesthetic h3 .accent, .aesthetic h4 .accent { font-family: var(--coc-font-accent); font-style: italic; font-weight: 500; color: var(--coc-orange); letter-spacing: -0.005em; } /* Utilities — also work outside .aesthetic so individual sections of an un-migrated static page can opt in incrementally. */ .section-label { display: block; font-family: var(--coc-font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coc-section-label); padding-top: 32px; border-top: 1px solid var(--coc-divider-dark); } /* Primary CTA button — matches capability page spec exactly. Despite the legacy `.btn-pill` class name, this is now a rectangular slab with 2px corners (NOT a fully rounded pill). Capability page uses 999px-rounded only for product-variant toggles like CLASSIC|ELEVATE — see .btn-toggle below if needed. */ .btn-pill { display: inline-flex; align-items: center; gap: 10px; padding: 18px 36px; border-radius: 2px; background-color: var(--coc-orange); color: var(--coc-cream); font-family: var(--coc-font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease; } .btn-pill:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: var(--coc-shadow-hover-glow-terracotta); } /* Secondary / compact CTA — for navigation headers and tighter contexts. Matches capability page nav "Talk to us" spec. */ .btn-pill-sm { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 2px; background-color: var(--coc-orange); color: var(--coc-cream); font-family: var(--coc-font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease; } .btn-pill-sm:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: var(--coc-shadow-hover-glow-terracotta); } /* Toggle pill — used for product-variant switchers like CLASSIC|ELEVATE. This is the only true rounded-pill in the system. */ .btn-toggle { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 9999px; background-color: var(--coc-orange); color: var(--coc-cream); font-family: var(--coc-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .numbered-card { position: relative; background-color: var(--coc-card-dark); color: var(--coc-cream); padding: 32px 24px 28px; border-radius: var(--coc-radius-md); transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Case-study card — softer corners than numbered cards. Phase 6.4. */ .case-study-card { position: relative; background-color: var(--coc-card-dark); color: var(--coc-cream); border-radius: var(--coc-radius-lg); overflow: hidden; } .numbered-card:hover { transform: scale(1.01); box-shadow: var(--coc-shadow-hover-glow-terracotta); } .numbered-card .card-number { display: block; font-family: var(--coc-font-body); font-size: 13px; font-weight: 500; color: var(--coc-orange); margin-bottom: 24px; letter-spacing: 0.04em; } .numbered-card h3 { font-size: 19px; font-weight: 700; line-height: 1.25; margin: 0 0 12px; } .numbered-card p { font-size: 14px; line-height: 1.6; opacity: 0.75; margin: 0; } .stat-block .stat-value { font-family: var(--coc-font-heading); font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; line-height: 1; color: var(--coc-orange); letter-spacing: -0.02em; display: block; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .stat-block .stat-label { display: block; margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--coc-cream); opacity: 0.7; } /* Phase 6.11 — Hero scrim spec. Standardised photography overlay for hero text legibility. */ .hero-scrim, .hero-scrim-cream { position: relative; isolation: isolate; } .hero-scrim::after, .hero-scrim-cream::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; } .hero-scrim::after { background: var(--coc-effect-hero-scrim-dark); } .hero-scrim-cream::after { background: var(--coc-effect-hero-scrim-cream); } .hero-scrim > *, .hero-scrim-cream > * { position: relative; z-index: 1; } /* Phase 6.5 — Glassmorphism overlay panels. STRICT SCOPE: floating UI ONLY — nav drawer, mobile menu, modal, tooltip. NEVER apply to cards. See DESIGN.md "Do's and Don'ts." */ .glass-panel { background-color: var(--coc-effect-glass-fill); backdrop-filter: var(--coc-effect-glass-blur); -webkit-backdrop-filter: var(--coc-effect-glass-blur); border: 1px solid var(--coc-effect-glass-stroke); } /* Phase 6.7 — Fluid type scale via clamp(). Tokens name the max; clamp() handles responsive scaling. Use these utilities on h1/h2/h3 instead of inline arbitrary values. */ .headline-hero { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.01em; } .headline-section { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.01em; } .headline-feature { font-size: clamp(1.75rem, 3vw, 2rem); line-height: 1.1; letter-spacing: -0.01em; } /* Hero atmospheric warmth — Phase 6.1. Single subtle radial pulse from the orange brand colour, reads as photography-grade ambient light. Apply only to hero sections. */ .hero-atmosphere { position: relative; isolation: isolate; } .hero-atmosphere::before { content: ""; position: absolute; inset: 0; background: var(--coc-gradient-hero-atmosphere); pointer-events: none; z-index: 0; } .hero-atmosphere > * { position: relative; z-index: 1; } /* Phase 6.3 — Hero headline text-shadow. Scoped to hero sections only via the .hero-atmosphere parent selector. */ .hero-atmosphere h1 { text-shadow: var(--coc-shadow-hero-text); } .section-dark { background-color: var(--coc-section-dark); color: var(--coc-cream); } .section-cream { background-color: var(--coc-cream); color: var(--coc-off-black); } .section-burgundy { background-color: var(--coc-section-burgundy); color: var(--coc-cream); } .section-terracotta { background-color: var(--coc-section-terracotta); color: var(--coc-cream); } /* Italic-serif accent recolour per tone */ .section-terracotta h1 em, .section-terracotta h2 em, .section-terracotta h3 em, .section-terracotta h4 em, .section-terracotta .accent { color: var(--coc-cream); opacity: 0.55; } .section-cream h1 em, .section-cream h2 em, .section-cream h3 em, .section-cream h4 em, .section-cream .accent { color: var(--coc-orange); } .section-cream .section-label { color: var(--coc-section-label); border-top-color: rgba(19, 25, 23, 0.12); } /* Generous editorial section padding */ .section-dark, .section-cream, .section-burgundy, .section-terracotta { padding-top: 80px; padding-bottom: 80px; } @media (min-width: 768px) { .section-dark, .section-cream, .section-burgundy, .section-terracotta { padding-top: 112px; padding-bottom: 112px; } } /* Respect reduced motion — disable Phase 6.2 ambient glow. Hover-elevation transforms are kept (they communicate state) but the decorative warmth pulse is removed. */ @media (prefers-reduced-motion: reduce) { .btn-pill:hover, .btn-pill-sm:hover, .numbered-card:hover { box-shadow: none; } }