/* ──────────────────────────────────────────────────────────────────── ECOVIS JRB — site-wide CSS additions Loaded by every page from . ──────────────────────────────────────────────────────────────────── */ /* ── REVEAL-ON-SCROLL FIX ──────────────────────────────────────────── Old: .reveal {opacity:0} — invisible without JS or for reduced-motion. New: visible by default. Only hide+animate when JS active AND user hasn't requested reduced motion. The hook is added by ecovis-features.js. */ .reveal { opacity: 1 !important; transform: none !important; } .reveal-fx .reveal:not(.show) { opacity: 0 !important; transform: translateY(28px) !important; } .reveal-fx .reveal.show { opacity: 1 !important; transform: translateY(0) !important; transition: opacity .9s cubic-bezier(.25,.46,.45,.94), transform .9s cubic-bezier(.25,.46,.45,.94); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.show, .reveal-fx .reveal, .reveal-fx .reveal.show { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── FORM STATUS (success / sending / error) ──────────────────────── */ .form-status { margin-top: 14px; font-size: 14px; line-height: 1.5; font-family: var(--display, sans-serif); } .form-status.success { padding: 16px 20px; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.3); color: #15803d; border-radius: 8px; } .form-status.error { padding: 14px 18px; background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.3); color: #b91c1c; border-radius: 8px; } .form-status.sending { color: var(--c, #c6093b); } /* ── CALCULATOR EMAIL GATE ────────────────────────────────────────── */ .calc-gate { margin-top: 28px; padding: 28px; background: linear-gradient(135deg, rgba(198,9,59,0.04), rgba(198,9,59,0.10)); border: 1px solid rgba(198,9,59,0.2); border-radius: 14px; } .calc-gate-eb { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c, #c6093b); margin-bottom: 6px; font-weight: 500; } .calc-gate-title { font-family: var(--display, sans-serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--ink, #1a1a1a); } .calc-gate-sub { font-size: 14px; color: rgba(0,0,0,0.62); margin-bottom: 18px; line-height: 1.55; } .calc-gate-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .calc-gate-fields > * { font-family: inherit; } .calc-gate-fields input { width: 100%; padding: 14px 16px; border: 1px solid rgba(0,0,0,0.18); border-radius: 8px; font-size: 14px; background: #fff; font-family: inherit; } .calc-gate-fields input:focus { outline: none; border-color: var(--c, #c6093b); } .calc-gate-full { grid-column: 1 / -1; } .calc-gate button { width: 100%; padding: 14px 20px; background: var(--c, #c6093b); color: #fff; border: none; border-radius: 8px; font-family: var(--display, sans-serif); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; cursor: pointer; margin-top: 14px; transition: background .2s, transform .1s; } .calc-gate button:hover { background: var(--cd, #a40730); } .calc-gate button:active { transform: translateY(1px); } .calc-gate button:disabled { opacity: 0.6; cursor: wait; } .calc-gate-foot { margin-top: 12px; font-size: 11.5px; color: rgba(0,0,0,0.5); line-height: 1.55; } .calc-gate-success { text-align: center; padding: 28px 20px; font-size: 15px; color: #15803d; line-height: 1.6; } .calc-gate-success strong { color: var(--ink, #1a1a1a); display: block; font-size: 20px; margin-bottom: 6px; font-family: var(--display, sans-serif); } @media (max-width: 600px) { .calc-gate-fields { grid-template-columns: 1fr; } } /* ── SEARCH ICON (in nav) ─────────────────────────────────────────── */ .nav-search-trigger { background: none; border: none; cursor: pointer; color: inherit; padding: 8px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.85; transition: opacity .2s; margin-right: 6px; } .nav-search-trigger:hover { opacity: 1; } .nav-search-trigger svg { width: 18px; height: 18px; } /* ── SEARCH OVERLAY ───────────────────────────────────────────────── */ #ecovis-search-overlay { position: fixed; inset: 0; background: rgba(15, 8, 12, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 0; animation: fadeIn .2s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .ecovis-search-box { background: #fff; width: 100%; max-width: 620px; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.4); overflow: hidden; position: relative; } #ecovis-search-input { width: 100%; padding: 22px 56px 22px 28px; border: none; font-size: 17px; font-family: var(--display, sans-serif); background: transparent; outline: none; border-bottom: 1px solid rgba(0,0,0,0.08); color: var(--ink, #1a1a1a); } #ecovis-search-input::placeholder { color: rgba(0,0,0,0.4); } /* Hide browser's built-in search clear button (Webkit + Edge) */ #ecovis-search-input::-webkit-search-cancel-button, #ecovis-search-input::-webkit-search-decoration, #ecovis-search-input::-ms-clear { -webkit-appearance: none; display: none; } #ecovis-search-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border: none; background: rgba(0,0,0,0.05); border-radius: 50%; cursor: pointer; color: rgba(0,0,0,0.6); font-size: 14px; } #ecovis-search-close:hover { background: rgba(0,0,0,0.1); } #ecovis-search-results { list-style: none; margin: 0; padding: 8px 0; max-height: 50vh; overflow-y: auto; } #ecovis-search-results li a { display: block; padding: 14px 28px; text-decoration: none; color: var(--ink, #1a1a1a); border-left: 3px solid transparent; transition: background .15s, border-color .15s; } #ecovis-search-results li a:hover { background: rgba(198,9,59,0.05); border-left-color: var(--c, #c6093b); } #ecovis-search-results li a .t { font-family: var(--display, sans-serif); font-weight: 600; font-size: 15px; margin-bottom: 3px; } #ecovis-search-results li a .d { font-size: 13px; color: rgba(0,0,0,0.55); line-height: 1.45; } .ecovis-search-empty { padding: 22px 28px; font-size: 14px; color: rgba(0,0,0,0.5); text-align: center; } .ecovis-search-hint { padding: 10px 28px 14px; font-size: 11px; color: rgba(0,0,0,0.45); border-top: 1px solid rgba(0,0,0,0.05); letter-spacing: 0.02em; } .ecovis-search-hint kbd { font-family: var(--mono, monospace); background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 4px; font-size: 10.5px; } /* ── HERO VARIANT — for non-home pages ───────────────────────────── Inner pages use .page-hero-mosaic with .ph-tile pht1..pht8. Homepage uses .hero-mosaic with .tile t1..t18 — left alone. */ body[data-hero="quiet"] .hero-mosaic .tile { display: none; } body[data-hero="quiet"] .hero-mosaic .tile.t8, body[data-hero="quiet"] .hero-mosaic .tile.t13 { display: block !important; opacity: 0.55; } body[data-hero="quiet"] .hero-mosaic::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 40%, rgba(255,255,255,0.06), transparent 60%); pointer-events: none; } body[data-hero="quiet"] .hero-mosaic { opacity: 0.7; } /* Inner pages (.page-hero-mosaic): hide most tiles, keep 2-3 as accent */ body[data-hero="quiet"] .page-hero-mosaic { opacity: 0.5; } body[data-hero="quiet"] .page-hero-mosaic .ph-tile { display: none; } body[data-hero="quiet"] .page-hero-mosaic .ph-tile.pht3, body[data-hero="quiet"] .page-hero-mosaic .ph-tile.pht7 { display: block !important; } body[data-hero="quiet"] .page-hero-mosaic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.15)); pointer-events: none; } /* ── FOOT-HOURS — small typographic accent for the working-hours line ── */ .foot-hours { display: inline-block; margin-top: 4px; font-family: var(--mono, monospace); font-size: 11.5px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.08); } /* ── COOKIE BANNER — mobile polish ──────────────────────────────── @media (max-width: 760px) { .cookie-banner { bottom: 92px !important; left: 10px !important; right: 10px !important; padding: 16px 18px !important; } .cookie-banner-t { font-size: 14px !important; } .cookie-banner-p { font-size: 12.5px !important; line-height: 1.5 !important; } .cookie-banner-actions { gap: 8px !important; } .cookie-btn { font-size: 12px !important; padding: 9px 14px !important; } } /* When CTA bar isn't shown (i.e. >760px but still narrow), normal mobile bottom */ @media (max-width: 540px) and (min-width: 761px) { .cookie-banner { bottom: 16px !important; } } /* ───────────────────────────────────────────────────────────────── HOVER MICRO-INTERACTIONS Small, deliberate hover responses on key interactive elements. Premium-feel touch — cards lift slightly, arrows nudge forward. ───────────────────────────────────────────────────────────────── */ /* Service feature cells */ .feat-cell { transition: transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s cubic-bezier(.25,.46,.45,.94), background-color .35s cubic-bezier(.25,.46,.45,.94) !important; } .feat-cell:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -12px rgba(15, 15, 18, 0.12); z-index: 2; position: relative; } .feat-cell .feat-arr { display: inline-block; transition: transform .3s cubic-bezier(.25,.46,.45,.94); } .feat-cell:hover .feat-arr { transform: translateX(6px); } /* Insights cards (3-col grid + homepage 3-card row) */ .card-3, .ins-card { transition: transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s cubic-bezier(.25,.46,.45,.94), background-color .35s cubic-bezier(.25,.46,.45,.94) !important; will-change: transform; } .card-3:hover, .ins-card:hover { transform: translateY(-3px); box-shadow: 0 18px 48px -16px rgba(15, 15, 18, 0.15); z-index: 2; position: relative; } /* Buttons: arrow nudge */ .btn-primary .arr, .btn-ghost .arr, .nav-talk span:last-child, .feat-cell .feat-arr, .ins-link span:last-child { display: inline-block; transition: transform .3s cubic-bezier(.25,.46,.45,.94); } .btn-primary:hover .arr, .btn-ghost:hover .arr { transform: translateX(4px); } .nav-talk:hover span:last-child { transform: translateX(3px); } .ins-card:hover .ins-link span:last-child { transform: translateX(5px); } /* Office cards (contact page) */ .office-card { transition: transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s cubic-bezier(.25,.46,.45,.94), border-color .35s cubic-bezier(.25,.46,.45,.94); } .office-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -10px rgba(15, 15, 18, 0.1); } /* Article related-cards: subtle lift + arrow nudge */ .art-related-card { transition: transform .35s cubic-bezier(.25,.46,.45,.94), background .35s cubic-bezier(.25,.46,.45,.94) !important; } .art-related-card:hover { transform: translateY(-2px); } .art-related-card .art-related-link span:last-child { display: inline-block; transition: transform .3s cubic-bezier(.25,.46,.45,.94); } .art-related-card:hover .art-related-link span:last-child { transform: translateX(5px); } /* Reduce all motion if user prefers it */ @media (prefers-reduced-motion: reduce) { .feat-cell, .card-3, .ins-card, .office-card, .art-related-card, .feat-cell .feat-arr, .btn-primary .arr, .btn-ghost .arr, .nav-talk span:last-child, .ins-link span:last-child, .art-related-card .art-related-link span:last-child { transition: none !important; transform: none !important; } } /* ───────────────────────────────────────────────────────────────── ANIMATED STAT COUNTER Used on the homepage "Ranked 14th globally" line. The number counts up from 0 → target when scrolled into view. ───────────────────────────────────────────────────────────────── */ .stat-counter { font-variant-numeric: tabular-nums; display: inline-block; min-width: 1.6ch; text-align: right; } /* ───────────────────────────────────────────────────────────────── EDITORIAL PULL-QUOTE For deliberate visual moments inside content sections. Use sparingly — one per page, as a meaningful editorial break. ───────────────────────────────────────────────────────────────── */ .pull-quote { max-width: 860px; margin: 88px auto 24px; padding: 40px 32px 36px 84px; position: relative; border-left: 3px solid var(--c, #C6093B); } .pull-quote-mark { position: absolute; top: 0; left: 24px; font-family: 'Georgia', 'Times New Roman', serif; font-size: 120px; font-weight: 400; line-height: 1; color: var(--c, #C6093B); opacity: 0.18; user-select: none; } .pull-quote blockquote { font-family: var(--display, system-ui), serif; font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.32; letter-spacing: -0.018em; color: var(--ink, #0B0B0E); margin: 0; padding: 0; } .pull-quote blockquote em { font-style: italic; font-weight: 300; color: var(--c, #C6093B); } .pull-quote-attr { font-family: var(--mono, ui-monospace), monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tm, #5C5C66); margin-top: 28px; } .pull-quote-attr span { color: var(--ink, #0B0B0E); font-weight: 500; } @media (max-width: 720px) { .pull-quote { margin: 56px auto 16px; padding: 28px 20px 28px 56px; } .pull-quote-mark { font-size: 80px; left: 14px; } } /* ───────────────────────────────────────────────────────────────── E-INVOICING QUIZ — EMAIL GATE Sits between the tier/score (always visible) and the detailed action plan (revealed after email is submitted). ───────────────────────────────────────────────────────────────── */ .quiz-gate { margin-top: 28px; padding: 28px 28px 24px; border: 1px solid var(--bo, rgba(15,15,18,0.08)); border-left: 3px solid var(--c, #C6093B); background: var(--paper-3, #FBF8F2); border-radius: 6px; } .quiz-gate-eb { font-family: var(--mono, monospace); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c, #C6093B); margin-bottom: 10px; } .quiz-gate-h { font-family: var(--display, system-ui), sans-serif; font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 12px; color: var(--ink, #0B0B0E); } .quiz-gate-h em { font-style: italic; font-weight: 300; color: var(--c, #C6093B); } .quiz-gate-p { font-size: 15px; color: var(--tm, #5C5C66); line-height: 1.6; margin-bottom: 20px; max-width: 60ch; } .quiz-gate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } @media (max-width: 600px) { .quiz-gate-grid { grid-template-columns: 1fr; } } .quiz-gate-field { display: flex; flex-direction: column; gap: 6px; } .quiz-gate-field label { font-family: var(--mono, monospace); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tm, #5C5C66); } .quiz-gate-field input { padding: 11px 14px; background: #fff; border: 1px solid var(--bo, rgba(15,15,18,0.08)); border-radius: 6px; font-family: var(--display, system-ui), sans-serif; font-size: 15px; color: var(--ink, #0B0B0E); outline: none; transition: border-color .2s; } .quiz-gate-field input:focus { border-color: var(--c, #C6093B); } .quiz-gate-submit { margin-top: 6px; padding: 12px 24px; background: var(--c, #C6093B); color: #fff; border: 1px solid var(--c, #C6093B); border-radius: 100px; font-family: var(--display, system-ui), sans-serif; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; transition: all .25s; display: inline-flex; align-items: center; gap: 10px; } .quiz-gate-submit:hover:not(:disabled) { background: var(--cd, #A4072F); transform: translateY(-1px); } .quiz-gate-submit:disabled { opacity: 0.65; cursor: wait; } .quiz-gate-status { margin-top: 10px; font-size: 13px; color: var(--c, #C6093B); min-height: 1.4em; } .quiz-gate-fine { margin-top: 14px; font-size: 11.5px; color: var(--tu, #9A9A9E); line-height: 1.5; max-width: 56ch; } /* ───────────────────────────────────────────────────────────────── EDITORIAL SERIF Fraunces is loaded as a paired display serif (italic only). Used SPARINGLY — italic accent words in big headlines (the pattern of "Global expertise. Local faces." across the site) and the pull-quote. Nowhere else. The contrast between Geist (sans) and Fraunces (serif italic) is the signature. ───────────────────────────────────────────────────────────────── */ .hero h1 .accent, .hero h1 em, .page-hero h1 em, .page-hero h2 em, .art-hero h1 em, .cta-final h2 em, section h2 em, .tool-h em, .pull-quote blockquote em, .foot-nl-t em, .quiz-gate-h em { font-family: var(--accent), Georgia, serif; font-style: italic; font-weight: 350; letter-spacing: -0.02em; /* Fraunces font-feature-settings: enable optional swashy details */ font-variation-settings: "opsz" 96, "SOFT" 50; } /* Slight optical adjustment on red italics (pull-quote, brand colour) — serifs in red can feel heavier than sans in red, so dial weight down. */ .pull-quote blockquote em { font-weight: 350; font-variation-settings: "opsz" 96, "SOFT" 30; } /* Don't apply to small italics in body copy (they'd look fussy at 16px) */ p em, li em, .foot-tag em, .card-3 p em { font-family: inherit !important; font-style: italic; font-weight: inherit; }