/* ============================================================= eemagine — Design System (eem-design-system.css) ------------------------------------------------------------- ODOO MIGRATION: this single file is what your developer installs ONCE into the web.assets_frontend bundle. Every page/section then references these tokens and shared component classes. AESTHETIC: "Apple-grade" — near-monochrome base (white + signature light grey + near-black ink), generous space, confident Geist type, soft depth. The ONE accent is the eemagine brand blue, taken from the logo; the light EEG-wave blue and wordmark grey come from it too. ============================================================= */ /* ---- Monochrome base + brand tokens ------------------------ */ :root { --eem-bg: #ffffff; --eem-surface: #f5f5f7; /* Apple signature grey */ --eem-surface-2: #ebebf0; --eem-ink: #1d1d1f; /* near-black headings */ --eem-body: #494a4e; /* body text */ --eem-muted: #737578; /* captions / kickers — eemagine wordmark grey */ --eem-line: #d6d8db; /* hairline */ /* brand accent, from the logo */ --eem-accent: #0096d5; /* eemagine brand blue (bright) */ --eem-accent-dark: #007cb3; --eem-accent-soft: rgba(0,150,213,.10); --eem-accent-light: #73c1e8; /* EEG-wave / light "e" blue */ /* ============================================================ BUTTON STYLE — pick ONE option below: uncomment its line and comment out the others, then SAVE and REFRESH the browser. Controls every "Schedule a call" / CTA button + the nav button. ============================================================ */ /* Option 1 · Deep brand blue, white text — readable + on-brand [ACTIVE] --eem-cta-bg:#04618f; --eem-cta-bg-hover:#034d72; --eem-cta-fg:#ffffff; --eem-cta-border:transparent; */ /* Option 2 · Ink / charcoal, white text — maximum contrast, Apple-like --eem-cta-bg:#1d1d1f; --eem-cta-bg-hover:#000000; --eem-cta-fg:#ffffff; --eem-cta-border:transparent;*/ /* Option 3 · Bright logo blue, white text — the original (lighter) --eem-cta-bg:#0096d5; --eem-cta-bg-hover:#007cb3; --eem-cta-fg:#ffffff; --eem-cta-border:transparent; */ /* Option 4 · White / outline, blue text + blue border — light & minimal*/ --eem-cta-bg:#ffffff; --eem-cta-bg-hover:#eaf4fb; --eem-cta-fg:#04618f; --eem-cta-border:#04618f; /* ============================================================ FONT STYLE — pick ONE pair below: uncomment its two lines and comment out the others, then SAVE and REFRESH the browser. All candidate fonts are preloaded in each page's , so this is the only place you change. (For production, trim each page's Google Fonts down to just the family you keep, for speed.) ============================================================ */ /* Option 1 · Geist (headings + body) — clean, modern Apple/Vercel feel [ACTIVE] */ --eem-font-head: "Geist", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --eem-font-body: "Geist", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; /* Option 2 · Montserrat headings + Open Sans body (Aptos fallback) — geometric + friendly --eem-font-head: "Montserrat", "Aptos", -apple-system, "Segoe UI", system-ui, sans-serif; --eem-font-body: "Open Sans", "Aptos", -apple-system, "Segoe UI", system-ui, sans-serif; */ /* Option 3 · Inter (headings + body) — neutral, highly legible, single family --eem-font-head: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --eem-font-body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; */ --eem-max: 1120px; --eem-radius: 22px; --eem-radius-sm: 14px; --eem-radius-pill: 980px; --eem-shadow: 0 30px 60px rgba(0,0,0,.08); --eem-shadow-sm: 0 10px 30px rgba(0,0,0,.06); --eem-space-section: clamp(72px, 9vw, 132px); /* ============================================================ TYPE SCALE — single source of truth for font sizes. Use these tokens instead of hand-writing clamp() per page, so the same role renders identically everywhere. ============================================================ */ --eem-fs-display: clamp(40px, 5.6vw, 68px); /* h1 (matches .eem h1) */ --eem-fs-h2: clamp(30px, 3.8vw, 46px); /* section titles (matches .eem h2) */ --eem-fs-h3: clamp(18px, 1.5vw, 21px); /* small headings (matches .eem h3) */ --eem-fs-title: clamp(22px, 2.3vw, 30px); /* card & sub-section titles */ --eem-fs-stat: clamp(34px, 4.2vw, 52px); /* large metric numbers */ --eem-fs-quote: clamp(24px, 3vw, 34px); /* large display pull-quote */ --eem-fs-quote-sm: clamp(18px, 1.7vw, 22px); /* testimonial quotes */ --eem-fs-lead: clamp(17px, 1.4vw, 20px); /* lead paragraphs (matches .eem-lead) */ --eem-fs-body: clamp(16px, 0.45vw + 14.7px, 18.5px); /* base body — now fluid */ --eem-fs-sm: clamp(14px, 0.32vw + 13px, 16px); /* secondary copy / links */ --eem-fs-caption: clamp(13.5px, 0.30vw + 12.6px, 15.5px); /* meta, captions, small body */ --eem-fs-micro: clamp(12px, 0.20vw + 11.4px, 13.5px); /* eyebrows, chips, tags */ } /* optional alternate brand-blue shade */ [data-accent="deep"] { --eem-accent:#0085c7; --eem-accent-dark:#006ba3; --eem-accent-soft:rgba(0,133,199,.10); } /* ---- Scoped reset + base ----------------------------------- */ .eem, .eem *, .eem *::before, .eem *::after { box-sizing: border-box; } .eem { margin: 0; /* kill the default 8px body margin so full-width sections reach the screen edges */ overflow-x: hidden; /* belt-and-braces: never show a sideways gap/scroll from rounding */ font-family: var(--eem-font-body); color: var(--eem-body); line-height: 1.6; font-size: var(--eem-fs-body); /* fluid base — scales with screen */ letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .eem h1, .eem h2, .eem h3 { font-family: var(--eem-font-head); color: var(--eem-ink); margin: 0 0 .5em; font-weight: 600; line-height: 1.07; letter-spacing: -0.022em; text-wrap: balance; /* even line lengths, no single-word orphan line */ } .eem h1 { font-size: var(--eem-fs-display); } .eem h2 { font-size: var(--eem-fs-h2); } .eem h3 { font-size: var(--eem-fs-h3); letter-spacing:-0.015em; } .eem p { margin: 0 0 1rem; text-wrap: pretty; } /* avoids orphans / awkward last-line breaks */ .eem a { color: var(--eem-accent); } .eem-container { width:100%; max-width:var(--eem-max); margin:0 auto; padding:0 28px; } .eem-section { padding: var(--eem-space-section) 0; } .eem-section--surface { background: var(--eem-surface); } .eem-eyebrow { font-size:var(--eem-fs-micro); font-weight:600; letter-spacing:.02em; color:var(--eem-muted); margin:0 0 14px; } .eem-lead { font-size:var(--eem-fs-lead); color:var(--eem-body); line-height:1.55; letter-spacing:-0.01em; text-wrap:balance; } .eem-accent { color: var(--eem-accent); } /* ---- Buttons + links --------------------------------------- */ .eem-btn { display:inline-flex; align-items:center; gap:8px; font: 500 var(--eem-fs-body)/1 var(--eem-font-body); padding:14px 26px; border-radius:var(--eem-radius-pill); border:1px solid transparent; cursor:pointer; text-decoration:none; transition: background .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s; } .eem-btn--primary { background:var(--eem-cta-bg); color:var(--eem-cta-fg); font-weight:600; border:1px solid var(--eem-cta-border); box-shadow:0 8px 20px rgba(0,0,0,.14); } .eem-btn--primary:hover { background:var(--eem-cta-bg-hover); transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.18); } .eem-btn--ghost { background:transparent; color:var(--eem-accent); border-color:var(--eem-line); } .eem-btn--ghost:hover { background:var(--eem-accent-soft); border-color:transparent; } /* Buttons scale down a touch on phones so long labels don't dominate the screen */ @media(max-width:640px){ .eem-btn{padding:12px 20px;font-size:var(--eem-fs-sm)} } .eem-link { color:var(--eem-accent); text-decoration:none; font-weight:500; } .eem-link:hover { text-decoration:underline; } /* Cookie-consent banner (shown only when analytics is configured) */ .eem-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:720px;margin:0 auto; background:#fff;border:1px solid var(--eem-line);border-radius:16px;box-shadow:var(--eem-shadow-sm); padding:16px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap} .eem-consent[hidden]{display:none} .eem-consent__text{margin:0;font-size:var(--eem-fs-sm);color:var(--eem-body);max-width:46ch;flex:1 1 260px} .eem-consent__text a{color:var(--eem-accent);font-weight:600} .eem-consent__actions{display:flex;gap:10px;margin-left:auto} .eem-consent .eem-btn{padding:10px 20px;font-size:var(--eem-fs-sm)} @media(max-width:520px){.eem-consent__actions{width:100%}.eem-consent__actions .eem-btn{flex:1}} /* ============================================================= SHARED COMPONENTS (used across every page) ============================================================= */ /* ---- Header / nav ------------------------------------------ */ .eem-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--eem-line)} .eem-header__wrap{max-width:var(--eem-max);margin:0 auto;padding:16px 28px; display:flex;align-items:center;justify-content:space-between;gap:24px} .eem-header__brand img{height:52px;display:block} .eem-nav{display:flex;align-items:center;gap:30px} .eem-nav a{color:var(--eem-ink);text-decoration:none;font-size:var(--eem-fs-sm);font-weight:500; opacity:.85;transition:opacity .15s,color .15s} .eem-nav a:hover{opacity:1;color:var(--eem-accent)} .eem-nav a.active{color:var(--eem-accent);opacity:1} .eem-nav__cta{background:var(--eem-cta-bg);color:var(--eem-cta-fg)!important;padding:9px 17px; border:1px solid var(--eem-cta-border);border-radius:980px;opacity:1!important;font-weight:600} .eem-nav__cta:hover{background:var(--eem-cta-bg-hover)} /* CSS-only mobile menu (no JS — survives Odoo) */ .eem-navtoggle{display:none} .eem-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:8px} .eem-burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--eem-ink)} @media(max-width:880px){ .eem-burger{display:flex} .eem-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column; align-items:stretch;gap:0;background:#fff;padding:6px 0;border-bottom:1px solid var(--eem-line); box-shadow:var(--eem-shadow-sm)} .eem-nav a{padding:13px 28px;font-size:var(--eem-fs-body);opacity:1} /* CTA becomes a compact, centered pill (not a full-width bar) */ .eem-nav a.eem-nav__cta{display:inline-flex;align-self:center;width:auto; margin:14px 0 8px;padding:11px 26px;font-size:var(--eem-fs-sm)} .eem-navtoggle:checked ~ .eem-nav{display:flex} } /* ---- Credibility strip (light) ----------------------------- */ .eem-strip{background:var(--eem-bg);border-top:1px solid var(--eem-line);border-bottom:1px solid var(--eem-line)} .eem-strip__wrap{max-width:var(--eem-max);margin:0 auto;padding:22px 28px; display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px; font-size:var(--eem-fs-caption);color:var(--eem-muted);text-align:center} .eem-strip__wrap span{position:relative;font-weight:500;white-space:nowrap} .eem-strip__wrap span:not(:last-child)::after{content:"";position:absolute;right:-14px;top:50%; width:3px;height:3px;border-radius:50%;background:var(--eem-line);transform:translateY(-50%)} /* ---- Interior page hero (full background image) ------------ */ .eem-page-hero{position:relative;overflow:hidden;background-color:var(--eem-surface); background-position:center;display:flex;align-items:center;min-height:clamp(440px,48vw,620px)} /* image layer: rests in the homepage greyscale hue; reveals true colour when the banner scrolls into view. On its own layer so ONLY the photo grades — the text stays full colour. */ .eem-page-hero::before{content:"";position:absolute;inset:0;z-index:0; background-image:var(--eem-hero-img, none);background-size:cover;background-position:inherit;background-repeat:no-repeat; filter:grayscale(1); transition:filter 1.1s ease} .eem-page-hero.is-color::before{filter:grayscale(0)} /* text-side scrim with a faint brand-blue cast (matches the homepage tone) */ .eem-page-hero::after{content:"";position:absolute;inset:0;z-index:1;background: linear-gradient(90deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.64) 32%, rgba(255,255,255,.30) 58%, rgba(115,193,232,.12) 100%)} /* --scrim variant: stronger white wash on the title side for extra headline contrast (no blur) */ .eem-page-hero--scrim::after{background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.86) 34%, rgba(255,255,255,.48) 62%, rgba(115,193,232,.12) 100%)} .eem-page-hero__wrap{position:relative;z-index:2;width:100%;max-width:var(--eem-max);margin:0 auto;padding:clamp(40px,6vw,72px) 28px} .eem-page-hero h1{margin:0 0 20px} .eem-page-hero .eem-lead{max-width:46ch} /* Small AI-visual disclaimer chip, bottom-right of any banner. Unobtrusive, non-interactive. */ .eem-hero-note{position:absolute;right:14px;bottom:12px;z-index:3;max-width:62%;margin:0; font-size:11px;line-height:1.3;letter-spacing:.01em;color:#fff;background:rgba(17,24,33,.42); padding:4px 9px;border-radius:7px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); pointer-events:none} .eem-hero-note--faint{opacity:.62} @media (max-width:640px){ .eem-hero-note{right:10px;bottom:10px;font-size:10px;max-width:70%} } /* centered, image-free variant (e.g. the schedule form page) */ .eem-page-hero--center{background:linear-gradient(180deg,#fff 0%,var(--eem-surface) 100%);min-height:auto} .eem-page-hero--center::before,.eem-page-hero--center::after{display:none} .eem-page-hero--center .eem-page-hero__wrap{max-width:820px;text-align:center;padding:clamp(56px,8vw,110px) 28px} @media(max-width:640px){ .eem-page-hero{min-height:auto} .eem-page-hero::after{background:linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.58) 100%)} } /* ---- Section head ------------------------------------------ */ .eem-shead{max-width:64ch;margin:0 auto 48px;text-align:center} .eem-shead--center{text-align:center;margin-left:auto;margin-right:auto} .eem-shead h2{margin-bottom:16px} .eem-shead .eem-lead{margin-left:auto;margin-right:auto} /* ---- Feature / benefit card grid --------------------------- */ .eem-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:20px} .eem-feature{padding:32px 30px;background:var(--eem-bg);border:1px solid var(--eem-line); border-radius:var(--eem-radius);transition:transform .22s ease,box-shadow .22s ease} .eem-feature:hover{transform:translateY(-4px);box-shadow:var(--eem-shadow-sm)} .eem-feature__icon{width:30px;height:30px;margin-bottom:20px;color:var(--eem-accent)} .eem-feature h3{margin-bottom:9px} .eem-feature p{font-size:var(--eem-fs-sm);margin:0;color:var(--eem-body);line-height:1.55} /* ---- Animated step flow (reveals on load; CSS-only) -------- */ .eem-flow{display:grid;gap:20px;margin-top:8px} .eem-flow--3{grid-template-columns:repeat(3,1fr)} .eem-flow__step{position:relative;padding:32px 30px 34px;background:var(--eem-bg); border:1px solid var(--eem-line);border-radius:var(--eem-radius); opacity:0;transform:translateY(16px) scale(.99); animation:eemReveal .7s cubic-bezier(.2,.7,.2,1) forwards} .eem-flow__step:nth-child(1){animation-delay:.05s} .eem-flow__step:nth-child(2){animation-delay:.20s} .eem-flow__step:nth-child(3){animation-delay:.35s} .eem-flow__step:nth-child(4){animation-delay:.50s} .eem-flow__step:nth-child(5){animation-delay:.65s} .eem-flow__step:nth-child(6){animation-delay:.80s} .eem-flow__step:nth-child(7){animation-delay:.95s} .eem-flow__icon{display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;border-radius:13px;background:var(--eem-accent-soft); color:var(--eem-accent);margin-bottom:20px} .eem-flow__icon svg{width:24px;height:24px} .eem-flow__num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; border-radius:50%;background:var(--eem-accent-soft);color:var(--eem-accent); font:600 var(--eem-fs-body)/1 var(--eem-font-head);margin-bottom:20px} .eem-flow__step h3{margin-bottom:9px} .eem-flow__step p{font-size:var(--eem-fs-sm);margin:0;color:var(--eem-body);line-height:1.55} @keyframes eemReveal{to{opacity:1;transform:translateY(0) scale(1)}} @media(max-width:760px){.eem-flow--3{grid-template-columns:1fr}} /* ---- Trusted / logo row ------------------------------------ */ .eem-trusted{text-align:center} .eem-trusted p{color:var(--eem-muted);font-size:var(--eem-fs-body);font-weight:500;margin:0 0 30px} .eem-trusted__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px 54px} .eem-trusted__row img{height:140px;width:auto;max-width:155px;object-fit:contain;opacity:.55;filter:grayscale(1);mix-blend-mode:multiply;transition:opacity .2s,filter .2s} .eem-trusted__row img:hover{opacity:1;filter:grayscale(0)} /* ---- Final CTA --------------------------------------------- */ .eem-cta{background: radial-gradient(120% 120% at 50% 0%, var(--eem-accent-soft), transparent 50%), linear-gradient(180deg,var(--eem-surface) 0%,#fff 100%)} /* horizontal banner: heading + subtext on the left, action on the right */ .eem-cta__wrap{max-width:var(--eem-max);margin:0 auto;padding:0 28px;text-align:left; display:grid;grid-template-columns:1fr auto;column-gap:clamp(32px,5vw,72px);align-items:center} .eem-cta__wrap h2{grid-column:1;grid-row:1;margin:0 0 10px} .eem-cta__wrap p{grid-column:1;grid-row:2;margin:0;max-width:58ch} .eem-cta__wrap .eem-btn{grid-column:2;grid-row:1 / span 2;align-self:center;white-space:nowrap} @media(max-width:760px){ .eem-cta__wrap{grid-template-columns:1fr;row-gap:24px} .eem-cta__wrap .eem-btn{grid-column:1;grid-row:auto;justify-self:start} } /* ---- Footer (light) ---------------------------------------- */ .eem-footer{background:var(--eem-surface);border-top:1px solid var(--eem-line);color:var(--eem-muted)} .eem-footer__wrap{max-width:var(--eem-max);margin:0 auto;padding:56px 28px 28px; display:grid;grid-template-columns:1.3fr 1fr 1.3fr;gap:32px 48px} .eem-footer img{height:64px;margin-bottom:18px;opacity:.95} .eem-footer h4{color:var(--eem-ink);font:600 var(--eem-fs-micro)/1 var(--eem-font-head);margin:0 0 14px} .eem-footer a{color:var(--eem-body);text-decoration:none;display:block;margin-bottom:9px;font-size:var(--eem-fs-sm)} .eem-footer a:hover{color:var(--eem-accent)} .eem-footer__note{font-size:var(--eem-fs-caption);color:var(--eem-muted)} .eem-footer__name{color:var(--eem-ink);font-weight:600;font-size:var(--eem-fs-sm);line-height:1.4;margin:0 0 12px} .eem-footer__addr{font-style:normal;line-height:1.55;margin:0} .eem-footer__wrap > div > h4:not(:first-child){margin-top:26px} .eem-footer__bottom{border-top:1px solid var(--eem-line);margin:30px auto 0;max-width:var(--eem-max); padding:18px 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:var(--eem-fs-micro);color:var(--eem-muted)} .eem-footer .eem-footer__legal{max-width:var(--eem-max);margin:0 auto;padding:0 28px 22px; font-size:var(--eem-fs-micro);color:var(--eem-muted);line-height:1.5;text-align:left;opacity:.85} .eem-book__consent{margin-top:14px;font-size:var(--eem-fs-caption);color:var(--eem-muted)} @media(max-width:860px){.eem-footer__wrap{grid-template-columns:1fr 1fr;gap:30px 32px}} @media(max-width:520px){.eem-footer__wrap{grid-template-columns:1fr}} /* ===================== LEGAL (legal.html) ===================== */ .eem-legal .eem-container{max-width:840px} .eem-legal h1{font-size:var(--eem-fs-h2);margin:0 0 6px} .eem-legal__updated{color:var(--eem-muted);font-size:var(--eem-fs-sm);margin:0 0 30px} .eem-legal h2{font-size:var(--eem-fs-title);margin:44px 0 14px} .eem-legal h3{font-size:var(--eem-fs-h3);margin:30px 0 10px} .eem-legal h4{font-size:var(--eem-fs-body);color:var(--eem-ink);font-weight:600;margin:20px 0 8px} .eem-legal p{color:var(--eem-body);line-height:1.65;margin:0 0 14px} .eem-legal ul{color:var(--eem-body);line-height:1.65;margin:0 0 14px;padding-left:22px} .eem-legal li{margin:0 0 6px} .eem-legal a{color:var(--eem-accent);word-break:break-word} .eem-legal__org{border-left:3px solid var(--eem-accent);padding-left:20px;margin:0 0 8px} /* ---- Generic two-column ------------------------------------ */ .eem-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center} @media(max-width:780px){.eem-two{grid-template-columns:1fr;gap:32px}} @media (prefers-reduced-motion: reduce){ .eem *, .eem *::before, .eem *::after{animation:none!important;transition:none!important} } /* ============================================================ PAGE-SPECIFIC BLOCKS (migrated from each page's