/* ============================================ HANZLA INTERNATIONAL CORPORATION — BRAND TOKENS ============================================ */ /* Fonts loaded via preconnect in HTML for better performance */ :root { /* Section 2 — locked color palette */ --emerald: #1B3A2B; --emerald-light: #234634; --brass: #A98244; --brass-light: #C2A06A; --parchment: #F2EDE3; --parchment-dark: #E8E0D2; --ink: #262625; --ink-soft: #5F5E5A; --white: #FDFCFA; /* Typography */ --font-serif: 'Source Serif 4', Georgia, serif; --font-sans: 'Inter', -apple-system, sans-serif; /* Spacing scale */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; --max-width: 1200px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); color: var(--ink); background: var(--parchment); line-height: 1.6; -webkit-font-smoothing: antialiased; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); } /* ============================================ TYPOGRAPHY SYSTEM ============================================ */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; color: var(--emerald); line-height: 1.15; } h1 { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: 0; } h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: 0; } h3 { font-size: 1.4rem; } h4 { font-size: 1.1rem; } p { color: var(--ink-soft); } .eyebrow { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); } /* ============================================ SIGNATURE ELEMENT — THE LEDGER LINE A recurring device across every page: a hairline rule anchored by "EST. 2005" on one end and a precision data-point on the other. Heritage and technical precision, literally on one line. ============================================ */ .ledger-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); margin: var(--space-lg) 0; } .ledger-line__mark { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--emerald); white-space: nowrap; } .ledger-line__data { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-align: right; white-space: nowrap; } .ledger-line__rule { flex: 1; height: 1px; background: repeating-linear-gradient(to right, var(--brass) 0, var(--brass) 4px, transparent 4px, transparent 9px); opacity: 0.6; } @media (max-width: 640px) { .ledger-line { flex-wrap: wrap; } .ledger-line__rule { display: none; } } /* ============================================ HEADER / NAVIGATION ============================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--parchment); border-bottom: 1px solid var(--parchment-dark); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem var(--space-md); max-width: var(--max-width); margin: 0 auto; } .nav__brand { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--emerald); display: flex; flex-direction: column; line-height: 1.2; } .nav__brand-sub { font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.15em; color: var(--brass); text-transform: uppercase; } .nav__links { display: flex; gap: var(--space-md); list-style: none; } .nav__links a { font-size: 0.88rem; font-weight: 500; color: var(--ink); position: relative; padding-bottom: 4px; } .nav__links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--brass); transition: width 0.25s ease; } .nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width: 100%; } .nav__links a[aria-current="page"] { color: var(--emerald); } .nav__cta { background: var(--emerald); color: var(--parchment); padding: 0.65rem 1.4rem; font-size: 0.85rem; font-weight: 500; border: 1px solid var(--emerald); transition: background 0.2s ease; } .nav__cta:hover { background: var(--emerald-light); } .nav__toggle { display: none; background: none; border: none; font-size: 1.6rem; color: var(--emerald); cursor: pointer; } @media (max-width: 880px) { .nav__links { display: none; } .nav__toggle { display: block; } .nav__cta { display: none; } .nav__links.is-open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--parchment); border-bottom: 1px solid var(--parchment-dark); padding: var(--space-md); gap: var(--space-sm); } } /* ============================================ BUTTONS ============================================ */ .btn { display: inline-block; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; padding: 0.9rem 1.8rem; border: 1px solid var(--emerald); cursor: pointer; transition: all 0.2s ease; } .btn--primary { background: var(--emerald); color: var(--parchment); } .btn--primary:hover { background: var(--emerald-light); } .btn--outline { background: transparent; color: var(--emerald); } .btn--outline:hover { background: var(--emerald); color: var(--parchment); } .btn--brass { border-color: var(--brass); color: var(--parchment); background: var(--brass); } .btn--brass:hover { background: var(--brass-light); } /* ============================================ HERO ============================================ */ .hero { padding: var(--space-xl) 0 var(--space-lg); background: var(--parchment); } .hero__eyebrow { margin-bottom: var(--space-sm); } .hero__title { max-width: 820px; margin-bottom: var(--space-md); } .hero__subtitle { max-width: 560px; font-size: 1.1rem; margin-bottom: var(--space-md); } .hero__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; } /* ============================================ SECTIONS ============================================ */ .section { padding: var(--space-lg) 0; } .section--alt { background: var(--white); } .section__head { max-width: 700px; margin-bottom: var(--space-lg); } .section__head p { margin-top: var(--space-sm); font-size: 1.05rem; } /* ============================================ GRID LAYOUTS ============================================ */ .grid { display: grid; gap: var(--space-md); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 880px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* ============================================ CARDS ============================================ */ .card { background: var(--white); border: 1px solid var(--parchment-dark); padding: var(--space-md); } .card--bordered-top { border-top: 3px solid var(--brass); } .card h3 { margin-bottom: var(--space-xs); } /* ============================================ SPEC TABLE (used on Products page for technical matrices) ============================================ */ .spec-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .spec-table th, .spec-table td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--parchment-dark); } .spec-table th { font-family: var(--font-sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); background: var(--parchment-dark); } .spec-table td:first-child { font-weight: 500; color: var(--emerald); } .spec-table tr:last-child td { border-bottom: none; } .table-scroll { overflow-x: auto; border: 1px solid var(--parchment-dark); } /* ============================================ STAT ROW ============================================ */ .stat-row { display: flex; flex-wrap: wrap; gap: var(--space-lg); } .stat { flex: 1; min-width: 140px; } .stat__value { font-family: var(--font-serif); font-size: 2.4rem; color: var(--emerald); font-weight: 500; } .stat__label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.25rem; } /* ============================================ FOOTER ============================================ */ .site-footer { background: var(--emerald); color: var(--parchment); padding: var(--space-lg) 0 var(--space-md); } .site-footer h4 { color: var(--parchment); font-size: 0.95rem; margin-bottom: var(--space-sm); } .site-footer a { color: var(--parchment-dark); font-size: 0.9rem; } .site-footer a:hover { color: var(--brass-light); } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-lg); } .footer__brand { font-family: var(--font-serif); font-size: 1.3rem; color: var(--parchment); margin-bottom: var(--space-xs); } .footer__tagline { color: var(--parchment-dark); font-size: 0.9rem; max-width: 320px; } .footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .footer__bottom { border-top: 1px solid rgba(242,237,227,0.15); padding-top: var(--space-sm); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); font-size: 0.8rem; color: var(--parchment-dark); } @media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr; } } /* ============================================ PAGE-SPECIFIC: ABOUT TIMELINE ============================================ */ .timeline { position: relative; padding-left: var(--space-md); border-left: 1px solid var(--brass); } .timeline__item { position: relative; margin-bottom: var(--space-md); padding-bottom: var(--space-sm); } .timeline__item::before { content: ''; position: absolute; left: calc(-1 * var(--space-md) - 4px); top: 6px; width: 8px; height: 8px; background: var(--brass); border-radius: 50%; } .timeline__year { font-family: var(--font-serif); font-size: 1.2rem; color: var(--emerald); margin-bottom: 0.25rem; } /* ============================================ CONTACT FORM ============================================ */ .form-group { margin-bottom: var(--space-sm); } .form-group label { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--emerald); margin-bottom: 0.4rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.8rem 1rem; font-family: var(--font-sans); font-size: 0.95rem; border: 1px solid var(--parchment-dark); background: var(--white); color: var(--ink); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 2px solid var(--brass); outline-offset: 1px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); } @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } } /* ============================================ DARK CINEMATIC HERO SYSTEM The signature visual language: deep emerald-to- charcoal gradient, fine brass line-art, line-rise headline animation, magnetic buttons. Used on the homepage hero and as section-divider moments on other pages. ============================================ */ .site-header.dark-v { background: #0E1813; border-bottom: 1px solid rgba(242,237,227,0.08); } .site-header.dark-v .nav__brand, .site-header.dark-v .nav__links a { color: var(--parchment); } .site-header.dark-v .nav__brand-sub { color: var(--brass-light); } .site-header.dark-v .nav__links a[aria-current="page"] { color: var(--brass-light); } .site-header.dark-v .nav__cta { background: var(--brass); border-color: var(--brass); color: #14241B; } .site-header.dark-v .nav__cta:hover { background: var(--brass-light); } .site-header.dark-v .nav__toggle { color: var(--parchment); } /* Mobile dropdown open state — override white text on dark-v header so links are readable on the parchment dropdown background */ @media (max-width: 880px) { .site-header.dark-v .nav__links.is-open a { color: var(--emerald); } .site-header.dark-v .nav__links.is-open a[aria-current="page"] { color: var(--brass); } .site-header.dark-v .nav__links.is-open a::after { background: var(--brass); } } .cinema { position: relative; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 75% 30%, rgba(169,130,68,0.16), transparent 60%), linear-gradient(160deg, #14241B 0%, #0E1813 100%); isolation: isolate; color: var(--parchment); } .cinema--full { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } .cinema--band { padding: var(--space-xl) 0; } .cinema__lines { position: absolute; inset: 0; z-index: 1; opacity: 0.5; pointer-events: none; } .cinema__lines svg { width: 100%; height: 100%; } .cinema__noise { position: absolute; inset: 0; z-index: 2; opacity: 0.04; background-image: repeating-linear-gradient(0deg, transparent, transparent 1px, #fff 1px, #fff 2px); pointer-events: none; } .cinema__content { position: relative; z-index: 3; max-width: var(--max-width); margin: 0 auto; padding: 8rem var(--space-md) 5rem; width: 100%; } .cinema--band .cinema__content { padding: 0 var(--space-md); } .cinema__eyebrow-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.4rem; opacity: 0; animation: cinema-fade 1s ease 0.15s forwards; } .cinema__eyebrow-row .rule { width: 48px; height: 1px; background: var(--brass-light); } .cinema__eyebrow-row span { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-light); } .cinema__title { font-family: var(--font-serif); font-weight: 500; color: var(--parchment); font-size: clamp(2.6rem, 6.5vw, 5.6rem); line-height: 1.02; letter-spacing: 0; margin-bottom: 2rem; } .cinema--full .cinema__title { font-size: clamp(3.2rem, 8vw, 7rem); line-height: 0.98; } .cinema__title .line { display: block; overflow: hidden; } .cinema__title .line span { display: block; transform: translateY(110%); animation: cinema-rise 1.1s cubic-bezier(.19,1,.22,1) forwards; } .cinema__title .line:nth-child(1) span { animation-delay: 0.3s; } .cinema__title .line:nth-child(2) span { animation-delay: 0.45s; color: var(--brass-light); font-style: italic; } .cinema__sub { font-family: var(--font-sans); color: rgba(242,237,227,0.65); font-size: 1.15rem; max-width: 560px; margin-bottom: 2.6rem; opacity: 0; animation: cinema-fade 1s ease 0.85s forwards; } .cinema__actions { display: flex; gap: 1.2rem; flex-wrap: wrap; opacity: 0; animation: cinema-fade 1s ease 1.05s forwards; margin-bottom: 4rem; } .cinema--band .cinema__actions, .cinema--band .cinema__sub { margin-bottom: 0; } .magnetic-btn { position: relative; display: inline-block; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; padding: 1.1rem 2.2rem; border: 1px solid var(--brass-light); cursor: pointer; transition: transform 0.35s cubic-bezier(.19,1,.22,1), background 0.3s ease, color 0.3s ease, border-color 0.3s ease; will-change: transform; } .magnetic-btn--fill { background: var(--brass); color: #14241B; } .magnetic-btn--fill:hover { background: var(--brass-light); } .magnetic-btn--ghost { background: transparent; color: var(--parchment); } .magnetic-btn--ghost:hover { border-color: var(--parchment); } .cinema__ledger { display: grid; grid-template-columns: repeat(4, auto); gap: 3.2rem; padding-top: 2.4rem; border-top: 1px solid rgba(242,237,227,0.12); opacity: 0; animation: cinema-fade 1s ease 1.3s forwards; } .cinema__stat-value { font-family: var(--font-serif); color: var(--parchment); font-size: 2.1rem; font-weight: 500; } .cinema__stat-label { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-light); margin-top: 0.3rem; } .cinema__scroll-cue { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; opacity: 0; animation: cinema-fade 1s ease 1.6s forwards; } .cinema__scroll-cue span { font-family: var(--font-sans); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(242,237,227,0.5); } .cinema__scroll-line { width: 1px; height: 34px; background: rgba(242,237,227,0.25); position: relative; overflow: hidden; } .cinema__scroll-line::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--brass-light); animation: cinema-scrollpulse 1.8s ease-in-out infinite; } @keyframes cinema-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes cinema-rise { to { transform: translateY(0); } } @keyframes cinema-scrollpulse { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } } @media (prefers-reduced-motion: reduce) { .cinema__eyebrow-row, .cinema__title .line span, .cinema__sub, .cinema__actions, .cinema__ledger, .cinema__scroll-cue { animation: none !important; opacity: 1 !important; transform: none !important; } .cinema__scroll-line::after { animation: none; } } @media (max-width: 880px) { .cinema__ledger { grid-template-columns: repeat(2, auto); row-gap: 1.4rem; } .cinema--full .cinema__content { padding-top: 7rem; } } /* ============================================ RFQ CONFIGURATOR (MULTI-STEP) ============================================ */ .rfq { border: 1px solid var(--parchment-dark); background: var(--white); } .rfq__progress { display: table; width: 100%; border-bottom: 1px solid var(--parchment-dark); background: var(--parchment); } .rfq__progress-step { display: table-cell; text-align: center; padding: 1rem 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 3px solid var(--parchment-dark); position: relative; } .rfq__progress-step.is-active { color: var(--emerald); border-bottom-color: var(--brass); } .rfq__progress-step.is-done { color: var(--brass); } .rfq__body { padding: 2rem; } .rfq__step { display: none; } .rfq__step.is-active { display: block; } .rfq__step-title { font-family: var(--font-serif); color: var(--emerald); font-size: 1.3rem; margin-bottom: 0.4rem; } .rfq__step-sub { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 1.6rem; } .rfq__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 1.5rem; } @media (max-width: 700px) { .rfq__options { grid-template-columns: 1fr; } } .rfq__option { border: 1px solid var(--parchment-dark); padding: 1rem; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; position: relative; } .rfq__option:hover { border-color: var(--brass); } .rfq__option input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rfq__option .opt-title { font-weight: 600; color: var(--emerald); font-size: 0.92rem; margin-bottom: 0.25rem; } .rfq__option .opt-sub { font-size: 0.78rem; color: var(--ink-soft); } .rfq__option.is-selected { border-color: var(--emerald); background: var(--parchment); } .rfq__option.is-selected .opt-title { color: var(--emerald); } .rfq__option.is-selected::after { content: '✓'; position: absolute; top: 0.6rem; right: 0.7rem; color: var(--brass); font-weight: 700; font-size: 0.9rem; } .rfq__conditional { display: none; border-left: 3px solid var(--brass); background: var(--parchment); padding: 1.2rem 1.4rem; margin-bottom: 1.5rem; } .rfq__conditional.is-visible { display: block; } .rfq__nav { display: table; width: 100%; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--parchment-dark); } .rfq__nav-left, .rfq__nav-right { display: table-cell; vertical-align: middle; } .rfq__nav-right { text-align: right; } .rfq__summary { background: var(--parchment); padding: 1.5rem; margin-bottom: 1.5rem; font-size: 0.88rem; } .rfq__summary-row { display: table; width: 100%; padding: 0.5rem 0; border-bottom: 1px solid var(--parchment-dark); } .rfq__summary-row:last-child { border-bottom: none; } .rfq__summary-label { display: table-cell; color: var(--ink-soft); width: 45%; } .rfq__summary-value { display: table-cell; color: var(--emerald); font-weight: 500; text-align: right; } .rfq__success { display: none; text-align: center; padding: 2rem; } .rfq__success.is-visible { display: block; } .rfq__success-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--emerald); color: var(--parchment); font-size: 1.6rem; line-height: 56px; text-align: center; margin: 0 auto 1.2rem; } /* ============================================ HARD STATS BLOCK ============================================ */ .stats-block { background: var(--white); border-top: 1px solid var(--parchment-dark); border-bottom: 1px solid var(--parchment-dark); padding: var(--space-lg) 0; } .stats-block__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } @media (max-width: 880px) { .stats-block__grid { grid-template-columns: repeat(2, 1fr); } } .stats-block__item { text-align: center; padding: 0 1rem; border-left: 1px solid var(--parchment-dark); } .stats-block__item:first-child { border-left: none; } @media (max-width: 880px) { .stats-block__item:nth-child(odd) { border-left: none; } } .stats-block__value { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 500; color: var(--emerald); line-height: 1; } .stats-block__unit { font-size: 1.1rem; color: var(--brass); font-weight: 500; } .stats-block__label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.5rem; } /* ============================================ CERTIFICATION BADGE WALL ============================================ */ .cert-wall { background: var(--parchment); padding: var(--space-lg) 0; } .cert-wall__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; margin-top: 2rem; } @media (max-width: 880px) { .cert-wall__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .cert-wall__grid { grid-template-columns: repeat(2, 1fr); } } .cert-badge { background: var(--white); border: 1px solid var(--parchment-dark); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.8rem; transition: border-color 0.2s ease; } .cert-badge:hover { border-color: var(--brass); } .cert-badge__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--emerald); line-height: 1.3; } .cert-wall__note { text-align: center; font-size: 0.8rem; color: var(--ink-soft); margin-top: 1.5rem; } /* ============================================ UTILITIES ============================================ */ .text-center { text-align: center; margin-left: auto; margin-right: auto; } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mb-sm { margin-bottom: var(--space-sm); } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Focus visibility for accessibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } /* ============================================ 2026 PREMIUM BUYER EXPERIENCE UPGRADE ============================================ */ h1 { font-size: 4rem; letter-spacing: 0; } h2 { font-size: 2.55rem; letter-spacing: 0; } .cinema__title { font-size: 5.4rem; letter-spacing: 0; } .cinema--full .cinema__title { font-size: 6.4rem; letter-spacing: 0; } .cinema--full .cinema__content { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); align-items: center; gap: 3rem; } .cinema__eyebrow-row, .cinema__title, .cinema__sub, .cinema__actions, .cinema__ledger { grid-column: 1; } .cinema__visual { grid-column: 2; grid-row: 1 / span 5; margin: 0; opacity: 0; transform: translateY(18px) scale(0.98); animation: cinema-fade 1s ease 0.7s forwards; } .cinema__visual img { width: 100%; max-height: 70vh; object-fit: contain; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.28)); } .proof-strip { background: #fdfcfa; border-top: 1px solid var(--parchment-dark); border-bottom: 1px solid var(--parchment-dark); padding: 2.8rem 0; } .proof-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-left: 1px solid var(--parchment-dark); } .proof-point { padding: 1.35rem 1.4rem; border-right: 1px solid var(--parchment-dark); } .proof-point span, .process-rail span, .matrix-card span, .packaging-panel span { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.55rem; } .proof-point strong, .process-rail strong, .packaging-panel strong { display: block; color: var(--emerald); font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; line-height: 1.2; } .proof-point p, .process-rail p, .matrix-card p { margin-top: 0.65rem; font-size: 0.92rem; } .cert-wall--premium { background: linear-gradient(180deg, rgba(255,255,255,0.58), rgba(242,237,227,0.88)), var(--parchment); } .document-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; } .document-chip { min-height: 88px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; background: var(--white); border: 1px solid var(--parchment-dark); color: var(--emerald); font-weight: 700; box-shadow: 0 14px 34px rgba(14, 24, 19, 0.06); } .procurement-section { background: var(--emerald); color: var(--parchment); } .procurement-section h2, .procurement-section h3, .procurement-section strong { color: var(--parchment); } .procurement-section p { color: rgba(242,237,227,0.72); } .process-rail { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(242,237,227,0.18); } .process-rail > div { padding: 1.5rem; border-right: 1px solid rgba(242,237,227,0.18); min-height: 210px; } .process-rail > div:last-child { border-right: 0; } .product-matrix-section { padding-bottom: 0; } .matrix-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .matrix-card { position: relative; overflow: hidden; min-height: 260px; padding: 1.5rem; background: linear-gradient(160deg, rgba(27,58,43,0.94), rgba(14,24,19,0.96)), var(--emerald); border: 1px solid rgba(194,160,106,0.28); } .matrix-card::after { content: ''; position: absolute; right: -70px; bottom: -50px; width: 190px; height: 190px; border: 1px solid rgba(194,160,106,0.32); transform: rotate(28deg); } .matrix-card h3 { color: var(--parchment); } .matrix-card p { color: rgba(242,237,227,0.7); } .packaging-panel { background: var(--white); border: 1px solid var(--parchment-dark); box-shadow: 0 20px 48px rgba(14, 24, 19, 0.08); } .packaging-panel > div { padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--parchment-dark); } .packaging-panel > div:last-child { border-bottom: 0; } @media (max-width: 1080px) { h1 { font-size: 3.2rem; } h2 { font-size: 2.15rem; } .cinema__title, .cinema--full .cinema__title { font-size: 4.2rem; } .cinema--full .cinema__content { grid-template-columns: 1fr; } .cinema__eyebrow-row, .cinema__title, .cinema__sub, .cinema__actions, .cinema__ledger, .cinema__visual { grid-column: 1; } .cinema__visual { grid-row: auto; max-width: 620px; } .cinema__visual img { max-height: 420px; } .proof-strip__grid, .process-rail { grid-template-columns: repeat(2, 1fr); } .matrix-grid, .document-grid { grid-template-columns: 1fr; } .process-rail > div:nth-child(2) { border-right: 0; } .process-rail > div { border-bottom: 1px solid rgba(242,237,227,0.18); } .process-rail > div:nth-child(n+3) { border-bottom: 0; } } @media (max-width: 640px) { h1 { font-size: 2.55rem; } h2 { font-size: 1.85rem; } .cinema__title, .cinema--full .cinema__title { font-size: 3rem; line-height: 1.05; } .cinema--full { min-height: auto; } .cinema__content { padding: 6rem var(--space-sm) 4rem; } .cinema--full .cinema__content { padding-top: 6rem; } .cinema__actions { margin-bottom: 2rem; } .cinema__ledger { grid-template-columns: 1fr 1fr; gap: 1rem; } .proof-strip__grid, .process-rail { grid-template-columns: 1fr; } .proof-strip__grid, .proof-point, .process-rail > div { border-left: 0; border-right: 0; } .proof-point { border-bottom: 1px solid var(--parchment-dark); } .process-rail > div { border-bottom: 1px solid rgba(242,237,227,0.18); min-height: auto; } .process-rail > div:last-child { border-bottom: 0; } .document-chip { min-height: 74px; } } /* Final hero sizing pass */ .cinema--full .cinema__content { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); padding-top: 5.8rem; padding-bottom: 3.6rem; } .cinema--full .cinema__title { font-size: 4.9rem; max-width: 760px; } .cinema__sub { max-width: 650px; } .cinema__ledger { gap: 2.2rem; } @media (max-width: 1080px) { .cinema--full .cinema__title { font-size: 3.75rem; } } @media (max-width: 640px) { .cinema--full .cinema__title { font-size: 2.75rem; } .cinema__visual img { max-height: 300px; } } .cinema--full .cinema__title { font-size: 4.6rem; } .cinema__title { margin-bottom: 1.35rem; } .cinema__sub { margin-bottom: 1.8rem; } .cinema__actions { margin-bottom: 2.4rem; } /* Compact first viewport so the next section peeks in */ .cinema--full { min-height: 82vh; } .cinema--full .cinema__content { padding-top: 4.6rem; padding-bottom: 2.4rem; gap: 2rem; } .cinema--full .cinema__title { font-size: 3.85rem; line-height: 1.02; margin-bottom: 1rem; } .cinema__sub { font-size: 1.02rem; margin-bottom: 1.35rem; } .cinema__actions { margin-bottom: 1.6rem; } .cinema__ledger { padding-top: 1.3rem; gap: 1.5rem; } .cinema__stat-value { font-size: 1.75rem; } .cinema__visual img { max-height: 330px; } @media (max-width: 1080px) { .cinema--full { min-height: auto; } .cinema--full .cinema__title { font-size: 3.15rem; } } /* ============================================ WORLD-CLASS HOMEPAGE EXPERIENCE ============================================ */ .section-lux { position: relative; padding: clamp(4.5rem, 8vw, 8rem) max(1.25rem, calc((100vw - var(--max-width)) / 2)); overflow: hidden; } .section-lux--cream { background: var(--white); } .section-lux--dark { background: #0e1813; color: var(--parchment); } .section-lux--dark h2, .section-lux--dark h3 { color: var(--parchment); } .section-lux--dark p { color: rgba(242,237,227,0.72); } .lux-hero { position: relative; min-height: 92vh; display: grid; align-items: end; overflow: hidden; background: #0e1813; color: var(--parchment); } .lux-hero__video, .lux-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.64; } .lux-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,24,19,0.96) 0%, rgba(14,24,19,0.74) 42%, rgba(14,24,19,0.22) 100%), linear-gradient(180deg, rgba(14,24,19,0.08) 0%, rgba(14,24,19,0.82) 100%); } .lux-hero__content { position: relative; z-index: 2; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 8rem var(--space-md) 6rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.55fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; } .lux-hero h1 { color: var(--parchment); font-size: clamp(3.2rem, 7vw, 6.8rem); line-height: 0.98; max-width: 920px; margin-top: 1.2rem; } .lux-hero__copy > p:not(.eyebrow) { max-width: 680px; margin-top: 1.35rem; color: rgba(242,237,227,0.76); font-size: clamp(1rem, 1.5vw, 1.22rem); } .lux-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; } .lux-hero__panel { border: 1px solid rgba(242,237,227,0.18); background: rgba(14,24,19,0.46); backdrop-filter: blur(18px); padding: 1.5rem; box-shadow: 0 24px 80px rgba(0,0,0,0.32); } .lux-hero__panel span, .lux-product-card span, .why-lux article span, .process-cinema__steps span, .timeline-lux__grid span, .faq-insights article span { display: block; color: var(--brass-light); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.65rem; } .lux-hero__panel strong { display: block; color: var(--parchment); font-family: var(--font-serif); font-size: 2.3rem; line-height: 1; } .lux-hero__panel p { color: rgba(242,237,227,0.68); margin-top: 1rem; } .lux-trustbar { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(242,237,227,0.14); background: rgba(14,24,19,0.64); backdrop-filter: blur(18px); } .lux-trustbar span { text-align: center; padding: 1.1rem 0.75rem; color: rgba(242,237,227,0.7); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-right: 1px solid rgba(242,237,227,0.12); } .story-split, .global-presence, .private-label-cinema, .quality-lab, .testimonial-lux, .faq-insights { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; } .story-split__media, .global-presence__image, .private-label-cinema__image, .quality-lab__image, .testimonial-lux__image, .process-cinema__image { position: relative; min-height: 420px; overflow: hidden; background: var(--parchment-dark); box-shadow: 0 28px 80px rgba(14,24,19,0.13); } .story-split__media img, .global-presence__image img, .private-label-cinema__image img, .quality-lab__image img, .testimonial-lux__image img, .process-cinema__image img, .lux-product-card img, .cta-cinema > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.75s cubic-bezier(.19,1,.22,1), filter 0.5s ease; } .story-split__media:hover img, .global-presence__image:hover img, .private-label-cinema__image:hover img, .quality-lab__image:hover img, .testimonial-lux__image:hover img, .process-cinema__image:hover img, .lux-product-card:hover img { transform: scale(1.045); } .story-split h2, .global-presence h2, .private-label-cinema h2, .quality-lab h2, .faq-insights h2 { font-size: clamp(2.1rem, 4.2vw, 4rem); } .story-split p, .global-presence p, .private-label-cinema p, .quality-lab p { font-size: 1.06rem; max-width: 640px; } .mini-ledger { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--parchment-dark); border-bottom: 1px solid var(--parchment-dark); } .mini-ledger div { padding: 1rem; border-right: 1px solid var(--parchment-dark); } .mini-ledger div:last-child { border-right: 0; } .mini-ledger strong { display: block; color: var(--emerald); font-family: var(--font-serif); font-size: 1.75rem; line-height: 1.05; } .mini-ledger span { color: var(--ink-soft); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; } .lux-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .lux-product-card { position: relative; min-height: 560px; overflow: hidden; background: #0e1813; color: var(--parchment); isolation: isolate; } .lux-product-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,24,19,0.05) 0%, rgba(14,24,19,0.82) 100%); z-index: 1; } .lux-product-card img { position: absolute; inset: 0; z-index: 0; } .lux-product-card > div { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.6rem; } .lux-product-card h3 { color: var(--parchment); font-size: 1.8rem; } .lux-product-card p { color: rgba(242,237,227,0.75); margin-top: 0.7rem; } .lux-product-card a { display: inline-block; margin-top: 1rem; color: var(--brass-light); font-weight: 700; } .why-lux__grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(242,237,227,0.14); } .why-lux article { padding: 1.5rem; border-right: 1px solid rgba(242,237,227,0.14); min-height: 260px; } .why-lux article:last-child { border-right: 0; } .process-cinema__rail { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2rem; align-items: stretch; } .process-cinema__steps { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .process-cinema__steps li { background: var(--white); border: 1px solid var(--parchment-dark); padding: 1.35rem; } .process-cinema__steps strong { display: block; color: var(--emerald); font-family: var(--font-serif); font-size: 1.4rem; } .chip-row { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.5rem; } .chip-row span { border: 1px solid var(--brass); color: var(--emerald); background: rgba(169,130,68,0.08); padding: 0.55rem 0.8rem; font-size: 0.78rem; font-weight: 700; } .served__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; } .served__grid div { min-height: 120px; display: grid; place-items: center; border: 1px solid rgba(242,237,227,0.16); color: var(--parchment); font-family: var(--font-serif); font-size: 1.2rem; background: rgba(242,237,227,0.04); } .timeline-lux__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); } .timeline-lux__grid div { padding: 1.4rem; border-right: 1px solid var(--parchment-dark); } .timeline-lux__grid div:last-child { border-right: 0; } .testimonial-lux blockquote { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.08; color: var(--emerald); } .testimonial-lux cite { display: block; margin-top: 1.2rem; font-family: var(--font-sans); font-size: 0.82rem; font-style: normal; color: var(--brass); letter-spacing: 0.08em; text-transform: uppercase; } .faq-insights { align-items: start; } .faq-insights details { border-top: 1px solid var(--parchment-dark); padding: 1rem 0; } .faq-insights details:last-child { border-bottom: 1px solid var(--parchment-dark); } .faq-insights summary { cursor: pointer; color: var(--emerald); font-weight: 700; } .faq-insights details p { margin-top: 0.7rem; } .faq-insights__insights article { border: 1px solid var(--parchment-dark); padding: 1.2rem; margin-bottom: 1rem; background: var(--white); transition: transform 0.25s ease, box-shadow 0.25s ease; } .faq-insights__insights article:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(14,24,19,0.08); } .cta-cinema { min-height: 620px; display: grid; place-items: center; text-align: center; color: var(--parchment); background: #0e1813; padding-left: var(--space-md); padding-right: var(--space-md); } .cta-cinema > img, .cta-cinema__overlay { position: absolute; inset: 0; } .cta-cinema__overlay { background: linear-gradient(180deg, rgba(14,24,19,0.42), rgba(14,24,19,0.92)); z-index: 1; } .cta-cinema__content { position: relative; z-index: 2; max-width: 760px; } .cta-cinema h2 { color: var(--parchment); font-size: clamp(2.4rem, 5vw, 5rem); } .cta-cinema p { color: rgba(242,237,227,0.76); margin: 1rem auto 2rem; max-width: 620px; } .license-note { background: #0e1813; border-top: 1px solid rgba(242,237,227,0.12); padding: 0.9rem 0; } .license-note p { color: rgba(242,237,227,0.48); font-size: 0.75rem; } @media (max-width: 1080px) { .lux-hero__content, .story-split, .global-presence, .private-label-cinema, .quality-lab, .testimonial-lux, .faq-insights, .process-cinema__rail { grid-template-columns: 1fr; } .lux-product-grid, .why-lux__grid, .served__grid, .timeline-lux__grid { grid-template-columns: repeat(2, 1fr); } .why-lux article:nth-child(2), .served__grid div:nth-child(even) { border-right: 0; } .lux-hero { min-height: auto; } } @media (max-width: 680px) { .section-lux { padding-top: 4rem; padding-bottom: 4rem; } .lux-hero__content { padding: 7rem var(--space-sm) 4rem; } .lux-hero h1 { font-size: 3rem; line-height: 1.04; } .lux-trustbar, .lux-product-grid, .why-lux__grid, .served__grid, .timeline-lux__grid, .process-cinema__steps, .mini-ledger { grid-template-columns: 1fr; } .lux-trustbar span, .why-lux article, .timeline-lux__grid div, .mini-ledger div { border-right: 0; border-bottom: 1px solid rgba(169,130,68,0.25); } .story-split__media, .global-presence__image, .private-label-cinema__image, .quality-lab__image, .testimonial-lux__image, .process-cinema__image { min-height: 320px; } .lux-product-card { min-height: 440px; } } /* Product catalog and secondary premium pages */ .catalog-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .catalog-card { position: relative; min-height: 520px; overflow: hidden; background: #0e1813; color: var(--parchment); } .catalog-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(14,24,19,0.9) 100%); } .catalog-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.75s cubic-bezier(.19,1,.22,1); } .catalog-card:hover img { transform: scale(1.05); } .catalog-card div { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 1.5rem; } .catalog-card span, .downloads-lux__grid span { display: block; color: var(--brass-light); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.65rem; } .catalog-card h3 { color: var(--parchment); font-size: 1.8rem; } .catalog-card p { color: rgba(242,237,227,0.76); } .catalog-card a { display: inline-block; margin-top: 1rem; color: var(--brass-light); font-weight: 700; } .spec-table--premium td, .spec-table--premium th { padding: 1.05rem 1.1rem; } .downloads-lux__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .downloads-lux__grid a { display: block; min-height: 240px; padding: 1.5rem; border: 1px solid rgba(242,237,227,0.16); background: rgba(242,237,227,0.04); transition: transform 0.25s ease, border-color 0.25s ease; } .downloads-lux__grid a:hover { transform: translateY(-5px); border-color: var(--brass); } .downloads-lux__grid strong { display: block; color: var(--parchment); font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.15; } .downloads-lux__grid p { margin-top: 0.8rem; color: rgba(242,237,227,0.72); } .wl-cinema-proof, .compliance-visual-proof { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; } @media (max-width: 1080px) { .catalog-cards, .downloads-lux__grid, .wl-cinema-proof, .compliance-visual-proof { grid-template-columns: 1fr; } } /* Premium interaction states */ body::before { content: ''; position: fixed; inset: 0; z-index: 9999; background: #0e1813; pointer-events: none; opacity: 1; transition: opacity 0.65s ease, visibility 0.65s ease; } body.is-loaded::before { opacity: 0; visibility: hidden; } .site-header.dark-v { transition: background 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .site-header.dark-v.is-scrolled { background: rgba(14,24,19,0.88); backdrop-filter: blur(18px); box-shadow: 0 16px 44px rgba(0,0,0,0.18); } .lux-product-card, .catalog-card, .faq-insights__insights article, .downloads-lux__grid a { transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transform-style: preserve-3d; } .reveal:nth-child(2) { transition-delay: 0.05s; } .reveal:nth-child(3) { transition-delay: 0.1s; } .reveal:nth-child(4) { transition-delay: 0.15s; } .reveal:nth-child(5) { transition-delay: 0.2s; } @media (prefers-reduced-motion: reduce) { body::before { display: none; } .lux-product-card, .catalog-card, .faq-insights__insights article, .downloads-lux__grid a { transform: none !important; } } .about-visual-ledger, .contact-trade-desk { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; } @media (max-width: 1080px) { .about-visual-ledger, .contact-trade-desk { grid-template-columns: 1fr; } } /* Art-directed image presentation */ .lux-hero__video { filter: saturate(0.92) contrast(1.08) brightness(0.9); } .story-split__media, .global-presence__image, .private-label-cinema__image, .quality-lab__image, .testimonial-lux__image, .process-cinema__image, .catalog-card, .lux-product-card { contain: paint; } .story-split__media img, .global-presence__image img, .private-label-cinema__image img, .quality-lab__image img, .testimonial-lux__image img, .process-cinema__image img, .catalog-card img, .lux-product-card img, .cta-cinema > img { filter: saturate(0.94) contrast(1.05) brightness(0.98); } .lux-product-card:nth-child(1) img, .catalog-card:nth-child(1) img { object-position: 52% 52%; } .lux-product-card:nth-child(2) img, .catalog-card:nth-child(2) img { object-position: 48% 42%; } .lux-product-card:nth-child(3) img, .catalog-card:nth-child(3) img { object-position: 54% 50%; } .global-presence__image img, .cta-cinema > img { object-position: center center; } .quality-lab__image img { object-position: 52% 45%; } .private-label-cinema__image img { object-position: center 45%; } .contact-trade-desk .quality-lab__image img { object-position: 52% 42%; } .about-visual-ledger .story-split__media img { object-position: 50% 40%; } img { background-color: var(--parchment-dark); } /* Paddy to global buyer journey */ .journey-cinema { border-top: 1px solid var(--parchment-dark); border-bottom: 1px solid var(--parchment-dark); } .journey-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .journey-card { position: relative; min-height: 360px; overflow: hidden; background: #0e1813; color: var(--parchment); box-shadow: 0 24px 58px rgba(14,24,19,0.08); } .journey-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,24,19,0.08) 0%, rgba(14,24,19,0.86) 100%); z-index: 1; } .journey-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.93) contrast(1.05) brightness(0.98); transition: transform 0.75s cubic-bezier(.19,1,.22,1); } .journey-card:hover img { transform: scale(1.045); } .journey-card div { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.2rem; } .journey-card span { display: block; color: var(--brass-light); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5rem; } .journey-card h3 { color: var(--parchment); font-size: 1.35rem; } .journey-card p { color: rgba(242,237,227,0.74); font-size: 0.86rem; margin-top: 0.45rem; } .lux-product-card:nth-child(3) img { object-position: center center; } @media (max-width: 1080px) { .journey-track { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .journey-track { grid-template-columns: 1fr; } .journey-card { min-height: 320px; } } /* ============================================ WHATSAPP FLOAT BUTTON ============================================ */ .whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.25); text-decoration: none; isolation: isolate; } .whatsapp-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366; opacity: 0.55; z-index: -1; animation: whatsapp-pulse 3s ease-out infinite; } .whatsapp-float:hover::before { animation-play-state: paused; opacity: 0; } @keyframes whatsapp-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.7); opacity: 0; } } .whatsapp-float__tooltip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--parchment); font-family: var(--font-sans); font-size: 0.78rem; white-space: nowrap; padding: 0.45rem 0.8rem; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .whatsapp-float:hover .whatsapp-float__tooltip { opacity: 1; } @media (max-width: 680px) { .whatsapp-float { width: 48px; height: 48px; bottom: 16px; right: 16px; } } /* ============================================ 404 ERROR PAGE ============================================ */ .error-page__code { font-family: var(--font-serif); color: var(--brass); font-size: clamp(6rem, 15vw, 10rem); line-height: 1; } .error-page__title { font-family: var(--font-serif); color: var(--parchment); font-size: clamp(1.6rem, 4vw, 2.4rem); margin-top: 0.5rem; } .error-page__sub { color: rgba(242,237,227,0.65); font-size: 1.1rem; max-width: 480px; margin: 1rem auto 0; text-align: center; } /* ============================================ THANK-YOU PAGE ============================================ */ .ty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--emerald); color: var(--brass); font-size: 2rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; } .ty-page__title { font-family: var(--font-serif); color: var(--parchment); font-size: clamp(1.8rem, 4vw, 2.6rem); } .ty-page__sub { color: rgba(242,237,227,0.65); max-width: 480px; margin: 1rem auto 0; text-align: center; }