/* ============================================================ SILVER OAKS — Main Stylesheet ============================================================ File: assets/css/style.css Contains: CSS variables, base typography, layout colors, page sections. Edit hints: All colors, fonts, and shape settings live in the :root block below. Change values there to re-skin the entire site. ============================================================ */ /* ------------------------------------------------------------ 1. DESIGN TOKENS (edit these to re-skin the whole site) ------------------------------------------------------------ */ :root { /* ---- COLOR PALETTE ---- Change these hex codes to recolor the entire site. --color-primary is used for headings, buttons, and accents. */ --color-primary: #26343c; /* Polished graphite for headings */ --color-primary-dark: #172329; /* Hover state for primary */ --color-primary-light: #43535c; --color-brand-green: #1f4d3a; /* Original Silver Oaks wordmark green */ --color-accent: #aeb8bf; /* Sterling silver accent */ --color-accent-dark: #66747d; --color-accent-light: #d8dee2; --color-silver: #c3c9ce; /* Silver filigree */ /* ---- BACKGROUNDS & TEXT ---- */ --color-bg: #eef1f2; /* Cool pearl page background */ --color-bg-light: #f8fafb; /* Lighter card / panel background */ --color-bg-deep: #dfe5e8; --color-text: #1d2428; /* Body copy */ --color-paragraph: #718e83; /* Standard paragraph green-grey */ --color-text-soft: var(--color-paragraph); /* Secondary text */ --color-text-faint: #7a858b; /* Tertiary / hint text */ --color-border: rgba(142, 154, 163, 0.34); /* Silver @ 34% */ /* ---- TYPOGRAPHY ---- Web-safe fallbacks are included; the page loads the primary fonts from Google Fonts in each .html . */ --font-heading: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-display: 'Cinzel', 'Trajan Pro', serif; /* Caps wordmark */ --font-script: 'Pinyon Script', 'Allura', cursive; /* Tagline script */ --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Sizes — adjust to make the whole site tighter/looser */ --fs-base: 17px; --fs-small: 14px; --fs-eyebrow: 11px; --fs-h1: clamp(48px, 7vw, 55px); --fs-h2: clamp(36px, 5vw, 56px); --fs-h3: clamp(24px, 3vw, 32px); /* ---- SHAPE ---- */ --border-radius: 8px; --border-radius-sm: 4px; --border-radius-lg: 16px; /* ---- SPACING SCALE ---- */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 48px; --space-xl: 96px; /* ---- LAYOUT WIDTHS ---- */ --container: 1320px; /* Outer max-width */ --container-narrow: 920px; /* Reading-width sections */ --container-text: 720px; } /* ------------------------------------------------------------ 2. RESET & BASE ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overflow-x: hidden; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Subtle paper-texture background — radial light/dark warmth */ body { background-image: radial-gradient(ellipse at 20% 10%, rgba(216, 222, 226, 0.34), transparent 55%), radial-gradient(ellipse at 85% 90%, rgba(67, 83, 92, 0.08), transparent 60%), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.40), transparent 70%); background-attachment: fixed; min-height: 100vh; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } /* Page wrapper so footer can sit at bottom */ .site { min-height: 100vh; display: flex; flex-direction: column; } .site-main { flex: 1; } /* ------------------------------------------------------------ 3. TYPOGRAPHY HELPERS ------------------------------------------------------------ */ h1, h2, h3, h4, h5 { font-family: var(--font-heading); color: var(--color-primary); font-weight: 400; margin: 0; line-height: 1.15; } h2 { color: var(--color-brand-green); } p { margin: 0 0 var(--space-sm); color: var(--color-text-soft); } .display { font-family: var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; } .script { font-family: var(--font-script); color: var(--color-accent); font-weight: 400; } .serif-italic { font-family: var(--font-heading); font-style: italic; } .silver-oaks-brand { color: var(--color-brand-green); } .luxury-living-line { letter-spacing: 0.08em; line-height: 1.25; } .eyebrow { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-accent-dark); font-weight: 500; } /* ------------------------------------------------------------ 4. LAYOUT PRIMITIVES ------------------------------------------------------------ */ .container { max-width: var(--container); margin: 0 auto; padding: 0 36px; } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 36px; } .container-text { max-width: var(--container-text); margin: 0 auto; padding: 0 36px; } .section { padding: var(--space-xl) 0; } .section-tight { padding: var(--space-lg) 0; } .text-center { text-align: center; } /* ------------------------------------------------------------ 5. SECTION TITLE PATTERN ------------------------------------------------------------ */ .section-title { text-align: center; } .section-title .eyebrow { display: block; margin-bottom: var(--space-sm); } .section-title h2 { font-family: var(--font-heading); font-style: italic; font-size: var(--fs-h2); color: var(--color-brand-green); margin: 0 0 6px; } .section-title .sub { font-family: var(--font-heading); font-style: italic; font-size: clamp(18px, 2vw, 22px); color: var(--color-text-soft); max-width: 680px; margin: 10px auto 0; } /* ------------------------------------------------------------ 6. PAGE-SPECIFIC SECTIONS ------------------------------------------------------------ */ /* ---- HERO (used on home page) ---- */ .hero { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: flex-end; text-align: left; padding: 96px clamp(24px, 6vw, 84px); overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 40%, rgba(248, 250, 251, 0.58), transparent 60%), radial-gradient(ellipse at 80% 10%, rgba(174, 184, 191, 0.22), transparent 50%); pointer-events: none; } /* ---- HERO SLIDESHOW ---- Auto-fading 4-slide carousel. Slides fill the hero without the old zoom effect, so the layout keeps its original feel with less edge crop. Recommended image size: 1920 × 1080 (16:9), JPG, 200-400 KB each. Drop into assets/images/hero/slide-1.jpg through slide-4.jpg. To add more slides: add another .hero-slide div in index.html, and adjust the animation timings below (total = 6s per slide). */ .hero-slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; animation: heroFadeShort 47s infinite; will-change: opacity; } .hero-slide-audience, .hero-slide-product, .hero-slide-exhibition { background-position: left center; } .hero-slide-video video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: 1; transition: opacity .56s ease; } .hero-slide-video.has-video-poster { background-color: #e8ecee; } .hero-slideshow.is-video-managed .hero-slide { animation: none; opacity: 0; transition: opacity .82s ease; } .hero-slideshow.is-video-managed .hero-slide.is-active { opacity: 1; z-index: 1; } .hero-slideshow.is-video-managed .hero-slide-video.is-waiting video { opacity: 0; } .hero-slideshow.is-video-managed .hero-slide-video.is-playing video, .hero-slideshow.is-video-managed .hero-slide-video.is-active:not(.is-waiting) video { opacity: 1; } .hero-slideshow.is-video-managed .hero-slide:not(.hero-slide-video).is-active { animation-duration: 6s; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-iteration-count: 1; will-change: opacity, transform, background-position; } .hero-slideshow.is-video-managed .hero-slide:not(.hero-slide-video).is-exiting { animation: none; z-index: 0; will-change: opacity, transform, background-position; } .hero-slideshow.is-video-managed .hero-slide-audience.is-active { animation-name: heroCineAudience; } .hero-slideshow.is-video-managed .hero-slide-audience.is-exiting { transform: translate3d(1.05%, 0.5%, 0) scale(1.052); background-position: 42% 51%; } .hero-slideshow.is-video-managed .hero-slide-product.is-active { animation-name: heroCineProduct; } .hero-slideshow.is-video-managed .hero-slide-product.is-exiting { transform: translate3d(1.0%, 0.5%, 0) scale(1.052); background-position: 53% 51%; } .hero-slideshow.is-video-managed .hero-slide-bn3.is-active { animation-name: heroCineSoftPanRight; } .hero-slideshow.is-video-managed .hero-slide-bn3.is-exiting { transform: translate3d(0.95%, 0.48%, 0) scale(1.05); background-position: 50% 51%; } .hero-slideshow.is-video-managed .hero-slide-bn1.is-active { animation-name: heroCineSoftLift; } .hero-slideshow.is-video-managed .hero-slide-bn1.is-exiting { transform: translate3d(0.9%, 0.55%, 0) scale(1.05); background-position: 51% 52%; } .hero-slideshow.is-video-managed .hero-slide-exhibition.is-active { animation-name: heroCineExhibition; } .hero-slideshow.is-video-managed .hero-slide-exhibition.is-exiting { transform: translate3d(0.75%, 0.42%, 0) scale(1.045); background-position: 47% 51%; } .hero-slideshow.is-video-managed .hero-slide-video.is-waiting::before, .hero-slideshow.is-video-managed .hero-slide-video.is-waiting::after { display: none; } .hero.is-video-loading::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 6; width: clamp(42px, 5vw, 56px); height: clamp(42px, 5vw, 56px); border-radius: 50%; border: 1px solid rgba(248, 250, 251, 0.76); border-top-color: var(--color-brand-green); border-right-color: rgba(31, 77, 58, 0.72); transform: translate(-50%, calc(-50% - 44px)); animation: heroLoadingSpin 1.1s linear infinite; pointer-events: none; box-shadow: 0 0 0 7px rgba(248, 250, 251, 0.26), 0 18px 36px -24px rgba(23, 35, 41, 0.42); } .hero.is-video-loading::after { content: attr(data-video-loading-label); position: absolute; left: 50%; top: 50%; z-index: 6; width: max-content; max-width: min(86vw, 360px); padding: 13px 22px 14px; border: 1px solid rgba(248, 250, 251, 0.66); border-radius: 999px; background: linear-gradient(135deg, rgba(31, 77, 58, 0.96), rgba(23, 50, 39, 0.92)); color: var(--color-bg-light); font-family: var(--font-display); font-size: clamp(10px, 1vw, 12px); letter-spacing: 0.22em; line-height: 1.15; text-align: center; text-transform: uppercase; transform: translate(-50%, 18px); pointer-events: none; box-shadow: 0 22px 48px -30px rgba(23, 35, 41, 0.72), inset 0 0 0 1px rgba(255, 255, 255, 0.10); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: heroLoadingBreathe 1.65s ease-in-out infinite; } .hero-slide:nth-child(1) { animation-delay: 0s; } .hero-slide:nth-child(2) { animation-delay: 6s; } .hero-slide:nth-child(2) { animation-name: heroFadeLong; } .hero-slide:nth-child(3) { animation-delay: 17s; } .hero-slide:nth-child(4) { animation-delay: 23s; } .hero-slide:nth-child(5) { animation-delay: 29s; } .hero-slide:nth-child(6) { animation-delay: 35s; } .hero-slide:nth-child(7) { animation-delay: 41s; } .hero-slide:nth-child(8) { animation-delay: 47s; } /* Vignette overlay for legibility — sits above slides but below content */ .hero-vignette { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(238,241,242,0.34), rgba(238,241,242,0.20) 40%, rgba(238,241,242,0.34)), radial-gradient(ellipse at center, rgba(248,250,251,0.22), rgba(238,241,242,0.68)); pointer-events: none; } /* Slide indicator dots (decorative — animated) */ .hero-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 10px; transition: bottom .35s ease; } .hero.is-video-active .hero-dots { bottom: clamp(64px, 8vw, 86px); } .hero-sound-toggle { position: absolute; right: clamp(16px, 3vw, 34px); bottom: 26px; z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(248, 250, 251, 0.56); border-radius: 50%; background: rgba(31, 77, 58, 0.86); color: var(--color-bg-light); line-height: 1; cursor: pointer; box-shadow: 0 16px 36px -26px rgba(23, 35, 41, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .25s ease, transform .25s ease, background .25s ease, border-color .25s ease; } .hero-sound-toggle[hidden] { display: none; } .hero-sound-toggle:hover, .hero-sound-toggle:focus-visible { background: rgba(31, 77, 58, 0.96); border-color: rgba(248, 250, 251, 0.82); transform: translateY(-1px); outline: none; } .hero-sound-toggle[aria-pressed="true"] { background: rgba(248, 250, 251, 0.88); color: var(--color-brand-green); border-color: rgba(31, 77, 58, 0.24); } .hero-sound-icon { position: relative; width: 17px; height: 15px; flex: 0 0 auto; } .hero-sound-icon::before { content: ""; position: absolute; left: 0; top: 4px; width: 5px; height: 6px; border-radius: 1px; background: currentColor; box-shadow: 5px -3px 0 -1px currentColor, 5px 3px 0 -1px currentColor; } .hero-sound-icon::after { content: ""; position: absolute; left: 8px; top: 2px; width: 7px; height: 10px; border: 1.5px solid currentColor; border-left: 0; border-radius: 0 10px 10px 0; opacity: 0.9; } .hero-sound-toggle[aria-pressed="false"] .hero-sound-icon::after { width: 8px; height: 1.5px; top: 6px; border: 0; border-radius: 999px; background: currentColor; transform: rotate(-35deg); } @media (max-width: 720px) { .hero.is-video-active .hero-dots { bottom: 62px; } .hero-sound-toggle { right: 14px; bottom: 18px; width: 34px; height: 34px; } .hero-sound-icon { width: 15px; height: 13px; } } .hero-dot { width: 8px; height: 8px; background: var(--color-accent); opacity: 0.3; transform: rotate(45deg); animation: dotPulseShort 47s infinite; } .hero-dot:nth-child(1) { animation-delay: 0s; } .hero-dot:nth-child(2) { animation-delay: 6s; } .hero-dot:nth-child(2) { animation-name: dotPulseLong; } .hero-dot:nth-child(3) { animation-delay: 17s; } .hero-dot:nth-child(4) { animation-delay: 23s; } .hero-dot:nth-child(5) { animation-delay: 29s; } .hero-dot:nth-child(6) { animation-delay: 35s; } .hero-dot:nth-child(7) { animation-delay: 41s; } .hero-dot:nth-child(8) { animation-delay: 47s; } .hero-dots.is-video-managed .hero-dot { animation: none; opacity: 0.32; transition: opacity .25s ease, transform .25s ease, background .25s ease; } .hero-dots.is-video-managed .hero-dot.is-active { opacity: 1; background: var(--color-brand-green); transform: rotate(45deg) scale(1.4); } @keyframes heroFadeShort { 0% { opacity: 0; } 2.13% { opacity: 1; } 10.64% { opacity: 1; } 12.77% { opacity: 0; } 100% { opacity: 0; } } @keyframes heroFadeLong { 0% { opacity: 0; } 2.13% { opacity: 1; } 21.28% { opacity: 1; } 23.40% { opacity: 0; } 100% { opacity: 0; } } @keyframes dotPulseShort { 0%, 12.77%, 100% { opacity: 0.3; } 3.19%, 10.21% { opacity: 1; transform: rotate(45deg) scale(1.4); } } @keyframes dotPulseLong { 0%, 23.40%, 100% { opacity: 0.3; } 3.19%, 20.43% { opacity: 1; transform: rotate(45deg) scale(1.4); } } @keyframes heroCineAudience { 0% { transform: translate3d(-0.65%, -0.12%, 0) scale(1.012); background-position: 39% 50%; } 50% { transform: translate3d(0.35%, 0.16%, 0) scale(1.032); background-position: 40.5% 50.5%; } 100% { transform: translate3d(1.05%, 0.5%, 0) scale(1.052); background-position: 42% 51%; } } @keyframes heroCineProduct { 0% { transform: translate3d(-0.7%, -0.08%, 0) scale(1.012); background-position: 49% 50%; } 50% { transform: translate3d(0.28%, 0.18%, 0) scale(1.032); background-position: 51% 50.5%; } 100% { transform: translate3d(1.0%, 0.5%, 0) scale(1.052); background-position: 53% 51%; } } @keyframes heroCineSoftPanRight { 0% { transform: translate3d(-0.55%, -0.1%, 0) scale(1.01); background-position: 47% 50%; } 50% { transform: translate3d(0.25%, 0.16%, 0) scale(1.03); background-position: 48.5% 50.5%; } 100% { transform: translate3d(0.95%, 0.48%, 0) scale(1.05); background-position: 50% 51%; } } @keyframes heroCineSoftLift { 0% { transform: translate3d(-0.55%, -0.12%, 0) scale(1.01); background-position: 48% 50%; } 50% { transform: translate3d(0.25%, 0.18%, 0) scale(1.03); background-position: 49.5% 51%; } 100% { transform: translate3d(0.9%, 0.55%, 0) scale(1.05); background-position: 51% 52%; } } @keyframes heroCineExhibition { 0% { transform: translate3d(-0.42%, -0.08%, 0) scale(1.008); background-position: 44% 50%; } 50% { transform: translate3d(0.22%, 0.14%, 0) scale(1.026); background-position: 45.5% 50.5%; } 100% { transform: translate3d(0.75%, 0.42%, 0) scale(1.045); background-position: 47% 51%; } } @media (max-width: 720px) { .hero-slideshow.is-video-managed .hero-slide-audience.is-exiting { transform: translate3d(0.45%, 0.28%, 0) scale(1.032); background-position: 41% 50.6%; } .hero-slideshow.is-video-managed .hero-slide-product.is-exiting { transform: translate3d(0.45%, 0.28%, 0) scale(1.032); background-position: 51% 50.6%; } .hero-slideshow.is-video-managed .hero-slide-bn3.is-exiting { transform: translate3d(0.4%, 0.25%, 0) scale(1.03); background-position: 49% 50.5%; } .hero-slideshow.is-video-managed .hero-slide-bn1.is-exiting { transform: translate3d(0.4%, 0.28%, 0) scale(1.03); background-position: 50% 51%; } .hero-slideshow.is-video-managed .hero-slide-exhibition.is-exiting { transform: translate3d(0.35%, 0.22%, 0) scale(1.028); background-position: 46% 50.5%; } @keyframes heroCineAudience { 0% { transform: translate3d(-0.28%, -0.06%, 0) scale(1.006); background-position: 40% 50%; } 50% { transform: translate3d(0.16%, 0.12%, 0) scale(1.018); background-position: 40.5% 50.3%; } 100% { transform: translate3d(0.45%, 0.28%, 0) scale(1.032); background-position: 41% 50.6%; } } @keyframes heroCineProduct { 0% { transform: translate3d(-0.28%, -0.06%, 0) scale(1.006); background-position: 50% 50%; } 50% { transform: translate3d(0.16%, 0.12%, 0) scale(1.018); background-position: 50.5% 50.3%; } 100% { transform: translate3d(0.45%, 0.28%, 0) scale(1.032); background-position: 51% 50.6%; } } @keyframes heroCineSoftPanRight { 0% { transform: translate3d(-0.24%, -0.05%, 0) scale(1.005); background-position: 48% 50%; } 50% { transform: translate3d(0.14%, 0.1%, 0) scale(1.017); background-position: 48.5% 50.3%; } 100% { transform: translate3d(0.4%, 0.25%, 0) scale(1.03); background-position: 49% 50.5%; } } @keyframes heroCineSoftLift { 0% { transform: translate3d(-0.24%, -0.05%, 0) scale(1.005); background-position: 49% 50%; } 50% { transform: translate3d(0.14%, 0.12%, 0) scale(1.017); background-position: 49.5% 50.5%; } 100% { transform: translate3d(0.4%, 0.28%, 0) scale(1.03); background-position: 50% 51%; } } @keyframes heroCineExhibition { 0% { transform: translate3d(-0.2%, -0.05%, 0) scale(1.004); background-position: 45% 50%; } 50% { transform: translate3d(0.12%, 0.08%, 0) scale(1.015); background-position: 45.5% 50.2%; } 100% { transform: translate3d(0.35%, 0.22%, 0) scale(1.028); background-position: 46% 50.5%; } } } @keyframes heroVideoReadyLine { 0% { transform: translateX(-12px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateX(74px); opacity: 0; } } @keyframes heroLoadingSpin { to { transform: translate(-50%, calc(-50% - 44px)) rotate(360deg); } } @keyframes heroLoadingBreathe { 0%, 100% { filter: brightness(1); transform: translate(-50%, 18px) scale(1); } 50% { filter: brightness(1.12); transform: translate(-50%, 18px) scale(1.025); } } @keyframes heroTaglineTone { 0%, 100% { color: #172329; background: rgba(248, 250, 251, 0.22); text-shadow: 0 1px 2px rgba(248, 250, 251, 0.82), 0 10px 24px rgba(8, 16, 20, 0.20); } 34% { color: #1f4d3a; background: rgba(248, 250, 251, 0.30); text-shadow: 0 1px 2px rgba(248, 250, 251, 0.78), 0 8px 22px rgba(31, 77, 58, 0.18); } 68% { color: #f7f5ef; background: rgba(23, 35, 41, 0.28); text-shadow: 0 1px 2px rgba(8, 16, 20, 0.48), 0 0 16px rgba(248, 250, 251, 0.44); } } @keyframes heroSymbolGlow { 0%, 100% { filter: drop-shadow(0 12px 22px rgba(8, 16, 20, 0.30)) drop-shadow(0 0 18px rgba(248, 250, 251, 0.90)) drop-shadow(0 0 30px rgba(216, 222, 226, 0.42)); } 38% { filter: drop-shadow(0 14px 24px rgba(8, 16, 20, 0.34)) drop-shadow(0 0 30px rgba(255, 255, 255, 1)) drop-shadow(0 0 48px rgba(216, 222, 226, 0.72)); } 72% { filter: drop-shadow(0 14px 26px rgba(8, 16, 20, 0.34)) drop-shadow(0 0 24px rgba(248, 250, 251, 0.98)) drop-shadow(0 0 40px rgba(214, 196, 142, 0.34)); } } @keyframes heroSymbolRingGlow { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 24% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.018); } 52% { opacity: 0.26; transform: translate(-50%, -50%) scale(1.06); } 68% { opacity: 0.08; transform: translate(-50%, -50%) scale(1.085); } 84% { opacity: 0.58; transform: translate(-50%, -50%) scale(1.035); } } @keyframes heroFounderTone { 0%, 100% { color: #172329; border-color: rgba(31, 77, 58, 0.66); background: rgba(248, 250, 251, 0.18); box-shadow: 0 12px 28px -24px rgba(8, 16, 20, 0.34); text-shadow: 0 1px 2px rgba(248, 250, 251, 0.64); } 34% { color: #1f4d3a; border-color: rgba(31, 77, 58, 0.86); background: rgba(248, 250, 251, 0.30); box-shadow: 0 16px 34px -26px rgba(31, 77, 58, 0.42); text-shadow: 0 1px 2px rgba(248, 250, 251, 0.72); } 68% { color: #f7f5ef; border-color: rgba(248, 250, 251, 0.66); background: rgba(23, 35, 41, 0.30); box-shadow: 0 18px 38px -26px rgba(8, 16, 20, 0.48); text-shadow: 0 0 14px rgba(248, 250, 251, 0.44); } } .hero-content { position: relative; z-index: 4; width: min(100%, 400px); text-align: center; padding: clamp(16px, 2vw, 24px); background: rgba(248, 250, 251, 0.34); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid var(--color-border); border-radius: var(--border-radius); box-shadow: 0 24px 62px -44px rgba(23, 35, 41, 0.32); opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity .72s ease, visibility .72s ease, transform .72s cubic-bezier(.22, .61, .36, 1), background .45s ease, border-color .45s ease, box-shadow .45s ease, backdrop-filter .45s ease; } .hero.is-video-preparing .hero-content, .hero.is-video-loading .hero-content { opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.985); pointer-events: none; } .hero-brand-kicker { font-family: var(--font-heading); font-style: italic; font-size: clamp(16px, 1.5vw, 20px); color: var(--color-brand-green); margin-bottom: 8px; } .hero-symbol-wrap { position: relative; display: grid; place-items: center; width: clamp(62px, 6.4vw, 84px); margin: 0 auto 11px; isolation: isolate; } .hero-symbol-wrap::after { content: ""; position: absolute; left: 50%; top: 50%; pointer-events: none; } .hero-symbol-wrap::after { z-index: -1; width: calc(100% + 4px); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.98); border-radius: 999px; background: radial-gradient(circle, transparent 0 39%, rgba(255, 255, 255, 1) 45%, rgba(248, 250, 251, 0.82) 51%, rgba(216, 222, 226, 0.24) 60%, transparent 70% ); box-shadow: 0 0 10px rgba(255, 255, 255, 0.98), 0 0 18px rgba(216, 222, 226, 0.46), inset 0 0 12px rgba(248, 250, 251, 0.62); transform: translate(-50%, -50%) scale(1); will-change: transform, opacity; animation: heroSymbolRingGlow 5.6s cubic-bezier(.42, 0, .22, 1) infinite; } .hero-symbol { position: relative; z-index: 1; width: 100%; height: auto; margin: 0; filter: drop-shadow(0 12px 22px rgba(8, 16, 20, 0.30)) drop-shadow(0 0 18px rgba(248, 250, 251, 0.90)) drop-shadow(0 0 30px rgba(216, 222, 226, 0.42)); animation: heroSymbolGlow 4.8s ease-in-out infinite; } .hero h1 { font-family: var(--font-display); font-style: normal; font-size: clamp(34px, 3.4vw, 46px); letter-spacing: 0.14em; font-weight: 700; color: var(--color-brand-green); margin: 0 0 8px; line-height: 1.02; white-space: nowrap; } .hero-brand-tagline { display: block; width: fit-content; padding: 2px 8px 4px; border-radius: 999px; font-family: var(--font-heading); font-style: italic; font-size: clamp(19px, 2vw, 25px); color: var(--color-primary-dark); line-height: 1.1; margin: 0 auto 14px; background: rgba(248, 250, 251, 0.18); text-shadow: 0 1px 2px rgba(248, 250, 251, 0.72), 0 8px 24px rgba(8, 16, 20, 0.18); animation: heroTaglineTone 12s ease-in-out infinite; } .hero-brand-tagline span { color: inherit; font-family: var(--font-script); font-style: normal; font-size: 1.05em; } .hero .lede { font-family: var(--font-heading); font-style: italic; font-size: clamp(18px, 2vw, 22px); color: var(--color-text-soft); max-width: 620px; margin: 0 0 var(--space-md); } .hero-actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; } .hero-actions .btn:not(.btn-primary) { animation: heroFounderTone 12s ease-in-out infinite; } .hero-actions .btn:not(.btn-primary):hover, .hero-actions .btn:not(.btn-primary):focus-visible { animation-play-state: paused; color: var(--color-bg-light); border-color: var(--color-primary); background: var(--color-primary); } .hero-content .divider { display: flex; align-items: center; justify-content: center; gap: 10px; width: min(260px, 100%); margin: 16px auto 18px; } .hero-content .divider-line { flex: 1 1 72px; max-width: 92px; height: 1px; background: linear-gradient(90deg, transparent, rgba(31, 77, 58, 0.62), rgba(216, 222, 226, 0.92)); background-size: 220% 100%; box-shadow: 0 0 8px rgba(248, 250, 251, 0.45); animation: dividerLineSparkle 2.6s ease-in-out infinite; } .hero-content .divider-line:last-child { background: linear-gradient(90deg, rgba(216, 222, 226, 0.92), rgba(31, 77, 58, 0.62), transparent); } .hero-content .divider-diamond { position: relative; flex: 0 0 auto; width: 12px; height: 12px; transform: rotate(45deg); overflow: visible; border: 1px solid rgba(248, 250, 251, 0.92); background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0 18%, rgba(216, 222, 226, 0.96) 18% 38%, rgba(31, 77, 58, 0.98) 38% 68%, rgba(174, 184, 191, 0.96) 68% 100%); box-shadow: 0 0 0 2px rgba(31, 77, 58, 0.14), 0 0 13px rgba(248, 250, 251, 0.85), 0 3px 10px rgba(23, 35, 41, 0.28); animation: diamondSparkle 2.05s ease-in-out infinite; } .hero-content .divider-diamond::before { content: ""; position: absolute; width: 6px; height: 6px; top: -3px; left: -3px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 22%, rgba(255, 255, 255, 0.52) 23% 45%, transparent 70%); opacity: 0.82; } .hero-content .divider-diamond::after { content: ""; position: absolute; inset: -11px; transform: rotate(-45deg); background: linear-gradient(90deg, transparent 0 42%, rgba(255, 255, 255, 0.96) 48% 52%, transparent 58% 100%), linear-gradient(0deg, transparent 0 42%, rgba(255, 255, 255, 0.78) 48% 52%, transparent 58% 100%); filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)); opacity: 0; pointer-events: none; animation: diamondGlint 2.05s ease-in-out infinite; animation-delay: 0.28s; } .hero-content .divider-diamond + .divider-diamond { animation-delay: 0.45s; } .hero-content .divider-diamond + .divider-diamond::after { animation-delay: 0.74s; } @keyframes diamondSparkle { 0%, 100% { filter: brightness(1); box-shadow: 0 0 0 2px rgba(31, 77, 58, 0.14), 0 0 13px rgba(248, 250, 251, 0.72), 0 3px 10px rgba(23, 35, 41, 0.28); } 38% { filter: brightness(1.38) saturate(1.08); box-shadow: 0 0 0 3px rgba(31, 77, 58, 0.22), 0 0 22px rgba(255, 255, 255, 1), 0 0 34px rgba(174, 184, 191, 0.72), 0 3px 12px rgba(23, 35, 41, 0.32); } 58% { filter: brightness(1.16); } } @keyframes diamondGlint { 0%, 24%, 100% { opacity: 0; transform: rotate(-45deg) scale(0.72); } 34% { opacity: 0.92; transform: rotate(-45deg) scale(1.08); } 46% { opacity: 0; transform: rotate(-45deg) scale(1.28); } } @keyframes dividerLineSparkle { 0%, 100% { background-position: 130% 0; filter: brightness(1); opacity: 0.9; } 45% { background-position: -35% 0; filter: brightness(1.28); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .divider-line, .divider-diamond, .divider-diamond::after, .hero-content .divider-line, .hero-content .divider-diamond, .hero-content .divider-diamond::after, .hero-symbol-wrap::after, .hero-symbol, .hero-brand-tagline, .hero-actions .btn:not(.btn-primary), .hero-slideshow.is-video-managed .hero-slide:not(.hero-slide-video).is-active, .hero.is-video-loading::before, .hero.is-video-loading::after { animation: none; } } .certified-tagline { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.75em 0.95em; border-radius: 999px; background: rgba(174, 184, 191, 0.18); border: 1px solid rgba(142, 154, 163, 0.42); color: var(--color-primary-dark); font-family: var(--font-heading); font-size: 1.3em; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; } .certified-tagline .certified-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.9em; height: 1.9em; border-radius: 50%; background: var(--color-accent); color: #fff; font-size: 0.95em; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); } .hero-certified-tagline { background: var(--color-brand-green); border-color: rgba(31, 77, 58, 0.72); color: var(--color-bg-light); font-family: var(--font-body); font-size: clamp(9.7px, 0.82vw, 10.8px); line-height: 1.22; gap: 0.5em; letter-spacing: 0.025em; max-width: 100%; padding: 0.58em 1.45em 0.58em 0.72em; text-align: left; white-space: normal; } .hero-certified-tagline .certified-copy { display: block; width: max-content; max-width: 100%; min-width: 0; } .hero-certified-tagline .certified-line { display: block; white-space: nowrap; } .hero-certified-tagline .certified-line:first-child { letter-spacing: 0.105em; text-align: justify; text-align-last: justify; } .hero-certified-tagline .certified-mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: clamp(38px, 3.4vw, 44px); height: clamp(28px, 2.7vw, 32px); overflow: hidden; border-radius: 999px; background: var(--color-bg-light); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22); } .hero-certified-tagline .certified-mark img { width: clamp(32px, 3vw, 38px); height: auto; max-width: none; } @media (max-width: 760px) { .hero { min-height: 82vh; align-items: flex-end; justify-content: center; text-align: center; padding: 92px 18px 72px; } .hero-content { width: min(100%, 340px); padding: 16px 12px; } .hero-content { background: rgba(248, 250, 251, 0.16); border-color: rgba(142, 154, 163, 0.20); box-shadow: 0 20px 52px -46px rgba(23, 35, 41, 0.22); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .hero-brand-kicker { font-size: 14px; margin-bottom: 6px; } .hero-symbol-wrap { width: clamp(56px, 17vw, 70px); margin: 0 auto 8px; } .hero h1 { font-size: clamp(22px, 7vw, 36px); letter-spacing: 0.08em; } .hero-brand-tagline { max-width: 100%; padding: 3px 7px 5px; font-size: clamp(15px, 4.45vw, 18px); line-height: 1.05; margin-bottom: 12px; white-space: nowrap; } .hero-actions { justify-content: center; } .hero .certified-tagline { display: flex; font-size: 9px; line-height: 1.3; white-space: normal; } } /* ---- ABOUT / PAGE INTRO HERO (shorter version) ---- */ .page-hero { text-align: center; padding: var(--space-xl) 36px var(--space-lg); } .page-hero h1 { font-family: var(--font-heading); font-style: italic; font-size: clamp(48px, 6vw, 80px); color: var(--color-primary); margin: 16px 0 0; line-height: 1.02; } .page-hero .lede { font-family: var(--font-heading); font-style: italic; font-size: clamp(18px, 2vw, 22px); color: var(--color-text-soft); max-width: 720px; margin: 20px auto 0; } /* ---- PAGE BANNER ---- Wide 3:1 banner that sits between page sections. Recommended image: 1800 × 600 (3:1), JPG, 150-300 KB. Replace assets/images/hero/banner-.jpg to change. */ .page-banner { position: relative; width: 100%; aspect-ratio: 3 / 1; max-height: 460px; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; isolation: isolate; } .page-banner-media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform-origin: center; will-change: transform; animation: bannerMediaDrift 22s ease-in-out infinite alternate; } .services-page-banner .page-banner-media { object-position: center center; animation: servicesBannerJourney 18s ease-in-out infinite alternate; } .about-page-banner .page-banner-media, .contact-page-banner .page-banner-media { object-position: center center; } .services-page-banner, .contact-page-banner { min-height: clamp(260px, 34vw, 430px); } /* Ken-burns layer lives on a pseudo so the parent never scales (a scale on .page-banner itself pushes the page wider on Chrome). */ .page-banner::before { content: ""; position: absolute; inset: 0; background-image: inherit; background-size: cover; background-position: center; transform-origin: center; will-change: transform, background-position; animation: bannerDrift 22s ease-in-out infinite alternate; z-index: 0; } .page-banner-has-media::before { display: none; } .page-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,35,41,0.18), rgba(23,35,41,0.05) 40%, rgba(238,241,242,0.66)); pointer-events: none; z-index: 1; } .page-banner .banner-content { position: relative; z-index: 2; padding: 28px clamp(20px, 4vw, 60px); background: rgba(248, 250, 251, 0.64); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(216, 222, 226, 0.56); border-radius: var(--border-radius); } .page-banner .banner-content .eyebrow { color: var(--color-accent-dark); } .page-banner h2 { font-family: var(--font-heading); font-style: italic; font-size: clamp(28px, 3.4vw, 44px); color: var(--color-brand-green); margin: 8px 0 0; } @keyframes bannerDrift { 0% { background-position: 50% 50%; transform: scale(1.0); } 100% { background-position: 50% 60%; transform: scale(1.05); } } @keyframes bannerMediaDrift { 0% { transform: scale(1.0); } 100% { transform: scale(1.05); } } @keyframes servicesBannerJourney { 0% { transform: translate3d(-1.8%, 0, 0) scale(1.03); } 45% { transform: translate3d(1.4%, -0.45%, 0) scale(1.075); } 100% { transform: translate3d(-0.8%, 0.35%, 0) scale(1.105); } } /* ---- HUID VERIFICATION SECTION ---- */ .huid-verification-section { position: relative; overflow: hidden; background: radial-gradient(circle at 14% 18%, rgba(248, 250, 251, 0.92), transparent 34%), radial-gradient(circle at 88% 20%, rgba(31, 77, 58, 0.10), transparent 30%), linear-gradient(180deg, rgba(248, 250, 251, 0.94), rgba(231, 236, 238, 0.74)); } .huid-verification-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(142, 154, 163, 0.08) 0 1px, transparent 1px 22px), linear-gradient(90deg, transparent 0 38%, rgba(248, 250, 251, 0.62) 50%, transparent 62%); opacity: 0.72; } .huid-shell { position: relative; z-index: 1; max-width: 1265px; margin: 0 auto; padding: 0 36px; display: grid; grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr); gap: clamp(34px, 6vw, 76px); align-items: center; } .huid-copy h2 { font-family: var(--font-heading); font-style: italic; font-size: clamp(36px, 4vw, 58px); color: var(--color-brand-green); line-height: 1.02; margin: 12px 0 16px; } .huid-copy .sub { font-family: var(--font-heading); font-style: italic; max-width: 620px; color: var(--color-text-soft); font-size: clamp(18px, 2vw, 22px); line-height: 1.5; margin: 0 0 26px; } .huid-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; } .huid-step { position: relative; overflow: hidden; min-height: 164px; padding: 18px 16px 16px; background: rgba(248, 250, 251, 0.74); border: 1px solid rgba(142, 154, 163, 0.28); border-radius: var(--border-radius); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38); } .huid-step::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 0 40%, rgba(255, 255, 255, 0.56) 50%, transparent 60%); transform: translateX(-130%); animation: huidCardSheen 7.2s ease-in-out infinite; } .huid-step:nth-child(2)::after { animation-delay: .6s; } .huid-step:nth-child(3)::after { animation-delay: 1.2s; } .huid-step-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 14px; border: 1px solid rgba(31, 77, 58, 0.22); border-radius: 50%; color: var(--color-brand-green); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; background: rgba(248, 250, 251, 0.86); } .huid-step h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); } .huid-step p { margin: 0; color: var(--color-text-soft); font-size: 13px; line-height: 1.55; } .huid-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: center; max-width: 100%; } .huid-actions .btn { margin-right: 0; width: 100%; min-width: 0; padding-left: 18px; padding-right: 18px; justify-content: center; letter-spacing: 0.14em; white-space: nowrap; } .huid-stage { position: relative; min-height: clamp(420px, 46vw, 560px); perspective: 1200px; } .huid-certificate-card { position: absolute; inset: 8% 4% 10% 0; margin: 0; overflow: hidden; border-radius: 8px; border: 1px solid rgba(142, 154, 163, 0.36); background: rgba(248, 250, 251, 0.78); box-shadow: 0 34px 88px -48px rgba(8, 16, 20, 0.52), inset 0 0 0 1px rgba(255, 255, 255, 0.44); transform: rotateY(-8deg) rotateX(2deg); animation: huidCertificateFloat 8s ease-in-out infinite; cursor: zoom-in; transition: box-shadow .28s ease, border-color .28s ease; } .huid-certificate-card:hover, .huid-certificate-card:focus-visible { border-color: rgba(31, 77, 58, 0.42); box-shadow: 0 40px 96px -46px rgba(8, 16, 20, 0.62), 0 0 0 1px rgba(31, 77, 58, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.52); } .huid-certificate-card:focus-visible { outline: 2px solid rgba(31, 77, 58, 0.72); outline-offset: 4px; } .huid-certificate-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .huid-certificate-card::before { content: "+"; position: absolute; right: 14px; bottom: 14px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(248, 250, 251, 0.66); border-radius: 999px; background: rgba(31, 77, 58, 0.86); color: var(--color-bg-light); font-family: var(--font-display); font-size: 22px; line-height: 1; box-shadow: 0 14px 32px -18px rgba(8, 16, 20, 0.62); opacity: 0; transform: translateY(6px) scale(0.96); transition: opacity .24s ease, transform .24s ease; pointer-events: none; } .huid-certificate-card:hover::before, .huid-certificate-card:focus-visible::before { opacity: 1; transform: translateY(0) scale(1); } .huid-certificate-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, transparent 0 36%, rgba(255, 255, 255, 0.62) 48%, transparent 62%), linear-gradient(180deg, rgba(248, 250, 251, 0.06), rgba(31, 77, 58, 0.10)); background-size: 230% 100%, 100% 100%; animation: huidCertificateScan 5.8s ease-in-out infinite; pointer-events: none; } .huid-verification-film { position: absolute; right: 0; bottom: 8%; width: min(360px, 58%); padding: 20px; border-radius: 14px; border: 1px solid rgba(248, 250, 251, 0.56); background: linear-gradient(180deg, rgba(23, 35, 41, 0.84), rgba(31, 77, 58, 0.86)); color: var(--color-bg-light); box-shadow: 0 34px 74px -42px rgba(8, 16, 20, 0.72), inset 0 0 0 1px rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: huidFilmRise 8s ease-in-out infinite; } .huid-film-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; } .huid-app-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 28px; border-radius: 999px; background: rgb(255 255 255); } .huid-app-mark img { width: 30px; height: auto; } .huid-film-title { margin-bottom: 14px; font-family: var(--font-heading); font-style: italic; font-size: clamp(24px, 2.8vw, 34px); line-height: 1; } .huid-input { position: relative; overflow: hidden; padding: 14px 14px 13px; border: 1px solid rgba(248, 250, 251, 0.22); border-radius: 8px; background: rgba(248, 250, 251, 0.10); } .huid-input-label { display: block; margin-bottom: 7px; color: rgba(248, 250, 251, 0.68); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; } .huid-input-value { display: inline-block; width: 0; max-width: 17.4ch; overflow: hidden; white-space: nowrap; font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.08em; animation: huidTyping 8s steps(16, end) infinite; } .huid-scan-lines { display: grid; gap: 7px; margin: 16px 0 18px; } .huid-scan-lines span { position: relative; overflow: hidden; height: 4px; border-radius: 999px; background: rgba(248, 250, 251, 0.14); } .huid-scan-lines span::after { content: ""; position: absolute; inset: 0; width: 42%; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(248, 250, 251, 0.92), rgba(174, 184, 191, 0.64), transparent); animation: huidScanLine 1.9s ease-in-out infinite; } .huid-scan-lines span:nth-child(2)::after { animation-delay: .18s; } .huid-scan-lines span:nth-child(3)::after { animation-delay: .34s; } .huid-result { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-radius: 999px; background: rgba(248, 250, 251, 0.92); color: var(--color-brand-green); font-family: var(--font-display); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; opacity: 0; transform: translateY(8px); animation: huidVerified 8s ease-in-out infinite; } .huid-result-mark { position: relative; width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(31, 77, 58, 0.32); background: rgba(31, 77, 58, 0.10); } .huid-result-mark::after { content: ""; position: absolute; left: 5px; top: 3px; width: 5px; height: 9px; border-right: 2px solid var(--color-brand-green); border-bottom: 2px solid var(--color-brand-green); transform: rotate(42deg); } @keyframes huidCardSheen { 0%, 58%, 100% { transform: translateX(-130%); opacity: 0; } 72% { opacity: .48; } 88% { transform: translateX(130%); opacity: 0; } } @keyframes huidCertificateFloat { 0%, 100% { transform: rotateY(-8deg) rotateX(2deg) translateY(0); } 50% { transform: rotateY(-5deg) rotateX(1deg) translateY(-8px); } } @keyframes huidCertificateScan { 0%, 18% { background-position: 150% 0, 50% 50%; opacity: 0; } 34%, 78% { opacity: .84; } 56%, 100% { background-position: -120% 0, 50% 50%; opacity: 0; } } @keyframes huidFilmRise { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } } @keyframes huidTyping { 0%, 18% { width: 0; } 44%, 100% { width: 17.4ch; } } @keyframes huidScanLine { 0% { transform: translateX(-120%); opacity: 0; } 24%, 74% { opacity: 1; } 100% { transform: translateX(260%); opacity: 0; } } @keyframes huidVerified { 0%, 48% { opacity: 0; transform: translateY(8px); } 58%, 88% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(8px); } } @media (max-width: 980px) { .huid-shell { grid-template-columns: 1fr; } .huid-copy { text-align: center; } .huid-copy .sub { margin-left: auto; margin-right: auto; } .huid-actions { justify-content: center; } .huid-stage { min-height: 500px; } .huid-certificate-card { inset: 3% 8% 18% 8%; transform: none; } } @media (max-width: 720px) { .huid-shell { padding: 0 18px; gap: 28px; } .huid-copy h2 { font-size: clamp(30px, 10vw, 44px); } .huid-copy .sub { font-size: 14.5px; line-height: 1.65; } .huid-steps { grid-template-columns: 1fr; } .huid-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: center; gap: 12px; } .huid-actions .btn { padding-left: 16px; padding-right: 16px; letter-spacing: 0.16em; } .huid-step { min-height: auto; text-align: left; } .huid-stage { min-height: 430px; } .huid-certificate-card { inset: 0 0 34% 0; } .huid-certificate-card::before { opacity: 1; transform: none; } .huid-verification-film { right: 50%; bottom: 0; width: min(340px, 94%); transform: translateX(50%); } .huid-verification-film { animation-name: huidFilmRiseMobile; } } @media (max-width: 420px) { .huid-actions { grid-template-columns: 1fr; } .huid-stage { min-height: 395px; } .huid-verification-film { padding: 16px; } .huid-film-title { font-size: 24px; } .huid-input-value { font-size: 13px; } .huid-result { font-size: 8.4px; letter-spacing: 0.08em; } } @keyframes huidFilmRiseMobile { 0%, 100% { transform: translateX(50%) translate3d(0, 0, 0); } 50% { transform: translateX(50%) translate3d(0, -8px, 0); } } @media (prefers-reduced-motion: reduce) { .huid-step::after, .huid-certificate-card, .huid-certificate-card::after, .huid-verification-film, .huid-input-value, .huid-scan-lines span::after, .huid-result { animation: none; } .huid-input-value { width: auto; } .huid-result { opacity: 1; transform: none; } } /* ---- CATEGORY CARDS (homepage) ---- */ .product-categories-section { position: relative; overflow: hidden; background: radial-gradient(circle at 12% 16%, rgba(248, 250, 251, 0.66), transparent 34%), linear-gradient(180deg, rgba(238, 241, 242, 0), rgba(216, 222, 226, 0.18), rgba(238, 241, 242, 0)); } .categories { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 0 36px; } .category { position: relative; padding: 0 28px 34px; overflow: hidden; text-align: center; background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--border-radius); box-shadow: inset 0 0 0 1px rgba(248, 250, 251, 0.54); transition: transform .25s, box-shadow .25s, border-color .25s; } .category::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0 38%, rgba(255, 255, 255, 0.46) 48%, transparent 58% 100%); transform: translateX(-120%); opacity: 0.52; pointer-events: none; animation: categoryCardSheen 5.8s ease-in-out infinite; } .category::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, transparent 0 32%, rgba(248, 250, 251, 0.86) 48%, transparent 64% 100%) top / 220% 1px no-repeat, linear-gradient(180deg, transparent 0 32%, rgba(31, 77, 58, 0.32) 48%, transparent 64% 100%) right / 1px 220% no-repeat, linear-gradient(270deg, transparent 0 32%, rgba(248, 250, 251, 0.72) 48%, transparent 64% 100%) bottom / 220% 1px no-repeat, linear-gradient(0deg, transparent 0 32%, rgba(31, 77, 58, 0.24) 48%, transparent 64% 100%) left / 1px 220% no-repeat; animation: categoryBorderRun 5.6s linear infinite; opacity: 0.82; } .category:hover { transform: translateY(-3px); border-color: rgba(31, 77, 58, 0.24); box-shadow: 0 24px 46px -30px rgba(23, 35, 41, 0.42); } .category-visual { position: relative; height: 214px; margin: 0 -28px 24px; overflow: hidden; background: radial-gradient(circle at 50% 16%, rgba(248, 250, 251, 0.74), transparent 36%), linear-gradient(135deg, rgba(31, 77, 58, 0.10), rgba(216, 222, 226, 0.42)); border-bottom: 1px solid rgba(142, 154, 163, 0.24); } .category-visual::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.28), transparent 30%), linear-gradient(90deg, rgba(248, 250, 251, 0.08), transparent 42%, rgba(31, 77, 58, 0.08)); pointer-events: none; } .category-image { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.94) contrast(1.02); transform: translate3d(0, var(--category-parallax, 0px), 0) scale(1.02); transition: transform .7s cubic-bezier(.22, .61, .36, 1), filter .25s ease; } .category-image-contain { object-fit: contain; padding: 14px; } .category-certified-mark { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: min(82%, clamp(220px, 18vw, 286px)); aspect-ratio: 1.48 / 1; overflow: hidden; border-radius: 999px; background: var(--color-bg-light); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.30), 0 20px 42px -28px rgba(23, 35, 41, 0.58); } .category-certified-mark img { width: 86%; height: auto; max-width: none; } .category:hover .category-image { transform: translate3d(0, var(--category-parallax, 0px), 0) scale(1.055); filter: saturate(1.02) contrast(1.05); } .category-proof { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; min-height: 28px; margin: -38px auto 14px; padding: 0.48em 0.85em; border: 1px solid rgba(31, 77, 58, 0.16); border-radius: 999px; background: rgba(248, 250, 251, 0.88); box-shadow: 0 14px 32px -24px rgba(23, 35, 41, 0.46); font-family: var(--font-display); font-size: 9.5px; letter-spacing: 0.17em; color: var(--color-brand-green); text-transform: uppercase; white-space: nowrap; } .category .num { font-family: var(--font-script); font-size: 54px; color: var(--color-accent); line-height: 1; margin-bottom: 6px; } .category h3 { font-family: var(--font-heading); font-style: italic; font-size: 26px; color: var(--color-primary); margin: 4px 0 8px; } .category p { color: var(--color-text-soft); font-size: 15px; margin: 0; line-height: 1.55; } .category-idols { background: linear-gradient(180deg, rgba(248, 250, 251, 0.98), rgba(235, 241, 237, 0.92)); } .category-idols .category-visual { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 44%, rgba(248, 250, 251, 0.30), transparent 34%), linear-gradient(135deg, rgba(31, 77, 58, 0.96), rgba(54, 93, 74, 0.66)); } .category-decor .category-visual { background: radial-gradient(circle at 78% 18%, rgba(248, 250, 251, 0.82), transparent 34%), linear-gradient(135deg, rgba(216, 222, 226, 0.62), rgba(248, 250, 251, 0.92)); } .category-decor .category-image { object-fit: cover; object-position: center 44%; padding: 0; filter: saturate(0.92) contrast(1.02); } .category-jewellery .category-visual { background: radial-gradient(circle at 44% 20%, rgba(255, 255, 255, 0.22), transparent 34%), linear-gradient(135deg, #111b17, rgba(31, 77, 58, 0.82)); } .category-jewellery .category-image { object-fit: cover; object-position: center 48%; padding: 0; filter: saturate(0.92) contrast(1.04); } @keyframes categoryCardSheen { 0%, 58%, 100% { transform: translateX(-120%); opacity: 0; } 72% { opacity: .5; } 86% { transform: translateX(120%); opacity: 0; } } @keyframes categoryBorderRun { 0% { background-position: 220% 0, 100% 220%, -120% 100%, 0 -120%; } 100% { background-position: -120% 0, 100% -120%, 220% 100%, 0 220%; } } @media (max-width: 760px) { .category { padding: 0 22px 30px; } .category-visual { margin: 0 -22px 22px; height: 194px; } .category-proof { margin-top: -34px; font-size: 8.5px; letter-spacing: 0.12em; } } @media (prefers-reduced-motion: reduce) { .category::before, .category::after, .category-image { animation: none; transition: none; } } /* ---- FOUNDER MESSAGE BLOCK ---- */ .founder-block { padding: var(--space-xl) 36px; } .founder-block .ornate-frame { isolation: isolate; overflow: hidden; background: radial-gradient(circle at 18% 16%, rgba(248, 250, 251, 0.96), transparent 34%), linear-gradient(135deg, rgba(248, 250, 251, 0.98), rgba(238, 241, 242, 0.94)); } .founder-block .ornate-frame::before { content: ""; position: absolute; inset: 1px; z-index: 0; background: linear-gradient(90deg, rgba(31, 77, 58, 0.035) 1px, transparent 1px), linear-gradient(0deg, rgba(31, 77, 58, 0.028) 1px, transparent 1px); background-size: 34px 34px; opacity: 0.58; pointer-events: none; } .founder-block .ornate-frame .corner { z-index: 3; } .founder-inner { position: relative; z-index: 2; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: minmax(230px, 310px) minmax(0, 1fr); gap: clamp(34px, 5vw, 62px); align-items: center; text-align: left; } .founder-portrait { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--border-radius); border: 1px solid rgba(31, 77, 58, 0.16); background: var(--color-bg-light); box-shadow: 0 24px 56px -32px rgba(23, 35, 41, 0.58); } .founder-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .founder-copy { display: grid; grid-template-columns: 1fr; align-content: center; max-width: 620px; } .founder-copy .eyebrow { display: inline-flex; align-items: center; gap: 14px; width: fit-content; color: var(--color-brand-green); } .founder-copy .eyebrow::after { content: ""; width: 48px; height: 1px; background: linear-gradient(90deg, rgba(31, 77, 58, 0.58), transparent); } .founder-inner h2 { font-family: var(--font-heading); font-style: italic; font-size: clamp(30px, 3.8vw, 44px); color: var(--color-brand-green); margin: 14px 0 18px; line-height: 1.08; max-width: 560px; } .founder-inner p { color: var(--color-text-soft); font-size: 16.5px; line-height: 1.72; margin: 0 0 12px; max-width: 610px; } .founder-quote { font-size: 22px !important; font-style: italic; color: var(--color-primary) !important; line-height: 1.4 !important; margin-bottom: 28px !important; } .founder-sign { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(31, 77, 58, 0.16); } .founder-sign .name { font-family: var(--font-script); font-size: clamp(38px, 4.2vw, 48px); color: var(--color-brand-green); line-height: 1; display: block; } .founder-sign .role { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.3em; color: var(--color-text-faint); display: block; margin-top: 6px; } @media (max-width: 820px) { .founder-block { padding: var(--space-lg) 20px; } .founder-block .ornate-frame::before { background-size: 28px 28px; } .founder-inner { grid-template-columns: 1fr; text-align: center; gap: 30px; } .founder-portrait { width: min(100%, 320px); margin: 0 auto; } .founder-copy { max-width: none; } .founder-copy .eyebrow { margin: 0 auto; } .founder-copy .eyebrow::after { width: 34px; } .founder-inner h2, .founder-inner p { max-width: none; } } /* ---- HOUSES SHOWCASE (homepage) ---- */ .houses-showcase-section { position: relative; overflow: hidden; background: radial-gradient(circle at 12% 12%, rgba(248, 250, 251, 0.72), transparent 32%), linear-gradient(180deg, rgba(238, 241, 242, 0), rgba(216, 222, 226, 0.28), rgba(238, 241, 242, 0)); } .houses-showcase-title .sub { max-width: 760px; } .houses-showcase { max-width: 1200px; margin: 38px auto 0; padding: 0 36px; } .house-theme-meora { --house-accent: #8d4fc6; --house-accent-soft: rgba(141, 79, 198, 0.22); --house-panel: #21122f; --house-panel-2: #39204e; --house-image-position: center top; } .house-theme-ishwara { --house-accent: #bd8b20; --house-accent-soft: rgba(189, 139, 32, 0.24); --house-panel: #4b3208; --house-panel-2: #836019; --house-image-position: center top; } .house-theme-silvora { --house-accent: #c5a24a; --house-accent-soft: rgba(197, 162, 74, 0.22); --house-panel: #f8fafb; --house-panel-2: #e7ded0; --house-image-position: center center; } .house-theme-star { --house-accent: #aeb8bf; --house-accent-soft: rgba(174, 184, 191, 0.24); --house-panel: #121416; --house-panel-2: #2d3134; --house-image-position: center center; } .house-theme-world { --house-accent: #b89b72; --house-accent-soft: rgba(184, 155, 114, 0.24); --house-panel: #211d18; --house-panel-2: #514233; --house-image-position: center center; } .house-carousel-frame { position: relative; } .house-carousel-viewport { overflow: hidden; border: 1px solid rgba(142, 154, 163, 0.28); border-radius: var(--border-radius); background: var(--color-bg-light); box-shadow: 0 34px 90px -56px rgba(23, 35, 41, 0.42); } .house-carousel-track { display: flex; transform: translateX(0); transition: transform 620ms cubic-bezier(.22, .61, .36, 1); } .house-slide { flex: 0 0 100%; min-width: 0; } .house-slide-link { height: clamp(430px, 48vw, 560px); min-height: clamp(430px, 48vw, 560px); display: grid; grid-template-columns: minmax(300px, 44%) minmax(0, 1fr); color: var(--color-bg-light); text-decoration: none; } .house-slide-media { position: relative; min-height: 100%; margin: 0; overflow: hidden; background: var(--house-panel, var(--color-primary)); } .house-slide-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23, 35, 41, 0.12), transparent 52%), radial-gradient(circle at 70% 24%, rgba(255, 255, 255, 0.16), transparent 28%); pointer-events: none; } .house-slide-media img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: var(--house-image-position, center); transform: scale(1.02); transition: transform 900ms cubic-bezier(.22, .61, .36, 1); } .house-slide.is-active .house-slide-media img { transform: scale(1.065); } .house-slide-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(34px, 5vw, 68px); background: var(--house-panel, var(--color-primary)); background: linear-gradient(135deg, color-mix(in srgb, var(--house-panel) 88%, #000 12%), var(--house-panel-2)); position: relative; isolation: isolate; } .house-theme-silvora .house-slide-copy { color: var(--color-primary-dark); } .house-slide-copy::before { content: ""; position: absolute; inset: 18px; border: 1px solid color-mix(in srgb, var(--house-accent) 52%, transparent); pointer-events: none; opacity: 0.7; } .house-slide-copy::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 82% 14%, var(--house-accent-soft), transparent 30%), linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 42%); } .house-kicker, .house-slide-meta { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; } .house-kicker { color: var(--house-accent); color: color-mix(in srgb, var(--house-accent) 76%, #fff 24%); margin-bottom: 18px; } .house-slide h3 { font-family: var(--font-display); font-size: clamp(34px, 5vw, 64px); letter-spacing: clamp(0.04em, 0.7vw, 0.16em); line-height: 0.96; color: currentColor; margin: 0; white-space: nowrap; } .house-slide p { max-width: 520px; margin: 22px 0 0; color: currentColor; color: color-mix(in srgb, currentColor 78%, transparent); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; } .house-slide-meta { margin-top: 22px; color: currentColor; color: color-mix(in srgb, currentColor 72%, transparent); } .house-cta { width: fit-content; margin-top: 30px; padding-bottom: 6px; border-bottom: 1px solid var(--house-accent); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: currentColor; } .house-carousel-btn { position: absolute; top: 50%; z-index: 4; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(248, 250, 251, 0.78); border-radius: 50%; background: rgba(23, 35, 41, 0.58); color: var(--color-bg-light); font-size: 30px; line-height: 1; transform: translateY(-50%); box-shadow: 0 16px 34px -20px rgba(23, 35, 41, 0.7); transition: background .2s ease, transform .2s ease; } .house-carousel-prev { left: 18px; } .house-carousel-next { right: 18px; } .house-carousel-btn:hover, .house-carousel-btn:focus-visible { background: var(--color-brand-green); transform: translateY(-50%) scale(1.05); outline: none; } .house-carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; } .house-carousel-dots button { width: 34px; height: 4px; padding: 0; border: 0; border-radius: 999px; background: rgba(142, 154, 163, 0.42); transition: width .25s ease, background .25s ease; } .house-carousel-dots button.is-active { width: 54px; background: var(--color-brand-green); } .houses-grid { max-width: 1200px; margin: 28px auto 0; padding: 0 36px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } @media (max-width: 980px) { .house-slide-link { grid-template-columns: 1fr; } .house-slide-media { min-height: 360px; } .house-slide-copy { padding: 34px 28px 38px; } .houses-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 72vw); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; } } @media (max-width: 620px) { .houses-showcase { margin-top: 30px; padding: 0 18px; } .house-slide-link { position: relative; display: block; height: 560px; min-height: 560px; } .house-slide-media { position: absolute; inset: 0; min-height: 0; height: 100%; } .house-slide-media img { min-height: 0; height: 100%; } .house-slide-copy { position: relative; min-height: 560px; justify-content: flex-end; padding: 92px 22px 34px; color: var(--color-bg-light); background: linear-gradient(180deg, rgba(23, 35, 41, 0.04) 0%, rgba(23, 35, 41, 0.38) 44%, rgba(23, 35, 41, 0.92) 100%); } .house-theme-silvora .house-slide-copy { color: var(--color-bg-light); background: linear-gradient(180deg, rgba(23, 35, 41, 0.02) 0%, rgba(23, 35, 41, 0.22) 38%, rgba(23, 35, 41, 0.84) 100%); } .house-slide-copy::before { inset: 14px; border-color: rgba(248, 250, 251, 0.32); } .house-kicker, .house-slide-meta { font-size: 10px; letter-spacing: 0.22em; } .house-kicker { margin-bottom: 14px; } .house-slide h3 { font-size: clamp(26px, 8vw, 36px); letter-spacing: 0.08em; white-space: normal; } .house-slide p { font-size: 15px; margin-top: 16px; line-height: 1.58; } .house-slide-meta { margin-top: 16px; } .house-cta { margin-top: 22px; } .house-carousel-btn { width: 38px; height: 38px; font-size: 26px; } .house-carousel-prev { left: 10px; } .house-carousel-next { right: 10px; } .houses-grid { padding: 0 18px; } } @media (prefers-reduced-motion: reduce) { .house-carousel-track, .house-slide-media img { transition: none; } } /* ---- SIGNATURE PACKAGING (home page) ---- */ .packaging-showcase-section { position: relative; overflow: hidden; padding: clamp(84px, 9vw, 140px) 0; background: linear-gradient(112deg, rgba(248, 250, 251, 0.98) 0%, rgba(229, 237, 234, 0.98) 44%, rgba(242, 246, 245, 0.98) 100%); border-top: 1px solid rgba(142, 154, 163, 0.24); border-bottom: 1px solid rgba(142, 154, 163, 0.24); } .packaging-showcase-section::before { content: ""; position: absolute; inset: -18% -8%; background: repeating-linear-gradient(90deg, rgba(31, 77, 58, 0.08) 0 1px, transparent 1px 74px), linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.46) 52%, transparent 100%); opacity: 0.44; transform: rotate(-3deg); pointer-events: none; } .packaging-showcase { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr); align-items: center; gap: clamp(42px, 6vw, 86px); } .packaging-copy { max-width: 520px; } .packaging-copy h2 { margin: 12px 0 18px; color: var(--color-brand-green); font-size: clamp(34px, 4.8vw, 58px); font-style: italic; } .packaging-copy p { max-width: 510px; font-family: var(--font-heading); font-size: clamp(18px, 1.7vw, 21px); font-style: italic; line-height: 1.68; } .packaging-notes { display: grid; gap: 12px; margin-top: 30px; padding: 20px 0; border-top: 1px solid rgba(31, 77, 58, 0.16); border-bottom: 1px solid rgba(31, 77, 58, 0.16); } .packaging-notes span { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-brand-green); } .packaging-notes span::before { content: ""; flex: 0 0 28px; height: 1px; background: linear-gradient(90deg, var(--color-brand-green), transparent); } .packaging-stage { position: relative; min-height: clamp(430px, 44vw, 610px); isolation: isolate; } .packaging-stage::before { content: ""; position: absolute; inset: 10% 5% 7% 8%; border: 1px solid rgba(31, 77, 58, 0.16); transform: rotate(-1.4deg); } .packaging-hero-panel, .packaging-layer { --pack-shift: 0px; --pack-rotate: 0deg; position: absolute; margin: 0; overflow: hidden; border: 1px solid rgba(248, 250, 251, 0.76); border-radius: var(--border-radius); background: var(--color-bg-light); box-shadow: 0 36px 82px -56px rgba(23, 35, 41, 0.56); transform: translate3d(0, var(--pack-shift), 0) rotate(var(--pack-rotate)); transition: transform .7s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease; } .packaging-hero-panel::after, .packaging-layer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 36%, rgba(31, 77, 58, 0.10)); pointer-events: none; } .packaging-hero-panel img, .packaging-layer img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.03); } .packaging-hero-panel { z-index: 1; left: 0; top: 10%; width: 68%; height: 72%; --pack-rotate: -1.2deg; } .packaging-hero-panel img { object-position: center center; } .packaging-layer-wide { z-index: 3; right: 0; top: 0; width: 49%; aspect-ratio: 16 / 9; --pack-rotate: 1.1deg; } .packaging-layer-wide img { object-position: center center; } .packaging-layer-small { z-index: 4; right: 9%; bottom: 0; width: 38%; aspect-ratio: 1.25 / 1; --pack-rotate: -0.6deg; } .packaging-layer-small img { object-position: center center; } .packaging-seal { --pack-shift: 0px; position: absolute; z-index: 5; left: 5%; bottom: 4%; min-width: 176px; padding: 16px 18px; border-left: 2px solid var(--color-brand-green); background: rgba(248, 250, 251, 0.88); box-shadow: 0 24px 52px -38px rgba(23, 35, 41, 0.52); transform: translate3d(0, var(--pack-shift), 0); } .packaging-seal span { display: block; font-family: var(--font-display); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-accent-dark); } .packaging-seal strong { display: block; margin-top: 5px; font-family: var(--font-heading); font-size: 21px; font-style: italic; font-weight: 500; color: var(--color-brand-green); } .is-packaging-ready .packaging-copy, .is-packaging-ready .packaging-stage { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); } .is-packaging-ready .packaging-stage { transition-delay: .12s; } .is-packaging-ready.is-visible .packaging-copy, .is-packaging-ready.is-visible .packaging-stage { opacity: 1; transform: translateY(0); } @media (max-width: 980px) { .packaging-showcase { grid-template-columns: 1fr; } .packaging-copy { max-width: 760px; text-align: center; margin: 0 auto; } .packaging-copy p { margin-left: auto; margin-right: auto; } .packaging-notes { max-width: 620px; margin-left: auto; margin-right: auto; } .packaging-stage { min-height: clamp(430px, 68vw, 580px); } } @media (max-width: 620px) { .packaging-showcase-section { padding: 70px 0; } .packaging-showcase { padding: 0 18px; } .packaging-copy h2 { font-size: clamp(32px, 10vw, 42px); } .packaging-notes { gap: 10px; } .packaging-notes span { justify-content: center; font-size: 9px; letter-spacing: 0.18em; } .packaging-stage { min-height: 500px; } .packaging-stage::before { inset: 9% 4% 8%; } .packaging-hero-panel { left: 0; top: 3%; width: 88%; height: 55%; } .packaging-layer-wide { right: 0; top: 42%; width: 74%; } .packaging-layer-small { left: 4%; right: auto; bottom: 0; width: 56%; } .packaging-seal { left: auto; right: 4%; bottom: 11%; min-width: 150px; padding: 13px 14px; } .packaging-seal strong { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { .packaging-hero-panel, .packaging-layer, .packaging-seal, .is-packaging-ready .packaging-copy, .is-packaging-ready .packaging-stage { transition: none; } } /* ---- STATS ROW (about page) ---- */ .stats { max-width: 1200px; margin: 0 auto; padding: var(--space-lg) 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .stat { text-align: center; } .stat .value { font-family: var(--font-heading); font-style: italic; font-size: 56px; color: var(--color-primary); line-height: 1; } .stat .label { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-text-faint); margin-top: 10px; } /* ---- VALUES (three commitments — about page) ---- */ .values { max-width: 1100px; margin: 0 auto; padding: var(--space-lg) 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .value { padding: 28px 0; border-top: 1px solid var(--color-accent); } .value .v-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .value .roman { font-family: var(--font-heading); font-style: italic; font-size: 24px; color: var(--color-accent); } .value h4 { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.28em; color: var(--color-primary); margin: 0; font-weight: 600; } .value p { color: var(--color-text-soft); font-size: 16px; line-height: 1.65; margin: 0; } /* ---- TEXT BLOCKS (about page) ---- */ .text-block { max-width: 880px; margin: 0 auto; padding: var(--space-md) 36px; text-align: center; } .text-block h3 { font-family: var(--font-heading); font-style: italic; font-size: 36px; color: var(--color-primary); margin: 14px 0 18px; } .text-block p { font-size: 17px; line-height: 1.7; color: var(--color-text-soft); } /* ---- ABOUT PAGE UPGRADE ---- */ .about-page-banner { min-height: clamp(260px, 34vw, 430px); } .about-page-banner::after { background: linear-gradient(180deg, rgba(23, 35, 41, 0.12), rgba(23, 35, 41, 0.02) 44%, rgba(238, 241, 242, 0.72)), radial-gradient(circle at 50% 36%, rgba(248, 250, 251, 0.24), transparent 42%); } .about-banner-content { width: min(680px, calc(100% - 44px)); background: rgba(248, 250, 251, 0.64); box-shadow: 0 28px 66px -48px rgba(23, 35, 41, 0.5); } .about-hero { padding-bottom: clamp(48px, 6vw, 82px); } .about-hero h1 { color: var(--color-brand-green); } .about-hero .lede { max-width: 790px; } .about-hero-cert { margin-top: 24px; } .about-hero-cert .hero-certified-tagline { box-shadow: 0 18px 36px -30px rgba(23, 35, 41, 0.5); } .about-signature-section { position: relative; overflow: hidden; padding: clamp(82px, 9vw, 136px) 0; background: linear-gradient(116deg, rgba(248, 250, 251, 0.98), rgba(230, 238, 235, 0.98) 54%, rgba(246, 248, 248, 0.98)); border-top: 1px solid rgba(142, 154, 163, 0.24); border-bottom: 1px solid rgba(142, 154, 163, 0.24); } .about-signature-section::before { content: ""; position: absolute; inset: -22% -8%; background: repeating-linear-gradient(90deg, rgba(31, 77, 58, 0.055) 0 1px, transparent 1px 78px), linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.54) 52%, transparent 100%); opacity: 0.62; transform: rotate(-3deg); pointer-events: none; } .about-signature-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(42px, 6vw, 88px); } .about-signature-copy { max-width: 550px; } .about-signature-copy h2, .about-perspective-copy h2, .about-closing-copy h2 { margin: 12px 0 18px; color: var(--color-brand-green); font-size: clamp(34px, 4.7vw, 58px); font-style: italic; } .about-signature-copy p, .about-perspective-copy p, .about-perspective-card p, .about-closing-copy p { font-family: var(--font-heading); font-size: clamp(17px, 1.45vw, 20px); font-style: italic; line-height: 1.72; } .about-proof-list { display: grid; gap: 12px; margin-top: 30px; padding: 20px 0; border-top: 1px solid rgba(31, 77, 58, 0.16); border-bottom: 1px solid rgba(31, 77, 58, 0.16); } .about-proof-list span { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-brand-green); } .about-proof-list span::before { content: ""; flex: 0 0 28px; height: 1px; background: linear-gradient(90deg, var(--color-brand-green), transparent); } .about-media-stage { position: relative; min-height: clamp(440px, 44vw, 620px); isolation: isolate; } .about-media-stage::before { content: ""; position: absolute; inset: 8% 7% 8% 5%; border: 1px solid rgba(31, 77, 58, 0.15); transform: rotate(-1.2deg); } .about-video-panel, .about-layer { --pack-shift: 0px; --pack-rotate: 0deg; position: absolute; margin: 0; overflow: hidden; border: 1px solid rgba(248, 250, 251, 0.78); border-radius: var(--border-radius); background: var(--color-bg-light); box-shadow: 0 34px 82px -54px rgba(23, 35, 41, 0.58); transform: translate3d(0, var(--pack-shift), 0) rotate(var(--pack-rotate)); transition: transform .7s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease; } .about-video-panel::after, .about-layer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 38%, rgba(31, 77, 58, 0.10)); pointer-events: none; } .about-video-panel { z-index: 2; left: 5%; top: 9%; width: 62%; height: 74%; --pack-rotate: -1.1deg; } .about-video-panel video, .about-layer img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92) contrast(1.03); } .about-layer-cert { z-index: 4; right: 0; top: 0; width: 40%; aspect-ratio: 1.18 / 1; --pack-rotate: 1.2deg; } .about-layer-cert img { object-position: center center; } .about-layer-pack { z-index: 5; right: 8%; bottom: 0; width: 45%; aspect-ratio: 1.35 / 1; --pack-rotate: -0.7deg; } .about-layer-pack img { object-position: center center; } .about-media-seal { --pack-shift: 0px; position: absolute; z-index: 6; left: 0; bottom: 5%; min-width: 172px; padding: 16px 18px; border-left: 2px solid var(--color-brand-green); background: rgba(248, 250, 251, 0.9); box-shadow: 0 24px 52px -38px rgba(23, 35, 41, 0.52); transform: translate3d(0, var(--pack-shift), 0); } .about-media-seal span { display: block; font-family: var(--font-display); font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--color-accent-dark); } .about-media-seal strong { display: block; margin-top: 4px; font-family: var(--font-heading); font-size: 32px; font-style: italic; font-weight: 500; color: var(--color-brand-green); line-height: 1; } .is-packaging-ready .about-signature-copy, .is-packaging-ready .about-media-stage { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); } .is-packaging-ready .about-media-stage { transition-delay: .12s; } .is-packaging-ready.is-visible .about-signature-copy, .is-packaging-ready.is-visible .about-media-stage { opacity: 1; transform: translateY(0); } .about-perspective-section { padding: clamp(72px, 8vw, 118px) 0; background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.58), transparent 28%), linear-gradient(180deg, var(--color-bg), var(--color-bg-light)); } .about-perspective-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.46fr); gap: clamp(34px, 5vw, 70px); align-items: stretch; } .about-perspective-card { align-self: center; padding: clamp(28px, 4vw, 42px); border: 1px solid rgba(31, 77, 58, 0.16); border-radius: var(--border-radius); background: linear-gradient(145deg, rgba(248, 250, 251, 0.92), rgba(231, 238, 235, 0.9)); box-shadow: 0 26px 68px -54px rgba(23, 35, 41, 0.48); } .about-card-kicker { display: block; margin-bottom: 16px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--color-brand-green); } .stats.about-stats { position: relative; max-width: 1200px; margin: 0 auto; border: 0; gap: 18px; } .about-stats .stat { padding: 30px 18px 28px; border: 1px solid rgba(31, 77, 58, 0.14); border-radius: var(--border-radius); background: linear-gradient(180deg, rgba(248, 250, 251, 0.92), rgba(238, 244, 242, 0.86)); box-shadow: 0 22px 58px -48px rgba(23, 35, 41, 0.4); } .about-stats .stat .value { color: var(--color-brand-green); } .about-stats .stat .label { color: var(--color-accent-dark); } .about-standard-section { position: relative; overflow: hidden; } .about-standard-section::before { content: ""; position: absolute; inset: 10% 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(31, 77, 58, 0.18), transparent); } .about-standard-grid { position: relative; max-width: 1180px; margin: 48px auto 0; padding: 0 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .about-standard-card { overflow: hidden; border: 1px solid rgba(31, 77, 58, 0.14); border-radius: var(--border-radius); background: rgba(248, 250, 251, 0.88); box-shadow: 0 28px 62px -52px rgba(23, 35, 41, 0.46); } .about-standard-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-deep); } .about-standard-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform .6s cubic-bezier(.22, .61, .36, 1), filter .25s ease; filter: saturate(0.94) contrast(1.03); } .about-standard-card:hover .about-standard-media img { transform: scale(1.07); filter: saturate(1) contrast(1.05); } .about-standard-copy { padding: 24px 24px 28px; } .about-standard-copy span { display: block; margin-bottom: 12px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.28em; color: var(--color-accent-dark); } .about-standard-copy h3 { margin-bottom: 12px; font-size: 26px; font-style: italic; color: var(--color-brand-green); } .about-standard-copy p { font-size: 15.5px; line-height: 1.65; } .about-values-section { padding-top: clamp(70px, 8vw, 116px); background: linear-gradient(180deg, rgba(248, 250, 251, 0.52), transparent); } .about-values .value { padding: 30px; border: 1px solid rgba(31, 77, 58, 0.14); border-top: 2px solid rgba(31, 77, 58, 0.42); border-radius: var(--border-radius); background: rgba(248, 250, 251, 0.76); box-shadow: 0 24px 58px -52px rgba(23, 35, 41, 0.42); } .about-values .value h4 { color: var(--color-brand-green); } .about-values .value p { color: var(--color-text-soft); } .about-closing-section { padding-top: clamp(54px, 6vw, 90px); } .about-closing-frame { max-width: 1180px; overflow: hidden; } .about-closing-frame::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(31, 77, 58, 0.09); pointer-events: none; } .about-closing-content { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr); align-items: center; gap: clamp(34px, 5vw, 70px); } .about-closing-copy p { max-width: 660px; margin-bottom: 30px; } .about-closing-lockup { display: grid; place-items: center; min-height: 330px; border: 1px solid rgba(31, 77, 58, 0.12); border-radius: var(--border-radius); background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.72), transparent 38%), linear-gradient(180deg, rgba(248, 250, 251, 0.92), rgba(224, 233, 230, 0.84)); } .about-closing-lockup .lockup img { width: 86px; } .about-closing-lockup .lockup .name { font-size: clamp(24px, 3vw, 34px); } .about-closing-lockup .lockup .tag { max-width: 300px; font-family: var(--font-body); font-size: 10px; font-style: normal; line-height: 1.45; text-transform: uppercase; color: var(--color-brand-green); } .about-closing-lockup .brand-tm { position: relative; top: -0.72em; margin-left: 0.18em; font-family: var(--font-display); font-size: 0.34em; letter-spacing: 0.08em; color: var(--color-brand-green); } @media (max-width: 980px) { .about-signature-grid, .about-perspective-grid, .about-closing-content { grid-template-columns: 1fr; } .about-signature-copy, .about-perspective-copy, .about-perspective-card { max-width: 760px; margin: 0 auto; text-align: center; } .about-proof-list { max-width: 620px; margin-left: auto; margin-right: auto; } .about-media-stage { min-height: clamp(440px, 70vw, 580px); } .about-standard-grid { grid-template-columns: 1fr; max-width: 720px; } } @media (max-width: 620px) { .services-page-banner, .contact-page-banner, .about-page-banner { min-height: 260px; } .about-banner-content { width: min(92%, 520px); } .about-hero-cert .hero-certified-tagline { font-size: 8px; } .about-signature-section, .about-perspective-section { padding: 68px 0; } .about-media-stage { min-height: 500px; } .about-video-panel { left: 0; top: 4%; width: 84%; height: 54%; } .about-layer-cert { right: 0; top: 39%; width: 56%; } .about-layer-pack { left: 3%; right: auto; bottom: 0; width: 60%; } .about-media-seal { left: auto; right: 4%; bottom: 8%; min-width: 142px; padding: 13px 14px; } .about-proof-list span { justify-content: center; font-size: 9px; letter-spacing: 0.16em; } .stats.about-stats { padding-left: 18px; padding-right: 18px; gap: 12px; } .about-stats .stat { padding: 24px 10px; } .about-stats .stat .value { font-size: 42px; } .about-stats .stat .label { font-size: 9px; letter-spacing: 0.18em; } .about-standard-grid, .values.about-values { padding-left: 18px; padding-right: 18px; } .about-closing-frame { padding: 54px 22px; } .about-closing-lockup { min-height: 280px; } } @media (prefers-reduced-motion: reduce) { .about-video-panel, .about-layer, .about-media-seal, .is-packaging-ready .about-signature-copy, .is-packaging-ready .about-media-stage, .about-standard-media img { transition: none; } } /* ---- PRODUCTS / BRAND SECTIONS (services page) ---- */ .brand-section { --brand-accent: var(--color-brand-green); --brand-soft: rgba(216, 222, 226, 0.42); position: relative; isolation: isolate; overflow: hidden; padding: clamp(74px, 7vw, 104px) 36px; max-width: none; margin: 0; background: radial-gradient(circle at 9% 12%, rgba(255, 255, 255, 0.72), transparent 28%), radial-gradient(circle at 92% 80%, var(--brand-soft), transparent 34%), linear-gradient(180deg, rgba(248, 250, 251, 0.82), rgba(238, 243, 241, 0.78)); border-top: 1px solid rgba(31, 77, 58, 0.10); } .brand-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent), repeating-linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 6%, transparent) 0 1px, transparent 1px 92px); opacity: 0.48; pointer-events: none; } .brand-theme-meora { --brand-accent: #8d4fc6; --brand-soft: rgba(141, 79, 198, 0.12); } .brand-theme-ishwara { --brand-accent: #bd8b20; --brand-soft: rgba(189, 139, 32, 0.13); } .brand-theme-silvora { --brand-accent: #a88936; --brand-soft: rgba(197, 162, 74, 0.14); } .brand-theme-star { --brand-accent: #66747d; --brand-soft: rgba(174, 184, 191, 0.18); } .brand-theme-world { --brand-accent: #9b7c54; --brand-soft: rgba(184, 155, 114, 0.15); } .brand-header { max-width: 1320px; margin: 0 auto 38px; display: grid; grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 0.72fr); align-items: end; gap: 32px; padding-bottom: 28px; border-bottom: 1px solid color-mix(in srgb, var(--brand-accent) 20%, transparent); } .brand-header .left { display: flex; flex-direction: column; gap: 8px; max-width: 640px; } .brand-header .name { font-family: var(--font-display); font-size: clamp(36px, 4.4vw, 56px); letter-spacing: 0.22em; color: var(--brand-accent); font-weight: 600; display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; margin: 0; } .brand-header .name .city { font-family: var(--font-heading); font-style: italic; font-size: 0.36em; letter-spacing: 0.18em; color: color-mix(in srgb, var(--brand-accent) 62%, var(--color-accent-dark) 38%); text-transform: none; font-weight: 400; } .brand-header .tagline { font-family: var(--font-heading); font-style: italic; font-size: 22px; color: color-mix(in srgb, var(--brand-accent) 68%, var(--color-accent-dark) 32%); } .brand-header .blurb { color: var(--color-text-soft); font-size: 16px; line-height: 1.66; max-width: 540px; text-align: right; font-style: italic; } @media (max-width: 980px) { .brand-section { padding: 66px 24px; } .brand-header { grid-template-columns: 1fr; text-align: left; } .brand-header .blurb { max-width: 760px; text-align: left; } } /* ---- CONTACT PAGE ---- */ .contact-wrap { max-width: 1200px; margin: 0 auto; padding: var(--space-lg) 36px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: start; } .contact-info { display: flex; flex-direction: column; gap: 36px; } .contact-block { padding-bottom: 22px; border-bottom: 1px solid var(--color-border); } .contact-block:last-child { border-bottom: none; } .contact-block .label { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-accent-dark); margin-bottom: 10px; } .contact-block .val { font-family: var(--font-heading); font-style: italic; font-size: 24px; color: var(--color-primary); line-height: 1.4; } .contact-block .val a:hover { color: var(--color-accent-dark); } .contact-map { display: grid; gap: 28px; background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 32px; box-shadow: 0 32px 80px -50px rgba(23, 35, 41, 0.24); } .contact-map-info h3 { font-family: var(--font-heading); font-style: italic; font-size: clamp(28px, 4vw, 38px); color: var(--color-primary); margin: 0 0 14px; } .contact-map-info p { font-size: 17px; line-height: 1.75; color: var(--color-text-soft); max-width: 720px; } .contact-map-frame { border-radius: var(--border-radius-sm); overflow: hidden; border: 1px solid rgba(142, 154, 163, 0.24); } .contact-map-frame iframe { width: 100%; min-height: 440px; display: block; } /* ------------------------------------------------------------ 7. ANIMATIONS ------------------------------------------------------------ */ .fade-up { opacity: 0; transform: translateY(12px); animation: fadeUp .6s ease forwards; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } /* ------------------------------------------------------------ 8. UTILITIES ------------------------------------------------------------ */ .mt-0 { margin-top: 0; } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mb-0 { margin-bottom: 0; } .hidden { display: none !important; } /* Lazy load fade-in */ img { opacity: 0; transition: opacity 0.4s ease; } .houses-grid img.loaded { opacity: 0.25; } img.loaded { opacity: 1; }