@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/lustre-20260917/cormorant-latin.woff2') format('woff2');} @font-face{font-family:'DM Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/lustre-20260917/dm-sans-latin.woff2') format('woff2');} /* ============================================================ LUSTRE DIGITAL — Global Stylesheet ============================================================ */ /* --- Google Fonts — loaded via in HTML --- */ /* --- Design Tokens --- */ :root { --color-bg: #0a0a0a; --color-bg-2: #111111; --color-bg-3: #1a1a1a; --color-gold: #c9a96e; --color-gold-light: #e8c98a; --color-gold-dark: #a8834a; --color-text: #f5f0e8; --color-text-2: #b8b0a0; --color-text-3: #aaa193; --color-text-1: #f5f0e8; --color-border: #2a2520; --color-border-gold: rgba(201,169,110,0.3); --color-white: #ffffff; --color-surface: #1a1a1a; --color-muted: #888888; --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'DM Sans', sans-serif; --max-width: 1280px; --nav-height: 80px; } /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--color-gold-dark) var(--color-bg-2); overflow-x: hidden; } html::-webkit-scrollbar { width: 8px; } html::-webkit-scrollbar-track { background: var(--color-bg-2); } html::-webkit-scrollbar-thumb { background: var(--color-gold-dark); border-radius: 4px; } body { font-family: var(--font-body); font-weight: 400; color: var(--color-text); background: var(--color-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* --- Skip Nav --- */ .skip-nav { position: absolute; top: -100%; left: 16px; background: var(--color-gold); color: var(--color-bg); padding: 8px 16px; border-radius: 4px; z-index: 10000; font-size: 0.875rem; transition: top 0.3s; } .skip-nav:focus { top: 16px; } /* --- Custom Cursor --- */ .cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: var(--color-gold); border-radius: 50%; pointer-events: none; z-index: 9999; transition: width 0.3s, height 0.3s, background 0.3s, border 0.3s, margin 0.3s; margin-top: -4px; margin-left: -4px; } .cursor-dot.hover { width: 20px; height: 20px; background: transparent; border: 1.5px solid var(--color-gold); margin-top: -10px; margin-left: -10px; } @media (pointer: coarse), (hover: none) { .cursor-dot { display: none !important; } } /* --- Typography --- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; color: var(--color-text); } h1 { font-size: clamp(3rem, 8vw, 7rem); } h2 { font-size: clamp(2rem, 5vw, 3.5rem); } h3 { font-size: clamp(1.4rem, 3vw, 2rem); } h4 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; } p { color: var(--color-text-2); max-width: 60ch; } .label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); } /* --- Layout --- */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } section { padding: 120px 0; } @media (max-width: 768px) { section { padding: 80px 0; } } /* --- Navigation --- */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); display: flex; align-items: center; z-index: 1000; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; border-bottom: 1px solid transparent; } .nav.scrolled { background: var(--color-bg-2); border-bottom-color: var(--color-border); box-shadow: 0 4px 30px rgba(0,0,0,0.3); } .nav .container { display: flex; align-items: center; justify-content: space-between; } /* Logo */ .nav-logo { display: flex; align-items: baseline; gap: 6px; font-size: 1.35rem; white-space: nowrap; } .nav-logo .lustre { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--color-text); } .nav-logo .dot { color: var(--color-gold); font-size: 0.6rem; line-height: 1; } .nav-logo .digital { font-family: var(--font-body); font-weight: 300; color: var(--color-text-2); font-size: 0.95rem; } /* Desktop links */ .nav-links { display: flex; align-items: center; gap: 32px; } .nav-links a:not(.btn-quote) { font-size: 0.85rem; font-weight: 400; color: var(--color-text-2); position: relative; transition: color 0.3s; } .nav-links a:not(.btn-quote)::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--color-gold); transition: width 0.3s; } .nav-links a:not(.btn-quote):hover, .nav-links a:not(.btn-quote).active { color: var(--color-gold); } .nav-links a:not(.btn-quote):hover::after, .nav-links a:not(.btn-quote).active::after { width: 100%; } /* Quote button — desktop nav */ .btn-quote { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.05em; color: var(--color-gold); border: 1px solid var(--color-gold); padding: 10px 24px; border-radius: 100px; transition: background 0.3s, color 0.3s; white-space: nowrap; margin-left: 8px; } .btn-quote:hover { background: var(--color-gold); color: var(--color-bg); } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; z-index: 1002; } .nav-hamburger span { display: block; width: 24px; height: 1.5px; background: var(--color-gold); transition: transform 0.3s, opacity 0.3s; } .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile overlay */ .nav-mobile { position: fixed; inset: 0; background: var(--color-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; z-index: 1001; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .nav-mobile.open { opacity: 1; pointer-events: all; } .nav-mobile a { font-family: var(--font-display); font-size: 2rem; color: var(--color-text); opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s, color 0.3s; } .nav-mobile.open a { opacity: 1; transform: translateY(0); } .nav-mobile a:hover { color: var(--color-gold); } @media (max-width: 1024px) { .nav-links { display: none; } .nav-hamburger { display: flex; } } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; padding: 14px 32px; border-radius: 100px; transition: all 0.3s; position: relative; overflow: hidden; } .btn-primary { background: var(--color-gold); color: var(--color-bg); } .btn-primary:hover { background: var(--color-gold-light); } .btn-outline { border: 1px solid var(--color-gold); color: var(--color-gold); background: transparent; } .btn-outline:hover { background: var(--color-gold); color: var(--color-bg); } .btn-text { color: var(--color-gold); padding: 0; font-size: 0.85rem; } .btn-text:hover { color: var(--color-gold-light); } /* Shimmer effect on primary buttons */ .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transition: none; } .btn-primary:hover::before { animation: shimmer 0.6s ease forwards; } @keyframes shimmer { to { left: 100%; } } /* --- Cards --- */ .card { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 12px; padding: 40px 32px; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; } .card:hover { transform: translateY(-4px); border-color: var(--color-border-gold); box-shadow: 0 12px 40px rgba(0,0,0,0.4); } /* --- Scroll Animation --- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* --- Card Scroll Reveal (staggered) — POP entrance --- */ .card-reveal { opacity: 0; transform: translateY(40px) scale(0.88); transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .card-reveal.card-visible { opacity: 1; transform: translateY(0) scale(1); } /* --- Iframe Preview Reveal System --- */ /* Shared iframe base: hidden behind gradient, scaled to cover. Matches both .preview-iframe and .theme-preview-iframe (work.html naming). */ .preview-iframe, .theme-preview-iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: none; pointer-events: none; z-index: 0; opacity: 0; transform-origin: top left; transition: opacity 0.4s ease; } /* Gradient overlay sits above iframe. .preview-gradient is the canonical class; .work-item > .preview is how work.html actually marks it up. */ .preview-gradient, .work-item > .preview { position: relative; z-index: 1; opacity: 1; transition: none; } /* Phase: ENTERING — iframe visible, gradient invisible (the glimpse) */ .iframe-entering .preview-iframe, .iframe-entering .theme-preview-iframe { opacity: 1; } .iframe-entering .preview-gradient, .iframe-entering > .preview { opacity: 0 !important; transition: none; } /* Phase: COVERING — gradient fades back in (800ms ease-in-out after 400ms) */ .iframe-covering .preview-iframe, .iframe-covering .theme-preview-iframe { opacity: 1; } .iframe-covering .preview-gradient, .iframe-covering > .preview { opacity: 1; transition: opacity 0.8s ease-in-out; } /* Phase: SETTLED — default resting state, hover takes over */ .iframe-settled .preview-iframe, .iframe-settled .theme-preview-iframe { opacity: 0; transition: opacity 0.4s ease; } .iframe-settled .preview-gradient, .iframe-settled > .preview { opacity: 1; transition: none; } /* Desktop hover spotlight: iframe shows through mask hole */ @media (pointer: fine) { .iframe-settled:hover .preview-iframe, .iframe-settled:hover .theme-preview-iframe { opacity: 1; } .iframe-settled:hover .preview-gradient, .iframe-settled:hover > .preview { -webkit-mask-image: radial-gradient( circle 120px at var(--mx, -9999px) var(--my, -9999px), transparent 0%, transparent 40%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.8) 78%, black 100% ); mask-image: radial-gradient( circle 120px at var(--mx, -9999px) var(--my, -9999px), transparent 0%, transparent 40%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.8) 78%, black 100% ); } } /* Overlay text always on top */ .preview-overlay { position: relative; z-index: 2; } /* --- Mobile: scroll-scrubbed iframe reveal --- */ @media (max-width: 768px) { /* Hide the original desktop iframes — mobile uses its own pooled iframes */ .preview-iframe, .theme-preview-iframe, iframe.cs-iframe { display: none !important; } /* Mobile scrub frame: created by JS, positioned behind gradient */ .msf-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; } .msf-wrap iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: none; pointer-events: none; transform-origin: top left; } /* Gradient: JS sets opacity inline, small transition smooths jitter */ .work-item > .preview, .cs-card .cs-preview { transition: opacity 0.12s linear !important; } /* Override phase classes — scroll handles everything on mobile */ .iframe-entering .preview-gradient, .iframe-covering .preview-gradient, .iframe-settled .preview-gradient, .iframe-entering > .preview, .iframe-covering > .preview, .iframe-settled > .preview { transition: opacity 0.12s linear !important; } } /* --- Page Transition --- */ .page-transition { animation: pageIn 0.5s ease forwards; } @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } .page-exit { animation: pageOut 0.3s ease forwards; } @keyframes pageOut { from { opacity: 1; } to { opacity: 0; } } /* --- Footer --- */ .footer { border-top: 1px solid var(--color-border-gold); padding: 80px 0 40px; background: var(--color-bg); } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; } .footer-logo { display: flex; align-items: baseline; gap: 6px; font-size: 1.5rem; } .footer-logo .lustre { font-family: var(--font-display); font-style: italic; font-weight: 500; } .footer-logo .dot { color: var(--color-gold); font-size: 0.6rem; } .footer-logo .digital { font-family: var(--font-body); font-weight: 300; color: var(--color-text-2); font-size: 1rem; } .footer-tagline { font-style: italic; font-family: var(--font-display); color: var(--color-text-3); font-size: 1rem; margin-top: -24px; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .footer-links a { font-size: 0.85rem; color: var(--color-text-2); transition: color 0.3s; } .footer-links a:hover { color: var(--color-gold); } .footer-social { display: flex; gap: 20px; } .footer-social a { font-size: 0.8rem; color: var(--color-text-3); letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.3s; } .footer-social a:hover { color: var(--color-gold); } .footer-bottom { font-size: 0.75rem; color: var(--color-text-3); line-height: 1.8; } .footer-craft { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-3); margin-top: 24px; } /* --- Hero Shared --- */ .hero { position: relative; display: block; min-height: auto; overflow: hidden; } .hero-short { min-height: 50vh; } .hero-xs { min-height: 40vh; } /* ---------- HERO GRADIENT BACKGROUND ---------- */ .hero-gradient { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 80% 70% at 10% 90%, rgba(168,131,74,0.22) 0%, transparent 55%), radial-gradient(ellipse 70% 60% at 88% 12%, rgba(201,169,110,0.16) 0%, transparent 50%), radial-gradient(ellipse 40% 40% at 50% 50%, rgba(30,24,16,0.5) 0%, transparent 70%), var(--color-bg); background-size: 200% 200%, 200% 200%, 100% 100%, 100% 100%; animation: heroGradientShift 25s ease-in-out infinite; will-change: background-position; } @keyframes heroGradientShift { 0% { background-position: 0% 100%, 100% 0%, 50% 50%, 0% 0%; } 25% { background-position: 20% 80%, 80% 20%, 50% 50%, 0% 0%; } 50% { background-position: 40% 60%, 60% 40%, 50% 50%, 0% 0%; } 75% { background-position: 20% 80%, 80% 20%, 50% 50%, 0% 0%; } 100% { background-position: 0% 100%, 100% 0%, 50% 50%, 0% 0%; } } /* ---------- FILM GRAIN NOISE ---------- */ .hero-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E"); background-size: 256px 256px; animation: grainDrift 8s steps(10) infinite; } @keyframes grainDrift { 0% { transform: translate(0, 0); } 10% { transform: translate(-5%, -5%); } 20% { transform: translate(3%, -8%); } 30% { transform: translate(-7%, 2%); } 40% { transform: translate(5%, 5%); } 50% { transform: translate(-3%, 7%); } 60% { transform: translate(7%, -3%); } 70% { transform: translate(-5%, 5%); } 80% { transform: translate(3%, -5%); } 90% { transform: translate(-2%, 3%); } 100% { transform: translate(0, 0); } } /* Noise on subpages (fallback for pages that still use ::before) */ .hero-short::before, .hero-xs::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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' 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"); background-size: 128px 128px; pointer-events: none; z-index: 1; } .hero .container { position: relative; z-index: 2; } /* ---------- HERO SPLIT LAYOUT ---------- */ .hero-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; width: 100%; padding-top: calc(var(--nav-height) + 32px); padding-bottom: 80px; } /* Holiday banner takes its own flow space, so reduce hero clearance to avoid stacking nav-height padding on top of the banner */ .has-holiday-banner .hero-split { padding-top: 24px; } .hero-copy { max-width: 640px; } /* ---------- HERO ENTRANCE ANIMATIONS ---------- */ .hero-label { animation: heroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.2s; opacity: 0; } .hero-headline { margin-top: 20px; margin-bottom: 24px; letter-spacing: -0.02em; line-height: 1.08; color: var(--color-text); } .hero-sub { animation: heroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.85s; opacity: 0; font-size: 1.1rem; line-height: 1.7; max-width: 48ch; } .hero-ctas { animation: heroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 1.05s; opacity: 0; margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap; } @keyframes heroIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* ---------- HEADLINE WORD STAGGER ---------- */ .hero-headline span { display: inline-block; opacity: 0; animation: wordIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes wordIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Gold shimmer — sweeps over headline after words appear. Uses a pseudo-element overlay so it never touches the h1's opacity. */ .hero-headline { position: relative; } .hero-headline.shimmer-active::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 100deg, transparent 0%, transparent 35%, rgba(232,201,138,0.18) 48%, rgba(201,169,110,0.28) 50%, rgba(232,201,138,0.18) 52%, transparent 65%, transparent 100% ); background-size: 250% 100%; animation: textShimmer 2.5s ease-in-out forwards; pointer-events: none; z-index: 1; } @keyframes textShimmer { 0% { background-position: 150% center; } 100% { background-position: -50% center; } } /* ---------- QUOTE BUTTON GLOW ---------- */ .hero-glow-btn { box-shadow: 0 0 0 0 rgba(201,169,110,0); animation: glowPulse 3s ease-in-out 1.8s infinite; } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,169,110,0); } 50% { box-shadow: 0 0 24px 4px rgba(201,169,110,0.2); } } /* ---------- HERO TRUST SIGNALS ---------- */ .hero-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 36px; } .hero-trust-item { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-3); opacity: 0; animation: trustIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; position: relative; padding-left: 14px; } .hero-trust-item::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--color-gold); opacity: 0.5; transform: translateY(-50%); } @keyframes trustIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---------- HERO SHOWCASE (RIGHT SIDE) ---------- */ .hero-showcase { --reel-accent: 232, 129, 58; perspective: 1200px; display: flex; align-items: center; justify-content: center; position: relative; animation: heroIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.6s; opacity: 0; } .hero-showcase::before { content: ''; position: absolute; inset: 8% -8% 0 10%; background: radial-gradient(ellipse at center, rgba(var(--reel-accent), 0.2), transparent 66%); filter: blur(26px); opacity: 0.72; transition: background 0.65s ease; pointer-events: none; } .showcase-browser { width: 100%; max-width: 560px; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-bg-2); box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--reel-accent),0.12), 0 0 90px rgba(var(--reel-accent),0.08); transform: perspective(1200px) rotateY(calc(-4deg + var(--tilt-x, 0deg))) rotateX(calc(2deg + var(--tilt-y, 0deg))); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.65s ease; will-change: transform; position: relative; z-index: 2; } .showcase-browser:hover, .showcase-browser:focus-within { transform: perspective(1200px) rotateY(calc(-2deg + var(--tilt-x, 0deg))) rotateX(calc(1deg + var(--tilt-y, 0deg))) scale(1.012); } /* Chrome bar */ .showcase-chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--color-bg-3); border-bottom: 1px solid var(--color-border); } .chrome-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-3); opacity: 0.3; } .chrome-dot:nth-child(1) { background: #ff5f57; opacity: 0.6; } .chrome-dot:nth-child(2) { background: #febc2e; opacity: 0.6; } .chrome-dot:nth-child(3) { background: #28c840; opacity: 0.6; } .chrome-url { margin-left: 10px; font-size: 0.65rem; color: var(--color-text-3); font-family: var(--font-body); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reel-counter { margin-left: auto; color: var(--color-text-3); font-size: 0.6rem; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Screen area */ .showcase-screen { position: relative; width: 100%; padding-bottom: 62.5%; overflow: hidden; -webkit-overflow-scrolling: auto; clip-path: inset(0 round 0); background: var(--color-bg); } .showcase-slide { position: absolute; inset: 0; opacity: 0; transform: translate3d(30px, -8px, 0) scale(1.025); transition: opacity 0.62s ease, transform 0.68s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; pointer-events: none; z-index: 0; } .showcase-slide.showcase-active, .showcase-slide.is-entering { opacity: 1; transform: translate3d(0, 0, 0) scale(1); pointer-events: auto; z-index: 1; } .showcase-slide.is-leaving { opacity: 0; transform: translate3d(-22px, 10px, 0) scale(0.985); z-index: 2; } .showcase-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #0a0a0a; } /* Project caption and controls */ .reel-footer { min-height: 68px; padding: 11px 12px 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--color-border); background: rgba(18, 18, 18, 0.98); } .reel-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .reel-copy span { color: rgb(var(--reel-accent)); font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0; transition: color 0.65s ease; } .reel-copy strong { color: var(--color-text); font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; letter-spacing: 0; } .reel-controls { display: flex; gap: 6px; flex: 0 0 auto; } .reel-arrow { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: var(--color-text-2); font-size: 1rem; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .reel-arrow:hover, .reel-arrow:focus-visible { color: #fff; border-color: rgba(var(--reel-accent), 0.7); background: rgba(var(--reel-accent), 0.1); outline: none; } .reel-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 0 12px 10px; background: rgba(18, 18, 18, 0.98); } .reel-segment { height: 10px; padding: 4px 0; border: 0; background: transparent; cursor: pointer; } .reel-segment::before { content: ''; display: block; width: 100%; height: 2px; background: rgba(255,255,255,0.14); } .reel-segment span { display: block; width: 0; height: 2px; margin-top: -2px; background: rgb(var(--reel-accent)); } .reel-segment.is-complete span { width: 100%; } .reel-segment.is-active span { animation: reelProgress var(--reel-duration, 6500ms) linear forwards; } .hero-reel.is-paused .reel-segment.is-active span { animation-play-state: paused; } .reel-segment:focus-visible { outline: 1px solid rgb(var(--reel-accent)); outline-offset: 1px; } @keyframes reelProgress { from { width: 0; } to { width: 100%; } } /* ---------- PHONE MOCKUP ---------- */ .showcase-phone { position: absolute; bottom: -18px; left: -32px; width: 152px; height: auto; aspect-ratio: 500 / 1083; box-sizing: content-box; translate: var(--phone-shift-x, 0px) var(--phone-shift-y, 0px); rotate: var(--phone-rotate, 0deg); background: #1a1a1a; border-radius: 24px; border: 3px solid #333; box-shadow: 0 15px 40px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05); overflow: hidden; z-index: 3; animation: heroIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 1s; opacity: 0; transition: translate 0.48s cubic-bezier(0.16, 1, 0.3, 1), rotate 0.48s cubic-bezier(0.16, 1, 0.3, 1); } .phone-notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 40px; height: 8px; background: #0a0a0a; border-radius: 8px; z-index: 2; } .phone-screen { position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-overflow-scrolling: auto; clip-path: inset(0 round 21px); border-radius: 21px; background: #0a0a0a; } .phone-slide { position: absolute; inset: 0; opacity: 0; transform: translate3d(12px, -5px, 0) scale(1.02); transition: opacity 0.55s ease 0.1s, transform 0.62s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; } .phone-slide.phone-active, .phone-slide.is-entering { opacity: 1; transform: translate3d(0, 0, 0) scale(1); z-index: 1; } .phone-slide.is-leaving { opacity: 0; transform: translate3d(-10px, 5px, 0) scale(0.99); } .phone-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #0a0a0a; } /* ---------- SCROLL INDICATOR ---------- */ .scroll-indicator { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; animation: heroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 1.4s; opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; } .scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--color-gold), transparent); animation: scrollPulse 2.5s ease-in-out infinite; transform-origin: top; } @keyframes scrollPulse { 0%, 100% { opacity: 0.2; transform: scaleY(0.4); } 50% { opacity: 0.8; transform: scaleY(1); } } /* ---------- HERO RESPONSIVE ---------- */ @media (max-width: 1024px) { .hero-split { grid-template-columns: 1fr; gap: 48px; text-align: center; padding-bottom: 120px; } .hero-copy { max-width: 100%; min-width: 0; /* fix: grid-item min-content was overflowing & clipping hero text on mobile */ } .hero-sub { margin-left: auto; margin-right: auto; } .hero-ctas { justify-content: center; } .hero-trust { justify-content: center; } .hero-showcase { perspective: none; max-width: 480px; margin: 0 auto; } .showcase-browser { transform: none; } .showcase-browser:hover { transform: none; } .reel-footer { text-align: left; } .showcase-phone { width: 118px; height: auto; left: -20px; bottom: -14px; } } @media (max-width: 768px) { .hero { min-height: auto; } .hero .container { max-width: 100%; min-width: 0; } .hero-split { width: auto; max-width: 100%; padding-top: calc(var(--nav-height) + 24px); padding-bottom: 80px; gap: 32px; } .hero-headline { max-width: 100%; font-size: 2.5rem; letter-spacing: -0.01em; margin-top: 16px; margin-bottom: 16px; text-align: center; overflow-wrap: anywhere; } .hero-xs .hero-headline { font-size: 2.25rem; } .hero-headline > .stagger-words { display: block; width: 100%; max-width: 100%; white-space: normal; } .hero-label { display: block; max-width: 100%; font-size: 0.68rem; line-height: 1.6; overflow-wrap: anywhere; } .hero-copy { width: 100%; max-width: 100%; min-width: 0; text-align: center; } .hero-sub { font-size: 1rem; } .hero-ctas { width: 100%; max-width: 100%; flex-direction: column; gap: 12px; margin-top: 24px; } .hero-ctas .btn { width: 100%; max-width: 100%; justify-content: center; min-height: 52px; font-size: 1rem; } .hero-grain { display: none; } .hero-blob { display: none; } .hero-gradient { animation: none; } /* Show showcase on mobile — centred, matches desktop layout */ .hero-showcase { display: flex !important; perspective: none; max-width: 88vw; width: 100%; margin: 0 auto; padding-bottom: 20px; padding-left: 20px; } .showcase-browser { transform: none; max-width: 100%; } .showcase-browser:hover { transform: none; } .showcase-chrome { padding: 8px 10px; } .chrome-url { margin-left: 5px; max-width: 58%; } .reel-footer { min-height: 60px; padding: 8px 8px 7px 12px; text-align: left; } .reel-copy span { font-size: 0.5rem; } .reel-copy strong { font-size: 0.92rem; } .reel-arrow { width: 34px; height: 34px; } .reel-progress { padding: 0 8px 7px; } .showcase-phone { width: 86px; height: auto; left: -18px; bottom: 20px; border-width: 2px; border-radius: 16px; } .showcase-phone .phone-notch { width: 28px; height: 5px; top: 4px; } .showcase-phone .phone-screen { border-radius: 14px; } /* Trust bar: horizontal scroll on mobile */ .hero-trust { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 16px; padding-bottom: 4px; margin-top: 28px; justify-content: flex-start; } .hero-trust::-webkit-scrollbar { display: none; } .hero-trust-item { flex-shrink: 0; font-size: 0.68rem; } .scroll-indicator { display: none; } } @media (max-width: 480px) { .cookie-inner { gap: 14px; } .cookie-inner p { min-width: 0; width: 100%; } .cookie-buttons { width: 100%; } .cookie-buttons button { flex: 1; min-height: 44px; } } /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion: reduce) { .hero-gradient { animation: none; } .hero-grain { animation: none; display: none; } .hero-label, .hero-headline, .hero-headline span, .hero-sub, .hero-ctas, .hero-trust-item, .hero-showcase, .scroll-indicator { animation: none; opacity: 1; transform: none; } .hero-headline.shimmer-active::after { animation: none; display: none; } .hero-glow-btn { animation: none; } .showcase-slide { transition: none; transform: none; } .showcase-slide.showcase-active, .showcase-slide.is-entering, .showcase-slide.is-leaving, .phone-slide, .phone-slide.phone-active, .phone-slide.is-entering, .phone-slide.is-leaving { transition: none; transform: none; } .showcase-phone { translate: 0 0; rotate: 0deg; transition: none; } .scroll-line { animation: none; opacity: 0.5; } .reel-segment.is-active span { animation: none; width: 100%; } } /* ---------- HERO BLOBS (subpages) ---------- */ .hero-blob { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; } .hero-blob-1 { width: 600px; height: 600px; background: var(--color-gold-dark); opacity: 0.04; top: -20%; left: -10%; animation: blobMove1 20s ease-in-out infinite; } .hero-blob-2 { width: 400px; height: 400px; background: var(--color-gold); opacity: 0.03; bottom: -10%; right: -5%; animation: blobMove2 25s ease-in-out infinite; } @keyframes blobMove1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, 40px); } } @keyframes blobMove2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-40px, -30px); } } /* --- Marquee --- */ .marquee { overflow: hidden; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 16px 0; white-space: nowrap; } .marquee-inner { display: inline-flex; animation: marquee 30s linear infinite; } .marquee-item { font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-2); padding: 0 24px; } .marquee-item .diamond { color: var(--color-gold); margin-right: 12px; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- Section Headers --- */ .section-header { margin-bottom: 60px; } .section-header .label { margin-bottom: 16px; display: block; } .section-header h2 { margin-bottom: 16px; } .section-header p { font-size: 1.05rem; } /* --- Grid Utilities --- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* --- Service Cards (with icons + continuous motion) --- */ .service-card { position: relative; overflow: hidden; } /* Subtle shifting gradient background — always moving */ .service-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse 80% 60% at var(--gx, 30%) var(--gy, 30%), rgba(201, 169, 110, 0.06) 0%, transparent 70% ); transition: --gx 3s ease, --gy 3s ease; animation: cardGlow 8s ease-in-out infinite; pointer-events: none; border-radius: inherit; } @keyframes cardGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* Stagger the glow animation per card */ .service-card:nth-child(1)::before { animation-delay: 0s; } .service-card:nth-child(2)::before { animation-delay: 2s; } .service-card:nth-child(3)::before { animation-delay: 4s; } .service-card:nth-child(4)::before { animation-delay: 6s; } .service-card .icon { width: 48px; height: 48px; margin-bottom: 20px; color: var(--color-gold); animation: iconFloat 6s ease-in-out infinite; will-change: transform; } /* Stagger icon float per card */ .service-card:nth-child(1) .icon { animation-delay: 0s; } .service-card:nth-child(2) .icon { animation-delay: 1.5s; } .service-card:nth-child(3) .icon { animation-delay: 3s; } .service-card:nth-child(4) .icon { animation-delay: 4.5s; } @keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Enhanced hover — bigger lift, icon glow */ .service-card:hover { transform: translateY(-8px); border-color: var(--color-gold); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(201, 169, 110, 0.08); } .service-card:hover .icon { animation-play-state: paused; transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(201, 169, 110, 0.4)); transition: transform 0.3s ease, filter 0.3s ease; } .service-card:hover .btn-text { color: var(--color-gold-light); letter-spacing: 0.12em; } .service-card h3 { margin-bottom: 12px; font-size: 1.4rem; } .service-card p { font-size: 0.95rem; margin-bottom: 20px; } /* --- Portfolio Grid --- */ .portfolio-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } .portfolio-item { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; } .portfolio-item .preview { width: 100%; padding-bottom: 75%; border-radius: 12px; } .portfolio-item .overlay { position: absolute; inset: 0; background: rgba(10,10,10,0.85); display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; border-radius: 12px; } .portfolio-item:hover .overlay { opacity: 1; transform: translateY(0); } .portfolio-item .overlay h3 { font-size: 1.5rem; margin-bottom: 4px; } .portfolio-item .overlay .tag { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 12px; } /* Portfolio sizing — editorial asymmetric */ .portfolio-item.full { grid-column: span 12; } .portfolio-item.half { grid-column: span 6; } .portfolio-item.third { grid-column: span 4; } .portfolio-item.two-thirds { grid-column: span 8; } @media (max-width: 768px) { .portfolio-item.full, .portfolio-item.half, .portfolio-item.third, .portfolio-item.two-thirds { grid-column: span 12; } } /* --- Stats --- */ .stats { display: flex; justify-content: center; gap: 80px; text-align: center; flex-wrap: wrap; } .stat-item .number { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5rem); font-weight: 400; color: var(--color-text); display: block; border-bottom: 2px solid var(--color-gold); padding-bottom: 8px; margin-bottom: 8px; } .stat-item .stat-label { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-2); } /* --- Process Timeline --- */ .timeline { display: flex; gap: 0; position: relative; } .timeline::before { content: ''; position: absolute; top: 28px; left: 0; right: 0; height: 1px; background: var(--color-border); } .timeline-step { flex: 1; text-align: center; position: relative; padding: 0 16px; } .timeline-step .step-number { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-gold); background: var(--color-bg); display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid var(--color-border-gold); border-radius: 50%; position: relative; z-index: 1; margin-bottom: 20px; } .timeline-step h4 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 8px; } .timeline-step p { font-size: 0.85rem; color: var(--color-text-3); max-width: 200px; margin: 0 auto; } @media (max-width: 768px) { .timeline { flex-direction: column; gap: 40px; } .timeline::before { top: 0; bottom: 0; left: 28px; right: auto; width: 1px; height: 100%; } .timeline-step { text-align: left; padding-left: 80px; } .timeline-step .step-number { position: absolute; left: 0; } } /* --- Theme Horizontal Scroller --- */ .theme-scroller { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px 0; cursor: grab; -ms-overflow-style: none; scrollbar-width: none; } .theme-scroller::-webkit-scrollbar { display: none; } .theme-scroller:active { cursor: grabbing; } .theme-card { flex: 0 0 280px; scroll-snap-align: start; background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: transform 0.3s, border-color 0.3s; } .theme-card:hover { transform: translateY(-4px); border-color: var(--color-border-gold); } .theme-card .preview { width: 100%; height: 200px; } .theme-card-info { padding: 20px; } .theme-card-info h4 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 4px; } .theme-card-info .niche { font-size: 0.75rem; color: var(--color-text-3); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .theme-card-info .price { color: var(--color-gold); font-weight: 500; font-size: 0.95rem; } /* --- Testimonials Carousel --- */ .testimonials-carousel { position: relative; overflow: hidden; } .testimonials-track { display: flex; transition: transform 0.5s ease; } .testimonial-card { flex: 0 0 100%; padding: 0 40px; text-align: center; } .testimonial-card .quote-mark { font-family: var(--font-display); font-size: 5rem; color: var(--color-gold); line-height: 1; margin-bottom: -20px; opacity: 0.5; } .testimonial-card blockquote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: var(--color-text); margin-bottom: 24px; max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.6; } .testimonial-card cite { font-family: var(--font-body); font-style: normal; font-size: 0.85rem; color: var(--color-text-3); } .carousel-dots { display: flex; justify-content: center; gap: 12px; margin-top: 32px; } .carousel-dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); transition: background 0.3s, transform 0.3s; } .carousel-dots button.active { background: var(--color-gold); transform: scale(1.3); } /* --- CTA Section --- */ .cta-section { text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); opacity: 0.4; } .cta-section h2 { margin-bottom: 20px; } .cta-section p { margin: 0 auto 32px; text-align: center; } /* --- Pricing Cards --- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .pricing-card { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 12px; padding: 48px 32px; position: relative; transition: border-color 0.3s; display: flex; flex-direction: column; } .pricing-card .btn { margin-top: auto; } .pairs-with-link { display: block; text-align: center; margin-top: 12px; font-size: 0.8rem; color: var(--color-gold); opacity: 0.7; transition: opacity 0.3s; text-decoration: none; } .pairs-with-link:hover { opacity: 1; } .pricing-card:hover { border-color: var(--color-border-gold); } .pricing-card.popular { border-color: var(--color-gold); transform: translateY(-8px); } .pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--color-gold); color: var(--color-bg); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 16px; border-radius: 100px; } .pricing-card h3 { font-size: 1.6rem; margin-bottom: 4px; } .pricing-card .price { font-family: var(--font-display); font-size: 2rem; color: var(--color-gold); margin-bottom: 4px; } .pricing-card .price-sub { font-size: 0.8rem; color: var(--color-text-3); margin-bottom: 24px; } .pricing-card ul { margin-bottom: 32px; flex-grow: 1; } .pricing-card li { font-size: 0.9rem; color: var(--color-text-2); padding: 8px 0; border-bottom: 1px solid var(--color-border); padding-left: 20px; position: relative; } .pricing-card li::before { content: '✦'; position: absolute; left: 0; color: var(--color-gold); font-size: 0.6rem; top: 10px; } /* --- Managed Trade Pricing --- */ .focused-offers-grid { grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr); align-items: start; } .trade-pricing-card { padding: 40px 32px 34px; overflow: visible; } .trade-pricing-card .pricing-badge { white-space: nowrap; } .trade-pricing { display: flex; flex-direction: column; min-width: 0; height: 100%; } .pricing-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: min(100%, 330px); min-height: 52px; margin: 0 auto 30px; padding: 4px; border: 1px solid var(--color-border-gold); border-radius: 999px; background: rgba(255, 255, 255, 0.025); } .pricing-toggle button { min-height: 44px; padding: 10px 22px; border-radius: 999px; color: var(--color-text-2); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; transition: color 180ms ease-out, background-color 180ms ease-out, box-shadow 180ms ease-out; } .pricing-toggle button:hover { color: var(--color-text); } .pricing-toggle button[aria-selected="true"] { color: var(--color-bg); background: var(--color-gold); box-shadow: 0 8px 24px rgba(201, 169, 110, 0.16); } .pricing-toggle button:focus-visible, .trade-tier-link:focus-visible, .pricing-terms-link:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 3px; } .trade-pricing-panel { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; } .trade-pricing-panel[hidden] { display: none; } .trade-pricing-panel.is-entering { animation: pricing-panel-in 200ms ease-out both; } @keyframes pricing-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .trade-pricing-heading { margin-bottom: 4px; } .trade-pricing-intro { margin-bottom: 22px; color: var(--color-text-2); font-size: 0.9rem; } .trade-tier-list { display: grid; gap: 10px; } .trade-tier { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: start; padding: 20px; border: 1px solid var(--color-border); border-radius: 10px; background: rgba(255, 255, 255, 0.015); transition: border-color 180ms ease-out, background-color 180ms ease-out; } .trade-tier:hover { border-color: var(--color-border-gold); background: rgba(201, 169, 110, 0.025); } .trade-tier.is-featured { border-color: rgba(201, 169, 110, 0.58); background: linear-gradient(135deg, rgba(201, 169, 110, 0.09), rgba(201, 169, 110, 0.025)); } .trade-tier-main { min-width: 0; grid-row: 1 / span 2; } .trade-tier-titleline { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 4px; } .trade-tier h4 { margin: 0; color: var(--color-text); font-family: var(--font-display); font-size: 1.28rem; line-height: 1.15; } .trade-tier-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border-radius: 999px; background: var(--color-gold); color: var(--color-bg); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.11em; line-height: 1; text-transform: uppercase; } .trade-tier-price { color: var(--color-gold); font-family: var(--font-display); font-size: 1.8rem; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; } .trade-tier-price span { color: var(--color-text-2); font-family: var(--font-body); font-size: 0.68rem; } .trade-tier-role { margin: 0 0 8px; color: var(--color-text); font-size: 0.95rem; line-height: 1.45; } .trade-tier-term { margin-bottom: 7px; color: var(--color-gold-light); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .trade-tier .trade-tier-features { display: grid; margin: 10px 0 0; flex-grow: 0; } .trade-tier .trade-tier-features li { padding: 7px 0 7px 20px; color: var(--color-text-2); font-size: 0.9rem; line-height: 1.5; } .trade-tier .trade-tier-features li::before { top: 11px; font-size: 0.6rem; } .trade-tier-link { grid-column: 2; align-self: end; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 14px; border: 1px solid var(--color-border-gold); border-radius: 999px; color: var(--color-gold-light); font-size: 0.72rem; font-weight: 500; line-height: 1.2; text-align: center; white-space: nowrap; transition: color 180ms ease-out, border-color 180ms ease-out, background-color 180ms ease-out; } .trade-tier-link:hover { border-color: var(--color-gold); color: var(--color-bg); background: var(--color-gold); } .trade-plan-note { margin: 18px 0 0; color: var(--color-text-2); font-size: 0.82rem; line-height: 1.6; } .pricing-terms-link { color: var(--color-gold-light); text-decoration: underline; text-decoration-color: rgba(201, 169, 110, 0.4); text-underline-offset: 3px; } .trade-upfront-price { margin: 4px 0; color: var(--color-gold); font-family: var(--font-display); font-size: 2.3rem; line-height: 1.1; } .trade-upfront-term, .hall-payment-label { margin-bottom: 18px; color: var(--color-gold-light); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .trade-upfront-panel ul { margin-bottom: 20px; } .trade-upfront-panel .btn { margin-top: 6px; } .trade-pricing-section .trade-pricing-card { width: min(100%, 920px); margin: 0 auto; } .trade-pricing-section .trade-tier { grid-template-columns: minmax(0, 1fr) auto; } @media (max-width: 1080px) { .focused-offers-grid { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; } } @media (max-width: 640px) { .trade-pricing-card { padding: 38px 18px 24px; } .pricing-toggle { width: 100%; margin-bottom: 24px; } .pricing-toggle button { padding-inline: 12px; } .trade-tier, .trade-pricing-section .trade-tier { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; } .trade-tier-main { grid-row: auto; } .trade-tier-price { font-size: 1.65rem; } .trade-tier-link { grid-column: 1; width: 100%; margin-top: 3px; } } @media (prefers-reduced-motion: reduce) { .trade-pricing-panel.is-entering { animation: none; } .pricing-toggle button, .trade-tier, .trade-tier-link { transition: none; } } /* --- Coming Soon Cards --- */ .pricing-card.coming-soon { background: var(--color-bg-3); border-color: rgba(255,255,255,0.04); position: relative; overflow: hidden; } .pricing-card.coming-soon h3, .pricing-card.coming-soon .price { opacity: 0.5; } .pricing-card.coming-soon .price-sub { opacity: 0.4; } .pricing-card.coming-soon ul { opacity: 0.3; } .pricing-card.coming-soon li::before { content: '○'; color: var(--color-text-3); } .coming-soon-badge { display: inline-block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-3); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); padding: 6px 14px; border-radius: 100px; margin-bottom: 16px; } .coming-soon-reveal { position: absolute; inset: 0; background: rgba(14,17,23,0.95); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; opacity: 0; transition: opacity 0.4s ease; z-index: 2; } .coming-soon-reveal p { font-size: 0.9rem; color: var(--color-text-2); margin-bottom: 20px; max-width: 240px; } .pricing-card.coming-soon:hover .coming-soon-reveal { opacity: 1; } /* Mobile: auto-reveal on scroll via JS class */ .pricing-card.coming-soon.reveal-active .coming-soon-reveal { opacity: 1; } /* --- Interest Cards (available on request) --- */ .pricing-card.interest-card { background: var(--color-bg-3); border: 1px dashed var(--color-border); } .pricing-card.interest-card .price { color: var(--color-gold); font-size: 1.4rem; } .pricing-grid-3 { grid-template-columns: repeat(3, 1fr); row-gap: 32px; } .pricing-grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .pricing-grid-3 { grid-template-columns: 1fr; max-width: 480px; } .pricing-grid-4 { grid-template-columns: 1fr; } .pricing-card.popular { transform: none; } } /* --- FAQ Accordion --- */ .faq-item { border-bottom: 1px solid var(--color-border); } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 24px 0; font-family: var(--font-display); font-size: 1.2rem; color: var(--color-text); text-align: left; cursor: pointer; transition: color 0.3s; } .faq-question:hover { color: var(--color-gold); } .faq-arrow { width: 16px; height: 16px; color: var(--color-gold); transition: transform 0.3s; flex-shrink: 0; } .faq-item.open .faq-arrow { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; } .faq-item.open .faq-answer { max-height: 500px; padding-bottom: 24px; } .faq-answer p { font-size: 0.95rem; line-height: 1.7; } /* --- Contact Form --- */ .form-group { margin-bottom: 24px; } .form-group label { display: block; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-3); margin-bottom: 8px; } .form-group input, .form-group select, .form-group textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--color-border); color: var(--color-text); font-family: var(--font-body); font-size: 1rem; padding: 12px 0; transition: border-color 0.3s; outline: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-bottom-color: var(--color-gold); } .form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23706860' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; padding-right: 20px; } .form-group select option { background: var(--color-bg-2); color: var(--color-text); } .form-group textarea { min-height: 120px; resize: vertical; } .form-error { font-size: 0.78rem; color: #e74c3c; margin-top: 6px; display: none; } .form-group.error .form-error { display: block; } .form-group.error input, .form-group.error select, .form-group.error textarea { border-color: #e74c3c; box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.15); } .form-success { text-align: center; padding: 60px 20px; } .form-success h3 { font-size: 2rem; margin-bottom: 12px; } /* --- Google Search Mockup (SEO page) --- */ .search-mockup { background: var(--color-bg-3); border-radius: 12px; padding: 24px; border: 1px solid var(--color-border); } .search-mockup .url { font-size: 0.8rem; color: var(--color-text-3); margin-bottom: 4px; } .search-mockup .title { font-size: 1.1rem; color: #8ab4f8; margin-bottom: 4px; } .search-mockup .desc { font-size: 0.85rem; color: var(--color-text-2); } /* --- Filter Bar --- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 48px; } .filter-btn { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-3); padding: 8px 0; position: relative; transition: color 0.3s; } .filter-btn::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--color-gold); transition: width 0.3s; } .filter-btn:hover, .filter-btn.active { color: var(--color-gold); } .filter-btn.active::after { width: 100%; } /* --- Masonry-ish Work Grid --- */ .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .work-item { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; } .work-item .preview { width: 100%; padding-bottom: 100%; border-radius: 12px; transition: transform 0.4s; } .work-item:hover .preview { transform: scale(1.03); } .work-item .overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(10,10,10,0.9) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; opacity: 0; transition: opacity 0.4s ease-out; transform: translateZ(0); will-change: opacity; } .work-item:hover .overlay { opacity: 1; } .work-item.tall .preview { padding-bottom: 130%; } .work-item.wide { grid-column: span 2; } .work-item.wide .preview { padding-bottom: 50%; } @media (max-width: 768px) { .work-grid { grid-template-columns: 1fr; } .work-item.wide { grid-column: span 1; } .work-item.wide .preview { padding-bottom: 75%; } .work-item.tall .preview { padding-bottom: 100%; } /* Overlay always visible on touch — no hover */ .work-item .overlay { opacity: 1; background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.3) 40%, transparent 60%); } .work-item .overlay .btn-text { display: none; } } /* --- Process Page Steps --- */ .process-step { display: grid; grid-template-columns: 100px 1fr; gap: 40px; padding: 60px 0; border-bottom: 1px solid var(--color-border); } .process-step .step-num { font-family: var(--font-display); font-size: 3rem; color: var(--color-gold); } .process-step h3 { font-size: 1.8rem; margin-bottom: 16px; } .process-step p { font-size: 1rem; line-height: 1.8; } @media (max-width: 768px) { .process-step { grid-template-columns: 1fr; gap: 16px; } } /* --- About Values --- */ .values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .value-item h3 { font-size: 1.4rem; margin-bottom: 12px; color: var(--color-gold); } .value-item p { font-size: 0.95rem; } @media (max-width: 768px) { .values-grid { grid-template-columns: 1fr; } } /* --- Add-ons List --- */ .addon-list li { padding: 16px 0; border-bottom: 1px solid var(--color-border); font-size: 0.95rem; color: var(--color-text-2); } .addon-list li strong { color: var(--color-text); } /* --- Trust Signals Row --- */ .trust-row { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 32px; } .trust-item { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-3); } .trust-item .diamond { color: var(--color-gold); margin-right: 8px; } /* --- Theme Preview Gradients --- */ .preview-aureate { background: linear-gradient(135deg, #1a1510 0%, #2a1f14 40%, #c9a96e 100%); } .preview-ember { background: linear-gradient(135deg, #1a0f0a 0%, #3a1a0a 40%, #e86830 100%); } .preview-soleil { background: linear-gradient(135deg, #faf5ee 0%, #f0e5d0 40%, #d4a85a 100%); } .preview-forge { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 40%, #e03030 100%); } .preview-petal { background: linear-gradient(135deg, #f5f0eb 0%, #e8d5d0 40%, #d4839a 100%); } .preview-lens { background: linear-gradient(135deg, #0a0a0a 0%, #222 40%, #666 100%); } .preview-knead { background: linear-gradient(135deg, #1a150e 0%, #3a2f20 40%, #c4a060 100%); } .preview-groom { background: linear-gradient(135deg, #e8f0f0 0%, #c0dada 40%, #40a0a0 100%); } .preview-ink { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2a 40%, #6040a0 100%); } .preview-nest { background: linear-gradient(135deg, #f0f2f0 0%, #d0d8d0 40%, #406850 100%); } .preview-polish { background: linear-gradient(135deg, #f8f0f4 0%, #e8d0e0 40%, #c888b0 100%); } .preview-zen { background: linear-gradient(135deg, #f0f2ee 0%, #d8ddd0 40%, #8aa880 100%); } /* --- Two Column Layout (contact, SEO) --- */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } @media (max-width: 768px) { .two-col { grid-template-columns: 1fr; gap: 48px; } } /* --- Theme Page Specifics --- */ .theme-hero { text-align: center; } .theme-hero h1 { font-size: clamp(3rem, 8vw, 6rem); margin-bottom: 8px; } .theme-hero .niche { font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 24px; } .theme-hero p { max-width: 600px; margin: 0 auto 32px; text-align: center; } .theme-hero .hero-ctas { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .theme-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .theme-features li { font-size: 0.9rem; color: var(--color-text-2); padding: 8px 0; padding-left: 20px; position: relative; } .theme-features li::before { content: '✦'; position: absolute; left: 0; color: var(--color-gold); font-size: 0.6rem; top: 10px; } @media (max-width: 768px) { .theme-features { grid-template-columns: 1fr; } } .theme-details dt { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-3); margin-bottom: 4px; } .theme-details dd { font-size: 0.95rem; color: var(--color-text-2); margin-bottom: 20px; } .theme-pricing { text-align: center; padding: 60px; background: var(--color-bg-2); border-radius: 12px; border: 1px solid var(--color-border); } .theme-pricing .price { font-family: var(--font-display); font-size: 3rem; color: var(--color-gold); margin-bottom: 8px; } /* Related themes */ .related-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 768px) { .related-themes { grid-template-columns: 1fr; } } /* --- Theme Live Preview Frame --- */ .theme-preview-frame { background: #0a0a0a; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; margin-top: 24px; } .theme-preview-frame .browser-bar { height: 36px; background: var(--color-bg-2); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; padding: 0 14px; gap: 7px; } .theme-preview-frame .browser-dot { width: 9px; height: 9px; border-radius: 50%; background: #2a2a2a; } .theme-preview-frame iframe { width: 100%; height: 70vh; border: none; display: block; } .theme-preview-actions { display: flex; justify-content: center; gap: 16px; margin-top: 20px; } /* --- Focus States (a11y) --- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; } /* --- Featured Case Study Card --- */ .featured-case-study { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; text-decoration: none; transition: border-color 0.3s, box-shadow 0.3s; margin-bottom: 48px; } .featured-case-study:hover { border-color: rgba(232,125,58,0.4); box-shadow: 0 8px 40px rgba(0,0,0,0.3); } .featured-case-study .preview-side { background: linear-gradient(135deg, #0f1114 0%, #161a1f 40%, #e87d3a 100%); min-height: 320px; transition: background 0.5s ease, transform 0.5s ease; } .featured-case-study:hover .preview-side { background: linear-gradient(135deg, #0f1114 0%, #1a1f26 30%, #e87d3a 80%, #f5a060 100%); transform: scale(1.02); } .featured-case-study:hover .btn-text { color: #e87d3a; } .featured-case-study .content-side { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; } .featured-case-study .badge { font-family: var(--font-body); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: #e87d3a; margin-bottom: 16px; } .featured-case-study h3 { font-size: 2rem; margin-bottom: 6px; } .featured-case-study .niche-tag { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 16px; } .featured-case-study p { margin-bottom: 20px; } @media (max-width: 768px) { .featured-case-study { grid-template-columns: 1fr; } .featured-case-study .preview-side { min-height: 200px; } .featured-case-study .content-side { padding: 32px 24px; } } /* --- RepairBench preview gradient --- */ .preview-repairbench { background: linear-gradient(135deg, #0f1114 0%, #161a1f 40%, #e87d3a 100%); } .preview-mobileinc { background: linear-gradient(135deg, #08080c 0%, #111115 40%, #e8813a 100%); } /* --- Case Study Cards (index page) --- */ .cs-card { transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important; } .cs-card:hover { transform: translateY(-6px) !important; border-color: rgba(232, 125, 58, 0.5) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(232, 125, 58, 0.1) !important; } .cs-card .cs-preview { transition: transform 0.5s ease, filter 0.5s ease; } .cs-card:hover .cs-preview { transform: scale(1.03); filter: brightness(1.1); } .cs-card .btn-text { transition: color 0.3s ease, letter-spacing 0.3s ease; } .cs-card:hover .btn-text { color: #e87d3a; letter-spacing: 0.18em; } /* --- Blog Cards (hub page) --- */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; } @media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } } .blog-card { background: var(--color-surface); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; transition: transform 0.3s ease, border-color 0.3s ease; } .blog-card:hover { transform: translateY(-4px); border-color: var(--color-gold); } .blog-card .blog-tag { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-gold); margin-bottom: 12px; font-weight: 600; } .blog-card h3 { font-size: 1.2rem; margin-bottom: 12px; line-height: 1.4; } .blog-card h3 a { color: var(--color-text); text-decoration: none; transition: color 0.2s ease; } .blog-card h3 a:hover { color: var(--color-gold); } .blog-card .blog-excerpt { font-size: 0.92rem; color: var(--color-muted); line-height: 1.65; flex: 1; margin-bottom: 20px; } .blog-card .btn-text { font-size: 0.85rem; color: var(--color-gold); text-decoration: none; letter-spacing: 0.08em; font-weight: 500; transition: letter-spacing 0.3s ease; } .blog-card .btn-text:hover { letter-spacing: 0.16em; } /* --- Blog Article Page --- */ .blog-article { max-width: 720px; margin: 0 auto; padding: 0 20px; } .blog-article .blog-meta { font-size: 0.82rem; color: var(--color-muted); margin-bottom: 32px; letter-spacing: 0.04em; } .blog-article h2 { font-size: 1.5rem; margin-top: 48px; margin-bottom: 16px; line-height: 1.3; } .blog-article p { font-size: 1rem; line-height: 1.75; color: var(--color-muted); margin-bottom: 20px; } .blog-article ul, .blog-article ol { margin: 16px 0 24px 24px; color: var(--color-muted); line-height: 1.75; } .blog-article li { margin-bottom: 8px; } .blog-article strong { color: var(--color-text); } .blog-article .blog-table { width: 100%; border-collapse: collapse; margin: 24px 0 32px; font-size: 0.92rem; } .blog-article .blog-table th, .blog-article .blog-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); } .blog-article .blog-table th { color: var(--color-gold); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; } .blog-article .blog-table td { color: var(--color-muted); } /* --- Utility --- */ .text-center { text-align: center; } .text-gold { color: var(--color-gold); } .mt-20 { margin-top: 20px; } .mt-40 { margin-top: 40px; } .mt-60 { margin-top: 60px; } .mb-0 { margin-bottom: 0; } .mx-auto { margin-left: auto; margin-right: auto; } /* --- Cookie Consent Banner --- */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--color-bg-2); border-top: 1px solid var(--color-border); padding: 20px 24px; display: none; animation: slideUp 0.4s ease forwards; } .cookie-banner.show { display: block; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .cookie-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .cookie-inner p { font-size: 0.85rem; color: var(--color-text-2); margin: 0; flex: 1; min-width: 280px; } .cookie-inner a { color: var(--color-gold); } .cookie-buttons { display: flex; gap: 12px; flex-shrink: 0; } .cookie-buttons button { padding: 10px 24px; font-size: 0.82rem; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.2s; font-family: var(--font-body); } .cookie-accept { background: var(--color-gold); color: #fff; border: 1px solid var(--color-gold); } .cookie-accept:hover { background: #b08d42; } .cookie-decline { background: transparent; color: var(--color-text-2); border: 1px solid var(--color-border); } .cookie-decline:hover { border-color: var(--color-text-3); } /* --- Breadcrumb Navigation --- */ .breadcrumb { padding: 16px 0 0; margin-top: var(--nav-height); } .breadcrumb + .hero { margin-top: 0; } .breadcrumb + .hero.hero-short { padding-top: 40px; } .breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; gap: 0; font-size: 0.8rem; color: var(--color-text-3); } .breadcrumb li { display: flex; align-items: center; } .breadcrumb li + li::before { content: "/"; margin: 0 8px; color: var(--color-border); } .breadcrumb a { color: var(--color-text-3); text-decoration: none; transition: color 0.2s; } .breadcrumb a:hover { color: var(--color-gold); } .breadcrumb [aria-current="page"] { color: var(--color-text-2); } /* --- Service Link Cards --- */ .service-link-card { display: block; padding: 28px 24px; background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 12px; text-decoration: none; transition: border-color 0.3s, transform 0.3s; } .service-link-card:hover { border-color: var(--color-gold); transform: translateY(-4px); } .service-link-card h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--color-text); margin-bottom: 8px; } .service-link-card p { font-size: 0.9rem; color: var(--color-text-2); line-height: 1.5; } /* ============================================================ v2 ADDITIONS (2026-04-17) — Testimonials grid, reviews badge, WhatsApp, sticky CTA, trust badges, exit intent, founder, pricing configurator, audit tool, mockup preview, add-ons. ============================================================ */ /* --- Reviews badge --- */ .reviews-badge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 999px; margin-bottom: 40px; font-size: 0.9rem; } .reviews-badge .stars { color: var(--color-gold); letter-spacing: 2px; } .reviews-badge .rating { font-weight: 500; color: var(--color-text); } .reviews-badge .rating-count { color: var(--color-text-3); font-size: 0.8rem; } /* --- Testimonials Grid (v2) --- */ .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 48px; } .testimonial-v2 { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 14px; padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; transition: border-color 0.3s, transform 0.3s; } .testimonial-v2:hover { border-color: var(--color-border-gold); transform: translateY(-4px); } .testimonial-v2 .stars { color: var(--color-gold); letter-spacing: 3px; font-size: 0.9rem; } .testimonial-v2 blockquote { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1.55; color: var(--color-text); margin: 0; } .testimonial-v2 cite { display: flex; align-items: center; gap: 12px; font-style: normal; margin-top: auto; } .testimonial-v2 .avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 0.9rem; font-family: var(--font-body); flex-shrink: 0; } .testimonial-v2 cite strong { display: block; color: var(--color-text); font-size: 0.95rem; font-weight: 500; } .testimonial-v2 cite span { display: block; font-size: 0.8rem; color: var(--color-text-3); } /* --- Case study metric pill on work tiles --- */ .work-item .metric-pill { position: absolute; top: 16px; right: 16px; background: rgba(201, 169, 110, 0.95); color: #0a0a0a; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; padding: 6px 10px; border-radius: 4px; z-index: 4; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } /* --- WhatsApp Float Button --- */ .whatsapp-float { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; z-index: 900; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); transition: transform 0.3s, box-shadow 0.3s; text-decoration: none; } .whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55); } .whatsapp-float svg { width: 28px; height: 28px; fill: #fff; } @media (max-width: 640px) { .whatsapp-float { bottom: 88px; } } /* --- Sticky Quote Bar --- */ .sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-bg); border-top: 1px solid var(--color-border-gold); padding: 14px 20px; display: flex; justify-content: center; align-items: center; gap: 20px; z-index: 850; transform: translateY(100%); transition: transform 0.4s ease; box-shadow: 0 -4px 20px rgba(0,0,0,0.3); } .sticky-cta.show { transform: translateY(0); } .sticky-cta p { margin: 0; font-size: 0.9rem; color: var(--color-text-2); } .sticky-cta p strong { color: var(--color-gold); } .sticky-cta .btn { padding: 10px 20px; font-size: 0.85rem; } .sticky-cta-close { background: none; border: none; color: var(--color-text-3); cursor: pointer; font-size: 1.1rem; padding: 4px 8px; } .sticky-cta-close:hover { color: var(--color-text); } @media (max-width: 640px) { .sticky-cta p { display: none; } } /* --- Founder Section --- */ .founder-section { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: center; padding: 40px 0; } .founder-photo { width: 240px; height: 240px; border-radius: 50%; background: linear-gradient(135deg, #c9a96e 0%, #8a6d3b 100%); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 5rem; color: #0a0a0a; overflow: hidden; border: 2px solid var(--color-border-gold); } .founder-photo img { width: 100%; height: 100%; object-fit: cover; } .founder-copy h3 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 8px; } .founder-copy .founder-title { display: block; color: var(--color-gold); font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; } .founder-copy p { margin-bottom: 14px; line-height: 1.7; } .founder-sig { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--color-gold); margin-top: 16px; } @media (max-width: 720px) { .founder-section { grid-template-columns: 1fr; text-align: center; } .founder-photo { margin: 0 auto; width: 180px; height: 180px; font-size: 4rem; } } /* --- Trust Badges (Footer) --- */ .trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 24px 0; padding: 16px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .trust-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--color-text-3); padding: 6px 12px; background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 4px; } .trust-badge svg { width: 14px; height: 14px; color: var(--color-gold); } /* --- Exit Intent Modal --- */ .exit-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; } .exit-modal-overlay.show { display: flex; } .exit-modal { background: var(--color-bg); border: 1px solid var(--color-border-gold); border-radius: 14px; padding: 40px 36px; max-width: 460px; width: 100%; position: relative; text-align: center; } .exit-modal h3 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 12px; } .exit-modal p { color: var(--color-text-2); margin-bottom: 24px; } .exit-modal form { display: flex; flex-direction: column; gap: 12px; } .exit-modal input { padding: 12px 14px; background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); font-family: var(--font-body); font-size: 0.95rem; } .exit-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--color-text-3); font-size: 1.4rem; cursor: pointer; } /* --- Pricing Configurator --- */ .configurator { display: grid; grid-template-columns: 1fr 340px; gap: 36px; margin-top: 32px; } .configurator-options .config-group { padding: 24px; background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 16px; } .configurator-options h4 { font-family: var(--font-display); margin-bottom: 16px; } .config-option { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: color 0.2s; } .config-option:last-child { border-bottom: none; } .config-option:hover { color: var(--color-gold); } .config-option-label { display: flex; align-items: center; gap: 12px; } .config-option-label span.name { font-weight: 500; } .config-option-label span.desc { display: block; font-size: 0.8rem; color: var(--color-text-3); margin-top: 2px; } .config-option-price { color: var(--color-gold); font-weight: 500; font-size: 0.95rem; } .config-option input[type="checkbox"], .config-option input[type="radio"] { accent-color: var(--color-gold); width: 18px; height: 18px; } .configurator-total { position: sticky; top: 100px; background: var(--color-bg-2); border: 1px solid var(--color-border-gold); border-radius: 14px; padding: 32px 28px; height: fit-content; } .configurator-total h4 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 20px; } .total-line { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.9rem; color: var(--color-text-2); border-bottom: 1px dashed var(--color-border); } .total-line.grand { border-bottom: none; border-top: 2px solid var(--color-border-gold); padding-top: 16px; margin-top: 12px; font-size: 1.3rem; color: var(--color-text); font-weight: 500; } .total-line .amount { color: var(--color-gold); font-weight: 500; } .total-line.grand .amount { font-size: 1.8rem; font-family: var(--font-display); } @media (max-width: 820px) { .configurator { grid-template-columns: 1fr; } .configurator-total { position: static; } } /* --- Audit Tool --- */ .audit-hero { padding: 100px 0 60px; text-align: center; background: radial-gradient(ellipse at top, rgba(201,169,110,0.08), transparent 60%); } .audit-form { max-width: 520px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 12px; } .audit-form input { padding: 14px 16px; background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text); font-family: var(--font-body); font-size: 1rem; } .audit-form input:focus { outline: none; border-color: var(--color-gold); } .audit-form .btn { padding: 14px 24px; font-size: 1rem; } .audit-results { display: none; padding: 40px 0; } .audit-results.show { display: block; } .audit-score { display: flex; align-items: center; justify-content: center; margin: 20px 0 40px; gap: 32px; flex-wrap: wrap; } .score-circle { width: 160px; height: 160px; border-radius: 50%; background: conic-gradient(var(--score-color, #c9a96e) calc(var(--score, 0) * 1%), rgba(255,255,255,0.08) 0); display: flex; align-items: center; justify-content: center; position: relative; } .score-circle::before { content: ''; position: absolute; inset: 8px; background: var(--color-bg); border-radius: 50%; } .score-circle .score-value { position: relative; font-family: var(--font-display); font-size: 3rem; color: var(--color-text); font-weight: 500; } .score-circle .score-value small { font-size: 1rem; color: var(--color-text-3); } .score-summary h3 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 8px; } .score-summary p { color: var(--color-text-2); max-width: 380px; } .audit-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 32px; } .audit-check { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 8px; } .audit-check .icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; } .audit-check.pass .icon { background: #2ecc71; } .audit-check.fail .icon { background: #e74c3c; } .audit-check .name { font-size: 0.95rem; font-weight: 500; color: var(--color-text); margin-bottom: 4px; } .audit-check .detail { font-size: 0.82rem; color: var(--color-text-3); line-height: 1.4; } /* --- Mockup Preview --- */ .mockup-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; padding: 24px; background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 10px; } .mockup-controls label { display: block; font-size: 0.8rem; color: var(--color-text-3); margin-bottom: 6px; letter-spacing: 1px; text-transform: uppercase; } .mockup-controls input, .mockup-controls select { width: 100%; padding: 10px 12px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); font-family: var(--font-body); } .mockup-stage { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; min-height: 540px; background: #0a0a0a; position: relative; } .mockup-hero { padding: 100px 60px; min-height: 540px; display: flex; flex-direction: column; justify-content: center; position: relative; transition: background 0.4s; } .mockup-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.6)); pointer-events: none; } .mockup-hero > * { position: relative; z-index: 1; } .mockup-hero .brand { font-family: var(--font-display); font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 24px; opacity: 0.9; } .mockup-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; margin-bottom: 20px; max-width: 640px; } .mockup-hero p { font-size: 1.05rem; opacity: 0.85; max-width: 480px; margin-bottom: 28px; } .mockup-hero .mockup-cta { display: inline-block; padding: 14px 28px; background: currentColor; color: #0a0a0a; font-weight: 500; text-decoration: none; border-radius: 6px; width: fit-content; filter: brightness(1.2); } /* --- Industry landing hero --- */ .industry-hero { padding: 80px 0 40px; text-align: center; background: radial-gradient(ellipse at top, rgba(201,169,110,0.08), transparent 60%); } .industry-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 40px 0; } .industry-benefit { padding: 24px; background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 10px; } .industry-benefit h4 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 10px; color: var(--color-gold); } .industry-benefit p { font-size: 0.9rem; line-height: 1.55; color: var(--color-text-2); } /* --- Add-ons grid --- */ .addons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 32px; } .addon-card { padding: 28px 24px; background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 10px; transition: border-color 0.3s, transform 0.3s; display: flex; flex-direction: column; gap: 10px; } .addon-card:hover { border-color: var(--color-border-gold); transform: translateY(-4px); } .addon-card h4 { font-family: var(--font-display); font-size: 1.15rem; } .addon-card .addon-price { font-family: var(--font-display); font-size: 1.6rem; color: var(--color-gold); } .addon-card p { font-size: 0.88rem; color: var(--color-text-2); flex: 1; } .addon-card .btn { margin-top: 8px; } /* --- Growth offer hierarchy (2026-07) --- */ .recommended-package { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 28px; align-items: center; margin: 0 0 28px; padding: 28px; border: 1px solid var(--color-border-gold); border-radius: 8px; background: linear-gradient(135deg, rgba(201,169,110,0.12), rgba(255,255,255,0.025)); } .recommended-package h3 { margin: 7px 0 8px; font-size: 1.5rem; } .recommended-package p { max-width: 680px; color: var(--color-text-2); } .recommended-package-price { display: flex; flex-direction: column; min-width: 155px; } .recommended-package-price strong { font-family: var(--font-display); font-size: 2rem; color: var(--color-gold); } .recommended-package-price span { color: var(--color-text-2); font-size: 0.85rem; } .pricing-card.starter-tier { opacity: 0.78; } .pricing-card.starter-tier:hover { opacity: 1; } .pricing-card.growth-tier { border-color: var(--color-border-gold); } @media (max-width: 820px) { .recommended-package { grid-template-columns: 1fr; gap: 18px; } .recommended-package .btn { width: 100%; } .pricing-card.starter-tier { opacity: 1; } } /* September 2026: show the offer at first paint and respect reduced motion. */ .page-transition{animation:none;} .hero-label,.hero-headline,.hero-headline span,.hero-sub,.hero-ctas,.hero-trust-item,.hero-showcase,.showcase-phone{animation:none!important;opacity:1;} .hero-headline.shimmer-active::after{display:none;} .hero-glow-btn{animation:none;} .hero-grain{animation:none;} .hero-headline{overflow-wrap:normal;} .hero-trust{flex-wrap:wrap;} .offer-note{font-size:.9rem;color:var(--color-text-2);margin-top:1rem;} .offer-note a,main p a:not(.btn):not(.btn-text){text-decoration:underline;text-underline-offset:.2em;} .offer-links{display:flex;flex-wrap:wrap;gap:1rem;margin:1.5rem 0;} .offer-links a{display:inline-flex;align-items:center;min-height:44px;padding:.7rem 1rem;border:1px solid var(--color-border-gold);border-radius:4px;} .offer-disclosure{border:1px solid var(--color-border);border-radius:8px;padding:1.25rem;margin:1.5rem 0;scroll-margin-top:100px;} .offer-disclosure>summary{cursor:pointer;font-size:1.05rem;color:var(--color-text);font-weight:500;min-height:44px;padding:.4rem;} .offer-disclosure[open]>summary{margin-bottom:1.5rem;} .offer-disclosure>summary:focus-visible{outline:2px solid var(--color-gold);outline-offset:4px;} .offer-recommended{border:1px solid var(--color-border-gold);background:var(--color-bg-2);padding:clamp(1.3rem,4vw,2.8rem);border-radius:10px;margin:1.5rem 0 2rem;} .offer-recommended h2{margin:.5rem 0;} .offer-recommended .price{font-size:2rem;color:var(--color-gold);font-weight:500;} .offer-recommended ul{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:1.3rem 0;list-style:disc;padding-left:1.2rem;} .contact-direct{margin-top:1rem;display:flex;gap:.75rem;flex-wrap:wrap;} [id]{scroll-margin-top:100px;} .reel-copy span,.chrome-url,.reel-counter{color:var(--color-text-2);opacity:1;} @media(max-width:600px){.offer-recommended ul{grid-template-columns:1fr;}.hero-trust{white-space:normal;} .hero-trust-item{font-size:.72rem;}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.page-transition,.hero-gradient,.marquee-inner{animation:none!important;}.reveal,.card-reveal{opacity:1;transform:none;}} .cookie-accept{color:#111!important;}