/* ========================================================================== PORTFOLIO — Matthieu Thuillier Editorial · Refined · Apple-style nav · Poppins ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } /* ── Kill the cheap default tap-highlight on mobile (especially Android's blue square) ─ Applied globally to interactive elements. We use a subtle :active state instead. */ a, button, .post-row, .tag-chip, .filter-btn, .tag-card, .tag-cloud__tag, .btn, .nav__link, .mega-nav__item, .mega-cat, .mega-contact, [role="button"], input[type="submit"], input[type="button"], label { -webkit-tap-highlight-color: transparent; } :root { /* ─── DIRECTION B — Bibliothèque Sciences Po ────────── Navy + cream + bordeaux + ocre. Sérieux érudit chaleureux. Navy = autorité (primaire). Bordeaux = moments humains. Ocre = surlignages subtils. */ --bg: #fdfaf4; --bg-elevated: #f7f0e0; --ink: #1d1f2a; --ink-2: #2a2d3a; --ink-soft: #5a5f70; --ink-mute: #8a8f9a; --line: #e3dcc8; --line-soft: #efe8d4; --accent: #1a2a4f; --accent-soft: #e0d9c2; --accent-warm: #983c4a; --accent-warm-soft: #f5e3e5; --accent-ocher: #a98a4d; --warm: #f1e9d5; --warm-2: #ebe2c8; /* ─── TYPOGRAPHY ──────────────────────────────────── */ --serif: 'Instrument Serif', 'Times New Roman', serif; --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* Fluid typography scale (320px → 1440px viewport) Uses clamp(min, fluid, max) for organic scaling at all sizes. */ --fs-xs: clamp(0.72rem, 0.68rem + 0.18vw, 0.81rem); --fs-sm: clamp(0.83rem, 0.79rem + 0.22vw, 0.94rem); --fs-base: clamp(0.95rem, 0.91rem + 0.22vw, 1.06rem); --fs-md: clamp(1.05rem, 0.97rem + 0.42vw, 1.3rem); --fs-lg: clamp(1.25rem, 1.10rem + 0.75vw, 1.625rem); --fs-xl: clamp(1.5rem, 1.22rem + 1.40vw, 2.25rem); --fs-2xl: clamp(1.875rem, 1.36rem + 2.55vw, 3.25rem); --fs-3xl: clamp(2.5rem, 1.68rem + 4.10vw, 4.6rem); --fs-display: clamp(3rem, 1.5rem + 7.5vw, 7rem); /* ─── LAYOUT ──────────────────────────────────────── */ --radius: 14px; --radius-sm: 8px; --radius-lg: 28px; --container: 1280px; --container-narrow: 920px; /* ─── MOTION ──────────────────────────────────────── */ --ease: cubic-bezier(.32, .72, 0, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); --nav-h: 60px; /* ─── COLOR-SCHEME hint to browser ────────────────── */ color-scheme: light; } /* ─── DARK MODE TOKENS ───────────────────────────────── Activated by [data-theme="dark"] on . Inverted with care: navy stays as accent (looks great on dark), ink/bg flip, surfaces stay slightly warm. */ :root[data-theme="dark"] { --bg: #0d0e10; --bg-elevated: #15171b; --ink: #f5f5f4; --ink-2: #e5e5e2; --ink-soft: #a0a0a0; --ink-mute: #6b6b6b; --line: #25272c; --line-soft: #1a1c20; --accent: #4f6fc7; /* navy slightly brighter for dark backgrounds */ --accent-soft: #1c2540; --warm: #16181c; --warm-2: #1d1f23; color-scheme: dark; } /* ── Dark mode overrides for "inverted" elements ───── Some elements (CTAs, leadership block, popups, badges with ink bg) were designed to be dark in light mode. In dark mode, they should stay dark — using the navy accent or accent-soft instead of the --ink token (which now flips to light). */ :root[data-theme="dark"] .nav__cta { background: var(--accent); color: #f5f5f4; } :root[data-theme="dark"] .nav__cta:hover { background: #6a85d4; color: #fff; } :root[data-theme="dark"] .btn--ink { background: var(--accent); color: #f5f5f4; } :root[data-theme="dark"] .btn--outline:hover { background: var(--accent); color: #f5f5f4; } :root[data-theme="dark"] .filter-btn.active { background: var(--accent); color: #f5f5f4; border-color: var(--accent); } :root[data-theme="dark"] .leaflet-popup-content-wrapper { background: var(--bg-elevated) !important; color: var(--ink) !important; } :root[data-theme="dark"] .leaflet-popup-tip { background: var(--bg-elevated) !important; } :root[data-theme="dark"] .leaflet-popup-content strong { color: var(--ink) !important; } /* Smooth theme transition on the body and elements that change */ html { transition: color-scheme 0.3s ease; } body, .nav, .footer, .pillar, .post-row, .exp-row, .section--warm, .filter-btn, .article-body, .card, .skill-cell__bar, .skill-cell__years { transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } /* ── Typography ── */ .serif { font-family: var(--serif); font-style: italic; font-weight: 400; } .kicker { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; } .kicker--accent { color: var(--accent); } h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); } h1 { font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; } h2 { font-size: var(--fs-2xl); letter-spacing: -0.025em; font-weight: 600; line-height: 1.05; } h3 { font-size: var(--fs-lg); letter-spacing: -0.015em; font-weight: 500; line-height: 1.15; } h4 { font-size: var(--fs-base); font-weight: 600; } p { color: var(--ink-2); font-size: var(--fs-base); } .lead { font-size: var(--fs-md); line-height: 1.5; color: var(--ink-soft); max-width: 38ch; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .container--narrow { max-width: var(--container-narrow); } .section { padding: 110px 0; } .section--small { padding: 70px 0; } .section--warm { background: var(--warm); } /* ── NAV (Apple-style, sticky, blurred) ── */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100; background: rgba(255, 255, 255, 0.78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } /* When mega-menu is open, the nav must stay on top so the close button (X) remains visible and reachable. Backdrop becomes transparent to blend with menu bg. */ body.mega-menu-open .nav { z-index: 300; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } :root[data-theme="dark"] body.mega-menu-open .nav { background: transparent; } :root[data-theme="dark"] .nav { background: rgba(13, 14, 16, 0.78); } .nav--scrolled { border-bottom-color: var(--line); } .nav__inner { max-width: var(--container); margin: 0 auto; height: 100%; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; } .nav__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 400; white-space: nowrap; } .nav__brand:hover { opacity: 0.85; } .brand__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .brand__name { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink); } .brand__tagline { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-mute); font-weight: 400; } @media (max-width: 640px) { .brand__dot { width: 6px; height: 6px; } .brand__name { font-size: 13px; letter-spacing: 0.22em; } .brand__tagline { display: none; } } /* ── DIRECT NAV LINKS — hybrid approach: 3-4 main destinations visible on desktop alongside the Menu button, hidden on mobile in favor of overlay menu */ .nav__direct { display: flex; align-items: center; gap: 2px; margin-left: auto; margin-right: 20px; /* Prevent any wrapping or shrinking of the nav as a whole */ flex-shrink: 0; flex-wrap: nowrap; } .nav__direct-link { display: inline-flex; align-items: center; padding: 10px 14px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink-soft); text-decoration: none; letter-spacing: -0.005em; border-radius: 6px; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; position: relative; -webkit-tap-highlight-color: transparent; white-space: nowrap; /* Critical: prevent individual links from being shrunk by flex layout. Without this, the browser can squeeze "Ressources" to 0px when space is tight. */ flex-shrink: 0; } @media (hover: hover) and (pointer: fine) { .nav__direct-link:hover { color: var(--accent); background: rgba(26, 42, 79, 0.04); } } /* Active page indicator — subtle dot */ .nav__direct-link.is-active, .nav__direct-link[aria-current="page"] { color: var(--accent); font-weight: 600; } .nav__direct-link.is-active::after, .nav__direct-link[aria-current="page"]::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent-warm); } /* Contact CTA — distinct as a soft pill */ .nav__direct-link--cta { background: var(--accent-warm); color: #fdfaf4; margin-left: 6px; padding-left: 18px; padding-right: 18px; } @media (hover: hover) and (pointer: fine) { .nav__direct-link--cta:hover { background: #832e3a; color: #fdfaf4; transform: translateY(-1px); } } /* Hide direct links on smaller viewports — only Menu button remains. Threshold raised to 1180px to give a safety margin: at 1100px the links were technically visible but visually crammed, sometimes appearing to "disappear" depending on browser scrollbar width and font rendering. */ @media (max-width: 1180px) { .nav__direct { display: none; } } /* Dark theme adaptations */ :root[data-theme="dark"] .nav__direct-link { color: rgba(255, 255, 255, 0.7); } :root[data-theme="dark"] .nav__direct-link:hover { color: var(--accent-warm); background: rgba(255, 255, 255, 0.05); } :root[data-theme="dark"] .nav__direct-link.is-active { color: var(--accent-warm); } /* Right-side controls cluster (theme toggle + Menu trigger) */ .nav__controls { display: flex; align-items: center; gap: 14px; } /* ── Menu trigger button ───────────────────────────────── Always visible — the only entry point to the navigation. */ .menu-trigger { display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-family: var(--sans); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); letter-spacing: 0.01em; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.2s var(--ease); } .menu-trigger:hover { border-color: var(--ink); transform: translateY(-1px); } .menu-trigger__label { line-height: 1; } .menu-trigger__icon { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--ink); gap: 4px; transition: background 0.25s var(--ease); } .menu-trigger__icon span { display: block; width: 10px; height: 1.5px; background: var(--bg); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } :root[data-theme="dark"] .menu-trigger__icon { background: var(--accent); } .menu-trigger[aria-expanded="true"] .menu-trigger__icon span:first-child { transform: translateY(2.75px) rotate(45deg); } .menu-trigger[aria-expanded="true"] .menu-trigger__icon span:last-child { transform: translateY(-2.75px) rotate(-45deg); } @media (max-width: 480px) { .menu-trigger { padding: 6px 6px 6px 12px; } .menu-trigger__label { font-size: 13px; } } /* ── Mega-menu overlay ────────────────────────────────── Full-screen on desktop & mobile, with backdrop blur, panel slide-in. */ .mega-menu { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; } .mega-menu.is-open { visibility: visible; pointer-events: auto; } .mega-menu__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.4); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); opacity: 0; transition: opacity 0.5s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1)); } :root[data-theme="dark"] .mega-menu__backdrop { background: rgba(0, 0, 0, 0.55); } .mega-menu.is-open .mega-menu__backdrop { opacity: 1; } .mega-menu__panel { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; transform: translateY(-100%); transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; overscroll-behavior: contain; } .mega-menu.is-open .mega-menu__panel { transform: translateY(0); } /* On desktop, the panel can be slightly inset for a more "card" feel */ @media (min-width: 980px) { .mega-menu__panel { inset: 8px 8px auto 8px; bottom: 8px; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.25); } } .mega-menu__inner { flex: 1; display: grid; grid-template-columns: 1fr; gap: 48px; padding: 96px 32px 48px; max-width: 1280px; width: 100%; margin: 0 auto; } @media (min-width: 720px) { .mega-menu__inner { grid-template-columns: 1.6fr 1fr 0.9fr; gap: 64px; padding: 120px 48px 64px; } } @media (min-width: 1100px) { .mega-menu__inner { gap: 96px; padding: 132px 64px 64px; } } .mega-menu__col { display: flex; flex-direction: column; gap: 18px; /* Stagger animation per column */ opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth); } .mega-menu.is-open .mega-menu__col { opacity: 1; transform: translateY(0); } .mega-menu.is-open .mega-menu__col:nth-child(1) { transition-delay: 0.15s; } .mega-menu.is-open .mega-menu__col:nth-child(2) { transition-delay: 0.22s; } .mega-menu.is-open .mega-menu__col:nth-child(3) { transition-delay: 0.29s; } .mega-menu__kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin-bottom: 8px; } .mega-menu__kicker--small { font-size: 10px; margin-bottom: 6px; } /* ── Main mega navigation (column 1) ──────────────────── */ .mega-nav { display: flex; flex-direction: column; gap: 4px; } .mega-nav__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 15px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color 0.3s var(--ease), padding 0.3s var(--ease); position: relative; } .mega-nav__item:last-child { border-bottom: none; } .mega-nav__item::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--accent); transform: translateY(-50%); transition: width 0.4s var(--ease-smooth); } .mega-nav__item:hover { padding-left: 16px; border-color: var(--accent); } .mega-nav__item:hover::before { width: 8px; } .mega-nav__item.is-active { padding-left: 16px; } .mega-nav__item.is-active::before { width: 8px; background: var(--accent); } .mega-nav__item.is-active .mega-nav__title { color: var(--accent); } .mega-nav__num { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.08em; align-self: start; padding-top: 8px; font-weight: 500; } .mega-nav__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mega-nav__title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; color: var(--ink); transition: color 0.3s var(--ease); } .mega-nav__desc { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.5; letter-spacing: -0.005em; } .mega-nav__arrow { font-size: 20px; color: var(--ink-mute); align-self: center; transition: transform 0.3s var(--ease), color 0.3s var(--ease); flex-shrink: 0; } .mega-nav__item:hover .mega-nav__arrow { transform: translateX(6px); color: var(--accent); } /* ── Categories column (col 2) ────────────────────────── */ .mega-cats { display: flex; flex-direction: column; gap: 0; } .mega-cat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); transition: padding 0.3s var(--ease); } .mega-cat:last-child { border-bottom: none; } .mega-cat:hover { padding-left: 12px; } .mega-cat__bullet { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); flex-shrink: 0; } .mega-cat__bullet--mute { background: var(--ink-mute); } .mega-cat__name { font-size: var(--fs-md); font-weight: 500; letter-spacing: -0.01em; } .mega-cat__count { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.04em; } /* ── Side column (col 3) ──────────────────────────────── */ .mega-menu__col--side { border-top: 1px solid var(--line); padding-top: 24px; } @media (min-width: 720px) { .mega-menu__col--side { border-top: none; padding-top: 0; border-left: 1px solid var(--line); padding-left: 32px; } } .mega-contact { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); transition: color 0.25s var(--ease); } .mega-contact:last-of-type { border-bottom: none; } .mega-contact:hover { color: var(--accent); } .mega-contact__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; } .mega-contact__value { font-size: var(--fs-sm); word-break: break-word; font-weight: 500; letter-spacing: -0.005em; } .mega-menu__lang { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; } /* ── Footer of mega-menu ─────────────────────────────── */ .mega-menu__footer { display: flex; justify-content: space-between; align-items: center; padding: 24px 32px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } @media (min-width: 720px) { .mega-menu__footer { padding: 24px 48px; } } .mega-menu__sig { font-style: normal; } .mega-menu__hint { display: none; } @media (min-width: 720px) and (hover: hover) { .mega-menu__hint { display: inline; } } /* Lock body scroll while menu is open */ body.mega-menu-open { overflow: hidden; } .nav__cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--ink); color: #fff; border-radius: 999px; font-size: 13px; font-weight: 500; transition: transform 0.2s var(--ease), background 0.2s var(--ease); } .nav__cta:hover { background: var(--accent); transform: translateY(-1px); } .lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-mute); letter-spacing: 0.04em; } .lang-switch a { color: var(--ink-mute); padding: 4px 6px; transition: color 0.2s; } .lang-switch a.active { color: var(--ink); } .lang-switch a:hover { color: var(--accent); } .lang-switch__sep { color: var(--ink-mute); } /* ─── Theme toggle button ────────────────────────────── Sun/moon icon, animated transition between states. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: transparent; border: 1px solid var(--line); cursor: pointer; color: var(--ink-soft); transition: all 0.25s var(--ease); flex-shrink: 0; position: relative; overflow: hidden; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink-soft); transform: scale(1.05); } .theme-toggle__icon { display: block; width: 14px; height: 14px; position: absolute; inset: 0; margin: auto; transition: opacity 0.2s var(--ease), transform 0.3s var(--ease-back); } .theme-toggle__icon--sun { opacity: 1; transform: rotate(0) scale(1); } .theme-toggle__icon--moon { opacity: 0; transform: rotate(-30deg) scale(0.5); } :root[data-theme="dark"] .theme-toggle__icon--sun { opacity: 0; transform: rotate(30deg) scale(0.5); } :root[data-theme="dark"] .theme-toggle__icon--moon { opacity: 1; transform: rotate(0) scale(1); } /* ── HAMBURGER (improved, animated) ── */ /* ── MOBILE MENU (full-screen overlay) ── */ /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: all 0.25s var(--ease); cursor: pointer; border: 1px solid transparent; } .btn--ink { background: var(--ink); color: #fff; } .btn--ink:hover { background: var(--accent); transform: translateY(-2px); } .btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--outline:hover { background: var(--ink); color: #fff; } .btn svg { width: 14px; height: 14px; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* ── HERO ── */ .hero { padding: calc(var(--nav-h) + 80px) 0 80px; position: relative; overflow: hidden; } /* .hero::before — see line ~2095 for the active background pattern (ellipse mask top-right) */ .hero__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 48px; position: relative; z-index: 1; } .hero__main { width: 100%; } .hero__title { font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.04em; line-height: 0.96; color: var(--ink); } .hero__title .serif { color: var(--accent); } .hero__meta { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-soft); letter-spacing: 0.02em; } .hero__meta strong { color: var(--ink); font-weight: 500; } .hero__aside { width: 100%; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-soft); background: var(--warm); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; padding: 24px 28px; display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 760px) { .hero__aside { grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 28px 32px; } .hero__aside p { margin: 0; padding-right: 8px; border-right: 1px solid var(--line); } .hero__aside p:last-child { border-right: none; padding-right: 0; } } .hero__aside p { margin: 0; } .hero__aside strong { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } /* ─── Hero EDITORIAL variant ────────────────────────── More magazine-feel: dateline, sub-headline, slash separators, clear "before / today" rhythm in the aside. */ .hero--editorial .hero__main { display: flex; flex-direction: column; } .hero__dateline { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 28px; } .hero__dateline-bar { display: inline-block; width: 36px; height: 1px; background: var(--accent); } .hero--editorial .hero__title { font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.045em; line-height: 0.95; } .hero__sub { font-size: var(--fs-md); line-height: 1.45; color: var(--ink-soft); margin-top: 28px; max-width: 30ch; font-weight: 400; } .hero--editorial .hero__meta { margin-top: 36px; padding-top: 20px; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); gap: 10px 14px; } .hero--editorial .hero__meta strong { color: var(--ink); font-weight: 500; } .hero__meta-sep { color: var(--line); font-weight: 300; } .hero--editorial .hero__aside { border-left: 1px solid var(--line); padding-left: 24px; font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-soft); } .hero--editorial .hero__aside p { font-size: var(--fs-sm); color: var(--ink-soft); } .hero--editorial .hero__aside p + p { margin-top: 18px; } .hero--editorial .hero__aside strong { color: var(--ink); font-weight: 500; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; } @media (max-width: 720px) { .hero--editorial .hero__aside { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 28px; margin-top: 16px; } } /* ── About / Section header ── */ .section-header { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 60px; align-items: end; } @media (min-width: 720px) { .section-header { grid-template-columns: 1.2fr 1fr; gap: 64px; } } .section-header__title { font-size: clamp(2rem, 4.5vw, 3.5rem); letter-spacing: -0.025em; } .section-header__title .serif { color: var(--accent); } .section-header__intro { color: var(--ink-soft); max-width: 38ch; font-size: 1rem; } /* ── Project / Experience cards ── */ .experience { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); } .exp-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 28px 0; border-bottom: 1px solid var(--line); position: relative; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .exp-row::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--accent); transform: translateY(-50%); transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); z-index: 0; pointer-events: none; } .exp-row::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: var(--ink); transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 720px) { .exp-row { grid-template-columns: 100px 1fr 1fr 0.6fr; gap: 24px; align-items: baseline; } } .exp-row > * { position: relative; z-index: 1; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease; } .exp-row:hover { transform: none; } .exp-row:hover::after { width: 100%; } .exp-row:hover .exp-year { color: var(--accent); transform: translateX(4px); } .exp-row:hover .exp-role { transform: translateX(4px); } .exp-row:hover .exp-tag { color: var(--ink); } .exp-year { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-mute); letter-spacing: 0.05em; transition: color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .exp-role { font-size: var(--fs-md); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .exp-company { font-size: var(--fs-sm); color: var(--ink-soft); } /* exp-tag: subtle inline annotation (not a button). Mono font, no background, navy bullet prefix, right-aligned. */ .exp-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-mute); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 400; width: fit-content; transition: color 0.3s ease; } .exp-tag::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 999px; background: var(--accent); flex-shrink: 0; opacity: 0.6; transition: opacity 0.3s ease, transform 0.3s ease; } .exp-row:hover .exp-tag::before { opacity: 1; transform: scale(1.4); } /* ── Stats ── */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-top: 60px; } @media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat { background: var(--bg); padding: 36px 24px; display: flex; flex-direction: column; gap: 8px; transition: background 0.3s var(--ease); } .stat:hover { background: var(--warm); } .stat__num { font-family: var(--serif); font-style: italic; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 400; color: var(--accent); line-height: 1; } .stat__label { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.04em; text-transform: uppercase; } /* ── Expertise grid ── */ .expertise-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 40px; } @media (min-width: 720px) { .expertise-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .expertise-grid { grid-template-columns: repeat(3, 1fr); } } .expertise-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: all 0.3s var(--ease); background: var(--bg); position: relative; } .expertise-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.1); } .expertise-card__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); border-radius: 10px; margin-bottom: 16px; color: var(--accent); } .expertise-card__icon svg { width: 18px; height: 18px; stroke-width: 1.6; } .expertise-card h3 { margin-bottom: 8px; } .expertise-card p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; } .expertise-card ul { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; padding-left: 0; list-style: none; } .expertise-card ul li { font-size: 0.85rem; color: var(--ink-2); padding-left: 0; position: relative; } /* Bullets removed — items align flush left for cleaner card layout */ /* ── Five Dysfunctions Pyramid ── */ .dysfunctions { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; margin-top: 40px; } @media (min-width: 980px) { .dysfunctions { grid-template-columns: 1fr 1fr; gap: 64px; } } .dysfunctions__intro p { color: var(--ink-2); font-size: 1.05rem; margin-bottom: 16px; line-height: 1.65; } .dysfunctions__intro cite { display: block; margin-top: 24px; font-style: normal; font-size: 13px; color: var(--ink-mute); letter-spacing: 0.02em; } .pyramid { display: flex; flex-direction: column-reverse; gap: 4px; width: 100%; max-width: 520px; margin: 0 auto; } .pyramid__layer { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: var(--radius-sm); background: var(--warm); border: 1px solid var(--line); transition: all 0.3s var(--ease); cursor: default; } .pyramid__layer:hover { transform: translateX(6px); border-color: var(--accent); background: var(--accent-soft); } .pyramid__layer:nth-child(1) { width: 50%; align-self: center; } .pyramid__layer:nth-child(2) { width: 65%; align-self: center; } .pyramid__layer:nth-child(3) { width: 80%; align-self: center; } .pyramid__layer:nth-child(4) { width: 92%; align-self: center; } .pyramid__layer:nth-child(5) { width: 100%; } .pyramid__num { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--accent); line-height: 1; flex-shrink: 0; } .pyramid__text { font-size: 0.88rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; } .pyramid__sub { font-size: 0.72rem; color: var(--ink-soft); font-weight: 400; display: block; margin-top: 2px; } /* ── Leadership block (Steve Jobs quote) ── This block keeps its dark background in both themes — it's an intentional inverted/poster section, like a magazine pull-out. */ .leadership { background: #0a0a0a; color: #fff; border-radius: var(--radius-lg); padding: 80px 32px; margin-top: 60px; position: relative; overflow: hidden; } .leadership::before { content: '"'; position: absolute; top: -40px; right: 24px; font-family: var(--serif); font-size: 22rem; line-height: 1; color: rgba(30, 58, 138, 0.15); pointer-events: none; } .leadership__inner { max-width: 720px; margin: 0 auto; text-align: center; position: relative; } .leadership__quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.35; color: #fff; font-weight: 400; } .leadership__author { margin-top: 32px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #c9a14a; font-weight: 500; } .leadership__principles { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 64px; padding-top: 48px; border-top: 1px solid rgba(255,255,255,0.12); text-align: left; } @media (min-width: 720px) { .leadership__principles { grid-template-columns: repeat(3, 1fr); gap: 48px; } } .principle__num { font-family: var(--mono); font-size: 12px; color: #c9a14a; letter-spacing: 0.1em; margin-bottom: 12px; font-weight: 600; } .principle h4 { color: #fff; margin-bottom: 8px; font-size: 1.05rem; } .principle p { color: rgba(255,255,255,0.65); font-size: 0.9rem; line-height: 1.55; } /* ── BLOG ── */ .blog-hero { padding: calc(var(--nav-h) + 80px) 0 60px; border-bottom: 1px solid var(--line); } .blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .filter-btn { padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: transparent; color: var(--ink-soft); border: 1px solid var(--line); transition: all 0.25s var(--ease); letter-spacing: 0.01em; } .filter-btn:hover { color: var(--ink); border-color: var(--ink); } .filter-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); } .posts { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); } .post-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 28px 0; border-bottom: 1px solid var(--line); position: relative; transition: padding 0.45s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; text-decoration: none; isolation: isolate; -webkit-tap-highlight-color: transparent; /* kill the cheap Android blue */ } .post-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: center; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } /* .post-row::after — see line ~8134 for the active version (bordeaux underline animation) */ @media (min-width: 720px) { .post-row { grid-template-columns: 110px 100px 1fr 100px; gap: 24px; align-items: baseline; } } .post-row > * { position: relative; z-index: 1; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease; } /* Simplified hover — just the arrow moves and the title shifts color (no padding shift, no vertical bar) */ @media (hover: hover) and (pointer: fine) { .post-row:hover .post-arrow { transform: translateX(4px); color: var(--accent); } .post-row:hover .post-title { color: var(--accent); } } .post-cat { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; width: fit-content; box-sizing: border-box; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; } /* In the resources list, harmonize widths so all pills align */ .post-row .post-cat { min-width: 90px; text-align: center; } .post-row:hover .post-cat { box-shadow: 0 4px 12px -4px currentColor; } /* Category pills — Direction B palette: navy primary, bordeaux for human cats, ocher for warm cats, muted for others */ .post-cat--vente { background: var(--accent-soft); color: var(--accent); } .post-cat--management { background: var(--accent-warm-soft); color: var(--accent-warm); } .post-cat--voyage { background: #efe5d0; color: #7a6535; } .post-cat--cuisine { background: #ebeede; color: #4f5a3a; } .post-cat--sport { background: #ebe6f0; color: #4a3e6b; } .post-cat--art, .post-cat--culture { background: #e4ecee; color: #2f4d59; } .post-cat--transformation { background: #e2dde9; color: #4d3f6b; } :root[data-theme="dark"] .post-cat--vente { background: #1c2540; color: #a3b5e3; } :root[data-theme="dark"] .post-cat--management { background: #2e1c20; color: #d4a3ad; } :root[data-theme="dark"] .post-cat--voyage { background: #20242f; color: #c5b07d; } :root[data-theme="dark"] .post-cat--cuisine { background: #1f2229; color: #a3b88a; } :root[data-theme="dark"] .post-cat--sport { background: #1d1f23; color: #a094bc; } :root[data-theme="dark"] .post-cat--art, :root[data-theme="dark"] .post-cat--culture { background: #1d1f23; color: #95b8c4; } :root[data-theme="dark"] .post-cat--transformation { background: #1f1c2a; color: #b5a8d4; } .post-date { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.04em; } .post-title { font-size: 1.1rem; font-weight: 500; color: var(--ink); letter-spacing: -0.015em; line-height: 1.35; } .post-arrow { font-family: var(--mono); font-size: 14px; color: var(--ink-mute); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease; text-align: right; } .post-empty { display: none; } .post-empty.show { display: block; padding: 48px 0; text-align: center; color: var(--ink-mute); font-size: 14px; } /* ── ARTICLE ── */ .article-hero { padding: calc(var(--nav-h) + 80px) 0 40px; } .article-hero > .container, .article-hero > .container--narrow { /* Use the standard container--narrow width (920px+) like other pages */ margin: 0 auto; padding: 0 24px; } /* ───────────────────────────────────────────────────────── BREADCRUMB — sober, mono caps, navy accent Above article header, helps with navigation and SEO. ───────────────────────────────────────────────────────── */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } .breadcrumb a, .breadcrumb__link { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; padding-bottom: 1px; } .breadcrumb a:hover, .breadcrumb__link:hover, .breadcrumb a:focus-visible, .breadcrumb__link:focus-visible { color: var(--accent); border-bottom-color: var(--accent); } .breadcrumb__sep { color: var(--ink-mute); opacity: 0.5; font-size: 13px; line-height: 1; } /* Current page in breadcrumb — article title is rendered in readable sans (mixed case, normal letter-spacing) instead of mono/uppercase since titles can be long. The article title is the H1 right below; this just confirms the user's position in the site hierarchy. */ .breadcrumb__current { color: var(--accent-warm); font-family: var(--sans); font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 500; /* Long titles can overflow on narrow screens — clamp to 1 line on mobile */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 720px) { .breadcrumb { font-size: 10px; gap: 6px; } .breadcrumb__current { font-size: 11.5px; /* On mobile, the title in breadcrumb is often redundant with H1 right below. Truncate it harder. */ max-width: 200px; } } @media (max-width: 480px) { .breadcrumb__current { max-width: 140px; } } .article-meta { display: flex; gap: 16px; align-items: center; margin-bottom: 24px; font-family: var(--mono); font-size: 12px; color: var(--ink-mute); } .article-title { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.03em; font-weight: 600; line-height: 1.08; margin-bottom: 24px; max-width: 22ch; } .article-deck { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--ink-soft); font-weight: 400; max-width: 56ch; } .article-body { max-width: var(--container-narrow); margin: 0 auto; padding: 60px 24px 100px; font-size: 1.05rem; line-height: 1.75; color: var(--ink-2); } /* Inside the article body, prose elements remain narrower for readability */ .article-body > p, .article-body > h2, .article-body > h3, .article-body > h4, .article-body > ul, .article-body > ol, .article-body > blockquote, .article-body > .marginalia, .article-body > hr { max-width: 680px; margin-left: auto; margin-right: auto; } /* Hero images and SVG illustrations span full width like Expertise pages */ .article-body > .article-hero-img, .article-body > figure { max-width: 100%; margin-left: 0; margin-right: 0; } /* .article-body h2 — see Direction B section below for active rules */ .article-body h3 { font-size: 1.15rem; margin-top: 36px; margin-bottom: 12px; } .article-body p { margin-bottom: 20px; } .article-body p strong { color: var(--ink); font-weight: 600; } /* .article-body blockquote — see Direction B section below for active rule (background warm, big quote glyph) */ .article-body ul, .article-body ol { /* Split margin shorthand so margin-left/right: auto from the parent centering rule (.article-body > ul) is preserved. Without this split, ULs/OLs stick to the left and don't align with the paragraphs above them. */ margin-top: 0; margin-bottom: 24px; padding-left: 0; list-style: none; } .article-body ul li, .article-body ol li { position: relative; padding-left: 0; /* text starts at the same X as paragraphs */ margin-bottom: 14px; line-height: 1.7; } /* UL — bordeaux short dash, aligned with the BASELINE of the first line of text, so it sits on the same line where the reading eye anchors. This matches the alignment of OL numbers (top: 0 + line-height: 1.7 = baseline). Equivalent visual rhythm across UL and OL throughout the site. */ .article-body ul li::before { content: ''; position: absolute; left: -24px; /* dash hangs in the left margin */ top: 0.85em; width: 14px; height: 1.5px; background: var(--accent-warm); } /* OL — navy numbers */ .article-body ol { counter-reset: ordered-list; } .article-body ol li { counter-increment: ordered-list; /* padding-left: 0 (inherited from shared rule above) so the text aligns with paragraphs. The number hangs at left: -28px in the left margin (desktop only). */ } .article-body ol li::before { content: counter(ordered-list) "."; position: absolute; left: -28px; /* number hangs in the left margin */ top: 0; /* number baseline = text baseline (typographic standard) */ color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.7; min-width: 22px; text-align: right; /* right-align the "1." "10." etc for clean alignment */ padding-right: 4px; } /* Nested lists */ .article-body ul ul, .article-body ol ol, .article-body ul ol, .article-body ol ul { margin: 10px 0 0 0; padding-left: 0; } .article-body ul ul li::before { background: var(--ink-mute); width: 10px; height: 1px; } @media (max-width: 720px) { .article-hero { padding: calc(var(--nav-h) + 40px) 0 24px; } .article-meta { flex-wrap: wrap; gap: 8px 12px; font-size: 11px; } .article-title { font-size: clamp(1.6rem, 6vw, 2.2rem); max-width: 100%; margin-bottom: 18px; } .article-deck { font-size: 1.05rem; max-width: 100%; } .article-body { padding: 40px 20px 80px; font-size: 1rem; } .article-body h2 { font-size: 1.3rem; margin-top: 40px; margin-bottom: 14px; } } /* ── Voyages page (interactive map) ── */ .travel-hero { padding: calc(var(--nav-h) + 80px) 0 40px; } .travel-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin: 32px 0 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .travel-stat { background: var(--bg); padding: 20px; text-align: center; } .travel-stat__num { font-family: var(--serif); font-style: italic; font-size: 2rem; color: var(--accent); line-height: 1; } .travel-stat__label { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 6px; } .map-wrapper { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--warm); margin: 40px 0; } #world-map { width: 100%; height: 540px; background: var(--warm); } .leaflet-container { background: var(--warm) !important; font-family: var(--sans) !important; } :root[data-theme="dark"] .leaflet-container, :root[data-theme="dark"] .map-wrapper, :root[data-theme="dark"] #world-map { background: #1a1d24 !important; } :root[data-theme="dark"] .leaflet-tile-pane { filter: grayscale(0.7) brightness(0.55) contrast(0.92) invert(0.92) hue-rotate(180deg); } .leaflet-tile-pane { filter: grayscale(0.6) brightness(1.05) contrast(0.92); } .country-pin { background: var(--accent); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 0 rgba(30, 58, 138, 0.5); animation: pulse 2.4s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(30, 58, 138, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(30, 58, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 58, 138, 0); } } .leaflet-popup-content-wrapper { background: var(--ink) !important; color: #fff !important; border-radius: 10px !important; border-top: 2px solid var(--accent-warm) !important; box-shadow: 0 12px 28px rgba(0,0,0,0.32) !important; } .leaflet-popup-tip { background: var(--ink) !important; } .leaflet-popup-content { margin: 12px 16px !important; font-size: 13px !important; font-family: var(--sans) !important; min-width: 240px; max-width: 280px; } .leaflet-popup-content strong { color: #fff; font-weight: 600; display: block; margin-bottom: 6px; font-size: 14px; } .leaflet-popup-content em { color: rgba(255,255,255,0.85); font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; display: block; margin-top: 2px; } .country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 32px; } .country-chip { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 18px; background: var(--warm); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink-2); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, box-shadow 0.35s ease, color 0.35s ease; cursor: default; border: 1px solid transparent; outline: none; } .country-chip::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--accent); border-radius: 0 2px 2px 0; transform: translateY(-50%); transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .country-chip:hover, .country-chip:focus-visible { background: var(--bg); transform: translateY(-3px); box-shadow: 0 12px 26px -14px rgba(0,0,0,0.22); color: var(--ink); } .country-chip:hover::before, .country-chip:focus-visible::before { height: 70%; } .country-chip:hover .country-chip__flag, .country-chip:focus-visible .country-chip__flag { transform: scale(1.1); } .country-chip__flag { font-size: 1.2rem; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; } .country-chip__name { flex: 1; letter-spacing: -0.005em; } .country-chip__tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px); background: var(--ink); color: var(--bg); font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 0.92rem; line-height: 1.45; padding: 12px 16px; border-radius: 6px; border-top: 2px solid var(--accent-warm); white-space: normal; text-align: left; opacity: 0; pointer-events: none; transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); z-index: 20; box-shadow: 0 12px 28px -10px rgba(0,0,0,0.5); width: 280px; max-width: 90vw; } .country-chip__tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); } .country-chip:hover .country-chip__tooltip, .country-chip:focus-visible .country-chip__tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } @media (hover: none) { /* On touch devices, show tooltip on tap (focus) */ .country-chip__tooltip { font-size: 0.85rem; padding: 10px 12px; width: 240px; } } /* ── Quiz / Jeux ── */ .quiz-wrapper { max-width: 720px; margin: 0 auto; padding: 60px 24px 100px; } .quiz-card { background: var(--warm); border-radius: var(--radius-lg); padding: 48px 32px; border: 1px solid var(--line); } .progress { display: flex; gap: 4px; margin-bottom: 32px; } .progress-dot { flex: 1; height: 3px; background: var(--line); border-radius: 2px; transition: background 0.4s var(--ease); } .progress-dot.active { background: var(--accent); } .quiz-question { font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.3; color: var(--ink); margin-bottom: 32px; font-weight: 400; } .quiz-options { display: flex; flex-direction: column; gap: 10px; } .quiz-option { text-align: left; padding: 16px 20px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.95rem; color: var(--ink-2); transition: all 0.2s var(--ease); cursor: pointer; font-weight: 400; } .quiz-option:hover { border-color: var(--ink); transform: translateX(4px); } .quiz-result { text-align: center; display: none; } .quiz-result.show { display: block; animation: fadeUp 0.6s var(--ease); } .quiz-result__profile { font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 5vw, 3rem); color: var(--accent); margin-bottom: 16px; font-weight: 400; letter-spacing: -0.02em; } .quiz-result__desc { color: var(--ink-soft); max-width: 38ch; margin: 0 auto 32px; line-height: 1.65; } /* ── Footer ── */ .footer { border-top: 1px solid var(--line); padding: 80px 0 40px; background: var(--warm); } .footer__grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px; } @media (min-width: 720px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; } } .footer__brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; } .footer__brand .brand__dot { width: 9px; height: 9px; } .footer__brand .brand__name { font-size: 16px; letter-spacing: 0.28em; } .footer__brand .brand__tagline { font-size: 14px; } .footer__tag { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; max-width: 30ch; } .footer__col h5 { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; font-weight: 500; } .footer__col a, .footer__col p { display: block; font-size: 0.92rem; color: var(--ink-2); margin-bottom: 8px; transition: color 0.2s; } .footer__col a:hover { color: var(--accent); } .footer__bottom { padding-top: 32px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-mute); } /* ── Reveal animations ── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0); } /* ───────────────────────────────────────────────────────── STAGGER REVEAL — for grouped elements that should appear one after another (pillars on home, post-rows in lists). Each child gets an incremental transition-delay. The base .reveal still drives the opacity/translate, we only delay the start so cards cascade in. */ .pillars .pillar.reveal { transition-delay: 0s; } .pillars .pillar.reveal:nth-child(2) { transition-delay: 0.12s; } .pillars .pillar.reveal:nth-child(3) { transition-delay: 0.24s; } .pillars .pillar.reveal:nth-child(4) { transition-delay: 0.36s; } /* Posts list on home — cascade of 5 article rows */ .posts .post-row.reveal:nth-child(1) { transition-delay: 0s; } .posts .post-row.reveal:nth-child(2) { transition-delay: 0.08s; } .posts .post-row.reveal:nth-child(3) { transition-delay: 0.16s; } .posts .post-row.reveal:nth-child(4) { transition-delay: 0.24s; } .posts .post-row.reveal:nth-child(5) { transition-delay: 0.32s; } .posts .post-row.reveal:nth-child(6) { transition-delay: 0.40s; } /* Make the initial offset slightly bigger for pillars — they're large cards and look better with a more pronounced lift-in. */ .pillars .pillar.reveal { transform: translateY(32px); } .pillars .pillar.reveal.visible { transform: translateY(0); } /* Slightly slower transition for pillars (more elegant for large cards) */ .pillars .pillar.reveal { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } /* ───────────────────────────────────────────────────────── SCROLL LIFT — subtle parallax on pillars and posts When the section is visible, each card has its own scroll-lifted feeling via CSS view-timeline (modern browsers) — falls back to the standard reveal on older ones. */ @supports (animation-timeline: view()) { .pillars .pillar.reveal.visible { animation: scroll-float linear both; animation-timeline: view(); animation-range: entry 5% cover 35%; } @keyframes scroll-float { from { transform: translateY(20px); } to { transform: translateY(-4px); } } } /* Fallback: if JS doesn't run for any reason (cache, error, slow load), text MUST still be visible after a delay. Better unanimated than invisible. */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .pillars .pillar.reveal, .posts .post-row.reveal { transition-delay: 0s !important; animation: none !important; } } html.no-js .reveal, html:not(.js-loaded) .reveal { animation: reveal-fallback 0.1s linear 3s forwards; } @keyframes reveal-fallback { to { opacity: 1; transform: translateY(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ── Responsive: hamburger ── */ @media (max-width: 880px) { .nav__menu, .nav__cta { display: none; } .hamburger { display: block; } } @media (max-width: 720px) { .section { padding: 70px 0; } .hero { padding: calc(var(--nav-h) + 50px) 0 50px; } .container { padding: 0 20px; } .leadership { padding: 60px 24px; } .stats { grid-template-columns: repeat(2, 1fr); } .travel-stats { grid-template-columns: repeat(3, 1fr); } #world-map { height: 380px; } .pyramid__layer:nth-child(1), .pyramid__layer:nth-child(2), .pyramid__layer:nth-child(3), .pyramid__layer:nth-child(4) { width: 100%; } } @media (max-width: 380px) { .container { padding: 0 16px; } .quiz-card { padding: 32px 20px; } } .no-scroll { overflow: hidden; } /* ─── View Transitions API ───────────────────────────── Smooth page-to-page transitions in supported browsers (Chrome 111+, Edge, Safari 18+). Falls back gracefully — older browsers see instant page change with no penalty. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.4s; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); } ::view-transition-old(root) { animation-name: vt-fade-out; } ::view-transition-new(root) { animation-name: vt-fade-in; } @keyframes vt-fade-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-12px); } } @keyframes vt-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Respect reduced motion preference for view transitions too */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .country-pin { animation: none; } } /* ========== PILLARS (home page entry points) ========== */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; } .pillar { display: flex; flex-direction: column; padding: 40px 32px 36px; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; position: relative; overflow: hidden; } .pillar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 60%, var(--accent) 200%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .pillar:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: 0 18px 40px -22px rgba(0,0,0,0.18); } .pillar:hover::before { opacity: 0.05; } .pillar__num { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 24px; font-weight: 500; } .pillar h3 { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 16px; line-height: 1.2; } .pillar p { color: var(--ink-soft); line-height: 1.6; font-size: 0.96rem; flex: 1; margin-bottom: 24px; } .pillar__link { font-size: 0.9rem; font-weight: 500; color: var(--accent); letter-spacing: -0.005em; } @media (max-width: 900px) { .pillars { grid-template-columns: 1fr; gap: 16px; } .pillar { padding: 32px 24px 28px; } } /* ========== MODERNIZATION LAYER ========== */ /* Subtle dot pattern overlay (use as ::before on hero or section) */ .dot-pattern { position: relative; isolation: isolate; } .dot-pattern::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(10,10,10,0.06) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; z-index: -1; mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%); } /* Accent stripe on expertise cards — modern look */ .expertise-card { position: relative; overflow: hidden; } .expertise-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform 0.4s ease; } .expertise-card:hover::before { transform: scaleY(1); } /* ========== KEY SKILLS BAND ========== */ .skills-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 60px; padding: 48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .skill-cell { display: flex; flex-direction: column; gap: 14px; } .skill-cell__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .skill-cell__name { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); } .skill-cell__years { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--accent); letter-spacing: 0.05em; font-weight: 500; } .skill-cell__bar { position: relative; height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; } .skill-cell__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, var(--accent) 100%); transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; border-radius: 4px; } .skills-band.is-visible .skill-cell__fill, .skill-cell.is-visible .skill-cell__fill { transform: scaleX(var(--lvl, 1)); } .skill-cell__detail { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; } @media (max-width: 900px) { .skills-band { grid-template-columns: repeat(2, 1fr); gap: 28px; padding: 36px 0; } } @media (max-width: 640px) { /* Mobile : layout compact en flex column avec barre fine en bas — réduit la verticalité, garde le signal visuel, animation déclenchée cellule par cellule */ .skills-band { display: flex; flex-direction: column; gap: 22px; padding: 32px 0; margin-top: 44px; } .skill-cell { gap: 8px; } .skill-cell__head { align-items: baseline; } .skill-cell__name { font-size: 0.92rem; line-height: 1.3; flex: 1; min-width: 0; } .skill-cell__years { font-size: 0.66rem; flex-shrink: 0; background: rgba(30, 58, 138, 0.08); padding: 3px 7px; border-radius: 3px; letter-spacing: 0.04em; } .skill-cell__bar { height: 3px; max-width: 70%; } .skill-cell__detail { font-size: 0.78rem; line-height: 1.45; color: var(--ink-soft); } } /* ========== MODERN HERO ENHANCEMENT ========== */ .hero { position: relative; isolation: isolate; } .hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(10,10,10,0.05) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; z-index: -1; mask-image: radial-gradient(ellipse at top right, black 0%, transparent 70%); } :root[data-theme="dark"] .hero::before { background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); } /* ========== MODERN PILLAR — colored top accent ========== */ .pillar { border-top: 3px solid transparent; background-image: linear-gradient(var(--bg), var(--bg)), linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 100%); background-origin: border-box; background-clip: padding-box, border-box; } .pillar:hover { border-top-color: transparent; background-image: linear-gradient(var(--bg), var(--bg)), linear-gradient(90deg, var(--accent-soft) 0%, var(--accent) 100%); } :root[data-theme="dark"] .pillar { background-image: linear-gradient(var(--bg), var(--bg)), linear-gradient(90deg, var(--accent) 0%, #6a85d4 100%); } :root[data-theme="dark"] .pillar:hover { background-image: linear-gradient(var(--bg), var(--bg)), linear-gradient(90deg, #6a85d4 0%, var(--accent) 100%); } /* ========== TAG CHIP for modern filters ========== */ .filter-btn { position: relative; overflow: hidden; } .filter-btn::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform 0.3s ease; z-index: -1; } .filter-btn.active::after { transform: translateY(0); } /* ============================================================ GAMES — section headers and Snake game (Nokia LCD vintage) ============================================================ */ /* Section header for each game (shared between Quiz and Snake) */ .game-section { margin-top: 60px; } .game-section__head { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; padding-bottom: 32px; border-bottom: 1px solid var(--line); } .game-section__num { font-family: var(--mono); font-size: var(--fs-sm); letter-spacing: 0.2em; color: var(--accent); padding-top: 8px; font-weight: 500; } .game-section__title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; color: var(--ink); margin-bottom: 12px; } .game-section__title .serif { color: var(--accent); } .game-section__sub { font-size: var(--fs-md); line-height: 1.55; color: var(--ink-soft); max-width: 50ch; } /* ── Snake game ───────────────────────────────────────── Nokia 3310 / vintage LCD aesthetic. Cream-yellow LCD background, navy pixels, mono HUD. */ .snake-wrapper { max-width: var(--container-narrow); margin: 48px auto 80px; padding: 0 24px; } .snake-game { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; position: relative; } /* HUD bar — top of game, shows score / speed / best */ .snake-game__hud { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px; padding: 14px 18px; background: var(--warm); border-radius: var(--radius); border: 1px solid var(--line); } .snake-game__hud-cell { display: flex; flex-direction: column; gap: 2px; text-align: left; } .snake-game__hud-cell--center { text-align: center; align-items: center; } .snake-game__hud-cell:last-child { text-align: right; align-items: flex-end; } .snake-game__hud-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; } .snake-game__hud-value { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } /* Screen — the actual playing field */ .snake-game__screen { position: relative; background: #d4d8c8; /* Nokia LCD greenish-cream */ border-radius: 8px; overflow: hidden; /* CRT/LCD scan-line effect */ background-image: repeating-linear-gradient( 0deg, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 3px ); /* Inner shadow gives the LCD recessed look */ box-shadow: inset 0 0 0 4px #b8bbac, inset 0 0 0 5px #999c8d, inset 0 4px 16px rgba(0,0,0,0.12); aspect-ratio: 4 / 3; width: 100%; } :root[data-theme="dark"] .snake-game__screen { background: #1a1d18; background-image: repeating-linear-gradient( 0deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px ); box-shadow: inset 0 0 0 4px #2a2d27, inset 0 0 0 5px #3a3d37, inset 0 4px 16px rgba(0,0,0,0.4); } .snake-game__canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; } /* Overlay — start screen, pause, game over */ .snake-game__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(212, 216, 200, 0.92); backdrop-filter: blur(2px); transition: opacity 0.25s var(--ease); z-index: 5; } :root[data-theme="dark"] .snake-game__overlay { background: rgba(26, 29, 24, 0.92); } .snake-game__overlay--hidden { opacity: 0; pointer-events: none; } .snake-game__overlay-content { text-align: center; padding: 24px; } .snake-game__overlay-title { font-family: var(--mono); font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 600; letter-spacing: 0.08em; color: #1e3a8a; margin-bottom: 12px; text-shadow: 0 2px 0 rgba(30, 58, 138, 0.15); } :root[data-theme="dark"] .snake-game__overlay-title { color: #6f8edd; } .snake-game__overlay-msg { font-family: var(--mono); font-size: var(--fs-sm); color: #1e3a8a; opacity: 0.7; margin-bottom: 24px; letter-spacing: 0.04em; } :root[data-theme="dark"] .snake-game__overlay-msg { color: #6f8edd; } .snake-game__btn { font-family: var(--mono); font-size: var(--fs-sm); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; background: #1e3a8a; color: #d4d8c8; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; transition: transform 0.15s var(--ease), background 0.2s ease; } .snake-game__btn:hover { transform: translateY(-2px); background: #2c4ba8; } .snake-game__btn:active { transform: translateY(0); } /* D-pad — visible only on touch devices for mobile control */ .snake-game__controls { display: none; grid-template-areas: ". up . " "left . right" ". down . "; grid-template-columns: 60px 60px 60px; grid-template-rows: 50px 50px 50px; gap: 8px; justify-content: center; margin-top: 24px; } .snake-game__pad { background: var(--warm); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 16px; color: var(--ink); cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; font-family: var(--mono); user-select: none; -webkit-tap-highlight-color: transparent; } .snake-game__pad:active { background: var(--accent); color: #fff; transform: scale(0.95); } .snake-game__pad--up { grid-area: up; } .snake-game__pad--left { grid-area: left; } .snake-game__pad--right { grid-area: right; } .snake-game__pad--down { grid-area: down; } /* Show D-pad on touch devices only */ @media (hover: none) and (pointer: coarse) { .snake-game__controls { display: grid; } } /* Mobile padding adjustments */ @media (max-width: 640px) { .snake-game { padding: 16px; } .snake-game__hud { padding: 10px 14px; } .snake-game__hud-value { font-size: 18px; } } /* ============================================================ METRO MAP — Career path visualized as a metro line ============================================================ */ .metro-map { margin: 48px 0 64px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px 16px; position: relative; overflow: hidden; } .metro-map__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 8px; } .metro-map__legend { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .metro-map__legend-item { display: inline-flex; align-items: center; gap: 8px; } .metro-line { display: inline-block; width: 28px; height: 4px; border-radius: 2px; } .metro-line--career { background: var(--accent); } .metro-line--city { background: transparent; background-image: linear-gradient(90deg, var(--ink-mute) 50%, transparent 50%); background-size: 6px 4px; background-repeat: repeat-x; } .metro-map__hint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); } .metro-map__viewport { width: 100%; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 16px 0 8px; /* Subtle scroll-shadow gradient cues */ background: linear-gradient(90deg, var(--bg) 0%, transparent 4%, transparent 96%, var(--bg) 100%); } .metro-map__svg { display: block; width: 100%; min-width: 900px; height: auto; color: var(--ink-soft); } .metro-map__career-line { color: var(--accent); } .metro-map__city-line { color: var(--ink-mute); } .metro-station { cursor: pointer; outline: none; } .metro-station__circle { fill: var(--bg); stroke: var(--accent); stroke-width: 4; transition: r 0.3s var(--ease-back), fill 0.25s var(--ease), stroke-width 0.25s var(--ease); } .metro-station__circle--current { fill: var(--accent); stroke: var(--accent); } .metro-station__pulse { fill: var(--accent); opacity: 0.18; animation: metroPulse 2s var(--ease) infinite; pointer-events: none; } @keyframes metroPulse { 0% { r: 13; opacity: 0.5; } 100% { r: 28; opacity: 0; } } .metro-station:hover .metro-station__circle, .metro-station:focus .metro-station__circle { r: 14; fill: var(--accent); } .metro-station.is-active .metro-station__circle { fill: var(--accent); stroke: var(--accent); r: 16; } .metro-station__year { font-family: var(--mono); font-size: 12px; font-weight: 500; fill: var(--ink-mute); letter-spacing: 0.04em; } .metro-station__role { font-family: var(--sans); font-size: 13px; font-weight: 500; fill: var(--ink); letter-spacing: -0.01em; } .metro-station__company { font-family: var(--sans); font-size: 11px; fill: var(--ink-soft); letter-spacing: 0; } .metro-station__city { font-family: var(--mono); font-size: 11px; font-weight: 500; fill: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase; } .metro-station:hover .metro-station__role, .metro-station.is-active .metro-station__role { fill: var(--accent); } /* ── Detail panel that slides in from below ── */ .metro-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1)), margin 0.4s var(--ease-smooth); margin-top: 0; position: relative; } .metro-detail.is-open { grid-template-rows: 1fr; margin-top: 24px; } .metro-detail__inner-wrap { overflow: hidden; } .metro-detail__inner { overflow: hidden; background: var(--warm); border-radius: var(--radius); border: 1px solid var(--line); padding: 0; opacity: 0; transition: padding 0.3s var(--ease) 0.1s, opacity 0.3s var(--ease) 0.2s; } .metro-detail.is-open .metro-detail__inner { padding: 28px 32px; opacity: 1; } .metro-detail__close { position: absolute; top: 16px; right: 20px; width: 32px; height: 32px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink-soft); z-index: 2; opacity: 0; transition: opacity 0.3s var(--ease) 0.3s, background 0.2s var(--ease), border-color 0.2s var(--ease); } .metro-detail.is-open .metro-detail__close { opacity: 1; } .metro-detail__close:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* Detail content blocks */ .metro-detail__year { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 8px; } .metro-detail__role { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 6px; color: var(--ink); } .metro-detail__company { font-size: var(--fs-md); color: var(--ink-soft); margin-bottom: 18px; font-weight: 400; } .metro-detail__company strong { color: var(--accent); font-weight: 500; } .metro-detail__body { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-2); max-width: 65ch; } .metro-detail__body p + p { margin-top: 12px; } .metro-detail__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; } .metro-detail__chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent); padding: 5px 10px; border-radius: 999px; font-weight: 500; } /* Responsive: smaller text + tighter padding on mobile */ @media (max-width: 720px) { .metro-map { padding: 20px 16px 12px; } .metro-map__header { flex-direction: column; align-items: flex-start; gap: 10px; } .metro-station__role { font-size: 12px; } .metro-station__company { font-size: 10px; } .metro-detail.is-open .metro-detail__inner { padding: 22px 20px; } } /* ============================================================ RC LENS — Interactive transfers chart (in article body) ============================================================ */ .rcl-chart { margin: 32px 0 40px; background: var(--warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px 16px; position: relative; } .rcl-chart__legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 8px; } .rcl-chart__legend-item { display: inline-flex; align-items: center; gap: 8px; } .rcl-chart__dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; } .rcl-chart__dot--buy { background: var(--accent); } .rcl-chart__dot--sell { background: var(--bg); border: 2px solid var(--accent); box-sizing: border-box; } .rcl-chart__legend-hint { margin-left: auto; color: var(--ink-mute); font-size: 10px; } .rcl-chart__viewport { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; padding: 8px 0; } .rcl-chart__svg { display: block; width: 100%; min-width: 600px; height: auto; color: var(--ink-soft); } .rcl-chart__axis { font-family: var(--mono); font-size: 11px; fill: var(--ink-mute); letter-spacing: 0.04em; } .rcl-chart__axis-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ink-mute); } .rcl-point { cursor: pointer; outline: none; } .rcl-point__circle { transition: r 0.25s var(--ease-back), fill 0.2s var(--ease), stroke-width 0.2s var(--ease); } .rcl-point__circle--buy { fill: var(--accent); stroke: var(--accent); stroke-width: 0; } .rcl-point__circle--sell { fill: var(--bg); stroke: var(--accent); stroke-width: 3; } .rcl-point__circle--projection { stroke-dasharray: 3 3; opacity: 0.6; } .rcl-point:hover .rcl-point__circle, .rcl-point:focus .rcl-point__circle, .rcl-point.is-active .rcl-point__circle { r: 17; opacity: 1; } .rcl-point.is-active .rcl-point__circle--sell { fill: var(--accent); stroke: var(--accent); } .rcl-point__label { font-family: var(--sans); font-size: 10px; fill: var(--ink-soft); font-weight: 500; pointer-events: none; letter-spacing: -0.005em; } .rcl-point__label--big { font-size: 11px; fill: var(--ink); font-weight: 600; } .rcl-point__label--projection { fill: var(--ink-mute); font-style: italic; } /* ── Detail panel ── */ .rcl-chart__detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1)), margin 0.35s var(--ease-smooth); margin-top: 0; position: relative; } .rcl-chart__detail.is-open { grid-template-rows: 1fr; margin-top: 18px; } .rcl-chart__detail > div { overflow: hidden; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--line); padding: 0; opacity: 0; transition: padding 0.25s var(--ease) 0.1s, opacity 0.25s var(--ease) 0.15s; } .rcl-chart__detail.is-open > div { padding: 22px 24px; opacity: 1; } .rcl-chart__close { position: absolute; top: 10px; right: 14px; width: 28px; height: 28px; background: var(--warm); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--ink-soft); z-index: 2; opacity: 0; transition: opacity 0.25s var(--ease) 0.2s, background 0.15s, border-color 0.15s; } .rcl-chart__detail.is-open .rcl-chart__close { opacity: 1; } .rcl-chart__close:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .rcl-detail__kind { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 4px; } .rcl-detail__player { font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin-bottom: 4px; } .rcl-detail__from { font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; } .rcl-detail__amount { font-family: var(--mono); font-size: 22px; color: var(--accent); font-weight: 600; margin-bottom: 14px; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; } .rcl-detail__meta { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); max-width: 60ch; } @media (max-width: 720px) { .rcl-chart { padding: 16px 12px; } .rcl-chart__detail.is-open > div { padding: 18px 16px; } .rcl-detail__amount { font-size: 18px; } } /* ================================================================ HERO 2026 — Modern editorial hero with split-text animations ================================================================ Standards: prefers-reduced-motion respected, keyframes-based, IntersectionObserver-driven (set via JS in script.js). ================================================================ */ .hero--2026 { position: relative; padding: calc(var(--nav-h) + 64px) 0 96px; overflow: hidden; isolation: isolate; } /* ── Subtle dotted grid background, fades to corners ── */ .hero__bg-grid { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, var(--ink-mute) 1px, transparent 1px); background-size: 32px 32px; background-position: 0 0; opacity: 0.06; mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, black 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, black 0%, transparent 80%); pointer-events: none; } :root[data-theme="dark"] .hero__bg-grid { opacity: 0.12; } .hero--2026 .hero__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 48px; position: relative; } /* ── KICKER (formerly dateline) — slides in from left ── */ .hero--2026 .hero__kicker { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 32px; opacity: 0; animation: heroKickerIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards; } .hero__kicker-bar { display: inline-block; width: 0; height: 1px; background: var(--accent); animation: heroBarGrow 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards; } .hero__kicker-text { display: inline-flex; align-items: center; gap: 6px; } /* ── Rotating word inside the kicker ── */ .hero__kicker-rotate { display: inline-grid; grid-template-areas: "stack"; vertical-align: middle; color: var(--accent); } .hero__kicker-rotate > span { grid-area: stack; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease, ease), transform 0.5s var(--ease, ease); } .hero__kicker-rotate > span.is-active { opacity: 1; transform: translateY(0); } @keyframes heroKickerIn { to { opacity: 1; } } @keyframes heroBarGrow { to { width: 36px; } } /* ── TITLE — split into lines and words for staggered reveal ── */ .hero--2026 .hero__title { font-size: clamp(2.5rem, 1.2rem + 6.5vw, 6rem); font-weight: 600; letter-spacing: -0.045em; line-height: 0.97; color: var(--ink); margin: 0; display: block; } .hero__line { display: block; overflow: hidden; } .hero__line--small { font-size: 0.78em; font-weight: 500; color: var(--ink-soft); letter-spacing: -0.03em; margin-top: 0.08em; } .hero__word { display: inline-block; transform: translateY(110%); opacity: 0; animation: heroWordIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: var(--word-delay, 0s); } .hero__word--accent { color: var(--accent); position: relative; font-style: italic; margin-left: 0.1em; } @keyframes heroWordIn { to { transform: translateY(0); opacity: 1; } } /* ── Blinking cursor on the italic accent word ── */ .hero__cursor { /* Elegant pulsing dot — replaces the old typewriter caret bar. Sits on the baseline of "transformer" like a punctuation mark. */ display: inline-block; width: 0.18em; height: 0.18em; border-radius: 50%; background: var(--accent-warm); margin-left: 0.14em; vertical-align: 0.12em; opacity: 0; animation: heroCursorAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.6s forwards, heroCursorPulse 3.2s cubic-bezier(0.45, 0, 0.55, 1) 2.1s infinite; box-shadow: 0 0 0 0 rgba(152, 60, 74, 0.4); } @keyframes heroCursorAppear { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } } @keyframes heroCursorPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(152, 60, 74, 0.35); } 50% { transform: scale(1.15); box-shadow: 0 0 0 0.25em rgba(152, 60, 74, 0); } } /* ── SUB-HEADLINE — fades in after title ── */ .hero--2026 .hero__sub { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem); line-height: 1.5; color: var(--ink-soft); margin-top: 32px; max-width: 36ch; font-weight: 400; opacity: 0; transform: translateY(12px); animation: heroFadeIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards; } @keyframes heroFadeIn { to { opacity: 1; transform: translateY(0); } } /* ── META STATS — animated counters with separators ── */ .hero--2026 .hero__meta { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 20px; opacity: 0; transform: translateY(12px); animation: heroFadeIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards; } .hero__stat { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); } .hero__stat strong { font-family: var(--sans); font-size: clamp(1.5rem, 1rem + 1.4vw, 2.1rem); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .hero__stat-plus { color: var(--accent-warm); font-size: 0.7em; font-weight: 400; margin-right: 6px; margin-left: 2px; } .hero__stat em { font-style: normal; font-weight: 400; color: var(--ink-mute); } .hero__meta-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-mute); opacity: 0.5; align-self: center; } /* ── MODERN STAT CARDS — 3 columns grid, refined 2026 look ── */ .hero__meta--modern { margin-top: 56px !important; padding-top: 32px !important; border-top: 1px solid var(--line) !important; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 24px !important; align-items: stretch !important; flex-wrap: nowrap !important; } .hero__stat-card { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; position: relative; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .hero__stat-card + .hero__stat-card { border-left: 1px solid var(--line); padding-left: 24px; } .hero__stat-num { display: inline-flex; align-items: baseline; font-family: var(--sans); font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem); font-weight: 500; color: var(--ink); letter-spacing: -0.04em; line-height: 0.95; font-variant-numeric: tabular-nums; } .hero__stat-num strong { font-weight: 500; font-family: var(--sans); font-size: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; } .hero__stat-card .hero__stat-plus { color: var(--accent-warm); font-size: 0.55em; font-weight: 400; margin-left: 4px; align-self: flex-start; margin-top: 0.15em; } .hero__stat-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; } @media (max-width: 720px) { .hero__meta--modern { grid-template-columns: 1fr; gap: 20px !important; margin-top: 40px !important; padding-top: 24px !important; } .hero__stat-card + .hero__stat-card { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 20px; } .hero__stat-card { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; } .hero__stat-num { font-size: 2rem; } .hero__stat-label { text-align: right; } } /* ── HERO CTA BUTTONS — make the action impossible to miss ───── Primary (bordeaux) + 2 secondary (LinkedIn, Email). On mobile, stack vertically for tap-target friendliness. */ .hero__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; opacity: 0; transform: translateY(12px); animation: heroFadeIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards; } .hero__cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 6px; font-family: var(--sans); font-size: 0.98rem; font-weight: 500; letter-spacing: 0.005em; text-decoration: none; cursor: pointer; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; -webkit-tap-highlight-color: transparent; border: 1px solid transparent; position: relative; white-space: nowrap; } .hero__cta-btn svg { flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Primary — bordeaux solid, the high-contrast attention-grabber */ .hero__cta-btn--primary { background: var(--accent-warm); color: #fdfaf4; box-shadow: 0 2px 0 rgba(40, 8, 16, 0.15), 0 6px 18px rgba(152, 60, 74, 0.22); } @media (hover: hover) and (pointer: fine) { .hero__cta-btn--primary:hover { background: #832e3a; transform: translateY(-2px); box-shadow: 0 4px 0 rgba(40, 8, 16, 0.2), 0 12px 28px rgba(152, 60, 74, 0.32); } .hero__cta-btn--primary:hover svg { transform: translateX(4px); } } /* Secondary — subtle outlined, doesn't steal focus from primary */ .hero__cta-btn--secondary { background: transparent; color: var(--ink-soft); border-color: var(--line); } @media (hover: hover) and (pointer: fine) { .hero__cta-btn--secondary:hover { background: var(--bg-elevated); color: var(--accent); border-color: var(--accent); transform: translateY(-2px); } } /* Mobile — full-width primary, 2 secondaries on a row */ @media (max-width: 600px) { .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 32px; } .hero__cta-btn { justify-content: center; padding: 16px 20px; font-size: 1rem; } .hero__cta-btn--primary { /* primary takes full width on mobile */ width: 100%; } .hero__cta-secondary-row { display: flex; gap: 10px; } .hero__cta-secondary-row .hero__cta-btn--secondary { flex: 1; } } /* Dark theme adaptations for CTA */ :root[data-theme="dark"] .hero__cta-btn--primary { background: var(--accent-warm); color: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), 0 6px 18px rgba(152, 60, 74, 0.4); } :root[data-theme="dark"] .hero__cta-btn--secondary { border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.75); } :root[data-theme="dark"] .hero__cta-btn--secondary:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--accent-warm); color: var(--accent-warm); } /* ── ASIDE — fades in last with subtle border accent ── */ .hero--2026 .hero__aside { position: relative; margin-top: 16px; padding: 28px 36px; background: var(--warm); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); opacity: 0; transform: translateY(8px); animation: heroAsideIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards; } .hero--2026 .hero__aside::before { display: none; } .hero--2026 .hero__aside p { margin: 0; font-size: 14px; line-height: 1.7; } .hero--2026 .hero__aside p + p { margin-top: 0; } .hero--2026 .hero__aside strong { display: block; margin: 0 0 10px 0; padding: 0; background: transparent; color: var(--ink); font-weight: 500; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; vertical-align: baseline; border-radius: 0; } @keyframes heroAsideIn { to { opacity: 1; transform: translateY(0); } } @media (max-width: 860px) { .hero--2026 .hero__aside { grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px 32px; border-left: 3px solid var(--accent); border-top: none; padding-left: 32px; padding-top: 28px; } } @media (max-width: 620px) { .hero--2026 .hero__aside { grid-template-columns: 1fr; gap: 24px; padding: 24px 22px; margin-top: 8px; border-left: 3px solid var(--accent); border-top: none; padding-left: 22px; padding-top: 24px; } } /* ── SCROLL HINT — bottom-right, animated bar ── */ .hero__scroll-hint { position: absolute; bottom: 24px; right: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); opacity: 0; animation: heroFadeIn 0.6s ease 2s forwards; } .hero__scroll-line { display: block; width: 1px; height: 40px; background: linear-gradient(to bottom, var(--accent) 0%, var(--accent) 30%, transparent 100%); animation: heroScrollLine 1.8s ease-in-out 2.2s infinite; transform-origin: top; } @keyframes heroScrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } @media (max-width: 720px) { .hero__scroll-hint { display: none; } } /* ── REDUCED MOTION — respect user preference ── */ @media (prefers-reduced-motion: reduce) { .hero--2026 *, .hero--2026 *::before, .hero--2026 *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero__word { transform: translateY(0) !important; opacity: 1 !important; } .hero__sub, .hero__meta, .hero--2026 .hero__aside, .hero__kicker, .hero__scroll-hint { opacity: 1 !important; transform: none !important; } .hero__cursor { animation: none !important; opacity: 1 !important; } .hero__kicker-bar { width: 36px !important; } } /* ============================================================ RESOURCES — Search bar + tag cloud ============================================================ */ .resources-toolbar { margin-top: 32px; margin-bottom: 24px; } .resources-search { position: relative; display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px 10px 18px; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); max-width: 520px; } .resources-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.08); } :root[data-theme="dark"] .resources-search:focus-within { box-shadow: 0 0 0 3px rgba(79, 111, 199, 0.18); } .resources-search__icon { flex-shrink: 0; color: var(--ink-mute); } .resources-search__input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--sans); font-size: 14px; color: var(--ink); min-width: 0; } .resources-search__input::placeholder { color: var(--ink-mute); opacity: 0.7; } .resources-search__input::-webkit-search-cancel-button { display: none; } .resources-search__kbd { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-mute); background: var(--warm); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; flex-shrink: 0; white-space: nowrap; } @media (max-width: 640px) { .resources-search__kbd { display: none; } } .resources-search__clear { background: transparent; border: none; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--ink-mute); transition: background 0.15s, color 0.15s; flex-shrink: 0; padding: 0; } .resources-search__clear:hover { background: var(--warm); color: var(--ink); } .resources-search__count { margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); opacity: 0; transition: opacity 0.2s var(--ease); height: 14px; } .resources-search__count.is-active { opacity: 1; } /* ── Tag cloud (sits below filters in resources page) ── */ .tag-cloud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); } .tag-cloud__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-right: 8px; } .tag-cloud__tag { display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink-soft); background: var(--warm); border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; text-decoration: none; letter-spacing: -0.005em; transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease); } .tag-cloud__tag:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); transform: translateY(-1px); } /* ============================================================ POST TAGS — At the bottom of each article ============================================================ */ .post-tags { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .post-tags__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-right: 8px; } .post-tag { display: inline-block; font-size: 12px; font-weight: 500; color: var(--accent); background: var(--accent-soft); padding: 5px 12px; border-radius: 999px; text-decoration: none; transition: background 0.15s, color 0.15s; } .post-tag:hover { background: var(--accent); color: var(--bg); } /* ============================================================ TAG PAGE — Grid of articles for a given tag ============================================================ */ .tag-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; } @media (min-width: 720px) { .tag-grid { grid-template-columns: repeat(2, 1fr); } } .tag-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--warm); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); position: relative; } .tag-card:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--bg); } .tag-card__top { display: flex; justify-content: space-between; align-items: center; } .tag-card__date { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; } .tag-card__title { font-size: 1.15rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .tag-card__tags { display: flex; flex-wrap: wrap; gap: 6px; } .tag-card__tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); padding: 3px 8px; background: var(--bg); border-radius: 999px; } .tag-card__arrow { font-size: 12px; font-weight: 500; color: var(--accent); margin-top: 4px; } /* ============================================================ ABOUT PAGE — Editorial narrative layout ============================================================ */ .about-hero { padding: calc(var(--nav-h) + 80px) 0 60px; background: var(--bg); position: relative; overflow: hidden; } .about-hero h1 { font-size: clamp(2.2rem, 1rem + 5vw, 4.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; color: var(--ink); margin: 0; } .about-hero .lead { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem); line-height: 1.6; color: var(--ink-soft); font-weight: 400; } .about-section { padding: 64px 0; } .about-block { position: relative; padding-left: 0; } .about-block__num { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; display: inline-block; padding: 4px 12px; background: var(--accent-soft); border-radius: 999px; } .about-block h2 { font-size: clamp(1.6rem, 0.9rem + 1.8vw, 2.2rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); margin: 0 0 24px; } .about-block p { font-size: 1.05rem; line-height: 1.7; color: var(--ink-2); margin: 0 0 18px; } .about-block p:last-child { margin-bottom: 0; } .about-block strong { color: var(--ink); font-weight: 500; } .about-list { list-style: none; padding: 0; margin: 0; } .about-list li { position: relative; padding-left: 28px; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.7; color: var(--ink-2); } .about-list li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 14px; height: 1px; background: var(--accent); } .about-list--ordered { counter-reset: about-counter; } .about-list--ordered li { counter-increment: about-counter; padding-left: 36px; } .about-list--ordered li::before { content: counter(about-counter); width: auto; height: auto; top: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; letter-spacing: 0.04em; } @media (max-width: 720px) { .about-hero { padding: calc(var(--nav-h) + 50px) 0 40px; } .about-section { padding: 48px 0; } } /* ============================================================ PROJECTS PAGE — Case study cards ============================================================ */ .projects-hero { padding: calc(var(--nav-h) + 80px) 0 60px; background: var(--bg); } .projects-hero h1 { font-size: clamp(2.2rem, 1rem + 5vw, 4.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; color: var(--ink); margin: 0; } .projects-list { padding: 0 0 80px; } .project-card { background: var(--warm); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 40px; margin-bottom: 32px; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); } .project-card:hover { border-color: var(--accent); } .project-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .project-card__num { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.06em; color: var(--accent); padding: 4px 12px; background: var(--accent-soft); border-radius: 999px; } .project-card__tags { display: flex; flex-wrap: wrap; gap: 6px; } .project-tag { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; } .project-card__title { font-size: clamp(1.4rem, 0.9rem + 1.4vw, 1.85rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); margin: 0 0 12px; } .project-card__deck { font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 28px; max-width: 65ch; } .project-card__body { display: grid; grid-template-columns: 1fr; gap: 28px; padding-top: 28px; border-top: 1px solid var(--line); } @media (min-width: 880px) { .project-card__body { grid-template-columns: 1fr 1fr; } .project-card__body .project-section:nth-child(3), .project-card__body .project-section:nth-child(4) { /* row 2 — span layout */ } } .project-section h3 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; } .project-section p, .project-section li { font-size: 0.97rem; line-height: 1.65; color: var(--ink-2); } .project-section p { margin: 0; } .project-section ul { list-style: none; padding: 0; margin: 0; } .project-section ul li { position: relative; padding-left: 18px; margin-bottom: 8px; } .project-section ul li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-weight: 500; } .project-section strong { color: var(--ink); font-weight: 500; } .projects-cta { margin-top: 48px; padding: 40px 32px; background: var(--accent-soft); border-radius: var(--radius-lg); text-align: center; } .projects-cta p { font-size: 1.05rem; color: var(--ink); margin: 0 0 24px; } @media (max-width: 720px) { .project-card { padding: 28px 22px; } .projects-hero { padding: calc(var(--nav-h) + 50px) 0 40px; } } /* ============================================================ CONTACT PAGE — Form + aside ============================================================ */ .contact-hero { padding: calc(var(--nav-h) + 80px) 0 60px; background: var(--bg); } .contact-hero h1 { font-size: clamp(2.2rem, 1rem + 5vw, 4.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; color: var(--ink); margin: 0; } .contact-section { padding: 32px 0 96px; } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 48px; } @media (min-width: 880px) { .contact-grid { grid-template-columns: 1.6fr 1fr; gap: 64px; align-items: start; } } /* ── FORM ── */ .contact-form-wrap { min-width: 0; } .contact-form { display: flex; flex-direction: column; gap: 20px; } .contact-form__hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .contact-form__row { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 600px) { .contact-form__row { grid-template-columns: 1fr 1fr; } } .contact-form__field { display: flex; flex-direction: column; gap: 8px; } .contact-form__label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .contact-form__req { color: var(--accent); font-weight: 500; margin-left: 2px; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); font-weight: 400; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--ink-mute); opacity: 0.6; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.10); } :root[data-theme="dark"] .contact-form input:focus, :root[data-theme="dark"] .contact-form textarea:focus { box-shadow: 0 0 0 3px rgba(79, 111, 199, 0.20); } .contact-form textarea { resize: vertical; min-height: 140px; font-family: var(--sans); } /* ── FIELDSET (radios) ── */ .contact-form__fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .contact-form__radios { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .contact-radio { cursor: pointer; position: relative; } .contact-radio input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .contact-radio__pill { display: inline-block; font-size: 13px; font-weight: 500; color: var(--ink-soft); background: var(--warm); border: 1px solid var(--line); padding: 8px 16px; border-radius: 999px; transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease); user-select: none; } .contact-radio:hover .contact-radio__pill { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); } .contact-radio input[type="radio"]:checked + .contact-radio__pill { background: var(--accent); color: var(--bg); border-color: var(--accent); } .contact-radio input[type="radio"]:focus-visible + .contact-radio__pill { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── SUBMIT ── */ .contact-form__submit { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .contact-form__btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-size: 15px; font-weight: 500; cursor: pointer; border: none; } .contact-form__btn-arrow { transition: transform 0.2s var(--ease); display: inline-block; } .contact-form__btn:hover .contact-form__btn-arrow { transform: translateX(4px); } .contact-form__legal { font-size: 12px; line-height: 1.5; color: var(--ink-mute); margin: 0; max-width: 60ch; } /* ── ASIDE (right column with cards) ── */ .contact-aside { display: flex; flex-direction: column; gap: 16px; } .contact-card { padding: 20px 22px; background: var(--warm); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.15s var(--ease); } .contact-card:hover { border-color: var(--accent); } .contact-card--accent { background: var(--accent-soft); border-color: var(--accent-soft); } .contact-card--accent:hover { border-color: var(--accent); } .contact-card__label { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; } .contact-card__value { display: block; font-size: 14px; line-height: 1.5; color: var(--accent); text-decoration: none; font-weight: 500; word-break: break-word; } .contact-card__value:hover { text-decoration: underline; } .contact-card__value--plain { color: var(--ink); font-weight: 400; } .contact-card__value--plain:hover { text-decoration: none; } /* ============================================================ SUCCESS PAGE — Thank-you confirmation ============================================================ */ .success-section { padding: calc(var(--nav-h) + 100px) 0 100px; display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 200px); } .success-card { text-align: center; max-width: 600px; margin: 0 auto; } .success-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin: 0 auto 28px; animation: successIconIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; } @keyframes successIconIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } .success-title { font-size: clamp(2rem, 1rem + 4vw, 3.5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); margin: 16px 0 24px; } .success-deck { font-size: 1.1rem; line-height: 1.6; color: var(--ink-soft); max-width: 50ch; margin: 0 auto 16px; } .success-deck--small { font-size: 0.95rem; color: var(--ink-mute); margin-bottom: 40px; } .success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; } .success-meta { margin-top: 48px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } @media (max-width: 720px) { .contact-hero { padding: calc(var(--nav-h) + 50px) 0 40px; } .contact-section { padding: 24px 0 64px; } .success-section { padding: calc(var(--nav-h) + 60px) 0 60px; min-height: auto; } } /* Reduced motion — disable success icon animation */ @media (prefers-reduced-motion: reduce) { .success-icon { animation: none; } } /* ============================================================ QUIZ 2026 — Rich version with scenarios, animated progress, detailed result cards, LinkedIn share ============================================================ */ /* Slide animation for question transitions */ .quiz-card.is-animating .quiz-scenario, .quiz-card.is-animating .quiz-question, .quiz-card.is-animating .quiz-options { animation: quizSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards; } .quiz-card.is-animating .quiz-question { animation-delay: 0.05s; } .quiz-card.is-animating .quiz-options { animation-delay: 0.1s; } @keyframes quizSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .quiz-card.is-animating .quiz-scenario, .quiz-card.is-animating .quiz-question, .quiz-card.is-animating .quiz-options { animation: none !important; } } /* ── Top meta: counter + progress bar ── */ .quiz-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; } .quiz-meta__counter { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; } .quiz-meta__bar { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; } .quiz-meta__bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); } /* ── Scenario header (emoji + context label) ── */ .quiz-scenario { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .quiz-scenario__emoji { font-size: 28px; line-height: 1; display: inline-block; } .quiz-scenario__ctx { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); padding: 5px 12px; background: var(--accent-soft); border-radius: 999px; } /* ── Question — keep the editorial italic look but bigger ── */ .quiz-card .quiz-question { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 1rem + 1.5vw, 1.95rem); line-height: 1.32; color: var(--ink); margin-bottom: 28px; font-weight: 400; letter-spacing: -0.005em; } /* ── Options — now with letter badge + arrow on hover ── */ .quiz-card .quiz-options { display: flex; flex-direction: column; gap: 10px; } .quiz-card .quiz-option { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.97rem; color: var(--ink-2); transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.15s var(--ease); cursor: pointer; font-weight: 400; font-family: var(--sans); } .quiz-option__letter { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--warm); border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-soft); transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease); } .quiz-option__text { flex: 1; line-height: 1.45; } .quiz-option__arrow { flex-shrink: 0; color: var(--ink-mute); font-size: 16px; opacity: 0; transform: translateX(-6px); transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); } .quiz-card .quiz-option:hover { border-color: var(--accent); background: var(--bg); transform: translateX(4px); } .quiz-card .quiz-option:hover .quiz-option__letter { background: var(--accent); color: var(--bg); border-color: var(--accent); } .quiz-card .quiz-option:hover .quiz-option__arrow { opacity: 1; transform: translateX(0); color: var(--accent); } /* ── Result — rich layout ── */ .quiz-result-rich { text-align: center; animation: quizResultIn 0.7s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes quizResultIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .quiz-result-rich { animation: none; } } .quiz-result-rich__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .quiz-result-rich__elapsed { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); } .quiz-result-rich__icon { font-size: 56px; line-height: 1; margin: 12px 0 16px; display: inline-block; animation: quizIconBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards; } @keyframes quizIconBounce { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .quiz-result-rich__icon { animation: none; } } .quiz-result-rich__name { font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 1rem + 3vw, 3rem); font-weight: 400; color: var(--accent); margin: 0 0 12px; letter-spacing: -0.02em; line-height: 1; } .quiz-result-rich__tagline { font-size: 1.1rem; font-weight: 500; color: var(--ink); margin: 0 0 14px; letter-spacing: -0.01em; } .quiz-result-rich__desc { color: var(--ink-soft); max-width: 52ch; margin: 0 auto 36px; line-height: 1.65; } /* ── Strengths / Watch-outs columns ── */ .quiz-result-rich__cols { display: grid; grid-template-columns: 1fr; gap: 16px; text-align: left; margin-bottom: 32px; padding-top: 28px; border-top: 1px solid var(--line); } @media (min-width: 580px) { .quiz-result-rich__cols { grid-template-columns: 1fr 1fr; gap: 28px; } } .quiz-result-rich__col { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .quiz-result-rich__col-label { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .quiz-result-rich__list { list-style: none; padding: 0; margin: 0; } .quiz-result-rich__list li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); } .quiz-result-rich__list li::before { content: '+'; position: absolute; left: 0; top: 0; font-weight: 600; color: var(--accent); } .quiz-result-rich__list--watchouts li::before { content: '!'; color: var(--ink-soft); background: var(--warm); width: 14px; height: 14px; border-radius: 50%; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; top: 4px; } /* ── Recommended reading ── */ .quiz-result-rich__rec { background: var(--accent-soft); border-radius: var(--radius); padding: 20px 24px; text-align: left; margin-bottom: 32px; } .quiz-result-rich__rec-label { display: block; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .quiz-result-rich__rec-text { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); } .quiz-result-rich__rec-text em { font-style: italic; color: var(--ink); font-weight: 500; } /* ── Action buttons ── */ .quiz-result-rich__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .quiz-result-rich__share, .quiz-result-rich__copy, .quiz-result-rich__retry { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; padding: 11px 20px; } .quiz-result-rich__copy.is-copied { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .btn--ghost { background: transparent; border: 1px solid transparent; color: var(--ink-soft); cursor: pointer; font-family: var(--sans); border-radius: 999px; padding: 11px 20px; font-size: 14px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .btn--ghost:hover { background: var(--warm); color: var(--ink); } /* ── Mobile tweaks ── */ @media (max-width: 720px) { .quiz-meta { gap: 10px; } .quiz-meta__counter { font-size: 10px; } .quiz-scenario__emoji { font-size: 24px; } .quiz-scenario__ctx { font-size: 10px; padding: 4px 10px; } .quiz-card .quiz-option { padding: 14px 14px; font-size: 0.92rem; } .quiz-option__letter { width: 24px; height: 24px; font-size: 11px; } } /* ============================================================ ARTICLE HERO IMAGE — for cuisine articles Loading lazy, gracefully degrades if Unsplash blocks ============================================================ */ .article-hero-img { margin: 0 0 40px; border-radius: var(--radius-lg, 16px); overflow: hidden; aspect-ratio: 16 / 9; background: var(--warm); position: relative; } .article-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.6s var(--ease); } .article-hero-img img[loading="lazy"] { opacity: 0; } .article-hero-img img[loading="lazy"].is-loaded, .article-hero-img img:not([loading]) { opacity: 1; } @media (max-width: 720px) { .article-hero-img { margin-bottom: 28px; border-radius: 12px; } } /* ============================================================ EXPERTISE — 2×2 MATRIX ============================================================ */ .matrix-wrap { margin: 48px auto 0; max-width: 900px; padding-left: 80px; padding-bottom: 80px; position: relative; } .matrix-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg, 16px); overflow: hidden; aspect-ratio: 1.4 / 1; position: relative; } .matrix-cell { background: var(--bg); padding: 24px; display: flex; flex-direction: column; gap: 14px; min-height: 0; } .matrix-cell--tl { background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg) 100%); } .matrix-cell--tr { background: linear-gradient(225deg, var(--accent-soft) 0%, var(--bg) 100%); } .matrix-cell__label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); flex-shrink: 0; } .matrix-cell__items { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; } .matrix-item { display: inline-block; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; background: var(--warm); color: var(--ink-soft); font-weight: 400; border: 1px solid var(--line); line-height: 1.3; } .matrix-item--strong { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 500; } /* Y axis (left side) */ .matrix-axis { position: absolute; pointer-events: none; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } .matrix-axis--y { left: 0; top: 0; bottom: 80px; width: 60px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .matrix-axis--y::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--accent) 0%, var(--accent) 50%, transparent 100%); opacity: 0.4; } .matrix-axis--y .matrix-axis__top, .matrix-axis--y .matrix-axis__bottom { writing-mode: vertical-rl; transform: rotate(180deg); position: relative; z-index: 1; background: var(--bg); padding: 4px 0; } /* X axis (bottom) */ .matrix-axis--x { left: 0; right: 0; bottom: 32px; height: 40px; display: flex; justify-content: space-between; padding: 0 80px 0 80px; align-items: center; } .matrix-axis--x::before { content: ''; position: absolute; left: 80px; right: 0; top: 50%; height: 1px; background: linear-gradient(to right, transparent 0%, var(--accent) 50%, var(--accent) 100%); opacity: 0.4; } .matrix-axis--x .matrix-axis__left, .matrix-axis--x .matrix-axis__right { background: var(--bg); padding: 0 12px; position: relative; z-index: 1; } .matrix-legend { margin-top: 28px; text-align: center; font-size: 12px; font-family: var(--mono); letter-spacing: 0.06em; color: var(--ink-mute); display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; } .matrix-legend__strong, .matrix-legend__regular { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; margin-right: 4px; } .matrix-legend__strong { background: var(--accent); } .matrix-legend__regular { background: var(--warm); border: 1px solid var(--line); } @media (max-width: 720px) { .matrix-wrap { padding-left: 50px; padding-bottom: 60px; } .matrix-grid { aspect-ratio: auto; } .matrix-axis--y { width: 40px; bottom: 60px; } .matrix-axis--x { padding-left: 50px; bottom: 16px; } .matrix-cell { padding: 16px; gap: 10px; } .matrix-cell__label { font-size: 9px; } .matrix-item { font-size: 11px; padding: 4px 9px; } } /* ============================================================ EXPERTISE — FRAMEWORKS TIMELINE ============================================================ */ .frameworks-timeline { margin-top: 48px; position: relative; padding-left: 80px; } .frameworks-timeline::before { content: ''; position: absolute; left: 60px; top: 24px; bottom: 24px; width: 2px; background: var(--line); } .framework-row { position: relative; margin-bottom: 32px; display: grid; grid-template-columns: 80px 1fr; gap: 24px; align-items: start; } .framework-row:last-child { margin-bottom: 0; } .framework-row__year { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: 0.04em; margin-left: -80px; padding-top: 4px; position: relative; } .framework-row__year::after { content: ''; position: absolute; right: -28px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); z-index: 1; } .framework-row--current .framework-row__year::after { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .framework-row__content { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; transition: border-color 0.2s var(--ease); } .framework-row--current .framework-row__content { border-color: var(--accent); background: var(--accent-soft); } .framework-row__name { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.015em; } .framework-row__author { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-mute); letter-spacing: 0.04em; margin-left: 4px; } .framework-row__desc { font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; } .framework-row__bar { width: 100%; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; } .framework-row__bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); } .framework-row__bar-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-mute); margin-top: 6px; text-transform: uppercase; } .frameworks-takeaway { margin-top: 48px; padding: 28px 32px; background: var(--bg); border-radius: var(--radius); border-left: 3px solid var(--accent); } .frameworks-takeaway p { margin: 0; font-size: 1.05rem; line-height: 1.65; color: var(--ink-2); } .frameworks-takeaway strong { color: var(--ink); font-weight: 500; } @media (max-width: 720px) { .frameworks-timeline { padding-left: 50px; } .frameworks-timeline::before { left: 36px; } .framework-row { grid-template-columns: 60px 1fr; gap: 14px; } .framework-row__year { margin-left: -60px; font-size: 12px; } .framework-row__year::after { right: -22px; } .framework-row__content { padding: 16px 18px; } .frameworks-takeaway { padding: 20px 22px; } } /* ============================================================ SPEAKING & MEDIA PAGE ============================================================ */ .speaking-hero { padding: calc(var(--nav-h) + 80px) 0 60px; background: var(--bg); } .speaking-hero h1 { font-size: clamp(2.2rem, 1rem + 5vw, 4.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; color: var(--ink); margin: 0; } .speaking-section { padding: 32px 0 96px; } .speaking-card { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 36px; margin-bottom: 24px; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); } .speaking-card:hover { border-color: var(--accent); } .speaking-card--featured { background: var(--accent-soft); border-color: var(--accent-soft); } .speaking-card--featured:hover { border-color: var(--accent); } .speaking-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .speaking-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--warm); color: var(--accent); flex-shrink: 0; } .speaking-card--featured .speaking-card__icon { background: var(--bg); } .speaking-card__meta { display: flex; flex-direction: column; gap: 4px; } .speaking-card__type { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .speaking-card__date { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.04em; } .speaking-card__title { font-size: clamp(1.3rem, 0.9rem + 1.1vw, 1.7rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; color: var(--ink); margin: 0 0 16px; } .speaking-card__context { font-size: 0.97rem; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; } .speaking-card__context:last-of-type { margin-bottom: 18px; } .speaking-card__context strong { color: var(--ink); font-weight: 500; } .speaking-card__quote { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.55; color: var(--ink); border-left: 3px solid var(--accent); margin: 18px 0; padding: 4px 0 4px 20px; background: transparent; } .speaking-card__quote cite { display: block; margin-top: 12px; font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-mute); text-transform: uppercase; } .speaking-card__partners { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0; } .speaking-tag { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); background: var(--warm); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; } .speaking-card--featured .speaking-tag { background: var(--bg); } .speaking-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; margin-top: 6px; transition: gap 0.2s var(--ease); } .speaking-card__link:hover { gap: 10px; text-decoration: underline; } .speaking-cta { margin-top: 48px; padding: 40px 32px; background: var(--warm); border-radius: var(--radius-lg); text-align: center; border: 1px solid var(--line); } .speaking-cta p { font-size: 1.05rem; color: var(--ink-2); margin: 0 0 24px; max-width: 60ch; margin-left: auto; margin-right: auto; line-height: 1.6; } @media (max-width: 720px) { .speaking-hero { padding: calc(var(--nav-h) + 50px) 0 40px; } .speaking-section { padding: 24px 0 64px; } .speaking-card { padding: 22px 20px; } .speaking-card__head { flex-wrap: wrap; } .speaking-cta { padding: 28px 22px; } } /* ============================================================ FOOTER — Subgroup label (Hors travail / Off-duty) ============================================================ */ .footer__sub-label { display: block; margin-top: 20px; margin-bottom: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); opacity: 0.7; } /* ============================================================ POST SHARE — Buttons at the bottom of each article ============================================================ */ .post-share { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); } .post-share__label { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; } .post-share__buttons { display: flex; flex-wrap: wrap; gap: 8px; } .post-share__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--warm); border: 1px solid var(--line); border-radius: 999px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-soft); text-decoration: none; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease); } .post-share__btn svg { flex-shrink: 0; } .post-share__btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); transform: translateY(-1px); } .post-share__btn--copy.is-copied { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .post-share__btn--copy.is-copied:hover { /* keep the copied state appearance */ background: var(--accent-soft); color: var(--accent); transform: none; } @media (max-width: 540px) { .post-share__btn span { display: none; } .post-share__btn--copy span[data-share-copy-label] { display: inline; padding-left: 4px; } .post-share__btn { padding: 10px 12px; } } /* ============================================================ AUDIENCE LIST — Expertise page "À qui je m'adresse" section ============================================================ */ .audience-list { list-style: none; padding: 0; margin: 56px 0 0; display: grid; gap: 40px; } .audience-item { display: grid; grid-template-columns: 90px 1fr; gap: 32px; align-items: start; padding-top: 40px; border-top: 1px solid var(--line); } .audience-item:first-child { border-top: none; padding-top: 0; } .audience-item__num { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.18em; color: var(--accent); padding-top: 6px; } .audience-item__title { font-family: var(--sans); font-size: clamp(1.4rem, 0.8rem + 1.6vw, 2rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px; line-height: 1.15; } .audience-item__body p { font-size: 1.02rem; line-height: 1.7; color: var(--ink-soft); margin: 0; } @media (max-width: 720px) { .audience-item { grid-template-columns: 1fr; gap: 12px; } .audience-item__num { padding-top: 0; } } /* ============================================================ SPEAKING ILLUSTRATIONS — Editorial visuals per event ============================================================ */ .speaking-card__illustration { margin: 24px 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--warm); } .speaking-card__illustration img { width: 100%; height: auto; display: block; } /* ============================================================ MEGA FOOTER 2026 — Stripe/Linear inspired, with wordmark ============================================================ */ .footer-mega { background: var(--ink); color: var(--bg); padding: 80px 0 0; margin-top: 120px; position: relative; overflow: hidden; } .footer-mega__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .footer-mega__top { display: flex; flex-wrap: wrap; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Modern browsers: use grid */ @supports (display: grid) { .footer-mega__top { display: grid; grid-template-columns: minmax(280px, 1.5fr) repeat(4, 1fr); } } /* Brand block takes more space in flexbox fallback */ .footer-mega__top > .footer-mega__brand { flex: 1 1 280px; min-width: 280px; max-width: 320px; } /* Each col in flexbox fallback */ .footer-mega__top > .footer-mega__col { flex: 1 1 140px; min-width: 140px; } .footer-mega__brand { display: flex; flex-direction: column; gap: 16px; } .footer-mega__logo { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; } .footer-mega__logo-dot { width: 9px; height: 9px; background: var(--accent); border-radius: 50%; align-self: center; } .footer-mega__logo-name { font-family: var(--sans); font-weight: 500; letter-spacing: 0.25em; font-size: 13px; color: var(--bg); text-transform: uppercase; } .footer-mega__logo-tagline { font-family: var(--serif); font-style: italic; font-size: 13px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; } .footer-mega__brand-text { font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.55); max-width: 280px; } .footer-mega__col { display: flex; flex-direction: column; gap: 16px; } .footer-mega__col-title { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.40); margin-bottom: 4px; } .footer-mega__col a { font-family: var(--sans); font-size: 0.92rem; color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: color 0.15s var(--ease); line-height: 1.4; } .footer-mega__col a:hover { color: var(--bg); } .footer-mega__col-sublabel { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.25); margin-top: 12px; margin-bottom: 0; } /* The giant MATTHIEU wordmark */ .footer-mega__wordmark { font-family: var(--sans); font-weight: 700; font-size: clamp(60px, 16vw, 220px); letter-spacing: -0.04em; line-height: 1; color: rgba(255, 255, 255, 0.08); text-align: center; margin: 40px 0 -10px; user-select: none; pointer-events: none; } .footer-mega__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 28px 0 32px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .footer-mega__copyright { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.40); } .footer-mega__legal { display: flex; gap: 20px; flex-wrap: wrap; } .footer-mega__legal a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.40); text-decoration: none; transition: color 0.15s var(--ease); } .footer-mega__legal a:hover { color: var(--bg); } .footer-mega__theme { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; color: rgba(255, 255, 255, 0.40); letter-spacing: 0.1em; } .footer-mega__theme-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.6); } @media (max-width: 1080px) { .footer-mega__top { grid-template-columns: 1fr 1fr; gap: 40px; } .footer-mega__brand { grid-column: 1 / -1; } } @media (max-width: 600px) { .footer-mega { padding-top: 60px; margin-top: 80px; } .footer-mega__inner { padding: 0 24px; } .footer-mega__top { grid-template-columns: 1fr; gap: 32px; } .footer-mega__wordmark { font-size: clamp(40px, 22vw, 100px); } .footer-mega__bottom { flex-direction: column; align-items: flex-start; } } /* ============================================================ SPEAKING CTAs — Reinforced action buttons per event ============================================================ */ .speaking-card__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 11px 18px; background: var(--bg); border: 1px solid var(--ink); border-radius: 999px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease); position: relative; } .speaking-card__cta:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(10, 10, 10, 0.08); } .speaking-card__cta-icon { display: inline-flex; align-items: center; justify-content: center; opacity: 0.75; transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); } .speaking-card__cta:hover .speaking-card__cta-icon { opacity: 1; transform: translate(2px, -2px); } /* LinkedIn variant — accent color */ .speaking-card__cta--linkedin { border-color: #0a66c2; color: #0a66c2; } .speaking-card__cta--linkedin:hover { background: #0a66c2; color: var(--bg); } /* Replay variant — play icon feel */ .speaking-card__cta--replay { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .speaking-card__cta--replay:hover { background: var(--accent); color: var(--bg); } /* Web/registration variant — neutral but distinct */ .speaking-card__cta--web { border-color: var(--ink-soft); color: var(--ink-soft); } .speaking-card__cta--web:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* ============================================================ LECTURES PAGE — 2-column reading bibliography ============================================================ */ .lectures-grid { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; margin-top: 24px; } .lectures-grid > .lectures-col { flex: 1 1 calc(50% - 32px); min-width: 280px; } @supports (display: grid) { .lectures-grid { display: grid; grid-template-columns: 1fr 1fr; } .lectures-grid > .lectures-col { flex: initial; } } .lectures-col { min-width: 0; } .lectures-col__head { margin-bottom: 40px; padding-bottom: 28px; border-bottom: 2px solid var(--ink); } .lectures-col__title { font-family: var(--sans); font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin: 8px 0 16px; } .lectures-col__lead { font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); max-width: 480px; } /* Each thematic section */ .lectures-section { margin-bottom: 56px; } .lectures-section__title { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } /* Featured book (with paragraph) */ .lectures-book { margin-bottom: 24px; } .lectures-book--featured { padding: 20px 22px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 18px; transition: border-color 0.18s var(--ease), transform 0.18s var(--ease); } .lectures-book--featured:hover { border-color: var(--accent); transform: translateY(-2px); } .lectures-book__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .lectures-book__title-line { font-family: var(--serif); font-style: italic; font-size: 1.18rem; font-weight: 400; color: var(--ink); line-height: 1.25; letter-spacing: -0.005em; } .lectures-book__meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-soft); text-transform: none; } .lectures-book__note { font-size: 0.95rem; line-height: 1.6; color: var(--ink); margin: 0; } /* Simple list */ .lectures-list { list-style: none; padding: 0; margin: 16px 0 0; } .lectures-list li { position: relative; padding: 8px 0 8px 18px; font-size: 0.95rem; line-height: 1.4; color: var(--ink-soft); border-bottom: 1px dotted var(--line); } .lectures-list li:last-child { border-bottom: none; } .lectures-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); } .lectures-list li em { font-style: italic; color: var(--ink); } /* "On my table" final section special styling */ .lectures-section--table { background: var(--warm); padding: 28px 24px; border-radius: 4px; border: 1px dashed var(--line); margin-top: 64px; } .lectures-section--table .lectures-section__title { border-bottom: none; margin-bottom: 14px; padding-bottom: 0; } .lectures-table__intro { font-size: 0.92rem; font-style: italic; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.5; } /* Responsive — stack on tablet/mobile */ @media (max-width: 980px) { .lectures-grid { grid-template-columns: 1fr; gap: 56px; } .lectures-col__head { padding-bottom: 20px; } } @media (max-width: 620px) { .lectures-section { margin-bottom: 40px; } .lectures-book--featured { padding: 16px 18px; } .lectures-book__title-line { font-size: 1.08rem; } } /* ============================================================ SEARCH PALETTE — Modern Cmd+K search experience ============================================================ */ /* Trigger button in nav */ .search-trigger { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; font-family: var(--sans); font-size: 13px; color: var(--ink-soft); cursor: pointer; transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease); -webkit-appearance: none; appearance: none; } .search-trigger:hover { border-color: var(--ink); color: var(--ink); } .search-trigger__icon { display: inline-flex; align-items: center; opacity: 0.7; } .search-trigger__label { letter-spacing: 0.01em; } .search-trigger__kbd { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; background: var(--warm); border: 1px solid var(--line); border-radius: 4px; font-family: var(--mono); font-size: 10px; color: var(--ink-soft); letter-spacing: 0.04em; } /* Overlay backdrop */ .search-overlay { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1000; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; opacity: 0; visibility: hidden; transition: opacity 0.18s var(--ease), visibility 0.18s var(--ease); } .search-overlay--active { opacity: 1; visibility: visible; } /* Palette itself */ .search-palette { width: min(640px, 92vw); max-height: 76vh; display: flex; flex-direction: column; background: var(--bg); border-radius: 12px; box-shadow: 0 25px 60px rgba(10, 10, 10, 0.25), 0 8px 24px rgba(10, 10, 10, 0.12); overflow: hidden; transform: translateY(-8px) scale(0.98); opacity: 0; transition: transform 0.18s var(--ease), opacity 0.18s var(--ease); } .search-overlay--active .search-palette { transform: translateY(0) scale(1); opacity: 1; } /* Input area */ .search-input-wrap { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); } .search-input-icon { flex-shrink: 0; color: var(--ink-soft); } .search-input { flex: 1; border: none; background: transparent; font-family: var(--sans); font-size: 16px; color: var(--ink); outline: none; padding: 0; letter-spacing: -0.005em; } .search-input::placeholder { color: var(--ink-soft); opacity: 0.7; } .search-close { background: none; border: none; padding: 4px; cursor: pointer; display: inline-flex; align-items: center; } .search-close kbd { display: inline-flex; align-items: center; padding: 4px 8px; background: var(--warm); border: 1px solid var(--line); border-radius: 4px; font-family: var(--mono); font-size: 10px; color: var(--ink-soft); letter-spacing: 0.06em; text-transform: lowercase; } /* Results scrollable area */ .search-results { flex: 1; overflow-y: auto; padding: 8px 0; min-height: 80px; max-height: 60vh; } .search-results::-webkit-scrollbar { width: 6px; } .search-results::-webkit-scrollbar-track { background: transparent; } .search-results::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } /* Result sections */ .search-section { padding: 8px 0; } .search-section__title { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); padding: 8px 20px 8px; margin-top: 4px; } /* Individual result */ .search-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 12px 20px; text-decoration: none; color: var(--ink); transition: background 0.12s var(--ease); border-left: 2px solid transparent; cursor: pointer; } .search-item:hover, .search-item--selected { background: var(--warm); border-left-color: var(--accent); } .search-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--warm); border-radius: 6px; color: var(--ink-soft); flex-shrink: 0; } .search-item--selected .search-item__icon { background: var(--bg); color: var(--accent); } .search-item__body { min-width: 0; } .search-item__title { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.3; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-item__excerpt { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-item__title mark, .search-item__excerpt mark { background: var(--accent-soft, rgba(30, 58, 138, 0.12)); color: var(--accent); padding: 0 2px; border-radius: 2px; font-weight: 500; } .search-item__cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-soft); text-transform: uppercase; padding: 3px 8px; background: var(--warm); border-radius: 4px; flex-shrink: 0; } .search-item--selected .search-item__cat { background: var(--bg); } /* Empty state */ .search-empty { padding: 32px 24px; text-align: center; font-size: 13px; color: var(--ink-soft); font-style: italic; margin: 0; } .search-noresults { padding: 48px 24px; text-align: center; } .search-noresults__title { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 6px; } .search-noresults__hint { font-size: 13px; color: var(--ink-soft); } /* Footer with kbd hints */ .search-footer { display: flex; gap: 20px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--warm); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-soft); text-transform: lowercase; } .search-footer span { display: inline-flex; align-items: center; gap: 6px; } .search-footer kbd { display: inline-flex; align-items: center; padding: 2px 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0; text-transform: none; } /* Tablet adjustments — switch search to icon-only earlier so the 5 direct nav links (À propos · Parcours · Expertise · Ressources · Contact) breathe better */ @media (max-width: 1280px) { .search-trigger__label, .search-trigger__kbd { display: none; } .search-trigger { padding: 0; width: 36px; height: 36px; justify-content: center; border-radius: 50%; gap: 0; flex-shrink: 0; } .search-trigger__icon { opacity: 0.85; } } @media (max-width: 640px) { .nav__controls { gap: 8px; } .search-trigger { width: 34px; height: 34px; } .search-trigger__icon svg { width: 13px; height: 13px; } } @media (max-width: 420px) { .search-trigger { width: 32px; height: 32px; } .menu-trigger__label { display: none; } .menu-trigger { padding: 6px; width: 32px; height: 32px; justify-content: center; } } @media (max-width: 620px) { .search-overlay { padding-top: 8vh; } .search-palette { width: 96vw; max-height: 84vh; } .search-input { font-size: 15px; } .search-footer { flex-wrap: wrap; gap: 12px; font-size: 9.5px; } } /* Dark mode adjustments */ [data-theme="dark"] .search-overlay { background: rgba(0, 0, 0, 0.65); } [data-theme="dark"] .search-trigger { background: var(--bg); border-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .search-palette { background: var(--bg); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .search-item__title mark, [data-theme="dark"] .search-item__excerpt mark { background: rgba(79, 111, 199, 0.2); color: var(--accent); } /* ============================================================ EDUCATION WORLD MAP + CARDS — CV page ============================================================ */ /* ============================================================ EDU JOURNEY — clean horizontal timeline of education cities ============================================================ */ /* =========================================================== WORLD MAP — education geography (unified FR + EN) =========================================================== */ .world-map { position: relative; max-width: 1100px; margin: 0 auto 80px; padding: 28px 24px 24px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; } .world-map::before, .world-map::after { content: ""; position: absolute; width: 22px; height: 22px; opacity: 0.4; pointer-events: none; } .world-map::before { top: 10px; left: 10px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); } .world-map::after { bottom: 10px; right: 10px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); } .world-map__inner { width: 100%; overflow: hidden; } .world-map__svg { width: 100%; height: auto; display: block; color: var(--ink); max-height: 540px; } .world-map__arc { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: 0.55; fill: none; } .world-map__arc--short { stroke-dasharray: 2 3; opacity: 0.7; } .world-point { cursor: pointer; transition: transform 0.2s var(--ease); } .world-point:hover, .world-point:focus { outline: none; transform: translateY(-1px); } .world-point__pulse { fill: var(--accent); opacity: 0.18; transform-origin: center; animation: worldPulse 2.6s ease-out infinite; } .world-point:nth-of-type(2) .world-point__pulse { animation-delay: 0.65s; } .world-point:nth-of-type(3) .world-point__pulse { animation-delay: 1.3s; } .world-point:nth-of-type(4) .world-point__pulse { animation-delay: 1.95s; } @keyframes worldPulse { 0% { transform: scale(1); opacity: 0.35; } 70% { transform: scale(2); opacity: 0; } 100% { transform: scale(2); opacity: 0; } } .world-point__dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2.5; transition: r 0.2s var(--ease), fill 0.2s var(--ease); } .world-point__dot--current { fill: var(--ink); } .world-point:hover .world-point__dot, .world-point:focus .world-point__dot { r: 8; } .world-point__leader { stroke: var(--ink-soft); stroke-width: 0.6; opacity: 0.45; } .world-point__city { fill: var(--ink); font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; } .world-point__meta { fill: var(--ink-mute); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } .world-map__caption { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding: 0 8px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); } .world-map__caption-bar { display: block; flex-shrink: 0; width: 3px; margin-top: 6px; align-self: stretch; background: var(--accent); opacity: 0.6; } /* Responsive — at smaller widths, scale fonts to keep map readable */ @media (max-width: 820px) { .world-map { padding: 22px 14px 18px; margin-bottom: 48px; } .world-point__city { font-size: 13px; } .world-point__meta { font-size: 9px; } } @media (max-width: 560px) { .world-map { padding: 18px 10px 14px; } .world-point__city { font-size: 12px; } .world-point__meta { font-size: 8.5px; } } [data-theme="dark"] .world-map { background: var(--bg); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .world-point__dot { stroke: var(--bg); } /* Education cards grid */ .edu-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 980px; margin: 0 auto; } /* Avec un nombre impair de cards, la dernière card seule sur sa ligne s'étend sur les deux colonnes pour un rendu équilibré. */ .edu-cards > .edu-card:last-child:nth-child(odd) { grid-column: 1 / -1; } /* Tablet — keep 2 columns but gap a bit tighter */ @media (max-width: 880px) { .edu-cards { gap: 20px; } } /* Mobile — single column stack, generous gap, preserved card chrome */ @media (max-width: 700px) { .edu-cards { grid-template-columns: 1fr; gap: 18px; max-width: 100%; } .edu-card { padding: 22px 20px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } /* Accent borders stay visible */ .edu-card--asia { border-top: 3px solid var(--accent); } .edu-card--recent { border-left: 3px solid var(--accent); } /* Tighter head spacing on small screens */ .edu-card__head { margin-bottom: 10px; } .edu-card__title { font-size: 1.15rem; line-height: 1.25; } .edu-card__body { font-size: 0.94rem; line-height: 1.55; } } .edu-card { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 28px 26px; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); scroll-margin-top: 120px; position: relative; } .edu-card:hover, .edu-card:target { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); } .edu-card:target { background: var(--warm); } .edu-card--asia { border-top: 3px solid var(--accent); } .edu-card--recent { border-left: 3px solid var(--accent); } .edu-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; } .edu-card__year { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); font-weight: 500; } .edu-card__location { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-soft); text-transform: uppercase; } .edu-card__title { font-family: var(--sans); font-size: 1.18rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 6px; } .edu-card__school { font-family: var(--serif); font-style: italic; font-size: 0.96rem; color: var(--ink-soft); margin-bottom: 14px; } .edu-card__body { font-size: 0.94rem; line-height: 1.6; color: var(--ink); margin: 0 0 16px; } .edu-card__tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; padding: 4px 10px; background: var(--warm); border-radius: 999px; } /* Responsive */ @media (max-width: 720px) { .edu-cards { grid-template-columns: 1fr; gap: 20px; } .edu-card { padding: 22px 20px; } } /* Dark mode adjustments */ [data-theme="dark"] .edu-card:target { background: rgba(255, 255, 255, 0.04); } /* Metro station stage (internship) variant — slightly smaller, dotted style */ .metro-station__circle--stage { fill: var(--bg); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2 2; } .metro-station[data-station="cultural-tourism-dc"] .metro-station__role, .metro-station[data-station="cultural-tourism-dc"] .metro-station__company { font-style: italic; opacity: 0.75; } /* Labels positioned BELOW the metro line — avoid horizontal collision with neighbors */ .metro-station__year--below { font-size: 11px; fill: var(--accent); } .metro-station__role--below { font-size: 12px; font-weight: 500; } .metro-station__company--below { font-size: 10px; } .metro-station[data-station="cultural-tourism-dc"]:hover .metro-station__circle--stage, .metro-station[data-station="cultural-tourism-dc"]:focus .metro-station__circle--stage, .metro-station[data-station="cultural-tourism-dc"].is-active .metro-station__circle--stage { fill: var(--accent); stroke-dasharray: none; } /* Stage/internship badge in the experience timeline */ .exp-stage-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft, #e8edf9); color: var(--accent); font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 2px; } /* ───────────────────────────────────────────────────────── CHESS GAME — editorial style chessboard ───────────────────────────────────────────────────────── */ .chess-wrapper { max-width: 1100px; margin: 32px auto 0; padding: 0 24px 60px; } .chess-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; } @media (max-width: 880px) { .chess-layout { grid-template-columns: 1fr; gap: 24px; } } /* Board */ .chess-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1; width: 100%; max-width: 640px; margin: 0 auto; background: var(--warm); border: 1px solid var(--ink); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); user-select: none; } .chess-board--flipped { transform: rotate(180deg); } .chess-board--flipped .chess-piece, .chess-board--flipped .chess-square__rank, .chess-board--flipped .chess-square__file { transform: rotate(180deg); } /* Squares */ .chess-square { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.15s ease; } .chess-square--light { background: #f3ead7; /* warm cream */ } .chess-square--dark { background: #b58863; /* warm wood */ } :root[data-theme="dark"] .chess-square--light { background: #d4c5a4; } :root[data-theme="dark"] .chess-square--dark { background: #8b6943; } /* Highlights */ .chess-square--selected { background: #f6c668 !important; } .chess-square--last-move { background: #efd97a; } .chess-square--last-move.chess-square--dark { background: #c9a85a; } .chess-square--legal-move::after { content: ''; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(30, 58, 138, 0.35); pointer-events: none; } .chess-square--legal-capture { box-shadow: inset 0 0 0 4px rgba(196, 82, 58, 0.7); } .chess-square--check { background: radial-gradient(circle, rgba(196, 82, 58, 0.65) 0%, rgba(196, 82, 58, 0.3) 60%, transparent 100%); } /* Coord labels */ .chess-square__rank, .chess-square__file { position: absolute; font-family: var(--mono); font-size: 10px; font-weight: 500; opacity: 0.55; pointer-events: none; letter-spacing: 0; } .chess-square__rank { top: 2px; left: 4px; } .chess-square__file { bottom: 2px; right: 4px; } /* Pieces */ .chess-piece { font-size: clamp(28px, 7vw, 52px); line-height: 1; cursor: pointer; user-select: none; pointer-events: none; } /* White pieces — light fill with crisp dark outline so they read on light squares too. We use -webkit-text-stroke (well supported on modern browsers) + a subtle drop shadow for depth. This is the chess.com / lichess look. */ .chess-piece--w { color: #fdfaf4; -webkit-text-stroke: 1.6px #1a1a1a; text-stroke: 1.6px #1a1a1a; paint-order: stroke fill; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); } /* Black pieces — solid dark with subtle highlight outline for parity */ .chess-piece--b { color: #1a1a1a; -webkit-text-stroke: 0.6px #1a1a1a; text-stroke: 0.6px #1a1a1a; paint-order: stroke fill; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); } .chess-piece--small { font-size: 18px; line-height: 1; text-shadow: none; filter: none; -webkit-text-stroke: 0.8px #1a1a1a; text-stroke: 0.8px #1a1a1a; margin-right: 2px; } .chess-piece--small.chess-piece--b { -webkit-text-stroke: 0; text-stroke: 0; } /* Side panel */ .chess-side { display: flex; flex-direction: column; gap: 20px; font-size: 0.95rem; } @media (max-width: 880px) { .chess-side { max-width: 640px; margin: 0 auto; width: 100%; } } .chess-status-block { background: var(--warm); border-left: 3px solid var(--accent); padding: 14px 16px; border-radius: 0 4px 4px 0; } .chess-status-label { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; } .chess-status { font-size: 1.05rem; font-weight: 500; color: var(--ink); margin-bottom: 4px; } .chess-turn { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-soft); } .chess-captured { display: flex; flex-direction: column; gap: 10px; } .chess-captured-row { display: flex; flex-direction: column; gap: 4px; } .chess-captured-label { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft); } .chess-captured-pieces { min-height: 22px; display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 0; } .chess-controls { display: flex; flex-direction: column; gap: 10px; } .chess-control { display: flex; flex-direction: column; gap: 4px; } .chess-control-label { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft); } .chess-control-input { padding: 8px 10px; font-family: inherit; font-size: 0.9rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); cursor: pointer; } .chess-btn { padding: 9px 12px; font-family: inherit; font-size: 0.85rem; font-weight: 500; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); cursor: pointer; transition: all 0.15s ease; } .chess-btn:hover { border-color: var(--accent); color: var(--accent); } .chess-btn--primary { background: var(--accent); color: var(--bg); border-color: var(--accent); } .chess-btn--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); } .chess-moves-block { display: flex; flex-direction: column; gap: 6px; } .chess-moves-label { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft); } .chess-moves { max-height: 200px; overflow-y: auto; font-family: var(--mono); font-size: 0.82rem; background: var(--warm); border-radius: 4px; padding: 8px 10px; border: 1px solid var(--line); } .chess-move-row { display: grid; grid-template-columns: 24px 1fr 1fr; gap: 8px; padding: 2px 0; } .chess-move-num { color: var(--ink-soft); font-size: 0.78rem; } .chess-move-white, .chess-move-black { color: var(--ink); } /* ───────────────────────────────────────────────────────── CV DOWNLOAD BUTTON ───────────────────────────────────────────────────────── */ .cv-download { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .btn--download { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; font-family: inherit; font-size: 0.95rem; font-weight: 500; background: var(--accent); color: var(--bg); border: 1px solid var(--accent); border-radius: 4px; text-decoration: none; transition: all 0.2s ease; cursor: pointer; } .btn--download:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); } .cv-download__icon { flex-shrink: 0; } /* ───────────────────────────────────────────────────────── MEGA-NAV — HORS TRAVAIL SUB-SECTION ───────────────────────────────────────────────────────── */ .mega-nav__divider { margin: 14px 0 6px; height: 1px; background: var(--line); opacity: 0.6; } .mega-nav__sublabel { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin: 6px 0 8px; } .mega-nav__item--compact { padding: 8px 0; display: grid; grid-template-columns: auto 1fr auto; gap: 0 18px; align-items: baseline; } .mega-nav__item--compact .mega-nav__num { align-self: start; padding-top: 2px; grid-row: 1; grid-column: 1; } .mega-nav__item--compact .mega-nav__body { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .mega-nav__item--compact .mega-nav__title { font-size: 0.98rem; font-weight: 500; } .mega-nav__item--compact .mega-nav__desc { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-top: 1px; font-family: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; } .mega-nav__item--compact .mega-nav__arrow { grid-row: 1; grid-column: 3; font-size: 1.1rem; color: var(--ink-soft); align-self: center; } .mega-nav__item--compact:hover .mega-nav__arrow { color: var(--accent); transform: translateX(2px); transition: all 0.2s ease; } /* ───────────────────────────────────────────────────────── HERO MAGAZINE 2026 — masthead + bigger title + status badge ───────────────────────────────────────────────────────── */ /* Lift the section padding to make room for the masthead */ .hero--mag { padding-top: 0; } /* ── MASTHEAD — top strip with edition info + live time + status ── */ /* ── MODERN HERO TOPBAR — replaces the dated "Vol. 2026 / Édition 05" magazine masthead ── Cleaner, lighter, 2026 portfolio aesthetic. */ .hero__topbar { position: relative; padding: calc(var(--nav-h) + 20px) 0 0; margin-bottom: 64px; opacity: 0; animation: heroFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards; } .hero__topbar-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); } .hero__topbar-left, .hero__topbar-right { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-variant-numeric: tabular-nums; } /* Location with icon + live time */ .hero__location { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); } .hero__location-icon { display: inline-flex; align-items: center; color: var(--accent); margin-right: 2px; } .hero__location-text { color: var(--ink); font-weight: 500; } .hero__location-time { color: var(--ink-mute); margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; letter-spacing: 0.05em; } /* ── STATUS BADGE — refined pulsing dot ── */ .hero__status { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-weight: 500; } .hero__status-pulse { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2ea043; flex-shrink: 0; } .hero__status-pulse::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #2ea043; opacity: 0.6; animation: statusPulseRing 2.2s ease-out infinite; } @keyframes statusPulseRing { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes statusPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(46, 160, 67, 0.18); } 50% { box-shadow: 0 0 0 5px rgba(46, 160, 67, 0.28); } } /* Mobile responsive — stack topbar items */ @media (max-width: 720px) { .hero__topbar { padding-top: calc(var(--nav-h) + 16px); margin-bottom: 40px; } .hero__topbar-inner { padding: 0 20px 14px; gap: 12px; font-size: 10px; } .hero__location-time { padding-left: 6px; margin-left: 2px; } } .hero__status-text { letter-spacing: 0.14em; } /* ── BIGGER TITLE for magazine treatment ── */ .hero__title--mag { font-size: clamp(3.2rem, 1.4rem + 9.5vw, 8.5rem) !important; letter-spacing: -0.05em !important; line-height: 0.94 !important; font-weight: 600; } .hero__line--accent { font-style: italic; font-weight: 500; margin-top: -0.05em; margin-bottom: 0.06em; } .hero__title--mag .hero__line--small { font-size: 0.42em; font-weight: 500; color: var(--ink-soft); letter-spacing: -0.02em; margin-top: 0.4em; line-height: 1.2; max-width: 22ch; } /* ── JUSTIFIED LEAD PARAGRAPH (editorial magazine style) ── */ .hero__sub--justified { text-align: justify; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; text-wrap: pretty; max-width: 58ch !important; font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.18rem) !important; line-height: 1.55 !important; } /* Drop cap touch on lead paragraph — first letter slightly larger */ .hero__sub--justified::first-letter { font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: 1.4em; color: var(--accent); line-height: 1; margin-right: 2px; } /* ── RESPONSIVE ── */ @media (max-width: 860px) { .hero__masthead-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 20px 12px; } .hero__masthead-left { flex-wrap: wrap; font-size: 10px; gap: 6px 8px; row-gap: 4px; } .hero__masthead-right { font-size: 10px; } } @media (max-width: 620px) { .hero--mag .hero__masthead { margin-bottom: 32px; } .hero__masthead-inner { gap: 8px; padding: 0 16px 10px; } /* Masthead: split into 2 visible rows on phones — left info on top, status badge below */ .hero__masthead-left { font-size: 9.5px; letter-spacing: 0.1em; gap: 4px 7px; row-gap: 3px; line-height: 1.5; } .hero__masthead-mark { font-size: 13px; margin-right: 2px; } /* Soften the dot separators slightly on mobile */ .hero__masthead-sep { opacity: 0.4; } /* Status badge: more present on its own row */ .hero__masthead-right { font-size: 9.5px; width: 100%; padding-top: 6px; border-top: 1px solid rgba(0,0,0,0.06); } .hero__status { gap: 6px; } .hero__status-dot { width: 6px; height: 6px; } .hero__masthead-num { font-size: 8px; padding: 2px 4px; } /* Title shrinks */ .hero__title--mag { font-size: clamp(2.4rem, 1rem + 9vw, 4rem) !important; } .hero__sub--justified::first-letter { font-size: 1.2em; } } @media (max-width: 400px) { /* Tiny phones — break some meta items into separate lines for legibility */ .hero__masthead-left { font-size: 9px; letter-spacing: 0.08em; } /* Force a soft break before Madrid on tiny screens by allowing wrapping */ .hero__masthead-item { white-space: normal; } } /* ── REDUCED MOTION ── */ @media (prefers-reduced-motion: reduce) { .hero__status-dot { animation: none; } .hero__masthead { opacity: 1; } } /* ─── Inline SVG inside hero figure (no separate file) ─── */ .article-hero-img svg { width: 100%; height: 100%; display: block; object-fit: cover; } /* ───────────────────────────────────────────────────────── CONTACT HERO — 2 columns: text + four-facets illustration ───────────────────────────────────────────────────────── */ .contact-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .contact-hero__text { min-width: 0; } .contact-hero__image { margin: 0; position: relative; } .contact-hero__image img { width: 100%; height: auto; display: block; border-radius: 6px; } @media (max-width: 880px) { .contact-hero__grid { grid-template-columns: 1fr; gap: 40px; } .contact-hero__image { max-width: 540px; margin: 0 auto; } } /* ───────────────────────────────────────────────────────── ABOUT HERO PORTRAIT — pencil sketch of Mat ───────────────────────────────────────────────────────── */ .about-hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; } .about-hero__text { min-width: 0; } .about-hero__portrait { margin: 0; position: relative; } .about-hero__portrait img { width: 100%; height: auto; display: block; border-radius: 4px; filter: grayscale(0.05) contrast(1.02); box-shadow: 0 4px 24px rgba(0,0,0,0.08); } /* Subtle frame line */ .about-hero__portrait::after { content: ''; position: absolute; top: 14px; left: 14px; right: -14px; bottom: -14px; border: 1px solid var(--accent); border-radius: 4px; z-index: -1; opacity: 0.5; } @media (max-width: 880px) { .about-hero__grid { grid-template-columns: 1fr; gap: 40px; } .about-hero__portrait { max-width: 420px; margin: 0 auto; } } /* ───────────────────────────────────────────────────────── ABOUT HERO ILLUSTRATION — replaces portrait ───────────────────────────────────────────────────────── */ .about-hero__illustration { margin: 0; position: relative; } .about-hero__illustration img { width: 100%; height: auto; display: block; } @media (max-width: 880px) { .about-hero__illustration { max-width: 480px; margin: 0 auto; } } /* ───────────────────────────────────────────────────────── LARGE SCREEN RESPONSIVE — 1440px+ and 1920px+ The base container is 1280px which leaves huge dead margins on big screens. Scale containers and key typography up. ───────────────────────────────────────────────────────── */ /* 1440px+ : expand container, breathe a bit */ @media (min-width: 1440px) { :root { --container: 1400px; --container-narrow: 1040px; } /* Hero title scales with viewport more aggressively at this point */ .hero__title--mag { font-size: clamp(3.2rem, 1.4rem + 9.5vw, 11rem) !important; } /* Hero aside slightly larger */ .hero--2026 .hero__aside { font-size: 1.02rem; } } /* 1920px+ : large screens (most modern desktops, 4K, ultrawide) */ @media (min-width: 1920px) { :root { --container: 1600px; --container-narrow: 1180px; } /* More generous outer padding */ .container, .container--narrow { padding: 0 48px; } /* Body base font slightly larger so prose isn't tiny */ html { font-size: 17.5px; } /* Hero title can really stretch */ .hero__title--mag { font-size: clamp(3.2rem, 1.4rem + 9vw, 13rem) !important; } /* More padding in hero on huge screens */ .hero--2026 { padding: calc(var(--nav-h) + 80px) 0 120px; } /* Slightly larger pillar cards */ .pillar { padding: 40px 36px; } /* Section spacing breathes more */ .section { padding: 96px 0; } .section--small { padding: 64px 0; } } /* 2560px+ : ultra-wide / 4K monitors — cap the container so content stays readable */ @media (min-width: 2560px) { :root { --container: 1800px; --container-narrow: 1280px; } html { font-size: 19px; } .hero__title--mag { font-size: clamp(3.2rem, 1.4rem + 8vw, 15rem) !important; } } /* ───────────────────────────────────────────────────────── RESOURCES PAGE — Editorial 2026 redesign ───────────────────────────────────────────────────────── */ /* Hero with editorial masthead */ .blog-hero--editorial { padding: calc(var(--nav-h) + 32px) 0 40px; } /* Top masthead strip */ .blog-hero__masthead { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 32px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); width: 100%; flex-wrap: wrap; } .blog-hero__mast-mark { font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 500; } .blog-hero__mast-dot { color: var(--accent); font-size: 0.7em; vertical-align: 0.15em; margin: 0 -2px; } .blog-hero__mast-sep { color: var(--ink-mute); opacity: 0.5; } .blog-hero__mast-item { color: var(--ink-soft); } .blog-hero__mast-item--accent { color: var(--accent); font-weight: 600; } /* Main title + meta stats */ .blog-hero__head { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: end; margin-bottom: 56px; } .blog-hero__title { font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.5rem); line-height: 0.95; letter-spacing: -0.04em; font-weight: 600; margin: 0; max-width: 18ch; } .blog-hero__title-line { display: block; } .blog-hero__title-line--italic { font-style: italic; font-weight: 500; margin: 0; display: inline-block; } .blog-hero__title-line--italic + .blog-hero__title-line { display: inline; } .blog-hero__lead { margin-top: 28px; max-width: 62ch; font-size: 1.08rem; line-height: 1.6; color: var(--ink-soft); } .blog-hero__meta { display: flex; flex-direction: column; gap: 12px; padding-left: 32px; border-left: 1px solid var(--line); align-self: end; } .blog-hero__meta-row { display: flex; align-items: baseline; gap: 12px; } .blog-hero__meta-num { font-family: var(--serif, Georgia, serif); font-size: 2.4rem; font-weight: 600; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; } .blog-hero__meta-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } /* Toolbar — search */ .blog-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .blog-toolbar__search { flex: 1; min-width: 280px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .blog-toolbar__search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196, 82, 58, 0.1); } .blog-toolbar__search-icon { color: var(--ink-mute); flex-shrink: 0; } .blog-toolbar__search-input { flex: 1; border: 0; background: transparent; font-family: inherit; font-size: 0.95rem; color: var(--ink); outline: none; min-width: 0; } .blog-toolbar__search-input::placeholder { color: var(--ink-mute); } .blog-toolbar__kbd { font-family: var(--mono); font-size: 10px; padding: 3px 6px; background: var(--warm); border: 1px solid var(--line); border-radius: 3px; color: var(--ink-mute); letter-spacing: 0.05em; flex-shrink: 0; } .blog-toolbar__clear { background: transparent; border: 0; color: var(--ink-mute); cursor: pointer; font-size: 22px; line-height: 1; padding: 0 4px; transition: color 0.2s ease; } .blog-toolbar__clear:hover { color: var(--accent); } .blog-toolbar__count { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.05em; opacity: 0; transition: opacity 0.2s ease; } .blog-toolbar__count.is-active { opacity: 1; } /* Filter groups */ .blog-filters { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .blog-filters__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); padding-top: 9px; flex-shrink: 0; min-width: 70px; } .blog-filters__group { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; } /* Category pills (filter-btn) — redesigned */ .filter-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; font-family: inherit; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; transition: all 0.2s var(--ease); white-space: nowrap; } .filter-btn:hover { border-color: var(--ink); color: var(--ink); } .filter-btn.active { background: var(--ink); border-color: var(--ink); color: var(--bg); } .filter-btn__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .filter-btn__dot--vente { background: #1a2a4f; } /* navy primaire */ .filter-btn__dot--management { background: #983c4a; } /* bordeaux */ .filter-btn__dot--voyage { background: #a98a4d; } /* ocre */ .filter-btn__dot--cuisine { background: #6b7a4a; } /* vert érudit */ .filter-btn__dot--sport { background: #5a4880; } /* violet feutré */ .filter-btn__dot--culture { background: #406470; } /* bleu canard mat */ .filter-btn__dot--transformation { background: #4d3f6b; } /* violet profond — transformation */ /* Tag chips — secondary multi-select */ .tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--warm); border: 1px solid var(--line); border-radius: 4px; font-family: inherit; font-size: 0.78rem; color: var(--ink-soft); cursor: pointer; transition: all 0.15s ease; } .tag-chip:hover { border-color: var(--accent); color: var(--accent); } .tag-chip.is-active { background: var(--accent); border-color: var(--accent); color: white; } .tag-chip__count { font-family: var(--mono); font-size: 10px; padding: 1px 5px; background: rgba(0,0,0,0.06); border-radius: 2px; letter-spacing: 0.04em; } .tag-chip.is-active .tag-chip__count { background: rgba(255,255,255,0.2); color: white; } .tag-chip__clear { margin-left: auto; padding: 5px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: transparent; border: 1px dashed var(--line); border-radius: 4px; color: var(--ink-mute); cursor: pointer; transition: all 0.15s ease; } .tag-chip__clear:hover { border-color: var(--accent); border-style: solid; color: var(--accent); } /* Posts list — slight refresh for modern feel */ .post-row { border-bottom: 1px solid var(--line); padding: 22px 0; display: grid; grid-template-columns: 130px 110px 1fr 30px; gap: 18px; align-items: center; text-decoration: none; color: var(--ink); transition: padding 0.2s var(--ease), background 0.2s var(--ease); } /* Simplified — no padding shift on hover (Mat: 'I don't like the highlight on mobile, cheap feeling') */ @media (hover: hover) and (pointer: fine) { .post-row:hover .post-arrow { transform: translateX(4px); color: var(--accent); } .post-row:hover .post-title { color: var(--accent); } } .post-arrow { font-size: 1.1rem; color: var(--ink-mute); text-align: right; transition: transform 0.2s ease, color 0.2s ease; } /* Responsive */ @media (max-width: 880px) { .blog-hero__head { grid-template-columns: 1fr; gap: 28px; align-items: start; } .blog-hero__meta { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 20px; flex-direction: row; gap: 32px; flex-wrap: wrap; } .blog-hero__meta-row { flex-direction: column; gap: 4px; align-items: flex-start; } .blog-hero__meta-num { font-size: 1.8rem; } .blog-filters { flex-direction: column; align-items: stretch; gap: 10px; } .blog-filters__label { padding-top: 0; } .post-row { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 6px 12px; padding: 18px 0; } .post-row .post-cat { grid-column: 1; grid-row: 1; } .post-row .post-date { grid-column: 2; grid-row: 1; font-size: 0.78rem; } .post-row .post-title { grid-column: 1 / -1; grid-row: 2; font-size: 1rem; line-height: 1.35; } .post-row .post-arrow { grid-column: 3; grid-row: 1; } } @media (max-width: 620px) { .blog-hero__masthead { font-size: 9.5px; letter-spacing: 0.1em; gap: 6px; } .blog-hero__title { font-size: clamp(2.2rem, 1.4rem + 4vw, 3.6rem); } .blog-hero__lead { font-size: 1rem; } .blog-toolbar__search { padding: 10px 14px; } .filter-btn { padding: 7px 12px; font-size: 0.82rem; } .tag-chip { font-size: 0.74rem; padding: 5px 9px; } } /* (footer-currently styles moved to Direction B section below) */ /* ───────────────────────────────────────────────────────── TRAVEL HERO WARM — relaxed tone with hand-drawn touches ───────────────────────────────────────────────────────── */ .travel-hero--warm { position: relative; } .travel-hero__sketch { position: absolute; top: 80px; right: 60px; width: 120px; opacity: 0.85; pointer-events: none; z-index: 0; } .travel-hero__sketch svg { width: 100%; height: auto; transform: rotate(-8deg); } .travel-hero__title { margin-top: 12px; max-width: 14ch; position: relative; z-index: 1; } .travel-hero__lead { margin-top: 24px; max-width: 56ch; position: relative; z-index: 1; } .travel-hero__handwritten { margin-top: 28px; font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 1.05rem; color: var(--accent); transform: rotate(-1deg); display: inline-block; padding-left: 4px; position: relative; } .travel-hero__handwritten::before { content: ''; position: absolute; left: -8px; top: 50%; width: 2px; height: 60%; background: var(--accent); transform: translateY(-50%); opacity: 0.4; } @media (max-width: 700px) { .travel-hero__sketch { top: 110px; right: 20px; width: 80px; opacity: 0.6; } .travel-hero__handwritten { font-size: 0.98rem; } } /* ───────────────────────────────────────────────────────── DIRECTION B — BIBLIOTHÈQUE SCIENCES PO Touches chaleureuses bordeaux + ocre subtil ───────────────────────────────────────────────────────── */ /* ── About hero photo ── */ .about-hero__portrait { margin: 0; position: relative; } .about-hero__portrait img { width: 100%; height: auto; display: block; border-radius: 4px; filter: contrast(1.02); } /* Frame line — accent navy with offset, bibliothèque vibe */ .about-hero__portrait::after { content: ''; position: absolute; top: 14px; left: 14px; right: -14px; bottom: -14px; border: 1px solid var(--accent); border-radius: 4px; z-index: -1; opacity: 0.5; } .about-hero__portrait-caption { margin: 12px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); text-align: right; padding-right: 6px; } @media (max-width: 880px) { .about-hero__portrait { max-width: 420px; margin: 0 auto; } } /* ── Marginalia — italic bordeaux note in margin ── */ .about-hero__marginalia, .marginalia { margin-top: 22px; font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--accent-warm); padding-left: 14px; border-left: 2px solid var(--accent-warm); max-width: 52ch; line-height: 1.5; opacity: 0.88; } /* ── Wavy underline under accent words (like a pencil correction) ── */ .serif--wavy, .serif.serif--wavy { position: relative; display: inline-block; } .serif--wavy::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background-image: url("data:image/svg+xml;utf8,"); background-size: 80px 6px; background-repeat: repeat-x; } /* ── Footer Currently — clean editorial card embedded in dark footer ── */ .footer-currently { background: var(--warm); color: var(--ink); border: 1px solid var(--accent-warm); border-radius: 4px; padding: 16px 24px; margin: 32px auto 16px; max-width: 920px; position: relative; } .footer-currently::before { content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 2px; background: var(--accent-warm); } .footer-currently__inner { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); } .footer-currently__pin { font-size: 1rem; flex-shrink: 0; } .footer-currently__text { flex: 1; min-width: 0; color: var(--ink-2); } .footer-currently__text strong { font-family: var(--mono); font-size: 0.86rem; font-weight: 500; background: var(--accent); color: var(--bg); padding: 2px 8px; border-radius: 3px; letter-spacing: 0.04em; } .footer-currently__sig { font-family: var(--serif); font-style: italic; color: var(--accent-warm); font-size: 1rem; font-weight: 500; flex-shrink: 0; } @media (max-width: 620px) { .footer-currently { padding: 14px 18px; margin: 24px 16px 12px; } .footer-currently__inner { font-size: 0.86rem; gap: 10px; } .footer-currently__sig { width: 100%; text-align: right; margin-top: 4px; } } /* ── Body links — wavy bordeaux on hover (Sciences Po vibe) ── */ .article-body a:not(.btn):not(.post-row):not(.post-share__btn):not(.breadcrumb__link) { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-warm); padding-bottom: 1px; transition: color 0.15s ease, border-color 0.15s ease; } .article-body a:not(.btn):not(.post-row):not(.post-share__btn):not(.breadcrumb__link):hover { color: var(--accent-warm); text-decoration: underline wavy var(--accent-warm); text-underline-offset: 4px; border-bottom-color: transparent; } /* ── Masthead double rule (carte de bibliothèque) ── */ .hero__masthead-rule::before { background: var(--accent); } .hero__masthead-rule::after { content: ''; display: block; width: 100%; height: 1px; background: var(--accent-warm); opacity: 0.4; margin-top: 2px; } /* ── Accent serif italic word in hero — wavy underline ── */ .hero__line--accent .serif, .hero__word--accent.serif { position: relative; color: var(--accent-warm); } /* ── Pillar card hover — bordeaux warmth ── */ .pillar:hover { border-color: var(--accent-warm); } .pillar:hover .pillar__link { color: var(--accent-warm); } /* ── Post-row hover — accent color (only on devices with real hover) ── */ @media (hover: hover) and (pointer: fine) { .post-row:hover .post-title { color: var(--accent-warm); } } /* ── Mobile responsive for marginalia ── */ @media (max-width: 620px) { .about-hero__marginalia, .marginalia { font-size: 0.95rem; padding-left: 12px; } } /* ───────────────────────────────────────────────────────── ARTICLE BODY — modernized editorial styling Drop cap, generous typography, redesigned blockquotes, styled lists and callouts. Pro + warm + modern. ───────────────────────────────────────────────────────── */ /* Drop cap on first paragraph of article body — Sciences Po style */ .article-body > p:first-of-type::first-letter, .article-body > .article-hero-img + p::first-letter { font-family: var(--serif); font-size: 4.2em; font-weight: 500; font-style: italic; color: var(--accent-warm); float: left; line-height: 0.85; padding: 4px 12px 0 0; margin-top: 6px; } @media (max-width: 620px) { .article-body > p:first-of-type::first-letter, .article-body > .article-hero-img + p::first-letter { font-size: 3.4em; padding: 2px 10px 0 0; } } /* H2 — large numbered marker on hover, modern editorial */ .article-body h2 { position: relative; padding-left: 0; color: var(--accent); font-family: var(--serif); font-style: italic; font-weight: 500; } .article-body h2::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: var(--accent-warm); transition: width 0.6s var(--ease); opacity: 0.5; } .article-body h2.reveal--in::before, .reveal--in .article-body h2::before { width: 36px; } /* H3 — smaller, navy, mono kicker style */ .article-body h3 { color: var(--accent); font-weight: 600; letter-spacing: -0.01em; } /* Body paragraphs — slightly more generous line-height */ .article-body p { line-height: 1.72; color: var(--ink-2); } /* Bold = navy not black, more sophisticated */ .article-body p strong, .article-body li strong { color: var(--accent); font-weight: 600; } /* Blockquotes — editorial, with massive serif quote in background */ .article-body blockquote { position: relative; margin-top: 44px; margin-bottom: 44px; padding: 28px 32px 28px 60px; background: var(--warm); border-left: 3px solid var(--accent-warm); border-radius: 2px; font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.6; color: var(--ink-2); overflow: hidden; } .article-body blockquote::before { content: '"'; position: absolute; top: -16px; left: 16px; font-family: var(--serif); font-size: 6rem; line-height: 1; color: var(--accent-warm); opacity: 0.18; font-style: italic; font-weight: 500; } .article-body blockquote p { margin-bottom: 12px; font-family: inherit; color: inherit; line-height: inherit; } .article-body blockquote p:last-child { margin-bottom: 0; } .article-body blockquote cite { display: block; margin-top: 14px; font-family: var(--sans); font-style: normal; font-size: 0.85rem; color: var(--ink-soft); letter-spacing: 0.04em; } .article-body blockquote cite::before { content: '— '; } /* Lists — see article ul/ol section earlier for the active rules. The marker color is handled via ::before pseudo-elements since list-style is set to none. */ /* Hr — modern dash separator, not a line */ .article-body hr { border: 0; margin: 48px auto; width: 80px; text-align: center; position: relative; } .article-body hr::before { content: '· · ·'; letter-spacing: 0.4em; color: var(--accent-warm); font-size: 1.2rem; display: block; } /* Hero image with caption-style border */ .article-hero-img { margin: 0 0 40px; position: relative; } .article-hero-img img, .article-hero-img svg { border-radius: 6px; border: 1px solid var(--line); } /* ────────────────────────────────────────────── ARTICLE META BAR — Date + cat + read time + tags Cleaner, more modern, all-in-one header */ .article-meta-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 40px; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.08em; } .article-meta-bar .post-cat { background: var(--accent); color: var(--bg); padding: 4px 10px; border-radius: 3px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; } /* ────────────────────────────────────────────── PILLAR CARDS — modernized with subtle interaction On the home page. Pro look, warm hover */ .pillar { transition: transform 0.4s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); position: relative; overflow: hidden; } .pillar::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } .pillar:hover { transform: translateY(-3px); border-color: var(--accent-warm); background: var(--bg); } .pillar:hover::before { transform: scaleX(1); background: var(--accent-warm); } /* ────────────────────────────────────────────── SECTION NUMBERS — large editorial chapter marks For about-block, expertise sections */ .about-block__num, .section-num { font-family: var(--serif); font-style: italic; font-size: 3rem; font-weight: 500; color: var(--accent-warm); line-height: 1; opacity: 0.85; margin-bottom: 8px; } @media (max-width: 620px) { .about-block__num, .section-num { font-size: 2.4rem; } } /* ────────────────────────────────────────────── BUTTONS — modern primary + ghost variants With wavy hover for warmth */ .btn { position: relative; font-weight: 500; } .btn--primary { background: var(--accent); color: var(--bg); border: 1px solid var(--accent); } .btn--primary:hover { background: var(--accent-warm); border-color: var(--accent-warm); transform: translateY(-1px); } .btn--outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .btn--outline:hover { background: var(--warm); color: var(--accent-warm); border-color: var(--accent-warm); } /* ────────────────────────────────────────────── HERO MARGINALIA — italic bordeaux note under lead */ .hero__marginalia { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--accent-warm); margin-top: 20px; padding-left: 16px; border-left: 2px solid var(--accent-warm); max-width: 52ch; line-height: 1.5; opacity: 0.9; } @media (max-width: 620px) { .hero__marginalia { font-size: 0.92rem; margin-top: 16px; padding-left: 12px; } } /* ────────────────────────────────────────────── POST ROW REFINEMENTS — animated bordeaux underline on hover */ .post-row { position: relative; transition: all 0.25s var(--ease); } .post-row::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: var(--accent-warm); transition: width 0.4s var(--ease); } @media (hover: hover) and (pointer: fine) { .post-row:hover::after { width: 100%; } } /* ────────────────────────────────────────────── KICKER ACCENT — navy primary, sober and confident */ .kicker--accent { color: var(--accent); } /* ────────────────────────────────────────────── NAV REFINEMENTS — subtle warm accent on cta */ .nav__cta:hover { background: var(--accent-warm) !important; border-color: var(--accent-warm) !important; } /* ────────────────────────────────────────────── MEGA MENU LINKS — warm hover */ .mega-cat:hover .mega-cat__name { color: var(--accent-warm); } .mega-nav__item:hover .mega-nav__title { color: var(--accent-warm); } /* ────────────────────────────────────────────── TAG / CHIP HOVER STATES — subtle navy, no aggressive bordeaux */ .tag-cloud__tag:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .filter-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); } /* ────────────────────────────────────────────── FOOTER MEGA — navy reli\u00e9 like a hardcover book Touches bordeaux for human warmth. The original .footer-mega rule earlier in this file uses var(--ink) which is dark — we just refine accents here. */ .footer-mega { background: var(--ink); color: var(--bg); border-top: 2px solid var(--accent-warm); position: relative; } .footer-mega::before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: var(--accent-warm); opacity: 0.5; } .footer-mega__col a:hover { color: #d4a3ad; /* warm rose for hover on dark bg */ } .footer-mega__logo-dot { background: var(--accent-warm) !important; } /* ────────────────────────────────────────────── SECTION HEADERS — refined editorial styling */ .section-header__title { color: var(--accent); } .section-header__title .serif { color: var(--accent-warm); font-style: italic; } /* ────────────────────────────────────────────── STATS / NUMBERS in stats blocks navy as primary, ocher for highlight on hover */ .stat-card { transition: border-color 0.3s var(--ease); } .stat-card:hover { border-color: var(--accent-warm); } /* ────────────────────────────────────────────── SEPARATOR LINES — double rule library card vibe */ .section__rule, .divider--double { border: 0; height: 4px; background: linear-gradient(to bottom, var(--accent) 0 1px, transparent 1px 3px, var(--accent-warm) 3px 4px); opacity: 0.4; margin: 32px 0; } /* ───────────────────────────────────────────────────────── POLISHED DETAILS — Direction B continued ───────────────────────────────────────────────────────── */ /* About hero portrait — hover effect to add warmth */ .about-hero__portrait { transition: transform 0.4s var(--ease); } .about-hero__portrait:hover { transform: translate(-2px, -2px); } .about-hero__portrait::after { transition: opacity 0.3s ease, transform 0.4s var(--ease); } .about-hero__portrait:hover::after { opacity: 0.8; transform: translate(2px, 2px); } /* About-block numbers — bordeaux + slight rotation feel */ .about-block__num { display: inline-block; background: var(--bg); padding: 0 16px 0 0; margin-bottom: 4px; position: relative; } .about-block__num::after { content: ''; position: absolute; bottom: 14px; left: 100%; width: calc(100% + 80px); height: 1px; background: var(--accent-warm); opacity: 0.25; } .about-block h2 { color: var(--accent); margin-top: 6px; } /* Article body — make first paragraph stand out without drop cap on certain cases */ .article-body > .article-hero-img + p { margin-top: 28px; } /* Modern table styles for any tables in articles */ .article-body table { width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 0.95rem; } .article-body table th { text-align: left; padding: 12px 16px; border-bottom: 2px solid var(--accent); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 500; } .article-body table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; } .article-body table tr:hover td { background: var(--warm); } /* Code blocks — subtle warm background */ .article-body code { background: var(--warm); padding: 2px 7px; border-radius: 3px; font-size: 0.88em; color: var(--accent-warm); border: 1px solid var(--line); } .article-body pre { background: var(--ink); color: var(--bg); padding: 20px 24px; border-radius: 6px; overflow-x: auto; margin: 28px 0; font-size: 0.88rem; line-height: 1.55; } .article-body pre code { background: transparent; border: 0; color: inherit; padding: 0; } /* Article hero figure with subtle caption-like border-bottom */ .article-hero-img { position: relative; margin-bottom: 48px; } .article-hero-img::after { content: ''; position: absolute; bottom: -16px; left: 0; width: 60px; height: 1px; background: var(--accent-warm); } /* Section header refinements - center serif italic in bordeaux */ .section-header h2 .serif, h2 .serif { color: var(--accent-warm); font-style: italic; } /* Reveal class — for elements that have not yet animated in */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal.reveal--in, .reveal--in { opacity: 1; transform: translateY(0); } /* Tag chips - selected state uses navy not bordeaux */ .tag-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); } .tag-chip.is-active .tag-chip__count { background: rgba(255,255,255,0.18); color: var(--bg); } /* Resources hero - bordeaux accent on the number stats */ .blog-hero__meta-num { font-family: var(--serif); color: var(--accent); } .blog-hero__meta-num:hover { color: var(--accent-warm); } /* Subtle text-decoration on serif headings — only on hover */ .section-title:hover, .expertise-list a:hover { color: var(--accent-warm); } /* Tabular nums everywhere for stats — better alignment */ .hero__stat strong, .blog-hero__meta-num, .about-block__num, .travel-stat__num, .exp-year { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Smooth scroll-snap for hero section on first load */ .hero--mag { scroll-snap-align: start; } /* Footer columns — add tiny dot bordeaux on hover */ .footer-mega__col a { position: relative; transition: color 0.2s ease, padding-left 0.2s ease; } .footer-mega__col a:hover { padding-left: 8px; } .footer-mega__col a::before { content: '·'; position: absolute; left: 0; color: var(--accent-warm); opacity: 0; transition: opacity 0.2s ease; } .footer-mega__col a:hover::before { opacity: 1; } /* ───────────────────────────────────────────────────────── ARTICLE MARGINALIA — bordeaux note mid-article ───────────────────────────────────────────────────────── */ .article-body .marginalia { margin-top: 28px; margin-bottom: 28px; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--accent-warm); padding: 4px 0 4px 18px; border-left: 2px solid var(--accent-warm); /* max-width inherited from .article-body > .marginalia rule (680px), so marginalia aligns left with paragraphs above/below. */ line-height: 1.55; opacity: 0.92; background: var(--warm); padding-right: 18px; border-radius: 2px; } /* Cancel the drop cap effect for paragraphs after marginalia */ .article-body .marginalia + p::first-letter { font-size: inherit !important; font-family: inherit !important; font-style: inherit !important; color: inherit !important; float: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important; } @media (max-width: 620px) { .article-body .marginalia { font-size: 0.98rem; padding-left: 14px; padding-right: 14px; } } /* ───────────────────────────────────────────────────────── COOKIE CONSENT BANNER — Direction B style Editorial card sliding up from bottom on first visit ───────────────────────────────────────────────────────── */ .cookie-banner { position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 9000; background: var(--bg); border: 1px solid var(--accent-warm); border-radius: 6px; box-shadow: 0 12px 40px rgba(20, 38, 79, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06); animation: cookieBannerSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .cookie-banner[hidden] { display: none; } .cookie-banner::before { content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 2px; background: var(--accent-warm); } @keyframes cookieBannerSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .cookie-banner__inner { max-width: 920px; margin: 0 auto; padding: 22px 28px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .cookie-banner__content { min-width: 0; } .cookie-banner__title { margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.15rem; color: var(--accent); letter-spacing: -0.01em; } .cookie-banner__text { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); } .cookie-banner__text strong { color: var(--accent); font-weight: 600; } .cookie-banner__link { color: var(--accent-warm); text-decoration: none; border-bottom: 1px solid var(--accent-warm); padding-bottom: 1px; transition: all 0.2s ease; } .cookie-banner__link:hover { text-decoration: underline wavy var(--accent-warm); text-underline-offset: 4px; border-bottom-color: transparent; } .cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; } .cookie-banner__btn { font-family: inherit; font-size: 0.88rem; font-weight: 500; padding: 10px 20px; border-radius: 4px; cursor: pointer; transition: all 0.2s var(--ease); border: 1px solid; white-space: nowrap; } .cookie-banner__btn--decline { background: transparent; color: var(--ink-soft); border-color: var(--line); } .cookie-banner__btn--decline:hover { border-color: var(--ink); color: var(--ink); background: var(--warm); } .cookie-banner__btn--accept { background: var(--accent); color: var(--bg); border-color: var(--accent); } .cookie-banner__btn--accept:hover { background: var(--accent-warm); border-color: var(--accent-warm); transform: translateY(-1px); } /* Mobile responsive */ @media (max-width: 720px) { .cookie-banner { bottom: 12px; left: 12px; right: 12px; } .cookie-banner__inner { grid-template-columns: 1fr; gap: 16px; padding: 18px 20px; } .cookie-banner__title { font-size: 1.05rem; } .cookie-banner__text { font-size: 0.88rem; } .cookie-banner__actions { width: 100%; justify-content: stretch; } .cookie-banner__btn { flex: 1; padding: 11px 16px; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { .cookie-banner { animation: none; } } /* ───────────────────────────────────────────────────────── EDU TIMELINE — replaces broken world map Editorial horizontal timeline of 4 cities, Direction B style ───────────────────────────────────────────────────────── */ .edu-timeline { margin: 40px 0 56px; padding: 0 12px; position: relative; } .edu-timeline__rail { position: absolute; top: 38px; left: 24px; right: 24px; height: 1px; background: var(--line); z-index: 0; } .edu-timeline__rail::after { content: ''; position: absolute; top: 1px; left: 0; right: 0; height: 1px; background: var(--accent-warm); opacity: 0.35; } .edu-timeline__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0; position: relative; z-index: 1; } .edu-timeline__item { display: flex; flex-direction: column; align-items: center; } .edu-timeline__link { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; transition: transform 0.3s var(--ease); width: 100%; } .edu-timeline__link:hover { transform: translateY(-3px); } .edu-timeline__year { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--ink-mute); margin-bottom: 14px; font-weight: 500; transition: color 0.2s ease; } .edu-timeline__link:hover .edu-timeline__year { color: var(--accent-warm); } .edu-timeline__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); margin-bottom: 16px; transition: all 0.2s var(--ease); position: relative; } .edu-timeline__link:hover .edu-timeline__dot { background: var(--accent-warm); border-color: var(--accent-warm); transform: scale(1.15); } .edu-timeline__dot--current { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-warm-soft); } .edu-timeline__dot--current::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--accent-warm); opacity: 0.4; animation: eduTimelinePulse 2.5s ease-in-out infinite; } @keyframes eduTimelinePulse { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.4); opacity: 0; } } .edu-timeline__body { display: flex; flex-direction: column; align-items: center; gap: 3px; } .edu-timeline__city { font-family: var(--serif); font-style: italic; font-size: 1.35rem; font-weight: 500; color: var(--accent); line-height: 1.1; letter-spacing: -0.01em; } .edu-timeline__link:hover .edu-timeline__city { color: var(--accent-warm); } .edu-timeline__school { font-size: 0.88rem; color: var(--ink-2); font-weight: 500; line-height: 1.3; } .edu-timeline__country { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; } .edu-timeline__caption { margin: 32px auto 0; max-width: 56ch; text-align: center; font-style: italic; border-left: 0; padding-left: 0; } /* Mobile responsive — stack vertically with side rail */ @media (max-width: 720px) { .edu-timeline__list { grid-template-columns: 1fr; gap: 28px; padding-left: 32px; } .edu-timeline__rail { top: 8px; bottom: 0; left: 18px; right: auto; width: 1px; height: auto; } .edu-timeline__rail::after { top: 0; bottom: 0; left: 1px; right: auto; width: 1px; height: auto; } .edu-timeline__item { align-items: flex-start; } .edu-timeline__link { align-items: flex-start; text-align: left; flex-direction: row; gap: 16px; flex-wrap: wrap; } .edu-timeline__year { margin-bottom: 0; order: 2; width: auto; } .edu-timeline__dot { position: absolute; left: -22px; top: 4px; margin-bottom: 0; order: 1; } .edu-timeline__body { align-items: flex-start; width: 100%; order: 3; } .edu-timeline__caption { text-align: left; margin-top: 24px; padding-left: 32px; } } /* ───────────────────────────────────────────────────────── ARTICLE READABILITY POLISH Bigger headings, generous spacing, optimized line-height ───────────────────────────────────────────────────────── */ /* Improve article-body base typography */ .article-body { font-size: 1.08rem; line-height: 1.75; color: var(--ink-2); } /* H2 — more present, editorial */ .article-body h2 { font-size: clamp(1.5rem, 1.2rem + 0.7vw, 1.85rem); margin-top: 56px; margin-bottom: 18px; line-height: 1.25; letter-spacing: -0.02em; } /* H3 — clear hierarchy */ .article-body h3 { font-size: clamp(1.15rem, 1rem + 0.4vw, 1.3rem); margin-top: 36px; margin-bottom: 14px; line-height: 1.3; } /* Paragraph rhythm — slightly more space */ .article-body p { margin-bottom: 22px; } /* First paragraph after H2 — pull closer for tight connection */ .article-body h2 + p, .article-body h3 + p { margin-top: 0; } /* Last paragraph before H2 — extra space */ .article-body p + h2 { margin-top: 64px; } /* Lists — comfortable spacing */ .article-body ul li, .article-body ol li { margin-bottom: 12px; line-height: 1.7; } /* Strong / emphasis refinement */ .article-body em { font-style: italic; color: var(--ink-2); } /* Hero image — generous space below */ .article-hero-img { margin: 0 0 48px; } /* On mobile, reduce font size slightly and adjust spacing */ @media (max-width: 720px) { .article-body { font-size: 1.02rem; line-height: 1.7; padding: 40px 20px 80px; } .article-body h2 { margin-top: 44px; margin-bottom: 14px; } .article-body h3 { margin-top: 28px; margin-bottom: 10px; } .article-body p { margin-bottom: 18px; } .article-body p + h2 { margin-top: 48px; } /* On mobile the article-body has only 20px padding so the hanging indent (-28px for OL, -24px for UL) pushes the bullet/number OFF SCREEN. We bring them back INSIDE the LI with traditional padding-left. */ .article-body ul li { padding-left: 22px; } .article-body ul li::before { left: 0; /* dash inside the LI, flush left */ } .article-body ol li { padding-left: 28px; } .article-body ol li::before { left: 0; /* number inside the LI */ min-width: 22px; text-align: left; /* numbers align flush left, with space before the text */ padding-right: 0; } } /* Hero image on mobile — full width without padding restrictions */ @media (max-width: 720px) { .article-hero-img { margin: 0 -20px 32px; border-radius: 0; } .article-hero-img img, .article-hero-img svg { border-radius: 0; border: 0; } } /* Container narrow for article-hero on mobile */ @media (max-width: 720px) { .article-hero { padding: calc(var(--nav-h) + 40px) 0 24px; } .article-hero > .container, .article-hero > .container--narrow { padding: 0 20px; } .article-title { font-size: clamp(1.8rem, 1.2rem + 4vw, 2.6rem) !important; line-height: 1.15 !important; } } /* ───────────────────────────────────────────────────────── HERO-SCALE WAVY — bigger, more proportionate for the massive "transformer" word on the home page hero ───────────────────────────────────────────────────────── */ .hero__word--accent.serif--wavy::after, .hero__line--accent .serif--wavy::after { /* Bigger, thicker wavy under the giant hero word */ bottom: -16px; height: 10px; background-image: url("data:image/svg+xml;utf8,"); background-size: 120px 10px; } /* On smaller screens, downscale slightly */ @media (max-width: 720px) { .hero__word--accent.serif--wavy::after, .hero__line--accent .serif--wavy::after { bottom: -10px; height: 7px; background-size: 90px 7px; background-image: url("data:image/svg+xml;utf8,"); } } /* ───────────────────────────────────────────────────────── READING PROGRESS BAR — fine bordeaux line at top of page Fills as user scrolls through the article ───────────────────────────────────────────────────────── */ .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: transparent; z-index: 1000; pointer-events: none; } .reading-progress__bar { height: 100%; width: 0; background: var(--accent-warm); transition: width 0.08s linear; } /* ───────────────────────────────────────────────────────── SCROLL TO TOP BUTTON — appears after 600px of scroll Discreet bottom-right, navy with bordeaux hover ───────────────────────────────────────────────────────── */ .scroll-top { position: fixed; bottom: 28px; right: 28px; z-index: 800; width: 44px; height: 44px; border-radius: 50%; background: var(--bg); color: var(--accent); border: 1px solid var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s var(--ease); box-shadow: 0 4px 14px rgba(20, 38, 79, 0.10); opacity: 0; transform: translateY(10px); pointer-events: none; } .scroll-top[hidden] { display: none; } .scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .scroll-top:hover { background: var(--accent-warm); color: var(--bg); border-color: var(--accent-warm); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(152, 60, 74, 0.25); } .scroll-top:focus-visible { outline: 2px solid var(--accent-warm); outline-offset: 4px; } /* On mobile — slightly smaller, in the safe area */ @media (max-width: 720px) { .scroll-top { bottom: 20px; right: 20px; width: 40px; height: 40px; } } /* Avoid overlap with cookie banner if visible */ .cookie-banner:not([hidden]) ~ .scroll-top.is-visible { bottom: 140px; } @media (max-width: 720px) { .cookie-banner:not([hidden]) ~ .scroll-top.is-visible { bottom: 180px; } } /* ───────────────────────────────────────────────────────── RELATED ARTICLES — by shared tags Appears at bottom of article, BEFORE the prev/next nav ───────────────────────────────────────────────────────── */ .article-related { max-width: var(--container-narrow); margin: 0 auto; padding: 60px 24px 0; } .article-related__title { font-family: var(--serif); font-style: italic; font-size: 1.8rem; color: var(--accent); margin: 0 0 28px; letter-spacing: -0.01em; } .article-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .article-related__card { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; background: var(--bg-elevated); border: 1px solid var(--line); text-decoration: none; color: var(--ink); border-radius: 4px; transition: transform 0.3s ease, border-color 0.2s ease, box-shadow 0.3s ease; position: relative; -webkit-tap-highlight-color: transparent; } @media (hover: hover) and (pointer: fine) { .article-related__card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 6px 18px rgba(26, 42, 79, 0.08); } .article-related__card:hover .article-related__heading { color: var(--accent-warm); } } .article-related__cat { align-self: flex-start; font-size: 0.7rem; } .article-related__heading { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; line-height: 1.35; margin: 0; color: var(--ink); transition: color 0.2s ease; /* Clamp to 3 lines max */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .article-related__meta { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-mute); margin-top: auto; padding-top: 8px; } @media (max-width: 720px) { .article-related { padding: 40px 20px 0; } .article-related__title { font-size: 1.5rem; } .article-related__grid { grid-template-columns: 1fr; gap: 16px; } .article-related__card { padding: 20px 16px; } } /* ───────────────────────────────────────────────────────── PREV / NEXT ARTICLE NAVIGATION At the bottom of each article, before the footer ───────────────────────────────────────────────────────── */ .article-nav { max-width: var(--container-narrow); margin: 0 auto; padding: 40px 24px 80px; } .article-nav__rule { border: 0; height: 1px; background: var(--line); margin-bottom: 40px; position: relative; } .article-nav__rule::after { content: '· · ·'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg); padding: 0 16px; color: var(--accent-warm); letter-spacing: 0.4em; font-size: 1rem; } .article-nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .article-nav__link { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; background: var(--warm); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: inherit; transition: all 0.25s var(--ease); position: relative; overflow: hidden; } .article-nav__link::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 2px; background: var(--accent-warm); transform: scaleY(0); transform-origin: top; transition: transform 0.3s var(--ease); } .article-nav__link:hover { background: var(--bg); border-color: var(--accent-warm); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20, 38, 79, 0.06); } .article-nav__link:hover::before { transform: scaleY(1); } .article-nav__link--next { text-align: right; } .article-nav__link--next::before { left: auto; right: 0; } .article-nav__direction { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); display: flex; align-items: center; gap: 8px; } .article-nav__link--next .article-nav__direction { justify-content: flex-end; } .article-nav__direction .arrow { color: var(--accent-warm); font-size: 14px; line-height: 1; } .article-nav__title { font-family: var(--serif); font-style: italic; font-size: 1.1rem; font-weight: 500; color: var(--accent); line-height: 1.35; transition: color 0.2s ease; } .article-nav__link:hover .article-nav__title { color: var(--accent-warm); } .article-nav__placeholder { display: flex; align-items: center; justify-content: center; padding: 22px 24px; background: transparent; color: var(--ink-mute); font-style: italic; font-family: var(--serif); opacity: 0.6; font-size: 0.95rem; } /* Mobile — stack vertically */ @media (max-width: 720px) { .article-nav__grid { grid-template-columns: 1fr; gap: 14px; } .article-nav__link--next { text-align: left; } .article-nav__link--next::before { left: 0; right: auto; } .article-nav__link--next .article-nav__direction { justify-content: flex-start; } } /* Print: hide progress bar, scroll button, article nav */ /* ───────────────────────────────────────────────────────── PRINT STYLESHEET When someone hits Ctrl+P on the CV or an article, we want a clean document — no nav, no footer, no chrome. Black on white, generous spacing, hyperlinks visible inline. ───────────────────────────────────────────────────────── */ @media print { /* Reset page basics */ @page { size: A4; margin: 1.8cm 1.6cm; } /* All in black on white, sans background images */ *, *::before, *::after { background: transparent !important; background-image: none !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; -webkit-print-color-adjust: economy; print-color-adjust: economy; } html, body { background: #fff !important; color: #000 !important; font-size: 11pt; line-height: 1.45; -webkit-font-smoothing: never; } /* Hide all chrome — nav, footer, banner, UI helpers */ nav.nav, .nav, .mega-menu, .nav__hamburger, .nav__cta, .theme-toggle, .lang-switch, .footer-mega, .footer-currently, .cookie-banner, .scroll-top, .reading-progress, .article-nav, .hero__masthead, .hero__cursor, .reveal, .search, #search-overlay, .post-share, .contact-form, .speaking-card__cta, .related-posts, [aria-hidden="true"]:not(svg), .btn-row, .btn, .article-meta-bar { display: none !important; } /* Re-show reveal items — animation classes shouldn't hide content in print */ .reveal { display: revert !important; opacity: 1 !important; transform: none !important; } /* Restore article-nav hidden — really hidden */ .article-nav, .footer-mega, .footer-currently, .cookie-banner, .scroll-top, .reading-progress, nav.nav { display: none !important; } /* Adjust main container — full width, no padding limits */ main, article, .container, .container--narrow, .article-body, .about-block, section { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* Sections: just paragraph spacing */ section { padding: 0.6cm 0 !important; page-break-inside: avoid; } /* Hero title in print — smaller and dignified */ .hero__title, .article-title, h1 { font-size: 22pt !important; line-height: 1.15 !important; margin: 0 0 0.4cm !important; color: #000 !important; font-weight: 600 !important; page-break-after: avoid; } h1 .serif, h1 .serif--wavy { font-style: italic; font-weight: 500; } /* Disable wavy underline graphics */ .serif--wavy::after { display: none !important; } h2 { font-size: 14pt !important; margin: 0.6cm 0 0.2cm !important; color: #000 !important; font-weight: 600 !important; border-bottom: 1px solid #000 !important; padding-bottom: 0.1cm !important; page-break-after: avoid; } h3 { font-size: 12pt !important; margin: 0.4cm 0 0.15cm !important; color: #000 !important; font-weight: 600 !important; page-break-after: avoid; } p, li, blockquote, span { color: #000 !important; orphans: 3; widows: 3; } p { margin: 0 0 0.3cm !important; line-height: 1.5 !important; } /* Lists */ ul, ol { margin: 0.2cm 0 0.3cm 0.5cm !important; padding: 0 !important; } ul li, ol li { margin-bottom: 0.1cm !important; page-break-inside: avoid; } ul li::marker { color: #000 !important; } ol li::marker { color: #000 !important; } /* Drop cap — disable in print */ .article-body > p:first-of-type::first-letter, .article-body > .article-hero-img + p::first-letter { font-size: inherit !important; color: #000 !important; float: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important; font-family: inherit !important; font-style: inherit !important; } /* Marginalia — italic black, less prominent */ .marginalia, .hero__marginalia, .about-hero__marginalia, .err-marginalia { color: #555 !important; border-left: 1px solid #000 !important; font-style: italic; padding-left: 0.3cm !important; margin: 0.3cm 0 !important; page-break-inside: avoid; } /* Blockquotes — restrained black */ blockquote, .article-body blockquote { margin: 0.4cm 0 !important; padding: 0.1cm 0 0.1cm 0.4cm !important; border-left: 2px solid #000 !important; background: none !important; font-style: italic; font-size: 11pt !important; page-break-inside: avoid; } blockquote::before { display: none !important; } /* Hero img / illustration — keep small, fit-content */ .article-hero-img, .article-hero-img img, .about-hero__portrait img, figure img { max-width: 60% !important; max-height: 7cm !important; width: auto !important; height: auto !important; page-break-inside: avoid; border: none !important; } .article-hero-img { margin: 0 auto 0.5cm !important; text-align: center; } .about-hero__portrait::after { display: none !important; } /* HR separators — minimal */ hr, .article-body hr { border: 0 !important; border-top: 1px solid #999 !important; margin: 0.5cm 0 !important; width: 100% !important; height: 1px !important; text-align: left !important; } hr::before { display: none !important; } /* Links — show URL in parentheses after the link text (except for anchors and internal) */ a { color: #000 !important; text-decoration: underline !important; border: 0 !important; background: none !important; } /* For external links, append the URL inline */ .article-body a[href^="http"]:not(.btn):not(.no-print-url)::after, .about-block a[href^="http"]:not(.btn):not(.no-print-url)::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666 !important; font-style: italic; word-break: break-all; } /* Mailto: */ a[href^="mailto:"]::after { content: ""; } /* Tables */ table { width: 100% !important; border-collapse: collapse !important; page-break-inside: avoid; margin: 0.3cm 0 !important; } th, td { border-bottom: 1px solid #999 !important; padding: 0.15cm 0.2cm !important; background: transparent !important; color: #000 !important; } thead th { border-bottom: 2px solid #000 !important; text-align: left; font-weight: 600; } /* Code / pre */ code { font-family: ui-monospace, "SFMono-Regular", monospace !important; font-size: 10pt !important; background: #f4f4f4 !important; padding: 1pt 4pt !important; border: 1px solid #ccc !important; border-radius: 2pt !important; color: #000 !important; } pre { background: #f8f8f8 !important; border: 1px solid #ccc !important; padding: 0.3cm !important; page-break-inside: avoid; font-size: 9.5pt !important; line-height: 1.4 !important; } pre code { background: transparent !important; border: 0 !important; padding: 0 !important; } /* CV-specific: education timeline becomes a vertical list */ .edu-timeline__rail { display: none !important; } .edu-timeline__list { grid-template-columns: 1fr !important; gap: 0.2cm !important; } .edu-timeline__item { page-break-inside: avoid; } .edu-timeline__link { flex-direction: row !important; text-align: left !important; align-items: baseline !important; gap: 0.3cm !important; padding: 0.1cm 0 !important; } .edu-timeline__dot { display: none !important; } .edu-timeline__year { font-weight: 600 !important; color: #000 !important; min-width: 1.5cm; margin: 0 !important; } .edu-timeline__body { align-items: flex-start !important; flex-direction: row !important; gap: 0.3cm !important; flex-wrap: wrap; } .edu-timeline__city { font-size: 11pt !important; color: #000 !important; font-weight: 600 !important; font-style: normal !important; } .edu-timeline__school { font-size: 10.5pt !important; } .edu-timeline__country { font-size: 9pt !important; color: #555 !important; letter-spacing: 0.1em; } /* CV experience cards */ .exp-card, .cv-card, .edu-card { border: 0 !important; border-top: 1px solid #999 !important; padding: 0.3cm 0 !important; margin: 0 !important; page-break-inside: avoid; background: none !important; } .exp-year, .cv-year, .edu-card__year { color: #000 !important; font-weight: 600 !important; } .exp-card:first-of-type, .cv-card:first-of-type, .edu-card:first-of-type { border-top: 0 !important; padding-top: 0 !important; } /* Post-row in resources page — readable list format */ .post-row { border-bottom: 1px solid #999 !important; padding: 0.15cm 0 !important; text-decoration: none !important; display: grid !important; page-break-inside: avoid; } .post-cat { background: none !important; border: 1px solid #000 !important; padding: 1pt 4pt !important; color: #000 !important; font-size: 8pt !important; } /* Tag chips — text only */ .post-tag, .tag-cloud__tag, .tag-chip { border: 1px solid #999 !important; color: #000 !important; padding: 1pt 6pt !important; margin: 1pt !important; font-size: 9pt !important; display: inline-block !important; } /* Hero hidden — page header re-built for print */ .hero, .article-hero { padding-top: 0 !important; padding-bottom: 0.3cm !important; } /* Print URL footer at bottom of each page */ body::after { content: "matthieu-thuillier.com"; display: block; position: fixed; bottom: 0.4cm; right: 1cm; font-family: ui-monospace, monospace; font-size: 8pt; color: #888 !important; letter-spacing: 0.1em; } /* Page-break helpers */ h1, h2, h3 { page-break-after: avoid; } img, table, blockquote, figure, .marginalia { page-break-inside: avoid; } .about-block { page-break-inside: avoid-page; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { .reading-progress__bar, .scroll-top, .article-nav__link, .article-nav__link::before { transition: none !important; } } /* ───────────────────────────────────────────────────────── CONTACT BLOCK — replaces the weak "Échangeons" section. Pro design with 3 cards (email, LinkedIn, form) + clear location/availability info. ───────────────────────────────────────────────────────── */ .contact-block { padding: 100px 0 80px; background: var(--bg); position: relative; } .contact-block::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 1px; background: var(--accent-warm); } .contact-block__header { text-align: center; margin-bottom: 56px; max-width: 620px; margin-left: auto; margin-right: auto; } .contact-block__kicker { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-warm); margin-bottom: 18px; position: relative; padding-bottom: 8px; } .contact-block__kicker::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 24px; height: 2px; background: var(--accent-warm); } .contact-block__title { font-family: var(--sans); font-size: clamp(2rem, 1.2rem + 2.5vw, 3.2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); margin: 0 0 20px; } .contact-block__title .serif { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--accent-warm); } .contact-block__intro { font-size: 1.1rem; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 540px; margin-left: auto; margin-right: auto; } /* ── 3-card grid ── */ .contact-block__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 980px; margin: 0 auto; } .contact-card { display: flex; align-items: center; gap: 16px; padding: 24px 22px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease; position: relative; -webkit-tap-highlight-color: transparent; } @media (hover: hover) and (pointer: fine) { .contact-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 24px rgba(26, 42, 79, 0.10); } .contact-card:hover .contact-card__arrow { transform: translateX(4px); color: var(--accent); } .contact-card--primary:hover { border-color: var(--accent-warm); box-shadow: 0 10px 24px rgba(152, 60, 74, 0.15); } .contact-card--primary:hover .contact-card__arrow { color: var(--accent-warm); } } .contact-card__icon { flex-shrink: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--accent); } .contact-card__icon svg { width: 20px; height: 20px; } .contact-card--primary .contact-card__icon { background: var(--accent-warm); border-color: var(--accent-warm); color: #fdfaf4; } .contact-card__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; /* allow wbr to work */ } .contact-card__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; } .contact-card__value { font-family: var(--sans); font-size: 0.95rem; font-weight: 500; color: var(--ink); line-height: 1.35; overflow-wrap: break-word; word-break: break-word; } .contact-card__hint { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-mute); margin-top: 4px; line-height: 1.3; } .contact-card__arrow { flex-shrink: 0; font-size: 1.2rem; color: var(--ink-mute); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease; align-self: center; } /* ── Location/availability line ── */ .contact-block__location { margin-top: 48px; text-align: center; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; } .contact-block__location strong { color: var(--ink); font-weight: 600; } .contact-block__location-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #2ea043; flex-shrink: 0; position: relative; } .contact-block__location-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #2ea043; opacity: 0.5; animation: contactLocationPulse 2.2s ease-out infinite; } @keyframes contactLocationPulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(3); opacity: 0; } } /* ── Mobile responsive — stack 3 cards vertically ── */ @media (max-width: 880px) { .contact-block__grid { grid-template-columns: 1fr; gap: 12px; } } @media (max-width: 720px) { .contact-block { padding: 60px 0 50px; } .contact-block__header { margin-bottom: 36px; } .contact-card { padding: 18px 16px; gap: 14px; } .contact-card__icon { width: 40px; height: 40px; } .contact-block__location { margin-top: 32px; font-size: 0.85rem; flex-wrap: wrap; padding: 0 16px; } } /* Dark theme */ :root[data-theme="dark"] .contact-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .contact-card__icon { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .contact-card:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--accent-warm); } /* ───────────────────────────────────────────────────────── ENTRY CARDS — modernised "Trois points d'entrée" 3 cards with custom SVG illustration + body, replacing the old pillar boxes. More visual, more 2026. ───────────────────────────────────────────────────────── */ .entry-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0 56px; } .entry-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); overflow: hidden; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease; position: relative; -webkit-tap-highlight-color: transparent; } @media (hover: hover) and (pointer: fine) { .entry-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 14px 36px rgba(26, 42, 79, 0.10); } .entry-card:hover .entry-card__visual { background: var(--warm); } .entry-card:hover .entry-card__link { color: var(--accent-warm); } .entry-card:hover .entry-card__visual svg { transform: scale(1.04); } } /* SVG illustration area at top of each card */ .entry-card__visual { background: linear-gradient(180deg, var(--warm) 0%, rgba(247, 240, 224, 0.5) 100%); padding: 24px 20px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); color: var(--accent); transition: background 0.4s ease; min-height: 180px; } .entry-card__visual svg { width: 100%; height: auto; max-width: 280px; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Body */ .entry-card__body { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .entry-card__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-warm); font-weight: 500; } .entry-card__title { font-family: var(--sans); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin: 0; } .entry-card__desc { font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); margin: 0; flex: 1; } .entry-card__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 0.92rem; font-weight: 500; color: var(--accent); margin-top: 4px; transition: color 0.25s ease; } .entry-card__link span[aria-hidden] { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; } @media (hover: hover) and (pointer: fine) { .entry-card:hover .entry-card__link span[aria-hidden] { transform: translateX(4px); } } /* Mobile responsive */ @media (max-width: 980px) { .entry-cards { grid-template-columns: 1fr; gap: 16px; } .entry-card__visual { min-height: 140px; padding: 20px 16px; } .entry-card__visual svg { max-width: 240px; } .entry-card__body { padding: 22px 20px 24px; } .entry-card__title { font-size: 1.3rem; } } /* Dark theme */ :root[data-theme="dark"] .entry-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .entry-card__visual { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%); color: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .entry-card:hover { border-color: var(--accent-warm); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4); } :root[data-theme="dark"] .entry-card:hover .entry-card__visual { background: rgba(255, 255, 255, 0.06); } /* ───────────────────────────────────────────────────────── LATEST POSTS — modern card layout for the home page Featured article (wide) + 4 secondary cards in 2x2 grid ───────────────────────────────────────────────────────── */ .latest-posts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0 0; } .latest-posts__secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .post-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); overflow: hidden; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease; -webkit-tap-highlight-color: transparent; position: relative; } @media (hover: hover) and (pointer: fine) { .post-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 28px rgba(26, 42, 79, 0.10); } .post-card:hover .post-card__title { color: var(--accent-warm); } .post-card:hover .post-card__media img { transform: scale(1.04); } .post-card:hover .post-card__link span[aria-hidden] { transform: translateX(4px); } } /* Featured card — bigger media, expanded layout */ .post-card--featured { /* spans full first row */ } .post-card--featured .post-card__media { aspect-ratio: 16 / 8; background: linear-gradient(180deg, var(--warm) 0%, rgba(247, 240, 224, 0.6) 100%); } .post-card--featured .post-card__body { padding: 28px 32px 30px; gap: 12px; } .post-card--featured .post-card__title { font-size: 1.65rem; line-height: 1.22; } .post-card--featured .post-card__excerpt { display: block; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); margin: 0; } /* Media — SVG hero illustration */ .post-card__media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(180deg, var(--warm) 0%, rgba(247, 240, 224, 0.5) 100%); border-bottom: 1px solid var(--line); } .post-card__media--small { aspect-ratio: 16 / 8; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Body */ .post-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .post-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-mute); } .post-card__date { font-variant-numeric: tabular-nums; } .post-card__sep { color: var(--ink-mute); opacity: 0.5; } .post-card__read { color: var(--ink-mute); } .post-card__title { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); margin: 0; transition: color 0.25s ease; /* Clamp to 3 lines on standard cards */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-card--featured .post-card__title { -webkit-line-clamp: 2; } .post-card__excerpt { display: none; /* hidden on standard cards, visible on featured */ } .post-card__link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 0.85rem; font-weight: 500; color: var(--accent); margin-top: auto; padding-top: 4px; } .post-card__link span[aria-hidden] { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; } /* Tablet — keep grid but reflow */ @media (max-width: 1100px) { .latest-posts { grid-template-columns: 1fr; } } /* Mobile — stack everything in single column */ @media (max-width: 720px) { .latest-posts { gap: 16px; } .latest-posts__secondary { grid-template-columns: 1fr; gap: 12px; } .post-card--featured .post-card__body { padding: 20px 18px 22px; } .post-card--featured .post-card__title { font-size: 1.3rem; } .post-card--featured .post-card__excerpt { font-size: 0.92rem; } .post-card__body { padding: 14px 16px 16px; } .post-card__title { font-size: 1rem; -webkit-line-clamp: 4; } } /* Dark theme */ :root[data-theme="dark"] .post-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .post-card__media { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%); border-bottom-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .post-card:hover { border-color: var(--accent-warm); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); } /* ───────────────────────────────────────────────────────── NAV DROPDOWN "PLUS" — Compact dropdown integrated in header, replaces the old mega-menu overlay for secondary pages. ───────────────────────────────────────────────────────── */ .nav__dropdown { position: relative; display: inline-flex; } /* The trigger button looks like a normal direct link */ .nav__dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; cursor: pointer; /* Inherits from .nav__direct-link via that class */ } .nav__dropdown-chevron { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0.6; } .nav__dropdown[data-open="true"] .nav__dropdown-chevron { transform: rotate(180deg); opacity: 1; } .nav__dropdown[data-open="true"] .nav__dropdown-trigger { color: var(--accent); background: rgba(26, 42, 79, 0.04); } /* The dropdown panel itself */ .nav__dropdown-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 380px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; box-shadow: 0 14px 40px rgba(26, 42, 79, 0.12), 0 2px 8px rgba(26, 42, 79, 0.05); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.22s; z-index: 110; } .nav__dropdown[data-open="true"] .nav__dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); } /* Section inside dropdown */ .nav__dropdown-section { display: flex; flex-direction: column; gap: 2px; } .nav__dropdown-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); padding: 6px 10px 4px; margin-bottom: 2px; font-weight: 500; } /* Individual link in dropdown */ .nav__dropdown-link { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); transition: background 0.15s ease, color 0.15s ease; } .nav__dropdown-link-title { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); } .nav__dropdown-link-desc { font-family: var(--sans); font-size: 12px; color: var(--ink-mute); line-height: 1.35; } @media (hover: hover) and (pointer: fine) { .nav__dropdown-link:hover { background: var(--warm); } .nav__dropdown-link:hover .nav__dropdown-link-title { color: var(--accent); } } /* Active page state */ .nav__dropdown-link.is-active, .nav__dropdown-link[aria-current="page"] { background: rgba(152, 60, 74, 0.06); } .nav__dropdown-link.is-active .nav__dropdown-link-title, .nav__dropdown-link[aria-current="page"] .nav__dropdown-link-title { color: var(--accent-warm); } /* Dark theme */ :root[data-theme="dark"] .nav__dropdown-panel { background: #1a1d24; border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .nav__dropdown-link { color: rgba(255, 255, 255, 0.9); } :root[data-theme="dark"] .nav__dropdown-link-title { color: rgba(255, 255, 255, 0.95); } :root[data-theme="dark"] .nav__dropdown-link-desc { color: rgba(255, 255, 255, 0.55); } :root[data-theme="dark"] .nav__dropdown-link:hover { background: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .nav__dropdown[data-open="true"] .nav__dropdown-trigger { background: rgba(255, 255, 255, 0.05); color: var(--accent-warm); } /* On mobile (under 1180px where nav__direct is hidden), the dropdown is hidden too */ @media (max-width: 1180px) { .nav__dropdown-panel { display: none; } } /* Hide the legacy "Menu" button on desktop — the "Univers" dropdown replaces it. Keep it visible on mobile (< 1180px) where nav__direct is hidden. */ @media (min-width: 1181px) { .menu-trigger { display: none !important; } } /* ───────────────────────────────────────────────────────── MEGA-NAV : items "principal" pour mobile/tablette Plus visibles et plus grands que les compact secondaires, avec un état CTA pour Contact. ───────────────────────────────────────────────────────── */ .mega-nav__sublabel--top { margin-top: 0 !important; } .mega-nav__item--main { /* Slightly bigger than .mega-nav__item--compact for primary nav */ padding: 14px 0 !important; } .mega-nav__item--main .mega-nav__title { font-size: 1.5rem !important; font-weight: 600; } .mega-nav__item--main .mega-nav__num { font-family: var(--mono); color: var(--accent-warm); font-size: 14px; opacity: 0.8; } .mega-nav__item--cta .mega-nav__title { color: var(--accent-warm) !important; font-weight: 700 !important; } .mega-nav__item--cta:hover .mega-nav__title { color: var(--accent-warm) !important; } /* On desktop where nav__direct is visible, the "Principal" section in mega-menu is redundant — but we keep the mega-menu hidden on desktop anyway (with mobile menu logic). On mobile/tablet, this section is critical. */ @media (max-width: 720px) { .mega-nav__item--main .mega-nav__title { font-size: 1.35rem !important; } .mega-nav__item--main { padding: 11px 0 !important; } } /* ───────────────────────────────────────────────────────── EXPERTISE — Six terrains de jeu, cards minimalistes v2 Refonte moderne (grands icônes accent, tagline 1 ligne) Style inspiré de Linear/Vercel pages "Features". ───────────────────────────────────────────────────────── */ .expertise-grid--modern { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; } .exp-card-v2 { display: flex; flex-direction: column; gap: 18px; padding: 28px 24px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; position: relative; overflow: hidden; } .exp-card-v2::before { /* Subtle gradient accent at top */ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-warm), transparent); opacity: 0; transition: opacity 0.4s ease; } @media (hover: hover) and (pointer: fine) { .exp-card-v2:hover { transform: translateY(-3px); border-color: var(--accent-warm); box-shadow: 0 12px 32px rgba(26, 42, 79, 0.08); } .exp-card-v2:hover::before { opacity: 1; } .exp-card-v2:hover .exp-card-v2__icon-wrap { background: var(--accent-warm); border-color: var(--accent-warm); } .exp-card-v2:hover .exp-card-v2__icon { color: #fdfaf4; transform: rotate(-3deg) scale(1.08); } } .exp-card-v2__icon-wrap { width: 56px; height: 56px; border-radius: 14px; background: var(--warm); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, border-color 0.3s ease; align-self: flex-start; } .exp-card-v2__icon { width: 26px; height: 26px; color: var(--accent); transition: color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .exp-card-v2__title { font-family: var(--sans); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); margin: 0; } .exp-card-v2__tagline { font-family: var(--sans); font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); margin: 0; } /* Tablet : 2 columns */ @media (max-width: 980px) { .expertise-grid--modern { grid-template-columns: repeat(2, 1fr); gap: 14px; } } /* Mobile : 1 column */ @media (max-width: 600px) { .expertise-grid--modern { grid-template-columns: 1fr; gap: 12px; } .exp-card-v2 { padding: 22px 20px; gap: 14px; } .exp-card-v2__icon-wrap { width: 48px; height: 48px; border-radius: 12px; } .exp-card-v2__icon { width: 22px; height: 22px; } .exp-card-v2__title { font-size: 1.1rem; } } /* Dark theme */ :root[data-theme="dark"] .exp-card-v2 { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .exp-card-v2__icon-wrap { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .exp-card-v2__icon { color: var(--accent-warm); } :root[data-theme="dark"] .exp-card-v2:hover { border-color: var(--accent-warm); } :root[data-theme="dark"] .exp-card-v2:hover .exp-card-v2__icon-wrap { background: var(--accent-warm); } :root[data-theme="dark"] .exp-card-v2:hover .exp-card-v2__icon { color: #fdfaf4; } /* ───────────────────────────────────────────────────────── FRAMEWORKS GRID — Cards style v2 5 cards en grille, esprit minimal/Linear comme exp-card-v2 ───────────────────────────────────────────────────────── */ .frameworks-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 40px; } .framework-card { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease; overflow: hidden; } .framework-card::before { /* timeline thread visual on top */ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line); transition: background 0.3s ease; } .framework-card--current::before { background: var(--accent-warm); } .framework-card--current { border-color: var(--accent-warm); box-shadow: 0 8px 24px rgba(152, 60, 74, 0.08); } @media (hover: hover) and (pointer: fine) { .framework-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 32px rgba(26, 42, 79, 0.08); } .framework-card:hover::before { background: var(--accent-warm); } } .framework-card__year { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent-warm); margin-bottom: 2px; } .framework-card__name { font-family: var(--sans); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); margin: 0; } .framework-card__author { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: var(--ink-mute); margin: 0 0 6px 0; font-style: italic; } .framework-card__tagline { font-family: var(--sans); font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); margin: 0; flex-grow: 1; } .framework-card__use { font-family: var(--sans); font-size: 0.82rem; line-height: 1.4; color: var(--ink-mute); margin: 0; padding-top: 10px; border-top: 1px dashed var(--line); font-style: italic; } .framework-card--current .framework-card__use { color: var(--accent-warm); font-weight: 500; font-style: normal; } .frameworks-takeaway { margin-top: 32px; padding: 20px 24px; background: var(--warm); border-left: 3px solid var(--accent-warm); border-radius: 0 8px 8px 0; font-family: var(--sans); font-size: 1.05rem; line-height: 1.65; color: var(--ink-2); } /* Tablet : 2 rows */ @media (max-width: 1100px) { .frameworks-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .frameworks-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .frameworks-grid { grid-template-columns: 1fr; } } /* Dark theme */ :root[data-theme="dark"] .framework-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .framework-card--current { border-color: var(--accent-warm); background: rgba(152, 60, 74, 0.08); } :root[data-theme="dark"] .frameworks-takeaway { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.85); } /* ───────────────────────────────────────────────────────── LANG TOGGLE — FR/EN switcher in header Always visible, clear active/inactive states. ───────────────────────────────────────────────────────── */ .lang-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--accent-warm); background: rgba(152, 60, 74, 0.04); font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-decoration: none; color: var(--ink-soft); transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .lang-toggle__active { color: var(--accent-warm); font-weight: 700; } .lang-toggle__sep { color: var(--accent-warm); opacity: 0.5; font-weight: 400; } .lang-toggle__other { color: var(--ink-soft); font-weight: 600; transition: color 0.2s ease; opacity: 0.85; } @media (hover: hover) and (pointer: fine) { .lang-toggle:hover { border-color: var(--accent-warm); background: var(--accent-warm); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(152, 60, 74, 0.18); } .lang-toggle:hover .lang-toggle__active, .lang-toggle:hover .lang-toggle__other, .lang-toggle:hover .lang-toggle__sep { color: #fdfaf4; opacity: 1; } } /* Dark theme */ :root[data-theme="dark"] .lang-toggle { border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); } :root[data-theme="dark"] .lang-toggle__active { color: var(--accent-warm); } :root[data-theme="dark"] .lang-toggle__other { color: rgba(255, 255, 255, 0.5); } :root[data-theme="dark"] .lang-toggle:hover { border-color: var(--accent-warm); background: rgba(152, 60, 74, 0.12); } /* Hide on very small screens where there's no room — only keep theme + search + menu */ @media (max-width: 380px) { .lang-toggle { display: none; } } /* ───────────────────────────────────────────────────────── ENJEUX RH — Typographie moderne et hiérarchie claire Cibles : sections .about-section avec contenu RH (.about-block). Hiérarchie typographique uniforme et palette de couleur restreinte : - h1 / h2 : 35.2px / ink (--ink: navy foncé) - h3 : 21.6px / ink (--ink) - lead : 18.4px / ink (--ink) — premier paragraphe seulement - body : 16.8px / ink-2 (--ink-2: un cran plus clair) - li : 16.4px / ink-2 (--ink-2) — uniforme partout - strong : taille héritée / ink + weight 600 Seules DEUX couleurs de texte : --ink (h*, lead, strong) et --ink-2 (body, li). Pas de troisième nuance. ───────────────────────────────────────────────────────── */ /* UNIFORMITÉ : tous les paragraphes en style body (16.8px / ink-2). On retire la distinction "lead" sur :first-of-type pour éviter l'incohérence visuelle (texte d'intro plus grand/foncé que la suite). Le style .lead explicite (class) reste utilisé sur les hero des pages. */ .about-block > p:first-of-type:not(.marginalia) { /* Inherit body style from p — no special override */ margin-bottom: 16px; } /* H3 dans about-block : taille uniforme, plus moderne */ .about-block h3 { font-family: var(--sans); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); margin: 40px 0 18px; position: relative; padding-left: 16px; } /* Petit trait bordeaux à gauche des h3 — visual cue moderne */ .about-block h3::before { content: ''; position: absolute; left: 0; top: 0.45em; bottom: 0.3em; width: 3px; background: var(--accent-warm); border-radius: 2px; } /* Paragraphes body : couleur ink-2 (un cran plus clair que le lead) */ .about-block > p { font-size: 1.05rem; line-height: 1.7; color: var(--ink-2); margin-bottom: 20px; } /* dans le body : couleur ink (sombre) — accentuation forte */ .about-block p strong, .about-block li strong { color: var(--ink); font-weight: 600; } /* Listes : plus de respiration entre items, MÊME taille partout */ .about-block .about-list { margin: 16px 0 28px; } .about-block .about-list li { margin-bottom: 22px; padding-left: 24px; font-size: 1.025rem; line-height: 1.65; color: var(--ink-2); } .about-block .about-list li:last-child { margin-bottom: 0; } /* SUR-spécification pour la audience-list (section "Quatre interlocuteurs") afin qu'elle ait aussi font-size 1.025rem (~16.4px) et couleur uniforme, au lieu d'hériter d'un 16px de base. */ .about-block .audience-list .audience-item__body p { font-size: 1.025rem; line-height: 1.65; color: var(--ink-2); } /* Améliorer le trait bordeaux des puces — un peu plus visible */ .about-block .about-list > li::before { width: 12px; height: 2px; background: var(--accent-warm); top: 0.78em; border-radius: 1px; } /* Pour les listes ordonnées : les numéros bordeaux sont déjà bien */ .about-block .about-list--ordered > li { padding-left: 40px; } .about-block .about-list--ordered > li::before { width: auto; height: auto; background: var(--accent-soft); color: var(--accent-warm); font-weight: 600; font-size: 11px; padding: 3px 9px; top: 0.2em; } /* Lien Article complet (Glocale) : style bouton subtil */ .about-block p > a[href*="approche-glocale-formation"] { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--warm); border: 1px solid var(--line); border-radius: 999px; text-decoration: none !important; color: var(--accent) !important; font-weight: 500; font-size: 0.95rem; transition: all 0.2s ease; margin-top: 8px; } .about-block p > a[href*="approche-glocale-formation"]:hover { background: var(--accent-soft); border-color: var(--accent-warm); transform: translateX(4px); } /* Marginalia (italic note under hero) : plus discret, plus élégant */ .about-hero .marginalia { font-size: 0.95rem; color: var(--ink-mute); font-style: italic; letter-spacing: 0.005em; } /* Dark theme adjustments — color uniforme pour tous les paragraphes */ :root[data-theme="dark"] .about-block h3 { color: rgba(255, 255, 255, 0.95); } :root[data-theme="dark"] .about-block p strong, :root[data-theme="dark"] .about-block li strong { color: rgba(255, 255, 255, 1); } /* Mobile : adjustments */ @media (max-width: 720px) { .about-block h3 { font-size: 1.2rem; margin: 32px 0 14px; } .about-block > p { font-size: 1rem; } .about-block .about-list li { font-size: 0.98rem; margin-bottom: 18px; } } /* ───────────────────────────────────────────────────────── RESOURCES — Featured article + list embellishments Garde l'identité magazine éditoriale mais ajoute rythme et profondeur. ───────────────────────────────────────────────────────── */ /* Featured section — distinct background subtle */ .featured-section { padding-top: 24px; padding-bottom: 48px; } /* "À LA UNE" label — small, monospace, with pulsing dot */ .featured-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--accent-warm); text-transform: uppercase; } .featured-label__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-warm); position: relative; flex-shrink: 0; } .featured-label__dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: var(--accent-warm); opacity: 0.35; animation: featured-pulse 2.2s ease-in-out infinite; } @keyframes featured-pulse { 0%, 100% { transform: scale(0.95); opacity: 0.35; } 50% { transform: scale(1.5); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .featured-label__dot::after { animation: none; } } /* Featured card — large editorial card */ .featured-card { display: block; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 36px 40px; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease; } .featured-card::before { /* Subtle gradient accent on the left */ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent-warm), var(--accent)); opacity: 0; transition: opacity 0.4s ease; } @media (hover: hover) and (pointer: fine) { .featured-card:hover { transform: translateY(-3px); border-color: var(--accent-warm); box-shadow: 0 16px 40px rgba(26, 42, 79, 0.1); } .featured-card:hover::before { opacity: 1; } .featured-card:hover .featured-card__arrow { transform: translateX(6px); } .featured-card:hover .featured-card__title { color: var(--accent); } } .featured-card__meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; } .featured-card__date { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.04em; } .featured-card__read { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; } .featured-card__title { font-family: var(--serif); font-size: clamp(1.55rem, 3.2vw, 2.1rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.022em; color: var(--ink); margin: 0 0 16px; transition: color 0.3s ease; max-width: 24ch; } .featured-card__excerpt { font-family: var(--sans); font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 24px; max-width: 65ch; } .featured-card__cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; color: var(--accent); } .featured-card__arrow { font-family: var(--mono); font-size: 16px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; } /* Dark theme */ :root[data-theme="dark"] .featured-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .featured-card:hover { border-color: var(--accent-warm); background: rgba(152, 60, 74, 0.06); } /* Mobile featured */ @media (max-width: 720px) { .featured-card { padding: 24px 22px; border-radius: 12px; } .featured-card__title { max-width: none; } .featured-card__meta { gap: 10px; } } /* ─── List header — "Tous les articles · 46 articles" ─── */ .posts-list-header { display: flex; align-items: baseline; justify-content: space-between; padding: 0 0 18px; margin-bottom: 6px; border-bottom: 1px solid var(--line); gap: 16px; flex-wrap: wrap; } .posts-list-title { font-family: var(--sans); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 0; } .posts-list-count { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.04em; } /* ─── Embellished post-rows ─── */ /* Subtle background hover + tighter typography, more breathing */ .post-row { /* Override with stronger transitions */ padding: 22px 16px; margin: 0 -16px; border-radius: 8px; transition: background 0.25s ease, padding 0.25s ease; } @media (hover: hover) and (pointer: fine) { .post-row:hover { background: var(--warm); } /* In dark mode, hover with subtle white tint */ :root[data-theme="dark"] .post-row:hover { background: rgba(255, 255, 255, 0.04); } } /* Refined title sizing — slightly bigger */ .post-row .post-title { font-size: 1.13rem; line-height: 1.4; } /* Arrow gets a touch of weight */ .post-row .post-arrow { font-size: 16px; opacity: 0.7; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease, opacity 0.3s ease; } .post-row:hover .post-arrow { opacity: 1; } /* Hide the featured article from the main list when filter is "all" (it's already showcased above). It reappears when filtering by category/tag. Done by JS — see resources.js / script.js featured-handling logic. */ .posts .post-row[data-featured-duplicate].is-hidden-duplicate { display: none; } /* ───────────────────────────────────────────────────────── ARTICLE SUGGESTION CARD Composant réutilisable : suggère un article en bas de section (enjeux-rh, expertise, about). Cohérent avec featured-card. ───────────────────────────────────────────────────────── */ .article-suggestion { margin-top: 32px; display: block; background: var(--warm); border: 1px solid var(--line); border-radius: 12px; padding: 24px 28px; text-decoration: none !important; color: inherit; position: relative; overflow: hidden; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease; } .article-suggestion::before { /* Subtle accent bar on the left */ content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; background: var(--accent-warm); border-radius: 2px; transition: top 0.3s ease, bottom 0.3s ease; } @media (hover: hover) and (pointer: fine) { .article-suggestion:hover { transform: translateY(-2px); border-color: var(--accent-warm); box-shadow: 0 10px 28px rgba(26, 42, 79, 0.08); } .article-suggestion:hover::before { top: 0; bottom: 0; } .article-suggestion:hover .article-suggestion__arrow { transform: translateX(6px); } .article-suggestion:hover .article-suggestion__title { color: var(--accent); } } .article-suggestion__label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-warm); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .article-suggestion__label::after { content: ''; flex: 1; height: 1px; background: var(--line); max-width: 60px; margin-left: 4px; } .article-suggestion__title { font-family: var(--sans); font-size: 1.15rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 8px; transition: color 0.3s ease; } .article-suggestion__excerpt { font-family: var(--sans); font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; } .article-suggestion__cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 0.92rem; font-weight: 500; color: var(--accent); } .article-suggestion__arrow { font-family: var(--mono); font-size: 14px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; } /* Dark theme */ :root[data-theme="dark"] .article-suggestion { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .article-suggestion:hover { background: rgba(152, 60, 74, 0.08); border-color: var(--accent-warm); } /* Mobile */ @media (max-width: 600px) { .article-suggestion { padding: 20px 22px; } .article-suggestion__title { font-size: 1.05rem; } } /* ───────────────────────────────────────────────────────── ABOUT — Modernisation (chips identité + airing) Style Linear/Stripe minimaliste : chips en pill, dot animé, typo plus contemporaine sans casser l'identité éditoriale. ───────────────────────────────────────────────────────── */ /* Identity chips — pills d'identité en sous-titre du hero */ .identity-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; max-width: 56ch; } .identity-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--warm); border: 1px solid var(--line); border-radius: 999px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.005em; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } @media (hover: hover) and (pointer: fine) { .identity-chip:hover { border-color: var(--accent-warm); background: rgba(152, 60, 74, 0.04); transform: translateY(-1px); } } /* Petit point bordeaux pulsant sur le 1er chip (Madrid) */ .identity-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-warm); position: relative; flex-shrink: 0; } .identity-chip__dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: var(--accent-warm); opacity: 0.4; animation: chip-pulse 2.5s ease-in-out infinite; } @keyframes chip-pulse { 0%, 100% { transform: scale(0.9); opacity: 0.4; } 50% { transform: scale(1.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .identity-chip__dot::after { animation: none; } } /* Marginalia plus discret en dark style */ .about-hero__marginalia { margin-top: 24px !important; } /* Dark theme */ :root[data-theme="dark"] .identity-chip { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); } :root[data-theme="dark"] .identity-chip:hover { border-color: var(--accent-warm); background: rgba(152, 60, 74, 0.1); } /* Mobile */ @media (max-width: 600px) { .identity-chips { gap: 6px; margin-top: 20px; } .identity-chip { padding: 5px 12px; font-size: 12px; } } /* ─── Modernisation sections about (D'où je viens, 4 moments...) ─── */ /* Le numéro 01-02-03 — plus discret, plus contemporain */ .about-section .about-block__num { /* Conservation du style serif mais positionnement plus subtil */ opacity: 0.85; } /* H2 dans about-section — plus aéré, plus moderne */ .about-section .about-block > h2 { font-family: var(--serif); font-size: clamp(1.85rem, 3.5vw, 2.4rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin-bottom: 28px; max-width: 22ch; } /* UNIFORMITÉ : retiré le style lead pour cohérence visuelle. Tous les

dans .about-section utilisent maintenant le même style body. */ .about-section .about-block > p:first-of-type:not(.marginalia) { margin-bottom: 16px; } /* Paragraphes suivants — max-width généreuse (80ch) pour laisser respirer les phrases-teasers d'intro de liste sans les briser inutilement. Toujours dans la zone de confort de lecture (idéal 50-90ch). */ .about-section .about-block > p { max-width: 80ch; } /* Paragraphes d'intro de liste (juste avant ul/ol) : pas de max-width, ils sont par nature courts et se lisent comme un teaser one-liner. */ .about-section .about-block > p:has(+ ul), .about-section .about-block > p:has(+ ol) { max-width: none; } /* Strong en accent subtil — pas trop bold pour éviter l'effet "AI emphasis" */ .about-section .about-block p strong:first-of-type { /* Le 1er strong fait office de mini-titre dans certains blocs (Le RC Lens, La Thaïlande...) */ color: var(--accent); } /* Blockquote/marginalia en bas des sections — plus aéré */ .about-section blockquote, .about-section .marginalia { margin-top: 32px; padding: 20px 28px; border-left: 3px solid var(--accent-warm); background: rgba(152, 60, 74, 0.03); border-radius: 4px; font-style: italic; color: var(--ink-2); max-width: 56ch; } /* ───────────────────────────────────────────────────────── ABOUT — Moments grid (4 cards style timeline moderne) Cards en grid 2x2 sur desktop, 1x4 sur mobile. Style éditorial : année en gros, org en pill, titre fort, body. ───────────────────────────────────────────────────────── */ .moments-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0 24px; } .moment-card { position: relative; padding: 28px 28px 28px 32px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease; overflow: hidden; } /* Petit trait vertical bordeaux à gauche */ .moment-card::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px; background: var(--accent-warm); border-radius: 0 2px 2px 0; opacity: 0.7; transition: opacity 0.3s ease, top 0.3s ease, bottom 0.3s ease; } @media (hover: hover) and (pointer: fine) { .moment-card:hover { transform: translateY(-3px); border-color: var(--accent-warm); box-shadow: 0 12px 32px rgba(26, 42, 79, 0.08); } .moment-card:hover::before { opacity: 1; top: 0; bottom: 0; } } /* Année en gros, serif, accent warm — élément phare */ .moment-card__year { font-family: var(--serif); font-size: 2.2rem; font-weight: 500; color: var(--accent-warm); line-height: 1; letter-spacing: -0.02em; margin-bottom: 6px; } /* Organisation en pill discret */ .moment-card__org { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); background: var(--warm); padding: 3px 10px; border-radius: 999px; margin-bottom: 14px; } /* Titre du moment */ .moment-card__title { font-family: var(--sans); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 12px; line-height: 1.3; } /* Body */ .moment-card__body { font-family: var(--sans); font-size: 0.98rem; line-height: 1.65; color: var(--ink-2); margin: 0; } /* Dark theme */ :root[data-theme="dark"] .moment-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .moment-card:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--accent-warm); } :root[data-theme="dark"] .moment-card__org { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.6); } /* Mobile : single column */ @media (max-width: 720px) { .moments-grid { grid-template-columns: 1fr; gap: 16px; margin: 24px 0 20px; } .moment-card { padding: 22px 22px 22px 26px; } .moment-card__year { font-size: 1.9rem; } .moment-card__title { font-size: 1.1rem; } .moment-card__body { font-size: 0.94rem; } } /* ───────────────────────────────────────────────────────── ABOUT — Réduction espace entre about-sections consécutives Quand 2 sections about se suivent, on uniformise l'espacement pour éviter l'inconsistance visuelle (gaps variant 64-92px selon ce qui termine la section). Pattern : padding-bottom uniforme à 56px sur toutes les sections sauf la dernière, padding-top à 0 sur celles qui suivent une autre about-section. ───────────────────────────────────────────────────────── */ .about-section { padding-bottom: 56px; } .about-section + .about-section { padding-top: 0; } /* Pour mobile, idem */ @media (max-width: 720px) { .about-section { padding-bottom: 44px; } .about-section + .about-section { padding-top: 0; } } /* Dernière about-section avant footer : un peu plus d'air avant la fin */ .about-section:last-of-type { padding-bottom: 80px; } /* Section about-hero — pas affectée par la règle (elle reste à 140px/60px) */ .about-hero + .about-section { padding-top: 0; } /* ───────────────────────────────────────────────────────── ABOUT-BLOCK — Reset margin-bottom du dernier enfant Évite l'écart visuel quand la section se finit par une liste (56 + 28 = 84px) plutôt que par un paragraphe (56 + 0 = 56px). Spécificité boostée pour battre .about-section .marginalia (0,2,0). ───────────────────────────────────────────────────────── */ .about-section .about-block > *:last-child, .about-section .about-block .about-list:last-child, .about-section .about-block > p.marginalia:last-child, .about-section .about-block > blockquote:last-child { margin-bottom: 0 !important; } /* ───────────────────────────────────────────────────────── EXPERTISE-GRID modifiers — 2 colonnes pour 4 items Utilisé sur enjeux-rh section 01 (4 interlocuteurs) où une grille 2x2 est plus lisible qu'une 3+1 incomplète. ───────────────────────────────────────────────────────── */ .expertise-grid--modern.expertise-grid--2col { grid-template-columns: repeat(2, 1fr); gap: 20px; } /* Mobile : 1 colonne */ @media (max-width: 720px) { .expertise-grid--modern.expertise-grid--2col { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────────── DARK MODE — Footer mega En dark, --ink devient clair donc le footer (qui utilise --ink en bg) passe en fond clair, rendant tous les textes blancs invisibles. On force ici un fond TOUJOURS sombre + textes adaptés. ───────────────────────────────────────────────────────── */ :root[data-theme="dark"] .footer-mega { background: #0d0e10; color: rgba(255, 255, 255, 0.95); } :root[data-theme="dark"] .footer-mega__brand-text { color: rgba(255, 255, 255, 0.65); } :root[data-theme="dark"] .footer-mega__col-title { color: rgba(255, 255, 255, 0.5); } :root[data-theme="dark"] .footer-mega__col a { color: rgba(255, 255, 255, 0.85); } :root[data-theme="dark"] .footer-mega__col a:hover { color: #ffffff; } :root[data-theme="dark"] .footer-mega__col-sublabel { color: rgba(255, 255, 255, 0.5); } :root[data-theme="dark"] .footer-mega__wordmark { color: rgba(255, 255, 255, 0.05); } :root[data-theme="dark"] .footer-mega__bottom { color: rgba(255, 255, 255, 0.7); border-top-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .footer-mega__legal a { color: rgba(255, 255, 255, 0.7); } :root[data-theme="dark"] .footer-mega__legal a:hover { color: #ffffff; } :root[data-theme="dark"] .footer-mega__copyright { color: rgba(255, 255, 255, 0.6); } /* Logo dot + name dans le footer dark */ :root[data-theme="dark"] .footer-mega__logo-name { color: rgba(255, 255, 255, 0.95); } :root[data-theme="dark"] .footer-mega__logo-tagline { color: rgba(255, 255, 255, 0.5); } /* Bordure top du footer__top en dark */ :root[data-theme="dark"] .footer-mega__top { border-bottom-color: rgba(255, 255, 255, 0.08); } /* ───────────────────────────────────────────────────────── À LA UNE — Grille des articles phares par catégorie Affiche 7 mini-cards (1 par grande thématique). ───────────────────────────────────────────────────────── */ .featured-intro { font-size: 1rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 32px; max-width: 56ch; } .featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 960px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .featured-grid { grid-template-columns: 1fr; gap: 16px; } } /* Mini-card individuelle */ .featured-mini { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; position: relative; overflow: hidden; } .featured-mini::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: 0.4; transition: opacity 0.25s ease, width 0.25s ease; } .featured-mini:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); border-color: rgba(152, 60, 74, 0.25); } .featured-mini:hover::before { opacity: 1; width: 4px; } .featured-mini__title { font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; color: var(--ink); margin: 4px 0 4px; font-weight: 500; } .featured-mini__excerpt { font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); margin: 0; flex: 1; } .featured-mini__cta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; text-transform: uppercase; margin-top: 8px; transition: transform 0.25s ease; } .featured-mini:hover .featured-mini__cta { transform: translateX(4px); } /* Dark mode adaptation */ :root[data-theme="dark"] .featured-mini { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .featured-mini:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(201, 161, 74, 0.3); } /* ───────────────────────────────────────────────────────── ARTICLE LAYOUT — TOC sidebar + body (CSS Grid) La TOC est masquée par défaut (hidden), affichée par JS si l'article a >= 4 H2 ET >= 1500 mots. ───────────────────────────────────────────────────────── */ .article-layout { position: relative; } /* Desktop : layout 2 colonnes avec TOC sticky à gauche */ @media (min-width: 1100px) { .article-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; max-width: 1200px; margin: 0 auto; padding: 0 24px; align-items: start; } .article-layout .article-body { /* article-body retains its own internal max-width; we let it center within the second column */ max-width: var(--container-narrow); margin: 0; padding-left: 0; padding-right: 0; } .article-toc { position: sticky; top: 90px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 8px; } } @media (min-width: 1280px) { .article-layout { max-width: 1280px; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; } } /* Hidden state — used when article is short OR before JS runs */ .article-toc[hidden] { display: none; } /* When TOC is hidden, layout should not have a left column */ @media (min-width: 1100px) { .article-layout:has(.article-toc[hidden]) { grid-template-columns: 1fr; } .article-layout:has(.article-toc[hidden]) .article-body { margin: 0 auto; } } /* ───── TOC base styles ───── */ .article-toc { font-family: var(--sans); font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); } /* Toggle button (label + chevron) */ .article-toc__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: none; padding: 0 0 12px; cursor: default; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; border-bottom: 1px solid var(--line); } .article-toc__toggle-icon { transition: transform 0.25s ease; opacity: 0.6; display: none; /* hidden on desktop, only visible on mobile */ } .article-toc__nav { margin-top: 12px; } .article-toc__list { list-style: none; padding: 0; margin: 0; } .article-toc__item { margin: 0; padding: 0; } .article-toc__link { display: block; padding: 8px 0 8px 16px; text-decoration: none; color: var(--ink-soft); border-left: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease; line-height: 1.4; font-size: 0.875rem; } .article-toc__link:hover { color: var(--ink); border-left-color: var(--line); } .article-toc__link--active { color: var(--accent); border-left-color: var(--accent); font-weight: 500; } /* Mobile : TOC en haut de l'article, en accordéon */ @media (max-width: 1099px) { .article-toc { max-width: 680px; margin: 24px auto 0; padding: 16px 20px; background: var(--warm); border: 1px solid var(--line); border-radius: 8px; } .article-toc__toggle { cursor: pointer; padding-bottom: 0; border-bottom: none; } .article-toc__toggle-icon { display: block; } .article-toc--collapsed .article-toc__nav { display: none; } .article-toc--collapsed .article-toc__toggle-icon { transform: rotate(-90deg); } .article-toc__nav { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .article-toc__link { padding: 6px 0 6px 12px; } } /* Dark mode */ :root[data-theme="dark"] .article-toc__toggle { border-bottom-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .article-toc__link { color: rgba(255, 255, 255, 0.55); } :root[data-theme="dark"] .article-toc__link:hover { color: rgba(255, 255, 255, 0.85); border-left-color: rgba(255, 255, 255, 0.15); } :root[data-theme="dark"] .article-toc__link--active { color: var(--accent-warm); border-left-color: var(--accent-warm); } @media (max-width: 1099px) { :root[data-theme="dark"] .article-toc { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .article-toc__nav { border-top-color: rgba(255, 255, 255, 0.08); } }