/* ============================================================ SITE BACKDROP + INK Shared by every page. One pair of bench shots crossfading on a fixed layer behind the whole document, one dark veil, a faint grid. Text sitting directly on the backdrop is light; every light surface (cards, panels, forms) re-asserts the original navy ink inside itself. Markup (identical on every page, right after ): ============================================================ */ .page-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .page-bg-img { position: absolute; inset: 0; background-size: cover; background-position: 50% 46%; background-repeat: no-repeat; filter: blur(7px) brightness(1.02) contrast(1.06) saturate(1.02); transform: scale(1.16); opacity: 0; animation: bgCycle 24s cubic-bezier(.45,0,.55,1) infinite; will-change: opacity, transform; } .page-bg-a { background-image: url("hero-bg-1.jpg"); } .page-bg-b { background-image: url("hero-bg-2.jpg"); animation-delay: -12s; } @keyframes bgCycle { 0% { opacity: 1; transform: scale(1.14); } 42% { opacity: 1; transform: scale(1.21); } 50% { opacity: 0; transform: scale(1.22); } 92% { opacity: 0; transform: scale(1.13); } 100% { opacity: 1; transform: scale(1.14); } } .page-bg-scrim { position: absolute; inset: 0; --veil: 9, 10, 13; /* near-black, a touch cool */ background: linear-gradient(180deg, rgba(var(--veil), 0.62) 0%, rgba(var(--veil), 0.70) 48%, rgba(var(--veil), 0.76) 100%); } body.graph-paper { background-image: none; background-color: #090A0D; } .page-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: var(--grid) var(--grid); } @media (max-width: 720px) { .page-bg-img { filter: blur(9px) brightness(1.0) contrast(1.04) saturate(1.0); } .page-bg-scrim { background: linear-gradient(180deg, rgba(var(--veil), 0.68) 0%, rgba(var(--veil), 0.74) 48%, rgba(var(--veil), 0.78) 100%); } } /* no crossfade: show both at once, soft-blended down the middle */ @media (prefers-reduced-motion: reduce) { .page-bg-img { animation: none; opacity: 1; transform: scale(1.16); } .page-bg-b { -webkit-mask-image: linear-gradient(100deg, transparent 34%, #000 66%); mask-image: linear-gradient(100deg, transparent 34%, #000 66%); } } /* ===== ink on the backdrop ===== */ .page-main { --fg-1: #F4F9FE; --fg-2: #C6DAEC; --fg-3: #93ACC6; --fg-4: #6B819B; --line-1: rgba(255,255,255,0.14); --line-2: rgba(255,255,255,0.26); --line-strong: rgba(255,255,255,0.70); color: var(--fg-1); /* body's navy is inherited as a computed colour, so restate it here */ } /* ===== light surfaces keep navy ink ===== */ .page-main :is( /* home */ .record, .stats-strip, .cert-report, .pipeline-step, .rev-card, .home-card, .bw-tile, .gal-card, .exploded-stage, /* shared components */ .chip, .pill, .input, .about-block, .budget-wrap, .case-block, .case-spec-grid, .contact-grid, .cta-band, .recognition, .related-card, .review-featured, .review-thumb, .service-card, .service-cell, .skills-wrap, .team-card, .testimonial, .work-card, /* page-level components */ .process-card, .process-marker, .cat-meta-bar, .cat-tile, .lightbox-content, .company-card, .insights-strip, .book-card, .svc-case, .svc-figure, .sitemap-block, .sitemap-meta-row, .team-lead-card, .team-value, .contact-cta, .app-card, .catalogue-strip-link, .team-card-social, .team-cofounder-email ) { --fg-1: #0F2A4A; --fg-2: #3E5876; --fg-3: #7A8599; --fg-4: #B4BAC6; --line-1: rgba(15, 42, 74, 0.10); --line-2: rgba(15, 42, 74, 0.22); --line-strong: #0F2A4A; color: var(--fg-1); } /* beige page-level blocks read as white cards, like the home page */ .page-main :is(.about-block, .cta-band, .contact-right, .book-foot, .case-block, .case-spec-grid, .related-card) { background: #FFFFFF; } /* tinted cards were see-through over the old paper — give them a white base */ .page-main .team-card.team-card-cofounder { background: linear-gradient(135deg, rgba(26,58,107,0.05) 0%, rgba(0,168,232,0.07) 100%), #FFFFFF; } /* the accent card is deliberately near-transparent, so it keeps page ink */ .page-main .home-card-accent { --fg-1: #F4F9FE; --fg-2: #C6DAEC; --fg-3: #93ACC6; --fg-4: #6B819B; --line-1: rgba(255,255,255,0.14); --line-2: rgba(255,255,255,0.26); --line-strong: rgba(255,255,255,0.70); color: var(--fg-1); } /* page heroes: a soft pool of shadow so the headline keeps its weight */ .page-hero { position: relative; } .page-hero::before { content: ""; position: absolute; inset: -10% 0; z-index: -1; pointer-events: none; background: radial-gradient(62% 80% at 32% 46%, rgba(9, 10, 13, 0.40) 0%, rgba(9, 10, 13, 0.18) 52%, rgba(9, 10, 13, 0) 80%); }