/* ============================================================ global.min.css — pepperUp / Intelligentia Creatrix Foundation layer: reset, tokens, fonts, body, utilities, keyframes. No section-specific rules here. FONT LOADING (linked separately in , do not @import): assets_fonts_Gotham.css — Gotham (base64 embedded, 126KB) font-family-inter.css — REMOVE from HTML, replaced by Gotham font-family-anton.css — REMOVE from HTML, replaced by Gotham FONT RULE: two families only — Display / headings : Conv_elleNoNo (--font-family-1) Body / UI : Gotham (--font-family) Any Inter or Anton reference → replace with var(--font-family) ============================================================ */ /* ============================================================ 1. RESET (source: clear.min.css) ============================================================ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: none; font-size: 100%; vertical-align: baseline; background: transparent; } .block { display: block; } .hidden { display: none; } .clear { clear: both; } .left { float: left; } .right { float: right; } .line-height { line-height: 0; } .clear-right { clear: right; } .clear-left { clear: left; } .center-absolute { left: 50%; } .content-1170 { width: 73.125rem; } .content-1170 img { max-width: 100%; max-height: 100%; width: auto; height: auto; } .full-width { line-height: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } nav ul, ul, ol { list-style: none; } blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; } a { margin: 0; padding: 0; font-size: 100%; outline: none; vertical-align: baseline; background: transparent; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } input:focus, textarea:focus { outline: none; } .center-relative { margin-left: auto; margin-right: auto; } /* ============================================================ 2. FONT-FACE — Conv_elleNoNo (Gotham is loaded via assets_fonts_Gotham.css in ) ============================================================ */ @font-face { font-family: "Conv_elleNoNo"; src: url("fonts/elleNoNo.eot"); src: url("fonts/elleNoNo.eot?#iefix") format("embedded-opentype"), url("fonts/elleNoNo.woff") format("woff"), url("fonts/elleNoNo.ttf") format("truetype"), url("fonts/elleNoNo.svg#svgFontName") format("svg"); font-weight: normal; font-style: normal; } /* ============================================================ 3. DESIGN TOKENS ============================================================ */ :root { /* ── Brand colors ── */ --accent-color: #ff0000; /* red — primary brand color */ --accent-color-2: #ff0000; /* red — hover (same red) */ --accent-color-4: #000000; /* black — was near-navy rgb(0,0,28) */ --primary: #ffffff; /* white — text on red, main bg */ --secondary: #000000; /* black — video card backgrounds */ /* ── Greys ── */ --grey-light: rgb(210, 210, 210); --grey-mid: rgb(182, 182, 182); --grey-dark: rgb(128, 128, 128); /* ── Fonts ── */ --font-family-1: "Conv_elleNoNo", sans-serif; /* display / headings */ --font-family: "Gotham", sans-serif; /* body / UI */ /* ── Rituel tokens ── */ --r-black: #000000; --r-white: #f0efed; /* cream — intentional for Latin/rituel sections */ --r-grey: rgb(128, 128, 128); --r-grey-dim: #333333; --r-red: #ff0000; /* was #e41c26 — unified to brand red */ --r-latin: 'Times New Roman', Times, serif; --r-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ 4. BASE — BODY & LINKS ============================================================ */ body { font-family: var(--font-family); font-size: 1rem; line-height: 1.625; font-weight: 300; color: #000000; } body a { text-decoration: none; color: #000000; transition: color 0.2s linear; } body a:hover { color: #ff0000; } /* ============================================================ 5. LAYOUT UTILITIES ============================================================ */ .block { display: block; } .hidden { display: none; } .clear { clear: both; } .clear-left { clear: left; } .clear-right { clear: right; } .left { float: left; } .right { float: right; } .line-height { line-height: 0; } .full-width { line-height: 0; } .center-relative { margin-left: auto; margin-right: auto; } .center-absolute { left: 50%; } /* ============================================================ 6. KEYFRAMES ============================================================ */ @keyframes blink { 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes promo-circle-anim { 0% { transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } } /* horizontal bounce — .section-title-holder1.left in #services_bounce */ @keyframes run { 0% { left: 0; } 50% { left: calc(100% - 6.25rem); } 100% { left: 0; } } /* container-query horizontal slide — #services_bounce */ @keyframes slide-lr { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - var(--el-w, 28.625rem))); } } /* SVG wheel spin */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* alternate wheel rotate */ @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ============================================================ SEUIL 1 — #overhome Overrides the default #overhome (blank bg, .titleslide_hover). Existing: position:relative; z-index:2; min-height:100vh ============================================================ */ #overhome { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 6vw, 3rem); box-sizing: border-box; } /* Inner wrapper — constrains text width */ .seuil-1-inner { width: 100%; max-width: min(860px, 92vw); } /* Seuil label */ .seuil-label { font-family: var(--r-latin); font-size: clamp(1.55rem, 1.3vw, 0.7rem); letter-spacing: 0.45em; color: var(--r-red); text-transform: uppercase; opacity: 0.65; margin-bottom: clamp(1.2rem, 4vw, 2.5rem); text-align: center; } /* Main ritual text */ .seuil-text { font-family: var(--font-family-1, 'Conv_elleNoNo', sans-serif); font-size: clamp(1.3rem, 4.2vw, 2.8rem); line-height: 1.22; color: var(--r-black); margin: 0; text-align: center; min-height: 5em; /* reserves 4 lines — prevents redline & s1-link from shifting during scramble */ } /* Char spans during scramble */ .seuil-text .r-char { display: inline; } /* Red line */ .seuil-1-redline { width: 0; height: 2px; background: var(--r-red); opacity: 0; margin: clamp(1.5rem, 4vw, 3rem) auto 0; } /* Guided link */ .seuil-guided-link { display: block; text-align: center; margin-top: clamp(1.2rem, 3vw, 2rem); font-family: var(--r-latin); font-size: clamp(0.6rem, 1.5vw, 0.78rem); letter-spacing: 0.32em; text-transform: uppercase; color: var(--r-grey); text-decoration: none; border-bottom: 1px solid var(--r-grey-dim); padding-bottom: 3px; display: inline-block; opacity: 0; transition: color 0.3s, border-color 0.3s; } .seuil-guided-link:hover { color: var(--r-red); border-color: var(--r-red); } /* ============================================================ SECTION — #services_bounce class .services_bounce ============================================================ */ .services_bounce1, .services_bounce5, .services_bounce9 { position: relative; overflow: hidden; height: 22rem; container-type: inline-size; z-index: 9; background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; background-image: url(../images/backflowsers0.jpg); } .services_bounce3, .services_bounce7, .services_bounce11 { position: relative; overflow: hidden; height: 22rem; container-type: inline-size; z-index: 9; background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; background-image: url(../images/backflowsers.jpg); } @keyframes run { 0% { left: 0; } 50% { left: calc(100% - 6.25rem); /* Adjust the width of your image */ } 100% { left: 0; } } /* transform-only: runs on compositor, zero layout/paint cost. 100cqw resolves to #services_bounce width, not 100vw, so no scrollbar overshoot. */ @keyframes slide-lr { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - var(--el-w, 28.625rem))); } } #services_bounce1 .section-title-holder1 { background-color: transparent; width: 28.625rem; height: 28.625rem; z-index: 2; } #services_bounce3 .section-title-holder3 { background-color: transparent; width: 28.625rem; height: 28.625rem; z-index: 2; } #services_bounce5 .section-title-holder5 { background-color: transparent; width: 28.625rem; height: 28.625rem; z-index: 2; } #services_bounce7 .section-title-holder7 { background-color: transparent; width: 28.625rem; height: 28.625rem; z-index: 2; } #services_bounce9 .section-title-holder9 { background-color: transparent; width: 28.625rem; height: 28.625rem; z-index: 2; } #services_bounce11 .section-title-holder10 { background-color: transparent; width: 28.625rem; height: 28.625rem; z-index: 2; } #services_bounce1 .section-title-holder1.left { --el-w: 28.625rem; position: absolute; top: 0; left: 0; width: var(--el-w); height: var(--el-w); will-change: transform; animation: linear infinite run 15s; } #services_bounce3 .section-title-holder3.left { --el-w: 28.625rem; position: absolute; top: 0; left: 0; width: var(--el-w); height: var(--el-w); will-change: transform; animation: linear infinite run 15s; } #services_bounce5 .section-title-holder5.left { --el-w: 28.625rem; position: absolute; top: 0; left: 0; width: var(--el-w); height: var(--el-w); will-change: transform; animation: linear infinite run 15s; } #services_bounce7 .section-title-holder7.left { --el-w: 28.625rem; position: absolute; top: 0; left: 0; width: var(--el-w); height: var(--el-w); will-change: transform; animation: linear infinite run 15s; } #services_bounce9 .section-title-holder9.left { --el-w: 28.625rem; position: absolute; top: 0; left: 0; width: var(--el-w); height: var(--el-w); will-change: transform; animation: linear infinite run 15s; } #services_bounce11 .section-title-holder11.left { --el-w: 28.625rem; position: absolute; top: 0; left: 0; width: var(--el-w); height: var(--el-w); will-change: transform; animation: linear infinite run 15s; } #services_bounce1 .section-title-holder1 h2 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.375rem; width: 17.8125rem; word-break: break-all; line-height: 7.6875rem; margin-top: 0.625rem; color: rgb(182, 182, 182); margin-left: 5.5rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; } #services_bounce3 .section-title-holder3 h2 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.375rem; width: 17.8125rem; word-break: break-all; line-height: 7.6875rem; margin-top: 0.625rem; color: rgb(182, 182, 182); margin-left: 5.5rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; } #services_bounce5 .section-title-holder5 h2 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.375rem; width: 17.8125rem; word-break: break-all; line-height: 7.6875rem; margin-top: 0.625rem; color: rgb(182, 182, 182); margin-left: 5.5rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; } #services_bounce7 .section-title-holder7 h2 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.375rem; width: 17.8125rem; word-break: break-all; line-height: 7.6875rem; margin-top: 0.625rem; color: rgb(182, 182, 182); margin-left: 5.5rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; } #services_bounce9 .section-title-holder9 h2 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.375rem; width: 17.8125rem; word-break: break-all; line-height: 7.6875rem; margin-top: 0.625rem; color: rgb(182, 182, 182); margin-left: 5.5rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; } #services_bounce11 .section-title-holder11 h2 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.375rem; width: 17.8125rem; word-break: break-all; line-height: 7.6875rem; margin-top: 0.625rem; color: rgb(182, 182, 182); margin-left: 5.5rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; } .entry-title1 { width: 15rem; } .entry-title3 { width: 15rem; } .entry-title5 { width: 15rem; } .entry-title7 { width: 15rem; } .entry-title8 { width: 15rem; } .entry-title9 { width: 15rem; } .entry-title11 { width: 15rem; } #services:hover .center-relative1 { animation-play-state: paused; } /* ============================================================ SECTION — #services_bounce1 ============================================================ */ #services_bounce1 .section-title-holder1.left { --el-w: 28.625rem; position: absolute; top: 0; left: 0; width: var(--el-w); height: var(--el-w); will-change: transform; animation: linear infinite run 15s; } #services_bounce1 .section-title-holder1 h2 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.375rem; width: 17.8125rem; word-break: break-all; line-height: 7.6875rem; margin-top: 0.625rem; color: rgb(182, 182, 182); margin-left: 5.5rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; } #services_bounce1 .entry-title1 { width: 15rem; } /* ============================================================ SECTION — #services_bounce3 ============================================================ */ #services_bounce3 .section-title-holder3.left { --el-w: 28.625rem; position: absolute; top: 0; left: 0; width: var(--el-w); height: var(--el-w); will-change: transform; animation: linear infinite run 15s; } #services_bounce3 .section-title-holder3 h2 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.375rem; width: 17.8125rem; word-break: break-all; line-height: 7.6875rem; margin-top: 0.625rem; color: rgb(182, 182, 182); margin-left: 5.5rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; } #services_bounce3 .entry-title3 { width: 15rem; } /* ============================================================ SECTION — #services_bounce5 ============================================================ */ #services_bounce5 .section-title-holder5.left { --el-w: 28.625rem; position: absolute; top: 0; left: 0; width: var(--el-w); height: var(--el-w); will-change: transform; animation: linear infinite run 15s; } #services_bounce5 .section-title-holder5 h2 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.375rem; width: 17.8125rem; word-break: break-all; line-height: 7.6875rem; margin-top: 0.625rem; color: rgb(182, 182, 182); margin-left: 5.5rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; } #services_bounce5 .entry-title5 { width: 15rem; } /* ============================================================ SECTION — #services_bounce7 ============================================================ */ #services_bounce7 .section-title-holder7.left { --el-w: 28.625rem; position: absolute; top: 0; left: 0; width: var(--el-w); height: var(--el-w); will-change: transform; animation: linear infinite run 15s; } #services_bounce7 .section-title-holder7 h2 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.375rem; width: 17.8125rem; word-break: break-all; line-height: 7.6875rem; margin-top: 0.625rem; color: rgb(182, 182, 182); margin-left: 5.5rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; } #services_bounce7 .entry-title7 { width: 15rem; } /* ============================================================ SECTION — #services_bounce9 ============================================================ */ #services_bounce9 .section-title-holder9.left { --el-w: 28.625rem; position: absolute; top: 0; left: 0; width: var(--el-w); height: var(--el-w); will-change: transform; animation: linear infinite run 15s; } #services_bounce9 .section-title-holder9 h2 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.375rem; width: 17.8125rem; word-break: break-all; line-height: 7.6875rem; margin-top: 0.625rem; color: rgb(182, 182, 182); margin-left: 5.5rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; } #services_bounce9 .entry-title9 { width: 15rem; } /* ============================================================ SECTION — #services_bounce11 ============================================================ */ #services_bounce11 .section-title-holder11.left { --el-w: 28.625rem; position: absolute; top: 0; left: 0; width: var(--el-w); height: var(--el-w); will-change: transform; animation: linear infinite run 15s; } /* SVG removed — placeholder holds the same footprint the .wheel1 SVG used to occupy */ .services_bounce11 .wheel1-placeholder { display: block; width: 20vw; height: 20vw; } #services_bounce11 .section-title-holder11 h2 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.375rem; width: 17.8125rem; word-break: break-all; line-height: 7.6875rem; margin-top: 0.625rem; color: rgb(182, 182, 182); margin-left: 5.5rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; } #services_bounce11 .entry-title11 { width: 15rem; } /* ============================================================ SECTION — #about2 (Manifesto) Background: var(--grey-light). Decorative circle left, content panel right (float-right, margin-left clears circle). ============================================================ */ #about2 { position: relative; z-index: 10; background-color: rgb(210, 210, 210); clear: both; padding-top: 10rem; overflow: hidden; } #about2 .about2 .image-slider-wrapper.img .image-slider li img { width: 100%; } #about2 .swiper-container { height: auto; min-height: 23.75rem; padding-bottom: 4.375rem; } #about2 .swiper-pagination-bullet { width: 2.5rem; height: 2.5rem; text-align: center; line-height: 1.25rem; font-size: 0.75rem; color: #000; opacity: 1; background: rgba(0, 0, 0, 0.2); transition: width 0.3s ease, height 0.3s ease; } #about2 .swiper-pagination-bullet:hover, #about2 .swiper-pagination-bullet-active { width: 3.75rem; height: 3.75rem; background: rgb(238, 28, 38); } #about2 .about2 .section-content-holder2 { padding-bottom: 0; border-radius: 3vw; } #about2 .section-content-holder2 { background: rgba(255, 255, 255, 0.9); width: 50rem; padding: 3.75rem 0; } #about2 .section-title-holder2 { background-color: rgb(255, 255, 255); width: 28.625rem; height: 28.625rem; z-index: 2; border-radius: 50%; margin-left: -3rem; } #about2 .section-content-holder2 .content-wrapper { padding: 0 3.75rem 6em; } #about2 .section-content-holder2.right { margin-left: 23.125rem; } #about2 .section-title-holder2.left { --el-w: 28.625rem; position: absolute; width: var(--el-w); height: var(--el-w); will-change: transform; background-color: rgb(238, 28, 38); border-radius: 50%; } #about2 .content-title-holder2 { overflow: hidden; height: 6.25rem; margin-top: -3.75rem; padding-bottom: 1px; } #about2 .content-title2 { position: absolute; font-family: var(--font-family-1); font-weight: 700; text-align: center; font-size: 11.25rem; line-height: 100%; text-transform: uppercase; margin-top: -5.3125rem; color: var(--accent-color); } #about2 .section-title-holder2 { background-color: rgb(238, 28, 38); border-radius: 50%; } #about2.section-title-holder2 span { color: rgb(0, 0, 28); } #about2 .section-content-holder2 .content-title-holder2 { overflow: hidden; height: 6.25rem; margin-top: -3.75rem; padding-bottom: 1px; z-index: 99; } #about2 .section-content-holder2 .content-title2 { position: absolute; font-family: "Conv_elleNoNo", sans-serif; font-weight: 700; text-align: center; font-size: 11.25rem; line-height: 100%; text-transform: uppercase; margin-top: -5.3125rem; color: rgb(238, 28, 38); } #about2 .section-title-holder2 h2 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.0625rem; width: 17.8125rem; word-break: break-all; line-height: 2.0625rem; color: rgb(255, 255, 255); margin-left: 9rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; color: rgb(255, 255, 255); } #about2 .about2 .service-title { font-family: "Conv_elleNoNo", sans-serif; font-weight: 500; font-size: 1.75rem; letter-spacing: 0.1875rem; text-transform: uppercase; padding-top: 0.625rem; padding-bottom: 1.875rem; color: rgb(56, 56, 56); } #about2 .about2 .section-title-holder h2 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.0625rem; width: 17.8125rem; word-break: break-all; line-height: 2.0625rem; color: rgb(255, 255, 255); margin-left: 9rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; color: rgb(255, 255, 255); } #about2 .section-num2 span { display: inline-block; transform: rotate(-90deg); transform-origin: left bottom; margin-left: 12rem; color: rgb(0, 0, 0); font-family: "Gotham", sans-serif; font-weight: 700; font-size: 15rem; line-height: 100%; letter-spacing: -0.3125rem; } #about2 .about2 .about2-content { font-family: "Gotham", sans-serif; color: rgb(56, 56, 56); font-weight: 200; font-size: 0.9375rem; line-height: 180%; padding-bottom: 9.375rem; padding-top: 3.125rem; text-rendering: auto; -webkit-font-smoothing: antialiased; } #about2 .about2 .about2-content-holder-bck { display: inline-block; width: 100%; margin-top: 2.375rem; margin-left: 0.3125rem; height: 23.75rem; } #about2 .about2 .about2-holder-bck { display: inline-block; width: 33.4375rem; } #about2 .about2 .swiper-container { position: relative; width: 80%; height: 23.75rem; margin-left: auto; margin-right: auto; } #about2 .about2 .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #about2 .about2 .swiper-pagination-bullet { width: 1.25rem; height: 1.25rem; text-align: center; line-height: 1.25rem; font-size: 0.75rem; color: #000; opacity: 1; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.2); } #about2 .about2 .swiper-pagination-bullet-active { color: #fff; background: rgb(238, 28, 38); } #about2 .about2 .svg-container_about { z-index: 100; margin-left: 10%; width: 11.25rem; } /* ============================================ END MANIFESTO SWIPER PAGINATION #about2 ============================================ */ /* ── Button resets — no outline, no border on any interactive state ── */ .lang-btn, .acc-lang-btn { border: none; outline: none; } .lang-btn:hover, .lang-btn:focus, .lang-btn:focus-visible, .lang-btn:active, .acc-lang-btn:hover, .acc-lang-btn:focus, .acc-lang-btn:focus-visible, .acc-lang-btn:active { outline: none; box-shadow: none; border: none; } /* Stack circle above content on tablet/mobile */ @media (max-width: 768px) { .section-title-holder2.left { position: relative; width: 100%; height: auto; } .section-content-holder2, .section-content-holder2.right { width: 100%; float: none; margin-left: 0; padding: 2rem 1.5rem 4rem; } .content-title2 { display: none; } } /* ============================================================ SECTION — #whatbest4 (What We Do Best) Service accordion with video backgrounds, tags, and fancytexthover underline-reveal effect. ============================================================ */ /* ── Banner ── */ #whatbest4 { position: relative; z-index: 10; background-color: rgb(210, 210, 210); clear: both; padding-top: 10rem; overflow: hidden; } #whatbest4 .service-content-banner4 { display: flex; flex-direction: column; position: relative; z-index: 1; background: var(--accent-color); } #whatbest4 .service-content-banner4::before { content: ''; position: absolute; background-color: transparent; background-image: radial-gradient(at top center, var(--accent-color) 0%, var(--accent-color-4) 31%); width: 100%; height: 100%; top: 0; left: 0; opacity: 0.22; z-index: -1; } #whatbest4 .entry-title4 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.0625rem; width: 17.8125rem; word-break: break-all; line-height: 2.0625rem; color: rgb(255, 255, 255); margin-left: 9rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; color: rgb(255, 255, 255); } #whatbest4 .service-title-wrapper { display: flex; flex-direction: row; gap: 1.875rem; align-items: flex-start; justify-content: space-between; width: 90%; margin-top: -5em; font-size: 2rem; z-index: 99; } #whatbest4 .service-title-wrapper .service-title-heading { color: white; font-size: 8em; } #whatbest4 .service-title-wrapper .service-title-description { width: 77%; margin-top: 2rem; z-index: 99; background-color: #89898996; padding-left: 2rem; padding-top: 3rem; padding-bottom: 3rem; } #whatbest4 .service-title-wrapper .service-title-cta { width: 26%; display: flex; justify-content: flex-end; } #whatbest4 .content-1170 { width: 100%; } /* ── Service content container & video ── */ #whatbest4 .service-content-container { display: flex; flex-direction: column; justify-content: flex-end; width: 90%; min-height: 31.25rem; padding: 0; background-color: var(--secondary); position: relative; overflow: hidden; z-index: 2; border-radius: 1.25rem; } #whatbest4 .service-video-bg { width: 150%; height: 150%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; overflow: hidden; z-index: 0; } #whatbest4 .service-video-content { display: flex; flex-direction: column; align-self: flex-end; background-color: #ff0000;; color: white; padding: 1.875rem; position: relative; overflow: hidden; z-index: 1; } #whatbest4 .service-video-content::before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: inherit; background-color: inherit; z-index: -1; } #whatbest4 .service-description-content { width: 56%; color: white; font-family: "Gotham", sans-serif; font-size: 0.875rem; font-weight: 400; line-height: 1em; } #whatbest4 .service-tag-container { width: 33%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.3125rem; } #whatbest4 .service-tag { display: inline-block; color: white; padding: 0.3125rem 0.625rem; white-space: nowrap; font-size: 0.875rem; font-weight: 400; line-height: 1em; font-family: var(--font-family-2); } /* ── Section number & title circle ── */ #whatbest4 .section-num4 span { display: inline-block; transform: rotate(-90deg); transform-origin: left bottom; margin-left: 12rem; color: rgb(0, 0, 0); font-family: "Gotham", sans-serif; font-weight: 700; font-size: 15rem; line-height: 100%; letter-spacing: -0.3125rem; } #whatbest4 .section-title-holder4 { background-color: rgb(238, 28, 38); width: 28.625rem; height: 28.625rem; z-index: 2; border-radius: 50%; margin-left: 4rem; margin-top: 7rem; } /* ============================================================ SECTION — #whatbest4 (What We Do Best) ── Service accordion ── ============================================================ */ /* ── Service accordion ── */ .accordion{ padding-bottom: 5rem; } .accordion-item { --sfs: clamp(2.25rem, 6vw, 7.1875rem); } .accordion-item .service-accordion-header { font-size: var(--sfs); padding-left: 0; } .accordion-item.service-acc-1 .service-accordion-header { padding-left: calc(0.5 * var(--sfs)); } .accordion-item.service-acc-2 .service-accordion-header { padding-left: calc(1.5 * var(--sfs)); } .accordion-item.service-acc-3 .service-accordion-header { padding-left: calc(2.7 * var(--sfs)); } .accordion-item.service-acc-4 .service-accordion-header { padding-left: calc(2.2 * var(--sfs)); } .accordion-item.service-acc-5 .service-accordion-header { padding-left: calc(0.6 * var(--sfs)); } .accordion-item .service-accordion-header .accordion-button { background-color: transparent; border: 0; font-family: var(--font-family-1); font-size: var(--sfs) !important; font-weight: 400; text-transform: uppercase; line-height: 1.1em; white-space: nowrap; box-shadow: none; color: var(--accent-color-4); margin-block-end: calc(-0.26 * var(--sfs)); padding: 0; } .accordion-item .service-accordion-header .accordion-button::after { display: none; } .accordion-item .service-accordion-header .accordion-button:focus { outline: none; box-shadow: none; border: none; } .accordion-item .service-accordion-header .accordion-button:hover, .accordion-item .service-accordion-header .accordion-button:not(.collapsed) { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: white; stroke-width: 1px; stroke: white; } .accordion-item .service-accordion-header .accordion-button:not(.collapsed) { stroke-width: 1px; stroke: #000000; } /* ── Fancy text hover — accordion underline reveal ── Requires: class="accordion-button fancytexthover" and a Same text inside. */ .accordion-item .service-accordion-header .accordion-button.fancytexthover { position: relative; } .accordion-item .service-accordion-header .accordion-button .textwrapper, .accordion-item .service-accordion-header .accordion-button .textwrapper1 { position: absolute; display: inline-block; overflow: hidden; width: 0; white-space: pre; color: #fff; transition: width 500ms; border-bottom: 1px solid; padding-bottom: 0.15em; font-size: inherit; font-family: inherit; font-weight: inherit; text-transform: inherit; line-height: inherit; top: 0; left: 0; } .accordion-item .service-accordion-header .accordion-button.fancytexthover:hover .textwrapper, .accordion-item .service-accordion-header .accordion-button.fancytexthover:not(.collapsed) .textwrapper, .accordion-item .service-accordion-header .accordion-button.fancytexthover:hover .textwrapper1, .accordion-item .service-accordion-header .accordion-button.fancytexthover:not(.collapsed) .textwrapper1 { width: 100%; } /* ============================================================ SPACING UTILITIES — gspace / grid-spacer ============================================================ */ .gspace-0 { gap: 0; } .gspace-1 { gap: 0.625rem; } .gspace-2 { gap: 1.25rem; } .gspace-3 { gap: 1.875rem; } .gspace-4 { gap: 2.5rem; } .gspace-5 { gap: 3.125rem; } .gspace-x-0 { column-gap: 0; } .gspace-x-1 { column-gap: 0.625rem; } .gspace-x-2 { column-gap: 1.25rem; } .gspace-x-3 { column-gap: 1.875rem; } .gspace-x-4 { column-gap: 2.5rem; } .gspace-x-5 { column-gap: 3.125rem; } .gspace-y-0 { row-gap: 0; } .gspace-y-1 { row-gap: 0.625rem; } .gspace-y-2 { row-gap: 1.25rem; } .gspace-y-3 { row-gap: 1.875rem; } .gspace-y-4 { row-gap: 2.5rem; } .gspace-y-5 { row-gap: 3.125rem; } .grid-spacer-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; } .grid-spacer-1 { --bs-gutter-x: 0.625rem; --bs-gutter-y: 0.625rem; } .grid-spacer-2 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; } .grid-spacer-3 { --bs-gutter-x: 1.875rem; --bs-gutter-y: 1.875rem; } .grid-spacer-4 { --bs-gutter-x: 2.5rem; --bs-gutter-y: 2.5rem; } .grid-spacer-5 { --bs-gutter-x: 3.125rem; --bs-gutter-y: 3.125rem; } @media screen and (max-width: 991.98px) { .service-title-wrapper .service-title-heading { width: 100%; } .service-title-wrapper .service-title-description { width: 41%; } .service-title-wrapper .service-title-cta { width: 50%; } .service-description-content { width: 100%; } .service-tag-container { width: 100%; } .accordion-item .service-accordion-header .accordion-button { white-space: normal; } .gspace-md-0 { gap: 0; } .gspace-md-1 { gap: 0.625rem; } .gspace-md-2 { gap: 1.25rem; } .gspace-md-3 { gap: 1.875rem; } .gspace-md-4 { gap: 2.5rem; } .gspace-md-5 { gap: 3.125rem; } .gspace-md-100 { gap: 6.25rem; } .grid-spacer-md-1 { --bs-gutter-x: 0.625rem; --bs-gutter-y: 0.625rem; } .grid-spacer-md-2 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; } .grid-spacer-md-3 { --bs-gutter-x: 1.875rem; --bs-gutter-y: 1.875rem; } .grid-spacer-md-4 { --bs-gutter-x: 2.5rem; --bs-gutter-y: 2.5rem; } .grid-spacer-md-5 { --bs-gutter-x: 3.125rem; --bs-gutter-y: 3.125rem; } } @media screen and (max-width: 767.98px) { .service-title-wrapper .service-title-heading, .service-title-wrapper .service-title-description, .service-title-wrapper .service-title-cta { width: 100%; text-align: center; justify-content: center; align-items: center; } .accordion-item .service-accordion-header .accordion-button { white-space: normal; } .accordion-item.service-acc-1 .service-accordion-header, .accordion-item.service-acc-2 .service-accordion-header, .accordion-item.service-acc-3 .service-accordion-header, .accordion-item.service-acc-4 .service-accordion-header, .accordion-item.service-acc-5 .service-accordion-header { padding-left: 0; } } @media screen and (min-width: 767px) { .gspace-md-0 { gap: 0; } .gspace-md-1 { gap: 0.625rem; } .gspace-md-2 { gap: 1.25rem; } .gspace-md-3 { gap: 1.875rem; } .gspace-md-4 { gap: 2.5rem; } .gspace-md-5 { gap: 3.125rem; } .gspace-md-100 { gap: 6.25rem; } .grid-spacer-md-1 { --bs-gutter-x: 0.625rem; --bs-gutter-y: 0.625rem; } .grid-spacer-md-2 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; } .grid-spacer-md-3 { --bs-gutter-x: 1.875rem; --bs-gutter-y: 1.875rem; } .grid-spacer-md-4 { --bs-gutter-x: 2.5rem; --bs-gutter-y: 2.5rem; } .grid-spacer-md-5 { --bs-gutter-x: 3.125rem; --bs-gutter-y: 3.125rem; } } @media screen and (min-width: 1025px) { .gspace-lg-0 { gap: 0; } .gspace-lg-1 { gap: 0.625rem; } .gspace-lg-2 { gap: 1.25rem; } .gspace-lg-3 { gap: 1.875rem; } .gspace-lg-4 { gap: 2.5rem; } .gspace-lg-5 { gap: 3.125rem; } .gspace-lg-100 { gap: 6.25rem; } .grid-spacer-lg-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; } .grid-spacer-lg-1 { --bs-gutter-x: 0.625rem; --bs-gutter-y: 0.625rem; } .grid-spacer-lg-2 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; } .grid-spacer-lg-3 { --bs-gutter-x: 1.875rem; --bs-gutter-y: 1.875rem; } .grid-spacer-lg-4 { --bs-gutter-x: 2.5rem; --bs-gutter-y: 2.5rem; } .grid-spacer-lg-5 { --bs-gutter-x: 3.125rem; --bs-gutter-y: 3.125rem; } } /* ============================================================ SECTION — #services Circle uses CSS sticky (class renamed to escape sticky-kit's [class*="section-title-holder"] selector). Parent converted to flex so position:sticky works — floated children break it. ============================================================ */ /* Flex wrapper — required for sticky to find a scrolling ancestor */ #services6 .section-num6 span { display: inline-block; transform: rotate(-90deg); transform-origin: left bottom; margin-left: 12rem; color: rgb(0, 0, 0); font-family: "Gotham", sans-serif; font-weight: 700; font-size: 15rem; line-height: 100%; letter-spacing: -0.3125rem; } #services6 { position: relative; z-index: 10; background-color: rgb(210, 210, 210); clear: both; padding-top: 10rem; overflow: hidden; } #services6 .center-relative6 { display: flex; align-items: flex-start; position: relative; padding-bottom: 5rem; } #services6 .section-content-holder6 { flex: 1; min-width: 0; background-color: white; border-radius: 20%; padding: 5rem; margin-left: -3rem; } /* CSS sticky circle */ #services6 .section-title-sticky6 { top: 1.5rem; align-self: flex-start; flex-shrink: 0; background-color: rgba(255, 0, 0, 0.4); width: 28.625rem; height: 28.625rem; z-index: 2; border-radius: 50%; --el-w: 28.625rem; position: relative; /* top: 0; */ left: 0; width: var(--el-w); height: var(--el-w); will-change: transform; animation: linear infinite run 25s; } #services6 .section-title-sticky6 h2 { font-family: var(--font-family-1); font-weight: 800; font-size: 4.0625rem; width: 36.8125rem; word-break: break-all; line-height: 2.0625rem; color: #000000; text-transform: uppercase; letter-spacing: 1rem; padding: 0; margin-top: -4rem; margin-left: 6rem; } #services6 .section-title-sticky6 span { color: var(--accent-color-4); } /* Pause any container animation on hover */ #services6:hover .center-relative6 { animation-play-state: paused; } #services6 .content-title6 { position: absolute; font-family: var(--font-family-1); font-weight: 700; text-align: center; font-size: 11.25rem; line-height: 100%; text-transform: uppercase; margin-top: -11.3125rem; color: var(--accent-color); } /* Tablet/mobile — stack vertically, sticky at viewport top */ @media (max-width: 940px) { #services6 .center-relative6 { flex-direction: column; align-items: center; } .section-title-sticky6 { top: 0; } } /* ============================================================ SECTION — #expertise8 ============================================================ */ #expertise8 { background-color: var(--grey-dark); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: 23; padding-bottom: 5rem; padding-top: 8rem; } #expertise8 .section-content-holder8 { background: rgb(252, 252, 252); width: 50rem; padding: 3.75rem 0; background: rgba(252, 252, 252, 0.9); } #expertise8 .section-content-holder8 .content-wrapper { padding: 0 3.75rem; padding-bottom: 6em; margin-left: 6rem; } #expertise8 .section-content-holder8.right { margin-left: 23.125rem; } #expertise8 .section-content-holder8.left { margin-top: 23.125rem; } #expertise8 .section-content-holder8 .content-title8 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 700; text-align: center; font-size: 9.375rem; line-height: 100%; text-transform: uppercase; color: rgb(238, 28, 38); } #expertise8 .entry-title8 { font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.0625rem; width: 17.8125rem; word-break: break-all; line-height: 2.0625rem; color: rgb(255, 255, 255); margin-left: 9rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; color: rgb(255, 255, 255); } #expertise8 .section-num8 span { display: inline-block; transform: rotate(-90deg); transform-origin: left bottom; margin-left: 12rem; color: rgb(0, 0, 0); font-family: "Gotham", sans-serif; font-weight: 700; font-size: 15rem; line-height: 100%; letter-spacing: -0.3125rem; } #expertise8 .section-title-holder8 { background-color: rgb(238, 28, 38); width: 28.625rem; height: 28.625rem; z-index: 0; border-radius: 50%; margin-left: 4rem; margin-top: 10rem; } #expertise8 .section-title-holder8 span { color: var(--accent-color-4); } #expertise8 .section-content-holder8 .content-title-holder8 { overflow: hidden; height: 6.25rem; margin-top: -3.75rem; padding-bottom: 1px; z-index: 99; } #expertise8 .section-content-holder8 .content-title8 { position: absolute; font-family: var(--font-family-1); font-weight: 700; text-align: center; font-size: 11.25rem; line-height: 100%; text-transform: uppercase; margin-top: -5.3125rem; color: var(--accent-color); } #expertise8 .section-content-holder8 { padding-bottom: 0; border-radius: 3vw; } #expertise8 .image-slider-wrapper.img .image-slider li img { width: 100%; } #expertise8 .service-title8 { font-family: var(--font-family-1); font-weight: 500; font-size: 1.75rem; letter-spacing: 0.1875rem; text-transform: uppercase; padding-top: 0.625rem; padding-bottom: 1.875rem; color: rgb(56, 56, 56); } #expertise8 .swiper-container { position: relative; width: 80%; height: 23.75rem; margin-left: auto; margin-right: auto; } #expertise8 .swiper-slide { display: flex; justify-content: center; align-items: center; } #expertise8 .swiper-pagination-bullet { width: 1.25rem; height: 1.25rem; text-align: center; line-height: 1.25rem; font-size: 0.75rem; color: #000000; opacity: 1; background: rgba(0, 0, 0, 0.2); } #expertise8 .swiper-pagination-bullet-active { color: #ffffff; background: var(--accent-color); } #expertise8 .expertise8 .svg-container_about8 { z-index: 100; margin-left: 10%; width: 11.25rem; } #services8 .center-relative8 { display: flex; align-items: flex-start; position: relative; padding-bottom: 5rem; } /* Pause any container animation on hover */ #services8:hover .center-relative8 { animation-play-state: paused; } .next-section { text-align: center; display: flex !important; align-items: center; justify-content: center; gap: 0.3em; position: absolute; left: 50%; transform: translateX(-50%); bottom: 3rem; cursor: pointer; transition: all 0.5s ease; font-size: 100%; border: 1px solid red; padding: 1.25rem; border-radius: 50%; z-index: 999; width: 20%; height: 20%; margin-top: 1rem; } /* ============================================================ SECTION — #contact10 ============================================================ */ #contact10 { background-color: var(--grey-dark); background-image: url(../images/assets/background_img_05b.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: 23; padding-bottom: 5rem; padding-top: 8rem; } #contact10 .section-title-holder10 { background-color: rgb(238, 28, 38); width: 28.625rem; height: 28.625rem; z-index: 0; border-radius: 50%; margin-left: 4rem; } #contact10 .contact10 { background-color: rgb(128, 128, 128); background-image: url(../images/assets/background_img_05b.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: 2; } #contact10 .section-content-holder10.right { background-color: rgb(252, 252, 252); background-color: rgba(252, 252, 252, 0.5); border-radius: 3.125rem; padding: 4rem; margin-left: 38rem; } #contact10 .section-title-holder10.left { background-color: rgb(238, 28, 38); background-color: rgba(238, 28, 38, 0.8); border-radius: 50%; } #contact10 .section-title-holder10 span { color: rgb(0, 0, 28); } #contact10 .section-content-holder10 .content-title-holder10 { overflow: hidden; height: 6.25rem; margin-top: -3.75rem; padding-bottom: 1px; z-index: 99; } #contact10 .content-title10 { position: absolute; font-family: "Conv_elleNoNo", sans-serif; font-weight: 700; text-align: center; font-size: 11.25rem; line-height: 100%; text-transform: uppercase; margin-top: -5.3125rem; color: rgb(238, 28, 38); } #contact10 .entry-title10 { width: 15rem; font-family: "Conv_elleNoNo", sans-serif; font-weight: 800; font-size: 2.0625rem; width: 17.8125rem; word-break: break-all; line-height: 2.0625rem; color: rgb(255, 255, 255); margin-left: 9rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; color: rgb(255, 255, 255); } #contact10 .contact10.section-content-holder10 { padding-bottom: 0; } #contact10 .contact-form { max-width: 100%; width: 50rem; position: relative; margin: 0 auto; font-size: 1.375rem; color: #9a9a9a; z-index: 99; } #contact10 .custom-text-class { display: inline-block; padding-right: 2.8125rem; vertical-align: top; } #contact10 .custom-field-class { display: inline-block; margin-bottom: 3.75rem; } #contact10 .contact-form input[type="text"], input[type="email"], textarea { color: rgb(128, 128, 128); background-color: rgba(252, 252, 252, 0.75); border: 0; height: 4rem; font-size: 1.5rem; font-weight: 200; font-family: "Goldham", sans-serif; width: 100%; line-height: 10rem; padding: 0; border-radius: 1em; } #contact10 .contact-form input[type="text"]::-webkit-input-placeholder, .contact-form input[type="email"]::-webkit-input-placeholder, .contact-form textarea::-webkit-input-placeholder { font-family: "Goldham", sans-serif; color: rgb(128, 128, 128); font-weight: 400; font-size: 0.8125rem; line-height: 1.5625rem; } #contact10 .contact-form input[type="text"]::-moz-placeholder, .contact-form input[type="email"]::-moz-placeholder, .contact-form textarea::-moz-placeholder { font-family: "Goldham", sans-serif; color: rgb(128, 128, 128); font-weight: 400; font-size: 0.8125rem; line-height: 1.5625rem; opacity: 1; } #contact10 .contact-form input[type="text"]:-ms-input-placeholder, .contact-form input[type="email"]:-ms-input-placeholder, .contact-form textarea:-ms-input-placeholder { font-family: "Goldham", sans-serif; color: rgb(128, 128, 128); font-weight: 400; font-size: 0.8125rem; line-height: 1.5625rem; } #contact10 .contact-form input[type="text"]:-moz-placeholder, .contact-form input[type="email"]:-moz-placeholder, .contact-form textarea:-moz-placeholder { font-family: "Goldham", sans-serif; color: rgb(128, 128, 128); font-weight: 400; font-size: 0.8125rem; line-height: 1.5625rem; opacity: 1; } #contact10 .contact-form input[type="text"], .contact-form input[type="email"] { padding-bottom: 0.3125rem; margin-bottom: 1.5625rem; padding-left: 0.3125rem; padding-left: 1.5625rem; } #contact10 .contact-form textarea { -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; padding-top: 0.8125rem; overflow: hidden; padding-bottom: 0.3125rem; padding-left: 1.5625rem; } #contact10 .contact-form textarea:focus { height: 9.375rem; overflow: auto; } #contact10 .contact-form input[name="your-name"] { margin-top: 0; padding-top: 0; } #contact10 .contact-form input[type="submit"] { color: rgb(238, 28, 38); display: inline-block; border: 2px solid rgb(238, 28, 38); text-align: center; padding: 0.75rem; cursor: pointer; margin-top: 1.875rem; vertical-align: middle; text-decoration: none; background: transparent; font-family: "Goldham", sans-serif; width: 100%; text-transform: uppercase; font-size: 1rem; transition: all 0.2s linear; } #contact10 .contact-form input[type="submit"]:hover { color: white; background-color: rgb(238, 28, 38); } #contact10 .contact10div.contact-form-response-output { margin: 0; font-size: 0.875rem; line-height: 1.25rem; } #contact10 .contact10span.contact-form-not-valid-tip { font-size: 0.625rem; } #contact10 .section-num10 span { display: inline-block; transform: rotate(-90deg); transform-origin: left bottom; margin-left: 12rem; color: rgb(0, 0, 0); font-family: "Gotham", sans-serif; font-weight: 700; font-size: 15rem; line-height: 100%; letter-spacing: -0.3125rem; } #contact10 .section-title-holder10 { background-color: rgb(238, 28, 38); width: 28.625rem; height: 28.625rem; z-index: 2; border-radius: 50%; margin-left: 4rem; margin-top: 7rem; } .contactform { margin-bottom: 3.125rem; } #messageret { font-size: 0.875rem; letter-spacing: 0.375rem; border: 2px solid #fff; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; margin-left: 0.3125rem; padding: 1.25rem; } .text-success { color: rgb(0, 0, 0); } .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; animation-duration: 2s; } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; -moz-animation-name: tada; animation-name: tada; } footer { background-color: rgb(128, 128, 128); z-index: 99; position: relative; } .footer { font-size: 1rem; line-height: 2.25rem; clear: both; color: rgb(252, 252, 252); text-align: center; padding: 6.25rem 0; } .footer-left, .footer-right { width: 50.625rem; } .footer-right { margin-left: 23.125rem; } .footer a { color: rgb(252, 252, 252); } .social-footer a { margin: 0 0.625rem; font-size: 5.5rem; } .social-footer a:hover { color: rgb(238, 28, 38); } .logo-footer { z-index: 100; margin-left: 41%; width: 18%; } @keyframes run { 0% { left: 0; } 50% { left: calc(100% - 6.25rem); /* Adjust the width of your image */ } 100% { left: 0; } } .latin-text-drop { margin-top: 3rem; font-style: normal; letter-spacing: 0.28125rem; font-size: 0.7em; font-family: times; text-align: right; } .letblancmenu1 { font-family: "Gotham", sans-serif; background-color: rgb(238, 28, 38); color: rgb(252, 252, 252); font-weight: 400; user-select: none; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em; padding: 0.25rem; } /* ============================================================ SECTION — PAGE LOADER ============================================================ */ .doc-loader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(252, 252, 252); } .text-loader { text-align: center; vertical-align: middle; margin-top: 18%; } .doc-loader img { width: 28vw; height: 28vw; } .blink { font-family: var(--font-family-1); font-size: 2vw; line-height: 1.625rem; font-weight: 400; color: rgb(8, 8, 8); text-align: center; text-transform: uppercase; letter-spacing: 0.4375rem; animation: blink 1s linear infinite; } /* ============================================================ SECTION — NAVIGATION ============================================================ */ .menu-wrapper { transition: background-color 0.2s linear; z-index: 99 !important; width: 100% !important; top: 0; position: fixed; } #header-main-menu { max-width: 73.125rem; margin: 0 auto; text-align: center; } #header-main-mobmenu { max-width: 73.125rem; margin: 0 auto; text-align: left; } .main-menu.sm-clean { background-color: transparent; } .main-menu.sm-clean a { font-size: 0.9rem; line-height: 2.5rem; color: rgb(252, 252, 252); font-weight: 400; transition: color 0.2s linear; text-transform: uppercase; letter-spacing: 0.03cm; font-family: var(--r-latin); } .main-menu.sm-clean .sub-menu a { font-size: 0.6875rem; line-height: 1.25rem; } .sm-clean .current_page_item a { color: rgb(252, 252, 252) !important; } .main-menu.sm-clean a:hover { position: relative; color: rgb(4, 4, 4) !important; text-decoration: none; } .main-menu.sm-clean a:before { content: ""; position: absolute; width: 100%; height: 1px; bottom: calc(50% - 0.625rem); left: 0; background-color: rgb(128, 128, 128); visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; } .main-menu.sm-clean a:hover:before { visibility: visible; transform: scaleX(1); } .sm-clean li.active a { position: relative; color: rgb(8, 8, 8) !important; } .sm-clean li.active::before { position: absolute; top: 1.4375rem; left: 0.125rem; font-family: "FontAwesome"; font-weight: 900; content: ""; } #mob-menu22 { display: none; padding: 0; } .letblancmenu { font-family: var(--font-family); background-color: rgba(238, 28, 38, 0.5); color: rgb(252, 252, 252); font-weight: 400; user-select: none; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; } #menufix { display: block !important; pointer-events: none; opacity: 0; overflow: auto; position: fixed; top: 0; width: 100%; transform: translateY(-100%); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s; } #menufix.active { visibility: visible; display: block; padding: 0.75rem; position: fixed; z-index: 1; opacity: 1 !important; pointer-events: auto; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0s; } /* ============================================================ SECTION — HERO — #home / video / ritual intro ============================================================ */ #home { position: sticky !important; top: 0; width: 100%; height: 100vh; overflow: hidden; background-color: #000; z-index: 1; } .hero-scroll-container { position: relative; } .hero-container { margin-left: auto; margin-right: auto; width: 100%; } .video-container { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .video-container video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } #titre_intro { position: absolute; inset: 0; z-index: 10; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; } .svg-container { position: absolute; top: 4vw; left: 2vw; width: 38%; pointer-events: auto; } #overhome { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 6vw, 3rem); box-sizing: border-box; } /* Dark veil over video */ #home::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; } /* Ritual overlay block — seuil 0 */ .seuil-0-content { position: relative; inset: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; padding: 0 clamp(1rem, 5vw, 3rem); } .seuil-intro { position: relative; z-index: 199; font-family: var(--r-latin); font-size: clamp(1.2rem, 2.1vw, 2.82rem); letter-spacing: 0.5em; color: var(--r-red); text-transform: uppercase; opacity: 1; min-height: 1.4em; margin-bottom: clamp(0.8rem, 3vw, 1.5rem); line-height: 1.6; } .seuil-redline { width: 0; height: 2px; background: var(--r-red); opacity: 0; margin: clamp(1rem, 3vw, 1.8rem) auto; transition: none; } .btn-ritual-skip { position: fixed; top: clamp(1rem, 2.5vw, 1.4rem); right: clamp(1rem, 2.5vw, 1.4rem); font-family: var(--font-family); font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--r-grey-dim); text-decoration: none; opacity: 0; transition: color 0.3s, opacity 0.4s; z-index: 300; padding: 0.5rem; pointer-events: none; } .btn-ritual-skip.visible { opacity: 1; pointer-events: auto; } .btn-ritual-skip:hover { color: var(--r-grey); } .r-cursor { display: inline-block; width: 2px; height: 0.78em; background: var(--r-red); vertical-align: text-bottom; margin-left: 2px; animation: r-blink 1s step-start infinite; } @keyframes r-blink { 0%,100%{opacity:1} 50%{opacity:0} } .seuil-scroll-hint { position: absolute; bottom: clamp(1.2rem, 3.5vw, 2rem); left: 50%; transform: translateX(-50%); font-size: 0.55rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--r-grey-dim); pointer-events: none; opacity: 0; animation: r-hint 3.5s ease-in-out infinite; } .seuil-scroll-hint.visible { opacity: 1; } @keyframes r-hint { 0%,100% { opacity: .15; transform: translateX(-50%) translateY(0); } 50% { opacity: .6; transform: translateX(-50%) translateY(5px); } } /* Ritual seuil 1 — #overhome content */ .seuil-1-inner { width: 100%; max-width: min(53.75rem, 92vw); } .seuil-label { font-family: var(--r-latin); font-size: clamp(1.55rem, 1.3vw, 0.7rem); letter-spacing: 0.45em; color: var(--r-red); text-transform: uppercase; opacity: 0.65; margin-bottom: clamp(1.2rem, 4vw, 2.5rem); text-align: center; } .seuil-text { font-family: var(--font-family-1); font-size: clamp(1.3rem, 4.2vw, 2.8rem); line-height: 1.22; color: var(--r-black); margin: 0; text-align: center; min-height: 5em; } .seuil-text .r-char { display: inline; } .seuil-1-redline { width: 0; height: 2px; background: var(--r-red); opacity: 0; margin: clamp(1.5rem, 4vw, 3rem) auto 0; } .seuil-guided-link { display: inline-block; text-align: center; margin-top: clamp(1.2rem, 3vw, 2rem); font-family: var(--r-latin); font-size: clamp(0.6rem, 1.5vw, 0.78rem); letter-spacing: 0.32em; text-transform: uppercase; color: var(--r-grey); text-decoration: none; border-bottom: 1px solid var(--r-grey-dim); padding-bottom: 3px; opacity: 0; transition: color 0.3s, border-color 0.3s; } .seuil-guided-link:hover { color: var(--r-red); border-color: var(--r-red); } /* ============================================================ SECTION — INTRO / BANNER / SLIDER HELPERS ============================================================ */ .intro-page { width: 100%; height: 100vh; object-fit: cover; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; } .main-banner { position: relative; } .video-overlay { bottom: 0; left: 0; top: 0; background: rgba(212, 212, 212, 0.8); position: absolute; width: 100%; } .spacer-simple, .spacer-double, .video-overlay, .spacer-triple { width: 100%; } .main-banner .caption { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 80%; position: absolute; text-align: center; } .title-desc { font-family: var(--font-family); font-size: 1.375rem; line-height: 1.625rem; max-width: 20.8125rem; margin: 0 auto; color: #fff; } .page-template-page-home .intro-page footer { position: absolute; bottom: 0; width: 100%; } .titleslide_hover { font-family: var(--font-family-1); top: calc(50% - 2em); margin-left: 15%; position: absolute; color: rgb(252, 252, 252); user-select: none; cursor: default; font-size: 3vw; line-height: 100%; text-align: left; text-transform: uppercase; font-weight: bold; letter-spacing: 0.2em; z-index: 69; width: 80%; visibility: hidden; } .textslide_hover { top: calc(50% + 2em); margin-left: 20%; position: absolute; color: rgb(22, 22, 22); user-select: none; cursor: default; font-size: 1.6em; line-height: 100%; text-align: end; letter-spacing: 0.2em; z-index: 69; font-family: var(--font-family-1); font-weight: 800; } .slider.open { position: absolute; width: 100%; height: 100vh; top: 0; overflow: hidden; background-color: rgba(238, 28, 38, 0.5); color: rgb(252, 252, 252); transition: all 1s; z-index: 69; } .letrouge { color: rgba(238, 28, 38, 0.5); } .letblanc { color: rgba(252, 252, 252, 0.5); } /* ============================================================ SECTION — SVG WHEEL ANIMATIONS ============================================================ */ .wheel { -webkit-animation: spin 5s linear infinite; animation: spin 5s linear infinite; margin-top: -0.3em; } .wheel1 { width: 20vw; height: auto; -webkit-animation: rotate 5s linear infinite; animation: rotate 5s linear infinite; transform-origin: center; transform-box: fill-box; z-index: 99; stroke: red; stroke-width: 5; fill: none; margin-top: -0.3em; } .wheelposi { margin-left: 0.16em; } .baspading { bottom: 1rem; } .center-relative1 { margin-left: 3em; margin-right: 4em; } .center-relative2 { margin-left: 3em; margin-right: 4em; } /* ============================================================ SECTION — SECTION BASE Generic base for all numbered sections. Section-specific overrides are in the per-section blocks above. ============================================================ */ .section { position: relative; z-index: 1; } .section-num { margin-top: 2.5rem; } .section-title-holder { background-color: #ffffff; width: 28.625rem; height: 28.625rem; z-index: 2; border-radius: 50%; } .section-title-holder h2 { font-family: var(--font-family-1); font-weight: 800; font-size: 2.0625rem; width: 17.8125rem; word-break: break-all; line-height: 2.0625rem; color: #ffffff; margin-left: 9rem; text-transform: uppercase; letter-spacing: 0.4375rem; padding: 0; } .section-content-holder { background: rgba(252, 252, 252, 0.9); width: 50rem; padding: 3.75rem 0; } .section-content-holder .content-wrapper { padding: 0 3.75rem; padding-bottom: 6em; } .section-content-holder.right { margin-left: 23.125rem; } .section-content-holder.left { margin-top: 23.125rem; } .section-content-holder .content-title-holder { height: 6.25rem; margin-top: -3.75rem; padding-bottom: 9.375rem; } .section-content-holder .content-title { font-family: var(--font-family-1); font-weight: 700; text-align: center; font-size: 9.375rem; line-height: 100%; text-transform: uppercase; color: var(--accent-color); } .extra-content-left { width: 50rem; color: #fff; padding: 6.25rem 0; } .extra-content-right { width: 50rem; margin-left: 23.125rem; color: #fff; padding: 6.25rem 0; } .extra-content-full-width { padding: 6.25rem 0; } .section:last-of-type .extra-content-left, .section:last-of-type .extra-content-right, .section:last-of-type .extra-content-full-width { padding-bottom: 0; } .spacer-single { width: 100%; height: 0.625rem; display: block; clear: both; } .spacer-double { width: 100%; height: 3.75rem; display: block; clear: both; } /* ============================================================ SECTION — BUTTONS & IMAGE SLIDER ============================================================ */ .btn-accent { background-color: var(--accent-color); color: var(--primary); } .btn-accent:hover { background-color: var(--accent-color-2); } .image-slider-wrapper .peppercarousel_wrapper { margin-bottom: 0 !important; } .image-slider-wrapper .image-slider { padding-left: 0 !important; } /* ============================================================ SECTION — ACCORDION & LANGUAGE SELECTORS ============================================================ */ .acc-container { max-width: 43.75rem; width: 100%; } .acc { margin-bottom: 0.625rem; border-bottom: 1px solid #eee; } .acc-head { background-color: rgb(215, 215, 215); padding: 0.9375rem 1.5625rem; font-size: 1.375rem; position: relative; cursor: pointer; font-family: var(--font-family-1); border-radius: 2em; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.3s ease; } .acc-head:hover { background-color: rgb(200, 200, 200); } .acc-head::before, .acc-head::after { content: ''; position: absolute; top: 50%; background-color: #fff; transition: all .3s; } .acc-head.active::before { transform: rotate(90deg); } .acc-head p.acc-title { color: #474747; font-weight: bold; margin: 0; padding: 0; font-size: 1.1rem; flex-grow: 1; letter-spacing: 0.06cm; } .acc-content { padding: 1.25rem 1.5625rem; display: none; overflow: hidden; } .acc-content p { font-size: 1rem; line-height: 1.6; color: #555; margin: 0; } .acc-lang-selector { display: flex; gap: 0.5rem; margin-bottom: 0; justify-content: flex-end; align-items: center; flex-shrink: 0; } .lang-btn, .acc-lang-btn { font-family: var(--font-family); font-size: 0.5rem; text-transform: uppercase; color: #555; border: none; cursor: pointer; padding: 0.25rem 0.625rem; line-height: 1.2; transition: all 0.25s ease; -webkit-tap-highlight-color: transparent; } .lang-btn:hover, .acc-lang-btn:hover { color: #000; } .lang-btn.active, .acc-lang-btn.active { color: #fff !important; background-color: #474747 !important; } .lang-row { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: clamp(1.2rem, 3vw, 2rem); opacity: 0; transition: opacity 0.5s; } .lang-row.visible { opacity: 1; } .lang-label { font-family: var(--r-latin); font-size: 0.98rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--r-grey-dim); margin-right: 0.8rem; pointer-events: none; user-select: none; } .lang-sep { color: var(--r-grey-dim); font-size: 0.42rem; padding: 0 0.18rem; pointer-events: none; user-select: none; } .acc-lang-btn.btn-latin-arrow { background: transparent !important; border: none !important; padding: 0.25rem 0.375rem !important; font-size: 1.2rem; color: #474747; border-radius: 0; transition: transform 0.3s ease, color 0.2s ease; } .acc-lang-btn.btn-latin-arrow:hover { color: #000; } .acc-lang-btn.btn-latin-arrow.active { background: transparent !important; color: #474747 !important; border: none !important; } .acc.active .acc-lang-btn.btn-latin-arrow { transform: rotate(180deg); border: none !important; } #philosophie { margin-top: 0.9375rem; } .philo-lang-selector { display: flex; gap: 0.5rem; margin-bottom: 1.5625rem; justify-content: flex-start; align-items: center; } .philo-lang-btn { font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: #555; background: #fff; border: 1px solid #ccc; cursor: pointer; padding: 0.25rem 0.625rem; border-radius: 0.75rem; line-height: 1.2; transition: all 0.25s ease; } .philo-lang-btn:hover { color: #000; border-color: #000; } .philo-lang-btn.active { color: #fff !important; background-color: #474747 !important; border-color: #474747 !important; } .philo-lang-btn.btn-latin-arrow { background: transparent !important; border: none !important; padding: 0.25rem 0.375rem !important; font-size: 1.2rem; color: #474747; border-radius: 0; } .philo-lang-btn.btn-latin-arrow.active { background: transparent !important; color: #474747 !important; } .philo-content-text p { font-size: 1rem; line-height: 1.6; color: #555; margin-bottom: 1.5rem; } .philosophie-coda { font-weight: bold; color: #474747; } /* ============================================================ RESPONSIVE — mobile / tablet overrides ============================================================ */ @media (min-width: 769px) { .services .section-title-holder { position: relative; z-index: 10; margin-top: 2em; } } @media (max-width: 768px) { .content-1170 { width: 100%; } .section-content-holder .content-title { display: none !important; } .video-container { height: 100%; } .video-container video { object-fit: cover; } .svg-container { width: 55%; top: 6vw; } } @media screen and (max-width: 767.98px) { .footer { padding: 2.5rem 1rem; } .footer ul { padding-left: 0; } .social-footer a { font-size: 2.75rem; } .logo-footer { margin-left: auto; margin-right: auto; width: 50%; display: block; } .latin-text-drop { font-size: 0.6em !important; letter-spacing: 2px !important; } } @media (max-width: 576px) { .acc-head { flex-direction: column; align-items: flex-start; gap: 0.625rem; border-radius: 1.2em; padding: 0.75rem 1.125rem; } .acc-head .acc-lang-selector { width: 100%; justify-content: flex-start; } .acc-title { font-size: 1rem; } .acc-content { padding: 0.9375rem 1.125rem; } } @media (max-width: 500px) { .section-title-holder1.left { --el-w: 80vw; } } @media (max-width: 480px) { .video-container { height: 100%; } .svg-container { width: 72%; top: 8vw; left: 4vw; } .video-container video { display: none; } .video-container::after { content: ''; position: absolute; inset: 0; background: url('../images/assets/woman-applying-mascara.jpg') center/cover no-repeat; } } /* Ritual responsive */ @media (min-width: 768px) { .seuil-label, .seuil-text, .lang-row, .seuil-guided-link { text-align: left; } .lang-row { justify-content: flex-start; } .seuil-1-redline { margin: clamp(1.5rem, 4vw, 3rem) 0 0; } .seuil-guided-link { display: inline-block; } .seuil-0-content { text-align: left; align-items: flex-start; } .seuil-redline { margin: clamp(1rem, 3vw, 1.8rem) 0; } #overhome { align-items: flex-start; padding-left: clamp(4rem, 10vw, 8rem); } } @media (min-width: 1280px) { .seuil-text { font-size: clamp(2.5rem, 3.5vw, 3.5rem); height: 25rem; } } @media (prefers-reduced-motion: reduce) { .r-cursor, .seuil-scroll-hint { animation: none; } }