@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,200;1,9..144,300;1,9..144,400&family=Geist:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.cdnfonts.com/css/coolvetica'); /* Theme Name: MAX Design Graphique Theme URI: https://maxdesigngraphique.fr Description: Thème personnalisé pour MAX Design Graphique. Author: Alexandre Pasco Author URI: https://www.alexandrepasco.fr Version: 2.1 GitHub Theme URI: alexandrepasco-tech/maxdesigngraphique */ /* ============================================ MAX DESIGN GRAPHIQUE — V3 (Modern Editorial) ============================================ */ :root{ --bg: #1b1464; --bg-2: #221a72; --card: #26207a; --card-hi: #2e2887; --line: rgba(200,205,240,.14); --line-hi: rgba(200,205,240,.26); --ink: #f4f5ff; --ink-mid: #c9cbe6; --ink-mute: #8a8db5; /* accent palettes — brand blues */ --accent: #00feff; /* electric cyan-blue */ --accent-2: #0033cc; /* deep saturated blue */ --accent-ink:#0c0c0e; --maxw: 1440px; --pad-x: clamp(20px, 4vw, 64px); --radius: 14px; --radius-sm: 8px; --serif: "Fraunces", "Times New Roman", serif; --sans: "Geist", "Inter", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --title: "Coolvetica", "Coolvetica Rg", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* accent variants applied via [data-accent] on */ html[data-accent="cyan"] { --accent:#00feff; --accent-2:#0033cc; --accent-ink:#0c0c0e; } html[data-accent="blue"] { --accent:#0033cc; --accent-2:#00feff; --accent-ink:#f5f3ee; } html[data-accent="teal"] { --accent:#43babf; --accent-2:#1b1464; --accent-ink:#0c0c0e; } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html,body, body.elementor-kit-330 { background-image: none !important; background-color: var(--bg) !important; color: var(--ink); font-family: var(--sans) !important; } html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body{ font-family:var(--sans); font-weight:400; line-height:1.5; overflow-x:hidden; } h1, h2, h3, h4, h5, h6, .ttl, .h1, .h2 { font-family:var(--title); } .it { font-family:var(--serif); } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } ::selection{ background:var(--accent); color:var(--accent-ink); } /* page noise overlay */ .noise{ position:fixed; inset:0; pointer-events:none; z-index:2000; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } html.no-noise .noise{ display:none; } /* custom cursor removed per user request */ /* ============= NAV ============= */ .nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:18px var(--pad-x); background:rgba(15,10,55,.4); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border-bottom:1px solid rgba(200,205,240,.08); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); transition:transform .35s cubic-bezier(.4,0,.2,1); } .nav.hide{ transform:translateY(-110%); } .nav-brand{ display:flex; align-items:center; } .nav-brand img{ height:64px; width:auto; display:block; /* symmetric negative margin lets the logo grow taller than the nav's line-box without changing nav height, while staying perfectly centered */ margin: -16px 0; } .nav-links{ display:flex; gap:4px; list-style:none; align-items:center; margin:0 12px 0 auto; background:rgba(255,255,255,.04); padding:6px; border-radius:999px; border:1px solid var(--line); } .nav-links li { margin:0; padding:0; } .nav-links a{ display:block; padding:8px 16px; border-radius:999px; font-size:14px; color:var(--ink); transition:all .2s; white-space:nowrap; } .nav-links a:hover{ color:var(--ink); background:rgba(255,255,255,.05); } .nav-links a.active{ color:var(--accent-ink); background:var(--accent); } .nav-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--mono); background:var(--accent); color:var(--accent-ink); height:51px; padding:0 28px; border-radius:999px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:14px; } .nav-cta:hover{ background:var(--ink); color:#0c0c0e; } .nav-cta .arr{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--accent-ink); color:var(--accent); font-size:11px; transition:transform .2s; } .nav-cta:hover .arr{ transform:translateX(2px); background:#0c0c0e; color:var(--ink); } .burger{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:transparent; padding:0; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:4px; } .burger span{ display:block; width:18px; height:2px; background:var(--ink); transition:.3s; } .menu-item-mobile-cta { display:none; } /* ============= HERO ============= */ .hero{ position:relative; min-height:100vh; padding:160px 0 0 var(--pad-x); display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:stretch; overflow:hidden; } .hero-bg{ position:absolute; inset:-1px; pointer-events:none; z-index:0; background-image: radial-gradient(800px 400px at 80% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%), linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: auto, 96px 96px, 96px 96px; -webkit-mask-image: radial-gradient(ellipse at 60% 30%, black 30%, transparent 80%); mask-image: radial-gradient(ellipse at 60% 30%, black 30%, transparent 80%); } .hero > *:not(.hero-bg){ position:relative; z-index:1; } .hero-meta{ display:none; } .chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.02); } .chip .pip{ width:6px; height:6px; border-radius:50%; background:var(--accent); } .chip.live .pip{ background:#22c55e; animation:pulse 2s infinite; } .chip .sep{ width:1px; height:10px; background:var(--line-hi); } .hero-left{ display:flex; flex-direction:column; justify-content:center; padding: 40px 0 80px; min-width:0; } .hero-left > * { animation: hero-fade-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .hero-left .hero-badge { animation-delay: 0.1s; } .hero-left .hero-eyebrow { animation-delay: 0.25s; } .hero-left .hero-h { animation-delay: 0.4s; } .hero-left .lede { animation-delay: 0.55s; } .hero-left .hero-actions { animation-delay: 0.7s; } @keyframes hero-fade-in { from { opacity: 0; transform: translateY(40px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } .hero-badge{ display:inline-flex; align-items:center; align-self:flex-start; padding:14px 24px; border-radius:999px; background:color-mix(in oklab, var(--accent) 12%, transparent); border:1px solid color-mix(in oklab, var(--accent) 25%, transparent); color:var(--accent); font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; margin-bottom:48px; } .hero-eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:24px; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); font-weight:600; } .hero-eyebrow .line{ width:40px; height:1px; background:var(--accent); } .hero .hero-h{ font-family:var(--title); font-weight:400; font-size:clamp(56px, 8.4vw, 148px); line-height:.85; letter-spacing:-.015em; text-wrap:balance; text-transform:none; color:var(--ink); } .hero-h .row{ display:block; } .hero-h .cyan{ color:var(--accent); } .hero-h .it{ font-family:var(--title); font-style:normal; font-weight:400; color:var(--ink-mute); text-transform:none; letter-spacing:-.01em; font-size:.62em; display:inline-block; margin-top:.1em; } .hero-h .stk{ position:relative; display:inline-block; background:linear-gradient(180deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 70%, white) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-h .out{ -webkit-text-stroke: 2px var(--ink); color: transparent; } .hero-h sup{ font-family:var(--mono); font-size:14px; vertical-align:top; color:var(--accent); margin-left:8px; font-weight:500; } .hero-left .lede{ margin-top:40px; max-width:480px; font-size:16px; line-height:1.7; color:var(--ink-mid); } .hero-left .lede b{ color:var(--ink); font-weight:600; } .hero-actions{ margin-top:48px; display:flex; gap:24px; align-items:center; flex-wrap:wrap; } .btn-link{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); font-weight:600; position:relative; padding:14px 4px; transition:color .25s; } .btn-link:hover{ color:var(--accent); } .btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:14px; border:none; transition:transform .3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .3s cubic-bezier(0.2, 0.8, 0.2, 1), background .2s; cursor:pointer; } .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -10px color-mix(in oklab, var(--accent) 80%, transparent), 0 0 16px 0 color-mix(in oklab, var(--accent) 30%, transparent); } .btn .arrow{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--accent-ink); color:var(--accent); font-size:11px; transition:transform .25s; } .btn:hover .arrow{ transform:translateX(3px); } .btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-hi); } .btn-ghost:hover{ background:rgba(255,255,255,.04); border-color:var(--ink); } .btn-ghost .arrow{ background:var(--ink); color:var(--bg); } /* hero right — full-bleed photo */ .hero-right{ position:relative; align-self:stretch; min-height:520px; overflow:hidden; background:var(--card); margin-top:-80px; border-radius:var(--radius); } .hero-right img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(10%) contrast(1.04); } .hero-right::after{ content:""; position:absolute; inset:0; background:linear-gradient(to right, var(--bg) 0%, transparent 25%); pointer-events:none; } .hero-rate{ position:absolute; bottom:24px; right:24px; z-index:2; background:rgba(15,10,55,.7); backdrop-filter:blur(10px); border:1px solid color-mix(in oklab, var(--accent) 25%, var(--line)); border-radius:8px; padding:14px 18px; text-align:center; } .hero-rate .n{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:42px; line-height:1; color:var(--accent); } .hero-rate .s{ font-family:var(--serif); font-size:24px; color:var(--accent); margin-left:2px; } .hero-rate small{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mid); margin-top:6px; } .hero-scroll{ position:absolute; bottom:24px; left:var(--pad-x); display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); z-index:2; } .hero-scroll .bar{ width:60px; height:1px; background:var(--line-hi); overflow:hidden; position:relative; } .hero-scroll .bar::after{ content:""; position:absolute; inset:0; background:var(--accent); animation:scrollbar 2.4s ease-in-out infinite; } @keyframes scrollbar{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } } /* ============= MARQUEE ============= */ .marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg); overflow:hidden; padding:18px 0; position:relative; } .marquee-track{ display:flex; gap:32px; width:max-content; animation:track 38s linear infinite; } .marquee-item{ display:inline-flex; align-items:center; gap:14px; font-family:var(--mono); font-weight:500; font-size:clamp(12px, 1.4vw, 16px); line-height:1; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); white-space:nowrap; } .marquee-item.muted{ color:var(--ink-mute); } .marquee-glyph{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; } @keyframes track{ to{ transform:translateX(-50%); } } /* ============= SECTION SHELL ============= */ .section{ padding: clamp(80px, 12vh, 140px) var(--pad-x); position:relative; } .section.tight{ padding-top:clamp(40px,6vh,80px); } .eyebrow{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:18px; } .eyebrow::before{ content:""; display:block; width:24px; height:1px; background:var(--accent); } .eyebrow .idx{ color:var(--accent); } .section-h{ font-family:var(--title); font-weight:400; font-size: clamp(48px, 7vw, 104px); line-height:.86; letter-spacing:-.015em; text-wrap:balance; text-transform:none; } .section-h .it{ font-family:var(--title); font-style:normal; font-weight:400; color:var(--ink-mid); text-transform:none; letter-spacing:-.01em; } .section-h .ac{ color:var(--accent); } .section-head{ display:grid; grid-template-columns: 1.4fr 1fr; gap:48px; align-items:end; margin-bottom: clamp(40px, 6vh, 72px); } .section-head .sub{ font-size:16px; line-height:1.55; color:var(--ink-mid); max-width:440px; } /* ============= SERVICES ============= */ .bento{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows: 320px; gap:14px; } .svc{ position:relative; background:rgba(38, 32, 122, 0.35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius); box-shadow: 0 8px 32px rgba(0,0,0,0.1); padding:28px; overflow:hidden; transition:transform .4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color .4s, background .4s, box-shadow .4s; display:flex; flex-direction:column; isolation:isolate; text-decoration: none; color: inherit; } .svc:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,0.15); background:rgba(46, 40, 135, 0.65); box-shadow: 0 16px 40px rgba(0,0,0,0.25); } .svc::before{ content:""; position:absolute; inset:auto -40% -40% auto; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, color-mix(in oklab, var(--accent) 30%, transparent), transparent 60%); opacity:0; transition:opacity .4s; z-index:0; } .svc:hover::before{ opacity:1; } .svc > *{ position:relative; z-index:1; } .svc .head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:auto; } .svc .glyph{ width:52px; height:52px; border-radius:14px; border:1px solid var(--line); background:var(--bg); display:grid; place-items:center; color:var(--accent); transition:background .3s, color .3s, border-color .3s; } .svc .glyph svg{ width:26px; height:26px; display:block; } .svc:hover .glyph{ background:var(--accent); color:var(--accent-ink); border-color:transparent; } .svc .num{ font-family:"Bricolage Grotesque", var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; color:var(--ink-mute); } .svc .ttl{ font-family:var(--title); font-weight:400; font-size:34px; line-height:1; letter-spacing:-.005em; text-transform:none; margin-top:18px; } .svc .ttl .it{ font-family:var(--title); font-style:normal; color:var(--ink-mid); font-weight:400; text-transform:none; letter-spacing:-.005em; font-size:1em; display:block; margin-top:2px; } .svc .desc{ font-family:"Bricolage Grotesque", var(--sans); font-size:14px; line-height:1.55; color:var(--ink-mid); margin-top:12px; letter-spacing:.005em; } .svc .arr{ margin-top:16px; display:inline-flex; align-items:center; gap:8px; font-family:"Bricolage Grotesque", var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-mute); transition:color .25s, gap .25s; } .svc .arr svg{ width:14px; height:14px; transition:transform .25s; } .svc:hover .arr{ color:var(--accent); gap:12px; } .svc:hover .arr svg{ transform:translateX(3px); } /* ============= PROCESS STRIP ============= */ .process{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:80px; } .process-step{ padding:32px 28px; border-right:1px solid var(--line); position:relative; } .process-step:last-child{ border-right:none; } .process-step .step-n{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--accent); } .process-step .step-t{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:28px; line-height:1.1; letter-spacing:-.02em; margin-top:12px; } .process-step .step-d{ font-size:13px; line-height:1.55; color:var(--ink-mid); margin-top:10px; } /* ============= PORTFOLIO — 3×3 EQUAL GRID ============= */ .pf-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } .pf{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--card); border:1px solid rgba(255,255,255,0.06); box-shadow: 0 8px 24px rgba(0,0,0,0.15); cursor:pointer; transition:transform .5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .5s, border-color .5s; aspect-ratio: 1 / 1; } .pf img{ width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.8,.2,1), filter 1s cubic-bezier(.2,.8,.2,1); filter:saturate(0.95) brightness(.92); } .pf:hover{ z-index:2; } @media (hover: hover) { .pf:hover{ transform:translateY(-8px); box-shadow: 0 20px 48px rgba(0,0,0,0.3); border-color:rgba(255,255,255,0.15); } .press-card:hover img{ transform:scale(1.05); } .press-card:hover::after{ opacity:1; } .press-card:hover .meta{ opacity:1; transform:none; } .pf:hover img{ transform:scale(1.08); filter:saturate(1.2) brightness(1.05); } .pf:hover .pf-meta{ opacity:1; transform:none; } .pf:hover::after{ opacity:1; } } .pf .pf-meta{ position:absolute; bottom:0; left:0; width:100%; padding:24px; display:flex; justify-content:space-between; align-items:flex-end; opacity:0; transform:translateY(10px); transition:.4s; z-index:2; } .pf::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.8) 0%, transparent 60%); opacity:0; transition:.4s; z-index:1; pointer-events:none; } .pf .pf-label{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:22px; color:var(--ink); line-height:1; } .pf .pf-cat{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-top:6px; display:block; } .pf .pf-zoom{ width:42px; height:42px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-size:18px; } .pf .pf-corner{ position:absolute; top:14px; left:14px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:rgba(15,10,55,.6); backdrop-filter:blur(8px); padding:5px 10px; border-radius:999px; border:1px solid var(--line); color:var(--ink); } /* removed legacy span overrides — 3×3 grid uses uniform sizing */ .pf-cta{ aspect-ratio: 1 / 1; background:linear-gradient(165deg, color-mix(in oklab, var(--accent) 14%, var(--card)) 0%, var(--card) 70%); border:1px dashed color-mix(in oklab, var(--accent) 30%, var(--line)); border-radius:var(--radius); display:flex; flex-direction:column; justify-content:space-between; padding:24px; color:var(--ink-mid); transition:transform .4s cubic-bezier(0.2,0.8,0.2,1), border-color .4s, box-shadow .4s; } .pf-cta:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:0 16px 40px color-mix(in oklab, var(--accent) 15%, transparent); } .pf-cta .big{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:38px; line-height:1; letter-spacing:-.02em; color:var(--ink); } .pf-cta .big span{ color:var(--accent); } .pf-cta .row{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; } /* ============= ABOUT ============= */ .about{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .about-img-wrap{ position:relative; padding:24px 0 0 24px; /* room for the cyan outline deco that sits behind, top-left */ } .about-deco{ position:absolute; top:0; left:0; width:38%; aspect-ratio:1; border:1px solid var(--accent); opacity:.45; border-radius:var(--radius); pointer-events:none; } .about-img{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; background:var(--card); } .about-img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(8%); } .about-square{ position:absolute; right:0; bottom:0; z-index:3; width:clamp(110px, 28%, 170px); aspect-ratio:1; background:var(--accent); color:var(--accent-ink); padding:16px; display:flex; flex-direction:column; justify-content:space-between; } .about-square .num{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(44px, 4.6vw, 64px); line-height:1; } .about-square .num i{ font-style:italic; font-weight:200; } .about-square .lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; line-height:1.35; } .about-img .ticker{ position:absolute; top:18px; left:18px; background:rgba(15,10,55,.7); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:999px; padding:8px 14px; display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; } .about-img .ticker .pip{ width:6px; height:6px; border-radius:50%; background:#22c55e; } .about-text .lede{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(26px, 2.4vw, 36px); line-height:1.25; letter-spacing:-.02em; color:var(--ink); margin-top:24px; } .about-text .lede span{ color:var(--accent); font-style:normal; } .about-text p{ font-size:16px; line-height:1.65; color:var(--ink-mid); margin-top:18px; max-width:60ch; } .about-text p b{ color:var(--ink); font-weight:600; } .metrics{ margin-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); } .metric{ padding:22px 16px; border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; text-align:center; } .metric:first-child{ padding-left:0; } .metric:last-child{ border-right:none; padding-right:0; } .metric .n{ font-family:var(--serif); font-weight:300; font-size:46px; line-height:1; letter-spacing:-.02em; color:var(--ink); } .metric .n .ac{ color:var(--accent); font-style:italic; font-weight:200; } .metric .l{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); margin-top:6px; } /* ============= TESTIMONIALS ============= */ .testi-wrap{ position:relative; } .testi-rail{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-top:12px; margin-top:-12px; padding-bottom:32px; scrollbar-width:none; } .testi-rail::-webkit-scrollbar{ display:none; } .testi{ flex:0 0 clamp(320px, 32vw, 420px); scroll-snap-align:start; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:18px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); transition:border-color .4s, transform .4s cubic-bezier(0.2,0.8,0.2,1), box-shadow .4s; } .testi:hover{ border-color:var(--line-hi); transform:translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.15); } .testi .top{ display:flex; align-items:center; justify-content:space-between; } .testi .stars{ color:var(--accent); letter-spacing:2px; font-size:13px; } .testi .pill{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); } .testi .quote{ font-family:var(--serif); font-weight:300; font-size:21px; line-height:1.35; letter-spacing:-.01em; color:var(--ink); } .testi .quote::before{ content:"“"; color:var(--accent); margin-right:4px; } .testi .quote::after{ content:"”"; color:var(--accent); margin-left:4px; } .testi .who{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); } .testi .ava{ width:40px; height:40px; border-radius:50%; background:var(--bg-2); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; font-family:var(--serif); font-style:italic; color:var(--accent); font-size:15px; } .testi .ava img{ width:100%; height:100%; object-fit:cover; } .testi .nm{ font-size:14px; font-weight:600; color:var(--ink); } .testi .rl{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); margin-top:2px; } .testi-nav{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; } .testi-nav button{ width:46px; height:46px; border-radius:50%; background:transparent; color:var(--ink); border:1px solid var(--line-hi); font-size:18px; transition:background .2s, color .2s; } .testi-nav button:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } /* ============= CONTACT ============= */ .contact{ position:relative; display:grid; grid-template-columns:1.2fr 1fr; gap:64px; padding: clamp(80px,12vh,140px) var(--pad-x); } .contact h2{ font-family:var(--title); font-weight:400; font-size:clamp(64px, 9.4vw, 148px); line-height:.84; letter-spacing:-.015em; text-transform:none; } .contact h2 .it{ font-family:var(--title); font-style:normal; font-weight:400; color:var(--ink-mid); text-transform:none; letter-spacing:-.01em; } .contact h2 .ac{ color:var(--accent); } .contact-arrow::before{ content:"→"; } .contact-mail{ display:inline-flex; align-items:center; gap:10px; margin-top:36px; font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(22px, 2vw, 30px); color:var(--accent); padding-bottom:6px; border-bottom:1px solid var(--accent); } .contact-meta{ margin-top:36px; } .contact-meta p{ font-size:14px; color:var(--ink-mid); line-height:1.65; } .contact-meta b{ color:var(--ink); font-weight:600; } .socials{ margin-top:24px; display:flex; gap:8px; flex-wrap:wrap; } .socials a{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid var(--line); border-radius:999px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mid); transition:all .2s; } .socials a:hover{ border-color:var(--accent); color:var(--accent); background:color-mix(in oklab, var(--accent) 8%, transparent); } .form{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:14px; } .form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .form label{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px; } .form input, .form textarea, .form select{ width:100%; background:var(--bg-2); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; font:inherit; font-size:14px; transition:border-color .2s; } .form input:focus, .form textarea:focus, .form select:focus{ outline:none; border-color:var(--accent); } .form textarea{ resize:vertical; min-height:110px; } .form .chips{ display:flex; gap:8px; flex-wrap:wrap; } .form .chip-btn{ padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink-mid); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; transition:all .2s; } .form .chip-btn.on{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } .form .chip-btn:not(.on):hover{ border-color:var(--ink-mid); color:var(--ink); } .form .submit{ margin-top:6px; padding:14px; background:var(--ink); color:var(--bg); border:none; border-radius:999px; font-weight:600; font-size:13px; transition:transform .2s; display:flex; align-items:center; justify-content:center; gap:10px; } .form .submit:hover{ transform:translateY(-2px); } /* ============= FOOTER ============= */ .foot{ padding: 80px var(--pad-x) 24px; border-top:1px solid var(--line); } .foot-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:start; } .foot-brand{ display:flex; flex-direction:column; gap:24px; } .foot-brand .foot-logo{ display:block; } .foot-brand .foot-logo img{ height:clamp(80px, 11vw, 140px); width:auto; display:block; } .foot-brand .tag{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(22px, 2.2vw, 30px); line-height:1.25; letter-spacing:-.01em; color:var(--ink); max-width:420px; } .foot-brand .meta{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); } .foot-links{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; padding-left:48px; border-left:1px solid var(--line); } .foot-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; margin-bottom:14px; } .foot-col ul { list-style: none; margin: 0; padding: 0; } .foot-col li { margin: 0; padding: 0; } .foot-col a{ display:block; font-size:14px; color:var(--ink-mid); padding:5px 0; transition:color .2s; } .foot-col a:hover{ color:var(--accent); } .foot-base{ margin-top:64px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-mute); flex-wrap:wrap; gap:14px; } /* reveal animations */ .reveal{ opacity:0; transform:translateY(80px); filter:blur(8px); transition:opacity 1s cubic-bezier(0.2,0.8,0.2,1), transform 1s cubic-bezier(0.2,0.8,0.2,1), filter 1s cubic-bezier(0.2,0.8,0.2,1); } .reveal.in{ opacity:1; transform:none; filter:blur(0); } @media (prefers-reduced-motion: no-preference) { @supports ((animation-timeline: view()) and (animation-range: entry)) { @keyframes reveal-scroll { 0% { opacity: 0; translate: 0 100px; scale: 0.9; filter: blur(12px); } 100% { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); } } /* Disable the legacy wrapper reveal */ .reveal { opacity: unset; transform: unset; filter: unset; transition: none; animation: none; } /* Animate individual elements as they enter the scrollport */ .section-head > div, .section-head > p, .svc, .pf, .pf-cta, .testi, .about-img-wrap, .about-text > *, .form > *, .contact > div > *, .proj-head, .gallery, .cta > div, .hero > .inner > * { animation: reveal-scroll auto cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-timeline: view(block); animation-range: entry 5% cover 30%; } } } /* ============= LIGHTBOX ============= */ .lb{ display:none; position:fixed; inset:0; z-index:5000; background:rgba(8,8,10,.96); backdrop-filter:blur(12px); align-items:center; justify-content:center; padding:24px; } .lb.open{ display:flex; } .lb img{ max-width:88vw; max-height:84vh; border-radius:8px; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.5); opacity:0; transform:scale(0.92); filter:blur(10px); transition: opacity .4s ease, transform .6s cubic-bezier(0.2,0.8,0.2,1), filter .4s ease; } .lb img.loaded{ opacity:1; transform:scale(1); filter:blur(0); } .lb-loader{ position:absolute; top:50%; left:50%; margin:-20px 0 0 -20px; width:40px; height:40px; border:3px solid rgba(255,255,255,0.1); border-top-color:var(--accent); border-radius:50%; opacity:0; transition:opacity .3s; pointer-events:none; z-index:-1; } .lb-loader.loading{ opacity:1; animation: lb-spin 1s linear infinite; } @keyframes lb-spin { to { transform: rotate(360deg); } } .lb-caption{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); } .lb-btn{ position:fixed; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--line-hi); color:var(--ink); font-size:20px; display:grid; place-items:center; transition:background .2s; } .lb-btn:hover{ background:var(--accent); color:var(--accent-ink); } .lb-prev{ left:24px; } .lb-next{ right:24px; } .lb-close{ top:24px; right:24px; transform:none; } /* ============= RESPONSIVE ============= */ @media (max-width:1100px){ .section-head{ grid-template-columns:1fr; gap:24px; } .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:280px; } .process{ grid-template-columns:repeat(2,1fr); } .process-step:nth-child(2){ border-right:none; } .pf-grid{ grid-template-columns:repeat(2,1fr); } .about{ grid-template-columns:1fr; gap:32px; } .metrics{ grid-template-columns:repeat(2,1fr); } .metric:nth-child(2){ border-right:none; } .contact{ grid-template-columns:1fr; gap:36px; } .contact-arrow::before{ content:"↓"; } .pf-cta{ grid-column: 1 / -1; aspect-ratio: auto; min-height: 240px; } } @media (max-width:760px){ .hero{ grid-template-columns:1fr; gap:32px; padding:100px var(--pad-x) 0; } .hero-left{ padding:0 0 32px; } .hero-right{ order:-1; width:100%; max-width:420px; aspect-ratio:4/5; min-height:0; max-height:65vh; margin:0 auto; border-radius:var(--radius); } .hero-right::after{ display:none; } } @media (max-width:720px){ .nav-links{ display:none; } .burger{ display:flex; z-index: 1001; } .nav-cta{ display:none; } .nav.open .nav-brand { z-index: 1001; position: relative; } .nav.open .nav-links{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; inset: 0; width: 100vw; height: 100dvh; background: rgba(15, 10, 55, 0.82); backdrop-filter: blur(60px) saturate(220%); -webkit-backdrop-filter: blur(60px) saturate(220%); border: none !important; border-radius: 0 !important; padding: 120px 20px 40px; box-sizing: border-box; z-index: 1000; gap: 12px; } .nav.open .nav-links a{ font-size:28px; padding:15px 20px; text-align:center; color:var(--ink); font-weight:400; font-family:var(--title); transition: color 0.2s; } .nav.open .nav-links a:hover{ color:var(--accent); background: none; } /* Mobile menu CTA Button */ .menu-item-mobile-cta { display: block !important; width: 100%; text-align: center; margin-top: 24px; padding: 0 20px; box-sizing: border-box; } .menu-item-mobile-cta .mobile-nav-cta { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; background: var(--accent) !important; color: var(--accent-ink) !important; height: 51px !important; padding: 0 28px !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .05em !important; text-decoration: none !important; font-family: var(--mono) !important; transition: background 0.2s, transform 0.2s, color 0.2s !important; box-shadow: 0 4px 15px rgba(0, 254, 255, 0.15); } .menu-item-mobile-cta .mobile-nav-cta:hover { background: var(--ink) !important; color: #0c0c0e !important; transform: translateY(-2px); } .menu-item-mobile-cta .mobile-nav-cta .arr { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-ink) !important; color: var(--accent) !important; font-size: 11px; transition: transform .2s; } .menu-item-mobile-cta .mobile-nav-cta:hover .arr { background: #0c0c0e !important; color: var(--ink) !important; transform: translateX(2px); } /* Hamburger transition centering */ .nav.open .burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); } .nav.open .burger span:nth-child(2){ opacity: 0; transform: scaleX(0); } .nav.open .burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); } /* Realisations Hub - Page Header alignment fix */ .page-header.page-header-flex { padding: 120px var(--pad-x) 40px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; } .page-header.page-header-flex .header-left, .page-header.page-header-flex .header-right { max-width: 100% !important; width: 100% !important; animation: hdr-in .9s cubic-bezier(.2,.8,.2,1) both; } .page-header.page-header-flex .header-stats { width: 100% !important; justify-content: space-between !important; gap: 16px !important; } .page-header.page-header-flex .hstat { flex: 1 !important; } /* Realisations Hub - Mobile Grid (Single Column) */ .cat-grid { grid-template-columns: 1fr !important; gap: 20px !important; } .cat-card.wide, .cat-card.tall, .cat-card { grid-column: auto !important; min-height: 440px !important; } .cat-card .cat-content { padding: 28px 24px !important; } .cat-card .cat-number { top: 20px !important; right: 20px !important; font-size: 64px !important; } .bento{ grid-template-columns:1fr; grid-auto-rows:auto; } .bento .svc{ grid-column:span 1; grid-row:auto; min-height:220px; } .process{ grid-template-columns:1fr; } .process-step{ border-right:none; border-bottom:1px solid var(--line); } .process-step:last-child{ border-bottom:none; } .form .row2{ grid-template-columns:1fr; } .foot-grid{ grid-template-columns:1fr; gap:48px; } .foot-links{ padding-left:0; border-left:none; padding-top:32px; border-top:1px solid var(--line); } .foot-base{ flex-direction:column; align-items:flex-start; } /* Portfolio mobile: show meta below image to prevent double-tap and overlay issues */ .pf{ aspect-ratio:auto; border:none; background:transparent; overflow:visible; display:flex; flex-direction:column; } .pf img{ aspect-ratio:4/5; border-radius:20px; } .pf .pf-meta{ position:relative; opacity:1; transform:none; padding:16px 4px 24px; color:var(--ink); } .pf::after{ display:none; } .pf .pf-cat{ color:var(--ink-mute); } .pf .pf-label{ color:var(--ink); } .pf .pf-zoom{ color:var(--accent); background:rgba(255,255,255,0.05); border:1px solid var(--line-hi); } /* Press mobile: show meta below image to prevent double-tap issues */ .press-card{ aspect-ratio:auto; border:none; background:transparent; overflow:visible; display:flex; flex-direction:column; justify-content:flex-start; } .press-card img{ position:relative; aspect-ratio:1/1; border-radius:20px; transform:none !important; } .press-card .meta{ position:relative; opacity:1; transform:none; padding:16px 4px 24px; flex-direction:row; justify-content:space-between; align-items:center; } .press-card::after{ display:none; } .press-card .corner{ top:12px; right:12px; } .press-card .meta .cat{ color:var(--ink-mute); opacity:1; margin-bottom:4px; } .press-card .meta .lbl{ color:var(--ink); font-size:16px; line-height:1.3; } .press-card .meta .arr{ color:var(--accent); background:rgba(255,255,255,0.05); border:1px solid var(--line-hi); } /* Lightbox mobile: move prev/next buttons to the bottom */ .lb-btn{ top:auto; bottom:24px; transform:none; width:48px; height:48px; } .lb-close{ top:24px; bottom:auto; right:24px; } .lb-caption{ bottom:84px; } } /* ============= INNER PAGES HERO OVERRIDE ============= */ .page-template-page-a-propos .hero, .page-template-page-brochures-magazines .hero { display: block; padding: 160px var(--pad-x) clamp(60px, 8vh, 100px); min-height: auto; } .page-template-page-a-propos .hero-bg, .page-template-page-brochures-magazines .hero-bg { -webkit-mask-image: radial-gradient(ellipse at 40% 30%, black 30%, transparent 80%); mask-image: radial-gradient(ellipse at 40% 30%, black 30%, transparent 80%); } /* ============================================ ELEMENTOR KIT OVERRIDES (Immunity) ============================================ */ body.elementor-kit-330 h1, body.elementor-kit-330 h2, body.elementor-kit-330 h3, body.elementor-kit-330 h4, body.elementor-kit-330 h5, body.elementor-kit-330 h6 { font-family: var(--title) !important; color: var(--ink) !important; } body.elementor-page h1.hero-h { color: var(--ink) !important; font-size: clamp(56px, 8.4vw, 148px) !important; font-family: var(--title) !important; } /* ============================================ */ /* ABOUT PAGE WIDGETS CSS (Migrated from HTML) */ /* ============================================ */ .hero-about{ position:relative; padding: 160px var(--pad-x) clamp(60px, 8vh, 100px); overflow:hidden; } .hero-about-bg{ position:absolute; inset:-1px; pointer-events:none; z-index:0; background-image: radial-gradient(900px 460px at 18% 10%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%), linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: auto, 96px 96px, 96px 96px; -webkit-mask-image: radial-gradient(ellipse at 40% 30%, black 30%, transparent 80%); mask-image: radial-gradient(ellipse at 40% 30%, black 30%, transparent 80%); } .hero-about > .inner{ position:relative; z-index:1; } .crumbs{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:28px; } .crumbs a{ color:var(--ink-mid); transition:color .2s; } .crumbs a:hover{ color:var(--accent); } .crumbs .sep{ width:18px; height:1px; background:var(--line-hi); } .crumbs .now{ color:var(--accent); } .hero-about .hero-about-h{ font-family:var(--title); font-weight:400; font-size:clamp(72px, 11.5vw, 200px); line-height:.85; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; } .hero-about .hero-about-h .it{ font-family:var(--serif); font-style:italic; font-weight:300; color:var(--accent); letter-spacing:-.02em; } .hero-about-sub{ margin-top:36px; display:grid; grid-template-columns: 1fr 1.1fr; gap:48px; align-items:end; } .hero-about-sub .lead{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(24px, 2.3vw, 34px); line-height:1.25; letter-spacing:-.015em; color:var(--ink); max-width:18ch; } .hero-about-sub .lead span{ color:var(--accent); font-style:normal; font-family:var(--title); } .hero-about-sub .meta{ display:flex; gap:36px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line); } .hero-about-sub .meta .k{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:8px; display:block; } .hero-about-sub .meta .v{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:22px; color:var(--ink); line-height:1.1; } .hero-about-sub .meta .v .ac{ color:var(--accent); } .story{ padding: clamp(60px, 9vh, 120px) var(--pad-x); display:grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items:start; } .story-img-wrap{ position:sticky; top:120px; padding:24px 0 0 24px; } .story-deco{ position:absolute; top:0; left:0; width:46%; aspect-ratio:1; border:1px solid var(--accent); opacity:.45; border-radius:var(--radius); pointer-events:none; } .story-img{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio: 1588/1552; background:var(--card); border:1px solid var(--line); } .story-img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(6%) contrast(1.03); } .story-tag{ position:absolute; top:18px; left:18px; z-index:2; background:rgba(15,10,55,.7); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:999px; padding:8px 14px; display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); } .story-tag .pip{ width:6px; height:6px; border-radius:50%; background:var(--accent); } .story-sign{ position:absolute; right:0; bottom:0; z-index:3; background:var(--accent); color:var(--accent-ink); padding:14px 20px; font-family:var(--title); font-size:28px; line-height:1; letter-spacing:-.01em; } .story-sign small{ display:block; font-family:var(--mono); font-weight:600; font-size:9px; letter-spacing:.18em; text-transform:uppercase; margin-top:6px; } .story-text .eyebrow{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:18px; } .story-text .eyebrow::before{ content:""; display:block; width:24px; height:1px; background:var(--accent); } .story-text .eyebrow .idx{ color:var(--accent); } .story .story-text h2{ font-family:var(--title); font-weight:400; font-size:clamp(36px, 4.2vw, 60px); line-height:.95; letter-spacing:-.015em; text-wrap:balance; } .story .story-text h2 .it{ font-family:var(--serif); font-style:italic; font-weight:300; color:var(--ink-mid); letter-spacing:-.02em; } .story .story-text h2 .ac{ color:var(--accent); } .prose{ margin-top:28px; } .prose p{ font-size:17px; line-height:1.75; color:var(--ink-mid); margin-top:18px; } .prose p:first-child{ margin-top:0; } .prose p:first-child::first-letter{ font-family:var(--title); float:left; font-size: 5.2em; line-height:.82; padding: 4px 14px 0 0; color:var(--accent); } .prose b, .prose strong{ color:var(--ink); font-weight:600; } .prose em{ font-family:var(--serif); font-style:italic; color:var(--ink); } .signature{ margin-top:36px; display:flex; align-items:center; gap:18px; padding-top:24px; border-top:1px solid var(--line); } .signature .glyph{ font-family:var(--title); font-size:42px; line-height:1; letter-spacing:-.01em; color:var(--accent); } .signature .who{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); } .signature .who b{ color:var(--ink); font-weight:600; } /* ============= QUOTE BANNER ============= */ .quote-banner{ position:relative; padding: clamp(80px, 12vh, 160px) var(--pad-x); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: radial-gradient(700px 360px at 80% 50%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%), var(--bg-2); overflow:hidden; } .quote-banner::before{ content:"“"; position:absolute; top:-60px; left:50%; transform:translateX(-50%); font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(220px, 26vw, 420px); color: color-mix(in oklab, var(--accent) 18%, transparent); line-height:1; pointer-events:none; } .quote-banner .inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:36px; max-width:var(--maxw); margin:0 auto; text-align:center; } .quote-banner blockquote{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(32px, 4.4vw, 64px); line-height:1.1; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; max-width:20ch; } .quote-banner blockquote .ac{ color:var(--accent); font-style:normal; font-family:var(--title); } .quote-banner .credit{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); display:inline-flex; align-items:center; gap:12px; } .quote-banner .credit::before{ content:""; width:36px; height:1px; background:var(--accent); display:block; } .quote-banner .credit::after{ content:""; width:36px; height:1px; background:var(--accent); display:block; } .quote-banner .credit b{ color:var(--ink); font-weight:600; } /* ============= PARCOURS TIMELINE ============= */ .parcours{ padding: clamp(80px, 12vh, 140px) var(--pad-x); } .section-head{ display:grid; grid-template-columns: 1.4fr 1fr; gap:48px; align-items:end; margin-bottom: clamp(40px, 6vh, 64px); } .section-head .eyebrow{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:18px; } .section-head .eyebrow::before{ content:""; width:24px; height:1px; background:var(--accent); display:block; } .section-head .eyebrow .idx{ color:var(--accent); } html body .section-head h2{ font-family:var(--title); font-weight:400; font-size:clamp(44px, 6vw, 90px); line-height:.88; letter-spacing:-.015em; text-wrap:balance; } html body .section-head h2 .it{ font-family:var(--serif); font-style:italic; font-weight:300; color:var(--ink-mid); } html body .section-head h2 .ac{ color:var(--accent); } .section-head .sub{ font-size:16px; line-height:1.6; color:var(--ink-mid); max-width:42ch; } .timeline{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .tl-step{ padding:32px 28px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:12px; position:relative; transition:background .25s; } .tl-step:last-child{ border-right:none; } .tl-step:hover{ background:var(--card); } .tl-step .year{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--accent); font-weight:600; } .tl-step .pip{ width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); } .tl-step .ttl{ font-family:var(--title); font-weight:400; font-size:26px; line-height:1.05; letter-spacing:-.005em; margin-top:4px; } .tl-step .ttl .it{ font-family:var(--serif); font-style:italic; font-weight:300; color:var(--ink-mid); } .tl-step .d{ font-size:14px; line-height:1.55; color:var(--ink-mid); } /* ============= PRESSE & ARCHIVES ============= */ .press{ padding: clamp(60px, 9vh, 120px) var(--pad-x); border-top:1px solid var(--line); } .press-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; grid-auto-rows: 200px; } .press-card{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--card); border:1px solid var(--line); cursor:pointer; transition:transform .4s ease, border-color .25s; } .press-card:hover{ transform:translateY(-3px); border-color:var(--line-hi); } .press-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; filter:saturate(.95) brightness(.86); } .press-card:hover img{ transform:scale(1.06); filter:saturate(1) brightness(1); } .press-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, rgba(15,10,55,.92) 100%); pointer-events:none; } .press-card .meta{ position:absolute; left:18px; right:18px; bottom:18px; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; gap:18px; } .press-card .meta .lbl{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:19px; line-height:1.2; color:var(--ink); letter-spacing:-.01em; text-wrap:balance; } .press-card .meta .cat{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px; } .press-card .meta .arr{ width:36px; height:36px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-size:14px; flex-shrink:0; } .press-card .corner{ position:absolute; top:14px; left:14px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; background:rgba(15,10,55,.6); backdrop-filter:blur(8px); padding:5px 10px; border-radius:999px; border:1px solid var(--line); color:var(--ink); } /* press grid sizing */ .press-card.w6{ grid-column:span 6; grid-row:span 2; } .press-card.w4{ grid-column:span 4; grid-row:span 2; } .press-card.w3{ grid-column:span 3; grid-row:span 2; } .press-card.w4-tall{ grid-column:span 4; grid-row:span 2; } /* ============= CTA ============= */ .cta{ padding: clamp(80px, 12vh, 140px) var(--pad-x); display:grid; grid-template-columns: 1.2fr 1fr; gap:64px; align-items:end; } .cta h2{ font-family:var(--title); font-weight:400; font-size:clamp(64px, 9vw, 148px); line-height:.84; letter-spacing:-.015em; } .cta h2 .it{ font-family:var(--serif); font-style:italic; font-weight:300; color:var(--ink-mid); } .cta h2 .ac{ color:var(--accent); } .cta .col-right{ display:flex; flex-direction:column; gap:24px; } .cta .mail{ display:inline-flex; align-items:center; gap:10px; font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(20px, 1.8vw, 28px); color:var(--accent); padding-bottom:6px; border-bottom:1px solid var(--accent); align-self:flex-start; } .cta .btns{ display:flex; gap:14px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:14px; border:none; transition:transform .3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .3s cubic-bezier(0.2, 0.8, 0.2, 1), background .2s; } .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -10px color-mix(in oklab, var(--accent) 80%, transparent), 0 0 16px 0 color-mix(in oklab, var(--accent) 30%, transparent); } .btn .arrow{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--accent-ink); color:var(--accent); font-size:11px; transition:transform .25s; } .btn:hover .arrow{ transform:translateX(3px); } /* ============= RESPONSIVE ============= */ @media (max-width:1100px){ .hero-about-sub{ grid-template-columns:1fr; gap:24px; } .story{ grid-template-columns:1fr; gap:48px; } .story-img-wrap{ position:relative; top:0; max-width:520px; } .section-head{ grid-template-columns:1fr; gap:24px; } .quote-banner .inner{ gap:24px; } .timeline{ grid-template-columns:repeat(2,1fr); } .tl-step:nth-child(2){ border-right:none; } .tl-step:nth-child(1), .tl-step:nth-child(2){ border-bottom:1px solid var(--line); } .press-grid{ grid-template-columns:repeat(6,1fr); } .press-card.w6, .press-card.w4, .press-card.w3, .press-card.w4-tall{ grid-column:span 3; grid-row:span 2; } .cta{ grid-template-columns:1fr; gap:36px; } } @media (max-width:720px){ .hero-about{ padding-top:120px; } .timeline{ grid-template-columns:1fr; } .tl-step{ border-right:none !important; border-bottom:1px solid var(--line); } .tl-step:last-child{ border-bottom:none; } .press-grid{ grid-template-columns:1fr; grid-auto-rows:240px; } .press-card.w6, .press-card.w4, .press-card.w3, .press-card.w4-tall{ grid-column:span 1; grid-row:span 1; } .prose p:first-child::first-letter{ font-size:4em; } } /* ========================================================================== MAX DESIGN GRAPHIQUE — RÉALISATIONS HUB (v1.1.20) ========================================================================== */ .page-header { position: relative; padding: 150px var(--pad-x) 72px; overflow: hidden; border-bottom: 1px solid var(--line); } .page-header.page-header-flex, .page-header:has(.header-left) { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .page-header-bg { position: absolute; inset: -1px; pointer-events: none; z-index: 0; background-image: radial-gradient(900px 400px at 50% -10%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 65%), linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: auto, 96px 96px, 96px 96px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 40%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 0%, black 40%, transparent 80%); } .page-header > * { position: relative; z-index: 1; } .header-left {} .breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 28px; } .breadcrumb a { color: var(--accent); transition: opacity .2s; } .breadcrumb a:hover { opacity: .7; } .breadcrumb .sep { opacity: .4; } .page-header h1 { font-family: var(--title); font-weight: 400; font-size: clamp(64px, 10vw, 152px); line-height: .82; letter-spacing: -.02em; animation: hdr-in .9s cubic-bezier(.2,.8,.2,1) both; } .page-header h1 .row { display: block; } .page-header h1 .ac { color: var(--accent); } @keyframes hdr-in { from { opacity: 0; transform: translateY(32px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } } .header-right { animation: hdr-in .9s .25s cubic-bezier(.2,.8,.2,1) both; max-width: 440px; } .header-right p { font-size: 17px; line-height: 1.7; color: var(--ink-mid); margin-bottom: 28px; } .header-right p em { font-family: var(--serif); font-style: italic; color: var(--ink); } .header-stats { display: flex; gap: 28px; padding-top: 24px; border-top: 1px solid var(--line); } .hstat { display: flex; flex-direction: column; gap: 4px; } .hstat .n { font-family: var(--serif); font-style: italic; font-size: 36px; line-height: 1; color: var(--accent); font-weight: 300; } .hstat .l { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); } /* ============= CATEGORIES GRID ============= */ .categories-section { padding: clamp(64px, 10vh, 120px) var(--pad-x); } .cat-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 16px; } .cat-card { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; min-height: 480px; transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .5s; text-decoration: none; color: inherit; } .cat-card:hover { transform: translateY(-8px) scale(1.01); border-color: color-mix(in oklab, var(--accent) 45%, transparent); box-shadow: 0 32px 80px -20px rgba(0,0,0,.6), 0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent); } .cat-card.wide { grid-column: 1 / -1; min-height: 420px; } .cat-card.tall { min-height: 580px; } .cat-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s; filter: grayscale(15%) brightness(.55) saturate(1.1); } .cat-card:hover .cat-bg { transform: scale(1.06); filter: grayscale(0%) brightness(.45) saturate(1.3); } .cat-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(10,6,40,.97) 0%, rgba(10,6,40,.65) 45%, rgba(10,6,40,.15) 75%, transparent 100% ); transition: background .4s; } .cat-card:hover .cat-overlay { background: linear-gradient( to top, rgba(10,6,40,.99) 0%, rgba(10,6,40,.7) 50%, rgba(10,6,40,.2) 80%, transparent 100% ); } .cat-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 65%); opacity: 0; transition: opacity .5s; } .cat-card:hover .cat-glow { opacity: 1; } .cat-content { position: relative; z-index: 2; padding: 36px 40px; display: flex; flex-direction: column; gap: 16px; } .cat-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); width: fit-content; } .cat-eyebrow .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .cat-title { font-family: var(--title); font-weight: 400; font-size: clamp(36px, 4.5vw, 62px); line-height: .88; letter-spacing: -.015em; color: var(--ink); transition: color .3s; } .cat-card.wide .cat-title { font-size: clamp(44px, 5.5vw, 80px); } .cat-card:hover .cat-title { color: #fff; } .cat-desc { font-size: 14px; line-height: 1.65; color: var(--ink-mid); max-width: 520px; opacity: 0; transform: translateY(10px); transition: opacity .4s .05s, transform .4s .05s; } .cat-card:hover .cat-desc { opacity: 1; transform: none; } .cat-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid rgba(200,205,240,.15); } .cat-count { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mid); transition: background .3s, border-color .3s, color .3s; } .cat-card:hover .cat-count { background: rgba(0,254,255,.12); border-color: rgba(0,254,255,.3); color: var(--accent); } .cat-tags { display: flex; gap: 6px; flex-wrap: wrap; } .cat-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); transition: background .3s, border-color .3s, color .3s; } .cat-card:hover .cat-tag { background: rgba(0,254,255,.06); border-color: rgba(0,254,255,.15); color: var(--accent); } .cat-arrow { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; font-size: 18px; color: var(--ink); flex-shrink: 0; transition: background .3s, border-color .3s, transform .4s cubic-bezier(.2,.8,.2,1), color .3s; } .cat-card:hover .cat-arrow { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: translateX(4px) rotate(-45deg); } .cat-number { position: absolute; top: 28px; right: 32px; z-index: 2; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 80px; line-height: 1; color: rgba(255,255,255,.06); letter-spacing: -.03em; transition: color .4s, font-size .4s; user-select: none; pointer-events: none; } .cat-card:hover .cat-number { color: rgba(0,254,255,.1); font-size: 90px; } .soon-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; } .cat-card.soon { background: rgba(38,32,122,.3); cursor: default; border-style: dashed; } .cat-card.soon:hover { transform: none; box-shadow: none; border-color: var(--line); } .cat-card.soon .cat-bg { display: none; } .cat-card.soon .cat-overlay { display: none; } .cat-card.soon .cat-content { justify-content: center; align-items: center; text-align: center; height: 100%; } .cat-card.soon .cat-title { font-size: clamp(24px, 3vw, 40px); color: var(--ink-mute); } .cat-card.soon .cat-desc { opacity: 1; transform: none; text-align: center; color: var(--ink-mute); } .cta-section { padding: clamp(72px, 10vh, 120px) var(--pad-x); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; max-width: var(--maxw); margin: 0 auto; } .cta-section h2 { font-family: var(--title); font-weight: 400; font-size: clamp(40px, 5vw, 76px); line-height: .9; letter-spacing: -.015em; } .cta-section h2 .it { color: var(--ink-mute); } .cta-section h2 .ac { color: var(--accent); } .cta-section .sub { margin-top: 16px; font-size: 16px; color: var(--ink-mid); max-width: 520px; line-height: 1.6; } /* ========================================================================== MAX DESIGN GRAPHIQUE — CATEGORY PAGES (print, digital, identity, goodies) ========================================================================== */ .page-header-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: end; } .page-header h1 .it { color: var(--ink-mute); font-size: .6em; } .sub-block { display: flex; flex-direction: column; gap: 24px; animation: hdr-in .9s .2s cubic-bezier(.2,.8,.2,1) both; } .lead { font-size: 16px; line-height: 1.75; color: var(--ink-mid); max-width: 500px; } .lead em { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 1.05em; } .pills { display: flex; flex-wrap: wrap; gap: 8px; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(0,254,255,.08); border: 1px solid rgba(0,254,255,.2); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .stats-row { display: flex; gap: 32px; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); } .stat { display: flex; flex-direction: column; gap: 4px; } .stat .n { font-family: var(--serif); font-style: italic; font-size: 38px; line-height: 1; color: var(--accent); font-weight: 300; } .stat .l { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); } /* ============= FILTER BAR ============= */ .filter-bar { padding: 48px var(--pad-x) 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .filter-btn { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-mid); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: all .25s; cursor: pointer; } .filter-btn:hover { border-color: var(--line-hi); color: var(--ink); } .filter-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .filter-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: .1em; } /* ============= GALLERY MASONRY ============= */ .gallery-section { padding: clamp(40px,6vh,72px) var(--pad-x) clamp(80px,12vh,140px); } .gallery-grid { columns: 3; column-gap: 14px; max-width: var(--maxw); margin: 0 auto; } @media(min-width:901px) { .gallery-grid.cols-1 { columns: 1; } .gallery-grid.cols-2 { columns: 2; } .gallery-grid.cols-3 { columns: 3; } } .gallery-grid .pf { break-inside: avoid; margin-bottom: 14px; position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer; border: 1px solid var(--line); transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s; background: var(--card); } .gallery-grid .pf:hover { transform: translateY(-6px); border-color: color-mix(in oklab, var(--accent) 35%, transparent); box-shadow: 0 16px 48px -12px rgba(0,0,0,.5), 0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent); } .gallery-grid .pf img { width: 100%; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .gallery-grid .pf:hover img { transform: scale(1.04); } .gallery-grid .pf-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,6,40,.88) 0%, rgba(10,6,40,.08) 55%, transparent 100%); opacity: 0; transition: opacity .35s; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; } .gallery-grid .pf:hover .pf-overlay { opacity: 1; } .gallery-grid .pf-client { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 500; } .gallery-grid .pf-type { font-size: 13px; color: var(--ink-mid); } .gallery-grid .pf-zoom { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); display: grid; place-items: center; font-size: 14px; color: var(--ink); opacity: 0; transition: opacity .25s, transform .25s; transform: scale(.8); } .gallery-grid .pf:hover .pf-zoom { opacity: 1; transform: scale(1); } /* ============= SERVICES GRID ============= */ .services-section { padding: clamp(80px, 10vh, 120px) var(--pad-x); background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-h { font-family: var(--title); font-weight: 400; font-size: clamp(44px, 6.5vw, 96px); line-height: .86; letter-spacing: -.015em; text-wrap: balance; } .section-h .it { color: var(--ink-mute); } .section-h .ac { color: var(--accent); } .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(40px, 6vh, 72px); } .svc-card { background: rgba(38, 32, 122, 0.35); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, background .4s; position: relative; overflow: hidden; } .svc-card::before { content: ""; position: absolute; inset: auto -40% -40% auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 28%, transparent), transparent 65%); opacity: 0; transition: opacity .4s; z-index: 0; } .svc-card:hover { transform: translateY(-5px); border-color: rgba(0, 254, 255, 0.2); background: rgba(46, 40, 135, 0.5); } .svc-card:hover::before { opacity: 1; } .svc-card > * { position: relative; z-index: 1; } .svc-icon { font-size: 32px; line-height: 1; } .svc-title { font-family: var(--title); font-weight: 400; font-size: 22px; color: var(--ink); line-height: 1.2; } .svc-title .it, .svc-title em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--ink-mid); } .svc-desc { font-size: 13px; line-height: 1.65; color: var(--ink-mid); } .svc-list { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); } .svc-list li { list-style: none; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); display: flex; align-items: center; gap: 8px; } .svc-list li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } /* ============= PLATFORM BENTO ============= */ .platforms-section { padding: clamp(80px,10vh,120px) var(--pad-x); background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .platform-bento { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; margin-top: clamp(40px,6vh,72px); } .pf-card { background: rgba(38,32,122,.35); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 14px; transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, background .4s; position: relative; overflow: hidden; } .pf-card::before { content: ""; position: absolute; inset: auto -30% -30% auto; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab,var(--accent) 25%,transparent), transparent 65%); opacity: 0; transition: opacity .4s; z-index: 0; } .pf-card:hover { transform: translateY(-4px); border-color: rgba(0,254,255,.2); background: rgba(46,40,135,.5); } .pf-card:hover::before { opacity: 1; } .pf-card > * { position: relative; z-index: 1; } .pf-card.featured { grid-column: 1; grid-row: 1 / 3; justify-content: flex-end; } .pf-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 12px; transition: transform 0.3s ease; } .pf-icon svg { width: 32px; height: 32px; display: block; } .pf-card.featured .pf-icon { width: 64px; height: 64px; margin-bottom: auto; } .pf-card.featured .pf-icon svg { width: 44px; height: 44px; } .pf-card:hover .pf-icon { transform: scale(1.08); } .pf-title { font-family: var(--title); font-weight: 400; font-size: 24px; color: var(--ink); line-height: 1.15; } .pf-card.featured .pf-title { font-size: 32px; } .pf-desc { font-size: 13px; line-height: 1.65; color: var(--ink-mid); } .pf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .pf-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(0,254,255,.07); border: 1px solid rgba(0,254,255,.15); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .pf-badge { position: absolute; top: 16px; left: 16px; padding: 4px 10px; border-radius: 999px; background: rgba(0,254,255,.15); backdrop-filter: blur(8px); border: 1px solid rgba(0,254,255,.25); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } /* ============= CTA BAND ============= */ .cta-wrap { padding: 0 var(--pad-x); } .cta-band { padding: clamp(80px, 10vh, 120px) 0; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; border-bottom: 1px solid var(--line); max-width: var(--maxw); margin: 0 auto; } .cta-band .left h2 { font-family: var(--title); font-weight: 400; font-size: clamp(40px, 5vw, 76px); line-height: .9; letter-spacing: -.015em; } .cta-band .left h2 .it { color: var(--ink-mute); } .cta-band .left h2 .ac { color: var(--accent); } .cta-band .left .sub { margin-top: 16px; font-size: 16px; color: var(--ink-mid); max-width: 520px; line-height: 1.6; } @media(max-width:1100px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .platform-bento { grid-template-columns: 1fr 1fr; } .pf-card.featured { grid-column: 1 / -1; grid-row: auto; } } @media(max-width:900px) { .page-header-inner { grid-template-columns: 1fr; gap: 32px; } .cta-band { grid-template-columns: 1fr; text-align: center; } .gallery-grid { columns: 2; } .techniques-layout { grid-template-columns: 1fr !important; gap: 40px !important; } } @media(max-width:600px) { .gallery-grid { columns: 1; } .services-grid { grid-template-columns: 1fr; } .platform-bento { grid-template-columns: 1fr; } } /* ========================================================================== MAX DESIGN GRAPHIQUE — CATEGORY PROCESS GRID ========================================================================== */ .category-process { padding: clamp(80px, 10vh, 120px) var(--pad-x); background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .process-inner { max-width: var(--maxw); margin: 0 auto; } .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(40px, 6vh, 72px); } .proc-card { background: rgba(38, 32, 122, 0.35); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 16px; transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, background .4s; } .proc-card:hover { transform: translateY(-4px); border-color: rgba(0, 254, 255, 0.2); background: rgba(46, 40, 135, 0.5); } .proc-num { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .proc-icon { font-size: 36px; line-height: 1; } .proc-title { font-family: var(--title); font-weight: 400; font-size: 26px; color: var(--ink); line-height: 1.2; } .proc-title .it, .proc-title em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--ink-mid); } .proc-desc { font-size: 14px; line-height: 1.65; color: var(--ink-mid); } .proc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; } .proc-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(0, 254, 255, 0.07); border: 1px solid rgba(0, 254, 255, 0.15); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } @media(max-width:900px) { .process-grid { grid-template-columns: 1fr 1fr; } } @media(max-width:600px) { .process-grid { grid-template-columns: 1fr; } } /* ========================================================================== MAX DESIGN GRAPHIQUE — DEDICATED CONTACT PAGE LAYOUT ========================================================================== */ .contact-page-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } /* ======= LEFT PANEL ======= */ .left-panel { position: relative; min-height: 70vh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(120px + clamp(16px, 3vh, 32px)) var(--pad-x) clamp(48px, 7vh, 80px); } /* animated bg */ .left-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 80% 60% at 20% 110%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 65%), radial-gradient(ellipse 60% 50% at 80% -10%, color-mix(in oklab, #0033cc 20%, transparent), transparent 60%), linear-gradient(160deg, #1b1464 0%, #130e52 100%); } /* grid pattern */ .left-bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(200, 205, 240, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(200, 205, 240, .07) 1px, transparent 1px); background-size: 64px 64px; } /* floating circles deco */ .left-bg::after { content: ""; position: absolute; width: 500px; height: 500px; border-radius: 50%; border: 1px solid rgba(0, 254, 255, .06); top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 80px rgba(0, 254, 255, .025), 0 0 0 160px rgba(0, 254, 255, .012), 0 0 0 240px rgba(0, 254, 255, .006); animation: breathe 8s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .8; } 50% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; } } .left-content { position: relative; z-index: 1; } .left-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px; } .left-eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--accent); } .left-title { font-family: var(--title); font-weight: 400; font-size: clamp(56px, 7vw, 110px); line-height: .82; letter-spacing: -.02em; margin-bottom: 36px; animation: hdr-in .9s cubic-bezier(.2, .8, .2, 1) both; } .left-title .ac { color: var(--accent); } .left-title .it { display: block; color: var(--ink-mute); font-size: .58em; } .left-desc { font-size: 15px; line-height: 1.75; color: var(--ink-mid); max-width: 420px; margin-bottom: 48px; animation: hdr-in .9s .15s cubic-bezier(.2, .8, .2, 1) both; } .left-desc em { font-family: var(--serif); font-style: italic; color: var(--ink); } /* Contact info blocks */ .contact-infos { display: flex; flex-direction: column; gap: 12px; animation: hdr-in .9s .3s cubic-bezier(.2, .8, .2, 1) both; } .info-block { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: var(--radius); transition: background .3s, border-color .3s, transform .3s; text-decoration: none; color: inherit; } .info-block:hover { background: rgba(0, 254, 255, .06); border-color: rgba(0, 254, 255, .2); transform: translateX(6px); } .info-icon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; background: rgba(0, 254, 255, .08); border: 1px solid rgba(0, 254, 255, .15); display: grid; place-items: center; font-size: 18px; } .info-label { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px; } .info-value { font-size: 14px; color: var(--ink); font-weight: 500; } /* Social links row */ .social-row { display: flex; gap: 10px; margin-top: 32px; animation: hdr-in .9s .4s cubic-bezier(.2, .8, .2, 1) both; } .social-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mid); transition: background .25s, border-color .25s, color .25s, transform .3s; text-decoration: none; } .social-btn:hover { background: rgba(0, 254, 255, .08); border-color: rgba(0, 254, 255, .3); color: var(--accent); transform: translateY(-3px); } .social-btn .s-icon { font-size: 14px; } /* availability badge */ .avail-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .2); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #4ade80; margin-bottom: 28px; animation: hdr-in .9s .05s cubic-bezier(.2, .8, .2, 1) both; width: fit-content; } .avail-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: pulse 2s infinite; } /* ======= RIGHT PANEL — FORM ======= */ .right-panel { padding: calc(80px + clamp(32px, 6vh, 64px)) clamp(32px, 5vw, 80px) clamp(48px, 8vh, 96px); display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); background: rgba(15, 10, 55, .15); } .form-header { margin-bottom: 48px; } .form-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .form-eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--ink-mute); } .form-title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 3.5vw, 48px); line-height: 1.1; color: var(--ink); } .form-title span { color: var(--accent); } /* Form */ .form { display: flex; flex-direction: column; gap: 20px; } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); display: flex; align-items: center; gap: 8px; } .field label .req { color: var(--accent); font-size: 14px; line-height: 1; } .field input, .field textarea, .field select { width: 100%; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px; font-family: var(--sans); font-size: 14px; color: var(--ink); outline: none; transition: border-color .25s, background .25s, box-shadow .25s; -webkit-appearance: none; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); } .field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(0, 254, 255, .45); background: rgba(0, 254, 255, .04); box-shadow: 0 0 0 4px rgba(0, 254, 255, .08); } .field textarea { resize: vertical; min-height: 130px; line-height: 1.6; } .field select { cursor: pointer; } .field select option { background: #1b1464; color: var(--ink); } /* two-col fields */ .fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Submit */ .form-submit { margin-top: 8px; } .submit-btn { width: 100%; padding: 18px 32px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .02em; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, background .2s; position: relative; overflow: hidden; } .submit-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .15) 50%, transparent 100%); transform: translateX(-100%); transition: transform .6s; } .submit-btn:hover::before { transform: translateX(100%); } .submit-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 48px -12px color-mix(in oklab, var(--accent) 70%, transparent); } .submit-btn:active { transform: translateY(-1px); } .submit-arrow { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-ink); color: var(--accent); display: grid; place-items: center; font-size: 13px; transition: transform .3s; flex-shrink: 0; } .submit-btn:hover .submit-arrow { transform: translateX(4px); } /* form note */ .form-note { margin-top: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-mute); text-align: center; line-height: 1.7; } .form-note a { color: var(--accent); border-bottom: 1px solid rgba(0, 254, 255, .3); } /* ======= SUCCESS STATE ======= */ .success-state { display: none; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: 48px 32px; background: rgba(0, 254, 255, .04); border: 1px solid rgba(0, 254, 255, .15); border-radius: 20px; animation: hdr-in .6s cubic-bezier(.2, .8, .2, 1) both; } .success-state.show { display: flex; } .success-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(0, 254, 255, .1); border: 1px solid rgba(0, 254, 255, .25); display: grid; place-items: center; font-size: 32px; } .success-title { font-family: var(--title); font-weight: 400; font-size: 40px; line-height: .9; letter-spacing: -.015em; } .success-title .ac { color: var(--accent); } .success-desc { font-size: 15px; color: var(--ink-mid); line-height: 1.7; max-width: 360px; } /* ======= RESPONSIVE ======= */ @media(max-width: 960px) { .contact-page-split { grid-template-columns: 1fr; } .left-panel { position: relative; height: auto; min-height: 0; padding-top: calc(80px + 40px); } .right-panel { border-left: none; border-top: 1px solid var(--line); } .left-bg::after { display: none; } .social-row { flex-wrap: wrap; } } @media(max-width: 768px) { .fields-row { grid-template-columns: 1fr; } .left-panel { padding: calc(90px + 20px) 20px 32px; } .right-panel { padding: 40px 20px 48px; } .left-title { font-size: clamp(38px, 10vw, 56px); margin-bottom: 24px; } .form-title { font-size: clamp(24px, 7vw, 32px); } .left-desc { font-size: 14px; margin-bottom: 32px; } .form-header { margin-bottom: 32px; } .avail-badge { font-size: 9px; padding: 6px 12px; margin-bottom: 20px; } .left-eyebrow, .form-eyebrow { font-size: 9px; } } /* ========================================================================== MAX DESIGN GRAPHIQUE — TECHNIQUES & PRODUCTS SECTION (v1.1.35) ========================================================================== */ .techniques-section { padding: clamp(64px, 10vh, 120px) var(--pad-x); border-top: 1px solid var(--line); } .techniques-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: clamp(48px, 7vh, 80px); } .techniques-list { display: flex; flex-direction: column; gap: 16px; } .tech-card { background: rgba(38, 32, 122, 0.35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); padding: 24px 28px; display: flex; gap: 20px; align-items: flex-start; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, background 0.35s; position: relative; overflow: hidden; } .tech-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 4%, transparent), transparent 60%); opacity: 0; transition: opacity 0.35s; z-index: 0; } .tech-card:hover { transform: translateX(6px); border-color: rgba(0, 254, 255, 0.2); background: rgba(46, 40, 135, 0.5); } .tech-card:hover::after { opacity: 1; } .tech-card > * { position: relative; z-index: 1; } .tech-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 12px; flex-shrink: 0; border-radius: 10px; background: rgba(0, 254, 255, 0.08); border: 1px solid rgba(0, 254, 255, 0.15); transition: transform 0.3s ease; } .tech-icon svg { width: 26px; height: 26px; display: block; } .tech-card:hover .tech-icon { transform: scale(1.08); } .tech-body { flex: 1; } .tech-title { font-family: var(--title); font-weight: 400; font-size: 20px; color: var(--ink); line-height: 1.2; margin-bottom: 6px; } .tech-desc { font-size: 13px; line-height: 1.6; color: var(--ink-mid); } .tech-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .tech-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(0, 254, 255, 0.07); border: 1px solid rgba(0, 254, 255, 0.15); font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } /* products column */ .products-column { display: flex; flex-direction: column; gap: 32px; } .product-group h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .product-group h4::after { content: ""; flex: 1; height: 1px; background: var(--line); } .product-items { display: flex; flex-wrap: wrap; gap: 8px; } .product-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); font-size: 13px; color: var(--ink-mid); transition: border-color 0.2s, color 0.2s, background 0.2s; } .product-item:hover { border-color: var(--line-hi); color: var(--ink); background: rgba(255, 255, 255, 0.05); } .product-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } /* ============================================ LEGAL PAGES — Politique de confidentialité, Mentions légales & CGV ============================================ */ /* --- Page Layout --- */ .legal-page-wrap { max-width: calc(800px + var(--pad-x) * 2); margin: 0 auto; padding: 140px var(--pad-x) 100px; } /* --- Page Header --- */ .legal-page-header { margin-bottom: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--line); } /* --- Breadcrumb --- */ .legal-page-wrap .breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 24px; } .legal-page-wrap .breadcrumb a { color: var(--accent); text-decoration: none; border-bottom: none; } .legal-page-wrap .breadcrumb .sep { opacity: .4; } /* --- Page Title (reuses global .page-title) --- */ .legal-page-wrap .page-title { font-family: var(--title); font-weight: 400; font-size: clamp(40px, 7vw, 86px); line-height: .85; letter-spacing: -.02em; margin-bottom: 24px; color: var(--ink); } .legal-page-wrap .page-title .ac { color: var(--accent); } /* --- Meta Pills --- */ .legal-page-wrap .page-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .legal-page-wrap .meta-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(0,254,255,.06); border: 1px solid rgba(0,254,255,.15); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .legal-page-wrap .meta-pill::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } /* --- Table of Contents --- */ .legal-page-wrap .toc { background: rgba(38,32,122,.35); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; margin-bottom: 48px; } .legal-page-wrap .toc-title { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .legal-page-wrap .toc-title::before { content: ""; width: 14px; height: 1px; background: var(--accent); } .legal-page-wrap .toc-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .legal-page-wrap .toc-list li a { font-size: 14px; color: var(--ink-mid); text-decoration: none; border-bottom: none; display: flex; align-items: center; gap: 10px; transition: color .2s; } .legal-page-wrap .toc-list li a:hover { color: var(--accent); } .legal-page-wrap .toc-list li a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-mute); flex-shrink: 0; transition: background .2s; } .legal-page-wrap .toc-list li a:hover::before { background: var(--accent); } /* --- Legal Tabs (Mentions légales / CGV) --- */ .legal-tabs { display: flex; gap: 8px; margin-bottom: 48px; padding: 12px 0; border-bottom: 1px solid var(--line); } .legal-tab { padding: 9px 20px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); cursor: pointer; transition: all .25s; } .legal-tab:hover { border-color: var(--line-hi); color: var(--ink); } .legal-tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* --- Legal Sections (tab content) --- */ .legal-section { display: none; } .legal-section.show { display: block; } /* --- Section Title (within tabs) --- */ .legal-page-wrap .section-title { font-family: var(--title); font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: .88; letter-spacing: -.015em; color: var(--ink); margin-bottom: 40px; } .legal-page-wrap .section-title .ac { color: var(--accent); } /* --- Clause Blocks --- */ .legal-page-wrap .clause { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; } .legal-page-wrap .clause:last-child { border-bottom: none; } .legal-page-wrap .clause-num { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; } .legal-page-wrap .clause-num::before { content: ""; width: 16px; height: 1px; background: var(--accent); } .legal-page-wrap .clause-title { font-family: var(--title); font-style: normal; font-weight: 400; font-size: 24px; color: var(--ink); margin-bottom: 16px; line-height: 1.2; } .legal-page-wrap .clause p { font-size: 15px; line-height: 1.75; color: var(--ink-mid); margin-bottom: 12px; } .legal-page-wrap .clause p:last-child { margin-bottom: 0; } .legal-page-wrap .clause ul { margin: 10px 0 12px 20px; } .legal-page-wrap .clause ul li { font-size: 15px; line-height: 1.75; color: var(--ink-mid); margin-bottom: 6px; } .legal-page-wrap .clause .ref { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); font-style: normal; } /* --- Tables --- */ .legal-page-wrap .clause table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; } .legal-page-wrap .clause table th { text-align: left; padding: 10px 14px; background: rgba(38,32,122,.6); color: var(--ink); font-weight: 500; border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } .legal-page-wrap .clause table td { padding: 10px 14px; color: var(--ink-mid); border: 1px solid var(--line); vertical-align: top; line-height: 1.5; } .legal-page-wrap .clause table tr:hover td { background: rgba(255,255,255,.02); } /* --- Highlight & Warning Boxes --- */ .legal-page-wrap .highlight { padding: 18px 22px; border-radius: 10px; background: rgba(0,254,255,.06); border: 1px solid rgba(0,254,255,.15); font-size: 14px; color: var(--ink-mid); line-height: 1.65; margin: 16px 0; } .legal-page-wrap .highlight strong { color: var(--ink); } .legal-page-wrap .highlight a { color: var(--accent); } .legal-page-wrap .warn { padding: 18px 22px; border-radius: 10px; background: rgba(250,200,0,.05); border: 1px solid rgba(250,200,0,.2); font-size: 14px; color: var(--ink-mid); line-height: 1.65; margin: 16px 0; } .legal-page-wrap .warn strong { color: #fbbf24; } /* --- Info Grid (Mentions légales cards) --- */ .legal-page-wrap .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; } .legal-page-wrap .info-card { padding: 18px 22px; border-radius: var(--radius); background: rgba(38,32,122,.4); border: 1px solid var(--line); } .legal-page-wrap .info-card .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; } .legal-page-wrap .info-card .val { font-size: 14px; color: var(--ink); line-height: 1.5; } .legal-page-wrap .info-card .val a { font-size: 14px; color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(0,254,255,.3); } /* --- Rights Grid (RGPD user rights) --- */ .legal-page-wrap .rights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; } .legal-page-wrap .right-card { padding: 16px 20px; border-radius: var(--radius); background: rgba(38,32,122,.4); border: 1px solid var(--line); transition: border-color .2s, background .2s; } .legal-page-wrap .right-card:hover { border-color: var(--line-hi); background: rgba(38,32,122,.55); } .legal-page-wrap .right-card .right-card-icon { margin-bottom: 10px; } .legal-page-wrap .right-card .right-card-icon svg { transition: transform .2s; } .legal-page-wrap .right-card:hover .right-card-icon svg { transform: scale(1.08); } .legal-page-wrap .right-card .r-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; } .legal-page-wrap .right-card .r-desc { font-size: 12px; color: var(--ink-mute); line-height: 1.5; } /* --- Legal pages: link styling --- */ .legal-page-wrap a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(0,254,255,.3); transition: opacity .2s; } .legal-page-wrap a:hover { opacity: .75; } /* --- Legal pages: Mobile Responsive --- */ @media (max-width: 600px) { .legal-page-wrap { padding: 120px var(--pad-x) 60px; } .legal-page-wrap .rights-grid { grid-template-columns: 1fr; } .legal-page-wrap .info-grid { grid-template-columns: 1fr; } .legal-page-wrap .clause table { display: block; overflow-x: auto; } .legal-tabs { flex-wrap: wrap; } .legal-page-wrap .page-title { font-size: clamp(32px, 10vw, 60px); } .legal-page-wrap .section-title { font-size: clamp(28px, 8vw, 48px); } .legal-page-wrap .clause-title { font-size: 20px; } } /* ============================================ BROCHURES & MAGAZINES — Portfolio Project Pages (also used by other category detail pages) ============================================ */ /* --- Hero --- */ .hero { position: relative; padding: 160px var(--pad-x) clamp(60px, 8vh, 100px); overflow: hidden; } .hero-bg { position: absolute; inset: -1px; pointer-events: none; z-index: 0; background-image: radial-gradient(900px 460px at 80% 10%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%), linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: auto, 96px 96px, 96px 96px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%); } .hero > .inner { position: relative; z-index: 1; } /* --- Breadcrumbs --- */ .crumbs { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 28px; } .crumbs a { color: var(--ink-mid); transition: color .2s; } .crumbs a:hover { color: var(--accent); } .crumbs .sep { width: 18px; height: 1px; background: var(--line-hi); } .crumbs .now { color: var(--accent); } /* --- Hero Title --- */ .hero-h { font-family: var(--title); font-weight: 400; font-size: clamp(64px, 10.5vw, 180px); line-height: .85; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; } .hero-h .it { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--ink-mid); letter-spacing: -.02em; } .hero-h .ac { color: var(--accent); } /* --- Hero Subtitle / Summary --- */ .hero-sub { margin-top: 36px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; } .hero-sub .lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; color: var(--ink-mid); max-width: 48ch; } .hero-sub .lead b { color: var(--ink); font-weight: 600; } .hero-sub .summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); padding-top: 18px; } .hero-sub .summary .cell { padding-right: 18px; border-right: 1px solid var(--line); } .hero-sub .summary .cell:last-child { border-right: none; } .hero-sub .summary .k { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; } .hero-sub .summary .v { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 24px; line-height: 1.05; color: var(--ink); letter-spacing: -.01em; } .hero-sub .summary .v .ac { color: var(--accent); font-style: normal; font-family: var(--title); } /* --- Project Section --- */ .project { padding: clamp(80px, 12vh, 140px) var(--pad-x); border-top: 1px solid var(--line); } .project + .project { padding-top: clamp(60px, 8vh, 100px); } .proj-head { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: end; margin-bottom: clamp(40px, 6vh, 64px); } .proj-idx { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 600; display: flex; flex-direction: column; gap: 8px; align-self: flex-end; padding-bottom: 8px; } .proj-idx .n { font-family: var(--title); font-weight: 400; font-size: clamp(56px, 7vw, 88px); line-height: .8; color: var(--accent); letter-spacing: -.02em; } .proj-h { font-family: var(--title); font-weight: 400; font-size: clamp(40px, 5.6vw, 84px); line-height: .92; letter-spacing: -.015em; text-wrap: balance; } .proj-h .it { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--ink-mid); } .proj-meta { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; padding-bottom: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .proj-meta .tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02); color: var(--ink-mid); } .proj-meta .tag .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* --- Gallery --- */ .gallery { display: grid; gap: 14px; } .gallery.count-3 { grid-template-columns: 1.4fr 1fr; grid-auto-rows: minmax(280px, auto); } .gallery.count-3 > .pic:nth-child(1) { grid-row: span 2; } .gallery.count-4 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(360px, 1fr); } .pic { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); cursor: zoom-in; transition: transform .35s ease, border-color .25s; aspect-ratio: 16/11; } .gallery.count-3 > .pic:nth-child(1) { aspect-ratio: auto; } .pic:hover { transform: translateY(-3px); border-color: var(--line-hi); } .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; filter: saturate(.96) brightness(.92); } .pic:hover img { transform: scale(1.04); filter: saturate(1) brightness(1); } .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15,10,55,.7) 100%); opacity: 0; transition: opacity .35s; pointer-events: none; } .pic:hover::after { opacity: 1; } .pic .corner { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: rgba(15,10,55,.65); backdrop-filter: blur(8px); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); } .pic .zoom { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 15px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; } .pic:hover .zoom { opacity: 1; transform: none; } /* --- Ticker Strip --- */ .ticker-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); overflow: hidden; padding: 18px 0; } .ticker-track { display: flex; gap: 32px; width: max-content; animation: track 38s linear infinite; } .ticker-item { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-weight: 500; font-size: clamp(12px, 1.4vw, 16px); line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .ticker-item.muted { color: var(--ink-mute); } .ticker-item .glyph { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } @keyframes track { to { transform: translateX(-50%); } } /* --- CTA Section --- */ .cta { padding: clamp(80px, 12vh, 140px) var(--pad-x); display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: end; border-top: 1px solid var(--line); } .cta h2 { font-family: var(--title); font-weight: 400; font-size: clamp(56px, 8vw, 132px); line-height: .84; letter-spacing: -.015em; } .cta h2 .it { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--ink-mid); } .cta h2 .ac { color: var(--accent); } .cta .col-right { display: flex; flex-direction: column; gap: 24px; } .cta .mail { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(20px, 1.8vw, 28px); color: var(--accent); padding-bottom: 6px; border-bottom: 1px solid var(--accent); align-self: flex-start; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 14px; border: none; transition: transform .3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .3s cubic-bezier(0.2, 0.8, 0.2, 1), background .2s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -10px color-mix(in oklab, var(--accent) 80%, transparent), 0 0 16px 0 color-mix(in oklab, var(--accent) 30%, transparent); } .btn .arrow { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-ink); color: var(--accent); font-size: 11px; transition: transform .25s; } .btn:hover .arrow { transform: translateX(3px); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-hi); } .btn-ghost:hover { background: rgba(255,255,255,.04); border-color: var(--ink); } .btn-ghost .arrow { background: var(--ink); color: var(--bg); } .cta .btns { display: flex; gap: 14px; flex-wrap: wrap; } /* --- Brochures Responsive --- */ @media (max-width: 1100px) { .hero-sub { grid-template-columns: 1fr; gap: 24px; } .proj-head { grid-template-columns: 1fr; gap: 18px; align-items: flex-start; } .proj-meta { flex-direction: row; align-items: center; align-self: flex-start; } .gallery.count-3 { grid-template-columns: 1fr 1fr; } .gallery.count-3 > .pic:nth-child(1) { grid-row: auto; grid-column: span 2; aspect-ratio: 16/9; } .cta { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 720px) { .hero { padding-top: 120px; } .hero-sub .summary { grid-template-columns: 1fr; gap: 0; } .hero-sub .summary .cell { border-right: none; border-bottom: 1px solid var(--line); padding: 14px 0; } .hero-sub .summary .cell:last-child { border-bottom: none; } .gallery.count-3, .gallery.count-4 { grid-template-columns: 1fr; } .gallery.count-3 > .pic:nth-child(1) { grid-column: auto; } }