/* ============================================ ANCORA – BASE STYLESHEET Tokens · Reset · Grid · Utilities · Animations Page-specific styles live in their own CSS files. ============================================ */ /* ---------- FONTS ---------- */ @font-face { font-family: 'Exposure'; src: url('../assets/fonts/exposure/205TF_Exposure_Pack[0]/Desktop/205TF-Exposure-[0].otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Exposure'; src: url('../assets/fonts/exposure/205TF_Exposure_Pack[0]/Desktop/205TF-Exposure-[0]Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Exposure Tight'; src: url('../assets/fonts/exposure/205TF_Exposure_Pack[-20]/Desktop/205TF-Exposure-[-20].otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Exposure Tight'; src: url('../assets/fonts/exposure/205TF_Exposure_Pack[-20]/Desktop/205TF-Exposure-[-20]Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } /* ---------- RESET ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ---------- DESIGN TOKENS ---------- */ :root { /* Colours */ --ocre: #592A27; --cuivre: #BF6954; --light-bg: #EEEEEE; --white: #FFFFFF; --dark: #333333; --gray-placeholder: #D9D9D9; --teal: #076269; --or: #D1C79F; /* ---------- TYPOGRAPHY ---------- */ /* Families – Exposure by 205TF */ --font-heading: 'Exposure Tight', 'Georgia', serif; --font-body: 'Exposure', 'Georgia', serif; /* Weights – Exposure ships only weight 400, so --fw-medium resolves to regular to avoid the browser synthesizing a fake bold. Use --fw-bold sparingly, only where a synthesized bold is intentional. */ --fw-regular: 400; --fw-medium: 400; --fw-bold: 700; /* Line heights */ --lh-tight: 1; --lh-snug: 1.2; --lh-normal: 1.4; --lh-relaxed: 1.6; /* Global type scale — every --fs-* and px-based --lh-* below is multiplied by one of these knobs. 1 = original Figma design sizes. --type-scale → headings & UI (display, section, hero, h3, feature, ui, caption, micro): 0.8 = 20% smaller. --type-scale-body → body & lead paragraphs (body, body-sm, body-lg, lead, lead-sm): 1.0 = full design size. Unitless line-heights (--lh-snug etc.) scale automatically with font-size. The header nav (--fs-nav) and logo are intentionally EXEMPT. */ --type-scale: 0.8; --type-scale-body: 1.0; /* Type scale – fluid, continuous from mobile up to 4K. Pattern: max( ORIGINAL_CLAMP , min( SLOPEvw , CEILING×2 ) ) • ≤1920px → the original clamp wins → rendering is IDENTICAL to before (mobile / tablet / laptop / 1920 untouched). • 1920→3840px → the SLOPEvw branch (= ceiling/19.2 px per vw) takes over and grows linearly to 2× the old ceiling, so 4K mirrors the 1920 design scaled up instead of leaving tiny text in oversized columns. • >3840px → capped at 2× (matches the 3840px container max-width). Each result is then × --type-scale (headings/UI) or --type-scale-body. */ --fs-display: calc(max(clamp(3.6667rem, 7.26vw, 5.8333rem), min(5.469vw, 11.6667rem)) * var(--type-scale)); /* Step numbers, hero display */ --lh-display: var(--lh-tight); /* ── Re-anchored to the 1920×1080 wireframe scale (2026-06) ─────────────── Target px @1920: h1 = h2 = feature (short statements) 59 · h3 / footer- title / lead / lead-sm 39 · body / footer-text / buttons 22 · caption 16. Each token still grows to 2× at 4K and floors on mobile via the same max(clamp(),min()) machinery. */ --fs-section: calc(max(clamp(2.2222rem, 3.8411vw, 4.0972rem), min(3.8411vw, 8.1944rem)) * var(--type-scale)); /* 59px @1920 —

*/ --lh-section: calc(max(clamp(2.0488rem, 4.1905vw, 4.4699rem), min(4.1905vw, 8.9397rem)) * var(--type-scale)); --fs-hero: calc(max(clamp(2.2222rem, 3.8411vw, 4.0972rem), min(3.8411vw, 8.1944rem)) * var(--type-scale)); /* 59px @1920 —

(= h2) */ --lh-hero: var(--lh-snug); --fs-feature: calc(max(clamp(2.2222rem, 3.8411vw, 4.0972rem), min(3.8411vw, 8.1944rem)) * var(--type-scale)); /* 59px @1920 — highlight statements (.intro-text); heading font + accents */ --lh-feature: calc(max(clamp(2.0488rem, 4.1905vw, 4.4699rem), min(4.1905vw, 8.9397rem)) * var(--type-scale)); --fs-h3: calc(max(clamp(1.4444rem, 2.5391vw, 2.7083rem), min(2.5391vw, 5.4167rem)) * var(--type-scale)); /* 39px @1920 — sub-headings, footer titles, ks hero text */ --lh-h3: var(--lh-snug); --fs-lead: calc(max(clamp(1.4444rem, 2.0313vw, 2.1667rem), min(2.0313vw, 4.3333rem)) * var(--type-scale-body)); /* 39px @1920 — lead paragraphs, quotes (= h3); short highlight statements use --fs-feature (59) */ --lh-lead: var(--lh-snug); --fs-lead-sm: calc(max(clamp(1.4444rem, 2.0313vw, 2.1667rem), min(2.0313vw, 4.3333rem)) * var(--type-scale-body)); /* 39px @1920 — smaller lead / timeline & legal hero lead */ --lh-lead-sm: var(--lh-snug); --fs-body-lg: calc(max(clamp(1rem, 1.1458vw, 1.2222rem), min(1.1458vw, 2.4444rem)) * var(--type-scale-body)); /* 22px @1920 — footer text / footer links (= body) */ --lh-body-lg: calc(max(clamp(0.7407rem, 1.25vw, 1.3333rem), min(1.25vw, 2.6667rem)) * var(--type-scale-body)); --fs-body: calc(max(clamp(1.1111rem, 1.1458vw, 1.2222rem), min(1.1458vw, 2.4444rem)) * var(--type-scale-body)); /* 22px @1920 — body */ --lh-body: var(--lh-snug); --fs-body-sm: calc(max(clamp(1rem, 1.1458vw, 1.2222rem), min(1.1458vw, 2.4444rem)) * var(--type-scale-body)); /* 22px @1920 — body, smaller floor (forms, legal/cookie) */ --lh-body-sm: var(--lh-snug); --fs-ui: calc(max(1.3333rem, min(1.4323vw, 3.0556rem)) * var(--type-scale)); /* 22px @1920 — buttons, CTA, footer bottom (= body) */ --lh-ui: calc(max(1.6550rem, min(1.5514vw, 3.3102rem)) * var(--type-scale)); --fs-caption: calc(max(clamp(0.8333rem, 1.0417vw, 1.1111rem), min(1.0417vw, 2.2222rem)) * var(--type-scale)); /* 16px @1920 — "citation": NB notes, RDV labels, dates, disclaimers */ --lh-caption: var(--lh-snug); --fs-micro: calc(max(0.8333rem, min(0.781vw, 1.6667rem)) * var(--type-scale)); /* RDV badge */ /* Header — intentionally larger and EXEMPT from --type-scale */ --fs-nav: 1.5556rem; /* Header nav links (was --fs-ui 24px) */ --lh-nav: 1.6667rem; /* Layout */ --max-width: 106.6667rem; --transition: all 0.3s ease; /* Motion tokens */ --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms; --dur-4: 300ms; --dur-5: 500ms; --ease-out-quad: cubic-bezier(.25, .46, .45, .94); --ease-out-quart: cubic-bezier(.165, .84, .44, 1); --ease-out-expo: cubic-bezier(.19, 1, .22, 1); --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1); /* 12-column grid (1920 px base – Figma Stretch) */ --grid-columns: 12; --grid-margin: clamp(1.1111rem, 2.34375vw, 5rem); --grid-gutter: clamp(0.5556rem, 1.04167vw, 2.2222rem); --grid-content: calc(var(--max-width) - 2 * var(--grid-margin)); --col: calc((var(--grid-content) - 11 * var(--grid-gutter)) / 12); } /* ---------- RESPONSIVE BREAKPOINTS ---------- One shared system across every stylesheet. Use max-width queries ONLY, ordered largest → smallest so the narrower tier wins the cascade. Never mix in min-width (avoids 1px gap/overlap bugs). ≥ 1440 Desktop — the design base, no overrides ≤ 1440 Laptop — fluid scaling, eliminate overflow ≤ 1024 Tablet — reduced columns, smaller decoratives ≤ 768 Mobile — single column (the 12-col grid auto-collapses below) ≤ 480 Phone — fine-tuning Fold any ad-hoc values (1100/1200…) into these tiers when touching a file. */ /* ---------- BASE ELEMENTS ---------- */ html { scroll-behavior: smooth; font-size: 1.125rem; overflow-x: hidden; } body { font-family: var(--font-body); font-weight: var(--fw-regular); color: var(--dark); background-color: var(--light-bg); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { text-decoration: none; color: inherit; transition: var(--transition); } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } /* Base typography — only `color` may be overridden per page/section. Size, line-height, family and weight are locked to design tokens. */ h1 { font-family: var(--font-heading); font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: var(--fw-regular); color: var(--ocre); } h2 { font-family: var(--font-heading); font-size: var(--fs-section); line-height: var(--lh-section); font-weight: var(--fw-regular); color: var(--cuivre); } h3 { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-regular); color: var(--ocre); } h4 { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-regular); color: var(--ocre); } p { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); } /* ---------- TYPOGRAPHY UTILITY CLASSES ---------- Apply these directly in HTML, OR reference the tokens (--fs-*, --lh-*, --fw-*) inside component styles. Change a token in :root and every usage updates. */ .t-display { font-family: var(--font-heading); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-regular); } .t-section { font-family: var(--font-heading); font-size: var(--fs-section); line-height: var(--lh-section); font-weight: var(--fw-medium); } .t-section--reg { font-family: var(--font-heading); font-size: var(--fs-section); line-height: var(--lh-section); font-weight: var(--fw-regular); } .t-hero { font-family: var(--font-heading); font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: var(--fw-regular); } .t-feature { font-family: var(--font-heading); font-size: var(--fs-feature); line-height: var(--lh-feature); font-weight: var(--fw-regular); } .t-h3 { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-regular); } .t-lead { font-family: var(--font-body); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--fw-regular); } .t-lead-sm { font-family: var(--font-body); font-size: var(--fs-lead-sm); line-height: var(--lh-lead-sm); font-weight: var(--fw-regular); } .t-body-lg { font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: var(--fw-regular); } .t-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); } .t-body-sm { font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); font-weight: var(--fw-regular); } .t-ui { font-family: var(--font-heading); font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-medium); } .t-caption { font-family: var(--font-heading); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-regular); } section { padding: 4.4444rem 0; position: relative; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- 12-COLUMN GRID ---------- */ .grid-container { width: 100%; max-width: 213.3333rem; margin: 0 auto; padding: 0 var(--grid-margin); } .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--grid-gutter); } /* Span utilities – use grid-column-end so they compose with .col-start-N */ .col-1 { grid-column-end: span 1; } .col-2 { grid-column-end: span 2; } .col-3 { grid-column-end: span 3; } .col-4 { grid-column-end: span 4; } .col-5 { grid-column-end: span 5; } .col-6 { grid-column-end: span 6; } .col-7 { grid-column-end: span 7; } .col-8 { grid-column-end: span 8; } .col-9 { grid-column-end: span 9; } .col-10 { grid-column-end: span 10; } .col-11 { grid-column-end: span 11; } .col-12 { grid-column-end: span 12; } /* Start-position utilities */ .col-start-1 { grid-column-start: 1; } .col-start-2 { grid-column-start: 2; } .col-start-3 { grid-column-start: 3; } .col-start-4 { grid-column-start: 4; } .col-start-5 { grid-column-start: 5; } .col-start-6 { grid-column-start: 6; } .col-start-7 { grid-column-start: 7; } .col-start-8 { grid-column-start: 8; } .col-start-9 { grid-column-start: 9; } .col-start-10 { grid-column-start: 10; } .col-start-11 { grid-column-start: 11; } .col-start-12 { grid-column-start: 12; } /* Collapse to single column on mobile */ @media (max-width: 768px) { .grid { grid-template-columns: 1fr; gap: 0; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: span 1; } .col-start-1, .col-start-2, .col-start-3, .col-start-4, .col-start-5, .col-start-6, .col-start-7, .col-start-8, .col-start-9, .col-start-10, .col-start-11, .col-start-12 { grid-column-start: 1; } /* Catch-all: grid children placed via explicit grid-column/grid-row in component CSS (not the utility classes) also collapse to one stacked column on mobile. !important is required because `.grid > *` has the same specificity (0,1,0) as a component rule like `.ks-circle-main` — the `*` adds nothing — and the component CSS loads later, so it would otherwise win. A section needing a bespoke mobile grid sets it on the container (grid-template) rather than fighting this per-child. */ .grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; } .grid-container { padding: 0 1.1111rem; } } /* ---------- GRID OVERLAY (debug – G key) ---------- */ .grid-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9999; padding: 0 var(--grid-margin); display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--grid-gutter); transition: opacity 0.15s ease; } .grid-overlay.hidden { opacity: 0; visibility: hidden; } .grid-overlay-col { background: rgba(109, 109, 109, 0.1); } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5556rem 1.1111rem; border-radius: 2.0556rem; font-family: var(--font-heading); font-size: var(--fs-ui); font-weight: var(--fw-medium); line-height: var(--lh-ui); cursor: pointer; transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out-quad); border: none; text-align: center; } .btn-cuivre { background: var(--cuivre); color: var(--ocre); } .btn-cuivre:hover { opacity: 0.9; transform: translateY(-0.1111rem); } .btn-ocre { background: var(--ocre); color: var(--cuivre); } .btn-ocre:hover { opacity: 0.9; transform: translateY(-0.1111rem); } /* ---------- SHARED LAYOUT UTILITIES ---------- */ /* Full-viewport-width separator line */ .section-line { width: 100vw; margin-left: calc(50% - 50vw); height: 1px; background: var(--ocre); margin-bottom: 2.2222rem; } .section-line--cuivre { background: var(--cuivre); } /* Section heading row – shared across pages */ .section-title-row { padding: 1.1667rem 0; } .section-title-row h2 { /* size/family/weight/line-height inherited from base h2 — only color varies */ color: var(--cuivre); } /* Centred content container (sub-pages). Scales out to 3840px to match .grid-container so sub-pages fill 2K/4K the same way the landing page does — instead of pinning content to a 1920px band with empty side margins. Pages that want a narrower measure (e.g. legal text) override max-width locally. */ .section-container { width: 100%; max-width: 213.3333rem; margin: 0 auto; padding: 0 var(--grid-margin); } /* Reusable circle image clip */ .circle-clip { border-radius: 50%; overflow: hidden; flex-shrink: 0; } .circle-clip img { width: 100%; height: 100%; object-fit: cover; } /* ---------- WEB COMPONENTS (light DOM hosts) ---------- */ ancora-header, ancora-footer { display: contents; } /* ---------- SUB-PAGE HEADER COLOUR VARIANTS ---------- */ /* Full header component styles live in header.css */ .page-header--light .nav-links a { color: var(--ocre); } .page-header--light .hamburger span { background: var(--ocre); } .page-header--light .header-line { background: var(--ocre); } /* ---------- ANIMATION KEYFRAMES ---------- */ @keyframes enterFromTop { from { opacity: 0; transform: translateY(-0.7778rem); } to { opacity: 1; transform: translateY(0); } } @keyframes heroAppear { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes ksSlideIn { from { opacity: 0; transform: translateX(-1.6667rem); } to { opacity: 1; transform: translateX(0); } } @keyframes ksScaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes ksFadeUp { from { opacity: 0; transform: translateY(1.1111rem); } to { opacity: 1; transform: translateY(0); } } /* ---------- SCROLL-TRIGGERED ENTRANCE CLASSES ---------- */ .fade-in { opacity: 0; transform: translateY(1.3333rem); transition: opacity 600ms var(--ease-out-quart), transform 600ms var(--ease-out-quart); } .fade-in.visible { opacity: 1; transform: translateY(0); } .slide-left { opacity: 0; transform: translateX(-1.7778rem); transition: opacity 600ms var(--ease-out-quart), transform 600ms var(--ease-out-quart); } .slide-left.visible { opacity: 1; transform: translateX(0); } .slide-right { opacity: 0; transform: translateX(1.7778rem); transition: opacity 600ms var(--ease-out-quart), transform 600ms var(--ease-out-quart); } .slide-right.visible { opacity: 1; transform: translateX(0); } /* ---------- RESPONSIVE: SHARED ---------- */ /* Typography is fluid via clamp() in tokens — no per-tag size overrides at breakpoints. */ @media (max-width: 768px) { .section-container { padding: 0 1.1111rem; } /* Tighter vertical rhythm on phones — sections that set their own padding (kinesio, ks-*, ap-*) override this. */ section { padding: 3.1111rem 0; } } /* ---------- PREFERS REDUCED MOTION ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }