/* Self-hosted Space Grotesk font */ @font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/SpaceGrotesk-Regular.woff2') format('woff2'); } @font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/SpaceGrotesk-Medium.woff2') format('woff2'); } @font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/SpaceGrotesk-SemiBold.woff2') format('woff2'); } @font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/SpaceGrotesk-Bold.woff2') format('woff2'); } html.dark-mode { --body-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --heading-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } /* Universal box-sizing reset */ *, *::before, *::after{ box-sizing:border-box; } /* Prevent images from overflowing containers */ img, video{ max-width:100%; height:auto; } :root{ /* Brand accent palette: --accent: charcoal (brand dark) --accent-2: primary blue --accent-3: medium blue tint --accent-4: light blue tint (hover states, focus) --accent-5: very light blue tint (subtle backgrounds) */ --accent:#313237; --accent-2:#3a66ed; --accent-3:#5a80f0; --accent-4:#7aa2ff; --accent-5:#a8c5ff; --brand-rgb: 58,102,237; --brand-alt-rgb: 90,128,240; --brand-dark-rgb: 49,50,55; --accent-4-rgb: 122,162,255; --accent-5-rgb: 168,197,255; --accent-tint: rgba(58,102,237,0.14); --text:#0b1220; --muted:#334155; --bg: radial-gradient(1200px 700px at 10% -10%, rgba(var(--accent-5-rgb),0.28), transparent 55%), radial-gradient(900px 600px at 90% 10%, rgba(var(--accent-4-rgb),0.22), transparent 55%), linear-gradient(180deg, #e8f4ff 0%, #d4ebff 45%, #c5e3ff 100%); --card:#ffffff; --max-width:1180px; --container-padding:2rem; --body-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --heading-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --shadow-soft: 0 16px 48px rgba(var(--brand-dark-rgb),0.12); --shadow-med: 0 20px 60px rgba(var(--brand-dark-rgb),0.16); --border-soft: 1px solid rgba(var(--brand-dark-rgb),0.1); color-scheme: light; } /* Branded text selection */ ::selection{ background:rgba(var(--brand-rgb),0.22); color:#11121a; } html.dark-mode ::selection{ background:rgba(var(--brand-rgb),0.32); color:#f7f5f0; } /* Smooth scroll */ html{ scroll-behavior:smooth; scroll-padding-top:6rem; overflow-x:clip; } body{ overflow-x:clip; } /* Dark-mode overrides (toggled via .dark-mode on ) */ html.dark-mode{ --accent:#9cc1ff; --accent-2:#79a2ff; --accent-3:#98b9ff; --accent-4:#bad4ff; --accent-5:#d9e8ff; --text:#f7f9ff; --muted:#d5e2ff; --bg: radial-gradient(900px 650px at 10% -10%, rgba(var(--brand-rgb),0.16), transparent 58%), radial-gradient(700px 500px at 90% 10%, rgba(var(--brand-alt-rgb),0.14), transparent 60%), linear-gradient(180deg, #0b0d14 0%, #121520 100%); --card:#151824; --shadow-soft: 0 22px 50px rgba(0,0,0,0.35); --border-soft: 1px solid rgba(244,241,237,0.08); --accent-tint: rgba(var(--brand-rgb),0.18); color-scheme: dark; } html.dark-mode body{ background:var(--bg); } html.dark-mode .site-header{ background: linear-gradient(180deg, rgba(12,15,23,0.92), rgba(21,24,36,0.92)); } html.dark-mode .hero{ background: radial-gradient(900px 400px at 10% -10%, rgba(var(--brand-rgb),0.22), transparent 55%), radial-gradient(700px 350px at 95% 10%, rgba(var(--brand-alt-rgb),0.18), transparent 58%), linear-gradient(160deg, rgba(18,21,32,0.98), rgba(11,13,20,0.96)); } html.dark-mode .hero::after{ background:linear-gradient(135deg, rgba(var(--brand-rgb),0.16), rgba(var(--brand-alt-rgb),0.08)); } html.dark-mode .card{ background: linear-gradient(180deg, rgba(var(--brand-rgb),0.04), rgba(21,24,36,0.98)); box-shadow: 0 16px 50px rgba(0,0,0,0.28); } html.dark-mode .contact-card{ background: rgba(21,24,36,0.8); box-shadow: 0 16px 40px rgba(0,0,0,0.3); } html.dark-mode .chip{ background: rgba(var(--brand-rgb),0.14); } html.dark-mode .chip:hover{ background: rgba(var(--brand-rgb),0.26); } html.dark-mode .faq details{ background:rgba(20,24,36,0.8); } html.dark-mode .faq details[open]{ background:rgba(var(--brand-rgb),0.1); } html.dark-mode .note{ background:rgba(var(--brand-rgb),0.12); } html.dark-mode input[type="text"], html.dark-mode input[type="email"], html.dark-mode textarea{ background:#171b29; color:var(--text); border-color:rgba(244,241,237,0.2); } html.dark-mode .skip-link{ background:#f4f1ed; color:#11121a; } html.dark-mode .hero-highlights li{ background:rgba(var(--brand-rgb),0.12); } html.dark-mode .hero::before{ background-image:radial-gradient(circle, rgba(var(--brand-rgb),0.12) 1px, transparent 1px); } html.dark-mode .service-item{ background:var(--card); } html.dark-mode .service-item::before{ opacity:0.3; } html.dark-mode .service-item:hover::before{ opacity:0.6; } html.dark-mode .site-nav{ background:var(--card); } html.dark-mode .mobile-nav-toggle{ color:var(--muted); } html.dark-mode .nav-list a{ color:var(--accent-2); } html.dark-mode .nav-list a:hover{ background:rgba(var(--accent-5-rgb),0.26); color:#f2f6ff; } html.dark-mode .nav-list a[aria-current="page"], html.dark-mode .nav-list a.active{ background:linear-gradient(135deg, rgba(var(--accent-5-rgb),0.38), rgba(var(--accent-4-rgb),0.3)); color:#ffffff; border-color:rgba(var(--accent-5-rgb),0.5); } html.dark-mode .nav-list a[aria-current="page"]::after, html.dark-mode .nav-list a.active::after{ background:linear-gradient(90deg,var(--accent-5),var(--accent-4)); } html.dark-mode .dark-toggle:hover{ color:var(--accent-4); border-color:rgba(var(--accent-4-rgb),0.58); } html.dark-mode .logo{ filter:none; } html.dark-mode .social-icon{ filter:brightness(1.6) grayscale(100%) opacity(.85); } html.dark-mode .social-icon:hover{ filter:brightness(1.9); } html.dark-mode .cta-strip{ background:linear-gradient(135deg, rgba(var(--brand-rgb),0.12), rgba(var(--brand-alt-rgb),0.2)); } html.dark-mode .hero-media, html.dark-mode .metric-card, html.dark-mode .trust-strip, html.dark-mode .service-card, html.dark-mode .process-step, html.dark-mode .tooling-card, html.dark-mode .case-card{ background:rgba(21,24,36,0.92); box-shadow: 0 18px 40px rgba(0,0,0,0.28); } html.dark-mode .case-card{ border-left-color:var(--accent); } html.dark-mode .trust-strip::before, html.dark-mode .service-card::before, html.dark-mode .tooling-card::before{ opacity:0.6; } html.dark-mode .button.ghost{ color:#dfe9ff; border-color:rgba(var(--accent-5-rgb),0.5); } html.dark-mode .button.ghost:hover{ color:#ffffff; border-color:rgba(var(--accent-5-rgb),0.7); } html.dark-mode .service-item:hover .chev{ color:var(--accent-4); } html.dark-mode .footer-links a:hover{ color:var(--accent-4); } html.dark-mode .avail-nav-btn:hover{ color:var(--accent-4); } /* Dark-mode toggle button */ .dark-toggle{ background:transparent; border: var(--border-soft); border-radius:10px; padding:.5rem .75rem; cursor:pointer; font-size:0.95rem; line-height:1; color:var(--text); transition:all 160ms ease; display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; font-weight:500; } .dark-toggle:hover{ background:linear-gradient(135deg, rgba(var(--brand-rgb),0.08), rgba(var(--brand-alt-rgb),0.06)); color:var(--accent); border-color:rgba(var(--brand-rgb),0.5); box-shadow: 0 4px 12px rgba(var(--brand-rgb),0.08); } .toggle-icon{ font-size:1.2rem; display:inline-block; line-height:1; } .toggle-text{ font-size:0.875rem; letter-spacing:0.01em; } /* small utilities for consistency (replaces inline styles) */ .muted{ color:var(--muted); } .mt-xs{ margin-top:.35rem; } .mt-sm{ margin-top:.6rem; } .mt-md{ margin-top:.9rem; } .mt-lg{ margin-top:1.25rem; } .mb-md{ margin-bottom:.9rem; } .section{ margin-bottom:0; } /* spacing handled by main > gap */ .stack{ display:flex; flex-direction:column; gap:.75rem; } .row{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; } .ml-auto{ margin-left:auto; } .fw-900{ font-weight:900; } .note{ padding:.75rem 1rem; border-radius:12px; background: linear-gradient(135deg, rgba(var(--brand-rgb),0.12), rgba(var(--brand-alt-rgb),0.08)); border: var(--border-soft); color: var(--text); } /* Company snapshot */ .company-meta{ color:var(--muted); font-weight:600; font-size:.95rem; margin-top:0.5rem; } noscript p{ text-align:center; padding:1rem; background: linear-gradient(135deg, rgba(var(--brand-rgb),0.12), rgba(var(--brand-alt-rgb),0.08)); color:#11121a; border-radius: 10px; border: var(--border-soft); } .muted-list{ color:var(--muted); margin:0; padding-left:1.2rem; } .muted-list li{ margin:.35rem 0; } .subtabs{ display:flex; gap:.6rem; margin-top:1.1rem; margin-bottom:1.1rem; flex-wrap:wrap; } .subtab{ border:var(--border-soft); background:rgba(var(--brand-rgb),0.06); color:var(--text); padding:.45rem .85rem; border-radius:999px; font-weight:600; cursor:pointer; transition:all 160ms ease; } .subtab:hover{ background:rgba(var(--brand-rgb),0.12); border-color:rgba(var(--brand-rgb),0.35); } .subtab.is-active{ background:linear-gradient(135deg, rgba(var(--brand-rgb),0.22), rgba(var(--brand-alt-rgb),0.2)); border-color:rgba(var(--brand-rgb),0.45); } .subtab:focus-visible{ outline:3px solid var(--accent-2); outline-offset:2px; } .subtab-panel[hidden]{ display:none; } .portfolio-entry{ border:var(--border-soft); border-left:4px solid var(--accent-2); border-radius:14px; padding:1rem 1.1rem; background:linear-gradient(180deg, rgba(var(--brand-rgb),0.05), rgba(var(--brand-rgb),0.02)); } .portfolio-entry h3{ margin-top:0; } .testimonials-cta-row{ text-align:center; margin-top:2rem; } html.dark-mode .subtab{ background:rgba(var(--brand-rgb),0.16); border-color:rgba(244,241,237,0.12); } html.dark-mode .subtab:hover{ background:rgba(var(--brand-rgb),0.28); } html.dark-mode .subtab.is-active{ background:linear-gradient(135deg, rgba(var(--brand-rgb),0.35), rgba(var(--brand-alt-rgb),0.24)); } html.dark-mode .portfolio-entry{ background:linear-gradient(180deg, rgba(var(--brand-rgb),0.14), rgba(21,24,36,0.9)); border-color:rgba(244,241,237,0.12); } /* Service deliverables */ .service-deliverables{ margin:.55rem 0 0 0; padding-left:0; color:var(--muted); list-style-position:inside; } .service-deliverables li{ margin:.15rem 0; } /* Visually hidden (screen-reader only) */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Global button reset — inherit site font */ button{ font:inherit; } /* Accessibility: skip link */ .skip-link{ position:fixed; left:12px; top:12px; background:#0f1724; color:#fff; padding:.5rem .75rem; border-radius:6px; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .16s ease, visibility .16s ease, transform .16s ease; z-index:200; } .skip-link:focus{ opacity:1; visibility:visible; transform:translateY(0); outline:3px solid var(--accent-2); outline-offset:2px; } /* Entrance animation */ @keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } /* Aggressive motion reduction for vestibular accessibility (WCAG 2.1 AAA) */ .hero::before, .hero::after { display: none !important; } .hero { background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.56)) !important; } /* Remove all transform-based hover effects */ .button.primary:hover, .principle:hover, .card:hover, .logo:hover, .back-to-top:hover, .chip:hover { transform: none !important; } /* Disable fadeUp animations for reduced motion */ main > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Page layout */ body{ margin:0; font-family: var(--body-font); font-size:var(--base-font-size,16px); line-height:1.65; background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:var(--text); display:flex; justify-content:center; padding:var(--container-padding, 2rem); } /* Heading typography */ h1, h2, h3{ font-family: var(--heading-font); letter-spacing:-0.3px; line-height:1.2; color:var(--text); } h2{ font-size:1.95rem; font-weight:800; margin-bottom:0.6rem; } h3{ font-size:1.15rem; font-weight:700; } main{ display:flex; flex-direction:column; gap:2rem; } main > *{ opacity: 0; transition: opacity 600ms ease; } main > *.visible { opacity: 1; } /* Stagger children as they enter viewport */ main > *:nth-child(2).visible{ transition-delay:60ms; } main > *:nth-child(3).visible{ transition-delay:100ms; } main > *:nth-child(4).visible{ transition-delay:140ms; } /* Homepage: capability chips */ .chips{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem; } .chip{ background: linear-gradient(135deg, rgba(var(--accent-5-rgb),0.28), rgba(var(--accent-4-rgb),0.18)); border: var(--border-soft); color: var(--text); padding:.5rem .85rem; border-radius:999px; font-weight:600; font-size:.9rem; letter-spacing:0.01em; transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease; will-change:transform; } @media (hover: hover){ .chip:hover{ background: linear-gradient(135deg, rgba(var(--accent-4-rgb),0.35), rgba(var(--brand-alt-rgb),0.25)); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--accent-4-rgb),0.18); } } /* Working principles */ .principles{ list-style:none; padding:0; margin:0; display:grid; gap:1.25rem; } .principle{ background: linear-gradient(135deg, rgba(var(--accent-5-rgb),0.25), rgba(var(--accent-4-rgb),0.18)); border: var(--border-soft); border-radius:14px; padding:1.35rem 1.5rem; transition:transform 220ms ease, box-shadow 220ms ease; } @media (hover: hover){ .principle:hover{ transform:translateY(-4px); box-shadow:0 20px 50px rgba(var(--accent-4-rgb),0.25); } } .principle-title{ font-family: var(--heading-font); font-weight:700; font-size:1.05rem; margin:0 0 .3rem 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:var(--accent-2); -webkit-text-fill-color:transparent; } .principle-desc{ margin:0; color:var(--muted); line-height:1.65; font-size:.95rem; } @media (min-width:700px){ .principles{ grid-template-columns: repeat(2, 1fr); } } @media (min-width:1100px){ .principles{ grid-template-columns: repeat(4, 1fr); } } html.dark-mode .principle{ background:linear-gradient(165deg, rgba(15,24,40,0.94), rgba(22,34,54,0.92)); border-color:rgba(122,162,255,0.24); } html.dark-mode .principle:hover{ box-shadow:0 20px 50px rgba(0,0,0,0.2); } /* FAQ */ .faq{ display:flex; flex-direction:column; gap:.75rem; } .faq details{ background: linear-gradient(135deg, rgba(var(--accent-5-rgb),0.22), rgba(var(--accent-4-rgb),0.16)); border: var(--border-soft); border-radius:14px; padding:.95rem 1.2rem; transition:background 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .faq details[open]{ background: linear-gradient(135deg, rgba(var(--accent-4-rgb),0.18), rgba(var(--brand-alt-rgb),0.12)); transform:scale(1.008); box-shadow:0 8px 24px rgba(var(--accent-4-rgb),0.22); } /* smooth FAQ expand/collapse */ .faq details .faq-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 300ms ease; } .faq details[open] .faq-body{ grid-template-rows:1fr; } .faq details .faq-body > div{ overflow:hidden; } .faq summary{ cursor:pointer; font-weight:700; color:var(--text); font-size:1.02rem; list-style:none; display:flex; align-items:center; gap:.5rem; } .faq summary::before{ content:'＋'; font-size:1.1rem; color:var(--accent); font-weight:400; flex-shrink:0; transition:transform 200ms ease; } html.dark-mode .faq summary::before{ color:#c5d9ff; } .faq details[open] summary::before{ content:'−'; } .faq summary::-webkit-details-marker{ display:none; } .faq details p{ margin:.55rem 0 0 0; color:var(--muted); line-height:1.65; padding-left:1.6rem; } /* Header actions group (nav + dark toggle) */ .header-actions{ display:flex; align-items:center; gap:.75rem; } .site-wrapper{ width:100%; max-width:var(--max-width); display:flex; flex-direction:column; gap:2.5rem; } .site-header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; background: linear-gradient(180deg, rgba(240,246,252,0.96), rgba(226,239,250,0.92) ); border: var(--border-soft); border-radius:18px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position:sticky; top:1rem; z-index:50; box-shadow: 0 8px 32px rgba(var(--brand-rgb),0.12); transition: box-shadow 200ms ease, padding 200ms ease; } /* Compact header after scrolling */ .site-header.compact{ padding:.35rem 1rem; box-shadow: 0 4px 20px rgba(16,24,40,0.10); } /* Logo shrinks in layout (not just visually) so the header actually collapses */ .site-header.compact .logo{ height: 52px; } /* Ensure the logo anchor always offers an adequate touch target */ .brand-link{ display:flex; align-items:center; line-height:0; } .site-header.compact .brand-link{ min-height:44px; } /* make logo punchier */ .logo{ height:128px; width:auto; max-width:260px; display:block; border-radius:0; filter: drop-shadow(0 10px 24px rgba(var(--brand-rgb),0.14)); /* Keep header compaction stable by animating size only; avoid transform jitter. */ transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1), filter 200ms ease; } @media (hover: hover){ .logo:hover{ filter: drop-shadow(0 14px 32px rgba(var(--brand-rgb),0.18)); } } /* hero */ .hero{ margin-bottom:0; border-radius:26px; padding:3.5rem 2.5rem; background: radial-gradient(1000px 380px at 10% -8%, rgba(var(--accent-4-rgb),0.35), transparent 55%), radial-gradient(800px 320px at 90% 10%, rgba(var(--accent-5-rgb),0.32), transparent 55%), linear-gradient(160deg, rgba(var(--accent-5-rgb),0.22), rgba(232,244,255,0.88)); border: var(--border-soft); box-shadow: 0 30px 70px rgba(var(--accent-4-rgb),0.22); overflow:hidden; position:relative; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* subtle dot-grid overlay for depth */ .hero::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(circle, rgba(var(--brand-rgb),0.12) 1px, transparent 1px); background-size:26px 26px; pointer-events:none; z-index:0; border-radius:inherit; } /* decorative diagonal accent */ .hero::after{ content:''; position:absolute; right:-160px; top:-80px; width:480px; height:480px; background:linear-gradient(135deg, rgba(var(--brand-rgb),0.28), rgba(var(--brand-alt-rgb),0.16)); transform:rotate(18deg); filter: blur(28px); pointer-events:none; border-radius:50px; opacity:0.98; } /* new hero layout */ .hero-grid{ display:grid; gap:2.5rem; grid-template-columns:minmax(0, 1fr); align-items:center; position:relative; z-index:1; animation: fadeUp 700ms ease both; } .hero-content{ max-width:640px; } .hero-visual{ display:flex; flex-direction:column; gap:1.5rem; } .hero-media{ background: linear-gradient(135deg, rgba(245,250,255,0.95), rgba(240,248,255,0.9)); border-radius:20px; padding:1.2rem; border: var(--border-soft); box-shadow: 0 20px 50px rgba(var(--brand-rgb),0.1); } .hero-video{ display:block; width:100%; height:auto; border-radius:16px; aspect-ratio:16/9; object-fit:cover; } .hero-poster{ display:none; width:100%; height:auto; border-radius:16px; aspect-ratio:16/9; object-fit:cover; } @media (max-width:767px){ .hero-video{ display:none; } .hero-poster{ display:block; } } @media (prefers-reduced-motion:reduce){ .hero-video{ display:none; } .hero-poster{ display:block; } } .hero-kicker{ text-transform:uppercase; letter-spacing:0.24em; font-size:.72rem; color:var(--muted); margin:0 0 .75rem 0; font-weight:600; } .hero-highlights{ display:flex; gap:.75rem; margin:1.25rem 0 0 0; color:var(--muted); list-style:none; padding:0; flex-wrap:wrap; justify-content:flex-start; } .hero-highlights li{ background: linear-gradient(135deg, rgba(var(--brand-rgb),0.1), rgba(var(--brand-alt-rgb),0.08)); padding:.55rem .9rem .55rem .65rem; border-radius:12px; font-weight:600; font-size:.9rem; color:var(--text); border: var(--border-soft); display:inline-flex; align-items:center; gap:.35rem; } .hero-highlights li::before{ content:'\2713'; color:var(--accent); font-weight:700; font-size:.85rem; flex-shrink:0; } html.dark-mode .hero-highlights li::before{ color:#c5d9ff; } .metric-grid{ display:grid; gap:.85rem; grid-template-columns:minmax(0, 1fr); } .metric-card{ border-radius:16px; padding:1.1rem 1.2rem; background: linear-gradient(135deg, rgba(235,244,252,0.98), rgba(240,246,252,0.96)); border: var(--border-soft); box-shadow: 0 18px 40px rgba(var(--brand-rgb),0.08); transition:transform 200ms ease, box-shadow 200ms ease; cursor:pointer; } @media (hover: hover){ .metric-card:hover{ transform:translateY(-3px); box-shadow:0 22px 50px rgba(var(--brand-rgb),0.12); } } .metric-value{ font-family: var(--heading-font); font-size:1.8rem; margin:0 0 .15rem 0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; letter-spacing:-0.5px; } html.dark-mode .metric-value{ background:linear-gradient(90deg,#b8d6ff,#d0e4ff); } .metric-label{ margin:0; color:var(--muted); font-size:.92rem; font-weight:500; } /* Keep hero metric cards readable across mobile browsers and dark mode. */ .page-hero .hero-visual .metric-card{ background: linear-gradient(135deg, rgba(235,244,252,0.98), rgba(240,246,252,0.96)); } .page-hero .hero-visual .metric-value{ background:none; color:var(--accent); -webkit-text-fill-color:currentColor; } .page-hero .hero-visual .metric-label{ color:var(--text); text-transform:none; letter-spacing:0; } html.dark-mode .page-hero .hero-visual .metric-card{ background:rgba(21,24,36,0.94); border:1px solid rgba(130,148,190,0.28); } html.dark-mode .page-hero .hero-visual .metric-value{ color:#c5d9ff; } html.dark-mode .page-hero .hero-visual .metric-label{ color:var(--muted); } /* trust strip */ .trust-strip{ border-radius:18px; padding:1.35rem 1.75rem; background: linear-gradient(135deg, rgba(245,250,255,0.95), rgba(240,248,255,0.9)); border: var(--border-soft); display:flex; flex-direction:column; gap:.75rem; align-items:flex-start; box-shadow: 0 16px 40px rgba(var(--brand-rgb),0.08); position:relative; overflow:hidden; } .trust-strip::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:3px 3px 0 0; } .trust-title{ margin:0; font-weight:700; color:var(--text); font-size:1.02rem; } .trust-list{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.6rem; color:var(--muted); font-weight:600; } .trust-list li{ background: linear-gradient(135deg, rgba(var(--brand-rgb),0.1), rgba(var(--brand-alt-rgb),0.08)); padding:.4rem .85rem; border-radius:999px; border: var(--border-soft); font-size:.9rem; transition:background 180ms ease, box-shadow 180ms ease; } @media (hover: hover){ .trust-list li:hover{ background: linear-gradient(135deg, rgba(var(--brand-rgb),0.16), rgba(var(--brand-alt-rgb),0.12)); box-shadow: 0 6px 16px rgba(var(--brand-rgb),0.08); } } /* split layout */ .split{ display:grid; gap:2rem; grid-template-columns:minmax(0, 1fr); } .split-content{ display:flex; flex-direction:column; gap:1rem; } .split-card{ display:flex; flex-direction:column; gap:1rem; } .availability-note{ font-size:.98rem; } /* section kicker */ .section-kicker{ text-transform:uppercase; letter-spacing:0.2em; font-size:.72rem; font-weight:700; color:var(--accent); margin:0 0 .8rem 0; } /* Service cards */ .service-grid{ display:grid; gap:1.5rem; grid-template-columns:minmax(0, 1fr); } .service-card{ border-radius:18px; padding:1.75rem; background: linear-gradient(135deg, rgba(248,251,255,0.97), rgba(245,250,255,0.94)); border: var(--border-soft); box-shadow: 0 18px 45px rgba(var(--brand-rgb),0.11); transition:transform 200ms ease, box-shadow 200ms ease; position:relative; overflow:hidden; will-change:transform; } .service-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); opacity:0.6; transition:opacity 200ms ease; } @media (hover:hover){ .service-card:hover::before{ opacity:1; } } .service-card h3{ margin:0 0 .65rem 0; font-size:1.15rem; } .service-card p{ margin:0 0 .9rem 0; color:var(--muted); line-height:1.7; } @media (hover: hover){ .service-card:hover{ transform:translateY(-8px); box-shadow:0 28px 70px rgba(var(--brand-rgb),0.15); } } /* tooling / development platform cards */ .tooling-grid{ display:grid; gap:1.25rem; grid-template-columns:minmax(0, 1fr); } .tooling-card{ border-radius:18px; padding:1.5rem; background: linear-gradient(135deg, rgba(248,251,255,0.97), rgba(245,250,255,0.94)); border: var(--border-soft); box-shadow: 0 16px 40px rgba(var(--brand-rgb),0.09); transition:transform 200ms ease, box-shadow 200ms ease; position:relative; overflow:hidden; } .tooling-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); opacity:0.5; transition:opacity 200ms ease; } @media (hover:hover){ .tooling-card:hover::before{ opacity:1; } } .tooling-card h3{ margin:0 0 .5rem 0; } .tooling-card p{ margin:0 0 .75rem 0; color:var(--muted); } .tooling-card .chips{ margin-top:.5rem; } @media (hover: hover){ .tooling-card:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(var(--brand-rgb),0.12); } } /* process steps */ .process-steps{ display:grid; gap:1.5rem; grid-template-columns:minmax(0, 1fr); counter-reset:process-step; } .process-step{ border-radius:18px; padding:1.75rem; background: linear-gradient(135deg, rgba(248,251,255,0.96), rgba(245,250,255,0.92)); border: var(--border-soft); box-shadow: 0 18px 45px rgba(var(--brand-rgb),0.10); position:relative; counter-increment:process-step; } .process-step h3{ margin:0 0 .65rem 0; font-size:1.15rem; font-weight:700; } .process-step p{ margin:0; color:var(--muted); line-height:1.7; } .process-step{ transition:transform 200ms ease, box-shadow 200ms ease; } @media (hover: hover){ .process-step:hover{ transform:translateY(-6px); box-shadow:0 26px 70px rgba(var(--brand-rgb),0.14); } } /* case studies */ .case-grid{ display:grid; gap:1.5rem; grid-template-columns:minmax(0, 1fr); } .case-card{ border-radius:18px; padding:1.75rem; padding-left:2rem; background: linear-gradient(135deg, rgba(248,251,255,0.96), rgba(245,250,255,0.92)); border: var(--border-soft); border-left:4px solid var(--accent); box-shadow: 0 18px 45px rgba(var(--brand-rgb),0.10); transition:transform 200ms ease, box-shadow 200ms ease; } .case-card h3{ margin:0 0 .65rem 0; font-size:1.1rem; } .case-card p{ margin:0; color:var(--muted); line-height:1.7; } @media (hover: hover){ .case-card:hover{ transform:translateY(-6px); box-shadow:0 26px 70px rgba(var(--brand-rgb),0.14); } } /* page heroes */ .page-hero{ padding:2.8rem 2.4rem; } .page-hero .hero-title{ font-size:2.4rem; } .page-hero .lead{ max-width:720px; } /* contact layout */ .contact-grid{ display:grid; gap:1.5rem; grid-template-columns:minmax(0, 1fr); } .contact-card{ background: linear-gradient(135deg, rgba(248,251,255,0.97), rgba(245,250,255,0.94)); border: var(--border-soft); border-radius:18px; padding:1.6rem; box-shadow: 0 16px 40px rgba(var(--brand-rgb),0.09); } .contact-card h2{ margin:0 0 .6rem 0; } .contact-card p{ margin:0 0 .75rem 0; } .contact-card .muted-list{ margin:0 0 .75rem 0; } /* contact-reason dropdown */ .contact-reason{ margin:0 0 1rem 0; } .contact-reason label{ display:block; font-weight:600; margin-bottom:.35rem; } .contact-reason select{ width:100%; max-width:100%; padding:.65rem .85rem; border-radius:10px; border:1px solid rgba(var(--brand-rgb),0.16); font:inherit; font-size:1rem; background: linear-gradient(135deg, rgba(245,250,255,0.98), rgba(240,248,255,0.96)); color:var(--text); -webkit-appearance:menulist; appearance:auto; cursor:pointer; transition:border-color 200ms ease, box-shadow 200ms ease; min-height:44px; line-height:1.3; } .contact-reason select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--brand-rgb),0.18); } html.dark-mode .contact-reason select{ color:var(--text); -webkit-text-fill-color:var(--text); background-color:rgba(20,24,36,0.85); border-color:rgba(255,255,255,0.15); } html.dark-mode .contact-reason select option{ color:var(--text); background:#161c29; } /* legal layout */ .legal-hero{ margin-bottom:1.5rem; } .legal-meta{ color:var(--muted); margin:0 0 1.25rem 0; } /* removed brand-text; header shows logo only */ /* headline */ .hero-title{ margin:0 0 1rem 0; font-family: var(--heading-font); font-size:2.8rem; line-height:1.05; letter-spacing:-0.6px; color:var(--text); font-weight:800; text-shadow: 0 10px 30px rgba(17,18,26,0.08); } .hero-accent{ display:inline-block; background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; padding-left:.12rem; border-bottom:6px solid rgba(var(--brand-rgb),0.18); font-weight:800; } /* lead paragraph */ .lead{ margin:0 0 1.5rem 0; color:var(--muted); font-size:1.15rem; line-height:1.85; max-width:640px; font-weight:500; } /* CTAs */ .hero-ctas{ display:flex; gap:0.75rem; margin-top:0.75rem; align-items:center; flex-wrap:wrap; justify-content:flex-start; } .hero-response{ margin:.65rem 0 0 0; color:var(--muted); font-size:.95rem; font-weight:600; } .hero-proof{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.6rem; margin:1rem 0 0 0; padding:0; list-style:none; } .hero-proof li{ margin:0; border: var(--border-soft); border-radius:10px; background:linear-gradient(135deg, rgba(var(--brand-rgb),0.10), rgba(var(--brand-alt-rgb),0.08)); padding:.55rem .7rem; color:var(--text); font-size:.86rem; line-height:1.35; } .hero-proof strong{ color:var(--accent); font-weight:800; } .button{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; border-radius:12px; padding:.8rem 1.1rem; font-weight:800; border:1px solid transparent; cursor:pointer; min-height:46px; } .button.primary{ background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:#fff; padding:1.05rem 1.85rem; border-radius:14px; font-weight:800; font-size:1.05rem; box-shadow: 0 24px 60px rgba(var(--brand-dark-rgb),0.32); transition:transform 200ms cubic-bezier(.2,.9,.3,1), box-shadow 200ms, color 200ms; letter-spacing:0.02em; border: none; cursor: pointer; position:relative; } @media (hover: hover){ .button.primary:hover{ transform:translateY(-5px); box-shadow:0 32px 75px rgba(var(--brand-dark-rgb),0.42); } } @media (hover: none){ .button.primary:active{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(var(--brand-dark-rgb),0.26); } } .button.ghost{ background:transparent; color:var(--accent); border:1.5px solid rgba(var(--brand-rgb),0.3); padding:.78rem 1.15rem; border-radius:10px; font-weight:700; font-size:1rem; transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease; } .button.ghost:hover{ background: rgba(var(--accent-4-rgb),0.12); transform:translateY(-2px); color:var(--accent); border-color: rgba(var(--brand-rgb),0.5); } /* Service toggle details animation */ .service-toggle{ display:flex; align-items:center; justify-content:center; width:100%; padding:.8rem; background:transparent; border:0; cursor:pointer; border-radius:10px; } .service-toggle .service-title{ font-weight:700; color:var(--text); } .service-detail{ overflow:hidden; max-height:0; transition:max-height .36s ease, opacity .28s ease; opacity:0; padding:0 .75rem; } .service-item.open .service-detail{ max-height:600px; opacity:1; padding:.6rem .75rem 1rem; overflow-y:auto; overflow-x:hidden; } .chev{ color:var(--accent-2); transition:transform .28s ease, color .2s ease; } .service-item:hover .chev{ color: var(--accent); } .service-item.open .chev{ transform:rotate(180deg); } /* layout: make services list grid */ .services-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; padding:0; margin:0; list-style:none; } .services-list .service-item{ flex:0 1 calc(50% - 0.5rem); min-width:260px; } .services-accordion{ margin-top:1rem; } .service-item{ background: linear-gradient(135deg, rgba(var(--accent-5-rgb),0.28), rgba(var(--accent-4-rgb),0.2)); padding:.9rem; border-radius:14px; display:flex; flex-direction:column; gap:.35rem; position:relative; overflow:hidden; text-align:center; border: var(--border-soft); } .service-item::before{ content:''; display:block; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:3px; opacity:0.5; transition:opacity 220ms ease; } .service-item:hover::before{ opacity:1; } @media (hover: hover){ .service-item:hover::before{ box-shadow: 0 4px 12px rgba(var(--accent-4-rgb),0.22); } } /* Services page: hero and grid tweaks */ .services-hero{ padding:2rem; text-align:left; } .services-hero .hero-title{ font-size:1.8rem; margin:0 0 .35rem 0; } .service-grid .services-list{ gap:1rem; } .service-item{ transition:transform 220ms ease, box-shadow 220ms ease; } .service-item .service-title{ display:block; font-size:1.06rem; margin-bottom:.25rem; } .service-item .service-detail{ font-size:1rem; color:var(--muted); line-height:1.6; } /* subtle hover for service cards */ @media (hover: hover){ .service-item:hover{ transform:translateY(-6px); box-shadow:0 30px 60px rgba(var(--brand-rgb),0.08); } } @media (min-width:900px){ .services-list{ gap:1.25rem; } .services-list .service-item{ flex:0 1 calc(33.333% - 0.84rem); } .services-hero .hero-title{ font-size:2.25rem; } } @media (min-width:1200px){ .services-hero{ padding:2rem; } } /* card/component utility */ .card{ background: #ffffff; padding:2rem; border-radius:20px; box-shadow:0 16px 48px rgba(var(--brand-dark-rgb),0.12); transition:transform 220ms ease, box-shadow 220ms ease; border: 1px solid rgba(var(--brand-dark-rgb),0.08); } @media (hover: hover){ .card:hover{ transform:translateY(-4px); box-shadow:0 22px 60px rgba(var(--brand-dark-rgb),0.16); } } .card-static:hover{ transform:none !important; box-shadow:0 18px 50px rgba(var(--brand-dark-rgb),0.14) !important; } /* Blue-tinted surfaces (keeps content readable while pushing the palette bluer) */ .card, .service-item, .site-nav{ border: var(--border-soft); } .card{ background: #ffffff; box-shadow: 0 16px 48px rgba(var(--brand-dark-rgb),0.12); border: 1px solid rgba(var(--brand-dark-rgb),0.08); } /* 404 page layout helpers */ .not-found{ text-align:center; padding:3rem 2rem; } .not-found .lead{ max-width:480px; margin:0 auto 1.5rem; } /* form element defaults */ input[type="text"], input[type="email"], textarea{ width:100%; max-width:100%; padding:.75rem 1rem; border-radius:10px; border:1px solid rgba(var(--brand-dark-rgb),0.16); font:inherit; background: #ffffff; transition:border-color 200ms ease, box-shadow 200ms ease; } /* Form element disabled state — AAA compliant */ input:disabled, textarea:disabled { background: rgba(95, 103, 117, 0.08); color: var(--muted); border-color: rgba(95, 103, 117, 0.2); cursor: not-allowed; opacity: 0.65; } button:disabled, .button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } html.dark-mode input:disabled, html.dark-mode textarea:disabled { background: rgba(95, 103, 117, 0.12); border-color: rgba(95, 103, 117, 0.15); } label{ font-weight:600; font-size:.95rem; color:var(--text); } /* footer */ footer{ margin-top:2rem; color:var(--muted); } .footer-inner{ padding:2.5rem 1rem 1.5rem; margin-top:1.5rem; border-top:2px solid transparent; border-image:linear-gradient(90deg, transparent, rgba(var(--brand-rgb),0.35), transparent) 1; } .footer-content{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:2rem; max-width:1200px; margin:0 auto; } .footer-section{ display:flex; flex-direction:column; gap:0.75rem; } .footer-section p{ margin:0; font-size:0.95rem; line-height:1.6; color:var(--muted); } .footer-heading{ margin:0 0 0.5rem 0; font-size:0.95rem; font-weight:600; color:var(--text); letter-spacing:0.02em; text-transform:uppercase; } .footer-hours, .footer-hours-grid{ display:flex; flex-direction:column; gap:0.35rem; font-size:0.9rem; font-family:var(--body-font); } .footer-hours-row{ display:grid; grid-template-columns:100px 1fr; align-items:center; gap:1rem; } .footer-hours-row span:first-child{ font-weight:500; color:var(--text); } .footer-hours-row span:last-child{ text-align:right; color:var(--text); font-weight:500; } .footer-hours-row span.closed{ color:var(--text); font-style:italic; font-weight:normal; } .footer-hours-row.today{ background:transparent; border-radius:0; padding:0; margin:0; } html.dark-mode .footer-hours-row.today{ background:transparent; } .footer-timezone{ font-size:0.8rem; color:var(--muted); margin-top:0.25rem; font-style:italic; } /* Open / Closed status badge */ .status-badge{ display:inline-block; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:0.15rem 0.55rem; border-radius:999px; margin-left:0.6rem; vertical-align:middle; line-height:1; background:transparent; border:1px solid currentColor; } .status-open{ color:#166534; } .status-lunch{ color:#92400e; } .status-closed{ color:#991b1b; } html.dark-mode .status-open{ color:#7ff0a9; } html.dark-mode .status-lunch{ color:#ffd37a; } html.dark-mode .status-closed{ color:#ff9e9e; } .footer-links{ display:flex; flex-wrap:wrap; align-items:center; gap:0.45rem; font-size:0.95rem; } .footer-links a:not(:last-child):not([aria-label])::after{ content:'\00b7'; margin-left:0.45rem; color:var(--muted); pointer-events:none; } .footer-links a{ color:var(--muted); text-decoration:none; font-weight:600; transition:all 160ms ease; padding: 0.2rem 0.4rem; border-radius: 4px; } .footer-links a:hover{ background: rgba(var(--brand-rgb),0.08); color:var(--accent); } /* social icon */ .social-icon{ width:20px; height:20px; vertical-align:middle; margin-left:.35rem; filter:grayscale(100%) opacity(.85); transition:filter 160ms ease; } .social-icon:hover{ filter:none; } /* Legal page prose */ .legal-prose h2{ font-size:1.15rem; margin:1.5rem 0 .5rem 0; } .legal-prose h2:first-of-type{ margin-top:.75rem; } .legal-prose h2::after{ display:none; } .legal-prose p, .legal-prose ul{ color:var(--muted); line-height:1.75; } .legal-prose ul{ padding-left:1.4rem; margin:.4rem 0; } .legal-prose ul li{ margin:.3rem 0; } /* company snapshot card used in About */ .company-card{ display:flex; align-items:center; gap:1rem; padding:1.25rem; border-radius:16px; background:linear-gradient(135deg, rgba(var(--brand-rgb),0.12), rgba(var(--brand-alt-rgb),0.1)); border: var(--border-soft); } .company-card img.social-icon{ width:36px; height:36px; margin-left:0; filter:none; } .company-card .linkedin-cta{ padding:.55rem .8rem; border-radius:10px; font-weight:700; } .company-card .linkedin-cta:hover{ background:var(--accent-tint); } @media (max-width:600px){ .company-card{ flex-direction:column; align-items:flex-start; text-align:left; } .company-card .ml-auto{ margin-left:0; margin-top:.75rem; } } /* subtle animated underline for section headings */ main h2{ position:relative; padding-bottom:.75rem; } main h2::after{ content:''; position:absolute; left:0; bottom:0; height:4px; width:72px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:6px; transform-origin:left; animation: slideIn 900ms ease both; } @keyframes slideIn{ from{ transform:scaleX(0); opacity:0; } to{ transform:scaleX(1); opacity:1; } } /* stronger focus states — AAA compliant (consolidated) */ input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(var(--brand-rgb),0.22); border-color: var(--accent); background: rgba(240,246,252,0.98); } html.dark-mode input:focus-visible, html.dark-mode textarea:focus-visible { outline-color: var(--accent-4); box-shadow: 0 0 0 6px rgba(var(--accent-4-rgb), 0.28); } /* responsive adjustments */ @media (min-width:900px){ body{ font-size:17px; } .hero-grid{ grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .metric-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .trust-strip{ flex-direction:row; align-items:center; justify-content:space-between; } .split{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } .service-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .tooling-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .process-steps{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .case-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .contact-grid{ grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } } @media (min-width:1000px){ .hero{ padding:4rem 3rem; } .hero-title{ font-size:3rem; } .site-header{ padding:1.25rem 1.5rem; } .logo{ height:136px; } .site-header.compact .logo{ height: 56px; } } /* Mobile nav toggle (hidden on desktop) */ .mobile-nav-toggle{ display:none; background:transparent; border:0; font-size:1.25rem; padding:.35rem .6rem; border-radius:8px; color:var(--accent); cursor:pointer; } /* Mobile-specific layout */ /* Nav list base */ .nav-list{ display:flex; list-style:none; margin:0; padding:0; } .nav-list a{ text-decoration:none; color:var(--accent-2); font-weight:700; padding:.45rem .7rem; border-radius:8px; transition:background 160ms ease, color 160ms ease; } .nav-list a:hover{ background:var(--accent-tint); color:var(--accent-2); } /* Active nav link */ .nav-list a[aria-current="page"], .nav-list a.active{ background: linear-gradient(135deg, rgba(var(--brand-rgb),0.12), rgba(var(--brand-alt-rgb),0.08)); color:var(--accent-2); border: 1px solid rgba(var(--brand-rgb),0.2); position:relative; } .nav-list a[aria-current="page"]::after, .nav-list a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-8px; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:3px; } /* better keyboard focus visibility — AAA level (3:1 contrast on focus) */ a:focus-visible, button:focus-visible, .button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(var(--brand-rgb),0.22); border-radius: 4px; } html.dark-mode a:focus-visible, html.dark-mode button:focus-visible, html.dark-mode .button:focus-visible { outline-color: var(--accent-4); box-shadow: 0 0 0 6px rgba(var(--accent-4-rgb), 0.28); } @media (max-width:767px){ body{ padding:1rem; } .hero{ padding:1.5rem 1.25rem; border-radius:14px; } .hero-title{ font-size:1.6rem; } .hero-grid{ gap:1.5rem; } .hero-ctas{ justify-content:stretch; align-items:stretch; } .hero-ctas .button{ flex:1 1 100%; width:100%; } .hero-response{ text-align:center; } .hero-proof{ grid-template-columns:1fr; } .hero-highlights{ justify-content:center; } .site-header{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.6rem; } .site-header.compact{ padding:.4rem .6rem; } /* Mobile compact: height-based so header actually shrinks; min-height on brand-link preserves 44px touch target */ .site-header.compact .logo{ height: 34px; } /* On mobile, only show dark toggle in header-actions (nav is absolutely positioned) */ .header-actions{ gap:.5rem; } /* show mobile toggle */ .mobile-nav-toggle{ display:inline-flex; } /* WCAG 2.1 AAA: Ensure touch targets are at least 48x48px on mobile */ .mobile-nav-toggle, .dark-toggle { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem; } /* Hide text on mobile, show only icon */ .dark-toggle .toggle-text{ display: none; } .dark-toggle .toggle-icon{ font-size: 1.3rem; } /* hide desktop nav by default on mobile — anchor to site-header */ .site-nav{ position:absolute; top:calc(100% + .75rem); left:1rem; right:1rem; background:var(--card); border-radius:10px; box-shadow:0 14px 40px rgba(16,24,40,0.08); padding:.75rem; z-index:60; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity 200ms ease, visibility 200ms ease, transform 200ms ease; pointer-events:none; } /* when open, show nav */ .site-nav.open{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } .nav-list{ display:flex; flex-direction:column; gap:.5rem; margin:0; padding:0; list-style:none; } .nav-list a{ display:block; padding:.6rem .75rem; border-radius:8px; color:var(--text); font-weight:700; background:transparent; } .nav-list a:hover{ background:var(--accent-tint); color:var(--accent); transform:none; } /* adjust logo sizing on small screens */ .logo{ height:84px; max-width:180px; } /* card padding reduction */ .card{ padding:1.25rem; border-radius:16px; } /* page hero padding */ .page-hero{ padding:1.5rem 1.25rem; } .page-hero .hero-title{ font-size:1.5rem; } /* contact grid stacking */ .contact-grid{ gap:1rem; } .contact-card{ padding:1.25rem; } /* footer cleanup */ .footer-content{ grid-template-columns:1fr; gap:1.5rem; } .footer-inner{ padding:1.5rem 0.5rem 1rem; } .footer-links{ font-size:0.88rem; } /* ensure services/cards remain full width and stack nicely */ main section{ padding:.9rem; } .services-list{ gap:.75rem; } .services-list .service-item{ flex:0 1 100%; } /* CTA strip mobile */ .cta-strip{ padding:2rem 1.25rem; border-radius:16px; } .cta-actions .button{ width:100%; } .cta-assurance{ width:100%; max-width:28rem; } /* FAQ mobile */ .faq details{ padding:.75rem 1rem; } .faq summary{ font-size:.95rem; } /* metric cards mobile */ .metric-grid{ grid-template-columns:1fr; gap:.65rem; } .metric-card{ padding:.9rem 1rem; } .metric-value{ font-size:1.5rem; } /* trust strip mobile */ .trust-strip{ padding:1rem 1.25rem; border-radius:14px; } .trust-list li{ font-size:.82rem; padding:.35rem .7rem; } /* hero highlights wrap better */ .hero-highlights li{ font-size:.82rem; padding:.45rem .7rem .45rem .5rem; } /* principles mobile */ .principle{ padding:1rem 1.1rem; } /* Service toggle detail overflow */ .service-item.open .service-detail{ max-height:800px; } /* lead text */ .lead{ font-size:1rem; } /* back to top - larger touch target */ .back-to-top{ bottom:1.25rem; right:1.25rem; width:48px; height:48px; } } /* ensure nav is visible on larger screens (tablet and desktop) */ @media (min-width:768px){ .site-nav{ position:static; display:block; background:transparent; padding:0 1rem 0 0; box-shadow:none; opacity:1; visibility:visible; transform:none; pointer-events:auto; } .nav-list{ flex-direction:row; gap:0.75rem; align-items:center; } .mobile-nav-toggle{ display:none; } /* Footer layout - 3 columns for tablet and desktop (overridden to 2 columns for tablets below) */ .footer-content{ grid-template-columns:repeat(3, 1fr); } } /* ── Tablet layout (768 px – 1023 px) ─────────────────────── */ @media (min-width:768px) and (max-width:1023px){ body{ font-size:16px; } .hero{ padding:2.5rem 2rem; border-radius:18px; } .hero-title{ font-size:2rem; } .hero-grid{ grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap:2rem; } .metric-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .trust-strip{ flex-direction:row; align-items:center; justify-content:space-between; } .split{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } .service-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .process-steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .case-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .contact-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer-content{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .services-list{ gap:1rem; } .services-list .service-item{ flex:0 1 calc(50% - 0.5rem); } .logo{ height:104px; } .site-header{ padding:1rem 1.25rem; } .card{ padding:1.5rem; } .page-hero{ padding:2rem; } .page-hero .hero-title{ font-size:1.9rem; } } /* ── Tablet landscape (768 px – 1023 px, landscape) ────────── */ @media (min-width:768px) and (max-width:1023px) and (orientation:landscape){ .metric-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .process-steps{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .services-list .service-item{ flex:0 1 calc(33.333% - 0.67rem); } } /* ── Phone landscape (≤ 767 px, landscape) ─────────────────── */ @media (max-width:767px) and (orientation:landscape){ .hero{ padding:1rem 1.25rem; border-radius:14px; } .hero-title{ font-size:1.4rem; } .hero-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap:1.5rem; } .hero-media{ display:none; } .metric-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } main section{ padding:.75rem; } .page-hero{ padding:1rem 1.25rem; } .page-hero .hero-title{ font-size:1.3rem; } } /* Back-to-top button */ .back-to-top{ position:fixed; bottom:2rem; right:2rem; width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-size:1.25rem; border:none; cursor:pointer; box-shadow:0 8px 24px rgba(var(--brand-rgb),0.24); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity 250ms ease, visibility 250ms ease, transform 250ms ease; z-index:40; display:flex; align-items:center; justify-content:center; will-change:transform,opacity; } .back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); } @media (hover: hover){ .back-to-top:hover{ transform:translateY(-3px); box-shadow:0 14px 36px rgba(var(--brand-rgb),0.28); } } /* Pre-footer CTA strip */ .cta-strip{ text-align:center; padding:3rem 2rem; border-radius:22px; background:linear-gradient(135deg, rgba(var(--brand-rgb),0.14), rgba(var(--brand-alt-rgb),0.2)); border: var(--border-soft); position:relative; overflow:hidden; box-shadow: 0 20px 60px rgba(var(--brand-rgb),0.1); } .cta-strip::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(circle, rgba(var(--brand-rgb),0.06) 1px, transparent 1px); background-size:22px 22px; pointer-events:none; border-radius:inherit; } .cta-strip h2{ margin:0 0 .5rem 0; position:relative; } .cta-strip h2::after{ left:50%; transform:translateX(-50%); } .cta-strip p{ margin:0 0 1.5rem 0; color:var(--muted); position:relative; } .cta-strip .button{ position:relative; } .cta-actions{ margin:0 0 1rem 0; display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; } .cta-assurance{ margin:0 auto; padding-left:1.15rem; list-style:disc; list-style-position:outside; display:grid; gap:.4rem; justify-content:start; width:fit-content; } .cta-assurance li{ padding:0; margin:0; font-size:.92rem; color:var(--text); font-weight:600; } .cta-assurance li::marker{ color:var(--accent); } /* Services page inner section spacing */ .services-list-section .card.section{ margin-top:1.5rem; } /* ── Availability calendar ─────────────────────────────────── */ #availability-calendar{ min-height:350px; } .avail-calendar-header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; } .avail-month-label{ margin:0; font-size:1.25rem; text-align:center; flex:1; } .avail-nav-btn{ background:transparent; border:var(--border-soft); border-radius:8px; padding:.4rem .85rem; cursor:pointer; font-size:1.1rem; color:var(--text); transition:background 160ms ease, color 160ms ease; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } .avail-nav-btn:hover{ background:var(--accent-tint); color:var(--accent); } .avail-nav-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .avail-grid{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; } .avail-day-header{ text-align:center; font-size:.78rem; font-weight:700; color:var(--muted); padding:.35rem 0; letter-spacing:0.04em; } .avail-day{ aspect-ratio:1; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:600; border:var(--border-soft); background:rgba(255,255,255,0.5); color:var(--text); position:relative; } .avail-day.avail-empty{ background:transparent; border-color:transparent; } .avail-day.avail-today{ outline:2px solid var(--accent); outline-offset:-2px; } .avail-day.avail-green{ background:rgba(22,163,74,0.15); border-color:rgba(22,163,74,0.3); color:var(--text); } .avail-day.avail-amber{ background:rgba(217,119,6,0.15); border-color:rgba(217,119,6,0.3); color:var(--text); } .avail-day.avail-red{ background:rgba(220,38,38,0.15); border-color:rgba(220,38,38,0.3); color:var(--text); } html.dark-mode .avail-day{ background:rgba(21,24,36,0.7); } html.dark-mode .avail-day.avail-green{ background:rgba(22,163,74,0.2); border-color:rgba(22,163,74,0.4); } html.dark-mode .avail-day.avail-amber{ background:rgba(217,119,6,0.2); border-color:rgba(217,119,6,0.4); } html.dark-mode .avail-day.avail-red{ background:rgba(220,38,38,0.2); border-color:rgba(220,38,38,0.4); } /* Legend cards in hero visual */ .avail-legend-card{ text-align:center; } .avail-legend-icon{ font-size:1.8rem !important; line-height:1 !important; } .avail-legend-card.avail-green .avail-legend-icon{ color:rgb(22,163,74); } .avail-legend-card.avail-amber .avail-legend-icon{ color:rgb(217,119,6); } .avail-legend-card.avail-red .avail-legend-icon{ color:rgb(220,38,38); } .avail-updated{ margin-top:1rem; font-size:.85rem; } /* ── Availability widget (endpoint-driven) ───────────────── */ .availability-widget{ --aw-green-bg: rgba(22,163,74,0.14); --aw-green-border: rgba(22,163,74,0.35); --aw-amber-bg: rgba(217,119,6,0.14); --aw-amber-border: rgba(217,119,6,0.35); --aw-red-bg: rgba(220,38,38,0.14); --aw-red-border: rgba(220,38,38,0.35); --aw-past-bg: rgba(100,116,139,0.14); --aw-past-border: rgba(100,116,139,0.4); --aw-status-bg: rgba(var(--brand-rgb),0.08); } .availability-widget__header{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; margin-bottom:1rem; } .availability-widget__title{ margin:0; } .availability-widget__updated{ margin:0; color:var(--muted); font-size:.92rem; } .availability-widget__controls{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; } .availability-widget__calendar-header{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:1rem; } .availability-widget__month-label{ margin:0; font-size:1.05rem; font-weight:700; text-align:center; flex:1; } .availability-widget__nav-btn{ min-width:44px; min-height:44px; border:var(--border-soft); border-radius:10px; background:var(--card); color:var(--text); font-size:1.1rem; cursor:pointer; } .availability-widget__nav-btn:hover{ background:var(--accent-tint); color:var(--accent); } .availability-widget__nav-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .availability-widget__label{ font-weight:600; } .availability-widget__select{ min-height:44px; border:var(--border-soft); border-radius:10px; padding:.45rem .75rem; font:inherit; background:var(--card); color:var(--text); } .availability-widget__select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .availability-widget__status{ border-radius:10px; padding:.75rem .9rem; margin-bottom:1rem; background:var(--aw-status-bg); border:var(--border-soft); font-weight:500; } .availability-widget__status--loading{ opacity:.9; } .availability-widget__status--ok{ color:var(--text); } .availability-widget__status--error{ background:rgba(220,38,38,0.12); border-color:rgba(220,38,38,0.35); } .availability-widget__status--empty{ background:rgba(217,119,6,0.12); border-color:rgba(217,119,6,0.35); } .availability-widget__grid{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:.45rem; margin-bottom:1rem; } .availability-widget__day-header{ text-align:center; font-size:.8rem; font-weight:700; color:var(--muted); padding:.2rem 0 .3rem; } .availability-widget__day{ border-radius:12px; border:1px solid transparent; padding:.6rem .45rem; min-height:78px; display:flex; flex-direction:column; justify-content:space-between; } .availability-widget__day--empty{ background:transparent; border-color:transparent; } .availability-widget__day--today{ outline:2px solid var(--accent); outline-offset:-2px; } .availability-widget__day-date{ margin:0; font-size:.82rem; font-weight:600; } .availability-widget__day-status{ margin:.4rem 0 0; font-size:.76rem; font-weight:700; } .availability-widget__day--green{ background:var(--aw-green-bg); border-color:var(--aw-green-border); } .availability-widget__day--amber{ background:var(--aw-amber-bg); border-color:var(--aw-amber-border); } .availability-widget__day--red{ background:var(--aw-red-bg); border-color:var(--aw-red-border); } .availability-widget__day--past{ background:var(--aw-past-bg); border-color:var(--aw-past-border); } .availability-widget__day--past .availability-widget__day-status{ color:var(--muted); } .availability-widget__legend{ display:flex; flex-wrap:wrap; gap:1rem; } .availability-widget__legend-item{ display:flex; align-items:center; gap:.45rem; font-size:.92rem; } .availability-widget__dot{ width:.75rem; height:.75rem; border-radius:999px; border:1px solid transparent; } .availability-widget__dot--green{ background:rgba(22,163,74,0.85); border-color:rgba(22,163,74,1); } .availability-widget__dot--amber{ background:rgba(217,119,6,0.85); border-color:rgba(217,119,6,1); } .availability-widget__dot--red{ background:rgba(220,38,38,0.85); border-color:rgba(220,38,38,1); } @media (max-width: 620px){ .availability-widget__header, .availability-widget__controls, .availability-widget__calendar-header{ flex-direction:column; align-items:flex-start; } .availability-widget__calendar-header{ align-items:stretch; } .availability-widget__month-label{ order:-1; text-align:left; } .availability-widget__grid{ gap:.3rem; } .availability-widget__day{ min-height:66px; padding:.45rem .3rem; border-radius:10px; } .availability-widget__day-header{ font-size:.7rem; } .availability-widget__day-date{ font-size:.76rem; } .availability-widget__day-status{ font-size:.66rem; line-height:1.2; } .availability-widget__day .availability-widget__day-status{ display:none; } } html.dark-mode .availability-widget{ --aw-green-bg: rgba(22,163,74,0.24); --aw-green-border: rgba(34,197,94,0.48); --aw-amber-bg: rgba(217,119,6,0.24); --aw-amber-border: rgba(245,158,11,0.48); --aw-red-bg: rgba(220,38,38,0.24); --aw-red-border: rgba(248,113,113,0.45); --aw-past-bg: rgba(100,116,139,0.28); --aw-past-border: rgba(148,163,184,0.42); --aw-status-bg: rgba(20,24,36,0.72); } html.dark-mode .availability-widget__month-label{ color:#f3f7ff; } html.dark-mode .availability-widget__updated{ color:#d5e2ff; } html.dark-mode .availability-widget__status{ color:#e8efff; } html.dark-mode .availability-widget__status--empty{ color:#ffe7b0; background:rgba(245,158,11,0.2); border-color:rgba(245,158,11,0.48); } html.dark-mode .availability-widget__status--error{ color:#ffd1d1; } html.dark-mode .availability-widget__legend-item{ color:#e8efff; } html.dark-mode .hero .lead{ color:#dbe8ff; } html.dark-mode .lead, html.dark-mode .hero-response, html.dark-mode .availability-note{ color:#dbe8ff; } html.dark-mode .footer-section p, html.dark-mode .legal-meta, html.dark-mode .legal-prose p, html.dark-mode .legal-prose ul, html.dark-mode .testimonial-footer, html.dark-mode .case-study-meta, html.dark-mode .blog-meta{ color:#d0def6; } /* ── Print styles */ @media print{ body{ background:#fff !important; padding:0; font-size:12pt; color:#000; } .site-header, .dark-toggle, .mobile-nav-toggle, .hero::before, .hero::after, .back-to-top, .skip-link, .footer-links, .cta-strip{ display:none !important; } .card, .hero, .site-wrapper{ box-shadow:none !important; border:none !important; background:#fff !important; } main{ gap:1rem; } main > *{ opacity:1 !important; transform:none !important; transition:none !important; } a{ color:#000; text-decoration:underline; } a[href^="http"]::after{ content:' (' attr(href) ')'; font-size:0.8em; color:#555; } .button{ border:1px solid #ccc !important; background:none !important; color:#000 !important; box-shadow:none !important; } .card, .service-item, .principle, li{ break-inside:avoid; page-break-inside:avoid; } .hero-media video, .hero-media img{ max-width:200px; height:auto; } .metric-grid{ grid-template-columns:repeat(3, 1fr); gap:.5rem; } .metric-card{ padding:.5rem; box-shadow:none !important; border:1px solid #ccc; } h2, h3{ break-after:avoid; page-break-after:avoid; } } /* content-visibility: skip rendering off-screen sections for faster initial paint */ #about, .service-grid, .tooling-grid, .process-steps, .case-grid, .faq, .cta-strip, footer { content-visibility: auto; contain-intrinsic-size: auto 500px; } /* High contrast / prefers-contrast support (WCAG AAA) */ @media (prefers-contrast: more) { :root { --border-soft: 2px solid rgba(17,18,26,0.3); --shadow-soft: none; } html.dark-mode { --border-soft: 2px solid rgba(244,241,237,0.3); --shadow-soft: none; } .button.primary { background: var(--accent); border: 2px solid #fff; } .chip, .trust-list li, .hero-highlights li { border-width: 2px; } .card, .service-card, .process-step, .case-card, .metric-card, .service-item { border-width: 2px; box-shadow: none; } .faq details { border-width: 2px; } } /* Windows High Contrast Mode / forced-colors */ @media (forced-colors: active) { .button.primary { border: 2px solid ButtonText; forced-color-adjust: none; background: Highlight; color: HighlightText; } .button.ghost { border: 2px solid ButtonText; } .hero::before, .hero::after, .service-card::before, .tooling-card::before, .trust-strip::before, .service-item::before, .cta-strip::before { display: none; } .status-open, .status-lunch, .status-closed { border: 1px solid ButtonText; } .nav-list a[aria-current="page"]::after { background: Highlight; } main h2::after { background: Highlight; } .back-to-top { border: 2px solid ButtonText; } } /* ─── NEW FEATURE STYLES ─── */ /* 1. SERVICE CARD ANIMATIONS */ .service-card, .principle { transition: transform 0.24s ease, box-shadow 0.24s ease; } .service-card:hover, .principle:hover { transform: translateY(-4px); box-shadow: var(--shadow-med); } /* 2. SERVICE COMPARISON WIZARD */ .wizard-container { max-width:600px; margin:2rem auto; } .wizard-step { display:none; } .wizard-step.active { display:block; animation:slideIn 0.3s ease; } .wizard-progress { height:6px; background:var(--accent-tint); border-radius:3px; margin-bottom:2rem; overflow:hidden; } .wizard-progress-bar { height:100%; background:var(--accent-2); width:0; transition:width 0.3s ease; } .wizard-buttons { display:flex; gap:1rem; margin-top:2rem; } @keyframes slideIn { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } } /* 3. PRICING CALCULATOR */ .calculator-input { display:flex; gap:1rem; margin:1.5rem 0; } .calculator-input input { flex:1; padding:0.75rem; border:var(--border-soft); border-radius:6px; font-size:inherit; } .calculator-result { background:var(--accent-tint); padding:2rem; border-radius:8px; text-align:center; margin-top:2rem; } .calculator-result .result-amount { font-size:2.2rem; font-weight:700; color:var(--accent-2); margin:0.5rem 0; } /* 4. ENGAGEMENT TIMELINE */ .timeline { position:relative; padding:2rem 0; } .timeline::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--accent-tint); transform:translateX(-50%); } .timeline-item { margin-bottom:3rem; position:relative; } .timeline-item:nth-child(odd) { text-align:right; padding-right:52%; } .timeline-item:nth-child(even) { text-align:left; padding-left:52%; } .timeline-marker { position:absolute; left:50%; top:0; width:12px; height:12px; background:var(--accent-2); border-radius:50%; transform:translateX(-50%); border:3px solid var(--card); } .timeline-content { background:var(--accent-tint); padding:1.5rem; border-radius:8px; } /* 5. CASE STUDIES / BLOG CARDS */ .case-study-card, .blog-card { transition:all 0.3s ease; cursor:pointer; } .case-study-card:hover, .blog-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-med); } .case-study-meta, .blog-meta { font-size:0.9rem; color:var(--muted); margin-bottom:0.5rem; } /* 6. CLIENT RECOGNITION BOARD */ .client-logos { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:2rem; align-items:center; padding:2rem; } .client-logo-item { display:flex; align-items:center; justify-content:center; min-height:60px; padding:1rem; border:var(--border-soft); border-radius:8px; opacity:0.7; transition:all 0.3s ease; } .client-logo-item:hover { opacity:1; transform:scale(1.05); box-shadow:var(--shadow-soft); } /* 7. PERFORMANCE BADGES */ .performance-badges { display:flex; flex-wrap:wrap; gap:1rem; margin:1.5rem 0; } .badge { display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; background:var(--accent-tint); border-radius:20px; font-size:0.9rem; font-weight:500; color:var(--accent-2); } .badge-score { font-size:1.2rem; font-weight:700; } /* 8. DYNAMIC FORM VARIANTS */ .form-variant { display:none; } .form-variant.active { display:block; animation:slideIn 0.3s ease; } .form-context-hint { padding:1rem; background:var(--accent-tint); border-radius:6px; margin-bottom:1.5rem; font-size:0.95rem; color:var(--text); } /* 9. TESTIMONIAL BLOCKQUOTE STYLING */ .testimonial-quote { border-left:4px solid var(--accent); padding-left:1.5rem; font-style:italic; margin:2rem 0; } .testimonial-quote p { font-size:1.15rem; line-height:1.6; margin-bottom:1rem; } .testimonial-footer { font-style:normal; color:var(--muted); font-size:0.95rem; } .testimonial-footer strong { display:block; color:var(--text); } /* 10. CALCULATOR RESULT BOX */ .pricing-calc-result { padding:2rem; background:var(--accent-tint); border:2px solid var(--accent); border-radius:var(--radius); text-align:center; } .pricing-calc-label { font-size:0.9rem; color:var(--muted); margin-bottom:0.5rem; } .pricing-calc-amount { font-size:2.5rem; font-weight:700; color:var(--accent); margin:0; } .pricing-calc-subtext { font-size:0.95rem; color:var(--text); margin-top:0.5rem; } html.dark-mode .pricing-calc-result { border-color:var(--accent-4); } html.dark-mode .pricing-calc-amount { color:#c5d9ff; } html.dark-mode .pricing-calc-subtext { color:#ffffff; } /* 14. LEGAL PAGE HERO */ .legal-hero { padding-bottom:2rem; border-bottom:var(--border-soft); } .legal-meta { color:var(--muted); font-size:0.95rem; margin-top:0.5rem; } /* 15. METRIC CARD FOR HERO VISUALS */ .metric-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); } .metric-card { padding:1.5rem; background:var(--accent-tint); border-radius:12px; text-align:center; border:var(--border-soft); transition:transform 220ms ease, box-shadow 220ms ease; } .metric-value { font-size:2rem; font-weight:700; color:var(--accent); margin:0 0 0.25rem 0; } .metric-label { font-size:0.85rem; color:var(--muted); margin:0; text-transform:uppercase; letter-spacing:0.05em; font-weight:600; } html.dark-mode .metric-value { color:#c5d9ff; } @media (hover: hover) { .metric-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(var(--brand-dark-rgb),0.08); } } /* Responsive */ @media (max-width:768px) { .timeline::before { left:0; } .timeline-item { padding-left:2.5rem !important; padding-right:0 !important; text-align:left !important; } .timeline-marker { left:0; } .client-logos { grid-template-columns:repeat(auto-fit, minmax(100px, 1fr)); gap:1rem; } .performance-badges { flex-direction:column; } .metric-grid { gap:1rem; } } /* Cross-device polish layer (mobile, tablet, desktop) */ body{ padding:max(1rem, min(2.2vw, 2rem)); padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right)); } .site-wrapper{ max-width:min(1280px, 100%); gap:clamp(1.4rem, 2.2vw, 2.5rem); } .site-header{ top:clamp(.5rem, 1.5vw, 1rem); padding:clamp(.75rem, 1.5vw, 1.25rem) clamp(.9rem, 1.8vw, 1.5rem); } .logo{ height:clamp(72px, 10vw, 128px); max-width:clamp(150px, 24vw, 260px); } .hero, .page-hero{ padding:clamp(1.25rem, 3.2vw, 3rem); } .hero-title, .page-hero .hero-title, .services-hero .hero-title{ font-size:clamp(1.45rem, 3.8vw, 3rem); text-wrap:balance; } .lead, .service-card p, .process-step p, .case-card p, .contact-card p, .faq details p{ max-width:72ch; } .nav-list{ flex-wrap:wrap; row-gap:.45rem; } .nav-list a{ padding:.5rem .7rem; } .button, .button.primary, .button.ghost{ min-height:44px; } .service-card, .process-step, .case-card, .contact-card, .metric-card, .tooling-card{ overflow-wrap:anywhere; } @media (max-width:767px){ .site-header{ gap:.35rem; } .site-nav{ max-height:min(70vh, 520px); overflow:auto; } .hero-grid, .split{ gap:1.25rem; } .hero-ctas{ gap:.55rem; } .metric-grid, .service-grid, .process-steps, .case-grid, .contact-grid, .tooling-grid{ gap:1rem; } } @media (min-width:768px) and (max-width:1199px){ .hero-grid{ grid-template-columns:minmax(0, 1fr); gap:1.75rem; } .hero-content{ max-width:none; } .hero-visual{ max-width:760px; margin:0 auto; } .footer-content{ gap:1.5rem; } } @media (min-width:1200px){ .site-header{ padding:1rem 1.65rem; } .hero-grid{ gap:3rem; } .service-grid, .tooling-grid, .process-steps, .case-grid, .contact-grid{ gap:1.6rem; } } /* Recommendation pack: iPad portrait ergonomics */ @media (min-width:768px) and (max-width:1024px) and (orientation:portrait){ .site-header{ position:static; } .hero-grid{ grid-template-columns:minmax(0, 1fr); gap:1.5rem; } .hero-visual, .hero-media{ max-width:680px; margin-inline:auto; } .service-grid, .tooling-grid, .process-steps, .case-grid, .contact-grid{ grid-template-columns:minmax(0, 1fr); } .footer-content{ grid-template-columns:repeat(2, minmax(0, 1fr)); } } /* Recommendation pack: small Android widths (~360px) */ @media (max-width:420px){ body{ padding:.7rem; } .site-wrapper{ gap:1rem; } .site-header{ padding:.5rem .6rem; border-radius:14px; } .logo{ height:64px; max-width:140px; } .hero, .page-hero, .card, .contact-card, .service-item, .service-card, .process-step, .case-card, .tooling-card{ padding:1rem; border-radius:14px; } .hero-title, .page-hero .hero-title, .services-hero .hero-title{ font-size:1.3rem; } .hero-ctas .button, .cta-actions .button, .dark-toggle, .mobile-nav-toggle, .back-to-top{ min-height:48px; } .button, .button.primary, .button.ghost{ width:100%; } .metric-grid, .trust-list, .chips, .hero-highlights{ gap:.5rem; } .cta-assurance{ padding-left:1rem; } } /* Recommendation pack: ultrawide desktop polish */ @media (min-width:1440px){ :root{ --max-width:1380px; } body{ font-size:17px; } .hero{ padding:3.2rem 3rem; } .hero-grid{ grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); } .service-grid, .tooling-grid, .case-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .process-steps{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .contact-grid{ grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); } } /* Refactor layer 2026-03: site-wide visual system refresh (structure and design only). */ :root{ --header-offset: 156px; --radius-lg: 22px; --radius-md: 16px; --radius-sm: 12px; --surface-0: #f4f9ff; --surface-1: #ffffff; --surface-2: #edf5ff; --ink-strong: #071022; --ink-soft: #41536f; } html.dark-mode{ --surface-0: #0f1828; --surface-1: #131f31; --surface-2: #1a2940; --ink-strong: #f0f5ff; --ink-soft: #d7e6ff; } html{ scroll-padding-top: var(--header-offset); } body{ color: var(--ink-strong); background: radial-gradient(1200px 600px at 8% -15%, rgba(122,162,255,0.22), transparent 56%), radial-gradient(900px 500px at 95% 5%, rgba(58,102,237,0.16), transparent 58%), linear-gradient(180deg, #eaf4ff 0%, #e2f0ff 46%, #d8eaff 100%); } html.dark-mode body{ background: radial-gradient(1000px 520px at 10% -12%, rgba(58,102,237,0.22), transparent 58%), radial-gradient(820px 420px at 90% 0%, rgba(122,162,255,0.16), transparent 60%), linear-gradient(180deg, #0a101b 0%, #101827 100%); } .site-wrapper{ max-width: min(1280px, 100%); gap: clamp(1.4rem, 2vw, 2.5rem); } .site-header{ border-radius: var(--radius-lg); border: 1px solid rgba(58,102,237,0.17); background: linear-gradient(165deg, rgba(255,255,255,0.9), rgba(241,248,255,0.85)); box-shadow: 0 16px 40px rgba(14,35,84,0.12); } html.dark-mode .site-header{ border-color: rgba(122,162,255,0.24); background: linear-gradient(165deg, rgba(16,25,40,0.88), rgba(12,20,33,0.9)); box-shadow: 0 20px 50px rgba(0,0,0,0.34); } .site-header.compact{ box-shadow: 0 10px 26px rgba(14,35,84,0.16); } .logo{ filter: drop-shadow(0 10px 20px rgba(58,102,237,0.14)); } .header-actions{ gap: .9rem; } .nav-list{ gap: .25rem; } .nav-list a{ border-radius: 999px; font-weight: 700; color: var(--ink-soft); } .nav-list a:hover{ background: linear-gradient(135deg, rgba(58,102,237,0.12), rgba(122,162,255,0.1)); color: var(--ink-strong); } .nav-list a[aria-current="page"], .nav-list a.active{ background: linear-gradient(135deg, rgba(58,102,237,0.22), rgba(122,162,255,0.16)); color: #0d1f44; border-color: rgba(58,102,237,0.28); } .dark-toggle{ border-radius: 999px; padding: .55rem .92rem; } .hero, .page-hero{ border-radius: 28px; border: 1px solid rgba(58,102,237,0.16); box-shadow: 0 30px 70px rgba(26,61,132,0.16); } .hero-title, .page-hero .hero-title, .services-hero .hero-title{ letter-spacing: -0.02em; text-wrap: balance; } .lead{ color: var(--ink-soft); max-width: 70ch; } .metric-card, .service-card, .tooling-card, .process-step, .case-card, .contact-card, .pricing-card, .card{ border-radius: var(--radius-md); border: 1px solid rgba(58,102,237,0.12); background: linear-gradient(165deg, var(--surface-1), var(--surface-0)); box-shadow: 0 14px 36px rgba(14,35,84,0.11); } html.dark-mode .metric-card, html.dark-mode .service-card, html.dark-mode .tooling-card, html.dark-mode .process-step, html.dark-mode .case-card, html.dark-mode .contact-card, html.dark-mode .pricing-card, html.dark-mode .card{ border-color: rgba(122,162,255,0.22); background: linear-gradient(165deg, rgba(17,26,40,0.92), rgba(14,22,35,0.92)); box-shadow: 0 20px 44px rgba(0,0,0,0.36); } .button.primary{ border-radius: 999px; background: linear-gradient(135deg, #2f62e2, #5a86ff); } html.dark-mode .button.primary{ color:#071022; } .button.ghost{ border-radius: 999px; } .faq details, .service-item, .avail-wrap, .availability-widget, .pricing-calculator, .timeline-content, .testimonial-card{ border-radius: var(--radius-md); border: 1px solid rgba(58,102,237,0.12); } .availability-widget__day{ border-radius: var(--radius-sm); } input[type="text"], input[type="email"], textarea, select{ border-radius: var(--radius-sm); border: 1px solid rgba(58,102,237,0.24); background: var(--surface-1); } html.dark-mode input[type="text"], html.dark-mode input[type="email"], html.dark-mode textarea, html.dark-mode select{ color: var(--ink-strong); border-color: rgba(122,162,255,0.36); background: linear-gradient(165deg, rgba(16,24,38,0.96), rgba(13,21,34,0.94)); } input[type="text"]:focus-visible, input[type="email"]:focus-visible, textarea:focus-visible, select:focus-visible{ box-shadow: 0 0 0 4px rgba(58,102,237,0.2); } /* Keep contact reason select arrow/contrast after global form control styles. */ .contact-reason select{ -webkit-appearance:menulist; appearance:auto; background-image:none; padding-right:.85rem; } html.dark-mode .contact-reason select{ color:var(--text); -webkit-text-fill-color:var(--text); background-color:rgba(20,24,36,0.85); border-color:rgba(255,255,255,0.15); background-image:none; } @media (max-width: 767px){ .contact-reason select, input[type="text"], input[type="email"], textarea, select{ font-size:16px; } .contact-reason select{ min-height:48px; padding-right:.85rem; -webkit-appearance:menulist; appearance:auto; background-image:none; } } footer .footer-inner, footer{ border-top-color: rgba(58,102,237,0.26); } .cta-strip{ border-radius: 20px; border: 1px solid rgba(58,102,237,0.2); background: linear-gradient(135deg, rgba(58,102,237,0.12), rgba(122,162,255,0.1)); } @media (max-width: 980px){ .site-header{ border-radius: 16px; } .hero, .page-hero{ border-radius: 18px; } } @media (max-width: 767px){ .site-header{ top: .6rem; padding: .58rem .64rem; } .site-nav{ border: 1px solid rgba(58,102,237,0.2); border-radius: 14px; box-shadow: 0 18px 38px rgba(12,28,68,0.16); } .card, .contact-card, .service-card, .tooling-card, .process-step, .case-card, .pricing-card{ border-radius: 14px; } .button, .button.primary, .button.ghost{ width: 100%; } } /* Dark mode contrast fixes — correct colours that use --ink-strong, --ink-soft, or --accent (#313237 charcoal) which are unreadable on dark backgrounds. */ html.dark-mode .section-kicker{ color:var(--accent-4); } html.dark-mode .principle-title{ background:linear-gradient(90deg, var(--accent-4), var(--accent-5)); color:var(--text); -webkit-text-fill-color:transparent; } html.dark-mode .principle-desc{ color:#e4efff; } html.dark-mode .principles .principle{ background:#162238 !important; border-color:rgba(122,162,255,0.3) !important; } html.dark-mode .principles .principle-title{ background:none !important; -webkit-background-clip:border-box; background-clip:border-box; color:#aecdff !important; -webkit-text-fill-color:currentColor; } html.dark-mode .principles .principle-desc{ color:#deebff !important; } html.dark-mode .hero-proof strong{ color:var(--accent-4); } html.dark-mode .cta-assurance li::marker{ color:var(--accent-4); } html.dark-mode .footer-hours-row span:last-child{ color:var(--text); } html.dark-mode .avail-day.avail-today{ outline-color:var(--accent-4); } html.dark-mode noscript p{ color:var(--text); } html.dark-mode .nav-list a[aria-current="page"], html.dark-mode .nav-list a.active{ color:#eef5ff; } html.dark-mode .nav-list a:hover{ color:var(--text); } html.dark-mode .availability-widget__nav-btn:hover{ color:var(--accent-4); } @media (prefers-reduced-motion: reduce){ .site-header, .logo, .card, .service-card, .tooling-card, .process-step, .case-card, .button, .availability-widget__day{ transition: none !important; } }