/* ============================================================ Tweaks overrides — applied via data-* attributes on These CSS rules let three small controls reshape the whole visual identity without touching the markup. ============================================================ */ /* ===== PALETTE ============================================== */ /* "Forêt" is the default — no override needed. */ body[data-palette="sable"] { --gl-mint: #F6EFE3; --gl-mint-soft: #FBF7EE; --gl-mint-2: #FAF7F1; --gl-bg-2: #F8F2E6; --gl-gold: #C1914C; --gl-leaf: #E7C97F; --gl-leaf-2: #D9C19A; --gl-stroke-soft: #ECE3D0; } body[data-palette="sable"] .marquee-item .dot { background: #E7C97F; } body[data-palette="sauge"] { --gl-mint: #DBE6D9; --gl-mint-soft: #EAF1E8; --gl-mint-2: #EDF3EB; --gl-bg-2: #E5EDE3; --gl-gold: #6A9163; --gl-leaf: #B8D9B0; --gl-leaf-2: #A6C99E; --gl-stroke-soft: #D2DECF; } /* ===== TYPOGRAPHY ============================================ */ /* Load alternate display fonts on demand. */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&display=swap'); /* Editorial is default — Poppins display from colors_and_type.css */ body[data-type="serif"] { --font-display: "Instrument Serif", "DM Serif Display", Georgia, serif; } body[data-type="serif"] .hero h1, body[data-type="serif"] .section-title, body[data-type="serif"] .impact h2, body[data-type="serif"] .integration h2, body[data-type="serif"] .final-cta-card h2, body[data-type="serif"] .testimonial-quote, body[data-type="serif"] .stat-num, body[data-type="serif"] .impact-num, body[data-type="serif"] .hv-stat-num, body[data-type="serif"] .roi-num { font-weight: 400; letter-spacing: -0.01em; } body[data-type="serif"] .hero h1 .accent, body[data-type="serif"] .section-title .em, body[data-type="serif"] .impact h2 .em, body[data-type="serif"] .testimonial-quote .em { font-style: italic; font-weight: 400; } /* Reset uppercase tracking on serif eyebrow */ body[data-type="serif"] .gl-display { text-transform: none; } body[data-type="tech"] { --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; } body[data-type="tech"] .hero h1, body[data-type="tech"] .section-title, body[data-type="tech"] .impact h2, body[data-type="tech"] .integration h2, body[data-type="tech"] .final-cta-card h2 { letter-spacing: -0.035em; font-weight: 700; } body[data-type="tech"] .hero h1 .accent, body[data-type="tech"] .section-title .em, body[data-type="tech"] .impact h2 .em { font-style: normal; font-weight: 700; } /* ===== ATMOSPHÈRE (density · radius · rhythm) ================ */ /* Balanced is the default. */ /* — Compact: dense, startup, "more info per screen" — */ body[data-air="compact"] section { padding: 72px 0; } body[data-air="compact"] .hero { padding: 56px 0 40px; } body[data-air="compact"] .container { max-width: 1180px; } body[data-air="compact"] .section-head { margin-bottom: 40px; } body[data-air="compact"] .hero h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.0; } body[data-air="compact"] .section-title { font-size: clamp(28px, 3.2vw, 40px); } body[data-air="compact"] .hero p.lede, body[data-air="compact"] .section-lede { font-size: 16px; } body[data-air="compact"] .value-card, body[data-air="compact"] .product-card, body[data-air="compact"] .eco-card, body[data-air="compact"] .faq-item, body[data-air="compact"] .pain-col, body[data-air="compact"] .roi-card, body[data-air="compact"] .testimonial-card, body[data-air="compact"] .impact-counter, body[data-air="compact"] .code-window { border-radius: 10px; } body[data-air="compact"] .integration, body[data-air="compact"] .final-cta-card, body[data-air="compact"] .stats-grid { border-radius: 14px; } body[data-air="compact"] .value-card { padding: 24px; } body[data-air="compact"] .value-card h3 { font-size: 22px; } body[data-air="compact"] .pain-col { padding: 24px; } body[data-air="compact"] .testimonial-card { padding: 36px; } body[data-air="compact"] .testimonial-quote { font-size: 22px; } body[data-air="compact"] .integration { padding: 56px; } body[data-air="compact"] .impact { padding: 72px 0; } body[data-air="compact"] .final-cta-card { padding: 56px 32px; } body[data-air="compact"] .stat { padding: 24px 24px; } body[data-air="compact"] .stat-num { font-size: 44px; } body[data-air="compact"] .impact-num { font-size: 40px; } body[data-air="compact"] .nav-inner { height: 60px; } /* — Aéré: editorial, generous, premium — */ body[data-air="aere"] section { padding: 160px 0; } body[data-air="aere"] .hero { padding: 120px 0 96px; } body[data-air="aere"] .container { max-width: 1320px; } body[data-air="aere"] .section-head { margin-bottom: 96px; } body[data-air="aere"] .hero h1 { font-size: clamp(48px, 6.8vw, 92px); line-height: 0.96; } body[data-air="aere"] .section-title { font-size: clamp(36px, 4.8vw, 64px); line-height: 1.0; } body[data-air="aere"] .hero p.lede { font-size: 21px; max-width: 580px; } body[data-air="aere"] .section-lede { font-size: 20px; } body[data-air="aere"] .value-card, body[data-air="aere"] .product-card, body[data-air="aere"] .eco-card, body[data-air="aere"] .faq-item, body[data-air="aere"] .pain-col, body[data-air="aere"] .roi-card, body[data-air="aere"] .impact-counter { border-radius: 28px; } body[data-air="aere"] .testimonial-card, body[data-air="aere"] .code-window { border-radius: 32px; } body[data-air="aere"] .integration, body[data-air="aere"] .final-cta-card, body[data-air="aere"] .stats-grid { border-radius: 40px; } body[data-air="aere"] .value-card { padding: 48px; } body[data-air="aere"] .value-card h3 { font-size: 32px; } body[data-air="aere"] .pain-col { padding: 48px; } body[data-air="aere"] .testimonial-card { padding: 72px; } body[data-air="aere"] .testimonial-quote { font-size: 34px; } body[data-air="aere"] .integration { padding: 96px; } body[data-air="aere"] .impact { padding: 140px 0; } body[data-air="aere"] .final-cta-card { padding: 112px 64px; } body[data-air="aere"] .stat { padding: 52px 40px; } body[data-air="aere"] .stat-num { font-size: 72px; } body[data-air="aere"] .impact-num { font-size: 64px; } body[data-air="aere"] .nav-inner { height: 84px; } /* ===== Tweaks panel internal styling ========================= */ .gl-palette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; } .gl-palette-card { background: transparent; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 8px 8px 10px; cursor: pointer; transition: all 160ms ease; display: flex; flex-direction: column; gap: 8px; } .gl-palette-card:hover { border-color: rgba(255,255,255,0.22); } .gl-palette-card.is-active { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); } .gl-palette-swatch { display: flex; height: 28px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); } .gl-palette-swatch span { flex: 1; display: block; } .gl-palette-label { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: rgba(255,255,255,0.85); text-align: center; } .gl-type-preview { margin: 6px 0 2px; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); font-size: 17px; line-height: 1.1; color: white; letter-spacing: -0.02em; } .gl-type-preview[data-type-preview="editorial"] { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; } .gl-type-preview[data-type-preview="serif"] { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 22px; } .gl-type-preview[data-type-preview="serif"]::after { content: ''; } .gl-type-preview[data-type-preview="tech"] { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.035em; } .gl-air-hint { font-size: 11px; color: rgba(255,255,255,0.55); font-style: italic; margin-top: -2px; }