/* Theme Name: SRS Printers Theme Theme URI: https://srswebservices.com Author: SRS Web Services Author URI: https://srswebservices.com Description: A complete industrial printing solutions theme built by SRS Web Services — offset & digital printing, packaging & labels, industrial documentation, wide-format signage. Business details, social links, homepage hero copy, and stats are editable via Appearance → Customize; every page (including the header and footer, via Elementor Pro Theme Builder) can also be rebuilt visually with Elementor. Currently configured for Priya Printers (priyaprinters.in). Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 Tested up to: 6.6 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: srs-printers-theme */ /* ================================================================ SRS PRINTERS THEME — DESIGN SYSTEM v2 (Light + Dark) ---------------------------------------------------------------- Fonts are loaded via in the theme (see header.php); no @import here (avoids a second, render-blocking request). THEMING ------- Light is the default. Colours are driven by semantic tokens (--bg, --surface, --text, --heading, --inverse-bg, --on-inverse …). A dark palette is supplied under html[data-theme="dark"]. Toggle is wired in js/theme.js and persisted to localStorage('theme'). ================================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root { /* ── Raw brand palette (hues are theme-independent) ── */ --ink: #070C14; --dark: #0D1117; --dark-2: #111827; --dark-3: #1A2332; --dark-4: #243044; --primary: #2C5CDB; --primary-b: #6C8EFC; --primary-d: #1E44AE; --primary-dk: #16337F; --green: #10B981; --blue: #3B82F6; --red: #EF4444; /* Print-industry accent set — the four process-ink colours, used sparingly as a decorative "registration mark" motif (brand mark, dot clusters, per-service icon tints) rather than as primary UI colour. */ --cy: #00ACC1; --mg: #D6006C; --yl: #C9A400; --key:#1F2937; --white: #FFFFFF; --off-white: #F8F9FB; --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-900: #111827; /* ── SEMANTIC TOKENS — LIGHT (default) ── */ --bg: #FFFFFF; /* page background */ --surface: #FFFFFF; /* cards, panels, elevated surfaces */ --surface-2: #F4F6FA; /* alternate sections, inputs */ --surface-3: #EAEEF4; /* subtle fills, icon tiles, hovers */ --heading: #0F1626; /* headings / strong text */ --text: #1F2937; /* body text */ --text-2: #374151; /* secondary text */ --text-m: #4B5563; /* muted text */ --text-l: #6B7280; /* light / label text */ --border: #E5E7EB; /* hairlines */ --border-2: #D1D5DB; /* stronger borders */ --border-d: rgba(255,255,255,0.07); /* Inverse design sections (hero, page-hero, CTA, footer, finder…) */ --inverse-bg: #EEF2F8; /* hero, page-hero, finder, projects */ --inverse-bg-2: #E6EBF3; /* CTA, footer (deepest) */ --on-inverse: #0F1626; /* text on inverse sections */ --on-inverse-2: #374151; --on-inverse-muted: #4B5563; --on-inverse-faint: #6B7280; --on-inverse-dim: #9CA3AF; --inverse-border: rgba(15,22,38,0.10); --inverse-border-soft:rgba(15,22,38,0.06); --inverse-card: rgba(15,22,38,0.035); --inverse-card-2: rgba(15,22,38,0.06); --inverse-grid: rgba(15,22,38,0.045); /* Navigation */ --nav-bg: rgba(255,255,255,0.92); --nav-border: #E5E7EB; /* Floating glass surfaces (mobile-nav drawer, bottom tab bar) */ --glass-bg: rgba(255,255,255,0.72); --glass-border: rgba(255,255,255,0.5); --nav-h: 76px; --r: 10px; --r-sm: 7px; --r-lg: 14px; --r-xl: 20px; --shadow-xs: 0 1px 2px rgba(15,23,42,0.05); --shadow-sm: 0 2px 10px rgba(15,23,42,0.055); --shadow: 0 8px 28px rgba(15,23,42,0.07); --shadow-lg: 0 20px 56px rgba(15,23,42,0.09); --shadow-xl: 0 28px 88px rgba(15,23,42,0.11); --glow: 0 0 0 3px rgba(44,92,219,0.14), 0 8px 32px rgba(44,92,219,0.10); --trans: all 0.25s cubic-bezier(0.4,0,0.2,1); --trans-fast:all 0.15s cubic-bezier(0.4,0,0.2,1); color-scheme: light; } /* ── SEMANTIC TOKENS — DARK ── */ html[data-theme="dark"] { --bg: #0A0E16; --surface: #141C28; --surface-2: #10161F; --surface-3: #1B2330; --heading: #F8FAFC; --text: #E5E8EE; --text-2: #C9D1DC; --text-m: #9AA5B2; --text-l: #76808E; --border: rgba(255,255,255,0.09); --border-2: rgba(255,255,255,0.16); --inverse-bg: #0F1726; --inverse-bg-2: #070C14; --on-inverse: #FFFFFF; --on-inverse-2: rgba(255,255,255,0.82); --on-inverse-muted: rgba(255,255,255,0.58); --on-inverse-faint: rgba(255,255,255,0.42); --on-inverse-dim: rgba(255,255,255,0.28); --inverse-border: rgba(255,255,255,0.08); --inverse-border-soft:rgba(255,255,255,0.05); --inverse-card: rgba(255,255,255,0.05); --inverse-card-2: rgba(255,255,255,0.07); --inverse-grid: rgba(255,255,255,0.025); --nav-bg: rgba(13,17,23,0.85); --nav-border: rgba(255,255,255,0.08); --glass-bg: rgba(20,28,40,0.68); --glass-border: rgba(255,255,255,0.10); --shadow-xs: 0 1px 3px rgba(0,0,0,0.4); --shadow-sm: 0 2px 8px rgba(0,0,0,0.45); --shadow: 0 6px 24px rgba(0,0,0,0.5); --shadow-lg: 0 16px 48px rgba(0,0,0,0.6); --shadow-xl: 0 24px 80px rgba(0,0,0,0.7); color-scheme: dark; } html { scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); } body { font-family:'Inter',sans-serif; color:var(--text); background:var(--bg); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color 0.35s ease, color 0.35s ease; } img { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } ul { list-style:none; } button { font-family:inherit; cursor:pointer; border:none; background:none; } input,select,textarea { font-family:inherit; } /* Themed text selection */ ::selection { background:var(--primary); color:#fff; } /* Keyboard focus ring — visible for keyboard users, not on mouse click */ :focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:3px; } :focus:not(:focus-visible) { outline:none; } /* Refined scrollbar (Chromium/Edge/Safari) */ @media (pointer:fine) { ::-webkit-scrollbar { width:11px; height:11px; } ::-webkit-scrollbar-track { background:var(--surface-2); } ::-webkit-scrollbar-thumb { background:var(--border-2); border:3px solid var(--surface-2); border-radius:99px; } ::-webkit-scrollbar-thumb:hover { background:var(--text-l); } } /* Respect users who prefer less motion — calm all decorative animation */ @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } .fade-in,.fade-left,.fade-right { opacity:1 !important; transform:none !important; } } /* ── TYPOGRAPHY ── */ h1,h2,h3,h4,h5 { font-family:'Sora',sans-serif; font-weight:700; line-height:1.15; letter-spacing:-0.01em; } /* ── LAYOUT ── */ .container { max-width:1240px; margin:0 auto; padding:0 40px; } .container-sm { max-width:920px; margin:0 auto; padding:0 40px; } .section { padding:96px 0; } .section-sm { padding:72px 0; } .section-xs { padding:48px 0; } /* ── BACKGROUNDS ── */ .bg-white { background:var(--surface); } .bg-off { background:var(--surface-2); } .bg-gray { background:var(--surface-2); } .bg-dark { background:var(--inverse-bg); } .bg-darkest { background:var(--inverse-bg-2); } .bg-ink { background:var(--inverse-bg-2); } .bg-primary { background:var(--primary); } /* ── SECTION LABELS ── */ .eyebrow { font-family:'Sora',sans-serif; font-size:12px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:var(--primary); display:block; margin-bottom:14px; } .eyebrow.on-primary { color:#fff; opacity:0.6; } .eyebrow.on-dark { color:var(--primary); } .section-title { font-size:clamp(30px,4vw,52px); color:var(--heading); margin-bottom:16px; } .section-title.on-dark { color:var(--on-inverse); } .section-title.on-primary { color:#fff; } .section-sub { font-size:17px; color:var(--text-m); line-height:1.8; max-width:580px; } .section-sub.on-dark { color:var(--on-inverse-muted); } .section-sub.on-primary { color:rgba(13,17,23,0.68); } .section-header { margin-bottom:56px; } .section-header.center { text-align:center; } .section-header.center .section-sub { margin:0 auto; } .divider { width:44px; height:3px; background:var(--primary); display:block; margin:18px 0; border-radius:2px; } .divider.center { margin:18px auto; } /* ── BUTTONS ── */ .btn { display:inline-flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; border-radius:var(--r-sm); padding:13px 26px; cursor:pointer; border:none; transition:var(--trans); letter-spacing:0.1px; white-space:nowrap; position:relative; overflow:hidden; } .btn svg { width:16px; height:16px; flex-shrink:0; } .btn-primary { background:var(--primary); color:#fff; font-weight:600; box-shadow:0 1px 2px rgba(44,92,219,0.15); } .btn-primary:hover { background:var(--primary-d); transform:translateY(-1px); box-shadow:0 8px 20px rgba(44,92,219,0.28); } .btn-primary:active { transform:translateY(0); box-shadow:0 2px 8px rgba(44,92,219,0.25); } /* Adaptive solid button — inverts with the theme */ .btn-dark { background:var(--heading); color:var(--bg); } .btn-dark:hover { opacity:0.9; transform:translateY(-2px); box-shadow:var(--shadow); } .btn-outline { background:transparent; color:var(--heading); border:1.5px solid var(--border-2); } .btn-outline:hover { border-color:var(--heading); background:var(--surface-2); transform:translateY(-2px); } .btn-outline-light { background:transparent; color:var(--on-inverse); border:1.5px solid var(--inverse-border); } .btn-outline-light:hover { border-color:var(--on-inverse); background:var(--inverse-card); transform:translateY(-2px); } .btn-primary-outline { background:transparent; color:var(--primary); border:1.5px solid rgba(44,92,219,0.4); } .btn-primary-outline:hover { background:rgba(44,92,219,0.08); border-color:var(--primary); } .btn-sm { padding:9px 18px; font-size:13px; } .btn-lg { padding:16px 36px; font-size:15px; } .btn-xl { padding:18px 44px; font-size:16px; } /* ── TAGS ── */ .tag { display:inline-block; font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:4px 12px; border-radius:100px; } .tag-primary { background:rgba(44,92,219,0.1); color:var(--primary-dk); border:1px solid rgba(44,92,219,0.25); } .tag-dark { background:var(--surface-3); color:var(--text-2); border:1px solid var(--border); } .tag-light { background:var(--inverse-card);color:var(--on-inverse-2); border:1px solid var(--inverse-border); } .tag-green { background:rgba(16,185,129,0.1); color:#059669; border:1px solid rgba(16,185,129,0.25); } .tag-blue { background:rgba(59,130,246,0.1); color:#2563EB; border:1px solid rgba(59,130,246,0.25); } .tag-red { background:rgba(239,68,68,0.1); color:#DC2626; border:1px solid rgba(239,68,68,0.25); } /* ── ANIMATIONS ── */ .fade-in { opacity:0; transform:translateY(26px) scale(0.99); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); } .fade-in.visible { opacity:1; transform:translateY(0) scale(1); } .fade-left { opacity:0; transform:translateX(-26px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); } .fade-left.visible { opacity:1; transform:translateX(0); } .fade-right { opacity:0; transform:translateX(26px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); } .fade-right.visible { opacity:1; transform:translateX(0); } .delay-1 { transition-delay:0.08s; } .delay-2 { transition-delay:0.16s; } .delay-3 { transition-delay:0.24s; } .delay-4 { transition-delay:0.32s; } .delay-5 { transition-delay:0.40s; } .delay-6 { transition-delay:0.48s; } @keyframes pulse-primary { 0%,100%{box-shadow:0 0 0 0 rgba(44,92,219,0.4)} 50%{box-shadow:0 0 0 8px rgba(44,92,219,0)} } @keyframes pulse-green { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.4)} 50%{box-shadow:0 0 0 8px rgba(16,185,129,0)} } @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } @keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} } @keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } @keyframes spin { to{transform:rotate(360deg)} } @keyframes hero-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.5)} } /* ══════════════════════════════════════ NAVIGATION ═══════════════════════════════════════ */ .site-nav { position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-h); background:var(--nav-bg); border-bottom:1px solid transparent; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:border-color 0.3s, box-shadow 0.3s, background 0.3s; } /* WordPress admin bar is fixed too and isn't accounted for by fixed-position children automatically (only by document margin, which position:fixed ignores) — offset every fixed UI element by the admin bar's own height. */ body.admin-bar .site-nav { top:32px; } body.admin-bar .mobile-nav { top:calc(var(--nav-h) + 10px + 32px); } @media screen and (max-width:782px) { body.admin-bar .site-nav { top:46px; } body.admin-bar .mobile-nav { top:calc(var(--nav-h) + 10px + 46px); } } .site-nav.scrolled { border-color:var(--nav-border); box-shadow:0 2px 24px rgba(0,0,0,0.07); } .site-nav.nav-transparent { background:transparent; border-bottom:1px solid transparent; } .site-nav.nav-transparent:not(.scrolled) .nav-link { color:var(--on-inverse-2); } .site-nav.nav-transparent:not(.scrolled) .nav-link:hover { color:var(--on-inverse); background:var(--inverse-card); } .site-nav.nav-transparent.scrolled { background:var(--nav-bg); } .site-nav.nav-transparent:not(.scrolled) .nav-brand-name { color:var(--on-inverse); } .site-nav.nav-transparent:not(.scrolled) .nav-brand-sub { color:var(--on-inverse-dim); } .site-nav.nav-transparent:not(.scrolled) .nav-dropdown-arrow { stroke:var(--on-inverse-faint); } .site-nav.nav-transparent:not(.scrolled) .btn-outline { color:var(--on-inverse); border-color:var(--inverse-border); } .site-nav.nav-transparent:not(.scrolled) .btn-outline:hover { background:var(--inverse-card); } .site-nav.nav-transparent:not(.scrolled) .hamburger span { background:var(--on-inverse); } .nav-container { max-width:1240px; margin:0 auto; padding:0 40px; height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; } .nav-brand { display:flex; align-items:center; gap:12px; flex-shrink:0; } .nav-logo-img { height:54px; width:auto; max-width:280px; object-fit:contain; object-position:left center; } .nav-brand-icon { width:42px; height:42px; background:var(--primary); border-radius:7px; display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-size:15px; font-weight:800; color:#fff; letter-spacing:0.5px; flex-shrink:0; } .nav-brand-name { font-family:'Sora',sans-serif; font-size:19px; font-weight:800; color:var(--heading); line-height:1.1; } .nav-brand-name strong { color:var(--primary-d); } .nav-brand-sub { font-size:9.5px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text-l); margin-top:1px; } .nav-menu { display:flex; align-items:center; gap:2px; flex:1; min-width:0; justify-content:center; } .nav-menu > li { position:relative; } .nav-link { font-size:13.5px; font-weight:500; color:var(--text-2); padding:8px 14px; border-radius:6px; display:flex; align-items:center; gap:4px; transition:var(--trans); } .nav-link:hover { color:var(--heading); background:var(--surface-3); } .nav-link.active, .nav-menu li.current-menu-item > a, .nav-menu li.current_page_item > a { color:var(--heading); background:var(--surface-3); font-weight:600; } .nav-dropdown-arrow { width:13px; height:13px; stroke:var(--text-l); stroke-width:2.5; fill:none; transition:transform 0.2s; } .nav-menu > li:hover .nav-dropdown-arrow { transform:rotate(180deg); } .nav-dropdown { position:absolute; top:calc(100% + 10px); left:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); min-width:280px; box-shadow:var(--shadow-xl); padding:8px; opacity:0; visibility:hidden; transform:translateY(10px); transition:all 0.22s cubic-bezier(0.4,0,0.2,1); z-index:100; } /* Invisible hover bridge — keeps the trigger's :hover state alive while the pointer crosses the visual gap between the nav link and the dropdown, so the menu doesn't close mid-transit before reaching the sub-items. */ .nav-dropdown::before { content:''; position:absolute; left:0; right:0; top:-10px; height:10px; } .nav-menu > li:hover .nav-dropdown { opacity:1; visibility:visible; transform:translateY(0); } .nav-dropdown li a { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; font-size:13.5px; color:var(--text-2); transition:var(--trans); } .nav-dropdown li a:hover { background:var(--surface-2); color:var(--heading); } .nav-dropdown-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; } .nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; } /* Theme toggle (sun / moon) */ .theme-toggle { width:38px; height:38px; border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center; background:var(--surface-2); border:1px solid var(--border); color:var(--text-2); transition:var(--trans); flex-shrink:0; } .theme-toggle:hover { background:var(--surface-3); color:var(--heading); transform:translateY(-1px); } .theme-toggle svg { width:18px; height:18px; } [data-theme-toggle] .icon-sun { display:none; } [data-theme-toggle] .icon-moon { display:inline-flex; } html[data-theme="dark"] [data-theme-toggle] .icon-sun { display:inline-flex; } html[data-theme="dark"] [data-theme-toggle] .icon-moon { display:none; } .hamburger { display:none; flex-direction:column; gap:5px; padding:8px; background:none; border:none; } .hamburger span { display:block; width:22px; height:2px; background:var(--heading); border-radius:2px; transition:var(--trans); } .hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); } .hamburger.open span:nth-child(2) { opacity:0; } .hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); } /* Floating glass mobile-nav panel + its dedicated backdrop scrim. Panel is a rounded, blurred card anchored below the nav bar rather than a full-bleed page overlay — tap the backdrop (or Escape, or a link) to dismiss it. */ .mobile-nav-backdrop { display:none; position:fixed; inset:0; z-index:998; background:rgba(7,12,20,0.45); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); opacity:0; transition:opacity 0.3s ease; } .mobile-nav-backdrop.open { display:block; opacity:1; } .mobile-nav { display:none; position:fixed; z-index:999; top:calc(var(--nav-h) + 10px); left:12px; right:12px; max-height:calc(100vh - var(--nav-h) - 22px); border-radius:var(--r-xl); background:var(--glass-bg); backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5); border:1px solid var(--glass-border); box-shadow:0 20px 60px rgba(7,12,20,0.22), inset 0 1px 1px rgba(255,255,255,0.5); opacity:0; transform:translateY(-14px) scale(0.97); transition:opacity 0.28s cubic-bezier(0.4,0,0.2,1), transform 0.28s cubic-bezier(0.4,0,0.2,1), visibility 0.28s; visibility:hidden; } .mobile-nav.open { display:block; visibility:visible; opacity:1; transform:translateY(0) scale(1); } .mobile-nav-inner { overflow-y:auto; max-height:calc(100vh - var(--nav-h) - 22px); padding:18px 18px 24px; position:relative; } .mobile-nav-close { position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; border:none; background:var(--surface-3); color:var(--text-2); display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; transition:var(--trans); } .mobile-nav-close:hover { background:var(--surface-3); color:var(--heading); transform:rotate(90deg); } .mobile-nav ul { display:flex; flex-direction:column; gap:3px; padding-right:36px; } .mobile-nav ul a { display:flex; align-items:center; gap:8px; padding:13px 14px; font-size:16px; font-weight:500; color:var(--text-2); border-radius:10px; position:relative; transition:background 0.2s, color 0.2s, padding-left 0.2s; } .mobile-nav ul a:hover { background:var(--surface-3); color:var(--heading); } .mobile-nav ul a.active, .mobile-nav ul li.current-menu-item > a, .mobile-nav ul li.current_page_item > a { background:linear-gradient(90deg, rgba(44,92,219,0.14), rgba(44,92,219,0.03)); color:var(--primary-d); font-weight:700; padding-left:20px; } .mobile-nav ul a.active::before, .mobile-nav ul li.current-menu-item > a::before, .mobile-nav ul li.current_page_item > a::before { content:''; position:absolute; left:6px; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:var(--primary); } .mobile-nav-parent { font-weight:600; } .mobile-nav-sub { padding-left:14px; margin:2px 0 4px; border-left:1px solid var(--border); margin-left:20px; } .mobile-nav-sub a { font-size:14px; padding:10px 12px; color:var(--text-l); } .mobile-nav-sub-icon { font-size:13px; } .mobile-nav-actions { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; } .mobile-nav-actions .btn { justify-content:center; } /* ══════════════════════════════════════ EMERGENCY BANNER ═══════════════════════════════════════ */ .emergency-bar { background:var(--inverse-bg); padding:10px 0; text-align:center; border-bottom:1px solid var(--inverse-border-soft); } .emergency-bar-inner { display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; font-size:13px; color:var(--on-inverse-muted); } .emergency-bar-inner a { color:var(--primary-d); font-weight:600; } .emergency-bar-inner a:hover { color:var(--primary); } .emergency-dot { width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse-green 2s infinite; display:inline-block; } /* ══════════════════════════════════════ HERO — SPLIT LAYOUT ═══════════════════════════════════════ */ .hero { min-height:calc(100vh - var(--nav-h)); background:var(--inverse-bg); position:relative; overflow:hidden; display:flex; align-items:center; } /* Soft halftone dot field — a quiet nod to print/ink rather than an engineering blueprint grid. Barely-there at rest, purely textural. */ .hero-bg-grid { position:absolute; inset:0; background-image:radial-gradient(var(--inverse-grid) 1.5px, transparent 1.5px); background-size:22px 22px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 30%, black 0%, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 70% 30%, black 0%, transparent 75%); } .hero-bg-glow { position:absolute; right:-320px; top:-280px; width:820px; height:820px; background:radial-gradient(circle, rgba(44,92,219,0.09) 0%, transparent 62%); pointer-events:none; } .hero-bg-glow-2 { position:absolute; left:-140px; bottom:-220px; width:560px; height:560px; background:radial-gradient(circle, rgba(0,172,193,0.07) 0%, transparent 62%); pointer-events:none; } .hero-content { position:relative; z-index:1; padding:80px 40px; display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center; width:100%; } .hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(44,92,219,0.08); border:1px solid rgba(44,92,219,0.2); border-radius:100px; padding:7px 16px 7px 14px; font-size:12.5px; font-weight:600; letter-spacing:0.2px; color:var(--primary-d); margin-bottom:26px; } .hero-dot { width:6px; height:6px; border-radius:50%; background:var(--primary); animation:hero-dot 2s infinite; display:block; } .hero-title { font-size:clamp(38px,4.6vw,58px); line-height:1.12; color:var(--on-inverse); letter-spacing:-0.015em; font-weight:700; margin-bottom:22px; } .hero-title .primary { color:var(--primary-d); } .hero-sub { font-size:17px; color:var(--on-inverse-muted); max-width:480px; line-height:1.75; margin-bottom:36px; } .hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:60px; } .hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding-top:40px; border-top:1px solid var(--inverse-border); } .hero-stat { padding-right:24px; border-right:1px solid var(--inverse-border); } .hero-stat:last-child { border:none; } .hero-stat-num { font-family:'Sora',sans-serif; font-size:36px; font-weight:800; color:var(--primary-d); line-height:1; } .hero-stat-label { font-size:11px; color:var(--on-inverse-faint); margin-top:4px; letter-spacing:0.2px; } /* Hero right — visual panel */ .hero-right { position:relative; display:flex; align-items:center; justify-content:center; } .hero-visual { position:relative; width:100%; max-width:520px; } .hero-video, .hero-photo { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border-radius:var(--r-xl); box-shadow:var(--shadow-xl); border:1px solid var(--inverse-border); } /* Illustration panel used in place of a photo/video until real product photography is available (see Appearance -> Customize to swap for a photo). */ .hero-illustration { width:100%; aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; border-radius:var(--r-xl); box-shadow:var(--shadow-xl); border:1px solid var(--inverse-border); background:linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%); padding:12%; overflow:hidden; } .hero-illustration svg { width:100%; height:100%; } /* These badges always float over a busy photo/video, in both themes — so they carry their own fixed dark-glass background rather than theme tokens, which kept washing out against light/high-contrast footage. */ .hero-card { position:absolute; background:rgba(7,12,20,0.62); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:16px 22px; box-shadow:0 12px 32px rgba(7,12,20,0.28); transition:box-shadow 0.3s; } .hero-card:hover { box-shadow:0 18px 40px rgba(7,12,20,0.4); } .hero-card-val { font-family:'Sora',sans-serif; font-size:28px; font-weight:800; color:var(--primary-b); line-height:1; } .hero-card-label { font-size:11px; color:rgba(255,255,255,0.72); margin-top:3px; } .hero-card-1 { top:10%; left:-5%; animation:float 4s ease-in-out infinite; } .hero-card-2 { bottom:20%; right:-5%; animation:float 4.5s ease-in-out infinite 0.5s; } .hero-card-3 { top:50%; left:0%; transform:translateY(-50%); animation:float 5s ease-in-out infinite 1s; } .hero-availability { display:flex; align-items:center; gap:8px; background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.25); border-radius:100px; padding:6px 14px; margin-top:12px; font-size:12px; font-weight:600; color:#059669; width:fit-content; } .hero-avail-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse-green 2s infinite; } /* Page hero (inner pages) */ .page-hero { padding:80px 0 60px; background:var(--inverse-bg); position:relative; overflow:hidden; } .page-hero::before { content:''; position:absolute; inset:0; background-image:radial-gradient(var(--inverse-grid) 1.5px, transparent 1.5px); background-size:22px 22px; -webkit-mask-image:radial-gradient(ellipse 60% 100% at 85% 0%, black 0%, transparent 70%); mask-image:radial-gradient(ellipse 60% 100% at 85% 0%, black 0%, transparent 70%); } /* Real project/equipment photo, faded in from the right — desktop only, never fights the heading for contrast */ .page-hero-photo { position:absolute; top:0; right:0; bottom:0; width:48%; background-size:cover; background-position:center; -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 24%, black 45%); mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 24%, black 45%); opacity:0.92; } html[data-theme="dark"] .page-hero-photo { opacity:0.5; } @media(max-width:900px) { .page-hero-photo { display:none; } } .page-hero-content { position:relative; z-index:1; } .page-hero-breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--on-inverse-faint); margin-bottom:20px; } .page-hero-breadcrumb a { color:var(--on-inverse-faint); transition:color 0.2s; } .page-hero-breadcrumb a:hover { color:var(--primary-d); } .page-hero-breadcrumb span { color:var(--on-inverse-dim); } .page-hero-badge { display:inline-block; background:var(--primary); padding:3px 12px; border-radius:3px; font-size:10.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff; margin-bottom:16px; } .page-hero-title { font-size:clamp(34px,5vw,64px); color:var(--on-inverse); margin-bottom:16px; } .page-hero-sub { font-size:17px; color:var(--on-inverse-muted); max-width:560px; line-height:1.75; } .page-hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; } /* ══════════════════════════════════════ TICKER ═══════════════════════════════════════ */ .ticker { background:var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; padding:0; user-select:none; } .ticker-track { display:flex; animation:ticker 34s linear infinite; white-space:nowrap; } .ticker-item { display:flex; align-items:center; gap:14px; padding:13px 26px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.1px; color:var(--text-2); } .ticker-sep { opacity:0.5; font-size:9px; color:var(--primary); } /* ══════════════════════════════════════ TRUST / CERT BAR ═══════════════════════════════════════ */ .trust-bar { background:var(--surface); border-bottom:1px solid var(--border); padding:0; } .trust-bar-grid { display:grid; grid-template-columns:repeat(6, 1fr); } .trust-badge { display:flex; align-items:center; gap:12px; padding:22px 18px; border-right:1px solid var(--border); font-size:13px; font-weight:600; color:var(--text-m); transition:background 0.25s, color 0.25s; } .trust-badge:hover { background:var(--surface-2); color:var(--heading); } .trust-badge:last-child, .trust-badge:nth-child(6n) { border-right:none; } .trust-badge-icon { width:38px; height:38px; border-radius:9px; background:var(--surface-3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); } .trust-badge:hover .trust-badge-icon { transform:scale(1.12) rotate(-4deg); border-color:rgba(44,92,219,0.3); } /* ══════════════════════════════════════ STATS BAND ═══════════════════════════════════════ */ .stats-band { background:var(--primary); padding:64px 0; position:relative; overflow:hidden; } .stats-band::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient( -45deg, transparent, transparent 10px, rgba(0,0,0,0.03) 10px, rgba(0,0,0,0.03) 20px ); } .stats-band-grid { display:grid; grid-template-columns:repeat(4,1fr); text-align:center; position:relative; z-index:1; } .stat-item { padding:0 24px; border-right:1px solid rgba(255,255,255,0.2); } .stat-item:last-child { border:none; } .stat-num { font-family:'Sora',sans-serif; font-size:clamp(52px,6vw,72px); font-weight:800; color:#fff; line-height:1; } .stat-label { font-size:13px; font-weight:600; color:rgba(255,255,255,0.75); margin-top:6px; } /* ══════════════════════════════════════ COMPANY CARDS ═══════════════════════════════════════ */ .services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .service-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:40px; position:relative; overflow:hidden; transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s, border-color 0.3s; } .service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); } .service-card::after { content:''; position:absolute; inset:0; border-radius:var(--r-lg); transition:box-shadow 0.3s; pointer-events:none; } .service-card:hover { border-color:rgba(44,92,219,0.35); box-shadow:0 20px 60px rgba(44,92,219,0.10); } .service-card-top-bar { position:absolute; top:0; left:0; right:0; height:3px; } .service-card-header { display:flex; align-items:flex-start; gap:16px; margin-bottom:24px; } .service-card-icon-wrap { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } /* Per-service icon tints — a nod to the four process-printing inks */ .icon-primary { background:#E3EAFC; } .icon-cy { background:#DEF4F8; } .icon-mg { background:#FBE0EC; } .icon-yl { background:#FBF3D0; } .icon-key { background:#E7E9ED; } .bar-primary { background:var(--primary); } .bar-cy { background:var(--cy); } .bar-mg { background:var(--mg); } .bar-yl { background:var(--yl); } .bar-key { background:var(--key); } .service-card-name { font-family:'Sora',sans-serif; font-size:23px; font-weight:800; color:var(--heading); margin-bottom:2px; line-height:1.1; } .service-card-tag { font-size:12px; color:var(--text-l); font-weight:500; } .service-card-services { display:flex; flex-direction:column; gap:9px; margin-bottom:24px; } .service-card-service { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-m); line-height:1.4; } .service-dot { width:5px; height:5px; border-radius:1px; background:var(--primary); flex-shrink:0; margin-top:5px; } .service-card-footer { padding-top:20px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; } .stat-val { font-family:'Sora',sans-serif; font-size:24px; font-weight:800; color:var(--heading); line-height:1; } .stat-key { font-size:10.5px; color:var(--text-l); font-weight:500; text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; } .service-card-link { font-size:13px; font-weight:600; color:var(--primary-d); display:flex; align-items:center; gap:5px; transition:gap 0.2s, color 0.2s; } .service-card-link:hover { gap:10px; color:var(--primary-dk); } /* Card SVG icons */ .card-icon-svg { width:28px; height:28px; } /* ══════════════════════════════════════ FEATURE GRID ═══════════════════════════════════════ */ .features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .feature-card { background:var(--surface); padding:40px; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s, border-color 0.35s; position:relative; } .feature-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(44,92,219,0.3); } .feature-card:hover .feature-icon-box { transform:scale(1.12) rotate(-4deg); background:rgba(44,92,219,0.16); } .feature-icon-box { width:52px; height:52px; border-radius:12px; background:rgba(44,92,219,0.1); border:1px solid rgba(44,92,219,0.2); display:flex; align-items:center; justify-content:center; margin-bottom:18px; transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), background 0.3s; } .feature-icon-box svg { width:24px; height:24px; } .feature-title { font-family:'Sora',sans-serif; font-size:20px; font-weight:800; color:var(--heading); margin-bottom:10px; } .feature-desc { font-size:14px; color:var(--text-m); line-height:1.72; } /* ══════════════════════════════════════ INDUSTRIES ═══════════════════════════════════════ */ .industries-grid { display:flex; flex-wrap:wrap; gap:10px; } .industry-chip { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:100px; background:var(--surface); border:1px solid var(--border); font-size:14px; font-weight:500; color:var(--text-2); transition:var(--trans); cursor:default; } .industry-chip:hover { border-color:var(--primary); color:var(--heading); box-shadow:0 2px 12px rgba(44,92,219,0.1); background:rgba(44,92,219,0.05); } .industry-dot { width:7px; height:7px; border-radius:50%; background:var(--primary); opacity:0.6; } /* ══════════════════════════════════════ EQUIPMENT CARDS ═══════════════════════════════════════ */ .equipment-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .equipment-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s; } .equipment-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(44,92,219,0.35); } .equipment-card-visual { height:230px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:var(--surface-2); } .equipment-card-visual img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s cubic-bezier(0.16,1,0.3,1); } .equipment-card:hover .equipment-card-visual img { transform:scale(1.08); } .equipment-card-visual .placeholder-icon { font-size:64px; } .equipment-card-status { position:absolute; top:14px; right:14px; } .status-available { display:flex; align-items:center; gap:5px; background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.3); border-radius:100px; padding:4px 10px; font-size:11px; font-weight:600; color:#059669; } .status-dot { width:5px; height:5px; border-radius:50%; background:var(--green); animation:pulse-green 2s infinite; } .status-busy { background:rgba(44,92,219,0.1); border-color:rgba(44,92,219,0.3); color:var(--primary-d); } .equipment-card-body { padding:22px 24px; } .equipment-num { font-size:10.5px; font-weight:700; letter-spacing:2px; color:var(--primary-d); text-transform:uppercase; margin-bottom:8px; } .equipment-name { font-family:'Sora',sans-serif; font-size:21px; font-weight:800; color:var(--heading); margin-bottom:4px; } .equipment-capacity { font-size:14px; font-weight:600; color:var(--primary-d); margin-bottom:12px; } .equipment-desc { font-size:13.5px; color:var(--text-m); line-height:1.65; } .equipment-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; } .equipment-tag { font-size:11px; padding:3px 10px; border-radius:3px; background:var(--surface-3); color:var(--text-l); font-weight:500; } .equipment-specs { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); } .spec-key { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-l); } .spec-val { font-size:13.5px; font-weight:600; color:var(--heading); margin-top:2px; } /* ══════════════════════════════════════ PROJECT CARDS (on inverse section) ═══════════════════════════════════════ */ .projects-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .project-card { background:var(--inverse-card); border:1px solid var(--inverse-border-soft); border-radius:var(--r-lg); padding:36px; overflow:hidden; transition:background 0.3s, border-color 0.3s, transform 0.3s; } .project-img { height:220px; margin:-36px -36px 28px; overflow:hidden; } .project-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s cubic-bezier(0.16,1,0.3,1); } .project-card:hover { background:var(--inverse-card-2); border-color:rgba(44,92,219,0.25); transform:translateY(-6px); box-shadow:var(--shadow-lg); } .project-card:hover .project-img img { transform:scale(1.08); } .project-num { font-family:'Sora',sans-serif; font-size:64px; font-weight:800; color:rgba(44,92,219,0.16); line-height:1; margin-bottom:-8px; } .project-name { font-family:'Sora',sans-serif; font-size:22px; font-weight:800; color:var(--on-inverse); margin-bottom:16px; } .project-meta { display:flex; flex-wrap:wrap; gap:24px; margin-bottom:16px; } .project-meta-key { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--on-inverse-dim); } .project-meta-val { font-size:13px; color:var(--on-inverse-muted); margin-top:2px; } .project-desc { font-size:14px; color:var(--on-inverse-faint); line-height:1.72; margin-bottom:16px; } .project-done { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--green); } .project-done::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); display:block; } /* ══════════════════════════════════════ TESTIMONIALS ═══════════════════════════════════════ */ .testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .testimonial-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:36px; display:flex; flex-direction:column; gap:20px; transition:box-shadow 0.3s, border-color 0.3s, transform 0.3s; } .testimonial-card:hover { box-shadow:var(--shadow-lg); border-color:rgba(44,92,219,0.3); transform:translateY(-4px); } .testimonial-quote { font-family:'Sora',sans-serif; font-size:72px; font-weight:800; color:var(--primary); opacity:0.2; line-height:0.5; margin-bottom:4px; } .testimonial-text { font-size:15px; color:var(--text-m); line-height:1.82; flex:1; font-style:italic; } .testimonial-stars { display:flex; gap:2px; color:var(--primary); font-size:13px; } .testimonial-author { border-top:1px solid var(--border); padding-top:18px; } .testimonial-name { font-weight:700; color:var(--heading); font-size:15px; } .testimonial-role { font-size:12px; color:var(--text-l); margin-top:2px; } /* ══════════════════════════════════════ CTA BAND ═══════════════════════════════════════ */ .cta-section { background:var(--inverse-bg-2); padding:96px 0; text-align:center; position:relative; overflow:hidden; } .cta-section::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(44,92,219,0.07) 1px, transparent 1px); background-size:30px 30px; } .cta-section .container { position:relative; z-index:1; } .cta-title { font-size:clamp(34px,5vw,60px); color:var(--on-inverse); margin-bottom:16px; } .cta-sub { font-size:17px; color:var(--on-inverse-muted); margin-bottom:36px; } .cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } /* A CTA with a real photo behind it is always dark (photo + scrim), regardless of site theme — so its text/buttons must stay white-on-dark even in light mode. */ .cta-section.has-photo .eyebrow.on-dark { color:var(--primary-b); } .cta-section.has-photo .cta-title { color:#fff; } .cta-section.has-photo .cta-sub { color:rgba(255,255,255,0.62); } .cta-section.has-photo .btn-outline-light { color:#fff; border-color:rgba(255,255,255,0.3); } .cta-section.has-photo .btn-outline-light:hover { background:rgba(255,255,255,0.1); } /* ══════════════════════════════════════ CONTACT ═══════════════════════════════════════ */ .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; } /* Contact-ways bar (below the hero) — real classes so it wraps cleanly on phones */ .contact-ways-bar { background:var(--surface); border-bottom:1px solid var(--border); padding:20px 0; } .contact-ways-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; } .contact-way { display:flex; align-items:center; gap:12px; padding:14px 22px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); color:var(--heading); font-weight:600; text-decoration:none; transition:border-color 0.2s; } .contact-way a { color:inherit; } .contact-way-link:hover { border-color:var(--primary); } .contact-way-wa { background:rgba(37,211,102,0.06); border-color:rgba(37,211,102,0.3); } .contact-way-wa:hover { border-color:#25D366; } .contact-way-emoji { font-size:20px; } .contact-way-label { font-size:12px; color:var(--text-l); font-weight:500; } .contact-way-sm { font-size:13px; } .contact-way-wa-text { color:#16A34A; } @media(max-width:520px) { .contact-ways-row { flex-direction:column; align-items:stretch; } .contact-way { justify-content:flex-start; } .contact-way-sm { word-break:break-all; } } /* Contact quick-links grid (4 division cards at the bottom) */ .contact-quicklinks-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .contact-quicklink { display:flex; flex-direction:column; align-items:center; gap:12px; padding:32px 20px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); text-align:center; text-decoration:none; transition:border-color 0.25s, transform 0.25s, box-shadow 0.25s; } .contact-quicklink:hover { transform:translateY(-4px); box-shadow:var(--shadow); } .contact-quicklink.ql-primary:hover { border-color:var(--primary); } .contact-quicklink.ql-blue:hover { border-color:var(--blue); } .contact-quicklink.ql-green:hover { border-color:var(--green); } .contact-quicklink.ql-red:hover { border-color:var(--red); } .contact-quicklink-icon { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:24px; } .contact-quicklink-name { font-family:'Sora',sans-serif; font-size:18px; font-weight:800; color:var(--heading); } .contact-quicklink-sub { font-size:13px; color:var(--text-l); } @media(max-width:800px) { .contact-quicklinks-grid { grid-template-columns:repeat(2,1fr); } } @media(max-width:420px) { .contact-quicklinks-grid { grid-template-columns:1fr; } } /* Contact page map — responsive, fills its container at any width */ .contact-map { width:100%; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); } .contact-map iframe { display:block; width:100%; height:400px; border:0; } @media(max-width:600px) { .contact-map iframe { height:300px; } } .contact-info-list { display:flex; flex-direction:column; gap:24px; margin-top:32px; } .contact-info-item { display:flex; gap:16px; align-items:flex-start; transition:transform 0.3s cubic-bezier(0.16,1,0.3,1); } .contact-info-item:hover { transform:translateX(4px); } .contact-icon { width:44px; height:44px; border-radius:10px; background:var(--surface-3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), background 0.3s, border-color 0.3s; } .contact-info-item:hover .contact-icon { transform:scale(1.1) rotate(-4deg); background:rgba(44,92,219,0.12); border-color:rgba(44,92,219,0.3); } .contact-info-label { font-size:10.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-l); margin-bottom:4px; } .contact-info-val { font-size:15px; color:var(--text-m); } .contact-info-val a { color:var(--primary-d); font-weight:600; } .contact-info-val a:hover { text-decoration:underline; } .contact-wa-block { margin-top:32px; padding:24px; border-radius:var(--r-lg); background:rgba(37,211,102,0.06); border:1px solid rgba(37,211,102,0.2); display:flex; align-items:center; gap:16px; } .contact-wa-icon { width:48px; height:48px; background:#25D366; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .contact-wa-btn { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:13px; font-weight:600; color:#16A34A; background:rgba(37,211,102,0.1); border:1px solid rgba(37,211,102,0.3); padding:8px 16px; border-radius:6px; cursor:pointer; transition:var(--trans); } .contact-wa-btn:hover { background:rgba(37,211,102,0.15); } .form-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:48px; box-shadow:var(--shadow-xl); } .form-box-title { font-family:'Sora',sans-serif; font-size:28px; font-weight:800; color:var(--heading); margin-bottom:6px; } .form-box-sub { font-size:14px; color:var(--text-m); margin-bottom:20px; } /* Incentive callout above the inquiry form — tells visitors the brochure unlocks after they submit. */ .form-brochure-note { display:flex; align-items:center; gap:12px; margin-bottom:26px; padding:14px 16px; background:rgba(44,92,219,0.08); border:1px solid rgba(44,92,219,0.28); border-radius:10px; font-size:13.5px; color:var(--text-m); line-height:1.5; } .form-brochure-note svg { flex-shrink:0; color:var(--primary-d); } .form-brochure-note strong { color:var(--heading); } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; } .form-label { font-size:11.5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--text-l); } .form-input, .form-select, .form-textarea { width:100%; font-family:'Inter',sans-serif; font-size:14px; color:var(--text); background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--r-sm); padding:12px 16px; outline:none; transition:border-color 0.2s, box-shadow 0.2s, background 0.2s; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(44,92,219,0.12); background:var(--surface); } .form-input::placeholder, .form-textarea::placeholder { color:var(--text-l); } .form-select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; } .form-textarea { resize:vertical; min-height:120px; } .form-submit { width:100%; justify-content:center; margin-top:4px; } .form-error { font-size:13px; color:var(--red); margin-bottom:12px; display:none; padding:10px 14px; background:rgba(239,68,68,0.06); border-radius:6px; border:1px solid rgba(239,68,68,0.2); } .form-success-msg { display:none; text-align:center; padding:40px 20px; } .form-success-icon { font-size:52px; margin-bottom:16px; } .form-success-title { font-family:'Sora',sans-serif; font-size:28px; font-weight:800; color:var(--green); margin-bottom:8px; } .form-success-sub { font-size:15px; color:var(--text-m); } /* ══════════════════════════════════════ ABOUT PAGE ═══════════════════════════════════════ */ .about-intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .about-big-num { font-family:'Sora',sans-serif; font-size:clamp(100px,14vw,160px); font-weight:800; color:var(--surface-3); line-height:1; margin-bottom:-32px; } /* Division link cards (About page group-structure grid) */ .division-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; } .division-card { display:block; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; box-shadow:var(--shadow-sm); transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s, border-color 0.35s; } .division-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); } .division-card.dc-primary:hover { border-color:rgba(44,92,219,0.4); } .division-card.dc-blue:hover { border-color:rgba(59,130,246,0.4); } .division-card.dc-green:hover { border-color:rgba(16,185,129,0.4); } .division-card.dc-red:hover { border-color:rgba(239,68,68,0.4); } .division-media { height:200px; overflow:hidden; } .division-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s cubic-bezier(0.16,1,0.3,1); } .division-card:hover .division-media img { transform:scale(1.08); } .division-body { padding:24px 32px 32px; } .division-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); } .division-card:hover .division-icon { transform:scale(1.1) rotate(-4deg); } .division-link { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; transition:gap 0.2s; } .division-card:hover .division-link { gap:10px; } .values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .value-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px; text-align:center; transition:box-shadow 0.3s, border-color 0.3s, transform 0.3s; } .value-card:hover { box-shadow:var(--shadow-lg); border-color:rgba(44,92,219,0.3); transform:translateY(-6px); } .value-icon { width:56px; height:56px; border-radius:12px; background:rgba(44,92,219,0.08); border:1px solid rgba(44,92,219,0.15); display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 16px; transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), background 0.3s; } .value-card:hover .value-icon { transform:scale(1.12) rotate(-4deg); background:rgba(44,92,219,0.16); } .value-title { font-family:'Sora',sans-serif; font-size:20px; font-weight:800; color:var(--heading); margin-bottom:8px; } .value-desc { font-size:14px; color:var(--text-m); line-height:1.72; } .team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .team-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px; text-align:center; transition:box-shadow 0.3s, transform 0.3s; } .team-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-6px); } .team-avatar { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-size:28px; font-weight:800; margin:0 auto 16px; overflow:hidden; } .team-avatar img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s cubic-bezier(0.16,1,0.3,1); } .team-card:hover .team-avatar img { transform:scale(1.1); } .team-name { font-family:'Sora',sans-serif; font-size:20px; font-weight:800; color:var(--heading); } .team-role { font-size:13px; color:var(--text-l); margin-top:4px; } /* Service detail pages */ .service-list { display:flex; flex-direction:column; gap:12px; } .service-list-item { display:flex; gap:16px; align-items:flex-start; padding:20px 24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); transition:border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .service-list-item:hover { border-color:rgba(44,92,219,0.4); box-shadow:var(--shadow); transform:translateX(6px); } .service-list-icon { width:44px; height:44px; border-radius:10px; background:rgba(44,92,219,0.1); border:1px solid rgba(44,92,219,0.2); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); } .service-list-item:hover .service-list-icon { transform:scale(1.1) rotate(-4deg); } .service-list-name { font-family:'Sora',sans-serif; font-size:19px; font-weight:800; color:var(--heading); margin-bottom:4px; } .service-list-desc { font-size:13.5px; color:var(--text-m); line-height:1.65; } .capacity-table { width:100%; border-collapse:collapse; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); } .capacity-table th { background:var(--heading); color:var(--bg); text-align:left; padding:14px 20px; font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; } .capacity-table td { padding:14px 20px; font-size:14px; color:var(--text-m); border-bottom:1px solid var(--border); background:var(--surface); } .capacity-table tr:last-child td { border:none; } .capacity-table tr:nth-child(even) td { background:var(--surface-2); } .capacity-table td:first-child { font-weight:600; color:var(--heading); } .capacity-table td .primary-val { color:var(--primary-d); font-weight:700; } /* ══════════════════════════════════════ CAPACITY FINDER (Interactive) ═══════════════════════════════════════ */ .capacity-finder { background:var(--inverse-bg); border-radius:var(--r-xl); padding:48px; border:1px solid var(--inverse-border); } .capacity-finder-title { font-family:'Sora',sans-serif; font-size:32px; font-weight:800; color:var(--on-inverse); margin-bottom:8px; } .capacity-finder-sub { font-size:15px; color:var(--on-inverse-muted); margin-bottom:32px; } .finder-form { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:12px; align-items:end; } .finder-form .form-label { color:var(--on-inverse-muted); } .finder-form .form-input, .finder-form .form-select { background:var(--inverse-card); border-color:var(--inverse-border); color:var(--on-inverse); } .finder-form .form-input:focus, .finder-form .form-select:focus { border-color:var(--primary); background:var(--inverse-card-2); } .finder-form .form-input::placeholder { color:var(--on-inverse-dim); } .finder-form .form-select option { background:var(--surface); color:var(--text); } .finder-result { margin-top:24px; padding:24px; border-radius:var(--r); background:rgba(44,92,219,0.08); border:1px solid rgba(44,92,219,0.2); display:none; } .finder-result.show { display:block; } .finder-result-label { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--primary-d); margin-bottom:8px; } .finder-result-title { font-family:'Sora',sans-serif; font-size:28px; font-weight:800; color:var(--on-inverse); margin-bottom:8px; } .finder-result-desc { font-size:14px; color:var(--on-inverse-muted); line-height:1.7; } .finder-result-cta { display:flex; gap:12px; margin-top:16px; } /* ══════════════════════════════════════ TWO-COL ═══════════════════════════════════════ */ .two-col { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; } .two-col-reverse { direction:rtl; } .two-col-reverse > * { direction:ltr; } .visual-block { background:var(--surface-3); border-radius:var(--r-xl); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; } .visual-block img { width:100%; height:100%; object-fit:cover; } .visual-block-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(44,92,219,0.07) 0%, transparent 60%); } .visual-block-placeholder { font-size:80px; opacity:0.3; } .visual-block-badge { position:absolute; bottom:16px; left:16px; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:12px 18px; } .visual-block-badge-val { font-family:'Sora',sans-serif; font-size:28px; font-weight:800; color:var(--primary); line-height:1; } .visual-block-badge-label { font-size:11px; color:rgba(255,255,255,0.5); margin-top:2px; } /* ══════════════════════════════════════ CATALOGUE DOWNLOAD SECTION ═══════════════════════════════════════ */ .catalogue-block { background:var(--inverse-bg); border-radius:var(--r-xl); padding:48px; display:flex; align-items:center; justify-content:space-between; gap:32px; border:1px solid var(--inverse-border); } .catalogue-icon { width:80px; height:80px; background:rgba(44,92,219,0.12); border:1px solid rgba(44,92,219,0.25); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:36px; flex-shrink:0; } .catalogue-title { font-family:'Sora',sans-serif; font-size:28px; font-weight:800; color:var(--on-inverse); margin-bottom:8px; } .catalogue-sub { font-size:14px; color:var(--on-inverse-muted); line-height:1.7; max-width:400px; } .catalogue-actions { display:flex; gap:12px; flex-shrink:0; flex-wrap:wrap; } /* ══════════════════════════════════════ SERVICES PAGE — DIVISION OVERVIEW CARDS (2-col desktop, collapses to 1 col on mobile — must be real CSS classes, not inline styles, so the breakpoint can actually take effect) ═══════════════════════════════════════ */ .service-division-card { border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; margin-bottom:24px; } .service-division-grid { display:grid; grid-template-columns:1fr 1fr; } .service-division-panel { padding:48px; background:var(--surface); } .service-division-photo { padding:48px; display:flex; flex-direction:column; justify-content:space-between; background-size:cover; background-position:center; } @media(max-width:900px) { .service-division-grid { grid-template-columns:1fr; } .service-division-text { order:1; } .service-division-capabilities { order:2; } .service-division-panel, .service-division-photo { padding:32px 28px; } } @media(max-width:480px) { .service-division-panel, .service-division-photo { padding:24px 20px; } } /* ══════════════════════════════════════ PROCESS STEPS GRID ═══════════════════════════════════════ */ .process-steps-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:48px; position:relative; } .process-steps-grid.steps-4 { grid-template-columns:repeat(4,1fr); } .process-steps-line { position:absolute; top:28px; left:10%; right:10%; height:2px; background:linear-gradient(90deg,var(--primary),rgba(44,92,219,0.2)); z-index:0; } .process-step { text-align:center; padding:0 16px; position:relative; z-index:1; } .process-step-num { width:56px; height:56px; border-radius:50%; margin:0 auto 18px; background:var(--surface); border:2px solid var(--primary); display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-size:22px; font-weight:800; color:var(--primary-d); } .process-step-title { font-family:'Sora',sans-serif; font-size:18px; font-weight:800; color:var(--heading); margin-bottom:8px; } .process-step-desc { font-size:13.5px; color:var(--text-m); line-height:1.65; } @media(max-width:700px) { .process-steps-grid, .process-steps-grid.steps-4 { grid-template-columns:1fr; gap:28px; margin-top:32px; } .process-steps-line { display:none; } .process-step { padding:0 8px; } } /* ══════════════════════════════════════ INK-DOT BRAND MARK — small CMYK registration-mark motif used in the nav brand, hero badge, and footer as a recurring "printing" visual signature. ═══════════════════════════════════════ */ .ink-dots { display:inline-grid; grid-template-columns:repeat(2,1fr); gap:3px; width:18px; height:18px; flex-shrink:0; } .ink-dots span { border-radius:50%; } .ink-dots span:nth-child(1) { background:var(--cy); } .ink-dots span:nth-child(2) { background:var(--mg); } .ink-dots span:nth-child(3) { background:var(--yl); } .ink-dots span:nth-child(4) { background:var(--key); } .ink-dots.lg { width:28px; height:28px; gap:4px; } /* ══════════════════════════════════════ GALLERY / PORTFOLIO GRID ═══════════════════════════════════════ */ .gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .gallery-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s; } .gallery-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(44,92,219,0.3); } .gallery-card-visual { height:190px; display:flex; align-items:center; justify-content:center; font-size:52px; position:relative; overflow:hidden; } .gallery-card-body { padding:22px 24px; } .gallery-card-cat { font-size:10.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--primary-d); margin-bottom:6px; } .gallery-card-name { font-family:'Sora',sans-serif; font-size:19px; font-weight:800; color:var(--heading); margin-bottom:4px; } .gallery-card-desc { font-size:13px; color:var(--text-m); line-height:1.6; } @media(max-width:900px) { .gallery-grid { grid-template-columns:repeat(2,1fr); } } @media(max-width:560px) { .gallery-grid { grid-template-columns:1fr; } } /* 3-tile mini stat grid used on division pages (below the intro visual) */ .mini-stat-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; } @media(max-width:380px) { .mini-stat-grid-3 { gap:8px; } } /* ══════════════════════════════════════ CERTIFICATIONS ═══════════════════════════════════════ */ .cert-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .cert-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px; text-align:center; transition:border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .cert-card:hover { border-color:rgba(44,92,219,0.3); box-shadow:var(--shadow); transform:translateY(-5px); } .cert-badge-icon { width:56px; height:56px; border-radius:50%; margin:0 auto 12px; background:rgba(44,92,219,0.08); border:2px solid rgba(44,92,219,0.2); display:flex; align-items:center; justify-content:center; font-size:24px; transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); } .cert-card:hover .cert-badge-icon { transform:scale(1.12); } .cert-name { font-family:'Sora',sans-serif; font-size:18px; font-weight:800; color:var(--heading); margin-bottom:4px; } .cert-desc { font-size:12px; color:var(--text-l); line-height:1.5; } /* ══════════════════════════════════════ WHATSAPP FLOAT BUTTON ═══════════════════════════════════════ */ .wa-float { position:fixed; bottom:28px; right:28px; z-index:9999; display:flex; align-items:center; gap:0; filter:drop-shadow(0 4px 16px rgba(37,211,102,0.35)); } .wa-float-btn { width:56px; height:56px; border-radius:50%; background:#25D366; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform 0.3s, filter 0.3s; animation:pulse-green 2.5s infinite; } .wa-float-btn:hover { transform:scale(1.12); filter:brightness(1.08); } .wa-float-btn svg { width:28px; height:28px; } .wa-float-label { background:var(--heading); color:var(--bg); font-size:13px; font-weight:600; padding:8px 14px; border-radius:8px; white-space:nowrap; margin-right:12px; opacity:0; transform:translateX(10px); transition:opacity 0.25s, transform 0.25s; pointer-events:none; } .wa-float:hover .wa-float-label { opacity:1; transform:translateX(0); } /* ══════════════════════════════════════ QUICK QUOTE MODAL ═══════════════════════════════════════ */ .qq-overlay { position:fixed; inset:0; background:rgba(7,12,20,0.75); backdrop-filter:blur(4px); z-index:10000; opacity:0; visibility:hidden; transition:opacity 0.3s, visibility 0.3s; display:flex; align-items:center; justify-content:center; padding:24px; } .qq-overlay.open { opacity:1; visibility:visible; } .qq-modal { background:var(--surface); border-radius:var(--r-xl); max-width:560px; width:100%; padding:48px; position:relative; transform:translateY(24px) scale(0.97); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); max-height:90vh; overflow-y:auto; } .qq-overlay.open .qq-modal { transform:translateY(0) scale(1); } .qq-close { position:absolute; top:20px; right:20px; width:36px; height:36px; border-radius:50%; background:var(--surface-3); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-l); font-size:18px; line-height:1; transition:var(--trans); } .qq-close:hover { background:var(--border); color:var(--heading); } .qq-header { margin-bottom:28px; } .qq-title { font-family:'Sora',sans-serif; font-size:30px; font-weight:800; color:var(--heading); margin-bottom:6px; } .qq-sub { font-size:14px; color:var(--text-m); } .qq-wa-alt { margin-top:20px; padding:16px; background:rgba(37,211,102,0.06); border:1px solid rgba(37,211,102,0.2); border-radius:var(--r); display:flex; align-items:center; gap:12px; font-size:14px; color:var(--text-m); } .qq-wa-link { color:#16A34A; font-weight:600; } .qq-wa-link:hover { text-decoration:underline; } .qq-success { display:none; text-align:center; padding:32px 0; } .qq-success-icon { font-size:48px; margin-bottom:16px; } .qq-success-title { font-family:'Sora',sans-serif; font-size:26px; font-weight:800; color:var(--green); margin-bottom:8px; } .qq-success-sub { font-size:15px; color:var(--text-m); } /* ══════════════════════════════════════ FOOTER — always dark, in both themes. Same reasoning as the photo-backed CTAs and floating hero badges: this surface carries its own fixed dark-glass palette rather than theme tokens, for one strong, consistent brand moment at the base of every page regardless of site theme. ═══════════════════════════════════════ */ .site-footer { background:linear-gradient(175deg, #121924 0%, #070A11 100%); position:relative; overflow:hidden; padding:0 0 32px; } .site-footer::before { content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size:46px 46px; -webkit-mask-image:linear-gradient(180deg, black, transparent 70%); mask-image:linear-gradient(180deg, black, transparent 70%); } .site-footer::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent, var(--primary-b) 25%, var(--primary) 50%, var(--primary-b) 75%, transparent); opacity:0.9; } .footer-main { padding-top:64px; position:relative; z-index:1; } /* Trust highlights strip — adds substance to the top of the footer without repeating the page-level CTA. */ .footer-highlights { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-bottom:44px; margin-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.08); } .footer-highlight { display:flex; align-items:center; gap:14px; } .footer-highlight-icon { width:44px; height:44px; border-radius:11px; flex-shrink:0; background:rgba(44,92,219,0.10); border:1px solid rgba(44,92,219,0.22); display:flex; align-items:center; justify-content:center; color:var(--primary-b); } .footer-highlight-icon svg { width:20px; height:20px; } .footer-highlight-title { font-size:14px; font-weight:700; color:#fff; line-height:1.25; } .footer-highlight-sub { font-size:12px; color:rgba(255,255,255,0.42); margin-top:2px; } @media(max-width:900px) { .footer-highlights { grid-template-columns:repeat(2,1fr); gap:24px 20px; } } @media(max-width:480px) { .footer-highlights { grid-template-columns:1fr; gap:18px; padding-bottom:32px; margin-bottom:32px; } } .footer-grid { display:grid; grid-template-columns:300px 1fr 1fr 1fr; gap:48px; margin-bottom:52px; } .footer-logo { height:66px; width:auto; max-width:320px; object-fit:contain; object-position:left center; margin-bottom:22px; } .footer-brand-icon { width:44px; height:44px; background:var(--primary); border-radius:7px; display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-size:16px; font-weight:800; color:#fff; margin-bottom:14px; } .footer-brand-name { font-family:'Sora',sans-serif; font-size:19px; font-weight:800; color:#fff; margin-bottom:4px; } .footer-brand-name strong { color:var(--primary-b); } .footer-tagline { font-size:13.5px; color:rgba(255,255,255,0.48); line-height:1.85; margin-top:8px; margin-bottom:26px; max-width:260px; } .footer-social { display:flex; gap:10px; } .footer-social a { width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.55); font-size:13px; font-weight:700; transition:var(--trans); } .footer-social a:hover { background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-3px); box-shadow:0 10px 24px rgba(44,92,219,0.32); } .footer-col-title { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.32); margin-bottom:10px; } .footer-col-accent { width:26px; height:2.5px; background:var(--primary); border-radius:2px; margin-bottom:20px; display:block; } .footer-links { display:flex; flex-direction:column; gap:12px; } .footer-links a { font-size:14.5px; color:rgba(255,255,255,0.6); transition:color 0.2s, transform 0.2s; display:inline-block; } .footer-links a:hover { color:var(--primary-b); transform:translateX(3px); } .footer-contact-item { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; } .footer-contact-icon { width:32px; height:32px; border-radius:8px; flex-shrink:0; margin-top:1px; background:rgba(44,92,219,0.12); border:1px solid rgba(44,92,219,0.2); display:flex; align-items:center; justify-content:center; color:var(--primary-b); } .footer-contact-icon svg { width:15px; height:15px; } .footer-contact-item > span:not(.footer-contact-icon) { font-size:13.5px; color:rgba(255,255,255,0.52); line-height:1.65; } .footer-contact-item a { color:rgba(255,255,255,0.72); font-weight:500; } .footer-contact-item a:hover { color:var(--primary-b); } .footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; position:relative; z-index:1; } .footer-copy { font-size:13px; color:rgba(255,255,255,0.32); } .footer-copy strong { color:rgba(255,255,255,0.55); } .footer-bottom-right { display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .footer-bottom-links { display:flex; gap:24px; } .footer-bottom-links a { font-size:13px; color:rgba(255,255,255,0.32); transition:color 0.2s; } .footer-bottom-links a:hover { color:rgba(255,255,255,0.65); } /* "Designed & Developed by SRS Web Services" credit — understated pill that lifts on hover into the brand primary. */ .footer-credit { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(255,255,255,0.4); line-height:1; padding:8px 15px; border-radius:20px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.09); transition:border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s; } .footer-credit svg { color:var(--primary-b); opacity:0.85; } .footer-credit strong { color:rgba(255,255,255,0.72); font-weight:700; } .footer-credit:hover { border-color:rgba(44,92,219,0.4); background:rgba(44,92,219,0.07); color:rgba(255,255,255,0.6); transform:translateY(-2px); } .footer-credit:hover strong { color:var(--primary-b); } /* ══════════════════════════════════════ UTILS ═══════════════════════════════════════ */ .text-primary { color:var(--primary-d); } .text-muted { color:var(--text-m); } .text-center { text-align:center; } .mt-8 { margin-top:8px; } .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; } .mt-32 { margin-top:32px; } .mt-40 { margin-top:40px; } .mb-8 { margin-bottom:8px; } .mb-16 { margin-bottom:16px; } .mb-24 { margin-bottom:24px; } .mb-32 { margin-bottom:32px; } .flex { display:flex; } .gap-8 { gap:8px; } .gap-12 { gap:12px; } .gap-16 { gap:16px; } .gap-24 { gap:24px; } .items-center { align-items:center; } .flex-wrap { flex-wrap:wrap; } .check-list { display:flex; flex-direction:column; gap:10px; } .check-item { display:flex; align-items:flex-start; gap:10px; font-size:14px; font-weight:600; color:var(--heading); } .check-item .check { color:var(--primary); font-size:15px; flex-shrink:0; margin-top:1px; } /* Divider accent line */ .primary-line { width:100%; height:1px; background:linear-gradient(90deg, var(--primary), transparent); margin:40px 0; } /* ══════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════ */ @media(max-width:1100px) { /* Give the wider new logo + nav links room to breathe in the narrower desktop range (below this, the hamburger takes over at 900px). */ .nav-logo-img { height:46px; max-width:230px; } .nav-link { padding:8px 10px; } .nav-menu { gap:0; } .hero-content { grid-template-columns:1fr; } .hero-right { display:none; } .hero-stats { grid-template-columns:repeat(2,1fr); gap:24px; } .services-grid { grid-template-columns:1fr; } .contact-grid { grid-template-columns:1fr; gap:48px; } .footer-grid { grid-template-columns:1fr 1fr; gap:40px; } .stats-band-grid { grid-template-columns:repeat(2,1fr); row-gap:48px; } .stat-item:nth-child(2) { border-right:none; } .about-intro-grid { grid-template-columns:1fr; gap:48px; } .two-col { grid-template-columns:1fr; gap:48px; } .cert-grid { grid-template-columns:repeat(2,1fr); } .finder-form { grid-template-columns:1fr 1fr; } .catalogue-block { flex-direction:column; text-align:center; } .catalogue-actions { justify-content:center; } } @media(max-width:900px) { .nav-menu { display:none; } .hamburger { display:flex; } .features-grid { grid-template-columns:repeat(2,1fr); } .testimonials-grid { grid-template-columns:1fr; } .equipment-grid { grid-template-columns:repeat(2,1fr); } .projects-grid { grid-template-columns:1fr; } .values-grid { grid-template-columns:repeat(2,1fr); } .team-grid { grid-template-columns:repeat(2,1fr); } .form-row { grid-template-columns:1fr; } .trust-bar-grid { grid-template-columns:repeat(3, 1fr); } .trust-badge { border-right:1px solid var(--border); border-bottom:1px solid var(--border); } .trust-badge:nth-child(3n) { border-right:none; } .trust-badge:nth-last-child(-n+3) { border-bottom:none; } } @media(max-width:700px) { .hero-stats { grid-template-columns:repeat(2,1fr); } .finder-form { grid-template-columns:1fr; } } @media(max-width:600px) { .container { padding:0 20px; } .container-sm { padding:0 20px; } .section { padding:64px 0; } .section-sm { padding:48px 0; } .features-grid { grid-template-columns:1fr; } .equipment-grid { grid-template-columns:1fr; } .values-grid { grid-template-columns:1fr; } .team-grid { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr; } .footer-bottom { flex-direction:column; align-items:flex-start; gap:16px; } .footer-bottom-right { width:100%; justify-content:space-between; gap:14px; } .hero-actions .btn { justify-content:center; } .stats-band-grid { grid-template-columns:repeat(2,1fr); } .cta-actions { flex-direction:column; align-items:center; } .form-box { padding:28px; } .capacity-finder { padding:28px; } .cert-grid { grid-template-columns:repeat(2,1fr); } .qq-modal { padding:28px; } .wa-float { bottom:20px; right:20px; } .trust-bar-grid { grid-template-columns:repeat(2, 1fr); } .trust-badge { border-right:1px solid var(--border); border-bottom:1px solid var(--border); } .trust-badge:nth-child(2n) { border-right:none; } .trust-badge:nth-child(5), .trust-badge:nth-child(6) { border-bottom:none; } } /* ══════════════════════════════════════ CARD ELEVATION POLISH (v4.1) Resting shadow on every card + a stronger, lifted hover. ═══════════════════════════════════════ */ .service-card, .equipment-card, .testimonial-card, .value-card, .team-card, .cert-card { box-shadow:var(--shadow-sm); } .service-list-item { box-shadow:var(--shadow-xs); } .service-card:hover, .equipment-card:hover, .testimonial-card:hover, .value-card:hover, .team-card:hover, .cert-card:hover { box-shadow:var(--shadow-lg); } /* Give bordered icon tiles a touch of depth */ .feature-icon-box, .value-icon, .service-list-icon, .contact-icon, .trust-badge-icon, .cert-badge-icon { box-shadow:var(--shadow-xs); } /* ══════════════════════════════════════ BRAND LOGO (nav + footer) ═══════════════════════════════════════ */ /* Two transparent logo variants are rendered stacked in the nav (light-mode colour logo + dark-mode white logo); CSS shows the one that matches the current theme. The footer always uses the dark (white) variant since the footer background is always dark regardless of site theme. */ .nav-logo-dark { display:none; } html[data-theme="dark"] .nav-logo-light { display:none; } html[data-theme="dark"] .nav-logo-dark { display:block; } /* ══════════════════════════════════════ BACK-TO-TOP (bottom-left) ═══════════════════════════════════════ */ .to-top { position:fixed; bottom:28px; left:28px; z-index:9998; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); color:var(--heading); border:1px solid var(--border); box-shadow:var(--shadow); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity 0.3s, transform 0.3s, visibility 0.3s, background 0.2s, color 0.2s; } .to-top.show { opacity:1; visibility:visible; transform:translateY(0); } .to-top:hover { background:var(--heading); color:var(--bg); transform:translateY(-3px); box-shadow:var(--shadow-lg); } .to-top svg { width:22px; height:22px; } /* (Custom animated cursor removed by request — will be re-added separately.) */ /* ══════════════════════════════════════ MOBILE BOTTOM TAB BAR (mobile only) — floating glass pill, matching the mobile-nav drawer's visual language. ═══════════════════════════════════════ */ .tabbar { display:none; } @media(max-width:900px) { .tabbar { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; bottom:calc(12px + env(safe-area-inset-bottom)); left:12px; right:12px; z-index:1000; background:var(--glass-bg); backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5); border:1px solid var(--glass-border); border-radius:var(--r-xl); padding:6px; gap:2px; box-shadow:0 12px 36px rgba(7,12,20,0.20), inset 0 1px 1px rgba(255,255,255,0.4); } .tabbar-item { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:none; border:none; cursor:pointer; text-decoration:none; font-family:'Inter',sans-serif; font-size:10px; font-weight:600; color:var(--text-l); padding:7px 2px; border-radius:14px; transition:color 0.2s, background 0.2s, transform 0.2s; } .tabbar-item svg { width:20px; height:20px; transition:transform 0.2s; } .tabbar-item span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tabbar-item.active { color:var(--primary-d); background:rgba(44,92,219,0.14); font-weight:700; } .tabbar-item.active svg { stroke:var(--primary-d); transform:translateY(-1px); } .tabbar-item:active { transform:scale(0.94); } /* Make room + lift the floating buttons above the floating tab bar */ body { padding-bottom:78px; } .wa-float { bottom:100px; } .to-top { bottom:100px; left:20px; } .nav-container { padding:0 20px; } .nav-logo-img { height:40px; max-width:200px; } /* The bottom tab bar's "Menu" replaces the top hamburger on mobile */ .hamburger { display:none; } } @media(max-width:600px) { .nav-actions .btn-outline { display:none; } .hero-content { padding:64px 20px; } }