/** * ============================================================================ * iBOX / OPTiCLEAN -- Premium Light-Blue Claymorphism Skin * ============================================================================ * This file is a pure VISUAL overlay. It changes colour, gradient, shadow, * border-radius and surface treatment only. * * It intentionally does NOT touch: layout (position/display/grid/flex/width/ * height/margin/padding of structural elements), markup, content, images, * or animation timing/behaviour. Every existing selector, breakpoint and * component keeps working exactly as before -- it just now renders as a * soft, rounded, light-blue "clay" surface instead of the old flat design. * * Loaded last (see functions.php, priority 20) so it always wins the * cascade without needing heavy use of !important. !important is used only * where the original rule hardcodes a colour with equal/higher specificity * that would otherwise not be reachable (documented inline). * ============================================================================ */ /* ------------------------------------------------------------------------- * 1. DESIGN TOKENS * ---------------------------------------------------------------------- */ :root { /* Re-themed site tokens (already used ~90x across the theme's own CSS, so redefining these alone re-colours buttons, links, the footer, pill navigation and form buttons site-wide). */ --primary: #1B4C82; /* was #183358 navy -> deep premium blue */ --secondary: #FF981A; /* iBOX brand orange -- the sitewide small-accent token (eyebrow labels, decorative divider lines, link hovers, CTA buttons). Was blue (#4F9DFF) under the claymorphism skin; the one place that must stay blue (header nav-link hover) is re-pinned explicitly further down with --nav-hover-accent so it's unaffected by this change. */ --dark: #0F2A4A; --text: #212121; /* --white: #F7F7F3 (was #ffffff) -- per follow-up feedback ("change white backgrounds to the same off-white used in the Why iBOX hero, #F7F7F3"). This token already powers ~15 `background`/ `background-color: var(--white)` rules site-wide (cards, popups, footer-adjacent panels, etc.) plus a similar number of `color: var(--white)` rules (white text set on dark/blue button and section backgrounds) -- redefining it here, in the same skin-layer :root block that already re-themes --primary/--secondary/--dark/ --text, re-colours every one of those background usages to the approved off-white in one consistent, sitewide change, exactly the same pattern already used for the other tokens above. The knock-on effect on the `color: var(--white)` (text) usages is negligible -- #F7F7F3 is visually indistinguishable from #ffffff as text colour against the dark/blue surfaces it's used on, so button/label legibility is unaffected. Hardcoded #fff/#ffffff declarations that don't go through this token (form fields, a few standalone component backgrounds) are handled individually elsewhere in this file and in style.css/contact-form.css/catalog-popup.css -- see those rules' own comments. */ --white: #F7F7F3; /* Fixed blue used ONLY for header/nav hover states, so the navigation stays exactly as it was even though --secondary above is now orange. */ --nav-hover-accent: #4F9DFF; /* Brand orange, dedicated to buttons/CTAs. Kept separate from --clay-accent* below, which still powers the footer and catalogue section background surfaces and must stay blue/untouched. */ --brand-orange-light: #FFB157; --brand-orange: #FF981A; --brand-orange-deep: #D97D00; /* hover state -- slightly darker */ --clay-cta-shadow: rgba(20, 20, 20, 0.16); /* neutral, no colour tint -- soft premium elevation instead of a glow */ /* New Claymorphism tokens */ --clay-bg-1: #EAF6FF; --clay-bg-2: #DDF2FF; --clay-bg-3: #CFEAFF; --clay-surface: #F5FAFF; --clay-accent: #4F9DFF; --clay-accent-mid: #5DAEFF; --clay-accent-light: #7ABEFF; --clay-accent-deep: #1B4C82; --clay-shadow-dark: rgba(112, 161, 214, 0.38); --clay-shadow-soft: rgba(140, 180, 224, 0.28); --clay-shadow-light: rgba(255, 255, 255, 0.85); /* Dedicated palette for the "Latest iBOX Catalog" band and the footer, matched to reference image. Kept separate from --clay-accent-light/ --clay-accent-deep above (those still power the carousel/slider hover + dot states elsewhere and must stay unaffected). Flat, desaturated, premium blues -- not the brighter --clay-accent family. */ --clay-catalog-flat: #6881A1; --clay-footer-flat: #182D4E; --clay-radius-lg: 32px; --clay-radius-md: 24px; --clay-radius-sm: 14px; --clay-radius-pill: 999px; } /* ------------------------------------------------------------------------- * 2. GLOBAL BASE * ---------------------------------------------------------------------- */ /* The sitewide powder-blue backdrop (#DAE6F6, background-attachment: fixed) that used to live here has been removed. It was only ever meant to show behind the homepage's floating claymorphism cards (the "Discover iBOX" and OPTiCLEAN panels) -- both were removed from the homepage well before this fix, so every section on the site now paints its own full-bleed background (see e.g. .ibox-story, .materials-section, footer) with nothing left for that body-level tint to ever be seen behind. Left in place, it was the only non-white, non-section-scoped background anywhere in the theme -- a global colour that could still surface as a stray tint at the very edges of the page (first paint, sub-pixel rounding on very wide/ultrawide viewports, printing, etc.). html body now falls back to css/style.css's own plain `background: #fff;` again, with nothing here overriding it. */ /* Explicit full-width safeguard, loaded last (this file has the highest CSS priority in the theme) so nothing can override it. html/body are forced to the true viewport width with zero margin/ padding, and every top-level section wrapper on the site (the homepage's hero, "Who We Are", "Our Product Categories", "Materials", "Download Catalogue" -- plus
and