/* ========================================================================= Solace Technologies - shared glassmorphism design layer Loads AFTER each page's own stylesheet and re-skins existing card/surface classes as frosted glass. Pure additive layer: safe on any page. Honors prefers-reduced-transparency / prefers-reduced-motion. ========================================================================= */ :root { --glass-bg: rgba(13, 26, 44, 0.55); --glass-bg-soft: rgba(15, 28, 47, 0.40); --glass-bg-strong: rgba(10, 20, 35, 0.78); --glass-blur: 18px; --glass-blur-strong: 26px; --glass-border: rgba(255, 255, 255, 0.12); --glass-border-strong: rgba(255, 255, 255, 0.20); --glass-radius: 22px; --glass-radius-lg: 30px; --glass-highlight: rgba(255, 255, 255, 0.10); --glass-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 42%); } /* ------------------------------------------------------------------------- Core utility classes ------------------------------------------------------------------------- */ .glass, .glass-strong, .glass-pill { position: relative; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight); } .glass { border-radius: var(--glass-radius); } .glass-strong { background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%); backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%); border-radius: var(--glass-radius-lg); } .glass-pill { border-radius: 999px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 var(--glass-highlight); } /* Sheen overlay helper (apply .glass-sheen on a relatively-positioned box) */ .glass-sheen::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-sheen); pointer-events: none; z-index: 1; opacity: 0.9; mix-blend-mode: screen; } .glass-divider { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--glass-border-strong), transparent); } /* Faint film grain overlay (added to by motion.js as a fixed layer) */ .glass-grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================================================================= RE-SKIN: parent site (styles.css) card surfaces -> glass ========================================================================= */ .offer-card, .sector-card, .about-card, .contact-card, .inhouse-card, .council-card { background: var(--glass-bg) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); border-color: var(--glass-border) !important; box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight); } .path-card { background: var(--glass-bg-soft) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); border-color: var(--glass-border) !important; } /* offer / sector media keep their image but get a glass footer feel */ .offer-card:hover, .sector-card:hover, .about-card:hover { border-color: var(--glass-border-strong) !important; } /* Proof pills + caps chips + audience chips as glass */ .proof-pill, .caps-row-links a, .fit-chip { background: var(--glass-bg-soft) !important; -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); } /* Form fields on contact page -> subtle glass */ .form-field input, .form-field select, .form-field textarea { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* Inhouse custom band + sectors foot + form-sent as glass panels */ .inhouse-custom, .sectors-foot, .form-sent { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } /* ========================================================================= RE-SKIN: shared shell ribbon + mega menu (shell.css) ========================================================================= */ .solace-shell { background: rgba(6, 12, 22, 0.55) !important; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-bottom-color: var(--glass-border); } .shell-links a, .shell-menu-trigger, .shell-cta { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .shell-mega-panel { position: relative; } .shell-mega-brand, .shell-mega-vert, .shell-mega-scan, .shell-mega-contact { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border-color: var(--glass-border); } /* ========================================================================= RE-SKIN: capability pages (cap-* classes use ../styles.css + own styles.css) ========================================================================= */ .cap-scope-card, .cap-why-card, .cap-other-card, .cap-vertical-card, .cap-hero-tile, .cap-process-step, .cap-pillar { background: var(--glass-bg) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); border-color: var(--glass-border) !important; box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight); } /* Sibling-capability chip row (added on capability pages) */ .cap-siblings { display: flex; flex-wrap: wrap; gap: 8px; max-width: var(--max, 1240px); margin: 0 auto; padding: 0 var(--pad-x, 24px) 8px; } .cap-siblings a { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-soft, #b8c4d4); background: var(--glass-bg-soft); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); transition: color 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1); } .cap-siblings a:hover { color: #fff; border-color: rgba(52, 211, 153, 0.45); transform: translateY(-2px); } .cap-siblings a.is-current { color: #06111e; background: linear-gradient(120deg, #34d399, #38bdf8); border-color: transparent; } /* ========================================================================= RE-SKIN: Iris (iris/styles.css uses --surface tokens) ========================================================================= */ body.active-iris { --surface: rgba(11, 23, 39, 0.58); --surface-strong: rgba(11, 23, 39, 0.84); } /* ========================================================================= RE-SKIN: Stay (hospitality) - glass-style the floating topnav. Content surfaces stay solid (cards sit on section bands) to protect text contrast; the floating chrome gets the frosted treatment. ========================================================================= */ .topnav, .topnav-mobile { -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); } body.active-hospitality .topnav-inner, body.active-hospitality .topnav.is-scrolled { border-color: var(--glass-border); } /* ========================================================================= RE-SKIN: Discover consultant + chat widget ========================================================================= */ .disc-conv, .disc-guide, .disc-chip, .solace-chat-panel, .solace-chat-modal-panel { -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); } /* ========================================================================= GUARDRAILS ========================================================================= */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass, .glass-strong, .glass-pill, .offer-card, .sector-card, .about-card, .contact-card, .inhouse-card, .council-card, .path-card, .cap-scope-card, .cap-why-card, .cap-other-card, .cap-vertical-card, .cap-hero-tile { background: var(--bg-surface, #0d1a2c) !important; } } @media (prefers-reduced-transparency: reduce) { .glass, .glass-strong, .glass-pill, .offer-card, .sector-card, .about-card, .contact-card, .inhouse-card, .council-card, .path-card, .cap-scope-card, .cap-why-card, .cap-other-card, .cap-vertical-card, .cap-hero-tile, .solace-shell { background: var(--bg-surface, #0d1a2c) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } .glass-grain { display: none; } }