/* ========================================================== CallCorico — Global Design System Single source of truth for all design tokens. Ported exactly from 01_brand/ reference HTML files. ========================================================== */ /* ===== FONT IMPORTS ===== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ===== DESIGN TOKENS ===== */ :root { /* --- Canvas / Background --- */ --canvas: #fffaf0; --surface-soft: #faf5e8; --surface-card: #f5f0e0; --surface-strong: #ebe6d6; --surface-dark: #0a1a1a; --surface-dark-el: #1a2a2a; /* --- Text --- */ --ink: #0a0a0a; --primary: #0a0a0a; --primary-active: #1f1f1f; --body-strong: #1a1a1a; --body: #3a3a3a; --muted: #6a6a6a; --muted-soft: #9a9a9a; --on-primary: #ffffff; --on-dark: #ffffff; /* --- Borders --- */ --hairline: #e4dfd4; --hairline-soft: #f0f0f0; --hairline-strong: #cfc8bb; /* --- Brand Accent --- */ --accent-red: #e63946; --accent-red-soft: #fde5e7; --accent-red-dark: #bd2632; /* --- Brand Extended Palette (service card colors) --- */ --brand-pink: #ff4d8b; --brand-teal: #1a3a3a; --brand-lavender: #b8a4ed; --brand-peach: #ffb084; --brand-ochre: #e8b94a; --brand-mint: #a4d4c5; --brand-coral: #ff6b5a; /* --- Dark Theme Tokens (AI & dark section pages) --- */ --panel: #121212; --panel-2: #181818; --panel-line: rgba(255,255,255,0.10); --text-on-dark: #f7f2e8; --text-on-dark-soft: rgba(247,242,232,0.76); --text-on-dark-muted: rgba(247,242,232,0.52); --accent-glow: rgba(230,57,70,0.52); --accent-soft-glow: rgba(230,57,70,0.18); /* --- Status --- */ --ok: #267a42; --ok-soft: #edf7f0; --warning: #f2c45f; /* --- Radius Scale --- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* --- Typography --- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Courier New', monospace; /* --- Layout --- */ --section-pad: 96px; --container-max: 1280px; --container-pad: 32px; --nav-height: 72px; } /* ===== SECTOR ACCENT OVERRIDES ===== */ /* Applied via on sector pages */ .sector-immobilier { --sector-accent: #f5a623; --sector-soft: #fef3dc; --sector-dark: #7a4800; } .sector-financier { --sector-accent: #0057b7; --sector-soft: #ddeaff; --sector-dark: #003580; } .sector-assurance { --sector-accent: #2e7d5a; --sector-soft: #d9f0e7; --sector-dark: #1a4a35; } .sector-ecommerce { --sector-accent: #7c3aed; --sector-soft: #ede9fe; --sector-dark: #4c1d95; } .sector-energie { --sector-accent: #d97706; --sector-soft: #fef3c7; --sector-dark: #854d0e; } .sector-telecom { --sector-accent: #0891b2; --sector-soft: #cffafe; --sector-dark: #155e75; } /* ===== BASE RESET ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--canvas); color: var(--ink); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* ===== GRAIN TEXTURE OVERLAY ===== */ /* Subtle noise texture over the cream canvas — ported exactly from brand files */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.38; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.04 0 0 0 0 0.04 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ===== LAYOUT HELPERS ===== */ .container { width: min(100% - calc(var(--container-pad) * 2), var(--container-max)); margin: 0 auto; position: relative; z-index: 2; } section { padding: var(--section-pad) 0; position: relative; } img, svg { display: block; max-width: 100%; } a { color: inherit; } /* ===== TYPOGRAPHY SCALE ===== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 500; line-height: 1.05; letter-spacing: -1px; color: var(--ink); } .hero-title { font-family: var(--font-display); font-size: clamp(48px, 7vw, 84px); font-weight: 500; line-height: 0.98; letter-spacing: -2.5px; color: var(--ink); margin-bottom: 28px; } .hero-title .accent-word { font-style: italic; font-weight: 400; position: relative; display: inline-block; color: var(--accent-red); } .hero-title .underline-svg { position: absolute; bottom: -6px; left: -4px; width: calc(100% + 12px); height: 14px; } .section-title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); font-weight: 500; line-height: 1.05; letter-spacing: -2px; color: var(--ink); margin-bottom: 24px; max-width: 800px; } .section-title em { font-style: italic; color: var(--accent-red); font-weight: 400; } .section-lead { font-size: 18px; color: var(--body); max-width: 680px; line-height: 1.6; margin-bottom: 56px; } .hero-sub { font-size: 18px; line-height: 1.55; color: var(--body); max-width: 540px; margin-bottom: 36px; } /* ===== EYEBROW ===== */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-red); } .section-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; } .section-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--ink); flex-shrink: 0; } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease; white-space: nowrap; position: relative; z-index: 2; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--primary); color: var(--on-primary); } .btn-primary:hover { background: var(--primary-active); } .btn-secondary { background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline); } .btn-secondary:hover { border-color: var(--ink); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid transparent; } .btn-ghost:hover { border-color: var(--hairline); } .btn-red { background: var(--accent-red); color: #fff; } .btn-red:hover { background: var(--accent-red-dark); } .btn-on-color { background: var(--canvas); color: var(--ink); } .btn-text { background: transparent; color: var(--ink); padding: 0 4px; height: auto; } .btn-large { height: 52px; padding: 0 28px; font-size: 15px; } .btn-sm { height: 36px; padding: 0 16px; font-size: 13px; } /* ===== TRUST BAR ===== */ .trust-bar { background: var(--surface-card); border-bottom: 1px solid var(--hairline); padding: 8px 0; font-size: 13px; color: var(--body); font-weight: 500; text-align: center; position: relative; z-index: 100; } .flag { display: inline-block; width: 18px; height: 12px; vertical-align: middle; margin-right: 8px; border-radius: 2px; background: linear-gradient(to right, #002395 33%, #ffffff 33%, #ffffff 66%, #ED2939 66%); box-shadow: 0 0 0 1px rgba(0,0,0,0.06); } /* ===== NAVIGATION ===== */ nav { background: rgba(255, 250, 240, 0.92); height: var(--nav-height); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--hairline-soft); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.5px; color: var(--ink); text-decoration: none; } .logo-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-red); box-shadow: 0 0 0 4px rgba(230,57,70,0.15); animation: cc-pulse 2.4s ease-in-out infinite; flex-shrink: 0; } .nav-links { display: flex; gap: 32px; list-style: none; } .nav-links a { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; transition: opacity 0.2s; } .nav-links a:hover { opacity: 0.55; } .nav-cta { display: flex; gap: 12px; align-items: center; } .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; border: none; background: none; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } /* ===== HERO ===== */ .hero { padding: 80px 0 96px; position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; } .hero-ctas { display: flex; gap: 14px; margin-bottom: 56px; flex-wrap: wrap; } .hero-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 36px; border-top: 1px solid var(--hairline); max-width: 580px; } .kpi-num { font-family: var(--font-display); font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -1.5px; margin-bottom: 8px; color: var(--ink); } .kpi-label { font-size: 13px; color: var(--muted); line-height: 1.4; } .hero-art { position: relative; height: 580px; } .hero-art svg { width: 100%; height: 100%; } /* Hero on service/sector pages */ .hero-service { padding: 72px 0 80px; background: var(--canvas); } .status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--body); margin-bottom: 28px; } .status-pill .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); } /* ===== MARQUEE TRUST STRIP ===== */ .marquee-band { padding: 32px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--surface-soft); overflow: hidden; } .marquee-label { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .marquee-track { overflow: hidden; } .marquee { display: flex; gap: 64px; animation: cc-marquee 40s linear infinite; white-space: nowrap; width: max-content; } .marquee-item { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -0.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 64px; flex-shrink: 0; } .marquee-item::after { content: '●'; color: var(--accent-red); font-size: 10px; } /* ===== PILLAR CARDS (3-col why section) ===== */ .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .pillar-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 32px; position: relative; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease; } .pillar-card:hover { transform: translateY(-4px); border-color: var(--ink); } .pillar-icon { width: 56px; height: 56px; margin-bottom: 24px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pillar-card h3 { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -0.5px; margin-bottom: 12px; line-height: 1.2; } .pillar-card p { color: var(--body); font-size: 15px; line-height: 1.6; } .pillar-num { position: absolute; top: 24px; right: 28px; font-family: var(--font-mono); font-size: 12px; color: var(--muted-soft); letter-spacing: 1px; } /* ===== SERVICE MOSAIC (12-col heterogeneous cards) ===== */ .services-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: 56px; } .service-card { border-radius: var(--radius-xl); padding: 36px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; transition: transform 0.25s ease; text-decoration: none; } .service-card:hover { transform: translateY(-6px); } .service-card.pink { background: var(--brand-pink); color: var(--on-primary); grid-column: span 7; } .service-card.teal { background: var(--brand-teal); color: var(--on-dark); grid-column: span 5; } .service-card.lavender { background: var(--brand-lavender);color: var(--ink); grid-column: span 5; } .service-card.peach { background: var(--brand-peach); color: var(--ink); grid-column: span 7; } .service-card.ochre { background: var(--brand-ochre); color: var(--ink); grid-column: span 6; min-height: 320px; } .service-card.cream { background: var(--surface-card); color: var(--ink); grid-column: span 6; min-height: 320px; } .service-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; margin-bottom: 24px; opacity: 0.7; } .service-card h3 { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -1px; line-height: 1.05; margin-bottom: 16px; max-width: 90%; } .service-card p { font-size: 15px; line-height: 1.55; max-width: 92%; opacity: 0.92; } .service-card .service-art { position: absolute; bottom: -20px; right: -20px; width: 240px; height: 240px; pointer-events: none; opacity: 0.95; } .service-link-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; } .service-link-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; background: rgba(255,255,255,0.22); text-decoration: none; color: inherit; border: 1px solid rgba(255,255,255,0.3); transition: background 0.2s; } .service-link-tag:hover { background: rgba(255,255,255,0.35); } .service-card.cream .service-link-tag, .service-card.lavender .service-link-tag, .service-card.peach .service-link-tag, .service-card.ochre .service-link-tag { background: rgba(10,10,10,0.06); border-color: rgba(10,10,10,0.12); } /* UI fragment (data card inside service cards) */ .ui-fragment { position: absolute; bottom: 28px; right: 28px; background: var(--canvas); border-radius: var(--radius-md); padding: 14px 16px; font-family: var(--font-mono); font-size: 11px; color: var(--ink); width: 220px; box-shadow: 0 8px 32px rgba(10,10,10,0.12); border: 1px solid rgba(0,0,0,0.04); } .ui-fragment .ui-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--hairline-soft); } .ui-fragment .ui-row:last-child { border: none; } .ui-tag { display: inline-block; background: var(--brand-mint); color: var(--brand-teal); padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 600; } /* ===== PROBLEM / SOLUTION CARDS ===== */ .problem-section { background: var(--surface-soft); } .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .problem-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 32px; position: relative; } .problem-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--muted-soft); margin-bottom: 16px; text-transform: uppercase; } .problem-card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.5px; margin-bottom: 12px; line-height: 1.2; color: var(--ink); } .problem-card p { color: var(--body); font-size: 14px; line-height: 1.6; } .problem-accent { display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--accent-red); background: var(--accent-red-soft); padding: 4px 10px; border-radius: var(--radius-xs); } .solution-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; } .solution-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 32px; transition: transform 0.2s ease, border-color 0.2s ease; } .solution-card:hover { transform: translateY(-3px); border-color: var(--ink); } .solution-num { font-family: var(--font-mono); font-size: 11px; color: var(--muted-soft); letter-spacing: 1px; margin-bottom: 20px; text-transform: uppercase; } .solution-card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.5px; margin-bottom: 12px; color: var(--ink); line-height: 1.2; } .solution-card p { color: var(--body); font-size: 14px; line-height: 1.6; } /* ===== KPI DASHBOARD ===== */ .kpi-section { background: var(--surface-card); } .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; } .kpi-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 28px; } .kpi-card-value { font-family: var(--font-display); font-size: 52px; font-weight: 500; letter-spacing: -2px; line-height: 1; color: var(--ink); margin-bottom: 8px; } .kpi-card-value .kpi-accent { color: var(--accent-red); } .kpi-card-label { font-size: 13px; font-weight: 600; color: var(--body-strong); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.8px; } .kpi-card-sub { font-size: 12px; color: var(--muted); line-height: 1.4; } /* ===== ANALYTICS DASHBOARD MOCKUP ===== */ .analytics-section { background: var(--surface-soft); } .analytics-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: center; } .analytics-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; } .stat-pill { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 16px 20px; } .stat-num { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.8px; color: var(--ink); display: block; } .stat-num .pct { color: var(--accent-red); } .stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .dashboard-mockup { background: var(--canvas); border-radius: var(--radius-xl); border: 1px solid var(--hairline); padding: 24px; box-shadow: 0 24px 60px rgba(10,10,10,0.08); } .dashboard-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--hairline-soft); margin-bottom: 20px; } .dashboard-title { font-weight: 600; font-size: 14px; } .dashboard-pills { display: flex; gap: 6px; } .dot-pill { width: 10px; height: 10px; border-radius: 50%; background: var(--hairline); } .dot-pill:nth-child(1) { background: var(--brand-coral); } .dot-pill:nth-child(2) { background: var(--brand-ochre); } .dot-pill:nth-child(3) { background: var(--brand-mint); } .chart-wrap { display: grid; grid-template-columns: 1fr 280px; gap: 20px; } .chart-area { position: relative; height: 200px; } .chart-area svg { width: 100%; height: 100%; } .chart-side { display: flex; flex-direction: column; gap: 10px; } .side-row { background: var(--surface-card); padding: 12px 14px; border-radius: var(--radius-sm); display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .side-row .side-name { color: var(--body); } .side-row .side-val { font-family: var(--font-mono); font-weight: 600; color: var(--ink); } /* ===== AI DARK SECTION ===== */ .ai-section { background: var(--surface-dark); color: var(--on-dark); border-radius: var(--radius-xl); margin: 0 32px; padding: 80px 64px; position: relative; overflow: hidden; } .ai-section::before { content: ''; position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,77,139,0.15), transparent 60%); pointer-events: none; } .ai-section .section-eyebrow { color: var(--brand-mint); } .ai-section .section-eyebrow::before { background: var(--brand-mint); } .ai-section .section-title { color: var(--on-dark); max-width: none; } .ai-section .section-title em { color: var(--brand-mint); } .ai-section .section-lead { color: rgba(255,255,255,0.75); } .ai-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 64px; position: relative; z-index: 2; } .ai-feature { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); padding: 28px; transition: background 0.25s ease, transform 0.25s ease; } .ai-feature:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); } .ai-feature-icon { width: 40px; height: 40px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: rgba(164,212,197,0.1); } .ai-feature h4 { font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -0.4px; margin-bottom: 8px; color: var(--on-dark); } .ai-feature p { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.55; } /* ===== SECTORS GRID ===== */ .sectors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; } .sector-tile { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 24px 20px; display: flex; align-items: center; gap: 14px; transition: all 0.25s ease; text-decoration: none; cursor: pointer; } .sector-tile:hover { border-color: var(--ink); background: var(--surface-card); } .sector-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; } .sector-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; } .sector-desc { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.3; } /* ===== FRANCE / TRUST SECTION ===== */ .france-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; } .france-art { height: 480px; } .france-art svg { width: 100%; height: 100%; } .trust-list { display: grid; gap: 12px; margin-top: 32px; } .trust-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--surface-card); border-radius: var(--radius-md); font-size: 14px; font-weight: 500; color: var(--body-strong); } .trust-check { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--on-primary); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; font-weight: 700; } /* ===== TESTIMONIAL / PROOF BAND ===== */ .proof-band { padding: var(--section-pad) 0; background: var(--surface-strong); position: relative; overflow: hidden; } .proof-band::before, .proof-band::after { content: '\201C'; position: absolute; font-family: var(--font-display); font-size: 400px; line-height: 1; font-weight: 500; color: rgba(10,10,10,0.04); pointer-events: none; } .proof-band::before { top: 20px; left: 40px; } .proof-band::after { bottom: -120px; right: 40px; transform: rotate(180deg); } .proof-inner { text-align: center; max-width: 900px; margin: 0 auto; position: relative; z-index: 2; } .proof-inner h2 { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 48px); font-weight: 500; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 48px; } .proof-quote { font-family: var(--font-display); font-style: italic; font-size: 26px; line-height: 1.4; color: var(--body-strong); margin-bottom: 28px; font-weight: 400; } .proof-author { font-size: 14px; color: var(--muted); margin-bottom: 40px; } .proof-author strong { color: var(--ink); font-weight: 600; } /* ===== ONBOARDING TIMELINE ===== */ .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 64px; } .process-step { padding: 32px 24px 32px 0; border-top: 2px solid var(--ink); position: relative; } .process-step:not(:last-child)::after { content: ''; position: absolute; top: -2px; right: -1px; width: 1px; height: 24px; background: var(--ink); } .step-num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; margin-bottom: 24px; display: flex; justify-content: space-between; } .step-dur { font-family: var(--font-body); color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } .process-step h4 { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.5px; margin-bottom: 12px; line-height: 1.2; } .process-step p { color: var(--body); font-size: 14px; line-height: 1.55; } /* ===== BEFORE / AFTER TABLE ===== */ .before-after-table { width: 100%; border-collapse: collapse; margin-top: 48px; font-size: 14px; } .before-after-table th { text-align: left; padding: 14px 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); border-bottom: 2px solid var(--hairline); } .before-after-table th:nth-child(3) { background: var(--accent-red); color: #fff; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .before-after-table td { padding: 14px 20px; border-bottom: 1px solid var(--hairline-soft); vertical-align: top; line-height: 1.45; } .before-after-table td:nth-child(1) { color: var(--muted); font-weight: 500; } .before-after-table td:nth-child(2) { color: var(--body); } .before-after-table td:nth-child(3) { background: var(--accent-red-soft); color: var(--body-strong); font-weight: 600; } .before-after-table tr:last-child td:nth-child(3) { border-radius: 0 0 var(--radius-sm) var(--radius-sm); } /* ===== FAQ SECTION ===== */ .faq-list { margin-top: 40px; } .faq-item { border-bottom: 1px solid var(--hairline); padding: 24px 0; } .faq-question { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.3px; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none; user-select: none; } .faq-question::-webkit-details-marker { display: none; } .faq-icon { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--hairline-strong); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--muted); flex-shrink: 0; transition: transform 0.2s; } details[open] .faq-icon { transform: rotate(45deg); } .faq-answer { padding-top: 16px; font-size: 15px; color: var(--body); line-height: 1.65; max-width: 680px; } /* ===== SUB-SERVICE LINK GRID ===== */ .sub-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; } .sub-service-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 28px; text-decoration: none; display: flex; flex-direction: column; gap: 12px; transition: transform 0.2s, border-color 0.2s; } .sub-service-card:hover { transform: translateY(-3px); border-color: var(--ink); } .sub-service-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .sub-service-card h4 { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.3px; color: var(--ink); line-height: 1.2; } .sub-service-card p { font-size: 13px; color: var(--body); line-height: 1.5; flex: 1; } .sub-service-arrow { font-size: 18px; color: var(--muted); transition: color 0.2s, transform 0.2s; } .sub-service-card:hover .sub-service-arrow { color: var(--ink); transform: translateX(4px); } /* ===== CTA BANDS ===== */ .final-cta { padding: var(--section-pad) 0; } .cta-band { background: var(--brand-peach); border-radius: var(--radius-xl); padding: 80px 64px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; } .cta-band-red { background: var(--accent-red); border-radius: var(--radius-xl); padding: 72px 64px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .cta-band-dark { background: var(--surface-dark); border-radius: var(--radius-xl); padding: 72px 64px; position: relative; overflow: hidden; text-align: center; } .cta-content { position: relative; z-index: 2; } .cta-content h2 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); font-weight: 500; line-height: 1.05; letter-spacing: -2px; margin-bottom: 20px; color: var(--ink); } .cta-band-red .cta-content h2 { color: #fff; } .cta-band-dark .cta-content h2 { color: var(--on-dark); } .cta-content p { font-size: 17px; color: var(--body-strong); margin-bottom: 32px; max-width: 540px; } .cta-band-red .cta-content p { color: rgba(255,255,255,0.85); } .cta-band-dark .cta-content p { color: rgba(255,255,255,0.75); } .cta-btns { display: flex; gap: 12px; flex-wrap: wrap; } /* Inline mini form inside CTA band */ .cta-form { background: var(--canvas); padding: 32px; border-radius: var(--radius-lg); position: relative; z-index: 2; } .cta-form h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.5px; margin-bottom: 20px; } .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .form-row label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; } .form-row input, .form-row select, .form-row textarea { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 12px 14px; font-family: var(--font-body); font-size: 14px; color: var(--ink); transition: border-color 0.2s; height: 44px; width: 100%; } .form-row textarea { height: auto; min-height: 100px; resize: vertical; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--ink); } .cta-form .btn { width: 100%; margin-top: 8px; } /* ===== TEAM PAGE ===== */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; } .team-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-xl); overflow: hidden; } .team-photo { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-card); display: flex; align-items: center; justify-content: center; font-size: 64px; } .team-info { padding: 24px; } .team-name { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.3px; color: var(--ink); margin-bottom: 4px; } .team-role { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 12px; } .team-bio { font-size: 14px; color: var(--body); line-height: 1.55; margin-bottom: 16px; } .audio-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: var(--surface-card); font-size: 13px; font-weight: 500; color: var(--body-strong); cursor: pointer; transition: border-color 0.2s; font-family: var(--font-body); } .audio-btn:hover { border-color: var(--ink); } .audio-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-red); } /* ===== BLOG ===== */ .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; } .article-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform 0.2s, border-color 0.2s; } .article-card:hover { transform: translateY(-4px); border-color: var(--ink); } .article-img { height: 200px; background: var(--surface-card); display: flex; align-items: center; justify-content: center; overflow: hidden; } .article-img img { width: 100%; height: 100%; object-fit: cover; } .article-body { padding: 24px; flex: 1; display: flex; flex-direction: column; } .article-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 12px; font-weight: 500; } .article-cat { display: inline-block; background: var(--surface-card); padding: 2px 8px; border-radius: var(--radius-xs); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--body-strong); } .article-title { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.3px; color: var(--ink); line-height: 1.2; margin-bottom: 10px; } .article-excerpt { font-size: 14px; color: var(--body); line-height: 1.55; flex: 1; margin-bottom: 16px; } .article-read-more { font-size: 13px; font-weight: 600; color: var(--accent-red); display: flex; align-items: center; gap: 4px; } /* ===== FOOTER ===== */ footer { background: var(--surface-soft); padding: 80px 0 0; position: relative; overflow: hidden; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px; margin-bottom: 64px; } .footer-brand .logo { margin-bottom: 16px; } .footer-tagline { color: var(--body); font-size: 14px; line-height: 1.5; margin-bottom: 24px; max-width: 280px; } .footer-col h5 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 16px; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 10px; } .footer-col a { color: var(--body-strong); text-decoration: none; font-size: 14px; transition: color 0.2s; } .footer-col a:hover { color: var(--accent-red); } .footer-mountain { width: 100%; height: 200px; display: block; } .legal-bar { border-top: 1px solid var(--hairline); padding: 24px 0; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); flex-wrap: wrap; gap: 16px; } .legal-links { display: flex; gap: 20px; } .legal-links a { color: var(--muted); text-decoration: none; } .legal-links a:hover { color: var(--accent-red); } /* ===== BREADCRUMB ===== */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 40px; list-style: none; } .breadcrumb li:not(:last-child)::after { content: '›'; margin-left: 8px; } .breadcrumb a { color: var(--muted); text-decoration: none; } .breadcrumb a:hover { color: var(--ink); } .breadcrumb li:last-child { color: var(--body-strong); font-weight: 500; } /* ===== RELATED SERVICES STRIP ===== */ .related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; } .related-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 20px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; transition: transform 0.2s, border-color 0.2s; } .related-card:hover { transform: translateY(-3px); border-color: var(--ink); } .related-card span:first-child { font-size: 22px; } .related-card h4 { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.2; font-family: var(--font-body); } .related-card p { font-size: 13px; color: var(--muted); line-height: 1.4; } /* ===== MOBILE NAV OVERLAY ===== */ .mobile-nav { display: none; position: fixed; inset: 0; z-index: 200; background: var(--canvas); padding: 24px; flex-direction: column; overflow-y: auto; } .mobile-nav.open { display: flex; } .mobile-nav-close { align-self: flex-end; background: none; border: none; font-size: 28px; cursor: pointer; color: var(--ink); margin-bottom: 24px; } .mobile-nav-links { list-style: none; } .mobile-nav-links li { border-bottom: 1px solid var(--hairline); } .mobile-nav-links a { display: block; padding: 18px 0; font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--ink); text-decoration: none; letter-spacing: -0.5px; } .mobile-nav-cta { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; } .mobile-nav-cta .btn { width: 100%; justify-content: center; height: 52px; font-size: 16px; } /* ===== RESPONSIVE ===== */ @media (max-width: 1080px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { height: 380px; order: -1; max-width: 480px; margin: 0 auto; } .pillars-grid { grid-template-columns: 1fr; } .services-grid > * { grid-column: span 12 !important; } .ai-features { grid-template-columns: repeat(2, 1fr); } .analytics-grid, .france-grid { grid-template-columns: 1fr; } .sectors-grid { grid-template-columns: repeat(2, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .cta-band, .cta-band-red { grid-template-columns: 1fr; padding: 48px 32px; } .kpi-grid { grid-template-columns: repeat(2, 1fr); } .sub-service-grid { grid-template-columns: repeat(2, 1fr); } .team-grid { grid-template-columns: repeat(2, 1fr); } .article-grid { grid-template-columns: repeat(2, 1fr); } .solution-grid { grid-template-columns: 1fr; } .related-grid { grid-template-columns: repeat(2, 1fr); } .nav-links { display: none; } .nav-hamburger { display: flex; } .chart-wrap { grid-template-columns: 1fr; } .chart-side { display: none; } } @media (max-width: 640px) { :root { --section-pad: 64px; --container-pad: 20px; } .hero { padding: 48px 0 64px; } .hero-kpis { grid-template-columns: 1fr; gap: 20px; } .ai-section { margin: 64px 16px; padding: 48px 24px; } .ai-features { grid-template-columns: 1fr; } .sectors-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .legal-bar { flex-direction: column; align-items: flex-start; } .kpi-grid { grid-template-columns: 1fr; } .sub-service-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr; } .article-grid { grid-template-columns: 1fr; } .solution-grid { grid-template-columns: 1fr; } .related-grid { grid-template-columns: repeat(2, 1fr); } .problem-grid { grid-template-columns: 1fr; } .hero-ctas { flex-direction: column; } .hero-ctas .btn { width: 100%; justify-content: center; } .cta-btns { flex-direction: column; } .cta-btns .btn { width: 100%; justify-content: center; } } /* ================================================================ 2026 DESIGN REFRESH — Creative Layout & Interaction Classes ================================================================ */ /* --- Gradient text (red → pink) --- */ .gradient-text { background: linear-gradient(135deg, var(--accent-red) 0%, var(--brand-pink) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* --- Floating card — elevated shadow, red tint on hover --- */ .floating-card { transition: transform .3s ease, box-shadow .3s ease; box-shadow: 0 4px 16px rgba(10,10,10,.06), 0 1px 4px rgba(10,10,10,.04); } .floating-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(10,10,10,.10), 0 4px 12px rgba(230,57,70,.08); } /* --- Tilt card — JS injects --rx/--ry CSS vars on mousemove --- */ .tilt-card { transform: perspective(800px) rotateX(calc(var(--rx,0) * 1deg)) rotateY(calc(var(--ry,0) * 1deg)); transition: transform .12s ease; will-change: transform; } /* --- Animated underline grow on hover --- */ .underline-grow { position: relative; text-decoration: none; } .underline-grow::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--accent-red); transition: width .3s ease; } .underline-grow:hover::after, .underline-grow:focus-visible::after { width: 100%; } /* --- Badge chip with red dot --- */ .badge-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-card); border: 1px solid var(--hairline); font-size: 12px; font-weight: 600; color: var(--body-strong); line-height: 1; } .badge-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-red); flex-shrink: 0; } /* --- Icon wrapper for SVG icons in tiles/cards --- */ .icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0; } .icon-wrap svg { display: block; } /* --- Hero mesh animated gradient background --- */ .hero-mesh { position: relative; overflow: hidden; } .hero-mesh::before, .hero-mesh::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; opacity: .15; filter: blur(80px); } .hero-mesh::before { width: 600px; height: 600px; background: radial-gradient(circle, var(--accent-red) 0%, transparent 70%); top: -200px; right: -100px; animation: cc-mesh-drift-1 14s ease-in-out infinite; } .hero-mesh::after { width: 500px; height: 500px; background: radial-gradient(circle, var(--brand-pink) 0%, transparent 70%); bottom: -100px; left: -100px; animation: cc-mesh-drift-2 18s ease-in-out infinite; } /* --- Expertise tags — slide up on team card hover --- */ .expertise-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .35s ease; } .team-card:hover .expertise-tags { max-height: 80px; opacity: 1; } .expertise-tag { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--surface-strong); color: var(--body); border: 1px solid var(--hairline-strong); } /* --- Logo image sizing (nav + footer) --- */ .logo img { height: 36px; width: auto; display: block; } footer .logo img { height: 32px; } /* --- Section diagonal clip --- */ .section-split { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%); margin-bottom: -48px; padding-bottom: calc(var(--section-pad) + 48px); } /* ================================================================ SERVICE PAGE LAYOUT SYSTEM — 5 UNIQUE LAYOUT TEMPLATES ================================================================ */ /* --- Shared dark-hero variant (Intelligence + Craft pages) --- */ .hero-service--dark { background: var(--surface-dark); color: var(--text-on-dark); padding: 80px 0 96px; } .hero-service--dark .hero-title { color: var(--text-on-dark); } .hero-service--dark .hero-sub { color: var(--text-on-dark-soft); max-width: 560px; } .hero-service--dark .eyebrow { color: var(--brand-mint); } .hero-service--dark .eyebrow .dot { background: var(--brand-mint); } .hero-service--dark .breadcrumb a { color: rgba(255,255,255,0.35); } .hero-service--dark .breadcrumb li:last-child { color: rgba(255,255,255,0.7); } .hero-service--dark .accent-word { color: var(--brand-mint); } .hero-service--dark .btn-secondary { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.2); } .hero-service--dark .btn-secondary:hover { border-color: rgba(255,255,255,0.5); } /* ===== LAYOUT A — PIPELINE (call center / outbound) ===== */ .status-strip { padding: 10px 0; background: var(--surface-dark); text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--brand-mint); letter-spacing: 0.8px; display: flex; justify-content: center; align-items: center; gap: 10px; } .status-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: cc-glow-pulse 2s infinite; } .pipeline-funnel-section { background: var(--surface-card); } .funnel-stages { display: flex; gap: 8px; align-items: flex-end; margin-top: 48px; } .funnel-arrow { font-size: 18px; color: var(--hairline-strong); align-self: center; flex-shrink: 0; padding: 0 4px; } .funnel-stage { flex: 1; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 20px 16px; transition: transform 0.2s; } .funnel-stage:hover { transform: translateY(-3px); } .funnel-stage--hot { border-color: var(--accent-red); background: rgba(230,57,70,0.03); } .funnel-stage-num { font-family: var(--font-mono); font-size: 11px; color: var(--muted-soft); margin-bottom: 10px; } .funnel-stage-label { font-size: 13px; font-weight: 600; color: var(--body-strong); line-height: 1.3; margin-bottom: 14px; } .funnel-stage-vol { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -1px; color: var(--ink); } .funnel-stage-pct { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px; } .funnel-stage-bar { height: 4px; border-radius: 2px; margin-top: 14px; } .funnel-footer { margin-top: 20px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--muted); } @media (max-width: 640px) { .funnel-stages { flex-direction: column; } .funnel-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 12px; } } /* ===== LAYOUT B — INTELLIGENCE (AI / data) ===== */ .intelligence-showcase { background: var(--surface-dark); border-radius: var(--radius-xl); margin: 0 32px; padding: 72px 64px; position: relative; overflow: hidden; } .intelligence-showcase::before { content: ''; position: absolute; top: -80px; right: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(164,212,197,0.12), transparent 65%); pointer-events: none; } .intelligence-showcase .section-title { color: var(--text-on-dark); } .intelligence-showcase .section-title em { color: var(--brand-mint); } .intelligence-showcase .section-eyebrow { color: var(--brand-mint); } .intelligence-showcase .section-eyebrow::before { background: var(--brand-mint); } .ai-data-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 32px; } .ai-data-table th { padding: 10px 16px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.08); font-weight: 600; font-family: var(--font-mono); } .ai-data-table td { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-on-dark-soft); vertical-align: middle; } .ai-data-table tr:hover td { background: rgba(255,255,255,0.03); } .ai-score-cell { display: flex; align-items: center; gap: 8px; } .ai-score-bar-wrap { width: 56px; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; } .ai-score-fill { height: 100%; border-radius: 2px; } .ai-score-fill--hot { background: var(--accent-red); } .ai-score-fill--warm { background: var(--brand-ochre); } .ai-score-fill--cool { background: rgba(255,255,255,0.2); } .ai-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-xs); font-size: 10px; font-weight: 600; font-family: var(--font-mono); } .ai-badge--hot { background: rgba(230,57,70,0.25); color: #ff8080; } .ai-badge--warm { background: rgba(232,185,74,0.2); color: var(--brand-ochre); } .ai-badge--cool { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); } .ai-badge--verified { background: rgba(38,122,66,0.25); color: var(--brand-mint); } .how-it-works-dark { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 48px; } .hiw-card { padding: 28px 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-md); transition: background 0.2s; } .hiw-card:hover { background: rgba(255,255,255,0.06); } .hiw-num { font-family: var(--font-mono); font-size: 24px; font-weight: 500; color: rgba(255,255,255,0.1); margin-bottom: 16px; } .hiw-title { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--text-on-dark); letter-spacing: -0.3px; margin-bottom: 8px; } .hiw-body { font-size: 14px; color: var(--text-on-dark-muted); line-height: 1.6; } @media (max-width: 768px) { .how-it-works-dark { grid-template-columns: 1fr; } .intelligence-showcase { margin: 0 16px; padding: 48px 24px; } } /* ===== LAYOUT C — SERVICE HUMAIN ===== */ .typical-day-section { background: var(--canvas); } .day-timeline { margin-top: 48px; position: relative; display: grid; gap: 0; } .day-timeline::before { content: ''; position: absolute; left: 72px; top: 0; bottom: 0; width: 1px; background: var(--hairline); z-index: 0; } .day-event { display: grid; grid-template-columns: 72px 24px 1fr; gap: 16px; align-items: flex-start; padding: 20px 0; position: relative; } .day-time { font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding-top: 2px; text-align: right; } .day-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-red); border: 2px solid var(--canvas); box-shadow: 0 0 0 2px var(--accent-red); margin-top: 4px; position: relative; z-index: 1; } .day-content strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--body-strong); } .day-content p { font-size: 14px; color: var(--body); line-height: 1.55; } .hero-nps-stat { text-align: center; padding: 28px; background: var(--surface-card); border-radius: var(--radius-xl); border: 1px solid var(--hairline); } .hero-nps-val { font-family: var(--font-display); font-size: 72px; font-weight: 500; letter-spacing: -3px; line-height: 1; color: var(--ink); } .hero-nps-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-top: 8px; } /* ===== LAYOUT D — CRAFT DIGITAL ===== */ .tech-stack-strip { background: var(--surface-dark); padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.05); } .tech-stack-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .tech-stack-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.25); white-space: nowrap; } .tech-pills { display: flex; gap: 6px; flex-wrap: wrap; } .tech-pill { font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.08); } .browser-mockup { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--hairline); box-shadow: 0 24px 60px rgba(10,10,10,0.08); } .browser-chrome { background: var(--surface-card); padding: 11px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--hairline); } .browser-dots { display: flex; gap: 6px; } .bdot { width: 10px; height: 10px; border-radius: 50%; } .bdot--red { background: #ff6b5a; } .bdot--yellow { background: #e8b94a; } .bdot--green { background: #a4d4c5; } .browser-url { flex: 1; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 5px 14px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .browser-perf { display: flex; align-items: center; gap: 6px; } .perf-badge { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; font-weight: 700; border: 2px solid; } .perf-badge--green { background: rgba(38,122,66,0.12); color: var(--ok); border-color: var(--ok); } .perf-badge--yellow { background: rgba(232,185,74,0.12); color: #7a6000; border-color: var(--brand-ochre); } .perf-label { font-family: var(--font-mono); font-size: 10px; color: var(--muted); } .browser-body { padding: 28px; background: var(--canvas); min-height: 220px; } .craft-hero--dark { background: var(--surface-dark); } .craft-hero--dark .breadcrumb a { color: rgba(255,255,255,0.35); } .craft-hero--dark .breadcrumb li:last-child { color: rgba(255,255,255,0.7); } /* Perf metrics row inside browser */ .perf-row { display: flex; gap: 20px; flex-wrap: wrap; } .perf-metric { display: flex; flex-direction: column; gap: 3px; } .perf-score { font-family: var(--font-display); font-size: 36px; font-weight: 500; letter-spacing: -1px; color: var(--ink); } .perf-score--green { color: var(--ok); } .perf-score--red { color: var(--accent-red); } .perf-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); } /* SEO SERP snippet inside browser */ .serp-snippet { border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--canvas); max-width: 540px; } .serp-pos { font-family: var(--font-mono); font-size: 10px; color: var(--ok); font-weight: 700; margin-bottom: 4px; } .serp-title { font-size: 16px; color: #1a0dab; font-weight: 500; margin-bottom: 2px; text-decoration: underline; cursor: pointer; } .serp-url { font-size: 11px; color: var(--ok); margin-bottom: 4px; font-family: var(--font-mono); } .serp-desc { font-size: 13px; color: var(--body); line-height: 1.4; } /* A/B test split inside browser */ .ab-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ab-variant { border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 16px; } .ab-variant--winner { border-color: var(--accent-red); background: rgba(230,57,70,0.03); } .ab-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-xs); margin-bottom: 10px; display: inline-block; } .ab-tag--a { background: var(--surface-card); color: var(--muted); } .ab-tag--b { background: rgba(230,57,70,0.1); color: var(--accent-red); } .ab-line { height: 6px; border-radius: 3px; background: var(--surface-strong); margin: 4px 0; } .ab-line--heading { width: 80%; height: 12px; background: var(--surface-strong); } .ab-cta { height: 28px; border-radius: var(--radius-sm); background: var(--accent-red); width: 90%; margin-top: 10px; } .ab-conv { font-family: var(--font-mono); font-size: 11px; margin-top: 8px; } .ab-conv--winner { color: var(--accent-red); font-weight: 700; } /* ===== LAYOUT E — EXECUTION ===== */ .dealflow-section { background: var(--surface-soft); } .dealflow-board { display: flex; gap: 8px; align-items: flex-start; margin-top: 48px; overflow-x: auto; padding-bottom: 8px; } .df-col { flex: 1; min-width: 190px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; } .df-col--signed { border-color: rgba(38,122,66,0.35); } .df-col-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; background: var(--surface-card); border-bottom: 1px solid var(--hairline); font-size: 12px; font-weight: 600; } .df-col-badge { font-family: var(--font-mono); font-size: 11px; background: var(--canvas); padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); } .df-col-badge--green { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .df-deal { padding: 11px 14px; border-bottom: 1px solid var(--hairline-soft); } .df-deal--hot { background: rgba(230,57,70,0.03); } .df-deal--warm { background: rgba(232,185,74,0.04); } .df-deal--closed { background: rgba(38,122,66,0.03); } .df-deal--muted { color: var(--muted); font-size: 12px; font-style: italic; padding: 10px 14px; } .df-co { font-weight: 600; font-size: 13px; margin-bottom: 3px; color: var(--body-strong); } .df-amt { font-family: var(--font-mono); font-size: 12px; color: var(--ink); } .df-prob { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; } .df-closed-tag { font-family: var(--font-mono); font-size: 10px; color: var(--ok); margin-top: 2px; } .df-arrow { font-size: 18px; color: var(--hairline-strong); align-self: center; padding: 0 4px; flex-shrink: 0; } .df-total { padding: 12px 14px; font-size: 12px; color: var(--muted); } .df-total strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ok); display: block; margin-top: 4px; letter-spacing: -0.5px; } .profiles-section { background: var(--surface-soft); } .profiles-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 48px; } .prof-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 18px; display: flex; align-items: flex-start; gap: 12px; transition: transform 0.2s, border-color 0.2s; } .prof-card:hover { transform: translateY(-3px); border-color: var(--ink); } .prof-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; font-weight: 500; } .prof-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; color: var(--body-strong); } .prof-role { font-size: 12px; color: var(--muted); margin-bottom: 5px; line-height: 1.3; } .prof-kpi { font-family: var(--font-mono); font-size: 10px; color: var(--accent-red); } .prof-card--cta { flex-direction: column; justify-content: center; align-items: center; text-align: center; background: var(--surface-dark); border-color: transparent; } .prof-cta-num { font-family: var(--font-display); font-size: 40px; font-weight: 500; color: var(--text-on-dark); line-height: 1; } .prof-cta-text { font-size: 12px; color: var(--text-on-dark-muted); margin-bottom: 10px; margin-top: 4px; }