/* ═══════════════════════════════════════════════════════════════════ Terratek Group · v2 · shared design system Used by: index.html (Group), transport/, construction/, recharge/, robotique/ ═══════════════════════════════════════════════════════════════════ */ :root { /* Backgrounds & neutrals — DARK theme (default) */ --bg: #0A0E14; --bg-2: #0F1520; --bg-3: #161E2C; --border: #1F2A3D; --text: #E6EAF0; --muted: #7C8AA0; --hero-grid-rgb: 91, 217, 85; /* dark theme: accent-tinted dots */ --shadow-strength: 0.18; /* hover glow alpha */ /* Brand colors — extracted from PPTX (pixel-sampled hex) */ --c-group: #40B038; --c-group-bright: #5BD955; --c-transport: #0060C8; --c-transport-bright: #2E8AFF; --c-construction: #F08018; --c-construction-bright: #FFA040; --c-recharge: #586068; --c-recharge-bright: #B8C4D6; --c-robotique: #5838B0; --c-robotique-bright: #9270FF; /* Default accent (overridden per page via .page-X class on ) */ --c-accent: var(--c-group); --c-accent-bright: var(--c-group-bright); --c-accent-rgb: 64, 176, 56; /* Fonts */ --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* Layout */ --container-max: 1280px; --header-height: 80px; --header-with-subbar: 124px; /* 80 + 44 sub-bar */ } /* Per-page accent override (applied via class on ) */ .page-group { --c-accent: var(--c-group); --c-accent-bright: var(--c-group-bright); --c-accent-rgb: 64, 176, 56; } .page-transport { --c-accent: var(--c-transport); --c-accent-bright: var(--c-transport-bright); --c-accent-rgb: 0, 96, 200; } .page-construction { --c-accent: var(--c-construction); --c-accent-bright: var(--c-construction-bright); --c-accent-rgb: 240, 128, 24; } .page-recharge { --c-accent: var(--c-recharge-bright); --c-accent-bright: #DCE5F2; --c-accent-rgb: 184, 196, 214; } .page-robotique { --c-accent: var(--c-robotique); --c-accent-bright: var(--c-robotique-bright); --c-accent-rgb: 88, 56, 176; } /* ── LIGHT THEME — applied via [data-theme="light"] on ───── The mode (auto/light/dark) is stored in localStorage by site.js. In "auto" mode, JS reads window.matchMedia('(prefers-color-scheme: light)') and sets data-theme accordingly, so this single block handles all paths. */ [data-theme="light"] { --bg: #FAFBFC; --bg-2: #F0F3F7; --bg-3: #E5EAF0; --border: #D5DBE3; --text: #0F1520; --muted: #5C6878; --hero-grid-rgb: 0, 0, 0; --shadow-strength: 0.08; } /* On light theme, the "bright" variants of accents need to be DARKER (not lighter) for contrast on white */ [data-theme="light"].page-group { --c-accent-bright: #2E8527; } [data-theme="light"].page-transport { --c-accent-bright: #0050AA; } [data-theme="light"].page-construction { --c-accent-bright: #C56712; } [data-theme="light"].page-recharge { --c-accent: #586068; --c-accent-bright: #404850; --c-accent-rgb: 88, 96, 104; } [data-theme="light"].page-robotique { --c-accent-bright: #4A2EA0; } /* Recharge particularly needs a dark variant on light theme since titanium-bright is too pale */ /* ── Reset & base ──────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; min-height: 100vh; padding-top: var(--header-with-subbar); } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: transparent; color: inherit; } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 32px; } @media (max-width: 700px) { .container { padding: 0 20px; } } /* ── Typography ────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; } h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); } h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 600; } h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.005em; } em { color: var(--c-accent-bright); font-style: normal; font-weight: 700; } .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-accent-bright); margin-bottom: 16px; display: inline-block; } .eyebrow.muted { color: var(--muted); } .lead { font-size: 17px; color: var(--muted); max-width: 720px; line-height: 1.65; } .muted { color: var(--muted); } /* ── Header (2 rows: main nav + BU sub-bar) ──────────────────── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 14, 20, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } [data-theme="light"] .site-header { background: rgba(250, 251, 252, 0.85); } .site-header-row { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); max-width: var(--container-max); margin: 0 auto; padding: 0 32px; } .site-header-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; } .site-header-logo .logo-svg { width: 56px; height: auto; color: var(--c-accent); flex-shrink: 0; } .site-header-logo .lockup-text { display: flex; flex-direction: column; align-items: center; line-height: 1; width: 190px; flex-shrink: 0; } .site-header-logo .wordmark { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: 0.005em; text-transform: uppercase; color: var(--text); } .site-header-logo .lockup-row { display: flex; justify-content: space-between; align-items: baseline; width: 100%; gap: 12px; margin-top: 6px; } .site-header-logo .lockup-bu, .site-header-logo .lockup-tag { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } .site-header-logo .lockup-bu { font-weight: 600; color: var(--c-accent-bright); } .site-header-logo .lockup-tag { font-weight: 500; color: var(--muted); } .site-nav { display: flex; gap: 28px; align-items: center; } .site-nav a { color: var(--muted); font-size: 13px; font-weight: 500; transition: color 0.2s; padding: 4px 0; } .site-nav a:hover { color: var(--c-accent-bright); } .site-nav a.cta { background: var(--c-accent); color: var(--bg); padding: 8px 16px; border-radius: 4px; font-weight: 600; } .site-nav a.cta:hover { background: var(--c-accent-bright); color: var(--bg); } /* BU sub-bar */ .bu-subbar { display: flex; border-top: 1px solid var(--border); background: rgba(15, 21, 32, 0.5); max-width: var(--container-max); margin: 0 auto; } [data-theme="light"] .bu-subbar { background: rgba(240, 243, 247, 0.6); } .bu-subbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--border); position: relative; transition: color 0.2s, background 0.2s; } .bu-subbar a:last-child { border-right: none; } .bu-subbar a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.85; } .bu-subbar a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transition: transform 0.2s; } .bu-subbar a:hover { background: rgba(255, 255, 255, 0.03); } .bu-subbar a:hover::after, .bu-subbar a.active::after { transform: scaleX(1); } .bu-subbar a.active::after { height: 3px; } .bu-subbar a.transport { color: var(--c-transport-bright); } .bu-subbar a.construction { color: var(--c-construction-bright); } .bu-subbar a.recharge { color: var(--c-recharge-bright); } .bu-subbar a.robotique { color: var(--c-robotique-bright); } /* Active state: bolder text + tinted background to clearly mark current page */ .bu-subbar a.active { font-weight: 700; } .bu-subbar a.transport.active { background: rgba(46, 138, 255, 0.10); } .bu-subbar a.construction.active { background: rgba(255, 160, 64, 0.10); } .bu-subbar a.recharge.active { background: rgba(184, 196, 214, 0.10); } .bu-subbar a.robotique.active { background: rgba(146, 112, 255, 0.12); } /* On light theme, use the BASE colors for sufficient contrast */ [data-theme="light"] .bu-subbar a.transport { color: var(--c-transport); } [data-theme="light"] .bu-subbar a.construction { color: #C56712; } [data-theme="light"] .bu-subbar a.recharge { color: #404850; } [data-theme="light"] .bu-subbar a.robotique { color: var(--c-robotique); } [data-theme="light"] .bu-subbar a { color: #5C6878; } [data-theme="light"] .bu-subbar a:hover { background: rgba(0, 0, 0, 0.04); } @media (max-width: 760px) { .site-nav { gap: 16px; } .site-nav a:not(.cta) { display: none; } .bu-subbar a { font-size: 10px; padding: 10px 6px; letter-spacing: 0.1em; gap: 6px; } .bu-subbar a::before { width: 6px; height: 6px; } } /* ── Lang switcher ─────────────────────────────────────────────── */ .lang-switcher { display: flex; gap: 0; } .lang-btn { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--muted); padding: 4px 10px; border-radius: 3px; transition: color 0.2s, background 0.2s; } .lang-btn.active { color: var(--c-accent-bright); background: rgba(var(--c-accent-rgb), 0.1); } .lang-btn:hover:not(.active) { color: var(--text); } /* Theme toggle (sun/moon) — injected by site.js */ .theme-toggle { font-size: 16px; line-height: 1; padding: 6px 8px; color: var(--muted); border-radius: 3px; transition: color 0.2s, background 0.2s; margin-right: 8px; } .theme-toggle:hover { color: var(--c-accent-bright); background: rgba(var(--c-accent-rgb), 0.08); } /* ── Hero ──────────────────────────────────────────────────────── */ .hero { position: relative; padding: 96px 0 72px; background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(var(--c-accent-rgb), 0.18), transparent 70%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); overflow: hidden; } [data-theme="light"] .hero { background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(var(--c-accent-rgb), 0.10), transparent 70%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); } .hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(var(--hero-grid-rgb), 0.05) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; opacity: 0.6; } .hero-inner { position: relative; text-align: center; max-width: 880px; margin: 0 auto; } .logo-lockup { display: inline-flex; align-items: center; gap: 20px; margin-bottom: 36px; } .logo-lockup .logo-svg { width: 100px; color: var(--c-accent); flex-shrink: 0; } .logo-lockup .lockup-text { display: flex; flex-direction: column; align-items: center; line-height: 1; width: clamp(260px, 28vw, 340px); flex-shrink: 0; } .logo-lockup .wordmark { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.25rem); letter-spacing: 0.005em; text-transform: uppercase; color: var(--text); } .logo-lockup .lockup-row { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin-top: 10px; gap: 18px; } .logo-lockup .lockup-bu, .logo-lockup .lockup-tag { font-family: var(--font-display); font-size: clamp(0.8rem, 1.2vw, 0.95rem); letter-spacing: 0.10em; text-transform: uppercase; line-height: 1; } .logo-lockup .lockup-bu { font-weight: 600; color: var(--c-accent-bright); } .logo-lockup .lockup-tag { font-weight: 500; color: var(--muted); } /* Legacy fallback — .lockup-sub kept for safety */ .logo-lockup .lockup-sub { font-family: var(--font-display); font-weight: 500; font-size: clamp(0.85rem, 1.4vw, 1rem); letter-spacing: 0.45em; color: var(--c-accent); text-transform: uppercase; margin-top: 6px; } .hero-tagline { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -0.005em; margin-bottom: 22px; max-width: 680px; margin-left: auto; margin-right: auto; } .hero-pillars { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 40px; } .hero-pillars span { display: inline-flex; align-items: center; gap: 8px; } .hero-pillars span::before { content: ''; width: 6px; height: 6px; background: var(--c-accent-bright); border-radius: 50%; } .hero-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } /* BU hero variant — image-driven, with cinematic backdrop */ .hero-bu { padding: 0; position: relative; overflow: hidden; min-height: 420px; display: flex; align-items: center; background: var(--bg); } .hero-bu .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.6); } [data-theme="light"] .hero-bu .hero-bg { filter: brightness(0.95) contrast(1.05); } .hero-bu::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 20, 0.5) 0%, rgba(10, 14, 20, 0.85) 80%, var(--bg) 100%); } [data-theme="light"] .hero-bu::after { background: linear-gradient(180deg, rgba(250, 251, 252, 0.2) 0%, rgba(250, 251, 252, 0.85) 85%, var(--bg) 100%); } [data-theme="light"] .hero-bu h1, [data-theme="light"] .hero-bu .lead { text-shadow: 0 2px 8px rgba(255, 255, 255, 0.7); } .hero-bu .hero-inner { position: relative; z-index: 2; text-align: left; max-width: var(--container-max); width: 100%; margin: 0 auto; padding: 80px 32px; } .hero-bu .bu-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-accent-bright); margin-bottom: 18px; } .hero-bu .bu-eyebrow::before { content: ''; width: 32px; height: 2px; background: var(--c-accent-bright); } .hero-bu h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); max-width: 720px; margin-bottom: 20px; } .hero-bu .lead { color: var(--text); opacity: 0.85; max-width: 580px; } /* ── Buttons ──────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; padding: 12px 22px; border-radius: 4px; transition: all 0.2s; white-space: nowrap; } .btn-primary { background: var(--c-accent); color: var(--bg); } .btn-primary:hover { background: var(--c-accent-bright); box-shadow: 0 0 24px rgba(var(--c-accent-rgb), 0.4); } .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--c-accent); color: var(--c-accent-bright); } .btn-ghost { background: transparent; color: var(--muted); padding: 12px 0; } .btn-ghost:hover { color: var(--c-accent-bright); } /* ── Section base ─────────────────────────────────────────────── */ section.block { padding: 96px 0; position: relative; } section.block.alt { background: var(--bg-2); } .block-header { max-width: 720px; margin: 0 auto 60px; text-align: center; } .block-header.left { text-align: left; margin: 0 0 60px; } .block-header h2 { margin-bottom: 14px; } .block-header h2 em { color: var(--c-accent-bright); font-weight: 700; } /* ── Pillars (3-column with icon) ─────────────────────────────── */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .pillar-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 32px 28px; transition: border-color 0.25s, transform 0.25s; } .pillar-card:hover { border-color: var(--c-accent); transform: translateY(-4px); } .pillar-card .pillar-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--c-accent-rgb), 0.12); color: var(--c-accent-bright); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-family: var(--font-display); font-weight: 700; font-size: 18px; } .pillar-card h3 { margin-bottom: 10px; color: var(--text); } .pillar-card p { color: var(--muted); font-size: 14px; line-height: 1.6; } /* ── Divisions grid (4 BU cards) ──────────────────────────────── */ .divisions { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .bu-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; display: block; } .bu-card:hover { transform: translateY(-6px); } .bu-card.transport:hover { border-color: var(--c-transport-bright); box-shadow: 0 12px 40px rgba(46, 138, 255, 0.18); } .bu-card.construction:hover { border-color: var(--c-construction-bright); box-shadow: 0 12px 40px rgba(255, 160, 64, 0.18); } .bu-card.recharge:hover { border-color: var(--c-recharge-bright); box-shadow: 0 12px 40px rgba(184, 196, 214, 0.18); } .bu-card.robotique:hover { border-color: var(--c-robotique-bright); box-shadow: 0 12px 40px rgba(146, 112, 255, 0.20); } .bu-card .img { width: 100%; aspect-ratio: 1.7 / 1; background-size: cover; background-position: center; position: relative; } .bu-card .img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15, 21, 32, 0.85) 100%); } .bu-card .body { padding: 22px 24px 26px; } .bu-card .label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 12px; } .bu-card .label::before { content: ''; width: 24px; height: 2px; display: inline-block; } .bu-card.transport .label, .bu-card.transport .label::before { color: var(--c-transport-bright); background-color: var(--c-transport-bright); } .bu-card.construction .label, .bu-card.construction .label::before { color: var(--c-construction-bright); background-color: var(--c-construction-bright); } .bu-card.recharge .label, .bu-card.recharge .label::before { color: var(--c-recharge-bright); background-color: var(--c-recharge-bright); } .bu-card.robotique .label, .bu-card.robotique .label::before { color: var(--c-robotique-bright); background-color: var(--c-robotique-bright); } .bu-card .label { background: transparent; } .bu-card .label::before { background: currentColor; } [data-theme="light"] .bu-card.transport .label { color: var(--c-transport); } [data-theme="light"] .bu-card.construction .label { color: #C56712; } [data-theme="light"] .bu-card.recharge .label { color: #404850; } [data-theme="light"] .bu-card.robotique .label { color: var(--c-robotique); } /* Disable big hover glows on light theme — they barely show on white */ [data-theme="light"] .bu-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } [data-theme="light"] .bu-card.transport:hover, [data-theme="light"] .bu-card.construction:hover, [data-theme="light"] .bu-card.recharge:hover, [data-theme="light"] .bu-card.robotique:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } [data-theme="light"] .btn-primary:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .bu-card h3 { font-size: 1.4rem; line-height: 1.15; margin-bottom: 8px; } .bu-card p { font-size: 13px; color: var(--muted); line-height: 1.55; } /* ── Product cards (BU page "Produits" sections) ─────────────── */ .product-grid { margin-top: 20px; } .product-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; } .product-card:hover { transform: translateY(-4px); border-color: var(--c-accent); box-shadow: 0 12px 36px rgba(var(--c-accent-rgb), 0.20); } .product-img { width: 100%; aspect-ratio: 1.65 / 1; background-size: cover; background-position: center; border-bottom: 1px solid var(--border); } .product-icon { width: 100%; aspect-ratio: 2.4 / 1; display: flex; align-items: center; justify-content: center; font-size: 64px; line-height: 1; color: var(--c-accent-bright); background: linear-gradient(135deg, rgba(var(--c-accent-rgb), 0.06), transparent); border-bottom: 1px solid var(--border); } .product-body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .product-cat { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent-bright); margin: 0; } .product-card h3 { font-size: 1.35rem; line-height: 1.2; margin: 0; color: var(--text); } .product-card > .product-body > p:not(.product-cat) { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 8px; } .product-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .product-feats li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.55; color: var(--text); opacity: 0.85; } .product-feats li::before { content: ''; position: absolute; left: 0; top: 8px; width: 12px; height: 2px; background: var(--c-accent-bright); } /* ── Image showcase tiles (BU page "Aperçu" sections) ────────── */ .showcase-grid { margin-top: 12px; } .img-tile { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2); transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; margin: 0; } .img-tile:hover { transform: translateY(-4px); border-color: var(--c-accent); box-shadow: 0 10px 32px rgba(var(--c-accent-rgb), 0.18); } .img-tile-bg { width: 100%; aspect-ratio: 1.55 / 1; background-size: cover; background-position: center; } .img-tile figcaption { padding: 14px 18px 16px; font-family: var(--font-display); font-size: 13px; line-height: 1.45; color: var(--muted); border-top: 1px solid var(--border); } .showcase-grid .img-tile:only-child .img-tile-bg { aspect-ratio: 2.2 / 1; } /* ── Future-concept banner (Group home, before "Vision") ─────── */ .future-banner { background: var(--bg-2); padding: 64px 0 0; text-align: center; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; } .future-banner-content { padding: 0 32px 48px; max-width: 880px; margin: 0 auto; } .future-banner-content h2 { color: var(--text); font-size: clamp(28px, 4vw, 44px); margin: 0; line-height: 1.1; } .future-banner-content h2 em { color: var(--c-group-bright); font-weight: 700; } .future-banner-content .eyebrow { color: var(--c-group-bright); margin-bottom: 18px; } .future-banner-img { display: block; width: 100%; max-width: 1400px; margin: 0 auto; height: auto; } /* ── List with icons (slide 4 / 7 inspired) ──────────────────── */ .icon-list { display: flex; flex-direction: column; gap: 22px; max-width: 560px; } .icon-item { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: flex-start; } .icon-item .num { width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--c-accent-rgb), 0.12); border: 1px solid rgba(var(--c-accent-rgb), 0.3); color: var(--c-accent-bright); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; flex-shrink: 0; } .icon-item .text h4 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin-bottom: 4px; } .icon-item .text p { font-size: 14px; color: var(--muted); line-height: 1.55; } /* ── 2-column layout ──────────────────────────────────────────── */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .two-col.media-right { grid-template-columns: 1fr 1fr; } .two-col img, .two-col .media { width: 100%; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 36px; } } /* ── CTA block (footer-area) ──────────────────────────────────── */ .cta-block { text-align: center; padding: 96px 0; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(var(--c-accent-rgb), 0.12), transparent 70%), var(--bg-2); } .cta-block h2 { margin-bottom: 18px; } .cta-block p { color: var(--muted); max-width: 540px; margin: 0 auto 32px; font-size: 16px; } .cta-block .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ── Footer (minimal, centré) ─────────────────────────────────── */ .site-footer { background: var(--bg); border-top: 1px solid var(--border); padding: 72px 0 32px; text-align: center; } .site-footer .footer-stack { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-bottom: 48px; } .site-footer .logo-lockup { margin-bottom: 0; } .site-footer .footer-tagline { color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 520px; margin: 0; } .site-footer .footer-links { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.04em; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: baseline; } .site-footer .footer-links a { color: var(--text); opacity: 0.75; text-decoration: none; padding: 4px 0; transition: opacity 0.2s, color 0.2s; } .site-footer .footer-links a:hover { opacity: 1; color: var(--c-accent-bright); } .site-footer .footer-links .sep { color: var(--muted); opacity: 0.5; font-family: var(--font-mono); } .site-footer .footer-contact { font-family: var(--font-mono); font-size: 13px; } .site-footer .footer-contact a { color: var(--muted); text-decoration: none; } .site-footer .footer-contact a:hover { color: var(--c-accent-bright); } .site-footer .legal { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .site-footer .legal .sep { opacity: 0.5; } /* Contact pages — even simpler footer */ .site-footer.footer-compact .footer-stack { gap: 18px; margin-bottom: 32px; } .site-footer.footer-compact .footer-links, .site-footer.footer-compact .footer-tagline, .site-footer.footer-compact .footer-contact { display: none; } /* ── Form (CTA contact) ───────────────────────────────────────── */ .form-grid { display: grid; gap: 14px; max-width: 520px; margin: 0 auto; } .form-grid input, .form-grid textarea { width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: inherit; font-size: 14px; transition: border-color 0.2s; } .form-grid input:focus, .form-grid textarea:focus { outline: none; border-color: var(--c-accent); } .form-grid textarea { min-height: 120px; resize: vertical; } .form-grid input::placeholder, .form-grid textarea::placeholder { color: var(--muted); }