/* ========================================================================== Bossis Consilium — styles.css Black & gold luxury, autumn accents. Vanilla CSS, no build step. Stacking plan (root stacking context): 0 body::before (ambient golden glows) · .hero__media (video) · body::after (grain) 1 #leaves-bg (falling leaves BEHIND content) 2 sections, ticker, footer, .hero__content 5 #leaves-fg (sparse, blurred leaves OVER content) 12 .to-top 100 .preloader 110 .skip-link (No header or top bar by design: the brand mark lives inside the hero.) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { color-scheme: dark; --bg: #0A0A0B; --bg-2: #111113; --bg-3: #161618; --ivory: #F4EFE6; --ivory-dim: rgba(244, 239, 230, 0.78); --muted: #B3AA9B; --gold: #D4AF37; --gold-light: #F6E7B0; --gold-deep: #A67C2E; --amber: #E0A030; --crimson: #8B1E2D; --error: #F5A08F; --gold-gradient: linear-gradient(135deg, #F6E7B0 0%, #D4AF37 45%, #A67C2E 100%); --gold-line: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent); --hairline: rgba(212, 175, 55, 0.18); --hairline-strong: rgba(212, 175, 55, 0.38); --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; --font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-script: 'Great Vibes', 'Brush Script MT', 'Segoe Script', cursive; --container: 1240px; --gutter: clamp(1.25rem, 5vw, 4rem); --radius: 18px; --section-pad: clamp(2rem, 3.4vw, 2.75rem); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --scroll-progress: 0; } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; overflow-x: hidden; overflow-x: clip; background: var(--bg); scrollbar-color: rgba(212, 175, 55, 0.35) #0a0a0b; scrollbar-gutter: stable; /* locking scroll during the intro never shifts the layout */ } html.dialog-open { overflow: hidden; } /* Scroll is held at the top while the logo intro plays (class set by the boot script, removed by main.js). CSS-only safety net: released after 7 s even if scripts never finish. */ html.is-loading { overflow-y: hidden; animation: bossis-unlock 0s linear 7s forwards; } @keyframes bossis-unlock { to { overflow-y: auto; } } body { margin: 0; min-height: 100vh; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; color: var(--ivory); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; } /* Ambient golden depth behind everything */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60vw 60vw at 88% -12%, rgba(212, 175, 55, 0.14), transparent 62%), radial-gradient(52vw 52vw at -12% 58%, rgba(166, 124, 46, 0.11), transparent 62%), radial-gradient(44vw 44vw at 72% 112%, rgba(139, 30, 45, 0.09), transparent 62%); } /* Fine film grain */ body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; } img, video, svg, canvas { display: block; max-width: 100%; } img, video { height: auto; } h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; } a { color: var(--gold); } button { font: inherit; color: inherit; } ::selection { background: rgba(212, 175, 55, 0.35); color: #fff; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; } main:focus { outline: none; } /* -------------------------------------------------------------------------- 3. Utilities -------------------------------------------------------------------------- */ .container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; } .visually-hidden, .hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 110; padding: 0.75rem 1.1rem; background: var(--gold); color: #141008; font-weight: 700; text-decoration: none; border-radius: 999px; transform: translateY(-200%); transition: transform 0.3s var(--ease); } .skip-link:focus { transform: none; } .eyebrow { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1.15rem; font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } .eyebrow::before { content: ''; width: 2rem; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); flex: none; } .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* Buttons */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 50px; padding: 0.85rem 1.7rem; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform 0.45s var(--ease-out-expo), box-shadow 0.4s var(--ease), background-color 0.3s, border-color 0.3s, color 0.3s; } .btn > * { position: relative; z-index: 1; } .btn:focus-visible { outline-offset: 4px; } .btn--primary { color: #141008; background: var(--gold-gradient); box-shadow: 0 12px 30px -14px rgba(212, 175, 55, 0.7); } .btn--primary::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.9s var(--ease-in-out); } .btn--primary:hover::before, .btn--primary:focus-visible::before { transform: translateX(120%); } .btn--primary:hover { box-shadow: 0 18px 40px -14px rgba(212, 175, 55, 0.85); } .btn--ghost { color: var(--gold-light); border-color: rgba(212, 175, 55, 0.45); background: rgba(212, 175, 55, 0.04); } .btn--ghost:hover { border-color: var(--gold); background: rgba(212, 175, 55, 0.12); } .btn--sm { min-height: 44px; padding: 0.6rem 1.2rem; font-size: 0.85rem; } .btn--lg { min-height: 58px; padding: 1rem 2.1rem; font-size: 1rem; } .btn__arrow { transition: transform 0.4s var(--ease-out-expo); } .btn:hover .btn__arrow { transform: translateX(4px); } .btn:disabled, .btn[aria-busy="true"] { cursor: default; opacity: 0.8; } .link-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; cursor: pointer; transition: color 0.25s; } .link-button:hover { color: var(--gold-light); } /* Gold shimmer text (hero accent) */ .shimmer { background: linear-gradient(100deg, #A67C2E 0%, #D4AF37 22%, #FFF3C4 48%, #D4AF37 74%, #A67C2E 100%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: shimmer 7s linear infinite; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -160% 0; } } /* -------------------------------------------------------------------------- 4. Leaf canvases -------------------------------------------------------------------------- */ .leaves { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; } .leaves--bg { z-index: 1; } .leaves--fg { z-index: 5; } /* -------------------------------------------------------------------------- 5. Preloader (only when html.js) -------------------------------------------------------------------------- */ .preloader { display: none; } .js .preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg); transition: opacity 0.9s var(--ease-in-out), visibility 0s linear 0.9s; /* CSS-only safety net: dismisses itself after 7 s even if scripts never finish */ animation: preloader-auto 0.9s var(--ease) 7s forwards; } .js .preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } @keyframes preloader-auto { to { opacity: 0; visibility: hidden; } } /* The mark stays invisible (a plain black screen) until the logo PNG and the fonts are ready (html.brand-ready); then every part plays on one timeline. Only opacity and transform animate: no reflow, no font swap, no image pop-in, so nothing flickers. */ .preloader__mark { display: grid; justify-items: center; opacity: 0; transition: transform 0.9s var(--ease-in-out); } .js.brand-ready .preloader__mark { opacity: 1; } .js .preloader.is-done .preloader__mark { transform: scale(1.04); } .preloader__emblem { position: relative; width: 148px; height: 148px; margin-bottom: 1.5rem; } .preloader__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); } .preloader__ring-track { fill: none; stroke: rgba(212, 175, 55, 0.16); stroke-width: 1; opacity: 0; } .preloader__ring-line { fill: none; stroke: url(#gold-grad); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .preloader__logo, .preloader__glint { position: absolute; left: 50%; top: 50%; width: auto; height: 66%; max-width: none; aspect-ratio: 401 / 600; transform: translate(-50%, -50%); } .preloader__logo { opacity: 0; transform: translate(-50%, -46%) scale(0.94); filter: drop-shadow(0 8px 22px rgba(212, 175, 55, 0.28)); } .preloader__glint { opacity: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 249, 225, 0.95) 50%, transparent 60%) no-repeat; background-size: 300% 100%; background-position: 100% 0; -webkit-mask: url("../assets/brand/bossis-oak-gold.png") center / contain no-repeat; mask: url("../assets/brand/bossis-oak-gold.png") center / contain no-repeat; } .preloader__word { margin: 0; padding-left: 0.42em; /* balances the trailing letter-spacing so the word stays centred */ font-family: var(--font-display); font-size: 1.85rem; font-weight: 600; line-height: 1; letter-spacing: 0.42em; color: var(--gold); opacity: 0; transform: translateY(10px); } .preloader__sub { margin: 0.8rem 0 0; padding-left: 0.42em; font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(244, 239, 230, 0.72); opacity: 0; transform: translateY(8px); } /* One timeline, t = 0 when html.brand-ready is set */ .js.brand-ready .preloader__ring-track { animation: fade-in 0.8s ease 0s forwards; } .js.brand-ready .preloader__ring-line { animation: draw 1.5s var(--ease-in-out) 0.1s forwards; } .js.brand-ready .preloader__logo { animation: emblem-in 1.3s var(--ease-out-expo) 0.45s forwards; } .js.brand-ready .preloader__word { animation: rise-in 1.1s var(--ease-out-expo) 0.95s forwards; } .js.brand-ready .preloader__sub { animation: rise-in 1.1s var(--ease-out-expo) 1.25s forwards; } @supports ((mask-image: none) or (-webkit-mask-image: none)) { .js.brand-ready .preloader__glint { animation: glint 1.4s var(--ease-in-out) 1.7s forwards; } } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fade-in { to { opacity: 1; } } @keyframes emblem-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes rise-in { to { opacity: 1; transform: none; } } @keyframes glint { 0% { opacity: 1; background-position: 100% 0; } 100% { opacity: 1; background-position: 0% 0; } } /* -------------------------------------------------------------------------- 6. Brand mark (used in the hero and the footer; there is no header bar) -------------------------------------------------------------------------- */ .brand { display: inline-flex; align-items: center; color: var(--ivory); text-decoration: none; border-radius: 6px; } .brand__svg { width: 176px; height: 44px; overflow: visible; } .brand__ring { fill: none; stroke: url(#gold-grad); stroke-width: 1.1; } .brand__initials { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.06em; fill: url(#gold-grad); } .brand__wordmark { font-family: var(--font-body); font-size: 7.4px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; fill: rgba(244, 239, 230, 0.72); } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: clamp(1.5rem, 5vh, 4rem) 0 clamp(5rem, 9vh, 7rem); overflow: hidden; } .hero__media { position: absolute; inset: -18% 0 0 0; /* extra height on top so the parallax never exposes an edge */ z-index: 0; overflow: hidden; background: var(--bg); will-change: transform; } .hero__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.6rem, 4vh, 3rem); } .hero__brand .brand__svg { width: 200px; height: 50px; } .hero__poster, .hero__poster img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__video { opacity: 0; transition: opacity 1.4s ease; } .hero__video.is-playing { opacity: 1; } .hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, 0.5) 0%, rgba(10, 10, 11, 0.1) 30%, rgba(10, 10, 11, 0.3) 60%, var(--bg) 100%), linear-gradient(90deg, rgba(10, 10, 11, 0.86) 0%, rgba(10, 10, 11, 0.5) 42%, rgba(10, 10, 11, 0.05) 100%); } .hero__content { position: relative; z-index: 2; will-change: transform, opacity; } .hero__eyebrow { display: flex; align-items: center; gap: 0.8rem; margin-bottom: clamp(0.9rem, 2.2vh, 1.6rem); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); } .hero__eyebrow::before { content: ''; width: 2.4rem; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); } .hero__title { max-width: 12ch; margin-bottom: clamp(0.9rem, 2.4vh, 1.7rem); font-family: var(--font-display); font-size: clamp(2.5rem, min(9.4vw, 12.5vh), 7.6rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.015em; color: var(--ivory); } .hero__line { display: block; } .hero__line--accent { font-style: italic; } .word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.06em 0.08em 0.18em; margin: -0.06em -0.08em -0.18em; } .word { display: inline-block; } .js .word { opacity: 0; transform: translateY(112%) rotate(1.5deg); transition: transform 1.2s var(--ease-out-expo), opacity 0.7s ease; transition-delay: calc(var(--d, 0) * 90ms + 120ms); } .js.is-ready .word { opacity: 1; transform: none; } .js .hero-in { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 1.1s var(--ease-out-expo); transition-delay: calc(var(--d, 0) * 90ms + 220ms); } .js.is-ready .hero-in { opacity: 1; transform: none; } [data-hero-delay="1"] { --d: 1; } [data-hero-delay="2"] { --d: 2; } [data-hero-delay="3"] { --d: 3; } [data-hero-delay="4"] { --d: 4; } [data-hero-delay="5"] { --d: 5; } [data-hero-delay="6"] { --d: 6; } [data-hero-delay="7"] { --d: 7; } [data-hero-delay="8"] { --d: 8; } [data-hero-delay="9"] { --d: 9; } .hero__sub { max-width: 40rem; margin-bottom: clamp(1.1rem, 3.2vh, 2.3rem); font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.65; color: var(--ivory-dim); } .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: clamp(1.3rem, 4.4vh, 3.2rem); } .hero__credentials { list-style: none; display: flex; flex-wrap: wrap; gap: 0.7rem 0; padding-top: 1.4rem; border-top: 1px solid var(--hairline); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244, 239, 230, 0.66); } .hero__credentials li { display: flex; align-items: center; } @media (min-width: 1024px) { .hero__credentials { max-width: calc(100% - 13rem); } /* clear of the Scroll / Pause corner */ } .hero__credentials li + li::before { content: ''; width: 4px; height: 4px; margin: 0 1.2rem; border-radius: 50%; background: var(--gold); flex: none; } /* Bottom-right corner of the hero: scroll cue + motion toggle */ .hero__corner { position: absolute; right: var(--gutter); bottom: 1.6rem; z-index: 2; display: flex; align-items: flex-end; gap: 1.4rem; } .scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 0.5rem; color: rgba(244, 239, 230, 0.6); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; text-decoration: none; transition: opacity 0.5s ease, transform 0.5s ease; } .scroll-cue__label { writing-mode: vertical-rl; } .scroll-cue__line { position: relative; width: 1px; height: 64px; overflow: hidden; background: rgba(212, 175, 55, 0.22); } .scroll-cue__line::after { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: linear-gradient(180deg, transparent, var(--gold-light)); animation: cue 2.4s var(--ease-in-out) infinite; } @keyframes cue { 0% { top: -100%; } 100% { top: 100%; } } .scroll-cue.is-faded { opacity: 0 !important; pointer-events: none; } /* -------------------------------------------------------------------------- 8. Ticker -------------------------------------------------------------------------- */ .ticker { position: relative; z-index: 2; overflow: hidden; padding: 1.15rem 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: rgba(10, 10, 11, 0.55); } .ticker__track { display: flex; width: max-content; animation: ticker 60s linear infinite; } .ticker:hover .ticker__track, .ticker:focus-within .ticker__track, .motion-paused .ticker__track { animation-play-state: paused; } .ticker__list { display: flex; flex: none; list-style: none; } .ticker__item { display: flex; align-items: center; gap: 1.8rem; padding-right: 1.8rem; white-space: nowrap; font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ivory-dim); } .ticker__sep { font-size: 0.55rem; color: var(--gold); } @keyframes ticker { to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 9. Section commons -------------------------------------------------------------------------- */ .section { position: relative; z-index: 2; padding-block: var(--section-pad); } .section__head { max-width: 46rem; margin-bottom: clamp(1.4rem, 2.8vw, 2.2rem); } .section__head--center { margin-inline: auto; text-align: center; } .section__head--center .eyebrow { justify-content: center; } .section__head--center .eyebrow::after { content: ''; width: 2rem; height: 1px; background: linear-gradient(270deg, var(--gold), transparent); flex: none; } .section__head--center .section__lead { margin-inline: auto; } .section__title { margin-bottom: 1.2rem; font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 3.8rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.012em; color: var(--ivory); text-wrap: balance; } .section__lead { max-width: 40rem; font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.65; color: var(--muted); } /* Glass card base */ .glass { background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); border: 1px solid var(--hairline); border-radius: var(--radius); } /* -------------------------------------------------------------------------- 10. About -------------------------------------------------------------------------- */ .about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } .portrait-card { position: relative; padding: 10px; border: 1px solid var(--hairline-strong); background: rgba(255, 255, 255, 0.02); transform: translate3d(0, var(--py, 0px), 0); will-change: transform; } .portrait-card::before { content: ''; position: absolute; inset: -12px; border: 1px solid rgba(212, 175, 55, 0.14); pointer-events: none; } .portrait-card__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg-2); } .portrait-card__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease-out-expo); } .portrait-card:hover .portrait-card__img { transform: scale(1); } .portrait-card__caption { margin-top: 1.1rem; padding: 0 0.2rem; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--muted); } .seal { position: absolute; right: -28px; bottom: 52px; width: 128px; height: 128px; animation: seal-spin 40s linear infinite; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6)); } .seal__disc { fill: rgba(10, 10, 11, 0.92); } .seal__ring { fill: none; stroke: var(--gold); stroke-width: 0.8; } .seal__ring--inner { stroke-width: 0.6; stroke-opacity: 0.7; } .seal__text { font-family: var(--font-body); font-size: 7.6px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; fill: var(--gold); } @keyframes seal-spin { to { transform: rotate(360deg); } } .about__role { margin: -0.35rem 0 1.5rem; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--gold); } .about__text { display: grid; gap: 1.1rem; color: var(--ivory-dim); } .about__text p:last-child { color: var(--ivory); font-weight: 500; } .about__facts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.5rem; margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--hairline); font-size: 0.92rem; color: var(--ivory-dim); } .about__facts li { display: flex; align-items: flex-start; gap: 0.7rem; } .about__facts svg { flex: none; margin-top: 0.2rem; color: var(--gold); } .signature { margin-top: 2rem; font-family: var(--font-script); font-size: clamp(2.3rem, 3.6vw, 3.1rem); line-height: 1; color: var(--gold); transform: rotate(-3deg); transform-origin: left center; opacity: 0.92; } /* -------------------------------------------------------------------------- 11. Manifesto -------------------------------------------------------------------------- */ .manifesto { position: relative; z-index: 2; padding-block: clamp(1.25rem, 2.6vw, 2.25rem); text-align: center; } .manifesto__text { max-width: 24ch; margin-inline: auto; font-family: var(--font-display); font-size: clamp(1.9rem, 4.4vw, 3.7rem); font-weight: 500; line-height: 1.28; color: var(--ivory); text-wrap: balance; } .manifesto__word { display: inline-block; color: rgba(244, 239, 230, 0.16); transition: color 0.6s ease, text-shadow 0.6s ease; } .manifesto__word.is-lit { color: var(--gold-light); text-shadow: 0 0 28px rgba(212, 175, 55, 0.35); } /* -------------------------------------------------------------------------- 12. Services -------------------------------------------------------------------------- */ .services__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } .service-card { position: relative; padding: 2.1rem 1.9rem 2.2rem; border-radius: var(--radius); border: 1px solid var(--hairline); background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); scroll-margin-top: 24px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s; --delay: 0ms; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .service-card { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } .service-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(246, 231, 176, 0.95), rgba(212, 175, 55, 0.4) 40%, transparent 72%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.45s ease; pointer-events: none; } .service-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 175, 55, 0.13), transparent 62%); opacity: 0; transition: opacity 0.45s ease; pointer-events: none; } .service-card:hover, .service-card.is-glowing { border-color: rgba(212, 175, 55, 0.3); box-shadow: 0 34px 70px -34px rgba(212, 175, 55, 0.4), 0 20px 40px -30px rgba(0, 0, 0, 0.8); } .service-card:hover::before, .service-card:hover::after, .service-card.is-glowing::before, .service-card.is-glowing::after { opacity: 1; } .service-card > * { position: relative; z-index: 1; } .service-card__icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 1.5rem; border-radius: 16px; border: 1px solid var(--hairline-strong); background: linear-gradient(160deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.02)); color: var(--gold); } .service-card__icon svg { width: 32px; height: 32px; } .service-card__title { margin-bottom: 0.7rem; font-family: var(--font-display); font-size: 1.65rem; font-weight: 500; line-height: 1.15; color: var(--ivory); } .service-card__desc { color: var(--muted); font-size: 0.98rem; } .service-card__list { list-style: none; display: grid; gap: 0.45rem; margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); font-size: 0.9rem; color: var(--ivory-dim); } .service-card__list li { display: flex; align-items: center; gap: 0.7rem; } .service-card__list li::before { content: ''; width: 6px; height: 6px; flex: none; background: var(--gold); transform: rotate(45deg); } .services__grid .service-card:nth-child(2) { --delay: 90ms; } .services__grid .service-card:nth-child(3) { --delay: 180ms; } .services__grid .service-card:nth-child(4) { --delay: 90ms; } .services__grid .service-card:nth-child(5) { --delay: 180ms; } .services__grid .service-card:nth-child(6) { --delay: 270ms; } /* -------------------------------------------------------------------------- 13. Who we serve -------------------------------------------------------------------------- */ .serve__grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } .serve__item { padding-top: 1.6rem; border-top: 1px solid var(--hairline-strong); color: var(--muted); font-size: 0.98rem; } .serve__numeral { display: block; margin-bottom: 1.1rem; font-family: var(--font-display); font-size: 2.1rem; line-height: 1; color: var(--gold); } .serve__title { margin-bottom: 0.6rem; font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; line-height: 1.15; color: var(--ivory); } .serve__grid .serve__item:nth-child(2) { --delay: 90ms; } .serve__grid .serve__item:nth-child(3) { --delay: 180ms; } .serve__grid .serve__item:nth-child(4) { --delay: 270ms; } /* -------------------------------------------------------------------------- 14. Approach — the Bossis Consilium Growth Cycle -------------------------------------------------------------------------- */ .cycle { position: relative; } .cycle__track { position: absolute; top: 36px; left: 12.5%; right: 12.5%; height: 1px; background: rgba(212, 175, 55, 0.16); } .cycle__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold-light)); box-shadow: 0 0 14px rgba(212, 175, 55, 0.6); transform-origin: left center; transform: scaleX(var(--cycle-progress, 0)); transition: transform 0.18s linear; } .cycle__steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } .cycle__step { text-align: center; } .cycle__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 1.5rem; border-radius: 50%; border: 1px solid rgba(212, 175, 55, 0.3); background: var(--bg); color: var(--gold); transition: box-shadow 0.7s var(--ease), border-color 0.7s, color 0.7s, transform 0.7s var(--ease-out-expo); } .cycle__icon svg { width: 30px; height: 30px; } .cycle__step.is-active .cycle__icon { border-color: var(--gold); color: var(--gold-light); box-shadow: 0 0 0 7px rgba(212, 175, 55, 0.08), 0 0 44px rgba(212, 175, 55, 0.38); transform: scale(1.06); } .cycle__title { display: grid; gap: 0.55rem; } .cycle__season { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } .cycle__name { font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; line-height: 1.1; color: var(--ivory); } .cycle__desc { max-width: 24ch; margin: 0.85rem auto 0; font-size: 0.95rem; color: var(--muted); } .cycle__steps .cycle__step:nth-child(2) { --delay: 100ms; } .cycle__steps .cycle__step:nth-child(3) { --delay: 200ms; } .cycle__steps .cycle__step:nth-child(4) { --delay: 300ms; } /* -------------------------------------------------------------------------- 15. Why Bossis Consilium -------------------------------------------------------------------------- */ .why__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .why__grid .section__head { margin-bottom: 0; } .why__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 2rem; } .why__item { padding: 1.6rem 0 0; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 0.98rem; } .why__index { display: block; margin-bottom: 1rem; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.2em; color: var(--gold); } .why__title { margin-bottom: 0.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.15; color: var(--ivory); } .why__list .why__item:nth-child(2) { --delay: 90ms; } .why__list .why__item:nth-child(3) { --delay: 180ms; } .why__list .why__item:nth-child(4) { --delay: 270ms; } /* -------------------------------------------------------------------------- 16. Engagements -------------------------------------------------------------------------- */ .engagements__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch; } .engagement-card { position: relative; display: flex; flex-direction: column; padding: 2.3rem 2rem 2.2rem; border-radius: var(--radius); border: 1px solid var(--hairline); background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); transition: border-color 0.4s, box-shadow 0.5s var(--ease), transform 0.5s var(--ease); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .engagement-card { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } .engagement-card:hover { border-color: rgba(212, 175, 55, 0.35); transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(212, 175, 55, 0.35); } .engagement-card--featured { border-color: rgba(212, 175, 55, 0.5); background: radial-gradient(120% 80% at 50% 0%, rgba(212, 175, 55, 0.16), transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: 0 40px 80px -40px rgba(212, 175, 55, 0.45); } .engagement-card__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 0.45rem 1rem; border-radius: 999px; background: var(--gold-gradient); color: #141008; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; } .engagement-card__kicker { margin-bottom: 0.6rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } .engagement-card__title { margin-bottom: 0.9rem; font-family: var(--font-display); font-size: 2rem; font-weight: 500; line-height: 1.1; color: var(--ivory); } .engagement-card__desc { color: var(--muted); font-size: 0.98rem; } .engagement-card__list { list-style: none; display: grid; gap: 0.55rem; margin: 1.4rem 0 2rem; padding-top: 1.3rem; border-top: 1px solid var(--hairline); font-size: 0.92rem; color: var(--ivory-dim); } .engagement-card__list li { display: flex; gap: 0.7rem; align-items: flex-start; } .engagement-card__list li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 0.55rem; background: var(--gold); transform: rotate(45deg); } .engagement-card__cta { margin-top: auto; align-self: flex-start; } .engagements__grid .engagement-card:nth-child(2) { --delay: 90ms; } .engagements__grid .engagement-card:nth-child(3) { --delay: 180ms; } /* -------------------------------------------------------------------------- 17. Montréal -------------------------------------------------------------------------- */ .montreal { padding: 0; display: flex; align-items: center; overflow: hidden; } .montreal__media { position: absolute; inset: 0; z-index: 0; background: var(--bg-2); } .montreal__video { width: 100%; height: 100%; object-fit: cover; object-position: center; } .montreal__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 11, 0.9) 0%, rgba(10, 10, 11, 0.72) 42%, rgba(10, 10, 11, 0.3) 100%), linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%); } .montreal__inner { position: relative; z-index: 1; padding-block: clamp(2.75rem, 5vw, 4rem); } .montreal__panel { max-width: 36rem; padding: clamp(1.8rem, 4vw, 2.8rem); border-radius: var(--radius); border: 1px solid var(--hairline); background: rgba(10, 10, 11, 0.7); color: var(--ivory-dim); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .montreal__panel { background: rgba(10, 10, 11, 0.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } } .montreal__panel .section__title { margin-bottom: 1rem; } .montreal__list { list-style: none; display: grid; gap: 0.6rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); font-size: 0.92rem; } .montreal__list li { display: flex; align-items: center; gap: 0.75rem; } .montreal__list li::before { content: ''; width: 6px; height: 6px; flex: none; background: var(--gold); transform: rotate(45deg); } /* -------------------------------------------------------------------------- 18. FAQ -------------------------------------------------------------------------- */ .faq__inner { max-width: 54rem; } .faq__list { border-bottom: 1px solid var(--hairline); } .faq__item { border-top: 1px solid var(--hairline); } .faq__heading { margin: 0; } .faq__trigger { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; padding: 1.35rem 0.2rem; border: 0; background: none; color: var(--ivory); font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.3; text-align: left; cursor: pointer; transition: color 0.3s; } .faq__trigger:hover { color: var(--gold-light); } .faq__icon { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hairline-strong); transition: background-color 0.3s, transform 0.5s var(--ease-out-expo); } .faq__icon::before, .faq__icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: var(--gold); transform: translate(-50%, -50%); transition: transform 0.5s var(--ease-out-expo); } .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .faq__trigger[aria-expanded="true"] .faq__icon { background: rgba(212, 175, 55, 0.12); } .faq__trigger[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); } .faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.55s var(--ease-out-expo), visibility 0s linear 0s; } .faq__panel-inner { min-height: 0; overflow: hidden; } .faq__panel-inner p { padding: 0 3.5rem 1.5rem 0.2rem; color: var(--muted); } .js .faq__item:not(.is-open) .faq__panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.55s var(--ease-out-expo), visibility 0s linear 0.55s; } /* -------------------------------------------------------------------------- 19. Contact & inquiry form -------------------------------------------------------------------------- */ .contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .contact__intro { position: sticky; top: 24px; } .expect { list-style: none; display: grid; gap: 1.25rem; margin-top: 2.4rem; } .expect__item { display: flex; gap: 1.1rem; align-items: flex-start; } .expect__num { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hairline-strong); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--gold); } .expect__title { margin-bottom: 0.15rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.2; color: var(--ivory); } .expect__item p { font-size: 0.92rem; color: var(--muted); } .contact__meta { display: grid; gap: 0.9rem; margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--hairline); font-size: 0.9rem; color: var(--muted); } .contact__meta-item { display: flex; gap: 0.7rem; align-items: flex-start; } .contact__meta-item svg { flex: none; margin-top: 0.3rem; color: var(--gold); } .form-card { position: relative; padding: clamp(1.5rem, 3.5vw, 2.6rem); border-radius: 22px; border: 1px solid rgba(212, 175, 55, 0.24); background: linear-gradient(170deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.9); scroll-margin-top: 24px; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .form-card { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } } /* Interested-in chip */ .chip { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.4rem; padding: 0.35rem 0.4rem 0.35rem 0.95rem; border-radius: 999px; border: 1px solid rgba(212, 175, 55, 0.4); background: rgba(212, 175, 55, 0.1); font-size: 0.86rem; color: var(--ivory); } .chip[hidden] { display: none; } .chip strong { color: var(--gold-light); font-weight: 600; } .chip__dismiss { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px -8px 0; border: 0; border-radius: 50%; background: transparent; color: var(--gold); cursor: pointer; transition: background-color 0.25s; } .chip__dismiss:hover { background: rgba(212, 175, 55, 0.15); } /* Progress */ .form-progress { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.9rem; } .form-progress__step { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); transition: color 0.4s; } .form-progress__dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(212, 175, 55, 0.35); font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1; color: var(--gold); transition: background-color 0.4s, color 0.4s, box-shadow 0.4s, border-color 0.4s; } .form-progress__step.is-current { color: var(--ivory); } .form-progress__step.is-current .form-progress__dot { background: var(--gold-gradient); border-color: transparent; color: #141008; box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.12), 0 0 26px rgba(212, 175, 55, 0.4); } .form-progress__step.is-complete .form-progress__dot { background: rgba(212, 175, 55, 0.16); border-color: var(--gold); } .form-progress__bar { height: 2px; margin-bottom: 2.2rem; border-radius: 2px; background: rgba(212, 175, 55, 0.14); overflow: hidden; } .form-progress__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-light)); transform-origin: left center; transform: scaleX(var(--form-progress, 0.25)); transition: transform 0.7s var(--ease-out-expo); } .form-alert { margin-bottom: 1.5rem; padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid rgba(245, 160, 143, 0.4); background: rgba(139, 30, 45, 0.18); color: var(--ivory); font-size: 0.92rem; } .form-alert[hidden] { display: none; } .form-alert p { margin: 0; } .form-alert p + p { margin-top: 0.4rem; } /* Steps */ .form-step { animation: step-in 0.6s var(--ease-out-expo); } .form-step[hidden] { display: none; } @keyframes step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .form-step__title { display: grid; gap: 0.35rem; margin-bottom: 0.6rem; font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; line-height: 1.1; color: var(--ivory); } .form-step__title:focus { outline: none; } .form-step__count { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } .form-step__note { margin-bottom: 1.6rem; font-size: 0.85rem; color: var(--muted); } .form-step > .form-grid { margin-top: 1.4rem; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 1.25rem; } .field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; margin: 0; padding: 0; border: 0; } .field--full { grid-column: 1 / -1; } .field__label { font-size: 0.84rem; font-weight: 600; letter-spacing: 0.03em; color: var(--ivory); } legend.field__label { padding: 0; margin-bottom: 0.2rem; } .field__req { color: var(--gold); } .field__optional { font-weight: 500; color: var(--muted); } .field__hint { font-size: 0.86rem; color: var(--muted); } .field__input { width: 100%; min-height: 50px; padding: 0.8rem 1rem; border-radius: 10px; border: 1px solid rgba(244, 239, 230, 0.16); background: rgba(255, 255, 255, 0.035); color: var(--ivory); font-family: var(--font-body); font-size: 1rem; line-height: 1.4; appearance: none; -webkit-appearance: none; transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s; } .field__input::placeholder { color: rgba(244, 239, 230, 0.38); } .field__input:hover { border-color: rgba(212, 175, 55, 0.4); } .field__input:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18); } .field__input[aria-invalid="true"] { border-color: var(--error); } .field__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(245, 160, 143, 0.2); } .field__textarea { min-height: 150px; resize: vertical; } .field__textarea--sm { min-height: 96px; } .field__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .field__count { flex: none; margin-left: auto; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; } .field__error { display: none; align-items: flex-start; gap: 0.4rem; font-size: 0.84rem; line-height: 1.4; color: var(--error); } .field__error:not(:empty) { display: flex; } .field__error:not(:empty)::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 0.48rem; border-radius: 50%; background: var(--error); } .field--group.is-invalid .choice__box, .field--group.is-invalid .pill__box { border-color: rgba(245, 160, 143, 0.5); } .select-wrap { position: relative; } .select-wrap::after { content: ''; position: absolute; right: 1.05rem; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .field__select { padding-right: 2.8rem; cursor: pointer; } .field__select option { background: #151517; color: var(--ivory); } /* Pills (inline radios) */ .pill-row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .pill { position: relative; } .pill__input, .choice__input, .checkbox__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .pill__box { display: inline-flex; align-items: center; min-height: 44px; padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid rgba(244, 239, 230, 0.16); background: rgba(255, 255, 255, 0.03); font-size: 0.9rem; font-weight: 500; color: var(--ivory-dim); cursor: pointer; transition: border-color 0.25s, background-color 0.25s, color 0.25s, box-shadow 0.25s; } .pill__box:hover { border-color: rgba(212, 175, 55, 0.5); } .pill__input:checked + .pill__box { border-color: var(--gold); background: rgba(212, 175, 55, 0.14); color: var(--gold-light); } .pill__input:focus-visible + .pill__box { outline: 2px solid var(--gold); outline-offset: 2px; } /* Choice cards (checkbox / radio) */ .choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } .choice { position: relative; display: block; min-width: 0; } .choice--wide { grid-column: 1 / -1; } .choice__box { display: flex; align-items: center; gap: 0.8rem; min-height: 52px; padding: 0.75rem 1rem; border-radius: 10px; border: 1px solid rgba(244, 239, 230, 0.16); background: rgba(255, 255, 255, 0.03); font-size: 0.92rem; font-weight: 500; line-height: 1.35; color: var(--ivory); cursor: pointer; transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s; } .choice__box:hover { border-color: rgba(212, 175, 55, 0.5); } .choice__mark { position: relative; flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(212, 175, 55, 0.55); transition: border-color 0.25s, background-color 0.25s; } .choice__input[type="radio"] + .choice__box .choice__mark { border-radius: 50%; } .choice__mark::after { content: ''; position: absolute; inset: 3px; border-radius: inherit; background: var(--gold-gradient); opacity: 0; transform: scale(0.4); transition: opacity 0.25s, transform 0.3s var(--ease-out-expo); } .choice__input:checked + .choice__box { border-color: var(--gold); background: rgba(212, 175, 55, 0.1); box-shadow: 0 10px 30px -20px rgba(212, 175, 55, 0.6); } .choice__input:checked + .choice__box .choice__mark { border-color: var(--gold); } .choice__input:checked + .choice__box .choice__mark::after { opacity: 1; transform: scale(1); } .choice__input:focus-visible + .choice__box { outline: 2px solid var(--gold); outline-offset: 2px; } /* Consent checkbox */ .consent { margin-top: 1.6rem; } .checkbox { display: flex; gap: 0.85rem; align-items: flex-start; cursor: pointer; } .checkbox__box { position: relative; flex: none; width: 22px; height: 22px; margin-top: 0.15rem; border-radius: 6px; border: 1px solid rgba(212, 175, 55, 0.55); background: rgba(255, 255, 255, 0.03); transition: background-color 0.25s, border-color 0.25s; } .checkbox__box::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border-right: 2px solid #141008; border-bottom: 2px solid #141008; transform: rotate(45deg) scale(0); transition: transform 0.25s var(--ease-out-expo); } .checkbox__input:checked + .checkbox__box { background: var(--gold); border-color: var(--gold); } .checkbox__input:checked + .checkbox__box::after { transform: rotate(45deg) scale(1); } .checkbox__input:focus-visible + .checkbox__box { outline: 2px solid var(--gold); outline-offset: 2px; } .checkbox__text { font-size: 0.92rem; line-height: 1.55; color: var(--ivory-dim); } .consent.is-invalid .checkbox__box { border-color: var(--error); } .consent__link { font-size: 0.88rem; } /* Review summary */ .review { display: none; } .js .review { display: block; margin-top: 1.8rem; padding: 1.3rem 1.4rem 0.6rem; border-radius: 14px; border: 1px solid var(--hairline); background: rgba(212, 175, 55, 0.04); } .review__title { margin-bottom: 0.9rem; font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; color: var(--ivory); } .review__section { padding: 0.9rem 0; border-top: 1px solid rgba(244, 239, 230, 0.08); } .review__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.5rem; } .review__head h5 { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .review__edit { min-height: 36px; font-size: 0.84rem; } .review__dl { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 0.35rem 1rem; font-size: 0.9rem; } .review__dl dt { color: var(--muted); } .review__dl dd { margin: 0; color: var(--ivory); overflow-wrap: anywhere; } /* Fallback + navigation */ .form-fallback { margin-top: 1.6rem; padding: 1.1rem 1.2rem; border-radius: 12px; border: 1px solid var(--hairline-strong); background: rgba(212, 175, 55, 0.06); font-size: 0.92rem; } .form-fallback[hidden] { display: none; } .form-fallback p { margin-bottom: 0.9rem; color: var(--ivory-dim); } .form-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--hairline); } .form-nav__spacer { flex: 1; } .btn__spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(20, 16, 8, 0.25); border-top-color: #141008; animation: spin 0.8s linear infinite; } .btn[aria-busy="true"] .btn__spinner { display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* Success panel */ .form-success { text-align: center; padding: 1rem 0.5rem 0.5rem; } .form-success[hidden] { display: none; } .form-success:focus { outline: none; } .success-mark { width: 96px; height: 96px; margin: 0 auto 1.6rem; overflow: visible; } .success-mark__ring { fill: none; stroke: url(#gold-grad); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 50% 50%; } .success-mark__check { fill: none; stroke: var(--gold-light); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .form-success.is-shown .success-mark__ring { animation: draw 1s var(--ease-out-expo) 0.1s forwards; } .form-success.is-shown .success-mark__check { animation: draw 0.6s var(--ease-out-expo) 0.7s forwards; } .form-success__title { margin-bottom: 0.8rem; font-family: var(--font-display); font-size: 2.2rem; font-weight: 500; line-height: 1.1; color: var(--ivory); } .form-success__text { max-width: 30rem; margin-inline: auto; color: var(--ivory-dim); } .form-success__ref { margin-top: 1.4rem; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .form-success__ref strong { color: var(--gold); font-weight: 600; letter-spacing: 0.12em; } /* -------------------------------------------------------------------------- 20. Footer -------------------------------------------------------------------------- */ .site-footer { position: relative; z-index: 2; padding: clamp(2.5rem, 5vw, 3.75rem) 0 2rem; border-top: 1px solid var(--hairline); background: linear-gradient(180deg, rgba(10, 10, 11, 0.2), rgba(10, 10, 11, 0.9) 40%); font-size: 0.92rem; } .site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1.1fr; gap: 3rem 2.5rem; } .site-footer__tagline { margin-top: 1.4rem; font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--gold); } .site-footer__desc { margin-top: 0.3rem; color: var(--muted); } .site-footer__heading { margin-bottom: 1.1rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } .site-footer__links { list-style: none; display: grid; gap: 0.35rem; } .site-footer__links a { display: inline-block; padding: 0.3rem 0; color: var(--ivory-dim); text-decoration: none; transition: color 0.25s; } .site-footer__links a:hover { color: var(--gold-light); } .site-footer__address { color: var(--ivory-dim); } .site-footer__col .btn { margin-top: 1.2rem; } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); color: var(--muted); } .site-footer__copy { font-size: 0.86rem; } .site-footer__disclaimer { max-width: 62rem; margin-top: 1.2rem; font-size: 0.78rem; line-height: 1.6; color: rgba(179, 170, 155, 0.85); } /* -------------------------------------------------------------------------- 21. Dialog -------------------------------------------------------------------------- */ .dialog { width: min(92vw, 44rem); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; color: var(--ivory); } .dialog::backdrop { background: rgba(4, 4, 5, 0.72); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dialog::backdrop { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } } .dialog[open] { animation: dialog-in 0.5s var(--ease-out-expo); } @keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } } .dialog__inner { position: relative; max-height: min(86vh, 900px); overflow-y: auto; padding: clamp(1.6rem, 4vw, 2.8rem); border-radius: 20px; border: 1px solid rgba(212, 175, 55, 0.3); background: #111113; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 70px -20px rgba(212, 175, 55, 0.25); font-size: 0.95rem; line-height: 1.65; } .dialog__close { position: absolute; top: 0.9rem; right: 0.9rem; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--hairline); border-radius: 50%; background: rgba(255, 255, 255, 0.03); color: var(--gold); cursor: pointer; transition: background-color 0.25s, border-color 0.25s; } .dialog__close:hover { background: rgba(212, 175, 55, 0.12); border-color: var(--gold); } .dialog__title { margin-bottom: 0.8rem; font-family: var(--font-display); font-size: 2.2rem; font-weight: 500; line-height: 1.1; } .dialog__intro { color: var(--ivory-dim); } .dialog__heading { margin: 1.5rem 0 0.35rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--gold-light); } .dialog__inner p { color: var(--ivory-dim); } .dialog__actions { margin-top: 2rem; } /* -------------------------------------------------------------------------- 22. Floating controls -------------------------------------------------------------------------- */ .to-top { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 12; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: rgba(10, 10, 11, 0.7); color: var(--gold); cursor: pointer; opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity 0.4s ease, transform 0.5s var(--ease-out-expo), background-color 0.3s; } .to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { background: rgba(212, 175, 55, 0.14); } .to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .to-top__track { fill: none; stroke: rgba(212, 175, 55, 0.2); stroke-width: 1.2; } .to-top__progress { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--scroll-progress)); } .to-top__arrow { position: relative; } .motion-toggle { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.55rem 1rem 0.55rem 0.8rem; border: 1px solid var(--hairline-strong); border-radius: 999px; background: rgba(10, 10, 11, 0.75); color: var(--ivory-dim); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; transition: background-color 0.3s, color 0.3s, border-color 0.3s; } .motion-toggle:hover { color: var(--ivory); border-color: var(--gold); } .motion-toggle[aria-pressed="true"] { background: rgba(212, 175, 55, 0.16); color: var(--gold-light); border-color: var(--gold); } .motion-toggle__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hairline-strong); color: var(--gold); } .motion-toggle__play { display: none; } .motion-toggle[aria-pressed="true"] .motion-toggle__pause { display: none; } .motion-toggle[aria-pressed="true"] .motion-toggle__play { display: block; } /* -------------------------------------------------------------------------- 23. Scroll reveals (animation-based so they never fight hover transforms) -------------------------------------------------------------------------- */ .js .reveal { opacity: 0; } .js .reveal.is-visible { opacity: 1; animation: reveal-up 0.9s var(--ease-out-expo) backwards; animation-delay: var(--delay, 0ms); } .js .reveal--scale.is-visible { animation-name: reveal-scale; } @keyframes reveal-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes reveal-scale { from { opacity: 0; transform: scale(0.96) translateY(20px); } to { opacity: 1; transform: none; } } /* Motion paused via the toggle */ .motion-paused .shimmer, .motion-paused .seal, .motion-paused .scroll-cue__line::after, .motion-paused .btn--primary::before { animation-play-state: paused; } /* -------------------------------------------------------------------------- 24. Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .js .preloader { animation: none; display: none; } .js .word, .js .hero-in { opacity: 1; transform: none; } .js .reveal { opacity: 1; } .js .reveal.is-visible { animation: none; } .ticker__track { animation: none; flex-wrap: wrap; width: auto; } .ticker__list { flex-wrap: wrap; row-gap: 0.5rem; } .ticker__list[aria-hidden="true"] { display: none; } .shimmer { animation: none; background-position: 40% 0; } .scroll-cue__line::after { animation: none; top: 0; } .seal { animation: none; } .hero__video { display: none; } .portrait-card { transform: none !important; } .service-card { transform: none !important; } .manifesto__word { color: var(--ivory); } .manifesto__word.is-lit { color: var(--gold-light); text-shadow: none; } } /* -------------------------------------------------------------------------- 25. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .about__grid { grid-template-columns: 1fr; gap: 2.5rem; } .about__media { max-width: 480px; } .why__grid { grid-template-columns: 1fr; gap: 3rem; } .why__grid .section__head { margin-bottom: 0; } .contact__grid { grid-template-columns: 1fr; } .contact__intro { position: static; } .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .serve__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .engagements__grid { grid-template-columns: 1fr; max-width: 40rem; margin-inline: auto; } .engagement-card--featured { order: -1; } .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { body { font-size: 1rem; } .hero { padding-bottom: 5rem; } .hero__title { max-width: none; } .hero__credentials { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.2rem; font-size: 0.72rem; } .hero__credentials li + li::before { display: none; } .scroll-cue { display: none; } .ticker__item { font-size: 1.15rem; } /* Vertical growth cycle */ .cycle__track { top: 0; bottom: 0; left: 35px; right: auto; width: 1px; height: auto; } .cycle__fill { transform-origin: center top; transform: scaleY(var(--cycle-progress, 0)); } .cycle__steps { grid-template-columns: 1fr; gap: 2.6rem; } .cycle__step { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 1.3rem; text-align: left; } .cycle__icon { grid-row: 1 / 3; margin: 0; } .cycle__desc { margin: 0.6rem 0 0; max-width: none; } .site-footer__grid { grid-template-columns: 1fr; gap: 2.4rem; } .motion-toggle__label { display: none; } .motion-toggle { padding: 0.55rem 0.8rem; } .form-progress__label { display: none; } .form-progress__step.is-current .form-progress__label { display: block; } .form-progress { grid-template-columns: repeat(4, auto); justify-content: space-between; } } @media (max-width: 639px) { .hero__brand .brand__svg { width: 168px; height: 42px; } .services__grid, .serve__grid { grid-template-columns: 1fr; } .form-grid, .choice-grid { grid-template-columns: 1fr; } .about__facts { grid-template-columns: 1fr; } .why__list { grid-template-columns: 1fr; } .hero__cta .btn { width: 100%; } .form-nav { flex-wrap: wrap; } .form-nav .btn { flex: 1 1 auto; } .form-nav__spacer { display: none; } .seal { width: 104px; height: 104px; right: -12px; bottom: 40px; } .review__dl { grid-template-columns: 1fr; gap: 0.1rem 0; } .review__dl dt { margin-top: 0.5rem; } .to-top { right: 1rem; bottom: 1rem; width: 50px; height: 50px; } .hero__corner { right: 1rem; bottom: 1.2rem; } } @media (max-width: 400px) { .hero__title { font-size: clamp(2.3rem, min(11.5vw, 6.6vh), 2.9rem); } .ticker__item { font-size: 1.05rem; } } /* Coarse pointers: no hover-dependent effects, larger hit areas already ensured */ @media (hover: none) { .service-card { transform: none; } .portrait-card__img { transform: none; } } /* -------------------------------------------------------------------------- 26. First-screen fit: after the intro, the hero alone fills the first screen -------------------------------------------------------------------------- */ /* Tablets and small laptops: the tall scroll cue is hidden (only the Pause pill stays, below the content) and the credentials sit in a tidy two-column grid instead of wrapping mid-list. */ @media (max-width: 1023px) { .scroll-cue { display: none; } } @media (min-width: 768px) and (max-width: 1359px) { .hero__credentials { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0.7rem 2.4rem; } .hero__credentials li + li::before { display: none; } } /* Short laptop screens (e.g. 1280x600, or 1366x650 with browser bars) */ @media (min-width: 768px) and (max-height: 680px) { .hero__top { margin-bottom: 1.1rem; } .hero__title { font-size: clamp(2.5rem, min(9.4vw, 11vh), 7.6rem); } .hero__sub { margin-bottom: 0.9rem; } .hero__cta { margin-bottom: 1.1rem; } .hero__credentials { padding-top: 0.9rem; } } @media (min-width: 1024px) and (max-height: 680px) { .hero { padding-bottom: 3.5rem; } } /* Short phones (e.g. iPhone SE, compact Androids) */ @media (max-width: 767px) and (max-height: 780px) { .hero { padding-top: 1.25rem; padding-bottom: 4.5rem; } .hero__top { margin-bottom: 0.9rem; } .hero__eyebrow { margin-bottom: 0.7rem; } .hero__title { margin-bottom: 0.7rem; } .hero__sub { font-size: 0.95rem; line-height: 1.5; margin-bottom: 1rem; } .hero__cta { gap: 0.6rem; margin-bottom: 1rem; } .hero__cta .btn--lg { min-height: 50px; padding-block: 0.8rem; } .hero__credentials { padding-top: 0.9rem; gap: 0.55rem 1rem; font-size: 0.68rem; } } /* -------------------------------------------------------------------------- 27. Language switch (EN / FR) and the bilingual cross-fade -------------------------------------------------------------------------- */ .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; flex: none; border: 1px solid var(--hairline-strong); border-radius: 999px; background: rgba(10, 10, 11, 0.55); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lang-switch { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } } .lang-switch__btn { min-width: 44px; min-height: 36px; padding: 0 0.7rem 0 calc(0.7rem + 0.16em); /* balances the trailing letter-spacing */ border: 0; border-radius: 999px; background: transparent; color: var(--ivory-dim); font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; line-height: 1; cursor: pointer; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .lang-switch__btn:hover { color: var(--gold-light); } .lang-switch__btn[aria-pressed="true"] { background: var(--gold-gradient); color: #141008; box-shadow: 0 6px 18px -8px rgba(212, 175, 55, 0.7); cursor: default; } .lang-switch__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .lang-switch--footer { background: transparent; } .site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; } /* French lines run a little longer: give the hero title room for "en toute saison." */ html[lang^="fr"] .hero__title { max-width: 16ch; } /* Switching language: a brief cross-fade hides the text reflow (skipped under reduced motion) */ .i18n-fade .hero__content > :not(.hero__top), .i18n-fade main > :not(.hero), .i18n-fade .site-footer__grid, .i18n-fade .site-footer__disclaimer { transition: opacity 0.2s ease !important; } .i18n-swap .hero__content > :not(.hero__top), .i18n-swap main > :not(.hero), .i18n-swap .site-footer__grid, .i18n-swap .site-footer__disclaimer { opacity: 0 !important; }