/* ============================================================ USE-CASE LANDING PAGES Load AFTER index.css and colors.css. No JS changes needed — .reveal, nav.scrolled, the mobile menu and CaptureUTMParams all come from index.js as-is (the hero parallax and review tabs already no-op when those elements aren't on the page). Load order matters: the .tone-* classes override .cta-section at equal specificity, so this file has to come second. ============================================================ */ /* ============================================================ PER-PAGE TOKENS Set the page class on . --uc-hero-image the header photo --uc-hero-position art direction: which part of the photo to keep --uc-hero-scrim R,G,B triplet for the overlay (bare numbers, no rgb()) --uc-hero-fade background of the band under the hero, so the photo dissolves into it ============================================================ */ .uc-page { --uc-hero-image: none; --uc-hero-position: center; --uc-hero-scrim: 26, 29, 38; /* = --bg-dark #1A1D26 */ --uc-hero-fade: var(--bg-white); --uc-hero-min: 80vh; } /* 1. Productive People — warm, domestic, unhurried */ .uc-productive { --uc-hero-image: url('../images/media/use-cases/productive-hero.jpg'); --uc-hero-scrim: 42, 34, 28; /* warm brown-black, keeps skin tones alive */ --uc-hero-fade: var(--bg-warm); } /* 2. Video Creators — cool, cinematic, higher contrast */ .uc-video { --uc-hero-image: url('../images/media/use-cases/video-creators-hero.jpg'); --uc-hero-scrim: 18, 20, 28; --uc-hero-fade: var(--bg-white); --uc-hero-min: 84vh; /* the one page that earns a taller hero */ } /* 3. Software Development Teams — cool blue, technical */ .uc-dev { --uc-hero-image: url('../images/media/use-cases/developers-hero.jpg'); --uc-hero-scrim: 20, 28, 42; --uc-hero-fade: var(--bg-blue); } /* 4. Marketers & Creative Agencies — the most colour-forward page */ .uc-marketing { --uc-hero-image: url('../images/media/use-cases/marketers-hero.jpg'); --uc-hero-scrim: 34, 22, 40; /* pulls toward the accent */ --uc-hero-fade: var(--bg-off-white); } /* 5. Sales Teams — clean and plain, no atmosphere */ .uc-sales { --uc-hero-image: url('../images/media/use-cases/sales-hero.jpg'); --uc-hero-scrim: 24, 26, 34; --uc-hero-fade: var(--bg-white); --uc-hero-min: 74vh; /* shortest hero: get to the pipeline fast */ } /* 6. Remote & Distributed Teams */ .uc-remote { --uc-hero-image: url('../images/media/use-cases/remote-teams-hero.jpg'); --uc-hero-scrim: 22, 30, 40; --uc-hero-fade: var(--bg-blue); } /* ============================================================ NAV OVER THE HERO PHOTO Until index.js adds .scrolled the nav sits transparent on the image, then swaps back to your normal white bar. ============================================================ */ .uc-page nav:not(.scrolled) { background: linear-gradient(to bottom, rgba(0,0,0,0.38), rgba(0,0,0,0.06) 70%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } .uc-page nav:not(.scrolled) .nav-links > li > a, .uc-page nav:not(.scrolled) .nav-parent { color: rgba(255, 255, 255, 0.92); } .uc-page nav:not(.scrolled) .nav-links > li > a:hover, .uc-page nav:not(.scrolled) .nav-parent:hover { color: #fff; } .uc-page nav:not(.scrolled) .nav-parent::after { border-top-color: rgba(255, 255, 255, 0.8); } /* same treatment the footer already uses to knock the logo white */ .uc-page nav:not(.scrolled) .main-logo-holder { filter: saturate(0) brightness(2); } .uc-page nav:not(.scrolled) .hamburger { filter: invert(1); } /* the CTA pill keeps its accent fill, just needs a lift off the photo */ .uc-page nav:not(.scrolled) .nav-cta { color: #fff !important; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25); } /* current page inside the Use Cases submenu */ .submenu a.active { color: var(--accent); font-weight: 700; } /* ============================================================ HERO ============================================================ */ .uc-hero { position: relative; isolation: isolate; min-height: var(--uc-hero-min); display: flex; align-items: flex-end; padding: 10rem 2rem 0; overflow: hidden; background: var(--bg-dark); } /* the photo — its own element so the scrim can be a pseudo */ .uc-hero-media { position: absolute; inset: 0; z-index: 0; background-image: var(--uc-hero-image); background-size: cover; background-position: var(--uc-hero-position); background-repeat: no-repeat; } /* scrim: heavy on the left under the type, opens up on the right so the photo still reads as a photo */ .uc-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(var(--uc-hero-scrim), 0.93) 0%, rgba(var(--uc-hero-scrim), 0.80) 34%, rgba(var(--uc-hero-scrim), 0.38) 68%, rgba(var(--uc-hero-scrim), 0.22) 100%), linear-gradient(to bottom, rgba(var(--uc-hero-scrim), 0.55) 0%, transparent 26%); pointer-events: none; } /* dissolve into whatever band comes next */ .uc-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: 2; background: linear-gradient(to top, var(--uc-hero-fade), transparent); pointer-events: none; } .uc-hero-inner { position: relative; z-index: 3; width: 100%; max-width: 1100px; margin: 0 auto; padding-bottom: 6.5rem; color: var(--text-on-dark); } /* eyebrow with a leading accent rule — reads as a category tag, not another pill badge like the homepage hero */ .uc-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-softer); margin-bottom: 1.2rem; animation: fadeInDown 0.7s ease-out both; } .uc-eyebrow::before { content: ''; width: 30px; height: 2px; background: var(--accent); border-radius: 2px; } .uc-hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.04em; max-width: 680px; margin-bottom: 1.15rem; text-wrap: balance; /* ignored by older browsers, no fallback needed */ animation: fadeInUp 0.7s ease-out 0.08s both; } .uc-hero h1 em { font-style: normal; color: var(--accent-softer); } .uc-hero-sub { font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.65; color: rgba(255, 255, 255, 0.82); max-width: 520px; margin-bottom: 2.1rem; animation: fadeInUp 0.7s ease-out 0.18s both; } .uc-hero-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; animation: fadeInUp 0.7s ease-out 0.3s both; } /* light-on-dark variant of the existing secondary button */ .btn-secondary.on-dark { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .btn-secondary.on-dark:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.16); } /* ============================================================ WORKFLOW STRIP Sits directly under the hero on the --uc-hero-fade colour, so it reads as the bottom shelf of the header, not its own section. .uc-flow--steps ordered list: renders arrows between items .uc-flow--facts unordered list: renders accent dots Use --steps only where the content really is a sequence. ============================================================ */ .uc-flow { background: var(--uc-hero-fade); padding: 0 2rem; border-bottom: 1px solid var(--border-light); } .uc-flow ol, .uc-flow ul { max-width: 1100px; margin: 0 auto; padding: 1.4rem 0; list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.5rem; } .uc-flow li { display: flex; align-items: center; gap: 1.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; } .uc-flow--steps li:not(:last-child)::after { content: '\2192'; /* → */ color: var(--accent); font-size: 0.95rem; letter-spacing: 0; } .uc-flow--facts li { gap: 0.6rem; text-transform: none; letter-spacing: 0.01em; font-weight: 600; font-size: 0.85rem; } .uc-flow--facts li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } /* ============================================================ SECTION TONES Replaces the inline style="background: var(--bg-light)" the homepage uses. Sets the rhythm per page. ============================================================ */ .tone-white { background: var(--bg-white); } .tone-off { background: var(--bg-off-white); } .tone-light { background: var(--bg-light); } .tone-warm { background: var(--bg-warm); } .tone-blue { background: var(--bg-blue); } /* ============================================================ SCREENSHOT FRAME Your .compact-split-image is deliberately frameless. Use-case pages show fewer screenshots, so each one gets presented — add .uc-shot alongside .compact-split-image. ============================================================ */ .uc-shot { border: 1px solid var(--border-light); box-shadow: var(--shadow-lg); background: var(--bg-white); transition: box-shadow 0.4s ease; } .uc-shot:hover { box-shadow: var(--shadow-xl); } /* slightly tighter than the homepage's showcase sections, but with more air than .compact-section */ .uc-block { padding: 6.5rem 2rem; } /* Wider image column and more gutter than the homepage compact splits. NOTE: index.css collapses .compact-split to 1fr at 1050px, but that rule is only 0,1,0 specificity — these are 0,2,0, so they win even inside the breakpoint and have to be undone explicitly below. */ .uc-block .compact-split, .uc-spotlight .compact-split { grid-template-columns: 1fr 1.25fr; gap: 4.5rem; max-width: 1180px; } .uc-block .compact-split-text h2, .uc-spotlight .compact-split-text h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); margin-bottom: 1rem; } .uc-block .compact-split-text > p, .uc-spotlight .compact-split-text > p { font-size: 0.98rem; margin-bottom: 1.2rem; } /* single-line bullets straight from the content doc. These pages use .feature-list (check icon + bare ), not the homepage's .schedule-features dots — both are covered so the blocks match whichever list markup a section uses. */ .uc-block .feature-list, .uc-spotlight .feature-list, .uc-block .schedule-features, .uc-spotlight .schedule-features { gap: 0.85rem; margin-top: 1.3rem; } .uc-block .feature-list li, .uc-spotlight .feature-list li, .uc-block .schedule-features li, .uc-spotlight .schedule-features li { font-size: 0.92rem; align-items: flex-start; /* so wrapped lines don't centre against the dot */ line-height: 1.55; } .uc-block .schedule-features li::before, .uc-spotlight .schedule-features li::before { margin-top: 0.5rem; } .uc-spotlight .feature-list > li, .uc-spotlight .schedule-features li { color: var(--text-on-dark-secondary); } /* ============================================================ SPOTLIGHT BLOCK One dark block per page, for the feature most specific to that audience. Same idea as .express-section but split, not centred. Set --uc-spotlight-image inline on the section. ============================================================ */ .uc-spotlight { position: relative; overflow: hidden; padding: 7rem 2rem; background: var(--bg-dark); color: var(--text-on-dark); } .uc-spotlight-bg { position: absolute; inset: 0; background-image: var(--uc-spotlight-image, none); background-size: cover; background-position: center; opacity: 0.16; pointer-events: none; } .uc-spotlight .compact-split { position: relative; z-index: 1; } .uc-spotlight .section-label { color: var(--accent-softer); } .uc-spotlight .compact-split-text h2 { color: var(--text-on-dark); } .uc-spotlight .compact-split-text > p { color: var(--text-on-dark-secondary); } .uc-spotlight .feature-list .text h4 { color: var(--text-on-dark); } .uc-spotlight .feature-list .text p { color: var(--text-on-dark-secondary); } .uc-spotlight .feature-list .check { background: rgba(205, 59, 227, 0.20); color: var(--accent-softer); } .uc-spotlight .uc-shot { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); box-shadow: var(--shadow-glow); } /* ============================================================ CARD BLOCK For features with no screenshot yet — reuses .features-grid and .feature-card from index.css, just needs a heading above. ============================================================ */ .uc-cards-head { max-width: 620px; margin: 0 auto 2.6rem; text-align: center; } .uc-cards-head h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.7rem; } .uc-cards-head p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; } .uc-page .cta-section h2 { margin-bottom: 2rem; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1050px) { .uc-hero-inner { padding-bottom: 4.5rem; } .uc-hero h1 { max-width: 560px; } /* undo the wider image column — see specificity note above */ .uc-block .compact-split, .uc-block .compact-split.reverse, .uc-spotlight .compact-split, .uc-spotlight .compact-split.reverse { grid-template-columns: 1fr; gap: 2.5rem; direction: ltr; } .uc-block .compact-split.reverse > *, .uc-spotlight .compact-split.reverse > * { direction: ltr; } } @media (max-width: 700px) { .uc-hero { min-height: 0; padding: 8.5rem 1.5rem 0; } /* the angled scrim doesn't work in one column — go top-to-bottom */ .uc-hero::before { background: linear-gradient(to bottom, rgba(var(--uc-hero-scrim), 0.72) 0%, rgba(var(--uc-hero-scrim), 0.86) 45%, rgba(var(--uc-hero-scrim), 0.94) 100%); } .uc-hero-inner { padding-bottom: 3.5rem; } .uc-hero h1 { max-width: none; } .uc-hero-sub { max-width: none; } .uc-hero-actions .btn-primary, .uc-hero-actions .btn-secondary { flex: 1 1 auto; } /* the open mobile menu panel is white — links have to go dark again */ .uc-page nav:not(.scrolled) .nav-links.open > li > a, .uc-page nav:not(.scrolled) .nav-links.open .nav-parent { color: var(--text-secondary); } .uc-page nav:not(.scrolled) .nav-links.open .nav-cta { color: #fff !important; } .uc-flow { padding: 0 1.5rem; } .uc-flow ol, .uc-flow ul { padding: 1.1rem 0; gap: 0.5rem 1.1rem; } .uc-flow li { gap: 1.1rem; font-size: 0.72rem; } .uc-block { padding: 4rem 1.5rem; } .uc-spotlight { padding: 4rem 1.5rem; } .uc-block { padding: 4.5rem 1.5rem; } .uc-spotlight { padding: 4.5rem 1.5rem; } } @media (prefers-reduced-motion: reduce) { .uc-eyebrow, .uc-hero h1, .uc-hero-sub, .uc-hero-actions { animation: none; } }