/* ========================================================================== Stalsky - LIGHT THEME Theme: Brushed Steel on White, Technical Blue Accents This file is a COLOUR-ONLY overlay. It must be loaded AFTER css/style.css, which still supplies every bit of layout, spacing and typography: Keeping layout in one place means structural edits to the dark site are picked up here automatically - only colour has to be maintained twice. ========================================================================== */ /* --- Palette Override --- Same variable names as the dark theme, re-pointed for a light surface. Elevation inverts: the page is a soft grey and cards sit on top in white. */ :root { /* Surfaces (recessed -> elevated) */ --bg-dark: #e9edf3; /* page ground, top bar, industries strip, footer */ --bg-primary: #f5f7fa; /* alternating sections, form fields */ --bg-secondary: #ffffff; /* cards, panels, form wrapper */ --bg-card: #f7f9fc; /* insets: image frames, captions, secondary btn */ --bg-card-hover: #eaf2ff; /* hover wash, faintly blue */ --bg-glass: rgba(255, 255, 255, 0.82); /* Accents - darkened from the dark theme so they clear 4.5:1 on white */ --accent-blue: #0a6ed1; /* 5.1:1 on #fff */ --accent-cyan: #0e7490; /* 5.3:1 on #fff - the dark theme's #00f2fe is unreadable here */ --accent-glow: rgba(10, 110, 209, 0.18); --accent-steel: #64748b; --steel-light: #334155; /* was a near-white; now the "strong secondary" ink */ /* Ink */ --text-main: #0f172a; --text-muted: #4b5563; --text-dark: #5b6472; /* darker than a typical grey-500: it lands on the grey page ground, not on white */ /* Lines */ --border-subtle: rgba(15, 23, 42, 0.10); --border-active: rgba(10, 110, 209, 0.45); /* Elevation - the dark theme's 40-50% black shadows are far too heavy here */ --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.09); --shadow-glow: 0 0 25px rgba(10, 110, 209, 0.15); } /* --- Rules that hard-code a colour in style.css --- Variables cannot reach these, so each one is restated below. */ /* Blueprint grid on the body: 3% blue is invisible on a light ground. */ body { background-image: linear-gradient(rgba(10, 110, 209, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 110, 209, 0.07) 1px, transparent 1px); } /* Gradient-filled headings ran white -> grey, which vanishes on white. NOTE: the `background` shorthand resets `background-clip` to border-box, so the clip MUST be restated here - otherwise the gradient paints the element box and the transparent text disappears into it. */ .section-title { background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, var(--accent-steel) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-title span { background: linear-gradient(135deg, #0f172a 0%, var(--accent-blue) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* The blueprint grid lives on , so it shows through any section without its own background. The hero gets an opaque ground in the same page colour, which hides the grid there only - every other section still shows it. */ .hero-section { background-color: var(--bg-dark); } /* Hero photo + motion. bg_new2.jpg is a dark, high-contrast shot on a light page, so it runs at a low opacity behind the existing left-fading mask: it reads as a tinted industrial accent on the right rather than a dark slab. The Ken Burns drift is a transform (GPU-composited, no repaint) rather than an animated background-size, and the section's overflow:hidden clips the overscan. */ .hero-bg-blueprint { background-image: url('../images/bg_new2.webp'); opacity: 0.32; animation: hero-drift 24s ease-in-out infinite; } @keyframes hero-drift { 0%, 100% { transform: scale(1) translate3d(0, 0, 0); } 50% { transform: scale(1.10) translate3d(-1.5%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .hero-bg-blueprint { animation: none; } } /* .stat-label is the only small text that sits on top of the hero photo. Against the photo's darkest patch --text-dark measures 3.85:1, under the 4.5:1 AA floor for text this size, so the labels get a darker ink of their own (5.2:1 worst case) instead of fading the photo out further. */ .stat-label { color: #475061; } /* Logo artwork: the light files sit on a white background, so `multiply` drops the white out (the dark site uses `screen` to drop black out). */ .brand-wordmark, .brand-lockup { mix-blend-mode: multiply; } /* logo_new.jpeg carries a lot of built-in whitespace: the letterforms are only 79% of the canvas height and sit 9.3% in from the left edge (the previous wordmark was 96% and 1.5%). So the box is enlarged to bring the visible letters back to ~42px, and a negative margin cancels the baked-in left pad so the mark still lines up with the container edge. Values are per-breakpoint because the offset scales with the rendered width. */ .brand-wordmark { height: 53px; margin-left: -17px; } /* Footer mark is now the same wordmark, not the tall emblem lockup. At the inherited 96px the 3.46 aspect would render 332px wide and dominate the column, so it drops to 60px (208px). Same left-pad cancellation as above. */ .brand-lockup { height: 60px; margin-left: -19px; } /* .footer-grid has three children (Brand / Navigation / Capabilities) but style.css declares four tracks, so the columns would bunch left against an empty track. This value has to track the number of children in the footer. MUST stay inside a min-width query: this file loads after style.css, and an unscoped rule would have equal specificity but later source order, beating style.css's own max-width rules and stopping the footer from collapsing to 2 columns at 1024px and 1 column at 768px. */ @media (min-width: 1025px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } } @media (max-width: 768px) { .brand-wordmark { height: 41px; margin-left: -13px; } .brand-lockup { height: 48px; margin-left: -15px; } } /* Elements that were explicitly #ffffff to sit on a dark surface. */ .top-bar-val, .nav-link:hover, .nav-link.active, .mobile-toggle { color: var(--text-main); } /* White-on-dark washes flipped to black-on-light. */ .badge { background: rgba(15, 23, 42, 0.05); } .tab-btn:hover { border-color: rgba(15, 23, 42, 0.22); } /* Letterbox behind SS card photos was solid black. */ .ss-card-img-wrap { background: #dfe5ee; } /* Form fields need to read as recessed against the white form panel. */ .form-control { background: #f3f6fa; } .form-control::placeholder { color: #94a3b8; } /* Modal scrim: pure 75% black is harsh over a light page. */ .modal-backdrop { background: rgba(15, 23, 42, 0.45); } /* Header: opaque rather than glass. `mix-blend-mode` on the logo blends against the header's own painted background; a translucent one makes that result browser-dependent, and a solid white bar reads cleaner on a light page anyway. The border keeps the sticky header separated from white sections underneath it. */ .header, .header.scrolled { background: #ffffff; border-bottom: 1px solid rgba(15, 23, 42, 0.12); } /* --- Contrast top-ups --- Accent fills tuned against a dark background go too pale on white. */ .section-subtitle, .capability-icon-wrap, .industry-icon, .hero-badge-icon, .modal-icon { background: rgba(10, 110, 209, 0.09); } .section-subtitle, .capability-icon-wrap, .industry-icon { border-color: rgba(10, 110, 209, 0.22); }