/* ========================================================================== OUTFIT365 — Design tokens & bespoke luxury styling. Tailwind (CDN) supplies utility classes; this file supplies the brand's actual visual identity: type, color, motion, and the signature hero. ========================================================================== */ :root { --cc-black: #0a0908; --cc-charcoal: #131211; --cc-panel: #17150f; --cc-line: rgba(201, 162, 87, 0.16); --cc-line-strong: rgba(201, 162, 87, 0.32); --cc-gold: #c9a257; --cc-gold-soft: #d9bd85; --cc-cream: #f3efe6; --cc-cream-dim: #b9b3a6; --cc-red: #b5432f; --cc-radius: 2px; --cc-ease: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } [x-cloak] { display: none !important; } html { scroll-behavior: auto; overflow-x: hidden; } body { background: var(--cc-black); color: var(--cc-cream); font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; } .font-display { font-family: 'Bodoni Moda', Georgia, serif; } .tracked { letter-spacing: 0.14em; } .tracked-lg { letter-spacing: 0.22em; } ::selection { background: var(--cc-gold); color: var(--cc-black); } a { color: inherit; text-decoration: none; } /* ── Buttons ─────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.95rem 2.1rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; border-radius: var(--cc-radius); transition: all 0.35s var(--cc-ease); white-space: nowrap; cursor: pointer; border: 1px solid transparent; } .btn-gold { background: var(--cc-gold); color: var(--cc-black); } .btn-gold:hover { background: var(--cc-gold-soft); transform: translateY(-1px); } .btn-outline { border-color: var(--cc-line-strong); color: var(--cc-cream); background: transparent; } .btn-outline:hover { border-color: var(--cc-gold); color: var(--cc-gold); } .btn-dark { background: var(--cc-black); color: var(--cc-cream); border-color: rgba(255,255,255,0.14); } .btn-dark:hover { border-color: var(--cc-gold); color: var(--cc-gold); } @media (max-width: 400px) { .btn { padding: 0.85rem 1.4rem; font-size: 0.68rem; letter-spacing: 0.13em; } } /* ── Announcement bar ────────────────────────────────────────────────── */ .announcement-bar { background: var(--cc-black); border-bottom: 1px solid var(--cc-line); font-size: 0.68rem; letter-spacing: 0.16em; } /* ── Nav ─────────────────────────────────────────────────────────────── */ .site-nav { position: sticky !important; top: 0; z-index: 60; transition: background 0.4s var(--cc-ease), border-color 0.4s var(--cc-ease), backdrop-filter 0.4s ease, opacity 0.6s var(--cc-ease), transform 0.6s var(--cc-ease); background: transparent; border-bottom: 1px solid transparent; } .site-nav.is-scrolled { background: rgba(10, 9, 8, 0.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--cc-line); } /* While the cinematic hero sequence is still playing, the header stays out of the way entirely so nothing competes with the frame sequence. It only fades in once the hero signals it's near the end (see TEXT_IN_AT in app.js). Pages without a .hero-stage never get `has-cinematic-hero` added to , so the header there is unaffected and always visible/sticky. Using `position: fixed` (not `sticky`) here matters: `sticky` still reserves its own 80px-tall slot in normal document flow at its original position — so even at opacity:0 it was pushing the hero down by 80px, which is exactly the black gap that only "closed" once scrolling carried the sticky header past that reserved slot. `fixed` takes the header out of flow entirely, so it overlays the hero (at opacity 0 while hidden, harmlessly) instead of displacing it. */ body.has-cinematic-hero .site-nav { position: fixed !important; top: 0; left: 0; right: 0; opacity: 0; transform: translateY(-8px); pointer-events: none; } body.has-cinematic-hero .site-nav.hero-text-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .nav-link { position: relative; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-cream-dim); padding: 0.4rem 0; transition: color 0.25s ease; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--cc-gold); transition: width 0.3s var(--cc-ease); } .nav-link:hover { color: var(--cc-cream); } .nav-link:hover::after { width: 100%; } .mega-menu { opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s var(--cc-ease), transform 0.3s var(--cc-ease), visibility 0.3s; } .group:hover .mega-menu, .mega-menu:hover { opacity: 1; visibility: visible; transform: translateY(0); } /* ── Cinematic hero ──────────────────────────────────────────────────── */ .hero-stage { position: relative; /* 100vh is calculated against the browser's LARGEST possible viewport (i.e. as if the URL bar were already hidden). On first load, before the user scrolls, the URL bar is still visible, so the real visible area is shorter than 100vh — leaving a black gap above the canvas until the URL bar collapses on scroll and the numbers finally match. 100dvh (dynamic viewport height) tracks the browser chrome live and closes that gap immediately; vh is kept first only as a fallback for older browsers that don't support dvh. */ height: 100vh; height: 100dvh; min-height: 640px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #2a1c10 0%, var(--cc-black) 70%); } .hero-canvas-wrap { position: relative; top: 0; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; } .hero-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; } .hero-stage.is-ready .hero-canvas-wrap canvas { opacity: 1; } /* High-quality final frame overlay: sits on top of the canvas, invisible and non-interactive until JS adds .is-final-frame (right as the scrub sequence completes), then crossfades in above the canvas's own last (lower-quality) frame. */ .hero-final-frame { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; z-index: 2; } .hero-stage.is-final-frame .hero-final-frame { opacity: 1; } /* Full-bleed cover on all screen sizes, including mobile. */ .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.05) 30%, rgba(10,9,8,0.15) 60%, rgba(10,9,8,0.92) 100%); pointer-events: none; } .hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 5vw 2.5vw; z-index: 5; /* Hidden by default: the frame sequence plays as an uninterrupted short film first. Text/CTAs only fade in once .hero-stage.hero-text-visible is toggled from JS in the final stretch of the scroll-scrub (see TEXT_IN_AT in app.js), landing seconds before the sequence completes and the hero releases into the next section. */ opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--cc-ease), transform 0.9s var(--cc-ease); pointer-events: none; } .hero-stage.hero-text-visible .hero-content { opacity: 1; transform: translateY(0); pointer-events: auto; } .hero-eyebrow { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cc-gold-soft); margin-bottom: 1rem; } .hero-heading { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 600; font-size: clamp(2.6rem, 7vw, 6.2rem); line-height: 0.98; color: var(--cc-cream); max-width: 18ch; } .hero-heading em { font-style: normal; color: var(--cc-gold); } .hero-sub { margin-top: 1.4rem; max-width: 34ch; color: var(--cc-cream-dim); font-size: 1rem; line-height: 1.6; } .hero-scroll-indicator { position: absolute; bottom: 2.2rem; right: 5vw; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; z-index: 6; transition: opacity 0.5s var(--cc-ease); } .hero-scroll-mouse { position: relative; width: 26px; height: 42px; border: 1.5px solid var(--cc-gold-soft); border-radius: 14px; box-shadow: 0 0 0 0 rgba(214, 175, 106, 0.35); animation: scrollGlow 2.4s ease-in-out infinite; } .hero-scroll-dot { position: absolute; top: 7px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--cc-gold); animation: scrollDot 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; } .hero-scroll-label { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cc-cream-dim); animation: scrollLabelFade 2.4s ease-in-out infinite; } @keyframes scrollDot { 0% { top: 7px; opacity: 0; } 15% { opacity: 1; } 55% { opacity: 1; } 80% { top: 26px; opacity: 0; } 100% { top: 26px; opacity: 0; } } @keyframes scrollGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 175, 106, 0.3); } 50% { box-shadow: 0 0 10px 2px rgba(214, 175, 106, 0.25); } } @keyframes scrollLabelFade { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* ── Section rhythm ──────────────────────────────────────────────────── */ .section { padding: clamp(3.5rem, 7vw, 7rem) 0; } .eyebrow { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cc-gold); } .section-heading { font-family: 'Bodoni Moda', Georgia, serif; font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 600; color: var(--cc-cream); } /* ── Trust strip ─────────────────────────────────────────────────────── */ .trust-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 1.4rem 0.75rem; border: 1px solid var(--cc-line); background: var(--cc-panel); transition: border-color 0.3s var(--cc-ease), transform 0.3s var(--cc-ease), background 0.3s var(--cc-ease); } .trust-card:hover { border-color: var(--cc-line-strong); transform: translateY(-3px); background: rgba(201, 162, 87, 0.05); } .trust-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cc-line-strong); color: var(--cc-gold); transition: background 0.3s var(--cc-ease), color 0.3s var(--cc-ease); } .trust-icon svg { width: 22px; height: 22px; } .trust-card:hover .trust-icon { background: var(--cc-gold); color: var(--cc-black); } /* ── Product card ────────────────────────────────────────────────────── */ .product-card { position: relative; } .product-card .frame { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--cc-panel); border: 1px solid var(--cc-line); } .product-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--cc-ease); } .product-card:hover img { transform: scale(1.06); } .product-card .wish-btn { position: absolute; top: 0.75rem; right: 0.75rem; width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; background: rgba(10,9,8,0.55); border: 1px solid var(--cc-line); border-radius: 50%; backdrop-filter: blur(6px); transition: border-color 0.3s ease, color 0.3s ease; } .product-card .wish-btn:hover { border-color: var(--cc-gold); color: var(--cc-gold); } .product-name { font-size: 0.86rem; color: var(--cc-cream); margin-top: 0.9rem; } .product-price { font-size: 0.86rem; color: var(--cc-cream-dim); margin-top: 0.2rem; } .product-price .compare { text-decoration: line-through; opacity: 0.5; margin-right: 0.5rem; } /* ── Featured products: horizontal scroll-jack carousel ───────────────── .featured-scroll-pin now wraps BOTH the heading and the card row, and is the element GSAP pins as one unit — this keeps the heading and row locked together with no gap/jump between them once the scrub starts. The overflow-x/swipe behaviour (baseline for no-JS/no-GSAP) lives on the track wrapper instead, scoped to just the card row. Once app.js confirms GSAP + ScrollTrigger are available it adds .js-locked to the pin, which hands control to the JS-driven transform. ── */ .featured-scroll-pin { position: relative; width: 100%; } .featured-scroll-track-wrap { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; } .featured-scroll-track-wrap::-webkit-scrollbar { display: none; } .featured-scroll-pin.js-locked .featured-scroll-track-wrap { overflow: hidden; scroll-snap-type: none; } .featured-scroll-track { display: flex; flex-wrap: nowrap; gap: 1.25rem; will-change: transform; } .featured-scroll-item { min-width: 0; scroll-snap-align: start; /* Mobile: 2 cards visible, rest revealed by scrolling */ flex: 0 0 calc((100% - 1.25rem) / 2); } @media (min-width: 768px) { .featured-scroll-item { /* Desktop: 5 cards visible, rest revealed by scrolling */ flex: 0 0 calc((100% - 4 * 1.25rem) / 5); } } .card-panel { background: var(--cc-panel); border: 1px solid var(--cc-line); } /* ── Inputs ──────────────────────────────────────────────────────────── */ .input { width: 100%; background: var(--cc-charcoal); border: 1px solid var(--cc-line); color: var(--cc-cream); padding: 0.85rem 1rem; font-size: 0.85rem; border-radius: var(--cc-radius); transition: border-color 0.25s ease; } .input:focus { outline: none; border-color: var(--cc-gold); } .label { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-cream-dim); margin-bottom: 0.5rem; display: block; } /* ── Mega menu promo banner ──────────────────────────────────────────── */ .mega-promo { background: linear-gradient(180deg, rgba(10,9,8,0.15) 0%, rgba(10,9,8,0.92) 88%), linear-gradient(135deg, #2a2116 0%, #17150f 60%, #0a0908 100%); border: 1px solid var(--cc-line); transition: border-color 0.35s ease; } .mega-promo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, rgba(201,162,87,0.22), transparent 60%); transition: opacity 0.4s ease; } .mega-promo:hover { border-color: var(--cc-gold); } .mega-promo .btn-gold { pointer-events: none; } /* ── Cart drawer / toast ─────────────────────────────────────────────── */ [data-site-nav] { z-index: 60; } /* ── Footer ──────────────────────────────────────────────────────────── */ .footer { background: var(--cc-black); border-top: 1px solid var(--cc-line); } /* ── Misc ────────────────────────────────────────────────────────────── */ .divider { border-color: var(--cc-line); } .reveal { opacity: 0; transform: translateY(28px); } .reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity 0.9s var(--cc-ease), transform 0.9s var(--cc-ease); } .badge { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.25rem 0.6rem; border: 1px solid var(--cc-line-strong); color: var(--cc-gold-soft); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--cc-black); } ::-webkit-scrollbar-thumb { background: #2a261c; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } .hero-scroll-indicator .hero-scroll-mouse, .hero-scroll-indicator .hero-scroll-dot, .hero-scroll-indicator .hero-scroll-label { animation: none; } } /* Admin dashboard theme reuses same tokens but lighter surfaces */ .admin-shell { background: #0d0d0c; min-height: 100vh; } .admin-sidebar { background: var(--cc-black); border-right: 1px solid var(--cc-line); } .admin-card { background: var(--cc-panel); border: 1px solid var(--cc-line); border-radius: 6px; } .admin-table th { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-cream-dim); text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--cc-line); } .admin-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--cc-line); font-size: 0.85rem; } .admin-table tr:hover td { background: rgba(201,162,87,0.04); } /* ── 404 page: dino-style jumping game ──────────────────────────────── */ .dino-game-wrap { position: relative; border: 1px solid var(--cc-line); background: var(--cc-panel); padding: 0.9rem 0.9rem 0; border-radius: var(--cc-radius); } .dino-hud { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.7rem; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc-cream-dim); } .dino-hud-label { opacity: 0.7; } .dino-hud-sep { opacity: 0.35; } .dino-score, .dino-best { font-family: 'Bodoni Moda', Georgia, serif; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--cc-gold-soft); } .dino-canvas { display: block; width: 100%; height: auto; touch-action: manipulation; cursor: pointer; border-top: 1px solid var(--cc-line); } .dino-overlay { position: absolute; inset: 2.6rem 0.9rem 0.9rem 0.9rem; top: 2.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.35rem; background: rgba(10, 9, 8, 0.72); backdrop-filter: blur(2px); cursor: pointer; transition: opacity 0.25s var(--cc-ease); } .dino-overlay.is-hidden { opacity: 0; pointer-events: none; } .dino-overlay-title { font-family: 'Bodoni Moda', Georgia, serif; font-size: 1rem; color: var(--cc-cream); } .dino-overlay-sub { font-size: 0.72rem; color: var(--cc-cream-dim); } /* ── 404 page: quick links ──────────────────────────────────────────── */ .error-quick-link { display: block; text-align: center; padding: 0.85rem 0.75rem; border: 1px solid var(--cc-line); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--cc-cream-dim); transition: border-color 0.25s var(--cc-ease), color 0.25s var(--cc-ease), background 0.25s var(--cc-ease); } .error-quick-link:hover { border-color: var(--cc-line-strong); color: var(--cc-gold-soft); background: rgba(201, 162, 87, 0.05); } /* ── About page ──────────────────────────────────────────────────────── Mobile-first throughout: every grid below starts single-column/stacked and only splits into multi-column layouts at md: (768px+), since mobile is the primary target here, not an afterthought scaled down from desktop. ────────────────────────────────────────────────────────────────────── */ .about-hero { position: relative; padding: 5rem 5vw 4rem; background: radial-gradient(ellipse 120% 80% at 50% -10%, rgba(201,162,87,0.10) 0%, transparent 55%), var(--cc-black); border-bottom: 1px solid var(--cc-line); text-align: center; overflow: hidden; } .about-hero-inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 2; } .about-manifesto { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: clamp(2.1rem, 7vw, 3.6rem); line-height: 1.1; color: var(--cc-cream); margin-bottom: 1.4rem; } .about-manifesto em { font-style: normal; color: var(--cc-gold); } .about-hero-sub { font-size: 0.92rem; line-height: 1.65; color: var(--cc-cream-dim); max-width: 42ch; margin: 0 auto; } @media (min-width: 768px) { .about-hero { padding: 7rem 5vw 5rem; } } .about-origin-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } .about-origin-media { aspect-ratio: 4/5; overflow: hidden; border: 1px solid var(--cc-line); background: var(--cc-panel); } .about-origin-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } @media (min-width: 768px) { .about-origin-grid { grid-template-columns: 1fr 0.9fr; gap: 3.5rem; align-items: center; } .about-origin-media { aspect-ratio: 3/4; } } .about-quote-section { padding: 4.5rem 5vw; background: var(--cc-panel); border-top: 1px solid var(--cc-line); border-bottom: 1px solid var(--cc-line); } .about-quote { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(1.5rem, 5vw, 2.4rem); line-height: 1.35; color: var(--cc-cream); } .about-quote em { font-style: normal; color: var(--cc-gold); } .about-quote-attribution { margin-top: 1.5rem; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cc-cream-dim); } .about-process-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; } .about-process-item { padding-top: 1.25rem; border-top: 1px solid var(--cc-line); } .about-process-num { font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem; color: var(--cc-gold); margin-bottom: 0.5rem; } @media (min-width: 768px) { .about-process-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } } .about-cta { text-align: center; padding: 3.5rem 5vw; border: 1px solid var(--cc-line); background: var(--cc-panel); } @media (min-width: 768px) { .about-cta { padding: 4.5rem 5vw; } } /* ── Contact page ─────────────────────────────────────────────────────── */ .contact-hero { position: relative; padding: 5rem 5vw 4rem; background: radial-gradient(ellipse 120% 80% at 50% -10%, rgba(201,162,87,0.10) 0%, transparent 55%), var(--cc-black); border-bottom: 1px solid var(--cc-line); text-align: center; overflow: hidden; } .contact-hero-inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 2; } .contact-manifesto { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: clamp(2.1rem, 7vw, 3.6rem); line-height: 1.1; color: var(--cc-cream); margin-bottom: 1.4rem; } .contact-manifesto em { font-style: normal; color: var(--cc-gold); } .contact-hero-sub { font-size: 0.92rem; line-height: 1.65; color: var(--cc-cream-dim); max-width: 46ch; margin: 0 auto; } @media (min-width: 768px) { .contact-hero { padding: 7rem 5vw 5rem; } } .contact-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 768px) { .contact-info-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } } .contact-card { display: block; padding: 1.75rem 1.5rem; border: 1px solid var(--cc-line); background: var(--cc-panel); transition: border-color 0.3s var(--cc-ease), transform 0.3s var(--cc-ease), background 0.3s var(--cc-ease); } .contact-card:hover { border-color: var(--cc-gold); transform: translateY(-3px); background: rgba(201, 162, 87, 0.05); } .contact-card-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 1.1rem; border-radius: 50%; border: 1px solid var(--cc-line-strong); color: var(--cc-gold); transition: background 0.3s var(--cc-ease), color 0.3s var(--cc-ease); } .contact-card-icon svg { width: 20px; height: 20px; } .contact-card:hover .contact-card-icon { background: var(--cc-gold); color: var(--cc-black); } .contact-card-value { font-size: 0.9rem; color: var(--cc-cream); word-break: break-word; margin-bottom: 0.25rem; } .contact-card-meta { font-size: 0.72rem; color: var(--cc-cream-dim); } .contact-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 1024px) { .contact-layout { grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; } } .contact-form-panel { padding: 2.25rem; border: 1px solid var(--cc-line); background: var(--cc-panel); } @media (min-width: 768px) { .contact-form-panel { padding: 3rem; } } .contact-side { display: flex; flex-direction: column; border: 1px solid var(--cc-line); background: var(--cc-panel); overflow: hidden; } .contact-side-media { aspect-ratio: 16/9; overflow: hidden; border-bottom: 1px solid var(--cc-line); } .contact-side-media img { width: 100%; height: 100%; object-fit: cover; } .contact-side-panel { padding: 1.75rem; } .contact-faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--cc-line); } .contact-faq-item { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0; font-size: 0.82rem; color: var(--cc-cream-dim); border-bottom: 1px solid var(--cc-line); transition: color 0.25s ease, padding-left 0.25s ease; } .contact-faq-item svg { color: var(--cc-gold); flex-shrink: 0; margin-left: 0.75rem; } .contact-faq-item:hover { color: var(--cc-gold); padding-left: 0.25rem; }