/* ============================================================ ASER Technologies — Design System Brand: deep navy + bright sky-blue (sampled from the corporate logo). Typography: Roboto everywhere. Theme variables in :root — change here to rebrand entire site. ============================================================ */ :root { /* ─── Brand Colors (light theme, sampled from /assets/logo/aser_logo.webp) ─── */ /* --navy is the deep navy from the wordmark; --mustard kept as a semantic handle for the "accent" colour but now maps to the bright sky-blue accent from the logo. Renaming the variable everywhere would touch every page, so we re-aim the meaning instead. */ --navy: #001840; /* logo navy — buttons, headings, dark accents */ --navy-hover: #1a2d5a; /* button hover state */ --navy-light: #f7faff; /* light surface (cards, alt sections, footer) */ --navy-mid: #eaf1fb; /* slightly darker light surface (table headers, form inputs) */ --navy-border: #d8e2f0; /* light borders */ --white: #ffffff; --off-white: #1f2937; /* primary body text — dark on white bg */ --gray: #5a6a82; /* muted text */ --gray-dark: #38496a; /* less muted text */ /* Accent — logo sky-blue. Variable name kept as --mustard for cascade compatibility with existing classes (.btn-mustard, .text-mustard, etc). */ --mustard: #0084FC; /* logo accent blue — CTAs, links, eyebrows */ --mustard-light: #4DA8FF; /* lighter for hover / dark theme */ --mustard-dark: #0066CC; /* darker for hover on white */ --accent-blue: #0084FC; /* canonical alias — prefer in new code */ --success: #2ecc71; --danger: #e74c3c; /* ─── Typography — Roboto everywhere (per brand decision 2026-05-28) ─── */ --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-heading: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ─── Spacing ─── */ --section-pad: 5rem 2rem; --section-pad-sm: 3rem 1.25rem; --container: 1200px; /* ─── Shadows ─── */ --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 8px 30px rgba(15, 23, 42, 0.12); /* ─── Transitions ─── */ --ease: 0.3s ease; } /* ─── Dark theme override (used by standalone landing pages) ─── Apply via to restore the deep-navy palette. */ body.theme-dark { --navy: #001840; --navy-hover: #1a2d5a; --navy-light: #0a2052; --navy-mid: #142a60; --navy-border: #243f78; --white: #ffffff; --off-white: #e8ecf1; --gray: #8aa0c0; --gray-dark: #5a7099; --mustard: #0084FC; --mustard-light: #4DA8FF; --mustard-dark: #0066CC; --accent-blue: #0084FC; --shadow-sm: 0 1px 3px rgba(0,0,0,0.25); --shadow-md: 0 4px 12px rgba(0,0,0,0.3); --shadow-lg: 0 8px 30px rgba(0,0,0,0.35); } /* ─── RESET ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--white); color: var(--off-white); font-family: var(--font-body); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; } body.theme-dark { background: var(--navy); } h1, h2, h3, h4, h5 { font-family: var(--font-heading); color: var(--navy); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; } h4, h5 { letter-spacing: -0.01em; } body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5 { color: var(--white); } h1 { font-size: 3.4rem; font-weight: 700; } h2 { font-size: 2.4rem; margin-bottom: 1rem; font-weight: 700; } h3 { font-size: 1.5rem; margin-bottom: 0.75rem; font-weight: 700; } h4 { font-size: 1.1rem; margin-bottom: 0.5rem; font-weight: 600; letter-spacing: -0.01em; } h5 { font-weight: 600; } p { margin-bottom: 1rem; color: var(--off-white); } a { text-decoration: none; color: inherit; transition: color var(--ease); } ul { list-style: none; } img { max-width: 100%; display: block; } /* ─── UTILITY ─── */ .container { max-width: var(--container); margin: 0 auto; padding: 0 2rem; } .text-mustard { color: var(--mustard); } .text-white { color: var(--white); } .text-gray { color: var(--gray); } .text-center { text-align: center; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .mt-2 { margin-top: 1rem; } .mt-4 { margin-top: 2rem; } .section-label { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--mustard); margin-bottom: 1rem; } .section-label::before { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--mustard); } .section-label.no-rule::before { display: none; } .eyebrow-num { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; color: var(--mustard); margin-right: 0.6rem; } .section-subtitle { font-family: var(--font-body); font-size: 1.1rem; color: var(--gray); max-width: 640px; margin: 0 auto 2.5rem; line-height: 1.65; } /* Was the italic-serif emphasis under the old Fraunces/Manrope brand. Roboto has no real italic-display variant; we keep the colour cue and use light-weight italic as the emphasis device. */ .serif-accent { font-family: var(--font-heading); font-style: italic; font-weight: 400; color: var(--mustard); } .badge { display: inline-block; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px; } .badge-mustard { background: var(--mustard); color: var(--navy); } .badge-coming { background: var(--navy-mid); color: var(--mustard); border: 1px solid var(--mustard); } /* ─── BUTTONS ─── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.75rem; font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.02em; border-radius: 3px; border: 1px solid transparent; cursor: pointer; transition: all var(--ease); text-align: center; text-transform: none; } .btn-primary { background: var(--navy); color: var(--white); border-color: var(--navy); } .btn-primary:hover { background: var(--navy-hover); border-color: var(--navy-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--white); } .btn-outline { background: transparent; color: var(--navy); border: 1px solid var(--navy); } .btn-outline:hover { background: var(--navy); color: var(--white); } .btn-mustard { background: var(--mustard); color: var(--navy); border-color: var(--mustard); } .btn-mustard:hover { background: var(--mustard-dark); border-color: var(--mustard-dark); color: var(--white); } body.theme-dark .btn-primary { background: var(--mustard); color: var(--navy); } body.theme-dark .btn-primary:hover { background: var(--mustard-light); } body.theme-dark .btn-outline { color: var(--white); border: 2px solid var(--navy-border); background: transparent; } body.theme-dark .btn-outline:hover { border-color: var(--mustard); color: var(--mustard); background: transparent; } .btn-sm { padding: 0.5rem 1.25rem; font-size: 0.85rem; } .btn-group { display: flex; gap: 1rem; flex-wrap: wrap; } /* ─── NAVIGATION ─── */ .nav { position: fixed; top: 0; width: 100%; z-index: 1000; padding: 0.85rem 2rem; display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--navy-border); transition: all var(--ease); } .nav.scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-md); } body.theme-dark .nav { background: rgba(10, 22, 40, 0.92); } body.theme-dark .nav.scrolled { background: rgba(10, 22, 40, 0.98); } .nav-logo { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; color: var(--navy); letter-spacing: -0.5px; } .nav-logo span { color: var(--mustard); } body.theme-dark .nav-logo { color: var(--white); } .nav-links { display: flex; align-items: center; gap: 0.25rem; } .nav-links a { color: var(--gray); font-size: 0.9rem; font-weight: 500; padding: 0.5rem 0.85rem; border-radius: 4px; transition: all var(--ease); } .nav-links a:hover, .nav-links a.active { color: var(--navy); } .nav-links a.active { background: var(--navy-mid); } body.theme-dark .nav-links a:hover, body.theme-dark .nav-links a.active { color: var(--white); } .nav-cta { background: var(--navy); color: var(--white) !important; padding: 0.5rem 1.25rem !important; border-radius: 6px; font-weight: 600 !important; } .nav-cta:hover { background: var(--navy-hover) !important; color: var(--white) !important; } body.theme-dark .nav-cta { background: var(--mustard); color: var(--navy) !important; } body.theme-dark .nav-cta:hover { background: var(--mustard-light) !important; color: var(--navy) !important; } /* Nav dropdown */ .nav-dropdown { position: relative; } .nav-dropdown > a::after { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.7rem; margin-left: 0.4rem; } .dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 260px; background: var(--navy-light); border: 1px solid var(--navy-border); border-radius: 8px; padding: 0.5rem; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transition: all 0.2s ease; margin-top: 0.5rem; } .nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; margin-top: 0; } .dropdown-menu a { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem; border-radius: 6px; font-size: 0.85rem; color: var(--off-white); } .dropdown-menu a:hover { background: var(--navy-mid); color: var(--navy); } body.theme-dark .dropdown-menu a:hover { color: var(--white); } .dropdown-menu a i { width: 20px; text-align: center; color: var(--mustard); font-size: 0.9rem; } .dropdown-divider { height: 1px; background: var(--navy-border); margin: 0.35rem 0.5rem; } /* Wide 2-column dropdown (Packages | Modules) */ .dropdown-menu.wide { min-width: 540px; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 1rem; background: var(--white); border-radius: 4px; } .dropdown-section { display: flex; flex-direction: column; } .dropdown-section + .dropdown-section { border-left: 1px solid var(--navy-border); padding-left: 1rem; } .dropdown-heading { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--mustard); padding: 0.4rem 0.85rem 0.6rem; border-bottom: 1px solid var(--navy-border); margin-bottom: 0.4rem; } .dropdown-menu.wide a { font-size: 0.85rem; color: var(--gray-dark); padding: 0.55rem 0.85rem; border-radius: 2px; } .dropdown-menu.wide a:hover { background: var(--navy-light); color: var(--navy); } /* ASER One custom hero — 2 column with photo */ .hero-aser-one { padding-top: 8rem; padding-bottom: 5rem; background: var(--white); position: relative; overflow: hidden; } .hero-aser-one::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(10, 22, 40, 0.06) 1px, transparent 0); background-size: 28px 28px; mask-image: radial-gradient(ellipse 60% 60% at 30% 40%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 30% 40%, #000 30%, transparent 80%); pointer-events: none; } .aser-one-hero-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: center; position: relative; } .aser-one-hero-content h1 { font-size: 3.6rem; font-weight: 400; margin-bottom: 1.5rem; line-height: 1.05; letter-spacing: -0.025em; } .aser-one-hero-content p { font-size: 1.1rem; color: var(--gray); max-width: 540px; margin-bottom: 2rem; line-height: 1.7; } .aser-one-hero-visual { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; border: 1px solid var(--navy-border); box-shadow: var(--shadow-lg); } .aser-one-hero-visual img { width: 100%; height: 100%; object-fit: cover; } .aser-one-hero-visual .visual-tag { position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem; background: rgba(10, 22, 40, 0.94); backdrop-filter: blur(8px); border: 1px solid rgba(212, 165, 32, 0.3); padding: 0.95rem 1.1rem; border-radius: 3px; color: var(--white); } .aser-one-hero-visual .visual-tag .label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--mustard-light); display: block; margin-bottom: 0.25rem; } .aser-one-hero-visual .visual-tag .text { font-size: 0.85rem; font-weight: 500; color: var(--white); } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; } .hamburger span { width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: var(--ease); } body.theme-dark .hamburger span { background: var(--white); } /* ─── HERO ─── */ .hero { min-height: 100vh; display: flex; align-items: center; padding: 8rem 2rem 5rem; background: var(--white); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(10, 22, 40, 0.07) 1px, transparent 0); background-size: 28px 28px; mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 30%, transparent 80%); pointer-events: none; } body.theme-dark .hero { background: var(--navy); } body.theme-dark .hero::before { background-image: radial-gradient(circle at 1px 1px, rgba(212, 165, 32, 0.10) 1px, transparent 0); } .hero-inner { max-width: var(--container); margin: 0 auto; width: 100%; position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: center; } .hero-inner.single-col { display: block; } .hero h1 { font-size: 4rem; max-width: 720px; margin-bottom: 1.5rem; font-weight: 400; line-height: 1.05; } .hero h1 .highlight { color: var(--mustard); font-style: italic; font-weight: 400; } .hero p { font-size: 1.15rem; max-width: 540px; margin-bottom: 2.25rem; color: var(--gray); line-height: 1.7; } .hero-visual { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; border: 1px solid var(--navy-border); box-shadow: var(--shadow-lg); } .hero-visual img { width: 100%; height: 100%; object-fit: cover; } .hero-visual::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.08); pointer-events: none; } .hero-visual .visual-tag { position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(8px); border: 1px solid rgba(212, 165, 32, 0.3); padding: 0.85rem 1.1rem; border-radius: 4px; color: var(--white); } .hero-visual .visual-tag .label { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--mustard-light); display: block; margin-bottom: 0.2rem; } .hero-visual .visual-tag .text { font-size: 0.88rem; font-weight: 500; } .hero .btn-group { margin-bottom: 3rem; } .hero-stats { display: flex; gap: 3rem; padding-top: 2rem; border-top: 1px solid var(--navy-border); } .hero-stat .num { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--mustard); } .hero-stat span { display: block; font-size: 0.85rem; color: var(--gray); } /* ─── STATS BAR ─── */ .stats-bar { background: var(--navy-light); border-top: 1px solid var(--navy-border); border-bottom: 1px solid var(--navy-border); padding: 2.5rem 2rem; } .stats-inner { max-width: var(--container); margin: 0 auto; display: flex; justify-content: space-around; gap: 2rem; flex-wrap: wrap; } .stat-item { text-align: center; } .stat-item .num { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; color: var(--mustard); display: block; } .stat-item .label { font-size: 0.85rem; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; } /* ─── SECTION ─── */ .section { padding: var(--section-pad); } .section-alt { background: var(--navy-light); } .section-header { text-align: center; margin-bottom: 3rem; } /* ─── CARDS ─── */ .card { background: var(--white); border: 1px solid var(--navy-border); border-radius: 4px; padding: 2rem; transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); position: relative; } .section-alt .card { background: var(--white); } .card:hover { border-color: var(--navy); box-shadow: var(--shadow-md); transform: translateY(-2px); } .card.card-bordered { border-top: 3px solid var(--navy); } .card.card-mustard-top { border-top: 3px solid var(--mustard); } .card-icon { width: 52px; height: 52px; background: var(--navy); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; } .card-icon i { font-size: 1.25rem; color: var(--mustard); } body.theme-dark .card-icon { background: var(--navy-light); } .card h3 a { color: var(--navy); } .card h3 a:hover { color: var(--mustard); } body.theme-dark .card h3 a { color: var(--white); } .card p { font-size: 0.92rem; color: var(--gray); margin-bottom: 0; } /* ─── GRID LAYOUTS ─── */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } /* ─── PRODUCT MODULE GRID ─── */ .module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } .module-card { background: var(--white); border: 1px solid var(--navy-border); border-radius: 4px; padding: 1.75rem; display: flex; align-items: flex-start; gap: 1rem; transition: all var(--ease); position: relative; } .module-card::after { content: '\f061'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 1.75rem; right: 1.5rem; font-size: 0.75rem; color: var(--navy-border); transition: all var(--ease); } .module-card:hover { border-color: var(--navy); box-shadow: var(--shadow-md); transform: translateY(-2px); } .module-card:hover::after { color: var(--mustard); transform: translateX(4px); } .module-card .icon { width: 44px; height: 44px; min-width: 44px; background: var(--navy); border-radius: 4px; display: flex; align-items: center; justify-content: center; } .module-card .icon i { font-size: 1.1rem; color: var(--mustard); } body.theme-dark .module-card .icon { background: var(--navy-light); } /* ─── PACKAGE CARDS (with image) ─── */ .package-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; } .package-grid.featured-first { grid-template-columns: 1.6fr 1fr 1fr; } .package-card { background: var(--white); border: 1px solid var(--navy-border); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); position: relative; } .package-card:hover { border-color: var(--navy); box-shadow: var(--shadow-lg); transform: translateY(-3px); } .package-card.flagship { border-color: var(--navy); border-top: 3px solid var(--mustard); } .package-card.flagship::before { content: 'FLAGSHIP'; position: absolute; top: 1rem; right: 1rem; z-index: 2; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.15em; background: var(--mustard); color: var(--navy); padding: 0.3rem 0.7rem; border-radius: 2px; } .package-image { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-mid); border-bottom: 1px solid var(--navy-border); } .package-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .package-card:hover .package-image img { transform: scale(1.04); } .package-image .corner-tag { position: absolute; top: 1rem; left: 1rem; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(4px); color: var(--mustard-light); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; padding: 0.4rem 0.7rem; border-radius: 2px; text-transform: uppercase; } .package-body { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; } .package-body .pkg-eyebrow { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--mustard); margin-bottom: 0.5rem; } .package-body h3 { font-family: var(--font-heading); font-size: 1.55rem; font-weight: 500; margin-bottom: 0.6rem; letter-spacing: -0.015em; } .package-body h3 a { color: var(--navy); } .package-body h3 a:hover { color: var(--mustard); } body.theme-dark .package-body h3 a { color: var(--white); } .package-body p { font-size: 0.92rem; color: var(--gray); margin-bottom: 1.25rem; line-height: 1.65; } .package-includes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--navy-border); } .pkg-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--gray-dark); background: var(--navy-mid); padding: 0.3rem 0.6rem; border-radius: 2px; font-weight: 500; } .pkg-chip i { font-size: 0.7rem; color: var(--mustard); } .package-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.08em; } .package-cta i { font-size: 0.7rem; transition: transform var(--ease); } .package-card:hover .package-cta i { transform: translateX(4px); } body.theme-dark .package-cta { color: var(--mustard); } .module-card h4 { margin-bottom: 0.25rem; } .module-card h4 a { color: var(--navy); } .module-card h4 a:hover { color: var(--mustard); } body.theme-dark .module-card h4 a { color: var(--white); } .module-card p { font-size: 0.85rem; color: var(--gray); margin: 0; line-height: 1.5; } /* ─── FEATURE LIST (product pages) ─── */ .feature-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; } .feature-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; background: var(--navy-light); border: 1px solid var(--navy-border); border-radius: 8px; } .feature-item i { color: var(--mustard); font-size: 1rem; margin-top: 0.2rem; min-width: 20px; text-align: center; } .feature-item h4 { font-size: 1rem; margin-bottom: 0.25rem; } .feature-item p { font-size: 0.87rem; color: var(--gray); margin: 0; line-height: 1.5; } /* ─── PRODUCT PAGE HERO ─── */ .product-hero { padding: 9rem 2rem 4rem; background: var(--white); border-bottom: 1px solid var(--navy-border); } body.theme-dark .product-hero { background: var(--navy); } .product-hero-inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; gap: 2rem; } .product-hero-icon { width: 72px; height: 72px; min-width: 72px; background: var(--navy-mid); border: 1px solid var(--navy-border); border-radius: 14px; display: flex; align-items: center; justify-content: center; } .product-hero-icon i { font-size: 1.75rem; color: var(--mustard); } .product-hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; } .product-hero p { font-size: 1.1rem; color: var(--gray); margin: 0; max-width: 600px; } .product-breadcrumb { font-size: 0.85rem; color: var(--gray); margin-bottom: 1rem; } .product-breadcrumb a { color: var(--gray); } .product-breadcrumb a:hover { color: var(--mustard); } .product-breadcrumb .sep { margin: 0 0.5rem; color: var(--gray-dark); } /* ─── PRICING GRID (4 tiers) ─── */ .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .pricing-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .pricing-card { background: var(--white); border: 1px solid var(--navy-border); border-radius: 4px; padding: 2rem 1.5rem; text-align: left; transition: all var(--ease); position: relative; display: flex; flex-direction: column; } .section-alt .pricing-card { background: var(--white); } .pricing-card:hover { border-color: var(--navy); box-shadow: var(--shadow-md); transform: translateY(-2px); } .pricing-card.featured { border-color: var(--navy); border-top: 3px solid var(--mustard); box-shadow: var(--shadow-md); } .pricing-card.featured::before { content: 'MOST POPULAR'; position: absolute; top: -1px; right: 1.5rem; background: var(--mustard); color: var(--navy); font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; padding: 0.4rem 0.7rem; border-radius: 0 0 2px 2px; letter-spacing: 0.12em; } .pricing-card .tier-label { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; color: var(--mustard); margin-bottom: 0.5rem; } .pricing-card h3 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 500; margin-bottom: 0.35rem; letter-spacing: -0.015em; } .pricing-card .users { font-size: 0.78rem; color: var(--gray); margin-bottom: 1.5rem; font-family: var(--font-mono); letter-spacing: 0.04em; } .pricing-card .price { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 400; color: var(--navy); margin-bottom: 0; line-height: 1; letter-spacing: -0.03em; } body.theme-dark .pricing-card .price { color: var(--white); } .pricing-card .price-period { font-size: 0.78rem; color: var(--gray); margin-bottom: 1.5rem; margin-top: 0.4rem; font-family: var(--font-mono); letter-spacing: 0.04em; } .pricing-card .price sup { font-size: 1.1rem; top: -1.2em; margin-right: 0.1rem; color: var(--gray); } .pricing-card .price-divider { height: 1px; background: var(--navy-border); margin: 0 0 1.25rem 0; } .pricing-features { text-align: left; margin-bottom: 1.75rem; flex: 1; } .pricing-features li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.45rem 0; font-size: 0.85rem; color: var(--gray-dark); line-height: 1.5; } .pricing-features li i { color: var(--mustard); font-size: 0.7rem; min-width: 14px; margin-top: 0.4rem; } .pricing-card .btn { width: 100%; text-align: center; } /* ─── TEAM ─── */ .team-card { background: var(--navy-light); border: 1px solid var(--navy-border); border-radius: 12px; padding: 2.5rem; } .team-avatar { width: 100px; height: 100px; border-radius: 50%; background: var(--navy-mid); border: 3px solid var(--navy-border); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .team-avatar i { font-size: 2.5rem; color: var(--gray); } .team-card h3 { margin-bottom: 0.25rem; } .team-card .role { color: var(--mustard); font-size: 0.9rem; font-weight: 600; margin-bottom: 1rem; } .team-card .bio { color: var(--gray); font-size: 0.92rem; margin-bottom: 1.5rem; } /* Experience timeline */ .experience-timeline { border-left: 2px solid var(--navy-border); padding-left: 1.5rem; margin-top: 1rem; } .exp-item { position: relative; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--navy-border); } .exp-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .exp-item::before { content: ''; position: absolute; left: -1.75rem; top: 0.35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--mustard); border: 2px solid var(--navy-light); } .exp-item .period { font-size: 0.8rem; color: var(--mustard); font-weight: 600; margin-bottom: 0.25rem; } .exp-item h4 { font-size: 1rem; color: var(--navy); margin-bottom: 0.15rem; } body.theme-dark .exp-item h4 { color: var(--white); } .exp-item .company { font-size: 0.88rem; color: var(--gray); margin-bottom: 0.35rem; } .exp-item .company i { margin-right: 0.35rem; color: var(--gray-dark); } .exp-item p { font-size: 0.85rem; color: var(--gray); margin: 0; } /* ─── PROJECT TABLE ─── */ .project-table { width: 100%; border-collapse: collapse; } .project-table th, .project-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--navy-border); font-size: 0.9rem; } .project-table th { color: var(--mustard); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; background: var(--navy-mid); } .project-table td { color: var(--off-white); } .project-table tr:hover td { background: var(--navy-mid); } .project-table .jv-yes { color: var(--success); font-weight: 600; } .project-table .jv-no { color: var(--gray); } /* ─── RELATED MODULES ─── */ .related-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; } .related-card { display: flex; align-items: center; gap: 1rem; background: var(--navy-light); border: 1px solid var(--navy-border); border-radius: 8px; padding: 1.25rem; transition: all var(--ease); } .related-card:hover { border-color: var(--mustard); transform: translateY(-1px); } .related-card i { font-size: 1.25rem; color: var(--mustard); min-width: 24px; text-align: center; } .related-card .info h4 { font-size: 0.95rem; margin-bottom: 0.1rem; } .related-card .info p { font-size: 0.8rem; color: var(--gray); margin: 0; } /* ─── CTA SECTION ─── */ .cta-section { background: var(--navy-light); border-top: 1px solid var(--navy-border); border-bottom: 1px solid var(--navy-border); padding: 4rem 2rem; text-align: center; } .cta-section h2 { margin-bottom: 0.75rem; } .cta-section p { color: var(--gray); margin-bottom: 2rem; max-width: 520px; margin-left: auto; margin-right: auto; } /* ─── FOOTER ─── */ .footer { background: var(--navy-light); border-top: 1px solid var(--navy-border); padding: 4rem 2rem 2rem; } body.theme-dark .footer { background: var(--navy); } .footer-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; } .footer-brand .logo { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--navy); margin-bottom: 1rem; } .footer-brand .logo span { color: var(--mustard); } body.theme-dark .footer-brand .logo { color: var(--white); } .footer-brand p { font-size: 0.88rem; color: var(--gray); margin-bottom: 1.25rem; max-width: 300px; } .footer-social { display: flex; gap: 0.75rem; } .footer-social a { width: 36px; height: 36px; border-radius: 6px; background: var(--white); border: 1px solid var(--navy-border); display: flex; align-items: center; justify-content: center; color: var(--gray); font-size: 0.9rem; transition: all var(--ease); } body.theme-dark .footer-social a { background: var(--navy-light); } .footer-social a:hover { border-color: var(--mustard); color: var(--mustard); } .footer-col h4 { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--navy); margin-bottom: 1.25rem; } body.theme-dark .footer-col h4 { color: var(--white); } .footer-col a { display: block; font-size: 0.88rem; color: var(--gray); padding: 0.3rem 0; transition: color var(--ease); } .footer-col a:hover { color: var(--mustard); } .footer-bottom { max-width: var(--container); margin: 0 auto; padding-top: 2rem; margin-top: 3rem; border-top: 1px solid var(--navy-border); display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: var(--gray-dark); } /* ─── CONTACT FORM ─── */ .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--navy); margin-bottom: 0.4rem; } body.theme-dark .form-group label { color: var(--white); } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.75rem 1rem; background: var(--white); border: 1px solid var(--navy-border); border-radius: 6px; color: var(--navy); font-family: var(--font-body); font-size: 0.92rem; transition: border-color var(--ease); } body.theme-dark .form-group input, body.theme-dark .form-group textarea, body.theme-dark .form-group select { background: var(--navy-mid); color: var(--white); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--mustard); } .form-group textarea { min-height: 120px; resize: vertical; } .form-group select option { background: var(--navy-light); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } /* ─── COMPARISON TABLE (Pricing) ─── */ .comparison-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .comparison-table { width: 100%; border-collapse: collapse; min-width: 800px; } .comparison-table th, .comparison-table td { padding: 0.85rem 1rem; text-align: center; border-bottom: 1px solid var(--navy-border); font-size: 0.88rem; } .comparison-table th { background: var(--navy-mid); color: var(--navy); font-weight: 600; position: sticky; top: 0; } body.theme-dark .comparison-table th { color: var(--white); } .comparison-table th:first-child, .comparison-table td:first-child { text-align: left; font-weight: 500; color: var(--off-white); } .comparison-table td i.fa-check { color: var(--mustard); } .comparison-table td i.fa-minus { color: var(--gray-dark); } .comparison-table tr:hover td { background: rgba(238, 242, 247, 0.6); } body.theme-dark .comparison-table tr:hover td { background: rgba(26, 45, 74, 0.4); } /* ─── FADE-IN ANIMATION ─── */ .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* ─── SECTION HEADER VARIANTS ─── */ .section-header.left-aligned { text-align: left; max-width: 720px; margin-bottom: 3.5rem; } .section-header.left-aligned .section-subtitle { margin: 0; max-width: 600px; } .section-header.split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; text-align: left; margin-bottom: 3.5rem; } .section-header.split .section-subtitle { margin: 0; max-width: none; } .section-divider { display: flex; align-items: center; gap: 1.25rem; margin: 4rem 0 2rem; } .section-divider .num { font-family: var(--font-mono); font-size: 0.85rem; color: var(--mustard); letter-spacing: 0.1em; font-weight: 500; } .section-divider .label { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.08em; } .section-divider .rule { flex: 1; height: 1px; background: var(--navy-border); } body.theme-dark .section-divider .label { color: var(--white); } /* ─── SPLIT FEATURE LAYOUT (image + content) ─── */ .split-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .split-feature.reverse { direction: rtl; } .split-feature.reverse > * { direction: ltr; } .split-feature .visual { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--navy-border); border-radius: 4px; box-shadow: var(--shadow-lg); } .split-feature .visual img { width: 100%; height: 100%; object-fit: cover; } .split-feature .content h2 { font-size: 2.4rem; margin-bottom: 1rem; } .split-feature .content p { color: var(--gray); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.5rem; } .split-feature .content ul { margin-bottom: 2rem; } .split-feature .content ul li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.5rem 0; font-size: 0.95rem; color: var(--gray-dark); } .split-feature .content ul li i { color: var(--mustard); margin-top: 0.4rem; font-size: 0.8rem; } /* ─── INCLUDED MATRIX (package contents) ─── */ .includes-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--navy-border); border: 1px solid var(--navy-border); border-radius: 4px; overflow: hidden; } .includes-cell { background: var(--white); padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; transition: background var(--ease); } .includes-cell:hover { background: var(--navy-light); } .includes-cell .icon { width: 36px; height: 36px; background: var(--navy); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.4rem; } .includes-cell .icon i { color: var(--mustard); font-size: 0.95rem; } .includes-cell h5 { font-size: 0.95rem; font-weight: 600; color: var(--navy); margin: 0; } body.theme-dark .includes-cell h5 { color: var(--white); } .includes-cell p { font-size: 0.78rem; color: var(--gray); margin: 0; line-height: 1.5; } /* ─── BANNER STAT STRIP ─── */ .stat-strip { background: var(--navy); color: var(--white); padding: 3.5rem 2rem; position: relative; overflow: hidden; } .stat-strip::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(212, 165, 32, 0.08) 1px, transparent 0); background-size: 28px 28px; pointer-events: none; } .stat-strip-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; position: relative; } .stat-strip .stat { border-left: 1px solid rgba(255,255,255,0.1); padding-left: 1.5rem; } .stat-strip .stat:first-child { border-left: none; padding-left: 0; } .stat-strip .stat .num { font-family: var(--font-heading); font-size: 3rem; font-weight: 400; color: var(--mustard); letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.5rem; } .stat-strip .stat .label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.7); } /* ─── PILL TABS (Packages | Modules switcher) ─── */ .pill-tabs { display: inline-flex; background: var(--navy-light); border: 1px solid var(--navy-border); border-radius: 4px; padding: 4px; margin: 0 auto 2.5rem; } .pill-tabs button { background: transparent; border: none; padding: 0.65rem 1.5rem; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--gray); cursor: pointer; border-radius: 2px; transition: all var(--ease); letter-spacing: 0.02em; } .pill-tabs button.active { background: var(--navy); color: var(--white); } /* ============================================================ 2026 REBUILD — Vertical-first product catalogue ============================================================ */ /* ─── CURRENCY SWITCHER (pill) ─── */ .currency-switcher { display: inline-flex; align-items: center; gap: 0; background: var(--white); border: 1px solid var(--navy-border); border-radius: 4px; padding: 4px; box-shadow: var(--shadow-sm); } .currency-switcher .ccy-label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gray); padding: 0 0.85rem 0 0.6rem; border-right: 1px solid var(--navy-border); margin-right: 4px; align-self: stretch; display: inline-flex; align-items: center; } .currency-switcher button { background: transparent; border: none; padding: 0.55rem 0.85rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--gray); cursor: pointer; border-radius: 2px; transition: all var(--ease); letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 0.45rem; } .currency-switcher button .flag { font-size: 0.95rem; line-height: 1; } .currency-switcher button:hover { color: var(--navy); } .currency-switcher button.active { background: var(--navy); color: var(--white); } .currency-switcher button.active .flag { filter: none; } /* Hide all currency cells by default; JS reveals one */ [data-currency] { display: none; } body[data-active-currency="BIF"] [data-currency="BIF"], body[data-active-currency="KES"] [data-currency="KES"] { display: inline; } body[data-active-currency="BIF"] td[data-currency="BIF"], body[data-active-currency="KES"] td[data-currency="KES"] { display: table-cell; } body[data-active-currency="BIF"] tr[data-currency="BIF"], body[data-active-currency="KES"] tr[data-currency="KES"] { display: table-row; } body[data-active-currency="BIF"] div[data-currency="BIF"], body[data-active-currency="KES"] div[data-currency="KES"] { display: block; } /* ─── ACTIVE MARKETS NOTE ─── */ .pricing-markets-note { font-size: 0.85rem; color: var(--gray); background: var(--navy-light); border: 1px solid var(--navy-border); border-radius: 4px; padding: 0.75rem 1.25rem; margin-bottom: 1rem; } .pricing-markets-note .markets-flag { font-size: 1rem; } .pricing-markets-note a { color: var(--brand); text-decoration: none; font-weight: 500; } .pricing-markets-note a:hover { text-decoration: underline; } /* ─── PRICING TOOLBAR (above pricing tables) ─── */ .pricing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 1.5rem; background: var(--navy-light); border: 1px solid var(--navy-border); border-radius: 4px; margin-bottom: 2.5rem; flex-wrap: wrap; } .pricing-toolbar .toolbar-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gray); display: flex; align-items: center; gap: 0.6rem; } .pricing-toolbar .toolbar-label::before { content: ''; display: inline-block; width: 22px; height: 1px; background: var(--mustard); } /* ─── VERTICAL HERO (product sales pages) ─── */ .vertical-hero { padding: 9rem 2rem 5rem; background: var(--white); border-bottom: 1px solid var(--navy-border); position: relative; overflow: hidden; } .vertical-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(10, 22, 40, 0.06) 1px, transparent 0); background-size: 28px 28px; mask-image: radial-gradient(ellipse 70% 60% at 80% 30%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 80% 30%, #000 30%, transparent 80%); pointer-events: none; } .vertical-hero-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: center; position: relative; } .vertical-hero-content .product-breadcrumb { margin-bottom: 1.5rem; } .vertical-hero-content h1 { font-size: 3.6rem; font-weight: 400; margin-bottom: 1.5rem; line-height: 1.04; letter-spacing: -0.025em; } .vertical-hero-content h1 .serif-accent { display: inline; } .vertical-hero-content > p { font-size: 1.15rem; color: var(--gray); max-width: 540px; margin-bottom: 2rem; line-height: 1.65; } .vertical-hero-meta { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; padding: 1.5rem 0 0; margin-top: 2rem; border-top: 1px solid var(--navy-border); } .vertical-hero-meta .meta-item { display: flex; flex-direction: column; gap: 0.2rem; } .vertical-hero-meta .meta-item .label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mustard); } .vertical-hero-meta .meta-item .value { font-family: var(--font-heading); font-size: 1.1rem; color: var(--navy); font-weight: 500; } .vertical-hero-visual { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; border: 1px solid var(--navy-border); box-shadow: var(--shadow-lg); background: var(--navy-mid); } .vertical-hero-visual img { width: 100%; height: 100%; object-fit: cover; } .vertical-hero-visual .visual-tag { position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem; background: rgba(10, 22, 40, 0.94); backdrop-filter: blur(8px); border: 1px solid rgba(212, 165, 32, 0.3); padding: 0.95rem 1.1rem; border-radius: 3px; color: var(--white); } .vertical-hero-visual .visual-tag .label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--mustard-light); display: block; margin-bottom: 0.25rem; } .vertical-hero-visual .visual-tag .text { font-size: 0.85rem; font-weight: 500; color: var(--white); } .vertical-hero-visual.coming-soon::after { content: 'Coming soon'; position: absolute; top: 1rem; right: 1rem; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; background: var(--mustard); color: var(--navy); padding: 0.4rem 0.7rem; border-radius: 2px; } /* ─── PLAN LADDER (5-tier pricing card row) ─── */ .plan-ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; } .plan-ladder.cols-4 { grid-template-columns: repeat(4, 1fr); } .plan-card { background: var(--white); border: 1px solid var(--navy-border); border-radius: 4px; padding: 1.75rem 1.35rem; display: flex; flex-direction: column; position: relative; transition: all var(--ease); } .plan-card:hover { border-color: var(--navy); box-shadow: var(--shadow-md); transform: translateY(-2px); } .plan-card.featured { border-color: var(--navy); border-top: 3px solid var(--mustard); box-shadow: var(--shadow-md); } .plan-card.featured::before { content: 'MOST POPULAR'; position: absolute; top: -1px; right: 1.25rem; background: var(--mustard); color: var(--navy); font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600; padding: 0.35rem 0.6rem; border-radius: 0 0 2px 2px; letter-spacing: 0.12em; } .plan-card.free { background: var(--navy-mid); } .plan-card .plan-eyebrow { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--mustard); margin-bottom: 0.35rem; } .plan-card h3 { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 500; margin-bottom: 0.25rem; letter-spacing: -0.015em; } .plan-card .plan-users { font-size: 0.74rem; color: var(--gray); margin-bottom: 1.25rem; font-family: var(--font-mono); letter-spacing: 0.04em; } .plan-card .plan-price { font-family: var(--font-heading); font-size: 1.85rem; font-weight: 400; color: var(--navy); line-height: 1; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; } .plan-card .plan-price .ccy { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; color: var(--gray); text-transform: uppercase; letter-spacing: 0.08em; } .plan-card .plan-price.is-talk { font-size: 1.4rem; } .plan-card .plan-period { font-size: 0.72rem; color: var(--gray); margin-top: 0.4rem; margin-bottom: 1rem; font-family: var(--font-mono); letter-spacing: 0.04em; } .plan-card .plan-divider { height: 1px; background: var(--navy-border); margin: 0 0 1rem; } .plan-card .plan-features { margin-bottom: 1.5rem; flex: 1; } .plan-card .plan-features li { display: flex; gap: 0.55rem; padding: 0.35rem 0; font-size: 0.8rem; color: var(--gray-dark); line-height: 1.45; } .plan-card .plan-features li i { color: var(--mustard); font-size: 0.68rem; min-width: 12px; margin-top: 0.32rem; } .plan-card .btn { width: 100%; font-size: 0.8rem; padding: 0.7rem 1rem; } /* ─── INCLUDES CALLOUT (what's in every plan) ─── */ .includes-callout { background: var(--navy-light); border: 1px solid var(--navy-border); border-left: 3px solid var(--mustard); border-radius: 4px; padding: 1.75rem 2rem; display: grid; grid-template-columns: minmax(180px, 220px) 1fr; gap: 2rem; align-items: start; } .includes-callout h4 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mustard); margin: 0; padding-top: 0.2rem; } .includes-callout-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem 1.25rem; } .includes-callout-list li { display: flex; gap: 0.55rem; font-size: 0.85rem; color: var(--gray-dark); align-items: flex-start; line-height: 1.5; padding: 0.2rem 0; } .includes-callout-list li i { color: var(--mustard); font-size: 0.7rem; margin-top: 0.4rem; min-width: 12px; } /* ─── COMING-SOON BANNER ─── */ .coming-soon-banner { background: var(--navy); color: var(--white); border-radius: 4px; padding: 2.5rem 2.5rem; display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; position: relative; overflow: hidden; } .coming-soon-banner::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(212, 165, 32, 0.07) 1px, transparent 0); background-size: 28px 28px; pointer-events: none; } .coming-soon-banner .cs-icon { width: 64px; height: 64px; border: 1px solid rgba(212, 165, 32, 0.3); background: rgba(212, 165, 32, 0.08); border-radius: 4px; display: flex; align-items: center; justify-content: center; position: relative; } .coming-soon-banner .cs-icon i { font-size: 1.5rem; color: var(--mustard); } .coming-soon-banner .cs-content { position: relative; } .coming-soon-banner .cs-eyebrow { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--mustard); display: inline-block; margin-bottom: 0.6rem; } .coming-soon-banner h3 { color: var(--white); font-family: var(--font-heading); font-size: 1.7rem; font-weight: 500; margin: 0 0 0.5rem; letter-spacing: -0.015em; } .coming-soon-banner p { color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; margin: 0; max-width: 640px; line-height: 1.6; } .coming-soon-banner .btn-mustard { position: relative; } /* ─── PART-OF (spec page → vertical product) ─── */ .part-of { background: var(--navy-light); border: 1px solid var(--navy-border); border-top: 3px solid var(--mustard); border-radius: 4px; padding: 2.5rem 2rem; } .part-of-header { text-align: center; margin-bottom: 1.75rem; } .part-of-header .label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mustard); display: block; margin-bottom: 0.6rem; } .part-of-header h3 { font-family: var(--font-heading); font-size: 1.65rem; font-weight: 500; margin: 0; letter-spacing: -0.015em; } .part-of-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.85rem; } .part-of-card { background: var(--white); border: 1px solid var(--navy-border); border-radius: 4px; padding: 1.1rem 1.25rem; display: flex; align-items: center; gap: 0.85rem; transition: all var(--ease); } .part-of-card:hover { border-color: var(--navy); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .part-of-card i { color: var(--mustard); font-size: 1rem; min-width: 22px; } .part-of-card .meta { display: flex; flex-direction: column; gap: 0.1rem; } .part-of-card .meta strong { font-size: 0.92rem; color: var(--navy); font-weight: 600; } .part-of-card .meta span { font-size: 0.72rem; color: var(--gray); font-family: var(--font-mono); letter-spacing: 0.04em; } /* ─── VERTICAL CATALOGUE GRID (products.html) ─── */ .vertical-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .vertical-card { background: var(--white); border: 1px solid var(--navy-border); border-radius: 4px; padding: 2rem 2rem 1.75rem; display: flex; flex-direction: column; gap: 1rem; transition: all var(--ease); position: relative; } .vertical-card:hover { border-color: var(--navy); box-shadow: var(--shadow-md); transform: translateY(-2px); } .vertical-card.coming::after { content: 'Coming soon'; position: absolute; top: 1.25rem; right: 1.25rem; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; background: var(--mustard); color: var(--navy); padding: 0.35rem 0.6rem; border-radius: 2px; } .vertical-card .vc-icon { width: 52px; height: 52px; background: var(--navy); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.25rem; } .vertical-card .vc-icon i { font-size: 1.35rem; color: var(--mustard); } .vertical-card .vc-eyebrow { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--mustard); } .vertical-card h3 { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 500; margin: 0; letter-spacing: -0.015em; } .vertical-card h3 a { color: var(--navy); } .vertical-card h3 a:hover { color: var(--mustard); } .vertical-card > p { font-size: 0.9rem; color: var(--gray); margin: 0; line-height: 1.6; } .vertical-card .vc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.85rem; border-top: 1px dashed var(--navy-border); } .vertical-card .vc-tags span { font-size: 0.7rem; font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--gray-dark); background: var(--navy-mid); padding: 0.3rem 0.55rem; border-radius: 2px; } .vertical-card .vc-cta { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.08em; } .vertical-card .vc-cta i { font-size: 0.7rem; transition: transform var(--ease); } .vertical-card:hover .vc-cta i { transform: translateX(4px); } /* ─── SPEC PAGES INDEX (products.html bottom row) ─── */ .spec-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.85rem; } .spec-index a { background: var(--white); border: 1px solid var(--navy-border); border-radius: 4px; padding: 1.1rem 1.25rem; display: flex; align-items: center; gap: 0.85rem; transition: all var(--ease); } .spec-index a:hover { border-color: var(--navy); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .spec-index a i { color: var(--mustard); font-size: 1rem; min-width: 22px; } .spec-index a .meta strong { display: block; font-size: 0.9rem; color: var(--navy); font-weight: 600; margin-bottom: 0.1rem; } .spec-index a .meta span { font-size: 0.72rem; color: var(--gray); font-family: var(--font-mono); letter-spacing: 0.04em; } /* ─── AT-A-GLANCE (spec page hero summary) ─── */ .at-a-glance { background: var(--white); border: 1px solid var(--navy-border); border-left: 3px solid var(--mustard); border-radius: 4px; padding: 1.75rem 2rem; } .at-a-glance h4 { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mustard); margin: 0 0 1rem; } .at-a-glance ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.5rem 1.25rem; } .at-a-glance li { display: flex; gap: 0.6rem; font-size: 0.9rem; color: var(--gray-dark); line-height: 1.5; padding: 0.2rem 0; } .at-a-glance li i { color: var(--mustard); font-size: 0.78rem; margin-top: 0.42rem; min-width: 12px; } /* ─── FAQ (collapsible) ─── */ .faq-list { display: flex; flex-direction: column; gap: 0.75rem; max-width: 760px; margin: 0 auto; } .faq-item { background: var(--white); border: 1px solid var(--navy-border); border-radius: 4px; overflow: hidden; } .faq-item summary { list-style: none; cursor: pointer; padding: 1.15rem 1.5rem; font-size: 0.98rem; font-weight: 600; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: background var(--ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '\f067'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.7rem; color: var(--mustard); transition: transform var(--ease); } .faq-item[open] summary::after { content: '\f068'; } .faq-item summary:hover { background: var(--navy-light); } .faq-item .faq-body { padding: 0 1.5rem 1.25rem; font-size: 0.92rem; color: var(--gray); line-height: 1.65; } /* ─── PRICING TABLE (3 columns: plan / what / price) ─── */ .price-table-wrap { border: 1px solid var(--navy-border); border-radius: 4px; overflow: hidden; background: var(--white); } .price-table { width: 100%; border-collapse: collapse; } .price-table th, .price-table td { padding: 1.1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--navy-border); font-size: 0.92rem; vertical-align: middle; } .price-table thead th { background: var(--navy-mid); color: var(--navy); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; } .price-table tbody tr:last-child td { border-bottom: none; } .price-table tbody tr:hover td { background: var(--navy-light); } .price-table .plan-name { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 500; color: var(--navy); letter-spacing: -0.01em; } .price-table .plan-name small { display: block; font-family: var(--font-mono); font-size: 0.68rem; color: var(--gray); margin-top: 0.2rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; } .price-table .plan-perks { font-size: 0.85rem; color: var(--gray-dark); line-height: 1.55; } .price-table .plan-cell-price { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 400; color: var(--navy); letter-spacing: -0.02em; white-space: nowrap; } .price-table .plan-cell-price .ccy-tag { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; color: var(--gray); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 0.35rem; vertical-align: middle; } .price-table .plan-cell-price small { display: block; font-family: var(--font-mono); font-size: 0.65rem; color: var(--gray); margin-top: 0.15rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; } .price-table tr.is-free td { background: var(--navy-light); } .price-table tr.is-featured { background: rgba(212, 165, 32, 0.05); } /* ─── VERTICAL TABS (pricing page sub-product switcher) ─── */ .vertical-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; border-bottom: 1px solid var(--navy-border); margin-bottom: 2.5rem; padding-bottom: 0; } .vertical-tabs button { background: transparent; border: none; padding: 0.95rem 1.25rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--gray); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--ease); display: inline-flex; align-items: center; gap: 0.55rem; } .vertical-tabs button i { color: var(--gray); font-size: 0.92rem; transition: color var(--ease); } .vertical-tabs button:hover { color: var(--navy); } .vertical-tabs button:hover i { color: var(--mustard); } .vertical-tabs button.active { color: var(--navy); border-bottom-color: var(--mustard); } .vertical-tabs button.active i { color: var(--mustard); } .vertical-panel { display: none; } .vertical-panel.active { display: block; } /* ─── FEATURE BLOCK (icon-grid for vertical pages) ─── */ .feature-block { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .feature-block .feat { background: var(--white); border: 1px solid var(--navy-border); border-radius: 4px; padding: 1.5rem; transition: all var(--ease); } .feature-block .feat:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .feature-block .feat i { color: var(--mustard); font-size: 1.35rem; margin-bottom: 0.85rem; display: inline-block; } .feature-block .feat h4 { font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: 0.4rem; } .feature-block .feat p { font-size: 0.85rem; color: var(--gray); margin: 0; line-height: 1.55; } /* ─── FOOTER 5-COL (rebuild) ─── */ .footer-inner.cols-5 { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } /* ─── SECTION HERO (page header for content pages) ─── */ .page-header { padding: 9rem 2rem 4rem; background: var(--white); text-align: center; border-bottom: 1px solid var(--navy-border); } .page-header h1 { font-size: 3rem; font-weight: 400; margin-bottom: 1rem; } .page-header p { font-size: 1.1rem; color: var(--gray); max-width: 640px; margin: 0 auto; } /* ─── RESPONSIVE ─── */ @media (max-width: 1024px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .pricing-grid { grid-template-columns: repeat(2, 1fr); } .pricing-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } .package-grid.featured-first { grid-template-columns: 1fr 1fr; } .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; } .hero-visual { aspect-ratio: 16 / 10; max-width: 540px; } .stat-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; } .stat-strip .stat:nth-child(3) { border-left: none; padding-left: 0; } .section-header.split { grid-template-columns: 1fr; gap: 1.5rem; } .split-feature { grid-template-columns: 1fr; gap: 2.5rem; } .aser-one-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; } .aser-one-hero-visual { aspect-ratio: 16 / 10; max-width: 540px; } .aser-one-hero-content h1 { font-size: 2.6rem; } .dropdown-menu.wide { min-width: 460px; grid-template-columns: 1fr; gap: 0.5rem; } .dropdown-section + .dropdown-section { border-left: none; border-top: 1px solid var(--navy-border); padding-left: 0; padding-top: 0.5rem; margin-top: 0.5rem; } /* 2026 rebuild — tablet */ .vertical-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; } .vertical-hero-content h1 { font-size: 2.6rem; } .vertical-hero-visual { aspect-ratio: 16 / 10; max-width: 540px; } .plan-ladder { grid-template-columns: repeat(2, 1fr); } .plan-ladder.cols-4 { grid-template-columns: repeat(2, 1fr); } .vertical-grid { grid-template-columns: 1fr; } .footer-inner.cols-5 { grid-template-columns: 1fr 1fr; } .coming-soon-banner { grid-template-columns: 1fr; gap: 1.25rem; text-align: left; } .includes-callout { grid-template-columns: 1fr; gap: 1rem; } } @media (max-width: 768px) { h1 { font-size: 2.25rem; } h2 { font-size: 1.75rem; } .section { padding: var(--section-pad-sm); } .container { padding: 0 1.25rem; } /* Nav mobile */ .nav-links { display: none; flex-direction: column; position: fixed; top: 58px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--navy-border); padding: 1.5rem 2rem; gap: 0.25rem; z-index: 999; } body.theme-dark .nav-links { background: var(--navy); } .nav-links.open { display: flex; } .nav-links a { padding: 0.65rem 0.85rem; } .nav-dropdown:hover .dropdown-menu { opacity: 0; visibility: hidden; } .nav-dropdown.open .dropdown-menu { opacity: 1; visibility: visible; position: static; transform: none; margin: 0; background: var(--navy-mid); border: none; box-shadow: none; padding: 0.25rem 0.5rem; } .hamburger { display: flex; } /* Hero */ .hero { padding: 7rem 1.5rem 3rem; min-height: auto; } .hero h1 { font-size: 2.25rem; } .hero-stats { gap: 1.5rem; flex-wrap: wrap; } /* Grids */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .feature-list { grid-template-columns: 1fr; } .module-grid { grid-template-columns: 1fr; } /* Product hero */ .product-hero { padding: 7rem 1.5rem 3rem; } .product-hero h1 { font-size: 2rem; } .product-hero-inner { flex-direction: column; align-items: flex-start; } /* Pricing */ .pricing-grid, .pricing-grid.cols-3 { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } .package-grid.featured-first { grid-template-columns: 1fr; } .stat-strip-inner { grid-template-columns: 1fr; gap: 1.5rem; } .stat-strip .stat { border-left: none; padding-left: 0; } .hero h1 { font-size: 2.5rem; } h1 { font-size: 2.5rem; } h2 { font-size: 1.85rem; } .aser-one-hero-content h1 { font-size: 2.2rem; } .dropdown-menu.wide { min-width: 280px; padding: 0.6rem; } .includes-matrix { grid-template-columns: 1fr; } .pill-tabs button { padding: 0.55rem 1.1rem; font-size: 0.78rem; } /* Footer */ .footer-inner { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; } /* Form */ .form-row { grid-template-columns: 1fr; } /* Table */ .project-table { font-size: 0.82rem; } .project-table th, .project-table td { padding: 0.75rem; } /* 2026 rebuild — mobile */ .vertical-hero { padding: 7rem 1.25rem 3rem; } .vertical-hero-content h1 { font-size: 2.1rem; } .vertical-hero-meta { gap: 1rem 1.5rem; } .plan-ladder, .plan-ladder.cols-4 { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .pricing-toolbar { flex-direction: column; align-items: stretch; text-align: center; padding: 1rem; } .currency-switcher { flex-wrap: wrap; justify-content: center; } .currency-switcher .ccy-label { width: 100%; text-align: center; border-right: none; border-bottom: 1px solid var(--navy-border); margin-right: 0; margin-bottom: 4px; padding: 0.4rem 0; justify-content: center; } .vertical-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .vertical-tabs::-webkit-scrollbar { display: none; } .vertical-tabs button { white-space: nowrap; } .price-table { font-size: 0.85rem; } .price-table th, .price-table td { padding: 0.85rem 0.75rem; } .price-table .plan-cell-price { font-size: 1.2rem; } .coming-soon-banner { padding: 1.75rem 1.5rem; } .coming-soon-banner h3 { font-size: 1.4rem; } .vertical-card { padding: 1.5rem; } .vertical-card h3 { font-size: 1.4rem; } .at-a-glance, .includes-callout, .part-of { padding: 1.5rem 1.25rem; } .page-header { padding: 7rem 1.25rem 3rem; } .page-header h1 { font-size: 2.2rem; } } @media (max-width: 480px) { h1 { font-size: 1.85rem; } h2 { font-size: 1.5rem; } .hero h1 { font-size: 1.85rem; } .hero-stats { gap: 1rem; } .stat-item .num { font-size: 2rem; } } /* ============================================================ 2026-05-28 REBRAND BLOCK Added when the company logo + Roboto + sky-blue palette landed. Keep additions here so they're easy to roll back as a unit. ============================================================ */ /* ─── Nav logo image (replaces the old "ASERTECH" text mark) ─── */ .nav-logo-img { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; } .nav-logo-img img { height: 56px; width: auto; display: block; } @media (max-width: 768px) { .nav-logo-img img { height: 44px; } } /* Footer brand using the image. Footer background is --navy-light (off-white) on the light theme, so the logo (dark navy on transparent) renders naturally. On the dark theme the footer becomes --navy and the logo would disappear — invert it then. */ .footer-brand .logo-img { height: 64px; width: auto; display: block; margin-bottom: 1rem; } body.theme-dark .footer-brand .logo-img { filter: brightness(0) invert(1); } /* ─── Language switcher (FR / EN) ─── */ .lang-switch { display: inline-flex; align-items: center; gap: 0.15rem; margin-left: 0.85rem; padding: 0.2rem; background: var(--navy-mid); border-radius: 999px; border: 1px solid var(--navy-border); } .lang-switch a { display: inline-block; padding: 0.25rem 0.65rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; color: var(--gray); border-radius: 999px; transition: all var(--ease); text-transform: uppercase; } .lang-switch a:hover { color: var(--navy); } .lang-switch a.active { background: var(--accent-blue); color: var(--white); } @media (max-width: 768px) { .lang-switch { margin-left: 0; margin-top: 0.5rem; align-self: flex-start; } } /* ============================================================ ORGANIGRAMME — equipe.html / team.html Editorial direction: this is a serious infrastructure-company chart, not a fluffy "meet the team" wall. The page reads top-down like a printed annual report — DG on its own band, then a quiet column of department headers each followed by their lieutenants. ============================================================ */ .org-page { padding-top: 7rem; background: var(--white); } /* Hero band — left-aligned editorial intro instead of centred marketing copy. */ .org-hero { padding: 2.5rem 2rem 3rem; background: var(--navy); color: var(--white); position: relative; overflow: hidden; } .org-hero::after { /* Diagonal accent ribbon — the recurring design motif on alt sections. Pure CSS clip — no images, no JS. */ content: ''; position: absolute; right: -10%; top: -40%; width: 60%; height: 200%; background: linear-gradient(135deg, transparent 49%, rgba(0,132,252,0.10) 50%, transparent 51%); pointer-events: none; } .org-hero .container { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; position: relative; z-index: 1; } .org-hero .section-label { color: var(--accent-blue); margin-bottom: 0.6rem; } .org-hero .section-label::before { background: var(--accent-blue); } .org-hero h1 { font-size: 3.4rem; font-weight: 900; /* Roboto Black — editorial mass */ color: var(--white); margin: 0 0 0.4rem; letter-spacing: -0.025em; line-height: 0.95; } .org-hero p { font-size: 1rem; color: rgba(255,255,255,0.78); max-width: 580px; margin: 0; font-weight: 300; /* Roboto Light — quiet body next to heavy display */ line-height: 1.65; } .org-hero-count { text-align: right; font-family: var(--font-mono); color: rgba(255,255,255,0.55); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; } .org-hero-count strong { display: block; font-family: var(--font-heading); font-size: 4rem; font-weight: 900; color: var(--accent-blue); letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.4rem; } /* Section bands — alternating white / off-white with a 2px accent rule above each h2. */ .org-section { padding: 4.5rem 2rem 4rem; position: relative; } .org-section.alt { background: var(--navy-light); } .org-section .section-head { max-width: var(--container); margin: 0 auto 3rem; display: grid; grid-template-columns: 220px 1fr; align-items: baseline; gap: 2rem; border-top: 2px solid var(--navy); padding-top: 1.5rem; } .org-section .section-num { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; color: var(--accent-blue); text-transform: uppercase; } .org-section .section-num strong { display: block; font-family: var(--font-heading); font-size: 2rem; font-weight: 900; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 0.2rem; line-height: 1; } .org-section h2 { font-size: 2rem; font-weight: 900; margin: 0 0 0.3rem; letter-spacing: -0.025em; color: var(--navy); } .org-section .org-section-sub { color: var(--gray); font-size: 0.95rem; font-weight: 300; margin: 0; } /* Director-General card sits alone — taller, with a thin navy left rule */ .org-dg-row { display: flex; justify-content: center; margin-bottom: 4rem; position: relative; } .org-card { background: var(--white); border: 1px solid var(--navy-border); border-radius: 2px; /* sharp, not pillowy */ padding: 1.5rem 1.5rem 1.65rem; text-align: left; transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease); display: grid; grid-template-rows: auto auto auto 1fr; gap: 0.45rem; position: relative; border-left: 2px solid var(--navy); } .org-card.is-dg { width: 360px; padding: 1.75rem; border-left: 4px solid var(--accent-blue); background: linear-gradient(180deg, rgba(0,132,252,0.04) 0%, transparent 60%), var(--white); box-shadow: var(--shadow-md); } .org-card.is-dg::before { /* "DG" rubber-stamp eyebrow in the corner */ content: 'Direction Générale'; position: absolute; top: 1.1rem; right: 1.25rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-blue); font-weight: 600; } .org-card:hover { border-color: var(--accent-blue); transform: translateY(-2px); box-shadow: var(--shadow-md); } .org-card .photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--navy-mid); border: 2px solid var(--white); outline: 1px solid var(--navy-border); flex-shrink: 0; } .org-card.is-dg .photo { width: 112px; height: 112px; } .org-card .photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .org-card .photo.initials { display: flex; align-items: center; justify-content: center; background: var(--avatar-bg, var(--navy-mid)); color: var(--white); font-weight: 700; font-size: 1.9rem; letter-spacing: 0.02em; text-transform: uppercase; user-select: none; } .org-card.is-dg .photo.initials { font-size: 2.5rem; } .org-card h3 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--navy); letter-spacing: -0.01em; line-height: 1.2; } .org-card.is-dg h3 { font-size: 1.4rem; } .org-card .role { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-blue); font-weight: 600; line-height: 1.4; } .org-card .location { font-size: 0.72rem; color: var(--gray); display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 300; } .org-card .location i { font-size: 0.7rem; color: var(--accent-blue); } .org-card .org-bio { font-size: 0.82rem; color: var(--gray-dark); line-height: 1.55; margin: 0.4rem 0 0; font-weight: 400; } .org-card.is-dg .org-bio { font-size: 0.88rem; } /* Level 2 — 3 senior leaders */ .org-direction-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 960px; margin: 0 auto; } /* Level 3 — operational team (6 members across 2 rows of 3) */ .org-ops-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: var(--container); margin: 0 auto; } /* SVG connector overlay — actual hierarchy lines from DG → 4 direction cards. */ .org-tree { position: relative; max-width: var(--container); margin: 0 auto; } .org-connectors { position: absolute; top: -4rem; left: 0; width: 100%; height: 4rem; pointer-events: none; z-index: 0; } .org-connectors line, .org-connectors path { stroke: var(--navy); stroke-width: 1.5; fill: none; opacity: 0.5; } @media (max-width: 1024px) { .org-section .section-head { grid-template-columns: 1fr; gap: 0.5rem; } .org-hero .container { grid-template-columns: 1fr; gap: 1.5rem; } .org-hero-count { text-align: left; } } @media (max-width: 900px) { .org-direction-row { grid-template-columns: 1fr; max-width: 360px; } .org-ops-row { grid-template-columns: repeat(2, 1fr); max-width: 720px; } .org-hero h1 { font-size: 2.4rem; } .org-hero-count strong { font-size: 3rem; } .org-connectors { display: none; } .org-card.is-dg { width: 100%; max-width: 420px; } } @media (max-width: 540px) { .org-ops-row { grid-template-columns: 1fr; max-width: 320px; } .org-section { padding: 3rem 1.25rem; } } /* ============================================================ PARTNERS SECTION — 40+ enterprises (home page) Editorial: huge "41" treated as a display element, sitting in a 2-column grid next to a compact category breakdown. Below that, a name-grid mosaic — not pill bubbles — so the volume of clients reads as a body of work, not a tag cloud. ============================================================ */ .partners-section { padding: 5.5rem 2rem 6rem; background: var(--white); position: relative; overflow: hidden; } .partners-section::before { /* Diagonal navy ribbon — recurring design motif. Very faint. */ content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 49.5%, rgba(0,24,64,0.025) 50%, transparent 50.5%); pointer-events: none; } .partners-section .container { max-width: var(--container); position: relative; } /* Hero: 2-column. Left = label + heading. Right = oversized "41". */ .partners-hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3rem; margin-bottom: 4rem; padding-bottom: 2rem; border-bottom: 2px solid var(--navy); } .partners-hero .lead { max-width: 640px; } .partners-hero .lead .section-label { margin-bottom: 0.75rem; } .partners-hero .lead h2 { font-size: 2.6rem; font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 0.85rem; color: var(--navy); } .partners-hero .lead p { font-size: 1rem; color: var(--gray-dark); font-weight: 300; line-height: 1.7; margin: 0; } .partners-hero .display-num { text-align: right; line-height: 1; } .partners-hero .display-num .big { font-family: var(--font-heading); font-weight: 900; font-size: 9rem; color: var(--accent-blue); letter-spacing: -0.06em; display: block; line-height: 0.85; } .partners-hero .display-num .lbl { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray); margin-top: 0.5rem; display: block; max-width: 200px; margin-left: auto; font-weight: 500; } /* Mid stats — thin metrics row in mono, separated by hairline rules. */ .partners-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 4rem; border-top: 1px solid var(--navy-border); border-bottom: 1px solid var(--navy-border); } .partners-stats .stat-block { padding: 1.5rem 1.5rem; text-align: left; border-right: 1px solid var(--navy-border); } .partners-stats .stat-block:last-child { border-right: none; } .partners-stats .stat-block .n { font-family: var(--font-heading); font-size: 3rem; font-weight: 900; color: var(--navy); display: block; line-height: 1; letter-spacing: -0.03em; } .partners-stats .stat-block .l { font-family: var(--font-mono); font-size: 0.68rem; color: var(--gray); margin-top: 0.55rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; display: block; } /* Category chart — magazine table. Left rail of percentages, then long bar, then count. Hover surfaces the count column in accent blue. */ .partners-chart { background: transparent; border: none; padding: 0; margin-bottom: 4rem; } .partners-chart h3 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-blue); font-weight: 600; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--navy-border); } .partners-chart .bar-row { display: grid; grid-template-columns: 240px 1fr 64px; gap: 1.25rem; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--navy-mid); transition: background var(--ease); } .partners-chart .bar-row:last-child { border-bottom: none; } .partners-chart .bar-row:hover { background: var(--navy-light); } .partners-chart .bar-row .cat { font-size: 0.92rem; color: var(--navy); font-weight: 500; text-align: left; padding-left: 0.5rem; } .partners-chart .bar-row .bar { height: 6px; background: var(--navy-mid); position: relative; } .partners-chart .bar-row .bar .fill { height: 100%; background: var(--accent-blue); transition: width 0.8s cubic-bezier(.2,.6,.2,1); position: relative; } .partners-chart .bar-row .bar .fill::after { /* sharp blue end-cap */ content: ''; position: absolute; right: -1px; top: -3px; width: 2px; height: 12px; background: var(--accent-blue); } .partners-chart .bar-row .n { font-family: var(--font-heading); font-weight: 900; font-size: 1.6rem; color: var(--navy); text-align: right; letter-spacing: -0.02em; line-height: 1; padding-right: 0.5rem; } .partners-chart .bar-row:hover .n { color: var(--accent-blue); } @media (max-width: 720px) { .partners-chart .bar-row { grid-template-columns: 1fr 56px; grid-template-areas: 'cat n' 'bar bar'; gap: 0.5rem 0.85rem; padding: 0.85rem 0; } .partners-chart .bar-row .cat { grid-area: cat; padding: 0; font-weight: 600; } .partners-chart .bar-row .bar { grid-area: bar; } .partners-chart .bar-row .n { grid-area: n; font-size: 1.2rem; padding: 0; } } /* Client name mosaic — a single dense grid, names alphabetised inside each industry block. No pills, no padding boxes — just sharp typographic density, like a who's-who roll-call. */ .partners-cloud { background: var(--navy); color: var(--white); padding: 3rem 2.5rem; position: relative; overflow: hidden; } .partners-cloud::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(0,132,252,0.10) 1px, transparent 0); background-size: 28px 28px; pointer-events: none; } .partners-cloud h3 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-blue); font-weight: 600; margin: 0 0 2rem; position: relative; } .partners-cloud .cat-group { margin-bottom: 2.5rem; position: relative; } .partners-cloud .cat-group:last-child { margin-bottom: 0; } .partners-cloud .cat-group .cat-label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255,255,255,0.55); margin-bottom: 1rem; font-weight: 500; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; align-items: baseline; } .partners-cloud .cat-group .cat-label::after { /* Inline count — Roboto Mono number on the right side of the rule */ content: attr(data-count); color: var(--accent-blue); font-weight: 700; } .partners-cloud .pill-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem 1.25rem; list-style: none; padding: 0; margin: 0; } .partners-cloud .pill { font-size: 0.95rem; background: transparent; color: var(--white); padding: 0.35rem 0; border: none; border-radius: 0; font-weight: 400; display: flex; align-items: baseline; gap: 0.5rem; transition: color var(--ease), padding var(--ease); } .partners-cloud .pill::before { /* tiny blue arrow as a list bullet */ content: '→'; color: var(--accent-blue); font-size: 0.75rem; opacity: 0.7; transition: transform var(--ease); } .partners-cloud .pill:hover { color: var(--accent-blue); padding-left: 0.25rem; } .partners-cloud .pill:hover::before { transform: translateX(2px); opacity: 1; } @media (max-width: 860px) { .partners-hero { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } .partners-hero .display-num { text-align: left; } .partners-hero .display-num .big { font-size: 6.5rem; } .partners-hero .display-num .lbl { margin-left: 0; } .partners-stats { grid-template-columns: 1fr; } .partners-stats .stat-block { border-right: none; border-bottom: 1px solid var(--navy-border); } .partners-stats .stat-block:last-child { border-bottom: none; } } /* ============================================================ FINTECH PAGE — White-label wallet platform (/fintech.html) Same editorial direction as equipe.html: navy hero, section-num bands, sharp 2px rules, Roboto Black 900 headlines. ============================================================ */ .fin-page { padding-top: 7rem; background: var(--white); } .fin-hero { /* Hero must fit a single viewport without scrolling — calc accounts for the fixed nav (~80px). Capped on huge screens. */ min-height: calc(100vh - 80px); max-height: 880px; padding: 2.5rem 2rem; background: var(--navy); color: var(--white); position: relative; overflow: hidden; display: flex; align-items: center; } .fin-hero::after { content: ''; position: absolute; right: -10%; top: -40%; width: 60%; height: 200%; background: linear-gradient(135deg, transparent 49%, rgba(0,132,252,0.10) 50%, transparent 51%); pointer-events: none; } .fin-hero .container { max-width: var(--container); width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem; align-items: center; position: relative; z-index: 1; } .fin-hero .section-label { color: var(--accent-blue); margin-bottom: 0.75rem; } .fin-hero .section-label::before { background: var(--accent-blue); } .fin-hero h1 { font-size: 3.6rem; font-weight: 900; color: var(--white); margin: 0 0 1rem; letter-spacing: -0.03em; line-height: 0.98; } .fin-hero h1 em { font-style: italic; font-weight: 300; color: var(--accent-blue); } .fin-hero p { font-size: 1.05rem; color: rgba(255,255,255,0.78); max-width: 580px; margin: 0 0 2rem; font-weight: 300; line-height: 1.65; } .fin-hero .btn-group { margin-top: 1rem; } .fin-hero .btn-primary { background: var(--accent-blue); border-color: var(--accent-blue); color: var(--white); } .fin-hero .btn-primary:hover { background: var(--mustard-light); border-color: var(--mustard-light); } .fin-hero .btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); } .fin-hero .btn-outline:hover { border-color: var(--accent-blue); color: var(--accent-blue); } .fin-hero .hero-visual { /* Locked 4:5 portrait box. Whatever image is dropped here will be cover-cropped to fill — generate the asset at 4:5 for zero waste. */ background: var(--navy-light); border: none; padding: 0; width: 100%; aspect-ratio: 4 / 5; max-width: 480px; margin-left: auto; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,0.35); } .fin-hero .hero-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* Section bands (same pattern as org-section) */ .fin-section { padding: 4.5rem 2rem 4rem; position: relative; } .fin-section.alt { background: var(--navy-light); } .fin-section.dark { background: var(--navy); color: var(--white); } .fin-section .section-head { max-width: var(--container); margin: 0 auto 3rem; display: grid; grid-template-columns: 220px 1fr; align-items: baseline; gap: 2rem; border-top: 2px solid var(--navy); padding-top: 1.5rem; } .fin-section.dark .section-head { border-top-color: var(--accent-blue); } .fin-section .section-num { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; color: var(--accent-blue); text-transform: uppercase; } .fin-section .section-num strong { display: block; font-family: var(--font-heading); font-size: 2rem; font-weight: 900; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 0.2rem; line-height: 1; } .fin-section.dark .section-num strong { color: var(--white); } .fin-section h2 { font-size: 2rem; font-weight: 900; margin: 0 0 0.3rem; letter-spacing: -0.025em; color: var(--navy); } .fin-section.dark h2 { color: var(--white); } .fin-section .fin-section-sub { color: var(--gray); font-size: 0.95rem; font-weight: 300; margin: 0; } .fin-section.dark .fin-section-sub { color: rgba(255,255,255,0.7); } /* Channels grid — 5 cards (Android, iOS, Web, USSD, Back-office) */ .fin-channels { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; } .fin-channel-card { background: var(--white); border: 1px solid var(--navy-border); border-radius: 2px; border-top: 3px solid var(--accent-blue); padding: 1.5rem 1.25rem; transition: all var(--ease); position: relative; } .fin-channel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-top-color: var(--mustard-light); } .fin-channel-card .icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,132,252,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 0.85rem; } .fin-channel-card .icon i { color: var(--accent-blue); font-size: 1.15rem; } .fin-channel-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: 0 0 0.3rem; letter-spacing: -0.01em; } .fin-channel-card .tech { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-blue); display: block; margin-bottom: 0.6rem; font-weight: 600; } .fin-channel-card p { font-size: 0.82rem; color: var(--gray-dark); line-height: 1.55; margin: 0; font-weight: 400; } /* Feature columns (Section 03 — 4-col feature mosaic) */ .fin-features-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--navy-border); border-left: 1px solid var(--navy-border); } .fin-feature { background: var(--white); padding: 1.5rem 1.5rem; border-right: 1px solid var(--navy-border); border-bottom: 1px solid var(--navy-border); transition: background var(--ease); } .fin-feature:hover { background: var(--navy-light); } .fin-feature .num { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; color: var(--accent-blue); font-weight: 600; display: block; margin-bottom: 0.5rem; } .fin-feature h4 { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0 0 0.4rem; letter-spacing: -0.01em; } .fin-feature p { font-size: 0.82rem; color: var(--gray-dark); line-height: 1.55; margin: 0; } /* BOT timeline — 3 steps */ .fin-bot { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--accent-blue); } .fin-bot-step { padding: 2rem 1.75rem 1.75rem; border-right: 1px solid rgba(255,255,255,0.15); position: relative; } .fin-bot-step:last-child { border-right: none; } .fin-bot-step .step-num { font-family: var(--font-heading); font-size: 4rem; font-weight: 900; color: var(--accent-blue); line-height: 1; letter-spacing: -0.04em; margin-bottom: 0.5rem; } .fin-bot-step h3 { color: var(--white); font-size: 1.4rem; font-weight: 700; margin: 0 0 0.5rem; letter-spacing: -0.015em; } .fin-bot-step .step-tag { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-blue); display: block; margin-bottom: 1rem; font-weight: 600; } .fin-bot-step p { font-size: 0.88rem; color: rgba(255,255,255,0.78); line-height: 1.6; margin: 0; font-weight: 300; } /* Case study card (UMWAMPI / CECADM) */ .fin-case { max-width: var(--container); margin: 0 auto; background: var(--white); border: 1px solid var(--navy-border); border-left: 4px solid var(--accent-blue); padding: 2.5rem 2.5rem; display: grid; grid-template-columns: 1fr 1.8fr; gap: 2.5rem; align-items: start; } .fin-case .case-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-blue); font-weight: 600; margin-bottom: 0.5rem; display: block; } .fin-case h3 { font-size: 1.8rem; font-weight: 900; color: var(--navy); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 0.85rem; } .fin-case .case-meta { font-size: 0.82rem; color: var(--gray); font-weight: 400; } .fin-case .case-body p { font-size: 0.95rem; color: var(--gray-dark); line-height: 1.7; margin: 0 0 1rem; font-weight: 400; } .fin-case .case-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 1.5rem; border-top: 1px solid var(--navy-border); padding-top: 1.25rem; } .fin-case .case-stat .n { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 900; color: var(--navy); display: block; letter-spacing: -0.025em; line-height: 1; } .fin-case .case-stat .l { font-family: var(--font-mono); font-size: 0.6rem; color: var(--gray); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.4rem; font-weight: 500; display: block; } @media (max-width: 1024px) { .fin-hero .container { grid-template-columns: 1fr; gap: 2rem; } .fin-section .section-head { grid-template-columns: 1fr; gap: 0.5rem; } .fin-channels { grid-template-columns: repeat(3, 1fr); } .fin-channels .fin-channel-card:nth-child(4) { grid-column: 1; } .fin-channels .fin-channel-card:nth-child(5) { grid-column: 2 / span 2; } .fin-features-grid { grid-template-columns: repeat(2, 1fr); } .fin-case { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 1.75rem; } .fin-case .case-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; } } @media (max-width: 640px) { .fin-hero h1 { font-size: 2.4rem; } .fin-channels { grid-template-columns: 1fr; } .fin-channels .fin-channel-card:nth-child(n) { grid-column: 1; } .fin-features-grid { grid-template-columns: 1fr; } .fin-bot { grid-template-columns: 1fr; } } /* ─── OpenStreetMap embed (contact page) ─── */ /* Editorial framing: map sits in a 2-col composition with an address card overlapping the bottom-left corner — like a postcard pinned over the map. The frame is a sharp 2px navy border, not a soft shadow box. */ .osm-map-block { position: relative; margin-top: 1.5rem; } .osm-map-wrap { border: 2px solid var(--navy); border-radius: 0; overflow: hidden; background: var(--navy-mid); position: relative; } .osm-map-wrap iframe { display: block; width: 100%; height: 460px; border: 0; filter: saturate(0.85); } .osm-map-meta { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1.25rem; background: var(--navy); color: rgba(255,255,255,0.78); border-top: 2px solid var(--accent-blue); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; } .osm-map-meta a { color: var(--accent-blue); font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; transition: color var(--ease); } .osm-map-meta a:hover { color: var(--white); } .osm-map-meta i { font-size: 0.8rem; } /* Address overlay card — sits on top of the map's bottom-left corner */ .osm-address-card { position: absolute; bottom: 2.5rem; left: 2rem; background: var(--white); border-left: 4px solid var(--accent-blue); padding: 1.25rem 1.5rem; max-width: 320px; box-shadow: 0 12px 40px rgba(0,24,64,0.25); z-index: 1; } .osm-address-card .pin-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-blue); font-weight: 600; margin-bottom: 0.4rem; display: block; } .osm-address-card h4 { font-size: 1.05rem; font-weight: 900; color: var(--navy); margin: 0 0 0.4rem; letter-spacing: -0.01em; } .osm-address-card p { font-size: 0.85rem; color: var(--gray-dark); margin: 0; line-height: 1.55; } @media (max-width: 720px) { .osm-address-card { position: static; max-width: none; margin-bottom: 1rem; border-top: 4px solid var(--accent-blue); border-left: none; } .osm-map-wrap iframe { height: 320px; } }