/* ======================================== Focus states ======================================== */ /* Visible focus ring for keyboard users only */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } /* Suppress focus ring when focus came from a pointer */ :focus:not(:focus-visible) { outline: none; } /* Tighten offset on pill buttons so the ring hugs the shape */ .btn:focus-visible { outline-offset: 2px; } /* ======================================== Buttons ======================================== */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); border: 2px solid transparent; border-radius: var(--radius-pill); cursor: pointer; transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); white-space: nowrap; text-align: center; justify-content: center; } .btn--primary { background-color: var(--color-primary); color: var(--color-text-on-dark); border-color: var(--color-primary); } .btn--primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(calc(-1 * var(--offset-sm))); box-shadow: var(--shadow-md); } .btn--secondary { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn--secondary:hover { background-color: var(--color-primary); color: var(--color-text-on-dark); transform: translateY(calc(-1 * var(--offset-sm))); box-shadow: var(--shadow-md); } .btn--white { background-color: var(--color-white); color: var(--color-primary); border-color: var(--color-white); } .btn--white:hover { background-color: var(--color-gray-100); border-color: var(--color-gray-100); transform: translateY(calc(-1 * var(--offset-sm))); box-shadow: var(--shadow-md); } .btn--lg { padding: var(--sp-4) var(--sp-8); } /* Bouton avec fleche animee */ .btn .btn__arrow { display: inline-block; transition: transform var(--duration-base) var(--ease-out); } .btn:hover .btn__arrow { transform: translateX(var(--offset-sm)); } /* ======================================== Pills (brand accent element) ======================================== */ .pill { display: inline-block; background-color: var(--color-sunrise); color: var(--color-primary); padding: 0.1em 0.4em; border-radius: var(--radius-pill); white-space: nowrap; } /* Decorative floating pills — purely visual accents. Apply a type utility class in markup for sizing (e.g. .label-small, .body-large, .headline-small). */ .pill-deco { display: inline-block; background-color: var(--color-sunrise); color: var(--color-primary); padding: 0.35em 0.9em; border-radius: var(--radius-pill); white-space: nowrap; position: absolute; pointer-events: none; user-select: none; } /* Color variants */ .pill-deco--lilac { background-color: var(--color-lilac-glow); } .pill-deco--blue { background-color: var(--color-skylight-blue); } .pill-deco--pink { background-color: var(--color-sunbeam); } /* ======================================== Header ======================================== */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 1rem; will-change: transform; transition: padding var(--duration-ring) var(--ease-expressive), transform var(--duration-ring) var(--ease-expressive); } /* FOUC guard — see animations.js header for the contract. The JS adds `has-animations` to only when it will animate; this rule hides the header until the entrance tween sets opacity inline. */ body.has-animations .header { opacity: 0; } /* When the mobile menu opens, the outer frame gap collapses so the pill (header__inner) can reach the viewport edges. */ .header.is-open { padding: 0; } .header--hidden { transform: translateY(-120%); transition: transform var(--duration-ring) var(--ease-expressive); } .header--pill .header__inner { max-width: 1440px; margin-inline: auto; display: flex; flex-direction: column; /* Height clamped to the bar at rest so the mobile-nav (flex:1, below the bar) is clipped by overflow:hidden and doesn't extend the pill. .header.is-open expands this height to full viewport. */ height: 74px; background: var(--color-base-white); backdrop-filter: blur(16px); border-radius: 100px; box-shadow: var(--shadow-card); overflow: hidden; transition: max-width var(--duration-ring) var(--ease-expressive), height var(--duration-ring) var(--ease-expressive), border-radius var(--duration-ring) var(--ease-expressive); } /* The top bar (logo + nav + burger). Split into its own row so the mobile menu can flow beneath it inside the same pill container. */ .header__bar { display: flex; align-items: center; justify-content: space-between; height: 74px; padding: 0 var(--sp-4); flex-shrink: 0; } /* Open state: the pill expands from 74px row to full viewport on mobile. On desktop this rule never fires (burger is hidden above --bp-desktop, so .is-open won't toggle there). */ .header.is-open .header__inner { max-width: 100%; height: 100vh; height: 100svh; border-radius: 0; } .header__logo img { height: 54px; width: auto; } .header__nav { flex: 1; display: none; /* hidden on mobile, shown tablet+ */ align-items: center; justify-content: flex-end; gap: var(--sp-8); } .header__links { display: flex; align-items: center; gap: var(--sp-6); margin-inline: auto; } .header__link { color: var(--color-text); transition: color var(--duration-fast) var(--ease-out); position: relative; } .header__link:hover { color: var(--color-primary); } /* Dropdown Solutions */ .header__dropdown { position: relative; } .header__dropdown-trigger { display: flex; align-items: center; gap: var(--sp-1); cursor: pointer; background: none; border: none; color: var(--color-text); transition: color var(--duration-fast) var(--ease-out); } .header__dropdown-trigger:hover { color: var(--color-primary); } .header__dropdown-icon { transition: transform var(--duration-fast) var(--ease-out); /* Proportional glyph scaling — chevron sized relative to parent text, not a typography role. */ font-size: 0.7em; } .header__dropdown:hover .header__dropdown-icon, .header__dropdown.is-open .header__dropdown-icon { transform: rotate(180deg); } .header__dropdown-menu { position: absolute; top: calc(100% + var(--sp-2)); left: 50%; transform: translateX(-50%) translateY(var(--offset-md)); min-width: 220px; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--sp-2); opacity: 0; visibility: hidden; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base) var(--ease-out); } .header__dropdown:hover .header__dropdown-menu, .header__dropdown.is-open .header__dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .header__dropdown-item { display: block; padding: var(--sp-3) var(--sp-4); color: var(--color-text); border-radius: var(--radius-sm); transition: background var(--duration-fast) var(--ease-out); } .header__dropdown-item:hover { background: var(--color-gray-100); color: var(--color-primary); } /* Burger mobile (visible at mobile, hidden tablet+) */ .header__burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0; } .header__burger span { display: block; width: 100%; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); transform-origin: center; } /* Burger -> X animation */ .header__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .header__burger.is-active span:nth-child(2) { opacity: 0; } .header__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav — lives inside .header__inner (below .header__bar) and fades in when the parent pill expands on .header.is-open. It sits in normal flow, so clipping happens via .header__inner's own overflow:hidden + height transition rather than a translate. */ .header__mobile-nav { display: flex; flex: 1; flex-direction: column; gap: var(--sp-6); padding: var(--sp-6) var(--gutter) var(--sp-8); overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out); } .header.is-open .header__mobile-nav { opacity: 1; pointer-events: auto; } .header__mobile-link { color: var(--color-text); padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-gray-200); } .header__mobile-link:hover { color: var(--color-primary); } /* CTA button in the mobile menu — pushed to the bottom of the expanded pill so it's always anchored, regardless of link count. */ .header__mobile-cta { margin-top: auto; } /* >= --bp-desktop — full nav shown only at desktop; burger persists through tablet */ @media (min-width: 1024px) { .header { padding: 1.5rem 2rem; } .header__bar { padding: 0 2rem; } .header__nav { display: flex; } .header__burger { display: none; } .header__mobile-nav { display: none; } } /* ======================================== Footer — Purple ======================================== */ .footer { background: transparent; color: var(--color-base-white); padding-top: 6rem; padding-bottom: 3rem; } .footer__inner { max-width: var(--max-width-wide); margin-inline: auto; padding-inline: var(--gutter); } .footer__top { display: flex; flex-direction: column; gap: var(--space-xl); margin-bottom: var(--space-2xl); } .footer__brand { max-width: none; } .footer__logo { display: inline-block; margin-bottom: var(--space-md); } .footer__logo img { display: block; height: 54px; width: auto; } .footer__desc { color: rgba(255, 255, 255, 0.7); } .footer__links { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .footer__col { display: flex; flex-direction: column; gap: var(--space-sm); } .footer__col h4 { color: var(--color-base-white); margin-bottom: 0.5rem; } .footer__col a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color var(--duration-instant) var(--ease-out); } .footer__col a:hover { color: var(--color-base-white); } .footer__bottom { padding-top: var(--space-lg); border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; } .footer__bottom p { color: rgba(255, 255, 255, 0.5); } .footer__legal { display: flex; gap: var(--space-lg); } .footer__legal a { color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color var(--duration-instant) var(--ease-out); } .footer__legal a:hover { color: var(--color-base-white); } /* Minimal variant (london single-page) — logo + copyright, centred. No link columns, no bottom bar, no CTA. */ .footer--minimal .footer__top { margin-bottom: 0; align-items: center; justify-content: center; text-align: center; } .footer--minimal .footer__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); max-width: none; } .footer__logo-img { display: block; height: 40px; width: auto; } /* >= --bp-tablet */ @media (min-width: 720px) { .footer__top { flex-direction: row; justify-content: space-between; gap: var(--space-2xl); } .footer__brand { max-width: 280px; } .footer__links { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; } } /* ======================================== Cards ======================================== */ .card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--sp-8); transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .card:hover { transform: translateY(calc(-1 * var(--offset-sm))); box-shadow: var(--shadow-lg); border-color: var(--color-gray-300); } .card__icon { margin-bottom: var(--sp-4); } .card__title { color: var(--color-primary); margin-bottom: var(--sp-3); } .card__text { color: var(--color-text-light); margin-bottom: var(--sp-4); } .card__list { display: flex; flex-direction: column; gap: var(--sp-2); } .card__list li { color: var(--color-text); padding-left: var(--sp-5); position: relative; } .card__list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }