/* ========================================================================== Parishrama Marketing — Core Stylesheet Hand-coded CSS3. No frameworks. 1. Design tokens 2. Reset & base 3. Typography & section headers 4. Buttons 5. Header / navigation 6. Hero 7. Interactive book ("Wisdom of Thoughts") 8. Product cards 9. About preview 10. Why choose us 11. Brand promise 12. Testimonials 13. Blog cards 14. CTA band 15. Footer 16. Inner page hero / timeline / values 17. Contact page & form 18. Modal, toast, scroll-top 19. Utilities ========================================================================== */ /* ------------------------------ 1. TOKENS ------------------------------- */ :root { /* Brand — deep navy */ --navy-900: #08111f; --navy-800: #0a1428; --navy-700: #0c1d38; --navy: #12274a; --navy-600: #1c3d6f; --navy-500: #2c4c86; --navy-400: #4a6a9f; /* Brand — luxury gold */ --gold-800: #7c560f; --gold-700: #8e6413; --gold-600: #a9791a; --gold: #c79a2e; --gold-400: #dfae4c; --gold-300: #efce83; --gold-200: #f7e5ae; --gold-100: #fbf1d6; /* Neutrals */ --white: #ffffff; --cream: #fdfaf4; --cream-2: #f8f2e7; --beige: #f3ead9; --beige-2: #ebdec7; --line: #e6dbc6; /* Ink */ --ink: #16203a; --ink-2: #3d4863; --ink-3: #6a7590; --muted: #8b93a7; /* Gradients */ --grad-gold: linear-gradient(135deg, #f2d992 0%, #d6aa3f 42%, #a9791a 100%); --grad-gold-soft: linear-gradient(135deg, #fbf1d6, #efce83); --grad-navy: linear-gradient(140deg, #1c3d6f 0%, #12274a 55%, #08111f 100%); /* Leather brown for the book's boards and spine, matched to the photographed "Wisdom of Thoughts" book in banner2.jpeg */ --grad-book: linear-gradient(140deg, #8a5a2b 0%, #5f3819 55%, #38200e 100%); --grad-line: linear-gradient(90deg, transparent, var(--gold-400), transparent); /* Shadows */ --sh-xs: 0 1px 2px rgba(12, 29, 56, .06); --sh-sm: 0 4px 14px rgba(12, 29, 56, .07); --sh-md: 0 14px 34px rgba(12, 29, 56, .10); --sh-lg: 0 28px 64px rgba(12, 29, 56, .16); --sh-gold: 0 14px 34px rgba(167, 121, 26, .28); /* Geometry */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; --container: 1240px; --gutter: clamp(18px, 4vw, 44px); --header-h: 84px; /* Motion */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, .84, .44, 1); --ease-soft: cubic-bezier(.65, .05, .36, 1); /* Decorative motif */ --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'%3E%3Cpath d='M20 3C33 21 33 39 20 57 7 39 7 21 20 3Z' fill='none' stroke='%23c79a2e' stroke-width='2.4'/%3E%3C/svg%3E"); } /* ---------------------------- 2. RESET & BASE ---------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); /* The off-canvas nav and the two-page-wide book both park outside the viewport; clipping on as well as is what actually stops a stray horizontal scrollbar, because fixed-position children of are not clipped by body's own overflow. */ overflow-x: hidden; } body { font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: clamp(15px, .38vw + 14px, 16.5px); line-height: 1.75; color: var(--ink-2); background: var(--cream); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.is-locked { overflow: hidden; } img, svg, picture { display: block; max-width: 100%; height: auto; } a { color: var(--navy-600); text-decoration: none; transition: color .3s var(--ease); } a:hover { color: var(--gold-600); } ul, ol { list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } ::selection { background: var(--gold-300); color: var(--navy-800); } :focus-visible { outline: 2px solid var(--gold-600); outline-offset: 3px; border-radius: 2px; } /* Scrollbar */ @supports selector(::-webkit-scrollbar) { ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--beige); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-600), var(--gold-800)); border-radius: var(--r-pill); border: 3px solid var(--beige); } } .skip-link { position: absolute; left: 16px; top: -70px; z-index: 3000; padding: 12px 22px; background: var(--navy); color: var(--gold-200); border-radius: var(--r-sm); transition: top .3s var(--ease); } .skip-link:focus { top: 16px; color: var(--gold-200); } /* ------------------------ 3. TYPOGRAPHY & HEADERS ----------------------- */ h1, h2, h3, h4, h5, .display { font-family: "Playfair Display", "Georgia", "Times New Roman", serif; color: var(--navy-700); font-weight: 600; line-height: 1.14; letter-spacing: -.015em; } h1, .h1 { font-size: clamp(2.15rem, 4.6vw, 4rem); } h2, .h2 { font-size: clamp(1.85rem, 3.3vw, 2.95rem); } h3, .h3 { font-size: clamp(1.25rem, 1.7vw, 1.6rem); } h4, .h4 { font-size: clamp(1.06rem, 1.2vw, 1.2rem); line-height: 1.35; } p + p { margin-top: 1.05em; } .lead { font-size: clamp(1rem, .5vw + .9rem, 1.16rem); color: var(--ink-2); line-height: 1.85; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 900px; } section { position: relative; } .section { padding-block: clamp(22px, 4.5vw, 44px); } .section--tight { padding-block: clamp(18px, 3.2vw, 32px); } .section--cream { background: var(--cream); } .section--beige { background: linear-gradient(180deg, var(--beige) 0%, var(--cream-2) 100%); } .section--navy { background: var(--grad-navy); color: rgba(255, 255, 255, .8); } .section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); } /* Eyebrow label */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: .72rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-700); margin-bottom: 16px; } .eyebrow::before, .eyebrow::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-400)); } .eyebrow::after { background: linear-gradient(90deg, var(--gold-400), transparent); } .eyebrow--start::before { display: none; } .eyebrow--start::after { width: 46px; } .section--navy .eyebrow { color: var(--gold-300); } .section-head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(12px, 2.4vw, 22px); } .section-head .lead { margin-top: 10px; } .section-head--start { text-align: left; margin-inline: 0; } /* Ornamental divider */ .motif-divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 20px auto 0; max-width: 260px; } .motif-divider::before, .motif-divider::after { content: ""; flex: 1; height: 1px; background: var(--grad-line); } .motif-divider span { width: 17px; height: 26px; background: var(--motif) center / contain no-repeat; opacity: .9; } /* Gold accent text */ .gold-text { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } .italic-accent { font-style: italic; font-weight: 400; color: var(--gold-700); } /* Decorative background flourishes */ .flourish { position: absolute; background: var(--motif) center / contain no-repeat; opacity: .07; pointer-events: none; z-index: 0; } .flourish--tl { top: 4%; left: -30px; width: 130px; height: 200px; } .flourish--br { bottom: 4%; right: -26px; width: 160px; height: 244px; transform: rotate(180deg); } /* ----------------------------- 4. BUTTONS ------------------------------ */ .btn { --btn-bg: var(--grad-gold); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 32px; font-family: "Poppins", sans-serif; font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r-pill); cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap; transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); } .btn:hover { transform: translateY(-3px); } .btn:active { transform: translateY(-1px) scale(.985); } .btn svg { width: 17px; height: 17px; flex: none; } /* Gold gradient → navy on hover */ .btn-gold { color: var(--navy-800); background: var(--grad-gold); box-shadow: var(--sh-gold); } .btn-gold::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-navy); opacity: 0; transition: opacity .45s var(--ease); } .btn-gold:hover { color: var(--gold-200); box-shadow: 0 18px 40px rgba(12, 29, 56, .3); } .btn-gold:hover::before { opacity: 1; } /* Outline */ .btn-outline { color: var(--navy-700); border: 1.5px solid var(--gold-400); background: transparent; } .btn-outline::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-gold); transform: translateY(101%); transition: transform .45s var(--ease); } .btn-outline:hover { color: var(--navy-800); border-color: transparent; box-shadow: var(--sh-gold); } .btn-outline:hover::before { transform: translateY(0); } /* Outline on dark */ .btn-outline-light { color: var(--gold-200); border: 1.5px solid rgba(239, 206, 131, .55); background: rgba(255, 255, 255, .04); } .btn-outline-light::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-gold); transform: translateY(101%); transition: transform .45s var(--ease); } .btn-outline-light:hover { color: var(--navy-800); border-color: transparent; } .btn-outline-light:hover::before { transform: translateY(0); } /* Navy solid */ .btn-navy { color: var(--gold-200); background: var(--grad-navy); box-shadow: var(--sh-md); } .btn-navy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-gold); opacity: 0; transition: opacity .45s var(--ease); } .btn-navy:hover { color: var(--navy-800); } .btn-navy:hover::before { opacity: 1; } .btn-sm { padding: 11px 22px; font-size: .74rem; } .btn-lg { padding: 17px 40px; font-size: .9rem; } .btn-block { width: 100%; } /* Text link with animated arrow */ .link-arrow { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-700); } .link-arrow::after { content: ""; width: 26px; height: 1.5px; background: var(--gold-600); transition: width .35s var(--ease); } .link-arrow:hover { color: var(--gold-700); } .link-arrow:hover::after { width: 42px; } /* Ripple (injected by main.js) */ .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .45); pointer-events: none; animation: ripple-out .65s var(--ease-out) forwards; z-index: 0; } .btn-gold .ripple, .btn-outline .ripple { background: rgba(255, 255, 255, .55); } .btn-navy .ripple { background: rgba(239, 206, 131, .35); } /* --------------------------- 5. HEADER / NAV ---------------------------- */ .site-header { position: fixed; inset: 0 0 auto; z-index: 1000; transition: background .45s var(--ease), box-shadow .45s var(--ease), backdrop-filter .45s var(--ease), border-color .45s var(--ease); border-bottom: 1px solid transparent; } .site-header::after { content: ""; position: absolute; inset: 0 0 auto; height: 150%; background: linear-gradient(180deg, rgba(8, 17, 31, .55), transparent); opacity: 1; transition: opacity .45s var(--ease); pointer-events: none; z-index: -1; } .site-header.is-stuck { background: rgba(253, 250, 244, .92); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 6px 30px rgba(12, 29, 56, .09); border-bottom-color: rgba(199, 154, 46, .28); } .site-header.is-stuck::after { opacity: 0; } .header-inner { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); min-height: var(--header-h); } /* Brand */ .brand { display: flex; align-items: center; gap: 12px; flex: none; margin-right: auto; } .brand-logo { width: clamp(40px, 4vw, 50px); height: auto; filter: drop-shadow(0 3px 8px rgba(12, 29, 56, .22)); transition: transform .5s var(--ease); } .brand:hover .brand-logo { transform: translateY(-2px) rotate(-3deg); } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-name { font-family: "Playfair Display", serif; font-size: clamp(1.02rem, 1.35vw, 1.28rem); font-weight: 700; letter-spacing: .015em; color: var(--white); transition: color .45s var(--ease); } .brand-sub { font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); transition: color .45s var(--ease); } .is-stuck .brand-name { color: var(--navy-700); } .is-stuck .brand-sub { color: var(--gold-700); } /* Primary nav */ .nav { display: flex; } .nav-list { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 14px); } .nav-link { position: relative; display: block; padding: 10px 14px; font-size: .84rem; font-weight: 500; letter-spacing: .04em; color: rgba(255, 255, 255, .88); transition: color .35s var(--ease); } .nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px; background: var(--grad-gold); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .nav-link:hover, .nav-link[aria-current="page"] { color: var(--gold-300); } .nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); } .is-stuck .nav-link { color: var(--ink); } .is-stuck .nav-link:hover, .is-stuck .nav-link[aria-current="page"] { color: var(--gold-700); } .header-cta { flex: none; } /* Hamburger */ .nav-toggle { display: none; flex: none; width: 46px; height: 46px; border-radius: var(--r-sm); border: 1px solid rgba(239, 206, 131, .4); position: relative; } .nav-toggle span { position: absolute; left: 50%; width: 21px; height: 2px; border-radius: 2px; background: var(--gold-300); transform: translateX(-50%); transition: transform .4s var(--ease), opacity .3s var(--ease), background .4s var(--ease); } .nav-toggle span:nth-child(1) { top: 15px; } .nav-toggle span:nth-child(2) { top: 22px; width: 15px; } .nav-toggle span:nth-child(3) { top: 29px; } .is-stuck .nav-toggle { border-color: rgba(167, 121, 26, .35); } .is-stuck .nav-toggle span { background: var(--navy-600); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateX(-50%) translateY(-7px) rotate(-45deg); } .nav-backdrop { position: fixed; inset: 0; z-index: 990; background: rgba(8, 17, 31, .55); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; } .nav-backdrop.is-open { opacity: 1; visibility: visible; } /* ------------------------------- 6. HERO ------------------------------- */ .hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: stretch; min-height: min(92vh, 860px); background: linear-gradient(150deg, var(--cream) 0%, var(--beige) 60%, var(--beige-2) 100%); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 12% 20%, rgba(255, 255, 255, .85), transparent 70%), radial-gradient(50% 60% at 88% 80%, rgba(199, 154, 46, .14), transparent 70%); pointer-events: none; } .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + clamp(19px, 4vw, 37px)) clamp(14px, 4.5vw, 55px) clamp(22px, 4vw, 39px); padding-left: max(var(--gutter), calc(50vw - var(--container) / 2)); } .hero-title { margin-bottom: 12px; } .hero-title .line { display: block; } .hero-title .italic-accent { display: block; } .hero-lead { max-width: 46ch; } .hero-tag { margin-top: 14px; font-family: "Playfair Display", serif; font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 600; color: var(--navy-600); } .hero-tag em { font-style: italic; color: var(--gold-700); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(12px, 2vw, 19px); } .hero-stats { display: flex; flex-wrap: wrap; gap: clamp(10px, 2vw, 22px); margin-top: clamp(14px, 2.6vw, 24px); padding-top: clamp(10px, 1.8vw, 16px); border-top: 1px solid var(--line); } .hero-stat strong { display: block; font-family: "Playfair Display", serif; font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-weight: 700; color: var(--navy-700); line-height: 1; } .hero-stat span { font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } .hero-media { position: relative; overflow: hidden; } .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* The approved 2560x800 banner carries its headline in the LEFT ~40% and the garment display on the right. The hero shows live HTML text on the left and crops to the banner's imagery here, so nothing is duplicated. Nudge this one value to re-frame the crop. */ object-position: 67% center; transform: scale(1.06); animation: hero-pan 22s var(--ease-soft) infinite alternate; } .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--beige) 0%, rgba(243, 234, 217, .55) 16%, transparent 46%), linear-gradient(0deg, rgba(12, 29, 56, .28), transparent 55%); } .hero-badge { position: absolute; z-index: 3; right: clamp(18px, 3vw, 46px); bottom: clamp(18px, 3vw, 46px); display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 16px; background: rgba(253, 250, 244, .9); backdrop-filter: blur(10px); border: 1px solid rgba(199, 154, 46, .35); border-radius: var(--r-pill); box-shadow: var(--sh-md); } .hero-badge img { width: 34px; } .hero-badge div { line-height: 1.25; } .hero-badge strong { display: block; font-family: "Playfair Display", serif; font-size: .96rem; color: var(--navy-700); } .hero-badge span { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); font-weight: 600; } .hero-scroll { position: absolute; left: 50%; bottom: 18px; z-index: 4; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); } .hero-scroll i { width: 1px; height: 46px; background: linear-gradient(var(--gold-600), transparent); animation: scroll-hint 2.4s var(--ease-soft) infinite; } /* ---------------- 6b. FULL-BANNER HERO (approved artwork) --------------- */ /* Shows the finalised 2560x800 banner complete and uncropped, at its own aspect ratio. The banner already carries the headline, description and tagline, so the matching HTML copy is visually hidden here and revealed again below 900px, where the baked-in text becomes too small to read. The header must be solid on this layout (see [data-solid] in main.js), because the banner starts directly beneath it on a light background. */ /* Doubled class raises specificity above the plain `.hero` rules in responsive.css so the header clearance can't be clobbered by source order. */ .hero.hero--banner { display: block; min-height: 0; padding-top: var(--header-h); background: linear-gradient(180deg, var(--beige) 0%, var(--cream) 58%); } .hero--banner::before { display: none; } /* --- Hero banner carousel: full-bleed, one whole banner per slide --- */ .hero-slider { position: relative; background: var(--beige); } .hero-slider .slider-window { padding: 0; } .hero-slider .slider-track { gap: 0; } .hero-slider .slider-slide { line-height: 0; } .hero-slider .slider-slide img { width: 100%; height: auto; /* never cropped — full artwork, native 2560:800 */ display: block; } .hero-slider::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: 4; height: 3px; background: var(--grad-gold); } /* Controls stay out of the artwork's way: arrows sit flush against the outer edges and only fade in on hover / keyboard focus, so at rest the banner is completely unobstructed. */ .hero-slider-nav { position: absolute; top: 50%; z-index: 5; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--navy-700); background: rgba(253, 250, 244, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(199, 154, 46, .45); box-shadow: var(--sh-md); opacity: 0; transform: translateY(-50%); transition: opacity .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); } .hero-slider-nav svg { width: 19px; height: 19px; } .hero-slider-nav--prev { left: 12px; } .hero-slider-nav--next { right: 12px; } .hero-slider:hover .hero-slider-nav, .hero-slider-nav:focus-visible { opacity: 1; } .hero-slider-nav:hover { background: var(--grad-gold); color: var(--navy-800); border-color: transparent; box-shadow: var(--sh-gold); } /* Dots tuck into the bottom-right corner — the quiet part of both banners. */ .hero-slider-dots { position: absolute; right: clamp(12px, 1.6vw, 22px); bottom: clamp(12px, 1.6vw, 20px); z-index: 5; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(253, 250, 244, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(199, 154, 46, .28); transition: background .4s var(--ease); } .hero-slider:hover .hero-slider-dots { background: rgba(253, 250, 244, .85); } .hero-slider-dots button { width: 8px; height: 8px; } .hero-slider-dots button.is-active { width: 24px; } /* Screen-reader-only at every width: the banner artwork supplies the visible headline, this keeps the document's heading outline and SEO intact. */ .hero-banner-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------------- FULL-WIDTH BANNER BAND (inside a section) ------------- */ .section-banner { position: relative; z-index: 3; /* above the section's decorative ::after wash */ line-height: 0; margin-bottom: clamp(16px, 3vw, 33px); } .section-banner img { width: 100%; height: auto; display: block; } .section-banner::before, .section-banner::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--grad-gold); } .section-banner::before { inset: 0 0 auto 0; } /* -------------------- 7. INTERACTIVE BOOK SECTION ---------------------- */ .book-section { position: relative; overflow: hidden; background: var(--grad-navy); color: rgba(255, 255, 255, .78); padding-block: clamp(30px, 5.5vw, 58px); } .book-section h2, .book-section h3 { color: var(--white); } /* A full-width banner band sits flush with the top of the section */ .book-section.has-banner { padding-top: 0; } .book-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 76% center; opacity: .1; filter: blur(3px) saturate(.6); mix-blend-mode: luminosity; pointer-events: none; } .book-section::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 22% 30%, rgba(199, 154, 46, .16), transparent 70%), radial-gradient(60% 70% at 90% 90%, rgba(44, 76, 134, .5), transparent 70%); pointer-events: none; } .book-section > .container { position: relative; z-index: 2; } .book-layout { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: clamp(16px, 3.4vw, 36px); align-items: center; } /* The book element is always two pages wide, even in single-leaf mode, so its min-content width must not be allowed to widen the grid track. The excess is clipped by .book-section's overflow. */ .book-layout > *, .book-stage, .book-viewport { min-width: 0; } /* --- Book stage --- */ .book-viewport { --pw: clamp(206px, 20vw, 306px); --ph: calc(var(--pw) * 1.4); --thick: 26px; position: relative; width: 100%; margin-inline: auto; min-height: calc(var(--ph) + 130px); /* Clips the half of the book that is currently parked off-stage on the X-axis. Y stays visible so the covers/leaves are never cropped when the 3D tilt or idle float pushes them slightly above/below this box. */ overflow-x: hidden; overflow-y: visible; perspective: 2400px; perspective-origin: 50% 44%; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .book-viewport::before { content: ""; position: absolute; left: 50%; bottom: 30px; width: calc(var(--pw) * 1.9); height: 46px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(4, 10, 20, .55), transparent 72%); filter: blur(5px); transition: width .9s var(--ease), opacity .9s var(--ease); } .book-viewport.is-open::before { width: calc(var(--pw) * 2.35); } /* Float wrapper — absolutely centred (margins, not transforms) so that the two-page-wide book can overflow its column without ever being pushed off-centre by flex overflow clamping. Keeps the idle bob separate from the 3D pose transforms so the two never overwrite each other. */ .book-float { position: absolute; top: 50%; left: 50%; width: calc(var(--pw) * 2); height: var(--ph); margin-top: calc(var(--ph) / -2 - 22px); margin-left: calc(var(--pw) * -1); transform-style: preserve-3d; animation: float-y 7.5s ease-in-out infinite; } .book-viewport.is-open .book-float { animation-duration: 9.5s; } .book-float.is-paused { animation-play-state: paused; } /* The book's transform-origin sits on the spine (its own centre line), so the closed pose rotates around the spine exactly as a real book would. Positive rotateY brings the spine side towards the viewer. */ .book { position: relative; width: calc(var(--pw) * 2); height: var(--ph); transform-style: preserve-3d; transform: translateX(calc(var(--pw) * -.5)) rotateX(6deg) rotateY(15deg); transition: transform .95s var(--ease); cursor: grab; } .book.is-dragging { cursor: grabbing; } .book-viewport:not(.is-open) .book:hover { transform: translateX(calc(var(--pw) * -.5)) rotateX(5deg) rotateY(8deg) scale(1.03); } /* Opened, two-page spread (desktop / tablet) */ .book-viewport.is-open.is-spread .book { transform: rotateX(7deg); } /* Opened, single-leaf mode (small screens): slide the visible leaf to centre */ .book-viewport.is-open:not(.is-spread) .book { transform: translateX(calc(var(--pw) * -.5)) rotateX(7deg); } .book-viewport.is-open:not(.is-spread) .book.show-left { transform: translateX(calc(var(--pw) * .5)) rotateX(7deg); } /* Boards (hard covers behind the leaves). Nudged back on Z so they never z-fight with the coplanar leaves. */ .book-board { position: absolute; top: -6px; z-index: 0; width: calc(var(--pw) + 6px); height: calc(var(--ph) + 12px); transform: translateZ(-4px); background: var(--grad-book); border-radius: 4px; box-shadow: inset 0 0 40px rgba(0, 0, 0, .45); } .book-board::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(223, 174, 76, .3); border-radius: 2px; } .book-board--left { left: -6px; border-radius: 8px 3px 3px 8px; opacity: 0; transition: opacity .5s var(--ease) .25s; } .book-board--right { left: 50%; border-radius: 3px 8px 8px 3px; } .book-viewport.is-open .book-board--left { opacity: 1; } /* Spine slab — a real 3D face standing on the book's centre line and receding away from the viewer, so the closed pose shows its thickness. */ .book-spine { position: absolute; top: 0; left: 50%; z-index: 1; width: var(--thick); height: 100%; transform-origin: left center; transform: rotateY(90deg); background: linear-gradient(90deg, #38200e, #6e421c 45%, #2a1809); transition: opacity .5s var(--ease); } .book-spine i { position: absolute; left: 4px; right: 4px; height: 2px; background: var(--grad-gold); opacity: .75; } .book-spine i:nth-child(1) { top: 26px; } .book-spine i:nth-child(2) { bottom: 26px; } .book-viewport.is-open .book-spine { opacity: 0; } /* Page-block fore-edge (paper thickness), also a real 3D face */ .book-edges { position: absolute; top: 5px; bottom: 5px; left: calc(50% + var(--pw)); z-index: 1; width: calc(var(--thick) - 6px); transform-origin: left center; transform: rotateY(90deg); background: repeating-linear-gradient(90deg, #f7f1e4 0 1px, #ded1b7 1px 2px); box-shadow: inset 0 0 8px rgba(120, 96, 56, .35); transition: opacity .5s var(--ease); } .book-viewport.is-open .book-edges { opacity: 0; } /* Leaf host — must stay in the same 3D rendering context as .book, otherwise it flattens every leaf into a single 2D layer and the flip breaks. */ #bookLeaves { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; } #bookLeaves .leaf { pointer-events: auto; } /* Leaves */ /* Inside a 3D rendering context the browser sorts by depth, not z-index, so every leaf carries a sub-pixel Z offset (--tz, written by book.js) to give the compositor a stable stacking order. translateZ is listed *before* rotateY so it always resolves in the book's own space, whichever way the leaf happens to be turned. */ .leaf { position: absolute; top: 0; left: 50%; width: var(--pw); height: var(--ph); transform-origin: left center; transform-style: preserve-3d; transform: translateZ(var(--tz, 0px)); transition: transform .95s var(--ease); will-change: transform; } .leaf.is-flipped { transform: translateZ(var(--tz, 0px)) rotateY(-180deg); } .leaf.is-far { visibility: hidden; } .leaf.no-anim { transition: none; } .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: linear-gradient(105deg, rgba(255, 255, 255, .7), rgba(250, 243, 229, .35)), repeating-linear-gradient(0deg, rgba(150, 126, 84, .045) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(150, 126, 84, .035) 0 1px, transparent 1px 4px), #fbf6ea; border-radius: 2px 5px 5px 2px; } .face--back { transform: rotateY(180deg); border-radius: 5px 2px 2px 5px; } /* gutter shading + outer curl */ .face::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 34px; background: linear-gradient(90deg, rgba(74, 57, 27, .22), transparent); pointer-events: none; } .face::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 26px; background: linear-gradient(270deg, rgba(74, 57, 27, .12), transparent); pointer-events: none; } .face--back::before { inset: 0 0 0 auto; background: linear-gradient(270deg, rgba(74, 57, 27, .22), transparent); } .face--back::after { inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(74, 57, 27, .12), transparent); } .leaf.is-turning .face { box-shadow: 0 18px 40px rgba(3, 8, 16, .45); } /* Page content */ .page { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(14px, 2.2vw, 24px) clamp(16px, 2.4vw, 26px) 42px; } .page-frame { position: absolute; inset: 14px 16px; border: 1px solid rgba(167, 121, 26, .22); border-radius: 2px; pointer-events: none; } .page-frame::before, .page-frame::after { content: ""; position: absolute; width: 13px; height: 20px; background: var(--motif) center / contain no-repeat; opacity: .45; } .page-frame::before { top: -10px; left: 50%; transform: translateX(-50%); } .page-frame::after { bottom: -10px; left: 50%; transform: translateX(-50%) rotate(180deg); } .page-mark { font-family: "Playfair Display", serif; font-size: clamp(2.4rem, 3vw, 3.4rem); line-height: .6; color: var(--gold); opacity: .75; } .page-quote { font-family: "Playfair Display", serif; font-size: clamp(.92rem, 1.05vw, 1.18rem); font-style: italic; font-weight: 500; line-height: 1.62; color: var(--navy-700); margin: 14px 0 6px; text-wrap: balance; } .page-author { display: block; font-family: "Helvetica Neue", Arial, sans-serif; font-style: normal; font-weight: 700; font-size: .74rem; letter-spacing: .04em; color: var(--gold-700); margin-bottom: 14px; } .page-rule { width: 54px; height: 1px; background: var(--grad-gold); margin-bottom: 12px; } .page-tag { font-size: .54rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-700); opacity: .85; } .page-num { position: absolute; bottom: 20px; left: 0; right: 0; font-size: .62rem; font-weight: 500; letter-spacing: .14em; color: var(--ink-3); text-align: center; } /* Title / colophon pages */ .page--title, .page--end { background: radial-gradient(80% 70% at 50% 30%, rgba(199, 154, 46, .12), transparent 70%), linear-gradient(160deg, #fdf9f0, #f4ead6); } .page--title .page-book-title { font-family: "Playfair Display", serif; font-size: clamp(1.25rem, 1.6vw, 1.7rem); font-weight: 700; color: var(--navy-700); line-height: 1.2; } .page--title .page-book-sub { margin-top: 10px; font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-700); font-weight: 600; } .page-crest { width: 46px; height: 70px; background: var(--motif) center / contain no-repeat; opacity: .8; margin-bottom: 16px; } .page--end .page-quote { font-size: 1rem; } /* Front cover leaf */ .leaf--cover { z-index: 60; } .leaf--cover.is-flipped { transform: translateZ(var(--tz, 0px)) rotateY(-180deg); } .cover-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 3px 8px 8px 3px; overflow: hidden; box-shadow: 6px 8px 28px rgba(3, 8, 16, .5); } .cover-face img { width: 100%; height: 100%; object-fit: cover; } .cover-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .26) 0%, transparent 34%, transparent 66%, rgba(255, 255, 255, .1) 100%); pointer-events: none; } .cover-face--inner { transform: rotateY(180deg); border-radius: 8px 3px 3px 8px; background: var(--grad-book); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center; } .cover-face--inner::after { background: none; } .cover-inner-crest { width: 40px; height: 62px; background: var(--motif) center / contain no-repeat; filter: brightness(1.6); opacity: .9; } .cover-face--inner p { font-family: "Playfair Display", serif; font-style: italic; font-size: .9rem; color: var(--gold-200); line-height: 1.6; } .cover-face--inner small { font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(247, 229, 174, .6); } /* Book controls */ .book-controls { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: clamp(10px, 1.8vw, 14px); flex-wrap: wrap; } .book-nav { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(223, 174, 76, .45); background: rgba(255, 255, 255, .06); color: var(--gold-300); transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease), opacity .3s; } .book-nav svg { width: 18px; height: 18px; } .book-nav:hover:not(:disabled) { background: var(--grad-gold); color: var(--navy-800); border-color: transparent; transform: translateY(-2px); box-shadow: var(--sh-gold); } .book-nav:disabled { opacity: .3; cursor: not-allowed; } .book-counter { min-width: 116px; text-align: center; font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-200); } .book-progress { position: relative; width: min(320px, 100%); height: 3px; margin: 16px auto 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); overflow: hidden; } .book-progress i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--r-pill); background: var(--grad-gold); transition: width .5s var(--ease); } .book-hint { margin-top: 14px; text-align: center; font-size: .68rem; letter-spacing: .1em; color: rgba(255, 255, 255, .5); } .book-hint kbd { font-family: inherit; font-size: .62rem; padding: 2px 7px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; } /* Book info column */ .book-info { position: relative; } .book-info .book-title { font-size: clamp(2rem, 3.4vw, 3.1rem); margin-bottom: 6px; } .book-info .book-tagline { font-family: "Playfair Display", serif; font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--gold-300); margin-bottom: 20px; } .book-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin: 26px 0 30px; } .book-highlights li { display: flex; align-items: center; gap: 11px; padding: 13px 16px; font-size: .82rem; font-weight: 500; color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .05); border: 1px solid rgba(223, 174, 76, .22); border-radius: var(--r-sm); transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); } .book-highlights li:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .09); border-color: rgba(223, 174, 76, .5); } .book-highlights svg { width: 17px; height: 17px; flex: none; color: var(--gold-400); } .book-actions { display: flex; flex-wrap: wrap; gap: 14px; } .book-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); } .book-meta div strong { display: block; font-family: "Playfair Display", serif; font-size: 1.35rem; color: var(--gold-300); } .book-meta div span { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } /* --------------------------- 8. PRODUCT CARDS -------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: clamp(14px, 2.4vw, 24px); } .card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .product-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } .product-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: rgba(199, 154, 46, .45); } .product-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--beige); } .product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .product-card:hover .product-media img { transform: scale(1.09); } .product-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 29, 56, .3), transparent 55%); opacity: 0; transition: opacity .5s var(--ease); } .product-card:hover .product-media::after { opacity: 1; } .badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 14px; font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--navy-800); background: var(--grad-gold); border-radius: var(--r-pill); box-shadow: 0 4px 14px rgba(167, 121, 26, .35); } .badge--navy { background: var(--grad-navy); color: var(--gold-200); } .product-body { display: flex; flex-direction: column; flex: 1; gap: 9px; padding: clamp(13px, 2vw, 19px); } .product-cat { font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-700); } .product-name { font-family: "Playfair Display", serif; font-size: 1.12rem; font-weight: 600; color: var(--navy-700); line-height: 1.3; } .product-desc { font-size: .86rem; line-height: 1.7; color: var(--ink-3); } /* Boutique spec block: fabric, colours, sizes */ .product-specs { display: grid; gap: 9px; margin-top: 4px; padding-top: 13px; border-top: 1px dashed var(--line); } .product-specs > div { display: flex; gap: 10px; align-items: baseline; } .product-specs dt { flex: 0 0 52px; font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); line-height: 1.7; } .product-specs dd { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--ink-2); } .color-dots { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 3px; } .color-dots i { width: 15px; height: 15px; border-radius: 50%; background: var(--c); border: 1px solid rgba(22, 32, 58, .18); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45); } .size-chips { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 2px; } .size-chips span { min-width: 25px; padding: 2px 6px; text-align: center; font-size: .62rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-xs); } /* Marks a card that is still waiting on its photograph */ .photo-pending { position: absolute; bottom: 12px; left: 12px; z-index: 2; padding: 5px 12px; font-size: .56rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--navy-700); background: rgba(253, 250, 244, .88); backdrop-filter: blur(6px); border: 1px solid rgba(199, 154, 46, .35); border-radius: var(--r-pill); } .product-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); } .product-price { font-family: "Playfair Display", serif; font-size: 1.28rem; font-weight: 700; color: var(--navy-700); } .product-price small { display: block; font-family: "Poppins", sans-serif; font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* Filter tabs */ .filter-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: clamp(20px, 3vw, 32px); } .filter-tab { padding: 11px 24px; font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); transition: all .4s var(--ease); } .filter-tab:hover { border-color: var(--gold-400); color: var(--gold-700); transform: translateY(-2px); } .filter-tab.is-active { color: var(--navy-800); background: var(--grad-gold); border-color: transparent; box-shadow: var(--sh-gold); } .is-hidden-filter { display: none !important; } /* --------------------------- 9. ABOUT PREVIEW -------------------------- */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(22px, 5vw, 55px); align-items: center; } .split--reverse .split-media { order: 2; } /* z-index:0 creates a stacking context so the offset gold frame below (z-index:-1) stays inside it instead of sliding behind the section's own background, where it would never be seen. */ .split-media { position: relative; z-index: 0; } .split-media .frame { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); } .split-media .frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); } .split-media:hover .frame img { transform: scale(1.05); } .split-media .frame--wide img { aspect-ratio: 5 / 4; } .split-media::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1.5px solid var(--gold-400); border-radius: var(--r-lg); z-index: -1; } .split--reverse .split-media::before { inset: 22px 22px -22px -22px; } .media-tag { position: absolute; z-index: 3; bottom: 26px; left: -18px; padding: 16px 24px; background: var(--white); border-left: 3px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0; box-shadow: var(--sh-md); } .media-tag strong { display: block; font-family: "Playfair Display", serif; font-size: 1.5rem; color: var(--navy-700); line-height: 1; } .media-tag span { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-700); font-weight: 600; } .check-list { margin: 24px 0 30px; display: grid; gap: 12px; } .check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; color: var(--ink-2); } .check-list svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--gold-600); } /* -------------------------- 10. WHY CHOOSE US -------------------------- */ .why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: clamp(13px, 2.2vw, 20px); } .why-card { position: relative; padding: clamp(17px, 2.6vw, 24px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-xs); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } .why-card::before { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--grad-gold); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); } .why-card:hover { transform: translateY(-8px); box-shadow: var(--sh-md); border-color: rgba(199, 154, 46, .4); } .why-card:hover::before { transform: scaleX(1); } .why-card h3 { font-size: 1.08rem; margin-bottom: 6px; } .why-card p { font-size: .86rem; color: var(--ink-3); line-height: 1.7; } .icon-badge { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 12px; border-radius: var(--r-md); color: var(--gold-700); background: var(--grad-gold-soft); border: 1px solid rgba(199, 154, 46, .3); transition: transform .5s var(--ease), background .5s var(--ease), color .5s var(--ease); } .icon-badge svg { width: 27px; height: 27px; } .why-card:hover .icon-badge { transform: translateY(-3px) rotate(-5deg); background: var(--grad-navy); color: var(--gold-300); border-color: transparent; } /* -------------------------- 11. BRAND PROMISE -------------------------- */ .promise { position: relative; overflow: hidden; background: var(--grad-navy); color: rgba(255, 255, 255, .8); } .promise::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 85% 20%, rgba(199, 154, 46, .2), transparent 70%), radial-gradient(50% 60% at 10% 90%, rgba(44, 76, 134, .55), transparent 70%); animation: aurora 18s ease-in-out infinite alternate; } .promise > .container { position: relative; z-index: 2; } .promise h2, .promise h3 { color: var(--white); } .promise .split-media::before { border-color: rgba(223, 174, 76, .55); } .promise-list { display: grid; gap: 12px; margin: 16px 0 20px; } .promise-list li { display: flex; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .promise-list li:last-child { border-bottom: 0; padding-bottom: 0; } .promise-list .n { font-family: "Playfair Display", serif; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--gold-400); flex: none; width: 44px; } .promise-list h4 { color: var(--white); margin-bottom: 4px; } .promise-list p { font-size: .86rem; color: rgba(255, 255, 255, .62); } /* --------------------------- 12. TESTIMONIALS -------------------------- */ .slider { position: relative; } /* pan-y lets the browser keep vertical scrolling while the slider claims horizontal drags — essential for swiping on touch devices. */ .slider-window { overflow: hidden; padding: 6px 4px 14px; touch-action: pan-y; } .slider-track { display: flex; gap: clamp(10px, 1.6vw, 14px); transition: transform .8s var(--ease); will-change: transform; } .slider-slide { flex: 0 0 var(--slide-w, 100%); min-width: 0; } .quote-card { position: relative; height: 100%; display: flex; flex-direction: column; padding: clamp(13px, 2.2vw, 20px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .quote-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); } .quote-card::before { content: "\201C"; position: absolute; top: 6px; right: 22px; font-family: "Playfair Display", serif; font-size: 6rem; line-height: 1; color: var(--gold-300); opacity: .5; } .stars { display: flex; gap: 4px; margin-bottom: 10px; color: var(--gold); } .stars svg { width: 16px; height: 16px; } .quote-card blockquote { position: relative; z-index: 1; font-size: .93rem; line-height: 1.85; color: var(--ink-2); margin-bottom: 14px; } .quote-author { display: flex; align-items: center; gap: 14px; margin-top: auto; } .avatar { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; font-family: "Playfair Display", serif; font-size: 1.1rem; font-weight: 700; color: var(--navy-800); background: var(--grad-gold); box-shadow: 0 6px 16px rgba(167, 121, 26, .3); } .quote-author strong { display: block; font-family: "Playfair Display", serif; font-size: 1rem; color: var(--navy-700); } .quote-author span { font-size: .74rem; color: var(--muted); letter-spacing: .04em; } .slider-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; } .slider-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--navy-600); box-shadow: var(--sh-xs); transition: all .4s var(--ease); } .slider-btn svg { width: 18px; height: 18px; } .slider-btn:hover { background: var(--grad-gold); color: var(--navy-800); border-color: transparent; transform: translateY(-2px); box-shadow: var(--sh-gold); } .slider-dots { display: flex; gap: 9px; } .slider-dots button { width: 9px; height: 9px; border-radius: 50%; background: var(--beige-2); border: 1px solid var(--line); transition: all .4s var(--ease); } .slider-dots button.is-active { width: 30px; border-radius: var(--r-pill); background: var(--grad-gold); border-color: transparent; } /* ---------------------------- 13. BLOG CARDS --------------------------- */ .blog-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } .blog-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: rgba(199, 154, 46, .4); } .blog-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--beige); } .blog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .blog-card:hover .blog-media img { transform: scale(1.08); } .blog-date { position: absolute; bottom: 12px; left: 12px; z-index: 2; padding: 7px 14px; font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-800); background: rgba(253, 250, 244, .93); backdrop-filter: blur(6px); border-radius: var(--r-pill); } .blog-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: clamp(10px, 1.8vw, 14px); } .blog-cat { font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-700); } .blog-card h3 { font-size: 1.14rem; line-height: 1.35; } .blog-card h3 a { color: inherit; } .blog-card:hover h3 a { color: var(--gold-700); } .blog-card p { font-size: .86rem; color: var(--ink-3); line-height: 1.72; } .blog-body .link-arrow { margin-top: auto; padding-top: 14px; } /* Featured article */ .featured-post { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); margin-bottom: clamp(14px, 3vw, 27px); } .featured-post .blog-media { aspect-ratio: auto; height: 100%; min-height: 320px; } .featured-body { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(13px, 2.4vw, 26px); } .featured-body h2 { font-size: clamp(1.5rem, 2.3vw, 2.2rem); } .featured-body .btn, .featured-body .link-arrow { align-self: flex-start; margin-top: 8px; } /* Long-form article prose (blogs page) */ .prose-stack { display: grid; gap: clamp(13px, 2.4vw, 23px); max-width: 880px; margin-inline: auto; } .prose-article { position: relative; padding: clamp(13px, 2.2vw, 23px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); scroll-margin-top: calc(var(--header-h) + 26px); } .prose-article::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: var(--r-lg) 0 0 var(--r-lg); background: var(--grad-gold); } /* Collapsible reading pattern: each article opens on demand instead of dumping every full-length post into the page at once. */ .prose-summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; } .prose-summary::-webkit-details-marker { display: none; } .prose-summary .prose-meta, .prose-summary h2 { flex: 1 1 auto; min-width: 0; } .prose-summary h2 { margin-bottom: 0; } .prose-summary::after { content: ""; flex: none; width: 30px; height: 30px; margin-top: 2px; border-radius: 50%; background: var(--cream-2, #f4ecdd) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c79a2e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .3s var(--ease); } .prose-article[open] .prose-summary::after { transform: rotate(180deg); } .prose-article:not([open]):hover .prose-summary h2 { color: var(--gold-700); } .prose-body { padding-top: 18px; margin-top: 18px; border-top: 1px dashed var(--line); } .prose-article[open] { box-shadow: var(--sh-md); } .prose-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); } .prose-meta time { color: var(--muted); font-weight: 500; } .prose-article h2 { font-size: clamp(1.4rem, 2.1vw, 1.95rem); margin-bottom: 14px; } .prose-article h3 { font-size: 1.1rem; margin: 26px 0 8px; } .prose { font-size: .95rem; line-height: 1.9; color: var(--ink-2); } .prose p + p { margin-top: 1em; } .prose ul { display: grid; gap: 10px; margin: 16px 0; } .prose ul li { position: relative; padding-left: 24px; } .prose ul li::before { content: ""; position: absolute; left: 4px; top: .78em; width: 7px; height: 7px; border-radius: 50%; background: var(--grad-gold); } .prose blockquote { margin: 22px 0; padding: 18px 24px; font-family: "Playfair Display", serif; font-style: italic; font-size: 1.06rem; color: var(--navy-700); background: var(--cream-2); border-left: 3px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .prose strong { color: var(--navy-700); font-weight: 600; } .prose-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); } /* ----------------------------- 14. CTA BAND ---------------------------- */ .cta-band { position: relative; overflow: hidden; padding-block: clamp(27px, 5vw, 49px); background: linear-gradient(120deg, #0a1428, #1c3d6f 45%, #0c1d38 100%); background-size: 220% 220%; animation: gradient-drift 16s ease infinite; text-align: center; color: rgba(255, 255, 255, .78); } .cta-band::before, .cta-band::after { content: ""; position: absolute; background: var(--motif) center / contain no-repeat; opacity: .12; pointer-events: none; } .cta-band::before { top: -30px; left: 4%; width: 150px; height: 230px; } .cta-band::after { bottom: -30px; right: 4%; width: 170px; height: 260px; transform: rotate(180deg); } .cta-band h2 { color: var(--white); margin-bottom: 10px; } .cta-band .lead { color: rgba(255, 255, 255, .68); max-width: 620px; margin-inline: auto; } .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 20px; } .cta-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2vw, 20px); margin-top: 22px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); } .cta-contacts a { display: inline-flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--gold-200); } .cta-contacts a:hover { color: var(--white); } .cta-contacts svg { width: 18px; height: 18px; } /* ------------------------------ 15. FOOTER ----------------------------- */ .site-footer { position: relative; background: var(--navy-900); color: rgba(255, 255, 255, .6); font-size: .88rem; overflow: hidden; } .site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--grad-gold); } .footer-main { display: grid; grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(150px, 1fr)); gap: clamp(13px, 2.4vw, 24px); padding-block: clamp(22px, 4vw, 39px); } .footer-brand .brand { margin: 0 0 18px; } .footer-brand .brand-name { color: var(--white); } .footer-brand .brand-sub { color: var(--gold-300); } .footer-brand p { line-height: 1.8; max-width: 38ch; } .footer-tagline { margin-top: 16px; font-family: "Playfair Display", serif; font-style: italic; color: var(--gold-300); font-size: .96rem; } .footer-col h4 { color: var(--white); font-size: 1rem; margin-bottom: 20px; padding-bottom: 12px; position: relative; } .footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--grad-gold); } .footer-links { display: grid; gap: 11px; } .footer-links a { display: inline-flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .62); font-size: .87rem; } .footer-links a::before { content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--gold-600); transition: transform .35s var(--ease); } .footer-links a:hover { color: var(--gold-300); } .footer-links a:hover::before { transform: scale(1.6); } .footer-contact { display: grid; gap: 14px; } .footer-contact li { display: flex; gap: 12px; align-items: flex-start; } .footer-contact svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--gold-400); } .footer-contact a, .footer-contact span { color: rgba(255, 255, 255, .62); line-height: 1.65; } .footer-contact a:hover { color: var(--gold-300); } .socials { display: flex; gap: 11px; margin-top: 22px; } .social-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .72); transition: all .4s var(--ease); } .social-btn svg { width: 17px; height: 17px; } .social-btn:hover { background: var(--grad-gold); color: var(--navy-800); border-color: transparent; transform: translateY(-3px); box-shadow: var(--sh-gold); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8rem; } .footer-bottom p { color: rgba(255, 255, 255, .45); } .footer-bottom nav { display: flex; gap: 20px; } .footer-bottom nav a { color: rgba(255, 255, 255, .5); font-size: .8rem; } .footer-bottom nav a:hover { color: var(--gold-300); } /* ---------------- 16. INNER PAGE HERO / TIMELINE / VALUES -------------- */ .page-hero { position: relative; display: grid; place-items: center; min-height: min(58vh, 520px); padding: calc(var(--header-h) + clamp(22px, 4.5vw, 42px)) 0 clamp(20px, 4vw, 36px); text-align: center; overflow: hidden; background: var(--grad-navy); color: rgba(255, 255, 255, .74); } .page-hero img.page-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; } .page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 17, 31, .82), rgba(12, 29, 56, .7)), radial-gradient(60% 70% at 50% 100%, rgba(199, 154, 46, .22), transparent 70%); } .page-hero > .container { position: relative; z-index: 2; } .page-hero h1 { color: var(--white); } .page-hero .lead { color: rgba(255, 255, 255, .72); max-width: 620px; margin: 18px auto 0; } .breadcrumb { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); } .breadcrumb a { color: var(--gold-300); } .breadcrumb a:hover { color: var(--white); } .breadcrumb span { opacity: .5; } /* Timeline */ .timeline { position: relative; max-width: 940px; margin-inline: auto; padding-left: 6px; } .timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, var(--gold-400) 12%, var(--gold-400) 88%, transparent); } .tl-item { position: relative; width: 50%; padding-right: clamp(28px, 4vw, 56px); padding-bottom: clamp(22px, 4vw, 36px); } .tl-item:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: clamp(28px, 4vw, 56px); text-align: left; } .tl-item:nth-child(odd) { text-align: right; } .tl-item::before { content: ""; position: absolute; top: 26px; width: 15px; height: 15px; border-radius: 50%; background: var(--cream); border: 3px solid var(--gold); box-shadow: 0 0 0 5px rgba(199, 154, 46, .14); z-index: 2; } .tl-item:nth-child(odd)::before { right: -8px; } .tl-item:nth-child(even)::before { left: -8px; } .tl-card { padding: clamp(10px, 1.8vw, 16px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } .tl-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(199, 154, 46, .4); } .tl-year { display: inline-block; margin-bottom: 10px; padding: 5px 15px; font-size: .68rem; font-weight: 600; letter-spacing: .16em; color: var(--navy-800); background: var(--grad-gold-soft); border: 1px solid rgba(199, 154, 46, .3); border-radius: var(--r-pill); } .tl-card h3 { font-size: 1.1rem; margin-bottom: 8px; } .tl-card p { font-size: .86rem; color: var(--ink-3); } /* Values / mission-vision */ .mv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(10px, 1.8vw, 16px); } .mv-card { position: relative; padding: clamp(13px, 2.2vw, 22px); border-radius: var(--r-md); border: 1px solid rgba(223, 174, 76, .26); background: rgba(255, 255, 255, .05); overflow: hidden; transition: transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease); } .mv-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .09); border-color: rgba(223, 174, 76, .55); } .mv-card .icon-badge { background: rgba(199, 154, 46, .16); border-color: rgba(223, 174, 76, .3); color: var(--gold-300); } .mv-card:hover .icon-badge { background: var(--grad-gold); color: var(--navy-800); } .mv-card h3 { margin-bottom: 10px; } .mv-card p { color: rgba(255, 255, 255, .68); font-size: .9rem; } .mv-card .n { position: absolute; top: 10px; right: 20px; font-family: "Playfair Display", serif; font-size: 4.4rem; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, .05); } /* Stat strip */ .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(10px, 1.6vw, 14px); text-align: center; } .stat-card { padding: clamp(12px, 2vw, 19px) 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-xs); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .stat-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); } .stat-card strong { display: block; font-family: "Playfair Display", serif; font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 700; line-height: 1; color: var(--navy-700); } .stat-card span { display: block; margin-top: 8px; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-700); } /* --------------------- 17. CONTACT PAGE & FORM ------------------------ */ .contact-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(13px, 2.6vw, 27px); align-items: start; } .form-card { position: relative; padding: clamp(13px, 2.2vw, 24px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); } .form-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--grad-gold); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; } .field { position: relative; display: flex; flex-direction: column; gap: 8px; } .field--full { grid-column: 1 / -1; } .field label { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .field label .req { color: #c0392b; } .field input, .field select, .field textarea { width: 100%; padding: 14px 16px; font-size: .92rem; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); } .field textarea { min-height: 132px; resize: vertical; } .field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7590' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; } .field input::placeholder, .field textarea::placeholder { color: var(--muted); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; background: var(--white); border-color: var(--gold-400); box-shadow: 0 0 0 4px rgba(199, 154, 46, .14); } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #d76a5c; box-shadow: 0 0 0 4px rgba(215, 106, 92, .12); } .field-error { display: none; font-size: .74rem; color: #c0392b; letter-spacing: .01em; } .field.has-error .field-error, .form-consent.has-error .field-error { display: block; animation: shake-in .4s var(--ease); } .form-consent { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 11px; grid-column: 1 / -1; font-size: .82rem; color: var(--ink-3); cursor: pointer; } .form-consent input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--gold-600); } .form-consent .field-error { flex: 0 0 100%; } .form-consent.has-error { color: #c0392b; } .form-consent.has-error input { outline: 2px solid #d76a5c; outline-offset: 2px; border-radius: 3px; } .form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; } .form-note { font-size: .78rem; color: var(--muted); } .btn.is-loading { pointer-events: none; opacity: .8; } .btn .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(12, 29, 56, .25); border-top-color: var(--navy-800); animation: spin .8s linear infinite; display: none; } .btn.is-loading .spinner { display: block; } .btn.is-loading .btn-icon { display: none; } /* Contact info side */ .info-card { padding: clamp(12px, 2vw, 17px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm); margin-bottom: 12px; } .info-list { display: grid; gap: 20px; } .info-item { display: flex; gap: 16px; align-items: flex-start; } .info-item .icon-badge { width: 46px; height: 46px; margin: 0; border-radius: var(--r-sm); flex: none; } .info-item .icon-badge svg { width: 21px; height: 21px; } .info-item h4 { font-size: .95rem; margin-bottom: 3px; } .info-item p, .info-item a { font-size: .88rem; color: var(--ink-3); line-height: 1.65; } .info-item a:hover { color: var(--gold-700); } .map-frame { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-sm); background: var(--beige); } .map-frame iframe { display: block; width: 100%; height: 320px; border: 0; filter: saturate(.9) contrast(1.02); } .hours-list { display: grid; gap: 10px; } .hours-list li { display: flex; justify-content: space-between; gap: 14px; font-size: .86rem; padding-bottom: 10px; border-bottom: 1px dashed var(--line); } .hours-list li:last-child { border-bottom: 0; padding-bottom: 0; } .hours-list span { color: var(--ink-3); } .hours-list strong { color: var(--navy-700); font-weight: 600; } /* --------------- 18. MODAL / TOAST / SCROLL-TOP ----------------------- */ .modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 22px; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; } .modal.is-open { opacity: 1; visibility: visible; } .modal-backdrop { position: absolute; inset: 0; background: rgba(8, 17, 31, .68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal-card { position: relative; width: min(480px, 100%); padding: clamp(14px, 2.6vw, 23px) clamp(13px, 2.4vw, 20px); text-align: center; background: var(--cream); border: 1px solid rgba(199, 154, 46, .35); border-radius: var(--r-lg); box-shadow: var(--sh-lg); transform: translateY(24px) scale(.96); opacity: 0; transition: transform .55s var(--ease), opacity .45s var(--ease); } .modal.is-open .modal-card { transform: none; opacity: 1; } .modal-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--grad-gold); } .modal-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); transition: all .35s var(--ease); } .modal-close:hover { background: var(--beige); color: var(--navy-700); transform: rotate(90deg); } .modal-close svg { width: 18px; height: 18px; } .modal-icon { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 20px; border-radius: 50%; color: var(--navy-800); background: var(--grad-gold); box-shadow: var(--sh-gold); animation: pop-in .6s var(--ease-out) backwards; } .modal.is-open .modal-icon { animation-delay: .12s; } .modal-icon svg { width: 38px; height: 38px; } .modal-card h3 { font-size: 1.6rem; margin-bottom: 10px; } .modal-card p { font-size: .92rem; color: var(--ink-2); } .modal-card .btn { margin-top: 26px; } .modal-card .motif-divider { margin-bottom: 18px; } .toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 2500; display: grid; gap: 10px; max-width: min(360px, calc(100vw - 40px)); } .toast { display: flex; gap: 12px; align-items: flex-start; padding: 15px 18px; font-size: .86rem; color: var(--white); background: var(--navy-700); border-left: 3px solid var(--gold); border-radius: var(--r-sm); box-shadow: var(--sh-lg); animation: toast-in .45s var(--ease-out); } .toast.is-out { animation: toast-out .35s var(--ease) forwards; } .toast svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--gold-300); } .toast--error { border-left-color: #d76a5c; } .toast--error svg { color: #f0a79c; } .scroll-top { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--navy-800); background: var(--grad-gold); box-shadow: var(--sh-gold); opacity: 0; visibility: hidden; transform: translateY(14px); transition: all .45s var(--ease); } .scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; } .scroll-top:hover { transform: translateY(-4px); } .scroll-top svg { width: 20px; height: 20px; } /* ----------------------------- 19. UTILITIES --------------------------- */ .center { text-align: center; } .mt-0 { margin-top: 0; } .mt-sm { margin-top: 14px; } .mt-md { margin-top: 26px; } .mt-lg { margin-top: 40px; } .mb-0 { margin-bottom: 0; } .flex-actions { display: flex; flex-wrap: wrap; gap: 14px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .no-select { user-select: none; -webkit-user-select: none; } /* ------------------------ 20. FLOATING CONTACT WIDGET ------------------------ */ .float-contact { position: fixed; top: 50%; right: 20px; transform: translateY(-50%); z-index: 940; display: flex; flex-direction: column; gap: 12px; opacity: 0; animation: floatContactIn .6s var(--ease-out) .5s forwards; } @keyframes floatContactIn { from { opacity: 0; transform: translateY(-50%) translateX(16px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } } .float-btn { position: relative; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; color: #fff; box-shadow: 0 10px 24px rgba(12, 29, 56, .28), 0 2px 6px rgba(12, 29, 56, .18); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); } .float-btn svg { width: 26px; height: 26px; } .float-btn:hover, .float-btn:focus-visible { transform: translateY(-3px) scale(1.07); box-shadow: 0 16px 32px rgba(12, 29, 56, .34), 0 4px 10px rgba(12, 29, 56, .2); color: #fff; } .float-btn--whatsapp { background: linear-gradient(155deg, #34d17a, #1fa855); } .float-btn--phone { background: linear-gradient(155deg, #3b82f6, #1d4ed8); } .float-btn--enquiry { background: linear-gradient(155deg, #38bdf8, #0284c7); } /* Tooltip */ .float-btn::after { content: attr(data-tooltip); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px); background: var(--navy-800); color: #fff; font-size: .74rem; font-weight: 600; letter-spacing: .01em; padding: 6px 12px; border-radius: 8px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); } .float-btn:hover::after, .float-btn:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); } @media (prefers-reduced-motion: reduce) { .float-contact { animation: none; opacity: 1; } .float-btn { transition: none; } }