/* ================================================================ TRENDY COLORS — Stylesheet Global Design system: High-Fashion Editorial / Digital Curator ================================================================ */ /* ---- Google Fonts ---- */ /* Fonts are loaded from the HTML to avoid render-blocking @import. */ /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background-color: var(--c-bg); color: var(--c-text); font-family: var(--font-body); font-weight: 300; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; font-weight: 300; } input, textarea, select { font-family: inherit; font-weight: 300; } ::selection { background-color: var(--c-dark); color: var(--c-white); } /* ================================================================ CSS CUSTOM PROPERTIES ================================================================ */ :root { /* Colors */ --c-bg: #E3E5E7; --c-surface: #F0F2F4; --c-surface-alt: #E8EBEE; --c-surface-dark: #1C1C19; --c-dark: #0A0A0A; --c-text: #1C1C19; --c-text-muted: #5F646B; --c-text-hint: #7A8088; --c-white: #FFFFFF; --c-border: rgba(10,10,10,0.12); --c-border-light: rgba(255,255,255,0.15); /* Typography */ --font-display: 'Bebas Neue', sans-serif; --font-body: 'Inter', sans-serif; /* Layout */ --nav-height: 84px; --container: 1200px; --gutter: 1.5rem; --section-v: 6rem; --section-v-lg: 9rem; /* UI */ --radius: 20px; --radius-sm: 6px; --radius-xs: 8px; --transition: 0.3s ease; --shadow: 0 20px 40px rgba(10,10,10,0.05); --shadow-md: 0 8px 24px rgba(10,10,10,0.10); } /* ================================================================ UTILITIES ================================================================ */ .container { width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section-label { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-text-hint); display: block; margin-bottom: 1rem; } .section-title { font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; color: var(--c-text); margin-bottom: 1.5rem; } .section-subtitle { font-size: 1rem; font-weight: 300; color: var(--c-text-muted); max-width: 520px; line-height: 1.7; } .text-center { text-align: center; } .text-center .section-subtitle { margin-left: auto; margin-right: auto; } /* ================================================================ BUTTONS ================================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.75rem; font-size: 0.8125rem; font-weight: 300; letter-spacing: 0.04em; border-radius: 100px; transition: all var(--transition); cursor: pointer; white-space: nowrap; font-family: var(--font-body); } .btn-primary { background-color: var(--c-dark); color: var(--c-white); border: 1px solid var(--c-dark); } .btn-primary:hover { background-color: #222; border-color: #222; } .btn-outline-white { background-color: transparent; color: var(--c-white); border: 1px solid rgba(255,255,255,0.35); } .btn-outline-white:hover { background-color: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); } .btn-outline-dark { background-color: transparent; color: var(--c-dark); border: 1px solid var(--c-dark); } .btn-outline-dark:hover { background-color: var(--c-dark); color: var(--c-white); } .btn-white { background-color: var(--c-white); color: var(--c-dark); border: 1px solid var(--c-white); } .btn-white:hover { background-color: var(--c-bg); border-color: var(--c-bg); } /* ================================================================ SCROLL REVEAL ANIMATION ================================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ================================================================ NAVBAR ================================================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease; background-color: rgba(10,10,10,0.76); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,0.08); } .navbar.scrolled { background-color: rgba(10,10,10,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(255,255,255,0.06); } .navbar-logo { display: flex; align-items: center; flex-shrink: 0; min-width: 0; } .navbar-logo img { height: 40px; width: auto; display: block; } @media (min-width: 768px) { .navbar-logo img { height: 50px; } } .navbar-center { display: none; align-items: center; gap: 2.5rem; } .nav-link { font-size: 0.73rem; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.82); transition: color var(--transition); position: relative; padding-bottom: 2px; } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background-color: var(--c-white); transform: scaleX(0); transition: transform var(--transition); } .nav-link:hover, .nav-link.active { color: var(--c-white); } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } .navbar-right { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; } @media (max-width: 767px) { .navbar-right { gap: 0.75rem; } .navbar-right .lang-switch { display: none; } .footer-logo img { height: 30px; } } /* Language switch */ .lang-switch { display: flex; align-items: center; gap: 0.35rem; } .lang-btn { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.68); transition: color var(--transition); cursor: pointer; background: none; border: none; padding: 2px 0; font-family: var(--font-body); } .lang-btn.active { color: #C8F000; } .lang-btn:hover { color: rgba(255,255,255,0.8); } .lang-sep { color: rgba(255,255,255,0.15); font-size: 0.625rem; } /* Hamburger */ .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; padding: 6px; width: 36px; height: 36px; } .hamburger span { display: block; width: 22px; height: 1px; background-color: var(--c-white); transition: var(--transition); transform-origin: center; } .hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Mobile menu */ .mobile-menu { position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; background-color: var(--c-dark); z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .mobile-menu.open { opacity: 1; pointer-events: all; } .mobile-menu .nav-link { font-family: var(--font-display); font-size: 2.8rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); } .mobile-menu .nav-link:hover { color: var(--c-white); } .mobile-menu .lang-switch { margin-top: 1rem; } @media (min-width: 768px) { .navbar { padding: 0 3rem; } .navbar-center { display: flex; } .hamburger { display: none; } } @media (min-width: 1024px) { .navbar { padding: 0 4rem; } } /* ================================================================ HERO ================================================================ */ .hero { position: relative; height: 100vh; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; } .hero-picture { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-picture source { display: none; } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% top; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 160deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.28) 50%, rgba(0,0,0,0.15) 100% ); } .hero-content { position: relative; z-index: 10; padding: 0 var(--gutter) 5rem; width: 100%; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.2); padding: 0.35rem 0.85rem; border-radius: 100px; margin-bottom: 1.25rem; backdrop-filter: blur(4px); } .hero-h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 8vw, 7.5rem); line-height: 0.9; color: var(--c-white); text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 1.5rem; overflow: hidden; } /* Word animation */ @keyframes wordIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .hero-word { display: inline-block; opacity: 0; animation: wordIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .hero-h2 { font-size: 0.9375rem; font-weight: 300; color: rgba(255,255,255,0.72); line-height: 1.7; margin-bottom: 0.75rem; max-width: 500px; } .hero-tagline { font-size: 0.6875rem; font-weight: 300; color: rgba(255,255,255,0.45); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 2.5rem; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; } /* Scroll indicator */ .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: scrollBounce 2.4s ease-in-out infinite; } .scroll-indicator-line { width: 1px; height: 44px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.45)); } .scroll-indicator-dot { width: 4px; height: 4px; border-radius: 50%; background-color: rgba(255,255,255,0.4); } @keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } } @media (max-width: 767px) { .hero-bg { object-position: center top; } } @media (min-width: 768px) { .hero-content { padding: 0 3rem 5rem; max-width: 58%; } } @media (min-width: 1024px) { .hero-content { padding: 0 5rem 6rem; max-width: 52%; } } /* ================================================================ SECTION BASE ================================================================ */ .section { padding: var(--section-v) 0; } .section-lg { padding: var(--section-v-lg) 0; } .section-header { margin-bottom: 4rem; } .section-header-center { text-align: center; } .section-header-center .section-subtitle { margin-left: auto; margin-right: auto; } /* ================================================================ SERVICES ================================================================ */ .services { background-color: var(--c-bg); } .services-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 4rem; } .service-card { background-color: var(--c-surface); border-radius: var(--radius); padding: 2.5rem 2rem; transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius); border: 1px solid rgba(10,10,10,0.0); transition: border-color var(--transition); } .service-card:hover { background-color: var(--c-surface-alt); transform: translateY(-4px); box-shadow: var(--shadow); } .service-card:hover::before { border-color: rgba(10,10,10,0.06); } .service-icon { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--c-text-hint); display: block; } .service-title { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; text-transform: uppercase; color: var(--c-text); margin-bottom: 1rem; } .service-text { font-size: 0.96rem; color: var(--c-text-muted); line-height: 1.75; } .services-cta { text-align: center; } .services-cta p { font-size: 0.875rem; color: var(--c-text-muted); margin-bottom: 1.25rem; } @media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } .service-card { padding: 3rem 2.5rem; } } /* ================================================================ PORTFOLIO TEASER ================================================================ */ .portfolio-teaser { background-color: var(--c-surface); } .portfolio-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 3rem; } .portfolio-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; display: block; aspect-ratio: 4/3; } .portfolio-item:nth-child(2) { aspect-ratio: 4/3; } .portfolio-placeholder { width: 100%; height: 100%; position: relative; } /* Elegant dark placeholder gradients */ .ph-1 { background: linear-gradient(135deg, #1a1614 0%, #2d2522 50%, #1e1a17 100%); } .ph-2 { background: linear-gradient(140deg, #141618 0%, #202535 50%, #181c2a 100%); } .ph-3 { background: linear-gradient(135deg, #181a18 0%, #242c22 50%, #1c2018 100%); } .ph-4 { background: linear-gradient(145deg, #1a1416 0%, #281e22 50%, #1e1418 100%); } /* Noise texture overlay */ .portfolio-placeholder::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); opacity: 0.4; } .portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.2) 50%, transparent 100%); opacity: 0; transition: opacity 0.4s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; } .portfolio-item:hover .portfolio-overlay { opacity: 1; } .portfolio-overlay-cat { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 0.35rem; } .portfolio-overlay-title { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; text-transform: uppercase; color: var(--c-white); } .portfolio-teaser-cta { text-align: center; } @media (min-width: 640px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .portfolio-item { aspect-ratio: 3/4; } } @media (min-width: 1024px) { .portfolio-grid { gap: 1.5rem; } } /* ================================================================ PROCESS ================================================================ */ .process { background-color: var(--c-bg); } .process-steps { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 4rem; position: relative; } /* Connector line — mobile vertical */ .process-steps::before { content: ''; position: absolute; left: 1.75rem; top: 3rem; bottom: 3rem; width: 1px; background: linear-gradient(to bottom, var(--c-border), var(--c-border) 50%, transparent); } .process-step { background-color: var(--c-surface); border-radius: var(--radius); padding: 2.5rem 2rem 2.5rem 4.5rem; position: relative; } .process-number { position: absolute; left: 2rem; top: 2.5rem; font-size: 0.6rem; letter-spacing: 0.2em; color: var(--c-text-hint); font-weight: 300; } .process-icon { font-size: 1.25rem; margin-bottom: 1rem; color: var(--c-text-hint); display: block; } .process-title { font-family: var(--font-display); font-size: 2rem; text-transform: uppercase; color: var(--c-text); margin-bottom: 0.75rem; line-height: 1; } .process-text { font-size: 0.875rem; color: var(--c-text-muted); line-height: 1.75; } .process-cta { text-align: center; } .process-cta p { font-size: 0.875rem; color: var(--c-text-muted); margin-bottom: 1.25rem; } @media (min-width: 1024px) { .process-steps { flex-direction: row; gap: 1.5rem; } /* Desktop horizontal connector */ .process-steps::before { left: 33.33%; right: 33.33%; top: 2.75rem; bottom: auto; width: auto; height: 1px; background: linear-gradient(to right, transparent, var(--c-border) 20%, var(--c-border) 80%, transparent); } .process-step { flex: 1; padding: 3rem 2rem 2.5rem; } .process-number { position: static; display: block; margin-bottom: 1.5rem; } } /* ================================================================ ABOUT ================================================================ */ .about { background-color: var(--c-surface); } .about-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } .about-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; background: linear-gradient(150deg, #2a2520 0%, #1a1614 60%, #141210 100%); position: relative; } .about-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.3) 0%, transparent 60%); } .about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-content {} .about-paras { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; } .about-para { font-size: 0.9375rem; color: var(--c-text-muted); line-height: 1.75; } .about-quote { border-left: 2px solid var(--c-text-hint); padding: 1rem 1.5rem; margin: 2rem 0 2.5rem; background-color: var(--c-surface-alt); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; } .about-quote p { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.25; text-transform: uppercase; color: var(--c-text); } @media (min-width: 768px) { .about-grid { grid-template-columns: 1fr 1.4fr; gap: 4rem; } } @media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 1.5fr; gap: 6rem; } .about-quote p { font-size: 1.6rem; } } /* ================================================================ CONTACT ================================================================ */ .contact { background-color: var(--c-dark); } .contact .section-title, .contact .section-label { color: var(--c-white); } .contact .section-subtitle { color: rgba(255,255,255,0.55); } .contact-form-wrap { max-width: 600px; margin: 0 auto; } .form-group { margin-bottom: 1.5rem; } .form-label { display: block; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 0.6rem; } .form-input, .form-textarea { display: block; width: 100%; background-color: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.15); color: var(--c-white); font-size: 0.9375rem; font-weight: 300; padding: 0.75rem 0; transition: border-color var(--transition); outline: none; -webkit-appearance: none; border-radius: 0; } .form-input::placeholder, .form-textarea::placeholder { color: rgba(255,255,255,0.2); } .form-input:focus, .form-textarea:focus { border-bottom-color: rgba(255,255,255,0.6); } .form-textarea { resize: none; min-height: 120px; line-height: 1.65; } .form-submit { display: block; width: 100%; padding: 1rem 2rem; background-color: var(--c-white); color: var(--c-dark); font-size: 0.875rem; font-weight: 300; letter-spacing: 0.05em; border-radius: 100px; border: 1px solid var(--c-white); cursor: pointer; transition: all var(--transition); text-align: center; margin-top: 2rem; font-family: var(--font-body); } .form-submit:hover { background-color: transparent; color: var(--c-white); } .form-alt { text-align: center; margin-top: 1.5rem; font-size: 0.8125rem; color: rgba(255,255,255,0.35); } .form-alt a { color: rgba(255,255,255,0.65); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition); } .form-alt a:hover { color: var(--c-white); } .form-success { display: none; text-align: center; padding: 3rem 2rem; background-color: rgba(255,255,255,0.05); border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.1); } .form-success.visible { display: block; } .form-success p { font-size: 1rem; color: rgba(255,255,255,0.8); line-height: 1.6; } .form-success-icon { font-size: 2rem; margin-bottom: 1rem; } .form-error-msg { display: none; text-align: center; color: rgba(255,80,80,0.8); font-size: 0.8125rem; margin-top: 1rem; } .form-error-msg.visible { display: block; } /* ================================================================ FOOTER ================================================================ */ .footer { background-color: var(--c-dark); border-top: 1px solid rgba(255,255,255,0.06); padding: 3rem 0; } .footer-inner { display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; } .footer-logo img { height: 30px; width: auto; opacity: 0.9; display: block; } .footer-copy { font-size: 0.6875rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.3); margin-top: 0.5rem; } .footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.5rem; } .footer-link { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.3); transition: color var(--transition); } .footer-link:hover { color: rgba(255,255,255,0.7); } @media (min-width: 768px) { .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-end; } } /* ================================================================ PORTFOLIO PAGE ================================================================ */ .portfolio-page-hero { background-color: var(--c-dark); padding: calc(var(--nav-height) + 4rem) 0 5rem; } .portfolio-page-hero .section-title, .portfolio-page-hero .section-label { color: var(--c-white); } .portfolio-page-hero .section-subtitle { color: rgba(255,255,255,0.5); } /* Filters */ .portfolio-filters { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 3rem; padding-top: 0.5rem; } .filter-btn { padding: 0.5rem 1.25rem; border-radius: 100px; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 300; color: var(--c-text-muted); border: 1px solid var(--c-border); background-color: transparent; cursor: pointer; transition: all var(--transition); font-family: var(--font-body); } .filter-btn:hover { border-color: var(--c-text); color: var(--c-text); } .filter-btn.active { background-color: var(--c-dark); color: var(--c-white); border-color: var(--c-dark); } /* Masonry grid */ .masonry-grid { columns: 1; column-gap: 1.25rem; } .masonry-item { break-inside: avoid; margin-bottom: 1.25rem; position: relative; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; display: block; } .masonry-item.hidden { display: none; } .masonry-placeholder { width: 100%; position: relative; display: block; } /* Varying heights for masonry effect */ .masonry-item:nth-child(1) .masonry-placeholder { aspect-ratio: 3/4; } .masonry-item:nth-child(2) .masonry-placeholder { aspect-ratio: 4/3; } .masonry-item:nth-child(3) .masonry-placeholder { aspect-ratio: 1/1; } .masonry-item:nth-child(4) .masonry-placeholder { aspect-ratio: 2/3; } .masonry-item:nth-child(5) .masonry-placeholder { aspect-ratio: 4/3; } .masonry-item:nth-child(6) .masonry-placeholder { aspect-ratio: 3/4; } .masonry-item:nth-child(7) .masonry-placeholder { aspect-ratio: 1/1; } .masonry-item:nth-child(8) .masonry-placeholder { aspect-ratio: 3/4; } .masonry-item:nth-child(9) .masonry-placeholder { aspect-ratio: 4/3; } .masonry-item:nth-child(10) .masonry-placeholder { aspect-ratio: 2/3; } .masonry-item:nth-child(11) .masonry-placeholder { aspect-ratio: 4/3; } .masonry-item:nth-child(12) .masonry-placeholder { aspect-ratio: 3/4; } /* Image réelle en vignette (remplace masonry-placeholder) */ .masonry-img { width: 100%; display: block; object-fit: cover; object-position: center; } .masonry-item:nth-child(1) .masonry-img { aspect-ratio: 3/4; } .masonry-item:nth-child(2) .masonry-img { aspect-ratio: 4/3; } .masonry-item:nth-child(3) .masonry-img { aspect-ratio: 1/1; } .masonry-item:nth-child(4) .masonry-img { aspect-ratio: 2/3; } .masonry-item:nth-child(5) .masonry-img { aspect-ratio: 4/3; } .masonry-item:nth-child(6) .masonry-img { aspect-ratio: 3/4; } .masonry-item:nth-child(7) .masonry-img { aspect-ratio: 1/1; } .masonry-item:nth-child(8) .masonry-img { aspect-ratio: 3/4; } .masonry-item:nth-child(9) .masonry-img { aspect-ratio: 4/3; } .masonry-item:nth-child(10) .masonry-img { aspect-ratio: 2/3; } .masonry-item:nth-child(11) .masonry-img { aspect-ratio: 4/3; } .masonry-item:nth-child(12) .masonry-img { aspect-ratio: 3/4; } /* Masonry placeholder gradients */ .mph-1 { background: linear-gradient(145deg, #1a1614 0%, #302620 100%); } .mph-2 { background: linear-gradient(130deg, #141820 0%, #1e2535 100%); } .mph-3 { background: linear-gradient(150deg, #181a16 0%, #262c1e 100%); } .mph-4 { background: linear-gradient(135deg, #1c1416 0%, #2a1e22 100%); } .mph-5 { background: linear-gradient(140deg, #141214 0%, #201820 100%); } .mph-6 { background: linear-gradient(130deg, #181614 0%, #2c2018 100%); } .mph-7 { background: linear-gradient(145deg, #141618 0%, #1e2228 100%); } .mph-8 { background: linear-gradient(150deg, #1a1818 0%, #2e2020 100%); } .mph-9 { background: linear-gradient(135deg, #161814 0%, #202618 100%); } .mph-10 { background: linear-gradient(140deg, #18141a 0%, #261e2e 100%); } .mph-11 { background: linear-gradient(130deg, #141414 0%, #242424 100%); } .mph-12 { background: linear-gradient(150deg, #1a1616 0%, #282020 100%); } .masonry-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.15) 50%, transparent 100%); opacity: 0; transition: opacity 0.4s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; } .masonry-item:hover .masonry-overlay { opacity: 1; } .masonry-cat { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.3rem; } .masonry-title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; text-transform: uppercase; color: var(--c-white); } @media (min-width: 640px) { .masonry-grid { columns: 2; column-gap: 1.25rem; } } @media (min-width: 1024px) { .masonry-grid { columns: 3; column-gap: 1.5rem; } .masonry-item { margin-bottom: 1.5rem; } } /* ================================================================ STATEMENT BLOCK (dark banner) ================================================================ */ .statement { background-color: var(--c-dark); padding: 5rem 0; } .statement-text { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 6rem); line-height: 0.92; text-transform: uppercase; color: var(--c-surface); max-width: 900px; } .statement-text em { font-style: italic; color: #555; } /* ================================================================ RESPONSIVE HELPERS ================================================================ */ @media (max-width: 639px) { .hero-ctas .btn { width: 100%; justify-content: center; } .section-title { font-size: 2.6rem; } .hero-bg { object-position: 75% top; } } @media (min-width: 768px) { :root { --section-v: 7rem; --section-v-lg: 10rem; } } @media (min-width: 1024px) { :root { --gutter: 4rem; --section-v: 8rem; --section-v-lg: 12rem; } } /* ================================================================ PROJECT PAGE — /projets/*.html ================================================================ */ /* ── Hero ──────────────────────────────────────────────────────── */ .proj-hero { position: relative; height: 100vh; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; } .proj-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Category gradient backgrounds */ .proj-hero-grad { position: absolute; inset: 0; } .proj-hero-grad::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; } .proj-grad-ai { background: radial-gradient(ellipse at 30% 60%, #131a2e 0%, #0d1117 60%, #080c10 100%); } .proj-grad-branding { background: radial-gradient(ellipse at 30% 60%, #221610 0%, #140e08 60%, #0c0906 100%); } .proj-grad-web { background: radial-gradient(ellipse at 30% 60%, #131c1c 0%, #0c0f0f 60%, #080b0b 100%); } .proj-hero-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.05) 100% ); } .proj-hero-content { position: relative; z-index: 10; padding: 0 var(--gutter) 5rem; width: 100%; } .proj-breadcrumb { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 2rem; transition: color var(--transition); } .proj-breadcrumb:hover { color: rgba(255,255,255,0.85); } .proj-cat-badge { display: inline-block; padding: 0.3rem 0.95rem; border-radius: 100px; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.25rem; backdrop-filter: blur(4px); } .proj-cat-ai { background: rgba(74,128,208,0.18); color: #80aff5; border: 1px solid rgba(74,128,208,0.28); } .proj-cat-branding { background: rgba(200,146,58,0.18); color: #e0b060; border: 1px solid rgba(200,146,58,0.28); } .proj-cat-web { background: rgba(58,170,170,0.18); color: #50c8c8; border: 1px solid rgba(58,170,170,0.28); } .proj-title { font-family: var(--font-display); font-size: clamp(3.2rem, 9vw, 8.5rem); line-height: 0.88; text-transform: uppercase; color: var(--c-white); letter-spacing: -0.01em; margin-bottom: 2.5rem; } .proj-meta { display: flex; flex-wrap: wrap; gap: 2rem 3rem; } .proj-meta-item { display: flex; flex-direction: column; gap: 0.3rem; } .proj-meta-label { font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.3); } .proj-meta-value { font-size: 0.8125rem; color: rgba(255,255,255,0.72); font-weight: 300; } @media (min-width: 768px) { .proj-hero-content { padding: 0 3rem 5rem; max-width: 65%; } } @media (min-width: 1024px) { .proj-hero-content { padding: 0 5rem 6rem; max-width: 58%; } } /* ── Context ────────────────────────────────────────────────────── */ .proj-context { background-color: var(--c-bg); padding: var(--section-v) 0; } .proj-context-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .proj-context-grid { grid-template-columns: 5fr 8fr; gap: 1.75rem; } } .proj-context-card { background-color: var(--c-surface); border-radius: var(--radius); padding: 2.5rem; } .proj-context-card-label { font-size: 0.575rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-text-hint); display: block; margin-bottom: 1.5rem; } .proj-context-card-title { font-family: var(--font-display); font-size: 1.9rem; text-transform: uppercase; color: var(--c-text); line-height: 1; margin-bottom: 1.25rem; } .proj-context-card-text { font-size: 0.9375rem; color: var(--c-text-muted); line-height: 1.78; } /* ── Approach ───────────────────────────────────────────────────── */ .proj-approach { background-color: var(--c-surface); padding: var(--section-v) 0; position: relative; overflow: hidden; } .proj-approach-deco { position: absolute; right: -1rem; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: clamp(10rem, 22vw, 22rem); line-height: 1; color: rgba(10,10,10,0.035); user-select: none; pointer-events: none; white-space: nowrap; } .proj-approach-inner { position: relative; z-index: 1; max-width: 720px; } .proj-approach-label { font-size: 0.575rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-text-hint); display: block; margin-bottom: 1.5rem; } .proj-approach-title { font-family: var(--font-display); font-size: clamp(2.6rem, 5.5vw, 4.8rem); text-transform: uppercase; color: var(--c-text); line-height: 0.92; margin-bottom: 2rem; } .proj-approach-text { font-size: 0.9375rem; color: var(--c-text-muted); line-height: 1.82; } /* ── Gallery ────────────────────────────────────────────────────── */ .proj-gallery { background-color: var(--c-bg); padding: var(--section-v) 0; } .proj-gallery-label { font-size: 0.575rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-text-hint); display: block; margin-bottom: 2rem; } .proj-gallery-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .proj-gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1.25rem; } .proj-gallery-grid .proj-gallery-item:nth-child(1) { grid-column: 1 / -1; } } @media (min-width: 1024px) { .proj-gallery-grid { gap: 1.5rem; } } .proj-gallery-item { border-radius: var(--radius-sm); overflow: hidden; display: block; position: relative; } .proj-gallery-item:nth-child(1) { aspect-ratio: 16/7; } .proj-gallery-item:nth-child(2) { aspect-ratio: 4/3; } .proj-gallery-item:nth-child(3) { aspect-ratio: 4/3; } .proj-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); } .proj-gallery-item:hover img { transform: scale(1.04); } .proj-gallery-placeholder { width: 100%; height: 100%; min-height: 220px; display: block; } /* Gallery placeholder gradients per category */ .pgh-ai-1 { background: linear-gradient(145deg, #0f1520 0%, #1a2540 60%, #0f1520 100%); } .pgh-ai-2 { background: linear-gradient(155deg, #121828 0%, #1e2a40 100%); } .pgh-ai-3 { background: linear-gradient(130deg, #0d1218 0%, #1a202e 100%); } .pgh-branding-1{ background: linear-gradient(145deg, #1a1008 0%, #2e1c0e 60%, #1a1008 100%); } .pgh-branding-2{ background: linear-gradient(155deg, #22140a 0%, #342010 100%); } .pgh-branding-3{ background: linear-gradient(130deg, #161008 0%, #261a0c 100%); } .pgh-web-1 { background: linear-gradient(145deg, #0e1414 0%, #182020 60%, #0e1414 100%); } .pgh-web-2 { background: linear-gradient(155deg, #121818 0%, #1e2626 100%); } .pgh-web-3 { background: linear-gradient(130deg, #0c1212 0%, #182020 100%); } /* ── Results ────────────────────────────────────────────────────── */ .proj-results { background-color: var(--c-surface); padding: var(--section-v) 0; } .proj-results-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 768px) { .proj-results-grid { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } } .proj-results-label { font-size: 0.575rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-text-hint); display: block; margin-bottom: 1.5rem; } .proj-results-title { font-family: var(--font-display); font-size: clamp(2.6rem, 5.5vw, 4.8rem); text-transform: uppercase; color: var(--c-text); line-height: 0.92; margin-bottom: 1.5rem; } .proj-results-text { font-size: 0.9375rem; color: var(--c-text-muted); line-height: 1.8; } .proj-deliverables-label { font-size: 0.575rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-text-hint); display: block; margin-bottom: 1.5rem; } .proj-deliverables-list { display: flex; flex-direction: column; gap: 0.75rem; } .proj-deliverable-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.5rem; background-color: var(--c-bg); border-radius: var(--radius-xs); transition: background-color var(--transition); } .proj-deliverable-item:hover { background-color: var(--c-surface-alt); } .proj-deliverable-icon { font-size: 0.75rem; color: var(--c-text-hint); flex-shrink: 0; margin-top: 1px; line-height: 1.65; } .proj-deliverable-text { font-size: 0.875rem; color: var(--c-text); font-weight: 300; line-height: 1.65; } /* ── Project CTA block ──────────────────────────────────────────── */ .proj-cta-block { background-color: var(--c-dark); padding: 6rem 0; text-align: center; } .proj-cta-eyebrow { font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.3); display: block; margin-bottom: 1.5rem; } .proj-cta-text { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 4rem); text-transform: uppercase; color: var(--c-white); line-height: 0.94; margin-bottom: 2.5rem; max-width: 700px; margin-left: auto; margin-right: auto; } /* ── Project navigation ─────────────────────────────────────────── */ .proj-nav { background-color: var(--c-bg); border-top: 1px solid var(--c-border); padding: 2.25rem 0; } .proj-nav-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .proj-nav-sep { width: 1px; height: 3rem; background-color: var(--c-border); flex-shrink: 0; } .proj-nav-link { display: flex; flex-direction: column; gap: 0.35rem; max-width: 45%; transition: opacity var(--transition); } .proj-nav-link:hover { opacity: 0.55; } .proj-nav-next { text-align: right; } .proj-nav-disabled { opacity: 0.18; pointer-events: none; } .proj-nav-dir { font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-text-hint); } .proj-nav-proj-title { font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.5rem); text-transform: uppercase; color: var(--c-text); line-height: 1; } /* ================================================================ LIGHTBOX — /projets/ ================================================================ */ /* ── Gallery items — make them clickable ── */ .proj-gallery-item { cursor: zoom-in; } .proj-gallery-item:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 3px; } /* ── Lightbox overlay ── */ .lb { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; /* Initial state — hidden */ opacity: 0; pointer-events: none; transition: opacity 0.32s ease; } .lb.lb-open { opacity: 1; pointer-events: all; } /* Backdrop */ .lb-backdrop { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.92); cursor: zoom-out; } /* ── Stage (centred media container) ── */ .lb-stage { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 4rem 5.5rem; /* room for arrows */ pointer-events: none; } /* ── Frame (wraps the actual image or placeholder) ── */ .lb-frame { position: relative; max-width: 100%; max-height: 100%; border-radius: 12px; overflow: hidden; pointer-events: all; /* Entry animation */ transform: scale(0.94); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 40px 80px rgba(0,0,0,0.7); } .lb.lb-open .lb-frame { transform: scale(1); } /* Image inside frame */ .lb-frame img { display: block; max-width: min(92vw, 1200px); max-height: 85vh; width: auto; height: auto; border-radius: 12px; object-fit: contain; user-select: none; -webkit-user-drag: none; } /* Placeholder inside frame */ .lb-frame .lb-placeholder { width: min(88vw, 960px); height: min(72vh, 640px); border-radius: 12px; } /* ── Close button ── */ .lb-close { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 10; width: 44px; height: 44px; border-radius: 50%; background-color: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.75); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 1rem; line-height: 1; } .lb-close:hover { background-color: rgba(255,255,255,0.16); color: var(--c-white); transform: scale(1.1); } .lb-close svg { width: 16px; height: 16px; } /* ── Navigation arrows ── */ .lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 48px; height: 48px; border-radius: 50%; background-color: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.75); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .lb-arrow:hover { background-color: rgba(255,255,255,0.16); color: var(--c-white); } .lb-arrow svg { width: 18px; height: 18px; } .lb-prev { left: 1rem; } .lb-next { right: 1rem; } /* Hidden when only 1 image, or at boundaries */ .lb-arrow.lb-hidden { opacity: 0; pointer-events: none; } /* ── Counter ── */ .lb-counter { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 10; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.35); user-select: none; } /* ── Caption ── */ .lb-caption { position: absolute; bottom: 2.75rem; left: 50%; transform: translateX(-50%); z-index: 10; font-size: 0.75rem; color: rgba(255,255,255,0.45); text-align: center; white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; pointer-events: none; font-weight: 300; } /* ── Slide transition between images ── */ .lb-frame.lb-slide-out-left { animation: lbSlideOutLeft 0.22s ease forwards; } .lb-frame.lb-slide-out-right { animation: lbSlideOutRight 0.22s ease forwards; } .lb-frame.lb-slide-in-left { animation: lbSlideInLeft 0.26s ease forwards; } .lb-frame.lb-slide-in-right { animation: lbSlideInRight 0.26s ease forwards; } @keyframes lbSlideOutLeft { to { opacity:0; transform: scale(0.96) translateX(-3%); } } @keyframes lbSlideOutRight { to { opacity:0; transform: scale(0.96) translateX(3%); } } @keyframes lbSlideInLeft { from { opacity:0; transform: scale(0.96) translateX(3%); } to { opacity:1; transform: scale(1) translateX(0); } } @keyframes lbSlideInRight { from { opacity:0; transform: scale(0.96) translateX(-3%); } to { opacity:1; transform: scale(1) translateX(0); } } /* ── Mobile: larger tap zones, hide arrows on very small screens ── */ @media (max-width: 480px) { .lb-stage { padding: 4rem 1rem; } .lb-arrow { display: none; } /* swipe replaces arrows */ .lb-frame img { max-width: 94vw; max-height: 78vh; } .lb-frame .lb-placeholder { width: 90vw; height: 60vw; } } @media (min-width: 481px) and (max-width: 767px) { .lb-stage { padding: 4rem 4rem; } .lb-prev { left: 0.5rem; } .lb-next { right: 0.5rem; } } /* ================================================================ SERVICES SECONDARY BAR + SERVICE TAG ================================================================ */ .services-secondary { margin-top: 1.5rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: 1.25rem 1.75rem; background-color: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--radius-sm); } .services-secondary-label { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-text-hint); white-space: nowrap; flex-shrink: 0; } .services-secondary-sep { width: 1px; height: 1rem; background: var(--c-border); flex-shrink: 0; } .services-secondary-items { display: flex; flex-wrap: wrap; gap: 0 1.5rem; } .services-secondary-items span { font-size: 0.9rem; color: var(--c-text-muted); font-weight: 300; } .services-secondary-items span:not(:last-child)::after { content: ' ·'; color: var(--c-text-hint); margin-left: 1.5rem; } .service-tag { display: inline-block; margin-top: 1.25rem; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-hint); border: 1px solid var(--c-border); padding: 0.34rem 0.95rem; border-radius: 100px; } /* ================================================================ RÉSEAUX SOCIAUX — Navbar & Footer ================================================================ */ .navbar-social { display: flex; align-items: center; gap: 0.75rem; margin-right: 0.5rem; } .navbar-social-link { display: flex; align-items: center; color: rgba(255,255,255,0.5); transition: color 0.3s ease; } .navbar-social-link:hover { color: var(--c-white); } .footer-social-link { display: inline-flex; align-items: center; gap: 0.4rem; } @media (max-width: 767px) { .navbar-social { display: none; } } /* ================================================================ HOME — Services secondaires & tag pill ================================================================ */ .services-secondary { margin-top: 1.5rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: 1.25rem 1.75rem; background-color: var(--c-surface-alt); border-radius: var(--radius-sm); } .services-secondary-label { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-text-hint); white-space: nowrap; flex-shrink: 0; } .services-secondary-sep { width: 1px; height: 1rem; background: var(--c-border); flex-shrink: 0; } .services-secondary-items { display: flex; flex-wrap: wrap; gap: 0 1.5rem; } .services-secondary-items span { font-size: 0.8125rem; color: var(--c-text-muted); font-weight: 300; } .services-secondary-items span:not(:last-child)::after { content: ' ·'; color: var(--c-text-hint); margin-left: 1.5rem; } .service-tag { display: inline-block; margin-top: 1.25rem; font-size: 0.575rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-hint); border: 1px solid var(--c-border); padding: 0.3rem 0.9rem; border-radius: 100px; } /* ================================================================ HOME — Grille éditoriale portfolio teaser (Option B) ================================================================ */ .home-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 3rem; } .home-edit-col { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; } .home-edit-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; display: block; background: var(--c-surface-dark); } .home-edit-main { height: 610px; } .home-edit-col .home-edit-item { height: 300px; } .home-edit-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); } .home-edit-item:hover img { transform: scale(1.04); } .home-edit-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.82) 0%, transparent 55%); opacity: 0; transition: opacity 0.35s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; } .home-edit-item:hover .home-edit-overlay { opacity: 1; } .home-edit-cat { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.2rem; display: block; } .home-edit-title { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; text-transform: uppercase; color: var(--c-white); display: block; } @media (max-width: 640px) { .home-edit-grid { grid-template-columns: 1fr; } .home-edit-main { height: 280px; } .home-edit-col .home-edit-item { height: 200px; } } /* ================================================================ PORTFOLIO PAGE — Grille éditoriale (portfolio.html) ================================================================ */ .edit-grid { display: flex; flex-direction: column; gap: 10px; } .edit-row { display: grid; gap: 10px; } .edit-row-1 { grid-template-columns: 1.6fr 1fr; } .edit-row-2 { grid-template-columns: 1fr 1fr 1fr; } .edit-row-3 { grid-template-columns: 1fr 1.6fr; } .edit-row-1 .edit-item { height: 440px; } .edit-row-2 .edit-item { height: 280px; } .edit-row-3 .edit-item { height: 360px; } .edit-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; display: block; background: var(--c-surface-dark); cursor: pointer; } .edit-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); } .edit-item:hover img { transform: scale(1.04); } .edit-placeholder { width: 100%; height: 100%; background: linear-gradient(145deg, #1a1614 0%, #2a2018 100%); } .edit-item-placeholder { opacity: 0.55; cursor: default; } .edit-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.15) 50%, transparent 100%); opacity: 0; transition: opacity 0.35s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; } .edit-item:hover .edit-overlay { opacity: 1; } .edit-cat { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.3rem; display: block; } .edit-title { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; text-transform: uppercase; color: var(--c-white); display: block; } @media (max-width: 767px) { .edit-row-1, .edit-row-2, .edit-row-3 { grid-template-columns: 1fr; } .edit-row-1 .edit-item, .edit-row-2 .edit-item, .edit-row-3 .edit-item { height: 280px; } } @media (min-width: 768px) and (max-width: 1023px) { .edit-row-2 { grid-template-columns: 1fr 1fr; } .edit-row-2 .edit-item:last-child { display: none; } } /* ================================================================ SERVICES PAGE — Layouts spécifiques (services.html) ================================================================ */ .service-detail-grid, .case-study-grid, .usage-grid, .faq-grid, .mini-benefits-grid { display: grid; gap: 2rem; } .service-detail-grid, .case-study-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; } .usage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mini-benefits-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2.5rem; } .service-visual, .case-study-visual { min-height: 460px; background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; position: relative; overflow: hidden; } .service-visual::before, .case-study-visual::before { content: "EMPLACEMENT VISUEL"; display: none; position: absolute; top: 1rem; left: 1rem; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.12); padding: 0.4rem 0.75rem; border-radius: 999px; } .service-visual-note, .case-study-note { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; font-size: 0.95rem; color: rgba(255,255,255,0.68); line-height: 1.6; } .service-detail + .service-detail, .case-study + .case-study { margin-top: 6rem; } .service-detail-text .section-label, .case-study-text .section-label { margin-bottom: 1rem; display: inline-block; } .service-detail-title, .case-study-title, .simple-title { font-family: "Bebas Neue", sans-serif; line-height: 0.95; letter-spacing: 0.02em; margin: 0 0 1rem; } .service-detail-title, .case-study-title { font-size: clamp(2.4rem, 5vw, 4.5rem); } .simple-title { font-size: clamp(2rem, 4vw, 3.25rem); } .service-detail-text p, .case-study-text p, .simple-text { color: var(--c-text-muted); line-height: 1.8; max-width: 60ch; } .service-list, .result-list, .deliverables-list-inline { margin: 1.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; } .service-list li, .result-list li, .deliverables-list-inline li, .usage-card, .mini-benefit, .faq-item { background: var(--c-surface-alt); border-radius: var(--radius-sm); border: 1px solid var(--c-border); } .service-list li, .result-list li, .deliverables-list-inline li { padding: 1rem 1.2rem; color: var(--c-text); } .mini-benefit, .usage-card, .faq-item { padding: 1.4rem; } .mini-benefit h3, .usage-card h3, .faq-item h3, .case-study-block h4 { margin: 0 0 0.65rem; font-size: 1rem; font-weight: 400; color: var(--c-text); } .mini-benefit p, .usage-card p, .faq-item p, .case-study-block p { margin: 0; color: var(--c-text-muted); line-height: 1.7; font-size: 0.95rem; } .case-study-meta { display: grid; gap: 1rem; margin-top: 1.75rem; } .case-study-block { padding: 1.15rem 1.2rem; background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--radius-sm); } .services-secondary-extended { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .process-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; } .process-mini .process-step { padding: 1.5rem; background: var(--c-surface-alt); border-radius: var(--radius-sm); border: 1px solid var(--c-border); } .cta-panel { background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: clamp(2rem, 4vw, 4rem); text-align: center; } .cta-panel p { max-width: 60ch; margin: 1rem auto 0; color: var(--c-text-muted); line-height: 1.8; } .cta-panel .hero-ctas { justify-content: center; margin-top: 2rem; } details.faq-item summary { cursor: pointer; list-style: none; font-size: 1rem; color: var(--c-text); } details.faq-item summary::-webkit-details-marker { display: none; } details.faq-item p { margin-top: 0.9rem; } @media (max-width: 980px) { .service-detail-grid, .case-study-grid, .usage-grid, .faq-grid, .mini-benefits-grid, .services-secondary-extended, .process-mini { grid-template-columns: 1fr; } .service-detail-grid .service-visual, .case-study-grid .case-study-visual { min-height: 320px; } .service-detail.reverse-mobile .service-visual { order: -1; } } /* ================================================================ PAGES PROJETS — CSS commun (proj-hero, proj-gallery, etc.) ================================================================ */ /* ── HERO ── */ .proj-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--c-dark); } .proj-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* Hero position override — add data-hero-pos on the tag */ .proj-hero-bg[data-hero-pos="center"] { object-position: center center; } .proj-hero-bg[data-hero-pos="top"] { object-position: center top; } .proj-hero-bg[data-hero-pos="bottom"] { object-position: center bottom; } .proj-hero-bg[data-hero-pos="left"] { object-position: left center; } .proj-hero-bg[data-hero-pos="right"] { object-position: right center; } .proj-hero-bg[data-hero-pos="top-left"] { object-position: left top; } .proj-hero-bg[data-hero-pos="top-right"] { object-position: right top; } .proj-hero-bg[data-hero-pos="bottom-left"] { object-position: left bottom; } .proj-hero-bg[data-hero-pos="bottom-right"] { object-position: right bottom; } /* Custom % values: use style="object-position: X% Y%" directly on the img tag */ .proj-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.15) 100%); } .proj-hero-content { position: relative; z-index: 2; width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem 5rem; } .proj-breadcrumb { display: inline-block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 1.25rem; text-decoration: none; } .proj-cat-badge { display: inline-block; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.25); padding: 0.45rem 0.85rem; border-radius: 999px; margin-bottom: 1.25rem; } .proj-title { font-family: var(--font-display); font-size: clamp(3.5rem, 9vw, 8rem); line-height: 0.9; color: var(--c-white); text-transform: uppercase; margin-bottom: 1.5rem; } .proj-intro { max-width: 680px; font-size: 1.05rem; line-height: 1.8; color: rgba(255,255,255,0.75); margin-bottom: 2.5rem; } .proj-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 720px; } .proj-meta-item { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.15); } .proj-meta-label { display: block; font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 0.4rem; } .proj-meta-value { color: var(--c-white); font-size: 0.92rem; } /* ── SECTIONS ── */ .proj-section { padding: 6rem 0; } .proj-section-sm { padding: 4rem 0; } /* ── CHIFFRES CLÉS ── */ .proj-numbers { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); } .proj-number-item { padding: 3rem 2rem; border-right: 1px solid var(--c-border); } .proj-number-item:last-child { border-right: none; } .proj-number-value { font-family: var(--font-display); font-size: clamp(3.5rem, 7vw, 6rem); line-height: 1; text-transform: uppercase; color: var(--c-text); display: block; margin-bottom: 0.6rem; } .proj-number-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-hint); line-height: 1.5; display: block; } .proj-number-sub { font-size: 0.82rem; color: var(--c-text-muted); margin-top: 0.75rem; line-height: 1.6; display: block; } /* ── GRILLES ── */ .proj-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: start; } .proj-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 2.5rem; } .proj-card-label { display: block; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-hint); margin-bottom: 1rem; } .proj-card-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 0.95; text-transform: uppercase; margin-bottom: 1.2rem; color: var(--c-text); } .proj-card-text { color: var(--c-text-muted); font-size: 0.96rem; line-height: 1.8; } /* ── APPROCHE DA ── */ .proj-approach-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; } .proj-approach-sticky { position: sticky; top: 6rem; } .proj-rich-text { color: var(--c-text-muted); font-size: 0.96rem; line-height: 1.9; } .proj-rich-text p + p { margin-top: 1.2rem; } /* ── GALERIE ── */ .proj-gallery-main { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 0.75rem; } .proj-gallery-col { display: grid; gap: 0.75rem; } .proj-gallery-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; } .proj-media { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--c-surface-alt); border: 1px solid var(--c-border); } .proj-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .proj-media:hover img { transform: scale(1.03); } .proj-media-tall { min-height: 560px; } .proj-media-mid { min-height: 260px; } .proj-media-short { min-height: 380px; } /* ── LIVRABLES ── */ .proj-deliverables { counter-reset: item; display: grid; gap: 0.6rem; margin-top: 1.5rem; } .proj-deliverables li { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 1.2rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm); color: var(--c-text); font-size: 0.94rem; line-height: 1.6; } .proj-deliverables li::before { content: counter(item, decimal-leading-zero); counter-increment: item; font-family: var(--font-display); font-size: 1.1rem; color: var(--c-text-hint); flex-shrink: 0; } /* ── CTA ── */ .proj-cta { border-top: 1px solid var(--c-border); padding-top: 5rem; text-align: center; } .proj-cta .section-label { margin-bottom: 0.75rem; } .proj-cta .section-title { margin-bottom: 1rem; } .proj-cta .section-subtitle { margin-left: auto; margin-right: auto; max-width: 600px; } .proj-cta-actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; } /* ── RESPONSIVE PROJETS ── */ @media (max-width: 900px) { .proj-meta, .proj-grid-2, .proj-approach-grid, .proj-gallery-main, .proj-gallery-row, .proj-numbers { grid-template-columns: 1fr; } .proj-number-item { border-right: none; border-bottom: 1px solid var(--c-border); padding: 2rem 0; } .proj-number-item:last-child { border-bottom: none; } .proj-hero-content { padding-bottom: 4rem; } .proj-approach-sticky { position: static; } .proj-media-tall { min-height: 380px; } }