/* * design-system.css — Gega Infotech V3 * Single source of truth for all design tokens, base typography, * component classes, animations, and utilities. * * Load order: this file before any page-specific CSS. * text-domain: gega-infotech */ /* ═══════════════════════════════════════════════════════════ 1. DESIGN TOKENS ═══════════════════════════════════════════════════════════ */ :root { /* Colour — Craft palette (default) */ --cream: #FFFFFF; --cream-2: #FFFFFF; --ink: #160E08; --ink-2: #241910; --ink-3: #3A2C22; --terracotta: #C22627; --terracotta-deep: #961D1E; --plum: #4A2B4D; --plum-deep: #321E36; --sage: #7F9470; --gold: #E5B35C; --paper: #FFFFFF; /* same as --cream */ /* Glass surfaces */ --glass: rgba(248, 250, 254, 0.55); --glass-strong: rgba(248, 250, 254, 0.82); --glass-dark: rgba(28, 20, 16, 0.35); /* Borders */ --border: rgba(28, 20, 16, 0.12); --border-strong: rgba(28, 20, 16, 0.22); /* Typography */ --font-display: 'IBM Plex Sans', 'Stack Sans Notch', sans-serif; --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* Shadows */ --shadow-sm: 0 2px 8px rgba(28, 20, 16, 0.06); --shadow-md: 0 10px 30px rgba(28, 20, 16, 0.08), 0 2px 6px rgba(28, 20, 16, 0.05); --shadow-lg: 0 30px 80px rgba(28, 20, 16, 0.12), 0 8px 24px rgba(28, 20, 16, 0.06); --shadow-glow: 0 10px 40px rgba(194, 38, 39, 0.25), 0 2px 8px rgba(194, 38, 39, 0.15); /* Radius */ --r-sm: 14px; --r-md: 24px; --r-lg: 36px; --r-xl: 48px; --r-pill: 999px; /* Ink Bloom (set by JS before animation starts) */ --ink-blob-scale: 80; } /* Gega Analytics context — plum-dominant override Apply .gega-analytics to or a top-level wrapper on Analytics pages to shift the entire palette. */ .gega-analytics { --terracotta: #C22627; /* kept for family ties, reduced in usage */ --terracotta-deep: #961D1E; --accent-primary: var(--plum); --accent-secondary: var(--gold); } /* ═══════════════════════════════════════════════════════════ 2. RESET & BASE ═══════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--ink); background: var(--cream); overflow-x: hidden; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Native OS cursor everywhere — custom cursor removed. */ } img, video, svg { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; } a { color: inherit; } ul, ol { list-style: none; } /* ═══════════════════════════════════════════════════════════ 3. PAPER TEXTURE OVERLAY ═══════════════════════════════════════════════════════════ */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0; display: none; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } /* ═══════════════════════════════════════════════════════════ 4. TYPOGRAPHY ═══════════════════════════════════════════════════════════ */ /* Display / heading base */ .display { font-family: var(--font-display); letter-spacing: -0.03em; line-height: 0.95; font-weight: 400; } /* Italic accent — used on inside headings */ .italic, h1 em, h2 em, h3 em, .pull-quote em { font-style: normal; color: var(--terracotta-deep); } /* Eyebrow label */ .eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-3); font-weight: 500; } /* Gega Analytics: display heads via --font-display token */ .gega-analytics h1, .gega-analytics h2, .gega-analytics .display { font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0; font-weight: 520; } .gega-analytics h1 em, .gega-analytics h2 em { color: var(--gold); } /* ═══════════════════════════════════════════════════════════ 5. LAYOUT ═══════════════════════════════════════════════════════════ */ .wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 2; } @media (max-width: 720px) { .wrap { padding: 0 20px; } } section { position: relative; z-index: 2; } /* ═══════════════════════════════════════════════════════════ 6. NAVIGATION ═══════════════════════════════════════════════════════════ */ .nav { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 22px; border-radius: var(--r-pill); background: var(--glass); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 8px 32px rgba(28, 20, 16, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); opacity: 0; animation: nav-in 0.9s 0.2s cubic-bezier(.2, .8, .2, 1) forwards; } @supports not (backdrop-filter: blur(1px)) { .nav { background: rgba(240, 242, 247, 0.97); } } .logo { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; padding-right: 14px; border-right: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .logo-mark { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--gold), var(--terracotta) 60%, var(--plum)); flex-shrink: 0; animation: pulse-mark 4s ease-in-out infinite; } .nav-links { display: flex; align-items: center; gap: 2px; } .nav-links a { padding: 8px 14px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; border-radius: var(--r-pill); transition: color 0.25s ease, background 0.25s ease; font-weight: 450; white-space: nowrap; } .nav-links a:hover { color: var(--terracotta-deep); background: rgba(194, 38, 39, 0.08); } /* Analytics link — only visible in Analytics context */ .nav-links .nav-analytics { display: none; } .gega-analytics .nav-links .nav-analytics { display: block; } .gega-analytics .nav-links .nav-analytics a { color: var(--plum); font-weight: 500; } .nav-cta { padding: 10px 18px; font-size: 13px; font-weight: 500; background: var(--ink); color: var(--cream); border-radius: var(--r-pill); text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(28, 20, 16, 0.3); } .nav-cta svg { transition: transform 0.3s ease; } .nav-cta:hover svg { transform: translate(2px, -2px); } @media (max-width: 820px) { .nav { padding: 8px 14px; } .nav-links { display: none; } } /* ── Services dropdown ── */ .has-dropdown { position: relative; display: flex; align-items: center; border-radius: var(--r-pill); } .has-dropdown.is-open { background: rgba(194, 38, 39, 0.08); } .has-dropdown > a { padding-right: 4px; /* tight gap before chevron */ } .has-dropdown.is-open > a { color: var(--terracotta-deep); } .dropdown-toggle { display: flex; align-items: center; padding: 8px 10px 8px 2px; background: none; border: none; cursor: pointer; color: var(--ink-2); line-height: 1; transition: color 0.25s ease; } .has-dropdown.is-open .dropdown-toggle { color: var(--terracotta-deep); } .dropdown-toggle svg { display: block; transition: transform 0.2s ease; } .has-dropdown.is-open .dropdown-toggle svg { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px); background: var(--glass-strong); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 8px 32px rgba(28, 20, 16, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6); border-radius: 14px; padding: 6px; list-style: none; margin: 0; min-width: 188px; z-index: 101; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease; } .has-dropdown.is-open .dropdown-menu, .has-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .dropdown-menu li { list-style: none; } /* Override .nav-links a for dropdown items */ .dropdown-menu a { display: block; padding: 9px 16px; font-size: 13px; border-radius: 10px; white-space: nowrap; } .dropdown-menu a:hover, .dropdown-menu a:focus { color: var(--terracotta-deep); background: rgba(194, 38, 39, 0.08); outline: none; } /* ═══════════════════════════════════════════════════════════ 7. BUTTONS ═══════════════════════════════════════════════════════════ */ /* Glass pill CTA — signature button */ .btn-glass { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 18px 32px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink); background: linear-gradient(135deg, rgba(248, 250, 254, 0.8), rgba(245, 247, 252, 0.65)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 10px 30px rgba(194, 38, 39, 0.2), 0 2px 6px rgba(28, 20, 16, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(194, 38, 39, 0.1); overflow: hidden; transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), box-shadow 0.35s ease, color 0.3s ease; z-index: 1; } /* Terracotta fill overlay — revealed on hover */ .btn-glass::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--terracotta), var(--gold) 45%, var(--terracotta) 90%); opacity: 0; transition: opacity 0.4s ease; z-index: -1; } /* Shine sweep */ .btn-glass::after { content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.75) 50%, transparent 80%); transform: skewX(-20deg); transition: left 0.7s cubic-bezier(.2, .8, .2, 1); z-index: 2; pointer-events: none; } .btn-glass:hover { transform: translateY(-3px) scale(1.02); color: #fff; box-shadow: 0 20px 50px rgba(194, 38, 39, 0.5), 0 4px 12px rgba(194, 38, 39, 0.3); } .btn-glass:hover::before { opacity: 1; } .btn-glass:hover::after { left: 140%; } /* Arrow badge inside .btn-glass */ .btn-glass .arrow { display: inline-flex; width: 22px; height: 22px; background: var(--ink); color: var(--cream); border-radius: 50%; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), background 0.3s ease, color 0.3s ease; } .btn-glass:hover .arrow { transform: rotate(-45deg) scale(1.1); background: #fff; color: var(--terracotta-deep); } /* Dark-bg variant — used inside .cta-card and Gega Analytics hero */ .btn-glass--on-dark { background: linear-gradient(135deg, rgba(240, 242, 247, 0.9), rgba(240, 242, 247, 0.7)); color: var(--ink); border-color: rgba(255, 255, 255, 0.3); } /* Ghost button */ .btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 18px 8px; font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; position: relative; } .btn-ghost::after { content: ''; position: absolute; bottom: 14px; left: 8px; right: 8px; height: 1px; background: currentColor; transform-origin: left; transition: transform 0.4s cubic-bezier(.2, .8, .2, 1); } .btn-ghost:hover::after { transform: scaleX(1.08); } .btn-ghost svg { transition: transform 0.3s ease; } .btn-ghost:hover svg { transform: translateX(4px); } .btn-ghost--on-dark { color: var(--cream); } /* ═══════════════════════════════════════════════════════════ 8. SECTION HEADER PATTERN ═══════════════════════════════════════════════════════════ */ .sec-head { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; margin-bottom: 80px; align-items: end; } .sec-head-label { display: flex; align-items: center; gap: 12px; } .sec-head-label::before { content: ''; width: 40px; height: 1px; background: var(--ink-3); flex-shrink: 0; } .sec-head h2 { font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 72px); line-height: 1; letter-spacing: -0.03em; font-weight: 400; color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 50; } @media (max-width: 820px) { .sec-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 50px; } } /* ═══════════════════════════════════════════════════════════ 9. TICKER / MARQUEE STRIP ═══════════════════════════════════════════════════════════ */ .ticker { padding: 32px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(to bottom, transparent, rgba(248, 250, 254, 0.5)); overflow: hidden; position: relative; } .ticker-track { display: flex; gap: 60px; animation: scroll-x 40s linear infinite; white-space: nowrap; width: max-content; } .ticker-item { display: flex; align-items: center; gap: 16px; font-family: var(--font-display); font-size: 34px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink-2); } .ticker-item em { font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--terracotta-deep); } .ticker-star { color: var(--gold); font-size: 20px; display: inline-block; animation: spin 12s linear infinite; } /* ═══════════════════════════════════════════════════════════ 10. SERVICE BENTO CARDS ═══════════════════════════════════════════════════════════ */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); gap: 16px; } .service-card { position: relative; padding: 22px; border-radius: var(--r-lg); background: rgba(248, 250, 254, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.6); overflow: hidden; transition: transform 0.5s cubic-bezier(.2, .8, .2, 1), box-shadow 0.5s ease, border-color 0.4s ease; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; box-shadow: var(--shadow-sm); cursor: pointer; } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(194, 38, 39, 0.4); } .service-card::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, transparent, rgba(194, 38, 39, 0.3)); opacity: 0; transition: opacity 0.4s ease; z-index: -1; pointer-events: none; } .service-card:hover::after { opacity: 1; } /* Bento slot sizes */ .bento .s-13 { grid-column: span 6; background: linear-gradient(155deg, rgba(127,148,112,0.15), rgba(127,148,112,0.03)); } .bento .s-14 { grid-column: span 6; background: linear-gradient(155deg, rgba(74,43,77,0.08), rgba(74,43,77,0.02)); } .service-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; } .service-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(.2, .8, .2, 1); color: var(--ink-2); flex-shrink: 0; } .service-card:hover .service-arrow { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: rotate(-45deg); } .service-card h3 { font-family: var(--font-display); font-size: clamp(16px, 1.8vw, 22px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 40; } .bento .s-13 h3, .bento .s-14 h3 { font-size: clamp(24px, 2.8vw, 36px); } .bento .s-13, .bento .s-14 { padding: 48px; } .service-card p { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Icon blob */ .icon-blob { width: 48px; height: 48px; border-radius: 20px; background: linear-gradient(135deg, var(--terracotta), var(--gold)); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; box-shadow: 0 6px 18px rgba(194, 38, 39, 0.3); transition: transform 0.4s cubic-bezier(.2, .8, .2, 1); } .service-card:hover .icon-blob { transform: scale(1.08) rotate(-8deg); } .icon-blob--plum { background: #F0EDE8 !important; box-shadow: none; } .icon-blob--sage { background: #F0EDE8 !important; box-shadow: none; } .icon-blob--ink { background: #F0EDE8 !important; box-shadow: none; } @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .s-1, .bento .s-2, .bento .s-3, .bento .s-4, .bento .s-5, .bento .s-6, .bento .s-7, .bento .s-8, .bento .s-9, .bento .s-10, .bento .s-11, .bento .s-12, .bento .s-13, .bento .s-14 { grid-column: span 2; grid-row: auto; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bento .s-1, .bento .s-2, .bento .s-3, .bento .s-4, .bento .s-5, .bento .s-6, .bento .s-7, .bento .s-8, .bento .s-9, .bento .s-10, .bento .s-11, .bento .s-12, .bento .s-13, .bento .s-14 { grid-column: span 1; } } /* ═══════════════════════════════════════════════════════════ 11. STATS GRID ═══════════════════════════════════════════════════════════ */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .stat { padding: 60px 40px; border-right: 1px solid var(--border); position: relative; transition: background 0.3s ease; } .stat:last-child { border-right: none; } .stat:hover { background: rgba(229, 179, 92, 0.08); } .stat-num { font-family: var(--font-display); font-size: clamp(60px, 8vw, 110px); line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-weight: 400; display: flex; align-items: baseline; gap: 4px; } .stat-num em { font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--terracotta-deep); font-size: 0.6em; } .stat-label { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; margin: 20px 0 10px; color: var(--ink); font-weight: 400; } .stat-desc { font-size: 14px; color: var(--ink-3); line-height: 1.55; max-width: 260px; } @media (max-width: 820px) { .stats-grid { grid-template-columns: 1fr; } .stat { border-right: none; border-bottom: 1px solid var(--border); padding: 40px 20px; } .stat:last-child { border-bottom: none; } } /* ═══════════════════════════════════════════════════════════ 12. TESTIMONIAL CARDS ═══════════════════════════════════════════════════════════ */ .t-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } .t-card { padding: 36px; border-radius: var(--r-lg); background: rgba(248, 250, 254, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), box-shadow 0.4s ease; } .t-card:hover { transform: translateY(-4px) rotate(0deg); box-shadow: var(--shadow-md); } .t-1 { grid-column: span 7; background: linear-gradient(155deg, var(--ink), var(--plum-deep)); color: var(--cream); border-color: rgba(255,255,255,0.08); transform: rotate(-1deg); } .t-2 { grid-column: span 5; background: linear-gradient(155deg, rgba(194,38,39,0.15), rgba(229,179,92,0.1)); transform: rotate(1deg); } .t-3 { grid-column: span 5; transform: rotate(1deg); } .t-4 { grid-column: span 7; background: linear-gradient(155deg, rgba(127,148,112,0.18), rgba(127,148,112,0.04)); transform: rotate(-0.5deg); } .t-quote-mark { font-family: var(--font-display); font-size: 80px; line-height: 0.5; color: var(--terracotta); margin-bottom: 10px; opacity: 0.7; } .t-1 .t-quote-mark { color: var(--gold); } .t-quote { font-family: var(--font-display); font-size: clamp(18px, 2vw, 24px); line-height: 1.35; letter-spacing: -0.01em; margin-bottom: 30px; font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 40; } .t-1 .t-quote { font-size: clamp(22px, 2.3vw, 32px); } .t-meta { display: flex; align-items: center; gap: 14px; } .t-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--terracotta), var(--plum)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-size: 18px; font-weight: 500; flex-shrink: 0; } .t-1 .t-avatar { background: linear-gradient(135deg, var(--gold), var(--terracotta)); } .t-info { display: flex; flex-direction: column; } .t-name { font-weight: 500; font-size: 14px; } .t-role { font-size: 12px; opacity: 0.65; font-family: var(--font-mono); letter-spacing: 0.05em; } @media (max-width: 900px) { .t-grid { grid-template-columns: 1fr; } .t-1, .t-2, .t-3, .t-4 { grid-column: span 1; transform: none; } } /* ═══════════════════════════════════════════════════════════ 13. INDUSTRY MARQUEE ═══════════════════════════════════════════════════════════ */ .ind-marquee { display: flex; gap: 16px; animation: scroll-x 35s linear infinite; width: max-content; padding: 30px 0; } .ind-marquee:hover { animation-play-state: paused; } .ind-card { flex-shrink: 0; width: 300px; aspect-ratio: 4 / 5; border-radius: var(--r-lg); position: relative; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-md); cursor: pointer; transition: transform 0.4s cubic-bezier(.2, .8, .2, 1); } .ind-card:hover { transform: translateY(-8px) scale(1.02); } .ind-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.8s ease, filter 0.4s ease; filter: brightness(0.65) contrast(1.05); } .ind-card:hover .ind-card-bg { transform: scale(1.08); filter: brightness(0.55) contrast(1.05); } .ind-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(28, 20, 16, 0.85) 100%); } .ind-card-inner { position: absolute; inset: 0; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; color: var(--cream); } .ind-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: rgba(240, 242, 247, 0.7); } .ind-name { font-family: var(--font-display); font-size: 38px; letter-spacing: -0.02em; font-weight: 400; line-height: 1; font-variation-settings: "opsz" 144, "SOFT" 60; } .ind-desc { font-size: 13px; color: rgba(240, 242, 247, 0.85); margin-top: 8px; line-height: 1.5; } /* ═══════════════════════════════════════════════════════════ 14. PULL QUOTE ═══════════════════════════════════════════════════════════ */ .pull-quote { font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); padding: 30px 0 30px 26px; border-left: 3px solid var(--terracotta); margin: 30px 0; font-weight: 400; } /* ═══════════════════════════════════════════════════════════ 15. BRIDGE TAGLINE SECTION ═══════════════════════════════════════════════════════════ */ .tagline-bridge { padding: 160px 2rem; text-align: center; position: relative; overflow: hidden; } .tagline-bridge-inner { max-width: 980px; margin: 0 auto; position: relative; z-index: 2; } .tagline-bridge h2 { font-family: var(--font-display); font-size: clamp(36px, 5.5vw, 76px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 400; color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 40; } /* "data" and "intelligence" styled with italic axis */ .tagline-bridge h2 .word-data, .tagline-bridge h2 .word-intelligence { font-style: normal; color: var(--terracotta-deep); } /* "noise" and "guesswork" — heavier, ink */ .tagline-bridge h2 .word-noise, .tagline-bridge h2 .word-guesswork { font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 0; font-weight: 600; } /* The period separating the two clauses */ .tagline-bridge .bridge-divider { display: block; width: 1px; height: 60px; background: linear-gradient(to bottom, var(--ink-3), transparent); margin: 32px auto; } @media (max-width: 720px) { .tagline-bridge { padding: 100px 1.5rem; } } /* Analytics-page echo — quieter version */ .tagline-echo { padding: 60px 2rem; text-align: center; } .tagline-echo p { font-family: var(--font-display); font-size: clamp(20px, 2.8vw, 34px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink-3); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 40; max-width: 700px; margin: 0 auto; } .tagline-echo p em { color: var(--gold); } /* ═══════════════════════════════════════════════════════════ 16. ENGAGEMENT MODELS ═══════════════════════════════════════════════════════════ */ .engagement { padding: 120px 0 100px; background: var(--cream); } .engagement-question { max-width: 880px; margin: 0 auto 72px; text-align: center; } .engagement-eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 22px; opacity: 0.9; } .engagement-question h2 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 30; } .engagement-question h2 em { font-style: normal; color: var(--terracotta-deep); } .engagement-branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1240px; margin: 0 auto; align-items: stretch; } .branch { display: flex; flex-direction: column; height: 100%; } /* — Artifact card — */ .branch-artifact { position: relative; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); padding: 28px 24px 22px; margin-bottom: 28px; height: 420px; display: flex; flex-direction: column; } .branch-num { position: absolute; top: 14px; right: 18px; font-family: var(--font-display); font-style: normal; font-size: 18px; letter-spacing: 0; color: var(--terracotta-deep); opacity: 1; } .artifact-inner { display: flex; flex-direction: column; gap: 16px; height: 100%; justify-content: flex-start; } /* Generic artifact pieces */ .art-row { display: flex; flex-direction: column; gap: 4px; } .art-row-head { padding-top: 6px; } .art-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); opacity: 0.7; } .art-value { font-family: var(--font-display); font-size: 15px; color: var(--ink); font-weight: 400; } .art-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; } .art-divider { height: 1px; background: var(--border); } .art-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .art-chip { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px 10px; } .art-chip--accent { color: var(--terracotta-deep); border-color: rgba(194, 38, 39, 0.45); } .art-chip--plum { color: var(--plum); border-color: rgba(74, 43, 77, 0.35); } .art-chip--sage { color: var(--sage); border-color: rgba(127, 148, 112, 0.45); } /* Artifact 1 — transfer flow */ .art-flow { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 8px 0; } .art-flow-cell { display: flex; flex-direction: column; gap: 4px; } .art-flow-cell--end { text-align: right; } .art-flow-arrow { width: 60px; height: 12px; stroke: var(--terracotta-deep); fill: var(--terracotta-deep); } /* Artifact 2 — perimeter */ .art-perimeter { position: relative; border: 1.5px solid var(--plum); border-radius: 6px; padding: 26px 14px 18px; margin-top: 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; } .art-perimeter-label { position: absolute; top: -7px; left: 12px; background: var(--paper); padding: 0 8px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.16em; color: var(--plum); opacity: 1; } .art-perimeter-box { display: flex; flex-direction: column; gap: 8px; } .art-perimeter-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; } .art-tile { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--plum); background: rgba(74, 43, 77, 0.08); border: 1px solid rgba(74, 43, 77, 0.22); border-radius: 4px; padding: 6px 10px; } .art-tile--operator { background: rgba(74, 43, 77, 0.16); border-color: rgba(74, 43, 77, 0.4); font-weight: 600; } /* Artifact 3 — platform window */ .art-window { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--paper); flex: 1; } .art-window-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: rgba(28, 20, 16, 0.03); } .art-window-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--border); } .art-window-url { margin-left: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--ink-3); opacity: 0.7; } .art-window-body { position: relative; padding: 18px; min-height: 130px; } .art-window-row { height: 8px; border-radius: 3px; background: rgba(28, 20, 16, 0.10); margin-bottom: 10px; width: 80%; } .art-window-row--strong { background: rgba(28, 20, 16, 0.18); width: 60%; height: 12px; } .art-window-row--short { width: 45%; } .art-window-badge { position: absolute; bottom: 14px; right: 14px; background: var(--paper); border: 1.5px solid var(--sage); border-radius: 6px; padding: 7px 12px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 2px 8px rgba(127, 148, 112, 0.18); } .art-window-badge-mark { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--sage); } .art-window-badge-sub { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.10em; color: var(--ink-3); opacity: 0.75; } /* — Branch text — */ .branch-tag { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .branch h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; line-height: 1.25; color: var(--ink); margin-bottom: 14px; letter-spacing: -0.01em; } .branch p { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--ink-3); } .engagement-close { text-align: center; font-family: var(--font-display); font-style: normal; font-size: 18px; color: var(--ink-3); margin-top: 80px; position: relative; padding-top: 28px; } .engagement-close::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 1px; background: var(--terracotta-deep); opacity: 0.6; } @media (max-width: 980px) { .engagement-branches { grid-template-columns: 1fr; gap: 40px; max-width: 560px; } .branch-artifact { height: auto; min-height: 320px; } } /* ═══════════════════════════════════════════════════════════ 17. CTA FINAL CARD ═══════════════════════════════════════════════════════════ */ .cta-final { padding: 140px 0 180px; position: relative; } .cta-card { /* Solid ink fallback first — never rely on transparency for dark surfaces */ background-color: var(--ink); background-image: linear-gradient(145deg, var(--ink), var(--plum-deep)); border-radius: var(--r-xl); padding: 100px 80px; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); } .cta-card::before { content: ''; position: absolute; top: -200px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, var(--terracotta), transparent 60%); opacity: 0.35; filter: blur(40px); animation: float 18s ease-in-out infinite; pointer-events: none; } .cta-card::after { content: ''; position: absolute; bottom: -200px; left: -100px; width: 400px; height: 400px; background: radial-gradient(circle, var(--gold), transparent 60%); opacity: 0.25; filter: blur(50px); animation: float 22s ease-in-out infinite; animation-delay: -8s; pointer-events: none; } .cta-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(240, 242, 247, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 242, 247, 0.04) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(ellipse at 60% 30%, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 60% 30%, black 0%, transparent 70%); pointer-events: none; } .cta-inner { position: relative; z-index: 2; max-width: 760px; } .cta-inner .eyebrow { color: var(--gold); margin-bottom: 24px; display: inline-flex; align-items: center; gap: 10px; } .cta-inner .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold); } .cta-inner h2 { font-family: var(--font-display); font-size: clamp(42px, 6vw, 84px); line-height: 0.95; letter-spacing: -0.035em; color: var(--cream); font-weight: 400; margin-bottom: 30px; font-variation-settings: "opsz" 144, "SOFT" 40; } .cta-inner h2 em { color: var(--gold); } .cta-inner p { font-size: 17px; line-height: 1.6; color: rgba(240, 242, 247, 0.75); margin-bottom: 40px; max-width: 560px; } @media (max-width: 720px) { .cta-card { padding: 60px 30px; border-radius: var(--r-lg); } } /* ═══════════════════════════════════════════════════════════ 18. FOOTER ═══════════════════════════════════════════════════════════ */ footer { background: var(--paper); color: var(--ink); padding: 100px 0 40px; position: relative; overflow: visible; } .footer-mark { font-family: var(--font-display); font-size: clamp(80px, 18vw, 240px); line-height: 1.1; padding-top: 20px; letter-spacing: -0.05em; color: var(--ink-3); font-weight: 400; margin-bottom: 80px; font-variation-settings: "opsz" 144, "SOFT" 60; white-space: nowrap; padding-left: 0; padding-bottom: 32px; overflow: hidden; text-align: center; } .footer-mark em { font-style: normal; background: linear-gradient(135deg, var(--terracotta), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-top: 60px; border-top: 1px solid rgba(240, 242, 247, 0.15); } .footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(28, 20, 16, 0.5); margin-bottom: 20px; font-weight: 500; } .footer-col li { margin-bottom: 10px; } .footer-col a { color: var(--ink); text-decoration: none; font-size: 14.5px; transition: color 0.25s ease, transform 0.3s ease; display: inline-block; } .footer-col a:hover { color: var(--terracotta); transform: translateX(3px); } .footer-col p { font-size: 14px; line-height: 1.65; color: rgba(28, 20, 16, 0.75); } .footer-brand { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--cream); display: flex; align-items: center; gap: 10px; margin-bottom: 20px; letter-spacing: -0.02em; } .footer-bottom { margin-top: 70px; padding-top: 30px; border-top: 1px solid rgba(28, 20, 16, 0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: rgba(28, 20, 16, 0.5); text-transform: uppercase; } .footer-bottom a { color: rgba(28,20,16,0.5); text-decoration: none; transition: color 0.2s; } .footer-bottom a:hover { color: var(--terracotta); } @media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════ 19. SCROLL REVEAL ═══════════════════════════════════════════════════════════ */ .reveal { opacity: 0; transform: translateY(50px); transition: opacity 1s cubic-bezier(.2, .8, .2, 1), transform 1s cubic-bezier(.2, .8, .2, 1); } .reveal.in { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* Belt-and-suspenders: force visible after 2s if observer never fires */ @keyframes revealFallback { to { opacity: 1; transform: none; } } .reveal { animation: revealFallback 0s 2s forwards; } .reveal.in { animation: none; } /* ═══════════════════════════════════════════════════════════ 20. STAGGER LOAD (page-load children) ═══════════════════════════════════════════════════════════ */ .stagger > * { opacity: 0; transform: translateY(30px); animation: fade-up 1s cubic-bezier(.2, .8, .2, 1) forwards; } .stagger > *:nth-child(1) { animation-delay: 0.3s; } .stagger > *:nth-child(2) { animation-delay: 0.45s; } .stagger > *:nth-child(3) { animation-delay: 0.6s; } .stagger > *:nth-child(4) { animation-delay: 0.75s; } .stagger > *:nth-child(5) { animation-delay: 0.9s; } /* ═══════════════════════════════════════════════════════════ 21. INK BLOOM INTRO OVERLAY ═══════════════════════════════════════════════════════════ */ #ink-overlay { position: fixed; inset: 0; z-index: 10000; background: var(--cream); pointer-events: none; /* Contract phase: starts at 1050ms, runs 550ms */ animation: overlay-contract 0.55s cubic-bezier(0.6, 0, 0.4, 1) 1.05s both; } #ink-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } #ink-dot { transform-origin: 50% 50%; transform-box: fill-box; /* Expand: 200ms delay, 700ms duration */ animation: dot-expand 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) 0.2s both, dot-contract 0.55s cubic-bezier(0.6, 0, 0.4, 1) 1.05s both; } @keyframes overlay-contract { from { clip-path: circle(150vmax at 50% 50%); } to { clip-path: circle(0vmax at 50% 50%); } } @keyframes dot-expand { from { transform: scale(1); } to { transform: scale(var(--ink-blob-scale, 80)); } } @keyframes dot-contract { from { transform: scale(var(--ink-blob-scale, 80)); } to { transform: scale(0); } } /* ═══════════════════════════════════════════════════════════ 22. CUSTOM CURSOR — REMOVED Native OS cursor everywhere. Classes neutralized so any leftover markup never renders a visual cursor element. ═══════════════════════════════════════════════════════════ */ .cursor-dot, .cursor-ring { display: none !important; } /* ═══════════════════════════════════════════════════════════ 23. GEGA ANALYTICS — DATA-LINE MOTIF Exclusive to Analytics pages. Never appears on Craft pages. ═══════════════════════════════════════════════════════════ */ .data-line-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .data-line-bg svg { width: 100%; height: 100%; opacity: 0.12; } .data-line-bg .dl-path { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 6 10; animation: dl-flow 20s linear infinite; } .data-line-bg .dl-path:nth-child(2) { stroke: var(--plum); animation-duration: 28s; animation-delay: -8s; } .data-line-bg .dl-path:nth-child(3) { stroke: var(--terracotta); animation-duration: 35s; animation-delay: -15s; } @keyframes dl-flow { to { stroke-dashoffset: -400; } } /* ═══════════════════════════════════════════════════════════ 24. KEYFRAME ANIMATIONS ═══════════════════════════════════════════════════════════ */ @keyframes fade-up { to { opacity: 1; transform: translateY(0); } } @keyframes nav-in { from { opacity: 0; transform: translateX(-50%) translateY(-20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.05); } 66% { transform: translate(-30px, 20px) scale(0.95); } } @keyframes gentle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes scroll-x { to { transform: translateX(-50%); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse-mark { 0%, 100% { box-shadow: 0 0 0 0 rgba(194, 38, 39, 0.3); } 50% { box-shadow: 0 0 0 6px rgba(194, 38, 39, 0); } } @keyframes blink { 50% { opacity: 0.3; } } @keyframes dash { to { stroke-dashoffset: -300; } } @keyframes slide-down { 0% { top: -20px; } 100% { top: 100%; } } @keyframes bar-grow { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.6); } } @keyframes rotate-in { 0%, 25% { opacity: 1; transform: translateY(0); } 30%, 95% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════ 25. UTILITY CLASSES ═══════════════════════════════════════════════════════════ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .mt-sm { margin-top: 16px; } .mt-md { margin-top: 32px; } .mt-lg { margin-top: 48px; } .gap-sm { gap: 12px; } .gap-md { gap: 20px; } .flex { display: flex; } .flex-center { display: flex; align-items: center; } .flex-wrap { flex-wrap: wrap; } /* ═══════════════════════════════════════════════════════════ 26. SCROLL-TO-TOP / MINI NAV Fixed bottom-right. Pill expands on hover to show anchors. z-index 500 — below cookie consent (typically 9999). ═══════════════════════════════════════════════════════════ */ .scroll-nav { position: fixed; bottom: 28px; right: 24px; z-index: 500; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .scroll-nav-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.22s ease, transform 0.22s ease; } .scroll-nav:hover .scroll-nav-links, .scroll-nav:focus-within .scroll-nav-links { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-nav-links a { display: block; padding: 6px 14px; border-radius: var(--r-pill); background: var(--ink); color: rgba(240, 242, 247, 0.75); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border: 1px solid rgba(240, 242, 247, 0.1); transition: background 0.2s ease, color 0.2s ease; } .scroll-nav-links a:hover { background: var(--terracotta-deep); color: var(--cream); border-color: transparent; } .scroll-top-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); border: 1px solid rgba(240, 242, 247, 0.15); color: var(--cream); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.22s ease; flex-shrink: 0; } .scroll-top-btn:hover { background: var(--terracotta-deep); transform: translateY(-2px); } @media (max-width: 560px) { .scroll-nav { bottom: 18px; right: 14px; } } /* ═══════════════════════════════════════════════════════════ 27. REDUCED MOTION — must be last ═══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Ink Bloom: skip overlay entirely for reduced-motion users (handled in JS skip conditions, but belt-and-suspenders) */ #ink-overlay { display: none !important; } /* Constellation + marquee: pause */ .ind-marquee, .ticker-track { animation-play-state: paused !important; } } /* ═══════════════════════════════════════════════════════════ BENTO V2 — three-layer architecture Layer 1: umbrella card (span 6, full row) Layer 2: 9 vertical cards (span 2 each, 3 per row) Layer 3: 2 feature cards (s-13, s-14, span 3 each — existing) ═══════════════════════════════════════════════════════════ */ .bento-v2 { grid-auto-rows: minmax(180px, auto); gap: 16px; } /* ── ICON-BLOB GOLD VARIANT (used by Layer 2 gold cards) ── */ .icon-blob--gold { background: linear-gradient(135deg, var(--gold), #c2913a); box-shadow: 0 6px 18px rgba(229,179,92,0.30); } /* ───────────────────────────────────────────────────────────── LAYER 1 — UMBRELLA CARD ───────────────────────────────────────────────────────────── */ .bento-v2 .bento-umbrella { grid-column: span 6; position: relative; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: center; padding: 44px 48px; border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(248,250,254,0.85), rgba(245,247,252,0.65)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(250,252,255,0.7); box-shadow: var(--shadow-md); text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s ease; } .bento-v2 .bento-umbrella::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(194,38,39,0.12), rgba(229,179,92,0.18)); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .bento-v2 .bento-umbrella:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .bento-v2 .bento-umbrella:hover::before { opacity: 0.08; } .umbrella-text { position: relative; z-index: 2; } .umbrella-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 18px; } .umbrella-title { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.02; letter-spacing: -0.025em; font-weight: 400; color: var(--ink); font-variation-settings: "opsz" 96, "SOFT" 40; margin: 0 0 14px; } .umbrella-title em { font-style: normal; color: var(--terracotta-deep); } .umbrella-sub { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); max-width: 380px; margin: 0; } .umbrella-pills { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 12px 12px; align-items: flex-start; } .u-pill { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px; background: rgba(250,252,255,0.88); border: 1px solid rgba(28,20,16,0.10); font-family: var(--font-body); font-size: 12.5px; line-height: 1; color: var(--ink); white-space: nowrap; transition: transform 0.32s cubic-bezier(.2,.8,.2,1), background 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease; cursor: pointer; } .u-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); margin-right: 8px; flex-shrink: 0; } .u-pill:hover { transform: translateY(-2px) scale(1.04); background: #fff; border-color: var(--terracotta); box-shadow: 0 8px 18px -6px rgba(194,38,39,0.35); } /* Magnetic neighbor recoil — only when sibling is hovered */ @media (hover: hover) { .umbrella-pills:has(.u-pill:hover) .u-pill:not(:hover) { transform: translateX(2px); } } /* ───────────────────────────────────────────────────────────── LAYER 2 — VERTICAL CARDS ───────────────────────────────────────────────────────────── */ .bento-v2 .v-card { grid-column: span 2; position: relative; padding: 24px 22px 22px; border-radius: var(--r-md); background: rgba(248,250,254,0.70); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(250,252,255,0.65); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease, border-color 0.45s ease; display: flex; flex-direction: column; min-height: 220px; } .bento-v2 .v-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .v-stripe { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--v-accent, var(--terracotta)); transition: height 0.3s ease; } .bento-v2 .v-card:hover .v-stripe { height: 8px; } /* Accent variants */ .v-terra { --v-accent: var(--terracotta); } .v-sage { --v-accent: var(--sage); } .v-gold { --v-accent: var(--gold); } .v-plum { --v-accent: var(--plum); } .v-ink { --v-accent: var(--ink-2); } .v-num { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding-top: 6px; } .v-num > span:first-child { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); } .v-icon { position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: transform 0.4s cubic-bezier(.2,.8,.2,1); z-index: 2; } .bento-v2 .v-card:hover .v-icon { transform: scale(1.08) rotate(-8deg); } .bento-v2 .v-card h3 { font-family: var(--font-display); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 400; color: var(--ink); font-variation-settings: "opsz" 72, "SOFT" 50; margin: 0 56px 10px 0; } .bento-v2 .v-card p { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(1.5em * 2); transition: max-height 0.45s cubic-bezier(.2,.8,.2,1), -webkit-line-clamp 0s linear 0.45s; } .bento-v2 .v-card:hover p { -webkit-line-clamp: 4; max-height: calc(1.5em * 4); } /* ───────────────────────────────────────────────────────────── MOBILE — collapse umbrella + grid ───────────────────────────────────────────────────────────── */ @media (max-width: 980px) { .bento-v2 .bento-umbrella { grid-template-columns: 1fr; padding: 36px 28px; gap: 24px; } .umbrella-sub { max-width: none; } } @media (max-width: 900px) { .bento-v2 .v-card { grid-column: span 3; } } @media (max-width: 560px) { .bento-v2 .v-card { grid-column: span 6; } .bento-v2 .bento-umbrella { padding: 28px 20px; } } /* ───────────────────────────────────────────────────────────── REDUCED MOTION ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .u-pill { transform: none !important; } .umbrella-pills:has(.u-pill:hover) .u-pill:not(:hover) { transform: none !important; } .bento-v2 .v-card p { -webkit-line-clamp: 4; max-height: none; } } /* ── BENTO V2 — link reset (umbrella + v-cards are ) ── */ .bento-v2 .bento-umbrella, .bento-v2 .v-card, .bento-v2 .bento-umbrella *, .bento-v2 .v-card * { text-decoration: none; color: inherit; } .bento-v2 .v-card h3, .bento-v2 .v-card p, .bento-v2 .umbrella-title, .bento-v2 .umbrella-sub { text-decoration: none !important; } /* ── GLOBAL READABILITY (low-quality screens) ── */ html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-weight: 440; font-feature-settings: "kern", "liga", "calt"; } p, li, dd, .hero-sub, .v-card p, .umbrella-sub, .method-pillar p, .stat-desc, .branch p, .s-feature-body, .router-card-body { font-weight: 440; } /* ═══════════════════════════════════════════════════════════ PALETTE OPTION 2 — surface-tier overrides Added 2026-04-28. Append-only. Delete this block to revert. Page bg stays --cream. Text-bearing surfaces lift to near-white. ═══════════════════════════════════════════════════════════ */ :root { --surface-1: #F4F3F1; /* warmer card surface — bento verticals */ --surface-2: #F4F3F1; /* cleanest readable surface — high-emphasis cards */ } body .bento-v2 .v-card { background-color: var(--surface-1); } body .bento-v2 .bento-umbrella, body .router-card, body .branch { background-color: var(--surface-2); } /* ═══════════════════════════════════════════════════════════ ENGAGEMENT MODELS — Section 5 ═══════════════════════════════════════════════════════════ */ .engagement { padding: 120px 0 80px; position: relative; } .engagement-question { text-align: center; max-width: 680px; margin: 0 auto 64px; opacity: 0; transform: translateY(32px); } .engagement-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 18px; } .engagement-question h2 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 58px); font-weight: 400; line-height: 1.06; letter-spacing: -0.03em; color: var(--ink); font-variation-settings: "opsz" 96, "SOFT" 40; } .engagement-question h2 em { font-style: normal; color: var(--terracotta-deep); } .engagement-branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; max-width: 1100px; margin: 0 auto; } .branch { background: var(--paper); border: 1px solid rgba(28,20,16,0.20); border-radius: var(--r-lg); overflow: hidden; opacity: 0; transform: translateY(48px); transition: box-shadow 0.35s ease, border-color 0.35s ease; } .branch:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg); border-color: rgba(194, 38, 39, 0.22); } .branch-artifact { padding: 22px 22px 18px; background: rgba(250, 243, 231, 0.5); border-bottom: 1px solid var(--border); min-height: auto; display: flex; flex-direction: column; position: relative; } .branch-num { position: absolute; top: 18px; right: 20px; font-family: var(--font-mono); font-size: 22px; font-weight: 300; color: rgba(28, 20, 16, 0.14); letter-spacing: -0.04em; line-height: 1; } .artifact-inner { display: flex; flex-direction: column; gap: 10px; flex: 1; } .art-row-head { display: flex; flex-direction: column; gap: 3px; } .art-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); } .art-value { font-size: 12px; color: var(--ink-2); line-height: 1.3; } .art-value.art-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.01em; } .art-divider { height: 1px; background: var(--border); flex-shrink: 0; } .art-flow { display: flex; align-items: center; gap: 8px; } .art-flow-cell { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; } .art-flow-cell--end { text-align: right; } .art-flow-arrow { flex: 1; min-width: 30px; stroke: var(--terracotta); fill: var(--terracotta); opacity: 0.65; } .art-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; } .art-chip { display: inline-block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.15em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--ink-3); background: rgba(255, 255, 255, 0.55); } .art-chip--accent { border-color: rgba(127,148,112,0.35); color: #4a6640; background: rgba(127,148,112,0.08); } .art-chip--plum { border-color: rgba(74,43,77,0.28); color: var(--plum-deep); background: rgba(74,43,77,0.06); } .art-chip--sage { border-color: rgba(229,179,92,0.35); color: #7a5a1a; background: rgba(229,179,92,0.10); } .art-perimeter { display: flex; flex-direction: column; gap: 7px; flex: 1; } .art-perimeter-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } .art-perimeter-box { border: 1px solid var(--border-strong); border-radius: 8px; padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; } .art-perimeter-row { display: flex; gap: 5px; flex-wrap: wrap; } .art-tile { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border); color: var(--ink-3); background: rgba(250,252,255,0.55); } .art-tile--operator { border-color: rgba(194,38,39,0.3); color: var(--terracotta-deep); background: rgba(194,38,39,0.06); } .art-window { border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; flex: 1; } .art-window-bar { background: rgba(28,20,16,0.05); border-bottom: 1px solid var(--border); padding: 7px 10px; display: flex; align-items: center; gap: 5px; } .art-window-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(28,20,16,0.15); flex-shrink: 0; } .art-window-url { font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-3); letter-spacing: 0.04em; margin-left: 4px; flex: 1; } .art-window-body { padding: 10px 11px; display: flex; flex-direction: column; gap: 6px; position: relative; min-height: 70px; } .art-window-row { height: 7px; background: rgba(28,20,16,0.10); border-radius: 3px; width: 75%; } .art-window-row--strong { background: rgba(28,20,16,0.18); width: 88%; } .art-window-row--short { width: 48%; } .art-window-badge { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border: 1px solid rgba(194,38,39,0.32); border-radius: 6px; background: rgba(194,38,39,0.06); line-height: 1.35; } .art-window-badge-mark { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; color: var(--terracotta-deep); } .art-window-badge-sub { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.08em; color: var(--ink-3); } .branch-tag { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--terracotta-deep); padding: 20px 22px 0; } .branch h3 { font-family: var(--font-display); font-size: clamp(18px, 1.8vw, 22px); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); font-variation-settings: "opsz" 72, "SOFT" 40; padding: 8px 22px 0; } .branch p { font-size: 13.5px; line-height: 1.68; color: var(--ink-3); padding: 10px 22px 24px; } .engagement-close { text-align: center; margin-top: 52px; font-family: var(--font-display); font-size: clamp(16px, 1.6vw, 20px); font-style: normal; color: var(--ink-3); opacity: 0; transform: translateY(20px); } @media (max-width: 920px) { .engagement-branches { grid-template-columns: 1fr; max-width: 480px; } } @media (max-width: 600px) { .engagement { padding: 80px 0 60px; } .engagement-question { margin-bottom: 44px; } } /* ═══════════════════════════════════════════════ LOGO IMAGE ═══════════════════════════════════════════════ */ .logo-img { display: block; height: 42px; width: auto; } /* Footer logo — plain on light bg, no chip */ .logo-img--footer { display: block; height: 80px; width: auto; margin-bottom: 20px; } /* ── Analytics page footer ── */ .ga-foot { background: #0d0d0d; color: rgba(240,242,247,0.45); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; padding: 32px 24px; border-top: 1px solid rgba(240,242,247,0.08); } .ga-foot a { color: rgba(240,242,247,0.45); text-decoration: none; } .ga-foot a:hover { color: var(--gold); } /* FOOTER MARK FIX */ footer#site-footer { overflow: hidden; } .footer-mark { font-size: clamp(40px, 11vw, 160px) !important; padding-bottom: 60px !important; overflow: hidden !important; } /* ═══════════════════════════════════════════════════════════ LANDING PAGE — single-gega_service.php ═══════════════════════════════════════════════════════════ */ body.lp-page .nav { display: none !important; } /* Nav */ .lp-nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 14px 40px; background: rgba(240,242,247,0.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .lp-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; } .lp-nav-logo img { height: 32px; width: auto; } .lp-nav-cta { display: inline-flex; align-items: center; padding: 10px 22px; background: var(--ink); color: var(--cream); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: background 0.25s ease; } .lp-nav-cta:hover { background: var(--terracotta); } /* Two-column layout */ .lp-layout { display: grid; grid-template-columns: 1fr 380px; align-items: start; max-width: 1200px; margin: 0 auto; padding: 0 40px; gap: 48px; } /* Left content */ .lp-main { min-width: 0; } .lp-hero-block { padding: 60px 0 48px 8px; border-bottom: 1px solid var(--border); } .lp-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 16px; } .lp-h1 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 46px); font-weight: 400; line-height: 1.08; letter-spacing: -0.03em; color: var(--ink); font-variation-settings: "opsz" 96, "SOFT" 40; margin-bottom: 16px; } .lp-sub { font-size: 16px; line-height: 1.65; color: var(--ink-3); margin-bottom: 28px; max-width: 560px; } .lp-trust-list { display: flex; flex-direction: column; gap: 10px; } .lp-trust-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); } .lp-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(127,148,112,0.15); color: #4a6640; font-size: 11px; font-weight: 700; flex-shrink: 0; } /* Content blocks */ .lp-block { padding: 48px 0 48px 8px; border-bottom: 1px solid var(--border); } .lp-block-alt { background: none; } .lp-sec-h { font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 28px); font-weight: 400; letter-spacing: -0.025em; color: var(--ink); font-variation-settings: "opsz" 72, "SOFT" 40; margin-bottom: 28px; } /* Features */ .lp-feats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; } .lp-feat { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px; } .lp-feat-ico { font-size: 20px; margin-bottom: 10px; } .lp-feat-title { font-family: var(--font-display); font-size: 16px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink); font-variation-settings: "opsz" 72, "SOFT" 40; margin-bottom: 7px; } .lp-feat-body { font-size: 13.5px; line-height: 1.65; color: var(--ink-3); } /* Process */ .lp-steps { display: flex; align-items: flex-start; gap: 16px; } .lp-step { flex: 1; } .lp-step-n { font-family: var(--font-mono); font-size: 28px; font-weight: 300; color: rgba(28,20,16,0.12); letter-spacing: -0.04em; line-height: 1; margin-bottom: 10px; } .lp-step h3 { font-family: var(--font-display); font-size: 15px; font-weight: 400; color: var(--ink); font-variation-settings: "opsz" 72, "SOFT" 40; margin-bottom: 7px; } .lp-step p { font-size: 13.5px; line-height: 1.65; color: var(--ink-3); } .lp-step-div { font-size: 18px; color: rgba(28,20,16,0.2); margin-top: 14px; flex-shrink: 0; } /* Use case */ .lp-case-card { background: var(--paper); border: 1px solid var(--border); border-left: 3px solid var(--terracotta); border-radius: var(--r-md); padding: 28px 32px; } .lp-case-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 10px; } .lp-case-body { font-size: 14px; line-height: 1.7; color: var(--ink-3); } /* Who */ .lp-who-p { font-size: 15px; line-height: 1.75; color: var(--ink-3); max-width: 600px; } /* FAQ */ .lp-faqs { border-top: 1px solid var(--border); } .lp-faq-item { border-bottom: 1px solid var(--border); } .lp-faq-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; background: none; border: none; text-align: left; cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink); gap: 16px; } .lp-faq-btn:hover { color: var(--terracotta-deep); } .lp-faq-chevron { flex-shrink: 0; transition: transform 0.25s ease; color: var(--ink-3); } .lp-faq-ans { padding: 0 0 18px; } .lp-faq-ans p { font-size: 13.5px; line-height: 1.7; color: var(--ink-3); } /* CTA band (shows on mobile only) */ .lp-cta-band { display: none; background: var(--ink); padding: 60px 0; text-align: center; margin: 0 -40px; } .lp-cta-band h2 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 34px); font-weight: 400; letter-spacing: -0.03em; color: var(--cream); font-variation-settings: "opsz" 96, "SOFT" 40; margin-bottom: 12px; } .lp-cta-band p { font-size: 15px; color: rgba(240,242,247,0.65); margin-bottom: 28px; } .lp-cta-anchor { display: inline-flex; align-items: center; padding: 13px 28px; background: var(--terracotta); color: #fff; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: background 0.25s ease; } .lp-cta-anchor:hover { background: var(--terracotta-deep); } /* Prose */ .lp-prose { font-size: 14px; line-height: 1.75; color: var(--ink-3); } .lp-prose h2 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--ink); margin: 28px 0 10px; } .lp-prose p { margin-bottom: 14px; } /* RIGHT: sticky sidebar */ .lp-sidebar { position: sticky; top: 74px; padding: 48px 0 48px; align-self: start; } .lp-form-wrap { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-md); } .lp-form-heading { font-family: var(--font-display); font-size: 18px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink); font-variation-settings: "opsz" 72, "SOFT" 40; margin-bottom: 5px; } .lp-form-note { font-size: 12px; color: var(--ink-3); margin-bottom: 20px; line-height: 1.5; } .lp-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .lp-field label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } .lp-opt { text-transform: none; letter-spacing: 0; font-family: var(--font-body); opacity: 0.6; font-size: 10px; } .lp-field input, .lp-field textarea { width: 100%; padding: 9px 12px; background: rgba(250,252,255,0.7); border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-family: var(--font-body); font-size: 13px; color: var(--ink); outline: none; transition: border-color 0.2s ease; resize: vertical; } .lp-field input:focus, .lp-field textarea:focus { border-color: var(--terracotta); } .lp-submit-btn { width: 100%; padding: 12px; background: var(--terracotta); color: #fff; border: none; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; margin-top: 4px; transition: background 0.25s ease, opacity 0.25s ease; } .lp-submit-btn:hover { background: var(--terracotta-deep); } .lp-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; } .lp-form-ok { margin-top: 12px; font-size: 13px; color: #4a6640; text-align: center; font-weight: 500; } .lp-form-err { margin-top: 12px; font-size: 12px; color: var(--terracotta-deep); text-align: center; } .lp-form-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } /* Footer */ .lp-foot { background: var(--ink); border-top: 1px solid rgba(240,242,247,0.08); padding: 22px 40px; text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240,242,247,0.4); } .lp-foot a { color: rgba(240,242,247,0.55); text-decoration: none; } .lp-foot a:hover { color: var(--cream); } /* Mobile */ @media (max-width: 860px) { .lp-layout { grid-template-columns: 1fr; padding: 0 20px; gap: 0; } .lp-sidebar { position: static; padding: 0 0 40px; order: -1; } .lp-cta-band { display: block; } .lp-nav { padding: 12px 20px; } .lp-steps { flex-direction: column; } .lp-step-div { display: none; } .lp-feats-grid { grid-template-columns: 1fr; } .lp-foot { padding: 18px 20px; } } /* LP layout breathing room */ .lp-layout { padding: 0 48px 0 64px; max-width: 1260px; } .lp-sidebar { padding-top: 48px; padding-right: 8px; } /* Engagement section — anchor and artifact fixes */ .engagement { background: var(--cream-2); } .artifact-transfer .artifact-inner { justify-content: space-between; } .artifact-transfer .art-row-head { margin-bottom: 8px; } .artifact-transfer .art-flow { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); } .branch:hover { border-color: rgba(194,38,39,0.3); } /* ── Engagement cards — nth-child fix ── */ .engagement-branches { gap: 24px; } .engagement-branches .branch:nth-child(1) { border-top: 1.5px solid rgba(28,20,16,0.10); } .engagement-branches .branch:nth-child(2) { border-top: 1.5px solid rgba(28,20,16,0.10); } .engagement-branches .branch:nth-child(3) { border-top: 1.5px solid rgba(28,20,16,0.10); } .engagement-branches .branch:nth-child(1) .branch-artifact { background: rgba(127,148,112,0.08); border-bottom: 1px solid rgba(127,148,112,0.25); } .engagement-branches .branch:nth-child(2) .branch-artifact { background: rgba(74,43,77,0.06); border-bottom: 1px solid rgba(74,43,77,0.2); } .engagement-branches .branch:nth-child(3) .branch-artifact { background: rgba(229,179,92,0.08); border-bottom: 1px solid rgba(229,179,92,0.25); } .engagement-branches .branch:nth-child(1):hover { box-shadow: 0 12px 40px rgba(127,148,112,0.2); transform: translateY(-4px) !important; } .engagement-branches .branch:nth-child(2):hover { box-shadow: 0 12px 40px rgba(74,43,77,0.18); transform: translateY(-4px) !important; } .engagement-branches .branch:nth-child(3):hover { box-shadow: 0 12px 40px rgba(229,179,92,0.2); transform: translateY(-4px) !important; } /* ═══════════════════════════════════════════════════════════ GEGA ANALYTICS PAGE ═══════════════════════════════════════════════════════════ */ body.ga-page { background: #0F0A06; color: var(--cream); } body.ga-page .nav { display: none !important; } .ga-inner { max-width: 1100px; margin: 0 auto; padding: 0 48px; } .ga-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: block; } /* Nav */ .ga-nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px 48px; background: rgba(15,10,6,0.92); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(229,179,92,0.12); } .ga-nav-logo { display: flex; align-items: center; gap: 0; text-decoration: none; color: var(--cream); } /* Pure text wordmark — matches GEGA INFOTECH logo style */ .ga-nav-logo > span { font-family: var(--font-mono); font-weight: 400; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); } .ga-nav-logo em { font-style: normal; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } .ga-nav-cta { padding: 9px 20px; border: 1px solid rgba(229,179,92,0.4); color: var(--gold); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: all 0.25s ease; } .ga-nav-cta:hover { background: var(--gold); color: var(--ink); } /* Hero */ .ga-hero { padding: 100px 0 80px; background: linear-gradient(160deg, #1A0F28 0%, #0F0A06 60%); border-bottom: 1px solid rgba(229,179,92,0.1); } .ga-h1 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 76px); font-weight: 400; line-height: 1.06; letter-spacing: -0.03em; color: var(--cream); font-variation-settings: "opsz" 144, "SOFT" 40; margin-bottom: 24px; } .ga-h1 em { font-style: normal; color: var(--gold); } .ga-hero-sub { font-size: 18px; line-height: 1.7; color: rgba(240,242,247,0.65); max-width: 620px; margin-bottom: 36px; } .ga-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; } .ga-btn-primary { padding: 13px 28px; background: var(--gold); color: var(--ink); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; font-weight: 600; transition: opacity 0.25s ease; } .ga-btn-primary:hover { opacity: 0.88; } .ga-btn-ghost { padding: 13px 28px; border: 1px solid rgba(240,242,247,0.2); color: rgba(240,242,247,0.65); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: all 0.25s ease; } .ga-btn-ghost:hover { border-color: rgba(240,242,247,0.5); color: var(--cream); } .ga-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; } .ga-hero-tags span { padding: 5px 14px; border: 1px solid rgba(74,43,77,0.5); background: rgba(74,43,77,0.15); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240,242,247,0.55); } /* Bridge */ .ga-bridge { padding: 80px 0; background: #0F0A06; border-bottom: 1px solid rgba(240,242,247,0.06); } .ga-bridge-inner { display: grid; grid-template-columns: 1fr 280px; gap: 80px; align-items: center; } .ga-bridge-text h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); font-weight: 400; letter-spacing: -0.025em; color: var(--cream); font-variation-settings: "opsz" 72, "SOFT" 40; margin-bottom: 20px; } .ga-bridge-text p { font-size: 15px; line-height: 1.75; color: rgba(240,242,247,0.55); margin-bottom: 14px; } .ga-bridge-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: block; } .ga-bridge-flow { display: flex; flex-direction: column; align-items: center; gap: 0; } .ga-flow-step { width: 100%; padding: 14px 18px; border: 1px solid rgba(240,242,247,0.1); border-radius: var(--r-sm); background: rgba(255,255,255,0.03); display: flex; align-items: center; gap: 12px; } .ga-flow-step--accent { border-color: rgba(74,43,77,0.5); background: rgba(74,43,77,0.15); } .ga-flow-step--gold { border-color: rgba(229,179,92,0.4); background: rgba(229,179,92,0.08); } .ga-flow-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: rgba(240,242,247,0.3); } .ga-flow-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(240,242,247,0.65); } .ga-flow-step--gold .ga-flow-label { color: var(--gold); } .ga-flow-arrow { text-align: center; color: rgba(240,242,247,0.2); font-size: 16px; padding: 6px 0; } /* Services */ .ga-services { padding: 80px 0; background: #0F0A06; border-bottom: 1px solid rgba(240,242,247,0.06); } .ga-sec-h { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 44px); font-weight: 400; letter-spacing: -0.03em; color: var(--cream); font-variation-settings: "opsz" 96, "SOFT" 40; margin-bottom: 56px; line-height: 1.1; } .ga-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border: 1px solid rgba(240,242,247,0.08); border-radius: var(--r-lg); overflow: hidden; } .ga-svc-card { padding: 36px 32px; background: rgba(255,255,255,0.02); border: 1px solid rgba(240,242,247,0.06); transition: background 0.3s ease; } .ga-svc-card:hover { background: rgba(74,43,77,0.12); } .ga-svc-num { font-family: var(--font-mono); font-size: 28px; font-weight: 300; color: rgba(229,179,92,0.25); letter-spacing: -0.04em; margin-bottom: 16px; } .ga-svc-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; letter-spacing: -0.02em; color: var(--cream); font-variation-settings: "opsz" 72, "SOFT" 40; margin-bottom: 12px; } .ga-svc-card p { font-size: 13.5px; line-height: 1.7; color: rgba(240,242,247,0.5); margin-bottom: 18px; } .ga-svc-list { list-style: none; display: flex; flex-direction: column; gap: 6px; } .ga-svc-list li { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(229,179,92,0.6); padding-left: 14px; position: relative; } .ga-svc-list li::before { content: '—'; position: absolute; left: 0; color: rgba(229,179,92,0.3); } /* Partners */ .ga-partners { padding: 48px 0; border-bottom: 1px solid rgba(240,242,247,0.06); } .ga-partner-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 20px; } .ga-partner { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,242,247,0.3); } .ga-partner-dot { color: rgba(240,242,247,0.15); font-size: 18px; } /* Contact */ .ga-contact { padding: 80px 0; } .ga-contact-inner { display: grid; grid-template-columns: 1fr 480px; gap: 80px; align-items: start; } .ga-contact-left h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); font-weight: 400; letter-spacing: -0.025em; color: var(--cream); font-variation-settings: "opsz" 96, "SOFT" 40; margin-bottom: 18px; line-height: 1.1; } .ga-contact-left p { font-size: 15px; line-height: 1.75; color: rgba(240,242,247,0.5); margin-bottom: 14px; } .ga-contact-email a { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--gold); text-decoration: none; } .ga-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .ga-field label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,242,247,0.4); } .ga-opt { text-transform: none; letter-spacing: 0; font-family: var(--font-body); opacity: 0.5; font-size: 10px; } .ga-field input, .ga-field textarea { width: 100%; padding: 10px 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(240,242,247,0.12); border-radius: var(--r-sm); font-family: var(--font-body); font-size: 14px; color: var(--cream); outline: none; transition: border-color 0.2s ease; resize: vertical; } .ga-field input:focus, .ga-field textarea:focus { border-color: rgba(229,179,92,0.5); } .ga-field input::placeholder, .ga-field textarea::placeholder { color: rgba(240,242,247,0.2); } .ga-submit { width: 100%; padding: 13px; background: var(--gold); color: var(--ink); border: none; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; font-weight: 600; margin-top: 4px; transition: opacity 0.25s ease; } .ga-submit:hover { opacity: 0.88; } .ga-submit:disabled { opacity: 0.5; cursor: not-allowed; } .ga-form-ok { margin-top: 14px; font-size: 13px; color: var(--gold); text-align: center; } .ga-form-err { margin-top: 14px; font-size: 12px; color: rgba(240,242,247,0.5); text-align: center; } /* Footer */ .ga-foot { border-top: 1px solid rgba(240,242,247,0.06); padding: 22px 48px; text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240,242,247,0.25); } .ga-foot a { color: rgba(240,242,247,0.4); text-decoration: none; } .ga-foot a:hover { color: var(--cream); } /* Mobile */ @media (max-width: 860px) { .ga-nav { padding: 14px 20px; } .ga-inner { padding: 0 20px; } .ga-hero { padding: 60px 0 60px; } .ga-bridge-inner { grid-template-columns: 1fr; gap: 40px; } .ga-svc-grid { grid-template-columns: 1fr; } .ga-contact-inner { grid-template-columns: 1fr; gap: 40px; } .ga-foot { padding: 18px 20px; } } /* ═══════════════════════════════════════════════════════════ MOBILE PASS — small screen fixes Added 2026-05. Append-only. ═══════════════════════════════════════════════════════════ */ /* Stats grid: 3-col → 1-col below 600px */ @media (max-width: 600px) { .stats-grid { grid-template-columns: 1fr; } .stat { border-right: none; border-bottom: 1px solid var(--border); padding: 40px 28px; } .stat:last-child { border-bottom: none; } } /* LP steps + feats + nav below 560px */ @media (max-width: 560px) { .lp-steps { flex-direction: column; gap: 20px; } .lp-step-div { display: none; } .lp-feats-grid { grid-template-columns: 1fr; } .lp-nav { padding: 12px 20px; } .lp-hero { padding: 48px 0 32px; } .lp-col-left { padding-right: 0; } } /* 375px fine-tune */ @media (max-width: 375px) { .hero { padding: 100px 0 60px; } .cta-card { padding: 48px 24px !important; border-radius: var(--r-lg); } .nav { top: 12px; padding: 6px 6px 6px 16px; max-width: calc(100vw - 24px); } .nav-links a { padding: 6px 10px; font-size: 12px; } .footer-mark { font-size: clamp(56px, 16vw, 160px) !important; } .lp-nav { padding: 10px 16px; } .lp-nav-cta { padding: 8px 16px; font-size: 10px; } .container { padding-left: 18px; padding-right: 18px; } } /* Footer mark — prevent overflow on mobile */ @media (max-width: 600px) { .footer-mark { white-space: normal !important; font-size: clamp(52px, 14vw, 100px) !important; line-height: 1.05; word-break: break-word; } } /* Hero x-visual — hide on mobile (absolute-positioned content breaks small screens) */ @media (max-width: 820px) { .x-visual { display: none !important; } } /* Feature cards (s-13, s-14) — stack inner layout on mobile */ @media (max-width: 600px) { .s-feature-inner { flex-direction: column !important; gap: 24px !important; } .s-feature-left { flex: 0 0 auto !important; } .s-feature-body { font-size: 15px !important; } } /* Footer — reduce padding on mobile */ @media (max-width: 600px) { footer { padding: 60px 0 30px !important; } .footer-mark { margin-bottom: 40px !important; } .footer-grid { padding-top: 36px !important; gap: 28px !important; } .footer-compliance { margin-top: 36px !important; } } /* ═══════════ ENGAGEMENT MODELS v4 — content-first cards ═══════════ */ .engagement { background: var(--cream-2); padding: clamp(52px,7vw,80px) 0; position: relative; } .engagement-question { text-align: center; max-width: 720px; margin: 0 auto clamp(48px,6vw,76px); } .engagement-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 20px; } .engagement-question h2 { font-family: var(--font-display); font-size: clamp(34px,5vw,60px); font-weight: 400; line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 50; } .engagement-question h2 em { font-style: normal; color: var(--terracotta-deep); } .engagement-branches { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: stretch; max-width: 1140px; margin: 0 auto; } .branch { position: relative; display: flex; flex-direction: column; padding: 44px 36px 34px; background: linear-gradient(180deg, var(--surface-2) 0%, var(--paper) 100%); border: 1px solid var(--border); border-top: 1.5px solid rgba(28,20,16,0.10); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition-property: transform, box-shadow, border-color; transition-duration: 0.6s, 0.5s, 0.5s; transition-timing-function: cubic-bezier(.2,.8,.2,1), ease, ease; } .branch > * { position: relative; z-index: 1; } .branch:hover { transform: translateY(-6px) !important; box-shadow: var(--shadow-lg); } .branch-num { position: absolute; top: 16px; right: 26px; z-index: 0; font-family: var(--font-display); font-style: normal; font-size: clamp(52px,5vw,74px); font-weight: 400; line-height: 1; color: var(--terracotta-deep); opacity: 0.15; pointer-events: none; user-select: none; } .branch-tag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; } .branch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); flex-shrink: 0; } .branch h3 { font-family: var(--font-display); font-size: clamp(23px,2.4vw,29px); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 40; margin: 0 0 16px; max-width: 94%; } .branch p { font-family: var(--font-body); font-size: 14.5px; line-height: 1.62; color: var(--ink-2); margin: 0; } .branch h3 + p { margin-bottom: 8px; } .branch .branch-signal { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); line-height: 1.5; } .engagement-branches .branch:nth-child(1) { border-top-color: rgba(28,20,16,0.10); } .engagement-branches .branch:nth-child(2) { border-top-color: rgba(28,20,16,0.10); } .engagement-branches .branch:nth-child(3) { border-top-color: rgba(28,20,16,0.10); } .engagement-branches .branch:nth-child(1) .branch-dot { background: var(--sage); } .engagement-branches .branch:nth-child(2) .branch-dot { background: var(--plum); } .engagement-branches .branch:nth-child(3) .branch-dot { background: var(--terracotta); } .engagement-branches .branch:nth-child(1) .branch-num { color: var(--sage); } .engagement-branches .branch:nth-child(2) .branch-num { color: var(--plum); } .engagement-branches .branch:nth-child(3) .branch-num { color: var(--terracotta-deep); } .engagement-branches .branch:nth-child(1):hover { box-shadow: 0 22px 60px rgba(127,148,112,0.22); border-color: rgba(127,148,112,0.40); } .engagement-branches .branch:nth-child(2):hover { box-shadow: 0 22px 60px rgba(74,43,77,0.20); border-color: rgba(74,43,77,0.40); } .engagement-branches .branch:nth-child(3):hover { box-shadow: 0 22px 60px rgba(229,179,92,0.24); border-color: rgba(194,38,39,0.35); } .engagement-close { position: relative; text-align: center; margin: clamp(48px,6vw,72px) auto 0; padding-top: 30px; font-family: var(--font-display); font-style: normal; font-size: clamp(20px,2.4vw,27px); font-weight: 400; line-height: 1.3; color: var(--ink-2); } .engagement-close::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 2px; border-radius: 2px; background: var(--terracotta-deep); opacity: 0.7; } @media (max-width: 980px) { .engagement-branches { grid-template-columns: 1fr 1fr; gap: 20px; max-width: 720px; } } @media (max-width: 680px) { .engagement-branches { grid-template-columns: 1fr; gap: 18px; max-width: 480px; } .branch { padding: 38px 28px 30px; } .branch-num { font-size: 48px; top: 14px; right: 22px; } .engagement-question { margin-bottom: 40px; } } /* ═══════════════════════════════════════════════ COOKIE CONSENT BANNER ═══════════════════════════════════════════════ */ #gega-cookie-banner { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; width: calc(100% - 48px); max-width: 680px; background: var(--ink-2); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 20px 24px; animation: gega-cookie-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; } #gega-cookie-banner.gega-cookie--hidden { animation: gega-cookie-out 0.3s ease forwards; } @keyframes gega-cookie-in { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes gega-cookie-out { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(12px); } } .gega-cookie__inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .gega-cookie__text { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.55; color: var(--cream-2); margin: 0; flex: 1; min-width: 200px; } .gega-cookie__text a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .gega-cookie__text a:hover { color: var(--cream); } .gega-cookie__actions { display: flex; gap: 10px; flex-shrink: 0; } .gega-cookie__btn { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; padding: 9px 20px; border-radius: var(--r-pill); border: none; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .gega-cookie__btn--ghost { background: transparent; color: var(--cream-2); border: 1px solid rgba(240, 242, 247, 0.25); } .gega-cookie__btn--ghost:hover { background: rgba(240, 242, 247, 0.08); border-color: rgba(240, 242, 247, 0.4); } .gega-cookie__btn--accept { background: var(--terracotta); color: #fff; border: 1px solid transparent; } .gega-cookie__btn--accept:hover { background: var(--terracotta-deep); } @media (max-width: 520px) { #gega-cookie-banner { bottom: 16px; width: calc(100% - 32px); padding: 16px 18px; } .gega-cookie__inner { flex-direction: column; gap: 14px; } .gega-cookie__actions { width: 100%; justify-content: flex-end; } } /* ═══════════════════════════════════════════════════════════ MOBILE FIXES — max-width: 768px Fix 1: Hero chips as inline pills ═══════════════════════════════════════════════════════════ */ /* Hide on desktop */ .hero-chips-mobile { display: none; } @media (max-width: 768px) { /* Show chip row on mobile */ .hero-chips-mobile { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .hero-chip-mobile { display: inline-flex; flex-direction: column; gap: 2px; padding: 6px 12px; background: var(--glass, rgba(248,250,254,0.85)); border: 1px solid var(--border, rgba(28,20,16,0.14)); border-radius: 999px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .hcm-dot { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, #7A6A5A); } .hcm-txt { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 12px; letter-spacing: 0.04em; color: var(--ink, #1C1410); font-weight: 500; white-space: nowrap; } /* Fix hero right-edge overflow */ body, html { overflow-x: hidden; } .hero, [class*="hero"] { overflow-x: hidden; max-width: 100vw; } .blob { max-width: 100vw; } } /* Fix 1b — pill hard styles + hide x-caption bleed */ @media (max-width: 820px) { .x-caption { display: none !important; } } @media (max-width: 768px) { .hero-chip-mobile { display: inline-flex !important; flex-direction: column; gap: 2px; padding: 6px 12px; background: rgba(248,250,254,0.9); border: 1px solid rgba(28,20,16,0.16); border-radius: 999px; } .hcm-dot { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #7A6A5A; font-style: normal; } .hcm-txt { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #1C1410; font-weight: 500; white-space: nowrap; font-style: normal; } } /* ═══════════════════════════════════════════════════════════ Fix 2 — Services pills compact + collapsible on mobile ═══════════════════════════════════════════════════════════ */ /* Toggle button — hidden on desktop */ .svc-pills-toggle { display: none; } @media (max-width: 768px) { /* Hide pills 7+ by default */ .svc-pill-row .svc-doc-pill:nth-child(n+7) { display: none; } /* Show all when expanded */ .svc-pill-row.svc-pills--expanded .svc-doc-pill:nth-child(n+7) { display: inline-flex; } /* Toggle button style */ .svc-pills-toggle { display: block; margin: 10px 0 0; background: none; border: none; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #961D1E; padding: 4px 0; } .svc-pills-toggle:hover { opacity: 0.7; } } /* ═══════════════════════════════════════════════════════════ Fix 2b — Bento v-cards collapse (homepage) ═══════════════════════════════════════════════════════════ */ .bento-cards-toggle { display: none; } @media (max-width: 768px) { /* Hide v-cards 7-9 (children 8-10 of .bento-v2) */ .bento-v2 > .v-card:nth-child(n+8) { display: none; } /* Show all when expanded */ .bento-v2.bento--expanded > .v-card:nth-child(n+8) { display: flex; } /* Toggle button */ .bento-cards-toggle { display: block; margin: 12px 0 0; background: none; border: none; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #961D1E; padding: 4px 0; } .bento-cards-toggle:hover { opacity: 0.7; } } /* ═══════════════════════════════════════════════════════════ Fix 2c — Mobile service pills (replaces v-cards on mobile) ═══════════════════════════════════════════════════════════ */ /* Hidden on desktop */ .svc-mobile-pills, .svc-m-pills-toggle { display: none; } @media (max-width: 768px) { /* Hide the full v-cards and old toggle */ .bento-v2 > .v-card, .bento-cards-toggle { display: none !important; } /* Pills container */ .svc-mobile-pills { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; padding: 4px 0 8px; } /* Base pill */ .svc-m-pill { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 6px 14px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; transition: opacity 0.2s; } .svc-m-pill:hover { opacity: 0.7; } /* Colour variants */ .svc-m-terra { color: #961D1E; border-color: rgba(164,82,42,0.35); background: rgba(164,82,42,0.07); } .svc-m-sage { color: #4A7C6F; border-color: rgba(74,124,111,0.35); background: rgba(74,124,111,0.07); } .svc-m-gold { color: #9A7A2A; border-color: rgba(154,122,42,0.35); background: rgba(154,122,42,0.07); } .svc-m-plum { color: #6B4E8A; border-color: rgba(107,78,138,0.35); background: rgba(107,78,138,0.07); } .svc-m-ink { color: #3A3530; border-color: rgba(58,53,48,0.35); background: rgba(58,53,48,0.07); } /* Pills 7-9 hidden by default */ .svc-mobile-pills .svc-m-pill:nth-child(n+7) { display: none; } .svc-mobile-pills.svc-m--expanded .svc-m-pill:nth-child(n+7) { display: inline-flex; } /* Toggle button */ .svc-m-pills-toggle { display: block; grid-column: 1 / -1; background: none; border: none; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #961D1E; padding: 4px 0 0; text-align: left; } .svc-m-pills-toggle:hover { opacity: 0.7; } } /* ═══════════════════════════════════════════════════════════ Fix 2d — Mobile service card wrapper + 2-col pills ═══════════════════════════════════════════════════════════ */ .svc-mobile-card { display: none; } @media (max-width: 768px) { .svc-mobile-card { display: block; grid-column: 1 / -1; background: rgba(248,250,254,0.70); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(250,252,255,0.65); box-shadow: 0 2px 12px rgba(28,20,10,0.06); border-radius: 20px; padding: 22px 20px 18px; } .svc-mobile-eyebrow { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #7A6A5A; margin-bottom: 14px; } .svc-mobile-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .svc-m-pill { text-align: center; } } /* ═══════════════════════════════════════════════════════════ Fix 2d — Mobile service card wrapper + 2-col pills ═══════════════════════════════════════════════════════════ */ .svc-mobile-card { display: none; } @media (max-width: 768px) { .svc-mobile-card { display: block; grid-column: 1 / -1; background: rgba(248,250,254,0.70); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(250,252,255,0.65); box-shadow: 0 2px 12px rgba(28,20,10,0.06); border-radius: 20px; padding: 22px 20px 18px; } .svc-mobile-eyebrow { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #7A6A5A; margin-bottom: 14px; } .svc-mobile-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .svc-m-pill { text-align: center; } } /* ═══════════════════════════════════════════════════════════ Fix 2e — Premium pills + animations + overflow fix ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Fix card overflow */ .svc-mobile-card { grid-column: 1 / -1; width: 100%; box-sizing: border-box; overflow: hidden; } /* Divider between regular and premium rows */ .svc-mobile-pills--premium { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(28,20,10,0.08); grid-template-columns: 1fr 1fr; } /* Premium pill — glossy finish */ .svc-m-premium { position: relative; overflow: hidden; font-weight: 600; letter-spacing: 0.08em; border-width: 1.5px; } /* Glass sheen overlay */ .svc-m-premium::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%); border-radius: inherit; pointer-events: none; } /* Sage premium (HITL) */ .svc-m-premium.svc-m-sage { background: linear-gradient(135deg, rgba(74,124,111,0.18), rgba(74,124,111,0.08)); box-shadow: 0 2px 8px rgba(74,124,111,0.2), inset 0 1px 0 rgba(255,255,255,0.4); } /* Plum premium (Analytics) */ .svc-m-premium.svc-m-plum { background: linear-gradient(135deg, rgba(107,78,138,0.18), rgba(107,78,138,0.08)); box-shadow: 0 2px 8px rgba(107,78,138,0.2), inset 0 1px 0 rgba(255,255,255,0.4); } /* Soft tap animation on all pills */ .svc-m-pill { transition: transform 0.18s cubic-bezier(.2,.8,.2,1), box-shadow 0.18s ease, opacity 0.18s ease; } .svc-m-pill:active { transform: scale(0.94); opacity: 0.8; } /* Subtle pulse hint on premium pills to invite click */ @keyframes svc-hint { 0%, 100% { box-shadow: 0 2px 8px rgba(107,78,138,0.2), inset 0 1px 0 rgba(255,255,255,0.4); } 50% { box-shadow: 0 4px 16px rgba(107,78,138,0.35), inset 0 1px 0 rgba(255,255,255,0.4); } } .svc-m-premium { animation: svc-hint 3s ease-in-out infinite; } } /* ═══════════════════════════════════════════════════════════ Fix 2f — Hide s-13/s-14 feature cards on mobile ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .bento-v2 .s-13, .bento-v2 .s-14 { display: none !important; } } /* ═══════════════════════════════════════════════════════════ Fix 2g — Pills single column, full width, show all ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .svc-mobile-card { width: calc(100% - 0px); max-width: 100%; box-sizing: border-box; } .svc-mobile-pills { grid-template-columns: 1fr; } .svc-mobile-pills--premium { grid-template-columns: 1fr; } /* Show all 9 — remove nth-child hide */ .svc-mobile-pills .svc-m-pill:nth-child(n+7) { display: flex !important; } .svc-m-pill { width: 100%; box-sizing: border-box; justify-content: center; } } /* ═══════════════════════════════════════════════════════════ Fix 2h — Tag cloud layout + uniform border ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .svc-mobile-pills { display: flex !important; flex-wrap: wrap; gap: 8px; grid-template-columns: unset; } .svc-mobile-pills--premium { display: flex !important; flex-wrap: wrap; gap: 8px; grid-template-columns: unset; } /* Auto width — size to content */ .svc-m-pill { width: auto !important; display: inline-flex !important; } /* Uniform muted border for all verticals */ .svc-m-terra, .svc-m-sage, .svc-m-gold, .svc-m-plum, .svc-m-ink { color: #5C4F3D; border-color: rgba(180,160,130,0.4); background: rgba(180,160,130,0.07); } /* Premium pills keep their own color */ .svc-m-premium.svc-m-sage { color: #4A7C6F; border-color: rgba(74,124,111,0.4); background: linear-gradient(135deg, rgba(74,124,111,0.18), rgba(74,124,111,0.08)); } .svc-m-premium.svc-m-plum { color: #6B4E8A; border-color: rgba(107,78,138,0.4); background: linear-gradient(135deg, rgba(107,78,138,0.18), rgba(107,78,138,0.08)); } } /* ═══════════════════════════════════════════════════════════ Fix 2i — Force svc-mobile-card full grid width ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .svc-mobile-card { grid-column: 1 / -1 !important; width: 100% !important; box-sizing: border-box !important; } } /* ═══════════════════════════════════════════════════════════ Fix 2j — Force card span 2 on 2-col grid ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .bento-v2 .svc-mobile-card { grid-column: span 2 !important; width: 100% !important; box-sizing: border-box !important; } } /* ═══════════════════════════════════════════════════════════ Fix 2k — Match svc-mobile-card horizontal padding to umbrella ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .svc-mobile-card { padding: 28px 28px 24px !important; } } /* ═══════════════════════════════════════════════════════════ Fix 2l — Eyebrow header bigger + centered ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .svc-mobile-eyebrow { font-size: 13px !important; letter-spacing: 0.18em !important; color: #5C4F3D !important; text-align: center !important; margin-bottom: 18px !important; } } /* ═══════════════════════════════════════════════════════════ Fix 2m — Definitive pill auto-width + flex wrap ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .bento-v2 .svc-mobile-card .svc-mobile-pills { display: flex !important; flex-wrap: wrap !important; flex-direction: row !important; width: 100% !important; box-sizing: border-box !important; } .bento-v2 .svc-mobile-card .svc-mobile-pills .svc-m-pill { width: auto !important; min-width: 0 !important; max-width: none !important; flex: 0 0 auto !important; display: inline-flex !important; box-sizing: border-box !important; } } /* ═══════════════════════════════════════════════════════════ Fix 2o — DEFINITIVE svc-mobile-card width match ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .bento.bento-v2 .svc-mobile-card { display: block !important; grid-column: 1 / -1 !important; grid-row: auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 28px !important; } } /* ═══════════════════════════════════════════════════════════ Fix 2p — Force bento-v2 single column + card full width ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .bento.bento-v2 { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; } .bento.bento-v2 .svc-mobile-card { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; } } /* ═══════════════════════════════════════════════════════════ Fix 2q — Umbrella + mobile card same single column ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .bento.bento-v2 { display: grid !important; grid-template-columns: 1fr !important; } .bento-v2 .bento-umbrella, .bento-v2 .svc-mobile-card, .bento-v2 .s-13, .bento-v2 .s-14, .bento-v2 .v-card { grid-column: span 1 !important; } } /* ═══════════════════════════════════════════════════════════ Fix 2r — Verticals as 2-col compact card grid ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Grid layout for verticals */ .svc-mobile-pills { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; flex-wrap: unset !important; } /* Each pill → compact card */ .svc-m-pill { display: flex !important; align-items: center !important; width: auto !important; padding: 12px 14px !important; border-radius: 10px !important; border: 1px solid rgba(180,160,130,0.25) !important; border-left: 3px solid var(--terra, #C22627) !important; background: rgba(248,250,254,0.6) !important; font-size: 11px !important; letter-spacing: 0.08em !important; text-decoration: none !important; color: #5C4F3D !important; text-align: left !important; justify-content: flex-start !important; min-height: 42px !important; box-sizing: border-box !important; } /* Odd count — last pill spans full width if alone */ .svc-mobile-pills .svc-m-pill:last-child:nth-child(odd) { grid-column: span 2; max-width: 50%; } /* Premium pills grid */ .svc-mobile-pills--premium { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 16px !important; padding-top: 16px !important; border-top: 1px solid rgba(180,160,130,0.2) !important; flex-wrap: unset !important; } /* Premium overrides — subtle fill instead of left border */ .svc-m-pill.svc-m-premium { border-left: 3px solid transparent !important; font-weight: 500 !important; } .svc-m-pill.svc-m-premium.svc-m-sage { border-left-color: #4A7C6F !important; background: rgba(74,124,111,0.1) !important; color: #3D6B5F !important; } .svc-m-pill.svc-m-premium.svc-m-plum { border-left-color: #6B4E8A !important; background: rgba(107,78,138,0.1) !important; color: #5A4073 !important; } } /* ═══════════════════════════════════════════════════════════ Fix 2s — Branch timeline layout + header enhancement ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── Header ── */ .svc-mobile-eyebrow { display: block !important; text-align: center !important; font-size: 11px !important; letter-spacing: 0.18em !important; color: #9A8C7A !important; margin-bottom: 6px !important; } .svc-mobile-title { display: block !important; font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 700 !important; font-size: 22px !important; color: #2C2418 !important; text-align: center !important; margin: 0 0 24px 0 !important; line-height: 1.25 !important; } .svc-mobile-title em { color: #C22627 !important; font-style: normal !important; } /* ── Branch layout ── */ .svc-mobile-pills { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 14px !important; position: relative !important; padding: 24px 0 !important; grid-template-columns: unset !important; } /* Vertical line */ .svc-mobile-pills::before { content: '' !important; position: absolute !important; left: 50% !important; top: 0 !important; bottom: 0 !important; width: 1.5px !important; background: linear-gradient(to bottom, transparent, rgba(194,38,39,0.25) 8%, rgba(194,38,39,0.25) 92%, transparent) !important; transform: translateX(-50%) !important; z-index: 0 !important; } /* Pill base — override grid card styles */ .svc-mobile-pills .svc-m-pill { position: relative !important; z-index: 1 !important; max-width: 46% !important; width: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 10px 14px !important; border-radius: 10px !important; border: 1px solid rgba(180,160,130,0.3) !important; border-left: 1px solid rgba(180,160,130,0.3) !important; background: rgba(248,250,254,0.9) !important; backdrop-filter: blur(6px) !important; font-size: 11px !important; color: #5C4F3D !important; text-decoration: none !important; letter-spacing: 0.08em !important; min-height: 0 !important; } /* Alternate left / right */ .svc-mobile-pills .svc-m-pill:nth-child(odd) { align-self: flex-start !important; margin-left: 4% !important; margin-right: auto !important; } .svc-mobile-pills .svc-m-pill:nth-child(even) { align-self: flex-end !important; margin-right: 4% !important; margin-left: auto !important; } /* Premium section — stays as row at bottom */ .svc-mobile-pills--premium { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; margin-top: 20px !important; padding-top: 20px !important; border-top: 1px solid rgba(180,160,130,0.2) !important; position: relative !important; grid-template-columns: unset !important; } .svc-mobile-pills--premium::before { display: none !important; } .svc-mobile-pills--premium .svc-m-pill { max-width: none !important; align-self: center !important; margin: 0 !important; } .svc-mobile-pills--premium .svc-m-pill.svc-m-sage { border-color: rgba(74,124,111,0.4) !important; background: rgba(74,124,111,0.1) !important; color: #3D6B5F !important; } .svc-mobile-pills--premium .svc-m-pill.svc-m-plum { border-color: rgba(107,78,138,0.4) !important; background: rgba(107,78,138,0.1) !important; color: #5A4073 !important; } } /* ═══════════════════════════════════════════════════════════ Fix 2t — Glossy finish + pulse on all vertical pills ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .svc-mobile-pills .svc-m-pill:not(.svc-m-premium) { position: relative !important; overflow: hidden !important; font-weight: 600 !important; border-width: 1.5px !important; box-shadow: 0 2px 8px rgba(194,38,39,0.15), inset 0 1px 0 rgba(255,255,255,0.4) !important; background: linear-gradient(135deg, rgba(194,38,39,0.1), rgba(229,179,92,0.06)) !important; } /* Glass sheen */ .svc-mobile-pills .svc-m-pill:not(.svc-m-premium)::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%) !important; border-radius: inherit !important; pointer-events: none !important; } /* Pulse */ @keyframes svc-hint-terra { 0%, 100% { box-shadow: 0 2px 8px rgba(194,38,39,0.15), inset 0 1px 0 rgba(255,255,255,0.4); } 50% { box-shadow: 0 4px 16px rgba(194,38,39,0.3), inset 0 1px 0 rgba(255,255,255,0.4); } } .svc-mobile-pills .svc-m-pill:not(.svc-m-premium) { animation: svc-hint-terra 3s ease-in-out infinite !important; } } /* ═══════════════════════════════════════════════════════════ Fix 3 — Quote form two-step mobile layout ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Flatten to single column */ #qS2 .q-form { display: flex !important; flex-direction: column !important; gap: 12px !important; } /* Step 2a (default): show first 4 fields, hide rest */ #qS2 .q-form .q-field:nth-child(n+5) { display: none !important; } /* Hide submit until details step */ #qS2 .q-nav { display: none !important; } /* Step 2b: show details, hide contact */ #qS2 .q-form.q-step-details .q-field:nth-child(-n+4) { display: none !important; } #qS2 .q-form.q-step-details .q-field:nth-child(n+5) { display: flex !important; flex-direction: column !important; } #qS2 .q-form.q-step-details ~ .q-mobile-step-nav #qMobileNext { display: none !important; } #qS2 .q-form.q-step-details ~ .q-mobile-step-nav #qMobileBack { display: inline-flex !important; } #qS2 .q-form.q-step-details ~ .q-nav { display: flex !important; } /* Step nav button styling */ .q-mobile-step-nav { text-align: center; margin: 16px 0; } .q-mobile-step-btn { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 28px; border-radius: 10px; border: 1.5px solid rgba(194,38,39,0.3); background: linear-gradient(135deg, rgba(194,38,39,0.1), rgba(229,179,92,0.06)); color: #C22627; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 2px 8px rgba(194,38,39,0.12); } .q-mobile-step-btn:active { transform: scale(0.96); } /* Tighten field spacing */ .q-field { margin-bottom: 0 !important; } .q-label { font-size: 11px !important; margin-bottom: 4px !important; } .q-input { padding: 12px 14px !important; font-size: 14px !important; } } /* ═══════════════════════════════════════════════════════════ Fix 3b — Service selection tiles as compact pills on mobile ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Tag cloud flow */ .tile-grid { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; grid-template-columns: unset !important; } /* Each tile → small selectable pill */ .tile { width: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 10px 14px !important; display: inline-flex !important; align-items: center !important; flex-direction: row !important; gap: 6px !important; border-radius: 10px !important; } /* Hide description */ .tile .tile-d { display: none !important; } /* Inline icon */ .tile .tile-ic { font-size: 16px !important; margin: 0 !important; line-height: 1 !important; } /* Compact title */ .tile .tile-n { font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.06em !important; margin: 0 !important; white-space: nowrap !important; } /* Smaller checkmark */ .tile .chk { width: 18px !important; height: 18px !important; min-width: 18px !important; font-size: 10px !important; line-height: 18px !important; margin: 0 !important; } } /* ═══════════════════════════════════════════════════════════ Fix 3c — Tile grid 2-col compact on mobile ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .tile-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; } .tile { padding: 8px 10px !important; width: auto !important; min-height: 0 !important; } .tile .tile-n { white-space: normal !important; font-size: 10px !important; line-height: 1.3 !important; } .tile .tile-ic { font-size: 14px !important; } .tile .chk { width: 16px !important; height: 16px !important; min-width: 16px !important; font-size: 9px !important; line-height: 16px !important; } } /* ═══════════════════════════════════════════════════════════ Fix 4 — Center-align content on mobile ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Hero section */ .hero-text, .hero-provenance, .hero-ctas, .hero-chips-mobile { text-align: center !important; justify-content: center !important; align-items: center !important; } /* Umbrella card */ .bento-v2 .bento-umbrella { text-align: center !important; } .umbrella-text { text-align: center !important; } .umbrella-pills { justify-content: center !important; } } /* ═══════════════════════════════════════════════════════════ Fix 5 — Center hero + umbrella on mobile (precise selectors) ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Hero — make stagger a centered flex column */ .hero .stagger { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .hero h1, .hero .hero-sub { text-align: center !important; } .hero-provenance { justify-content: center !important; } .hero-ctas { justify-content: center !important; flex-wrap: wrap !important; } .hero-chips-mobile { justify-content: center !important; } /* Umbrella bento card */ .bento-umbrella { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .bento-umbrella h2, .bento-umbrella p, .umbrella-text { text-align: center !important; } .umbrella-pills { justify-content: center !important; } } /* ═══════════════════════════════════════════════════════════ Fix 5 — Center hero + umbrella on mobile (precise selectors) ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Hero — make stagger a centered flex column */ .hero .stagger { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .hero h1, .hero .hero-sub { text-align: center !important; } .hero-provenance { justify-content: center !important; } .hero-ctas { justify-content: center !important; flex-wrap: wrap !important; } .hero-chips-mobile { justify-content: center !important; } /* Umbrella bento card */ .bento-umbrella { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .bento-umbrella h2, .bento-umbrella p, .umbrella-text { text-align: center !important; } .umbrella-pills { justify-content: center !important; } } /* ═══════════════════════════════════════════════════════════ Fix 6 — Center hero section on mobile (targeted override) ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .hero .stagger, .hero .stagger > * { text-align: center !important; align-items: center !important; } .hero h1, .hero .hero-sub, .hero-provenance, .hero-ctas, .hero-chips-mobile { text-align: center !important; justify-content: center !important; align-items: center !important; width: 100% !important; } } /* ═══════════════════════════════════════════════════════════ Fix 4b — Center section headers + clean umbrella pills ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Center the services section header */ .section-bento .sec-head { text-align: center !important; } .section-bento .sec-head .eyebrow, .section-bento .sec-head h2, .section-bento .sec-head .sec-sub { text-align: center !important; } /* Umbrella pills — compact tag cloud, non-interactive */ .umbrella-pills { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; } .u-pill { pointer-events: none !important; font-size: 10px !important; padding: 5px 10px !important; border-radius: 20px !important; background: rgba(194,38,39,0.08) !important; border: 1px solid rgba(194,38,39,0.15) !important; color: #5C4F3D !important; white-space: nowrap !important; } } /* ═══════════════════════════════════════════════════════════ Fix 6 — Crimson trail dividers between sections ═══════════════════════════════════════════════════════════ */ .section + .section::before { content: ''; display: block; width: 40px; height: 1.5px; margin: 0 auto 0; background: linear-gradient(90deg, transparent, rgba(194,38,39,0.4), transparent); position: relative; top: -60px; } /* ═══════════════════════════════════════════════════════════ Fix 7 — Borderless 3D floating cards with crimson accent ═══════════════════════════════════════════════════════════ */ .service-card, .v-card, .t-card, .branch, .bento-umbrella, .pillar-card, .engagement-branches > a, .q-box { border: none !important; box-shadow: 0 4px 24px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.02) !important; position: relative !important; overflow: hidden !important; } /* Crimson accent line at top */ .service-card::before, .v-card::before, .t-card::before, .branch::before, .bento-umbrella::before, .pillar-card::before, .engagement-branches > a::before, .q-box::before { content: '' !important; position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 40px !important; height: 2px !important; background: linear-gradient(90deg, transparent, rgba(194,38,39,0.5), transparent) !important; border-radius: 2px !important; z-index: 1 !important; } /* ═══════════════════════════════════════════════════════════ MARBLE EFFECT — Router Pillar Cards (trial) ═══════════════════════════════════════════════════════════ */ body .router-card { position: relative; overflow: hidden; background: #FFFFFF; border: none; border-top: 3px solid var(--terracotta); box-shadow: 0 4px 24px rgba(29,73,118,0.07), 0 1px 4px rgba(29,73,118,0.04); } body .router-card::before { content: ''; position: absolute; inset: 0; opacity: 0.06; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 15% 20%, #1D4976 0%, transparent 50%), radial-gradient(ellipse 50% 80% at 85% 75%, #1D4976 0%, transparent 45%), radial-gradient(ellipse 60% 40% at 50% 10%, #1D4976 0%, transparent 55%), radial-gradient(ellipse 30% 90% at 70% 40%, #1D4976 0%, transparent 40%), radial-gradient(ellipse 90% 30% at 30% 80%, #1D4976 0%, transparent 50%); z-index: 0; } body .router-card::after { content: ''; position: absolute; inset: 0; opacity: 0.035; pointer-events: none; background: repeating-linear-gradient( 137deg, transparent, transparent 40px, #1D4976 40px, #1D4976 41px, transparent 41px, transparent 80px ), repeating-linear-gradient( 43deg, transparent, transparent 60px, #1D4976 60px, #1D4976 61px, transparent 61px, transparent 120px ); z-index: 0; } body .router-card > * { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════ TOPOGRAPHIC CONTOUR BORDERS — Router Pillar Cards (trial) ═══════════════════════════════════════════════════════════ */ /* --- Shared base --- */ body .router-card { position: relative; overflow: hidden; border: none; box-shadow: 0 2px 16px rgba(29,73,118,0.06); transition: box-shadow 0.5s ease, transform 0.5s ease; } body .router-card:hover { box-shadow: 0 8px 32px rgba(29,73,118,0.10); transform: translateY(-2px); } /* Contour frame layer */ body .router-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; transition: opacity 0.6s ease; background: /* top edge — flowing lines */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='8'%3E%3Cpath d='M0,4 Q50,0 100,4 T200,4 T300,4 T400,4 T500,4 T600,4' fill='none' stroke='currentColor' stroke-width='0.8' opacity='0.5'/%3E%3Cpath d='M0,6 Q60,2 120,6 T240,6 T360,6 T480,6 T600,6' fill='none' stroke='currentColor' stroke-width='0.5' opacity='0.35'/%3E%3C/svg%3E") repeat-x top center / 600px 8px, /* bottom edge */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='8'%3E%3Cpath d='M0,4 Q75,1 150,4 T300,4 T450,4 T600,4' fill='none' stroke='currentColor' stroke-width='0.8' opacity='0.5'/%3E%3Cpath d='M0,2 Q80,6 160,2 T320,2 T480,2 T600,2' fill='none' stroke='currentColor' stroke-width='0.5' opacity='0.35'/%3E%3C/svg%3E") repeat-x bottom center / 600px 8px, /* left edge */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='400'%3E%3Cpath d='M4,0 Q1,50 4,100 T4,200 T4,300 T4,400' fill='none' stroke='currentColor' stroke-width='0.8' opacity='0.5'/%3E%3Cpath d='M6,0 Q2,60 6,120 T6,240 T6,360' fill='none' stroke='currentColor' stroke-width='0.5' opacity='0.35'/%3E%3C/svg%3E") repeat-y left center / 8px 400px, /* right edge */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='400'%3E%3Cpath d='M4,0 Q7,60 4,120 T4,240 T4,360' fill='none' stroke='currentColor' stroke-width='0.8' opacity='0.5'/%3E%3Cpath d='M2,0 Q5,50 2,100 T2,200 T2,300 T2,400' fill='none' stroke='currentColor' stroke-width='0.5' opacity='0.35'/%3E%3C/svg%3E") repeat-y right center / 8px 400px; } /* --- DOCS card: Navy, hover-reveal --- */ body .router-card--docs::before { opacity: 0; filter: hue-rotate(0deg); /* Navy stroke via hardcoded SVG */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='10'%3E%3Cpath d='M0,5 Q50,1 100,5 T200,5 T300,5 T400,5 T500,5 T600,5' fill='none' stroke='%231D4976' stroke-width='1' opacity='0.6'/%3E%3Cpath d='M0,8 Q60,3 120,8 T240,8 T360,8 T480,8 T600,8' fill='none' stroke='%231D4976' stroke-width='0.6' opacity='0.35'/%3E%3Cpath d='M0,2 Q70,6 140,2 T280,2 T420,2 T560,2' fill='none' stroke='%231D4976' stroke-width='0.4' opacity='0.2'/%3E%3C/svg%3E") repeat-x top center / 600px 10px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='10'%3E%3Cpath d='M0,5 Q75,1 150,5 T300,5 T450,5 T600,5' fill='none' stroke='%231D4976' stroke-width='1' opacity='0.6'/%3E%3Cpath d='M0,3 Q80,7 160,3 T320,3 T480,3 T600,3' fill='none' stroke='%231D4976' stroke-width='0.6' opacity='0.35'/%3E%3C/svg%3E") repeat-x bottom center / 600px 10px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='400'%3E%3Cpath d='M5,0 Q1,50 5,100 T5,200 T5,300 T5,400' fill='none' stroke='%231D4976' stroke-width='1' opacity='0.6'/%3E%3Cpath d='M8,0 Q3,60 8,120 T8,240 T8,360' fill='none' stroke='%231D4976' stroke-width='0.6' opacity='0.35'/%3E%3C/svg%3E") repeat-y left center / 10px 400px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='400'%3E%3Cpath d='M5,0 Q9,60 5,120 T5,240 T5,360' fill='none' stroke='%231D4976' stroke-width='1' opacity='0.6'/%3E%3Cpath d='M2,0 Q6,50 2,100 T2,200 T2,300 T2,400' fill='none' stroke='%231D4976' stroke-width='0.6' opacity='0.35'/%3E%3C/svg%3E") repeat-y right center / 10px 400px; } body .router-card--docs:hover::before { opacity: 1; } /* --- ANALYTICS card: Crimson, always visible --- */ body .router-card--analytics::before { opacity: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='10'%3E%3Cpath d='M0,5 Q50,1 100,5 T200,5 T300,5 T400,5 T500,5 T600,5' fill='none' stroke='%23C22627' stroke-width='1' opacity='0.45'/%3E%3Cpath d='M0,8 Q60,3 120,8 T240,8 T360,8 T480,8 T600,8' fill='none' stroke='%23C22627' stroke-width='0.6' opacity='0.25'/%3E%3Cpath d='M0,2 Q70,6 140,2 T280,2 T420,2 T560,2' fill='none' stroke='%23C22627' stroke-width='0.4' opacity='0.15'/%3E%3C/svg%3E") repeat-x top center / 600px 10px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='10'%3E%3Cpath d='M0,5 Q75,1 150,5 T300,5 T450,5 T600,5' fill='none' stroke='%23C22627' stroke-width='1' opacity='0.45'/%3E%3Cpath d='M0,3 Q80,7 160,3 T320,3 T480,3 T600,3' fill='none' stroke='%23C22627' stroke-width='0.6' opacity='0.25'/%3E%3C/svg%3E") repeat-x bottom center / 600px 10px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='400'%3E%3Cpath d='M5,0 Q1,50 5,100 T5,200 T5,300 T5,400' fill='none' stroke='%23C22627' stroke-width='1' opacity='0.45'/%3E%3Cpath d='M8,0 Q3,60 8,120 T8,240 T8,360' fill='none' stroke='%23C22627' stroke-width='0.6' opacity='0.25'/%3E%3C/svg%3E") repeat-y left center / 10px 400px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='400'%3E%3Cpath d='M5,0 Q9,60 5,120 T5,240 T5,360' fill='none' stroke='%23C22627' stroke-width='1' opacity='0.45'/%3E%3Cpath d='M2,0 Q6,50 2,100 T2,200 T2,300 T2,400' fill='none' stroke='%23C22627' stroke-width='0.6' opacity='0.25'/%3E%3C/svg%3E") repeat-y right center / 10px 400px; } body .router-card > * { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════ SIMPLIFY — Tone down hovers + chip colours (28 May 2026) ═══════════════════════════════════════════════════════════ */ /* --- Router cards: subtle hover only --- */ body .router-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.06); transform: translateY(-3px); border-color: rgba(0,0,0,0.08); } body .router-card::before, body .router-card::after { display: none !important; } /* --- u-pills: clean white, neutral hover --- */ .u-pill { background: #fff; border-color: rgba(0,0,0,0.10); } .u-pill:hover { background: #fff; border-color: rgba(0,0,0,0.22); box-shadow: 0 4px 12px -4px rgba(0,0,0,0.12); } /* --- s-13 / s-14 feature cards: softer tint --- */ .bento .s-13 { background: linear-gradient(155deg, rgba(127,148,112,0.06), rgba(127,148,112,0.01)); } .bento .s-14 { background: linear-gradient(155deg, rgba(74,43,77,0.04), rgba(74,43,77,0.01)); } /* ── Fix: restore u-pill hover lift, keep neutral shadow ── */ .u-pill:hover { transform: translateY(-2px) scale(1.04); background: #fff; border-color: rgba(0,0,0,0.22); box-shadow: 0 6px 14px -4px rgba(0,0,0,0.10); } /* ── Fix: s-13/s-14 — force softer tint ── */ body .bento .s-13 { background: #ffffff !important; border: 1.5px solid rgba(28,20,16,0.10) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.09) !important; } body .bento .s-14 { background: #ffffff !important; border: 1.5px solid rgba(28,20,16,0.10) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.09) !important; } /* ═══════════════════════════════════════════════════════════ CHIP + CARD REFINEMENT — 28 May 2026 (b) ═══════════════════════════════════════════════════════════ */ /* --- u-pills: match tile hover (red outline + lift) --- */ .u-pill { background: #fff; border: 1px solid rgba(28,20,16,0.10); box-shadow: 0 2px 6px -2px rgba(0,0,0,0.04); } .u-pill:hover { transform: translateY(-2px) scale(1.04); background: #fff; border-color: rgba(194,38,39,0.4); box-shadow: 0 10px 24px -10px rgba(28,20,16,0.18); } /* --- Router cards: cloud edges + red outline hover --- */ body .router-card { background: #fff; border: 1px solid rgba(0,0,0,0.06); box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02), 0 4px 16px rgba(0,0,0,0.03); } body .router-card:hover { transform: translateY(-3px); border-color: rgba(194,38,39,0.35); box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.03), 0 8px 24px -8px rgba(28,20,16,0.14); } /* --- v-cards (service bento): cloud edges --- */ body .bento-v2 .v-card { box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02), 0 4px 14px rgba(0,0,0,0.03); } /* --- s-13/s-14: cloud edges too --- */ body .bento .s-13, body .bento .s-14 { box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02), 0 4px 14px rgba(0,0,0,0.03) !important; } /* ============================================================ BENTO V-CARD POP — matches u-pill white/cloud standard (border-top accent colours via --row-accent are preserved) ============================================================ */ .bento-v2 .v-card { background-color: #ffffff !important; border: 1px solid rgba(28, 20, 16, 0.10); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 14px rgba(0, 0, 0, 0.03); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .bento-v2 .v-card:hover { transform: translateY(-2px); border-color: rgba(194, 38, 39, 0.35); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.03), 0 10px 24px -10px rgba(28, 20, 16, 0.18); } /* ============================================================ UMBRELLA CARD POP — white bg + cloud shadow, no hover lift ============================================================ */ .bento-umbrella { background-color: #ffffff !important; border: 1px solid rgba(28, 20, 16, 0.10); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 14px rgba(0, 0, 0, 0.03); } /* ============================================================ V-CARD REFINEMENTS — stronger shadow, no top accent, white icons ============================================================ */ /* 1 — Stronger cloud shadow */ .bento-v2 .v-card { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.09) !important; } .bento-v2 .v-card:hover { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 12px 32px -8px rgba(28, 20, 16, 0.22) !important; } /* 2 — Kill the coloured top-border stripe */ .bento-v2 .v-card { border-top: 1px solid rgba(28, 20, 16, 0.10) !important; } /* 3 — Icon chip: white bg, soft border, neutral shadow */ .bento-v2 .v-card .v-icon { background: #ffffff !important; border: 1px solid rgba(28, 20, 16, 0.10) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important; color: var(--ink, #1c1410) !important; } .bento-v2 .v-card .v-icon svg, .bento-v2 .v-card .v-icon img, .bento-v2 .v-card .v-icon i { filter: none !important; color: var(--ink, #1c1410) !important; fill: var(--ink, #1c1410) !important; } /* ============================================================ V-CARD HOVER — kill pink wash, keep red outline + lift only ============================================================ */ .bento-v2 .v-card:hover { background-color: #ffffff !important; background-image: none !important; } /* Kill any ::before/::after tint overlays on hover */ .bento-v2 .v-card::before, .bento-v2 .v-card::after { display: none !important; } /* ============================================================ V-CARD — kill top colour band + fix icons ============================================================ */ /* Kill the stripe element entirely */ .bento-v2 .v-card .v-stripe, .bento-v2 .v-card [class*="stripe"] { display: none !important; } /* Also nuke any border-top colour bleeding through */ .bento-v2 .v-card { border-top: 1px solid rgba(28, 20, 16, 0.10) !important; } /* Icons — restore the coloured chip look cleanly (white bg knocked them to black SVG fill — give them a light warm-grey bg so they read as intentional) */ .bento-v2 .v-card .v-icon { background: #F4F1ED !important; border: none !important; box-shadow: none !important; } .bento-v2 .v-card .v-icon svg { color: var(--ink, #1c1410) !important; fill: var(--ink, #1c1410) !important; opacity: 0.7; } /* ============================================================ V-ICON CHIPS — icy white to match umbrella card bg ============================================================ */ .bento-v2 .v-card .v-icon, .bento-v2 .v-card .v-icon.icon-blob, .bento-v2 .v-card .v-icon.icon-blob--plum, .bento-v2 .v-card .v-icon.icon-blob--ink { background: #ffffff !important; border: 1px solid rgba(28, 20, 16, 0.10) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important; } .bento-v2 .v-card .v-icon svg { stroke: #1c1410 !important; opacity: 0.65 !important; } /* ============================================================ V-ICON CHIPS — visible warm tint on white card (white-on-white was invisible; #F0EDE8 gives the chip depth) ============================================================ */ body .bento-v2 .v-card .v-icon, body .bento-v2 .v-card .v-icon.icon-blob, body .bento-v2 .v-card .v-icon.icon-blob--plum, body .bento-v2 .v-card .v-icon.icon-blob--ink { background: #F0EDE8 !important; border: 1px solid rgba(28, 20, 16, 0.08) !important; box-shadow: none !important; border-radius: 10px !important; } body .bento-v2 .v-card .v-icon svg { stroke: #3a2e27 !important; fill: none !important; opacity: 0.75 !important; } /* ============================================================ V-ICON CHIPS — red outline to match u-pill style ============================================================ */ body .bento-v2 .v-card .v-icon { border: 1.5px solid rgba(194, 38, 39, 0.30) !important; } body .bento-v2 .v-card:hover .v-icon { border-color: rgba(194, 38, 39, 0.65) !important; box-shadow: 0 0 0 3px rgba(194, 38, 39, 0.07) !important; } /* ============================================================ V-CARD — red border on whole card hover (not just icon) + kill icon-blob circular shape behind icon ============================================================ */ /* Red outline on the full card */ body .bento-v2 .v-card:hover { border-color: rgba(194, 38, 39, 0.40) !important; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.04), 0 12px 32px -8px rgba(28,20,16,0.18) !important; } /* Reset icon border back to neutral on hover — card border carries it */ body .bento-v2 .v-card:hover .v-icon { border-color: rgba(28, 20, 16, 0.10) !important; box-shadow: none !important; } /* Kill the blob circle behind the icon */ body .bento-v2 .v-card .v-icon.icon-blob::before, body .bento-v2 .v-card .v-icon.icon-blob::after, body .bento-v2 .v-card .v-icon[class*="icon-blob"]::before, body .bento-v2 .v-card .v-icon[class*="icon-blob"]::after { display: none !important; } /* ============================================================ V-CARD — red on all 4 borders, hover only ============================================================ */ body .bento-v2 .v-card { border: 1.5px solid rgba(28, 20, 16, 0.10) !important; } body .bento-v2 .v-card:hover { border: 1.5px solid rgba(194, 38, 39, 0.50) !important; } /* ============================================================ V-CARD — universal hover animation (overrides all variants) ============================================================ */ body .bento-v2 .v-card { transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease !important; } body .bento-v2 .v-card:hover { transform: translateY(-3px) !important; } /* ============================================================ V-CARD — single unified animation, kill all sub-animations ============================================================ */ /* 1. One transition on the card */ body .bento-v2 .v-card { transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease !important; } /* 2. One consistent lift — no more -6px jump */ body .bento-v2 .v-card:hover { transform: translateY(-3px) !important; } /* 3. Kill icon rotate/scale on hover */ body .bento-v2 .v-card:hover .v-icon { transform: none !important; } /* 4. Kill v-stripe height pulse */ body .bento-v2 .v-card .v-stripe, body .bento-v2 .v-card:hover .v-stripe { display: none !important; height: 0 !important; } /* ============================================================ V-CARD — kill paragraph expand on hover (causes content pop) ============================================================ */ body .bento-v2 .v-card p, body .bento-v2 .v-card:hover p { -webkit-line-clamp: 2 !important; max-height: calc(1.5em * 2) !important; transition: none !important; } /* ============================================================ BRANCH CARDS — unified animation, red border on hover ============================================================ */ body .branch { transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease !important; } body .branch:hover, body .engagement-branches .branch:nth-child(1):hover, body .engagement-branches .branch:nth-child(2):hover, body .engagement-branches .branch:nth-child(3):hover { transform: translateY(-3px) !important; border-color: rgba(194, 38, 39, 0.45) !important; box-shadow: 0 10px 32px -8px rgba(28, 20, 16, 0.16) !important; } /* ============================================================ BRANCH CARDS — same as v-card treatment ============================================================ */ body .branch { background: #ffffff !important; border: 1.5px solid rgba(28, 20, 16, 0.10) !important; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.09) !important; transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease !important; } body .branch:hover, body .engagement-branches .branch:nth-child(1):hover, body .engagement-branches .branch:nth-child(2):hover, body .engagement-branches .branch:nth-child(3):hover { transform: translateY(-3px) !important; border-color: rgba(194, 38, 39, 0.50) !important; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.04), 0 12px 32px -8px rgba(28,20,16,0.18) !important; } /* s-13 / s-14 — same hover as v-cards */ body .bento .s-13, body .bento .s-14 { transition: transform 0.22s cubic-bezier(0.2,0.8,0.2,1), border-color 0.22s ease, box-shadow 0.22s ease !important; } body .bento .s-13:hover, body .bento .s-14:hover { transform: translateY(-3px) !important; border-color: rgba(194, 38, 39, 0.50) !important; box-shadow: 0 12px 32px -8px rgba(28,20,16,0.18) !important; } /* Kill pink hover wash on s-13/s-14 */ body .bento .s-13:hover, body .bento .s-14:hover, body .bento .s-13::before, body .bento .s-14::before, body .bento .s-13::after, body .bento .s-14::after { background: none !important; background-image: none !important; } body .bento .s-13:hover, body .bento .s-14:hover { background-color: #ffffff !important; } /* Kill the red dash divider between feature cards */ .engagement-close::before, .section-bento .divider, .bento-v2 .section-divider, hr.red-dash { display: none !important; } /* Kill bridge-divider red dash */ .bridge-divider { display: none !important; } /* Kill pink hover wash on s-13/s-14 — nuke all pseudo backgrounds */ body .bento .s-13, body .bento .s-14 { background: #ffffff !important; } body .bento .s-13:hover, body .bento .s-14:hover { background: #ffffff !important; } body .bento .s-13::before, body .bento .s-13::after, body .bento .s-14::before, body .bento .s-14::after { display: none !important; } /* Kill service-arrow on all v-cards */ .service-arrow { display: none !important; } /* Kill red dash above branch cards */ .engagement-close::before { display: none !important; } /* Kill branch-dot red circles */ .branch-dot { display: none !important; } /* Kill border-top accent on branch cards */ body .engagement-branches .branch:nth-child(1), body .engagement-branches .branch:nth-child(2), body .engagement-branches .branch:nth-child(3) { border-top: 1.5px solid rgba(28, 20, 16, 0.10) !important; } /* ── Kill coloured border-top on branch cards (nuclear) ── */ body .engagement-branches .branch:nth-child(1), body .engagement-branches .branch:nth-child(2), body .engagement-branches .branch:nth-child(3) { border-top-color: rgba(28,20,16,0.10) !important; } .engagement-branches .branch:nth-child(1), .engagement-branches .branch:nth-child(2), .engagement-branches .branch:nth-child(3) { border-top-color: rgba(28,20,16,0.10) !important; } /* ── Kill crimson accent dash on branch cards only ── */ .branch::before { display: none !important; content: none !important; } /* CARD SURFACE UNIFICATION v3.16 - all cards one tone vs white page */ body .bento-v2 .v-card, body .bento-v2 .v-card:hover, body .router-card, body .router-card:hover, body .branch, body .branch:hover, body .bento-umbrella, body .bento .s-13, body .bento .s-14, body .bento .s-13:hover, body .bento .s-14:hover { background: #F4F3F1 !important; background-color: #F4F3F1 !important; } /* === Router card CTA pin fix (01jun2026) === */ .router-card-body { margin-bottom: 0; } .router-card-cta { margin-top: auto; } /* === Scrollspy active nav (01jun2026) === */ .nav-links a.nav-active { color: var(--terracotta); }