/* Dua Hati Co — marketing site styles. Brand tokens mirrored from templates/_shared/partials/brand_tokens.html.j2 so the marketing site and the invitation templates pull from one consistent palette/type system instead of re-guessing colors per file. */ :root { --color-maroon: #6B2737; --color-gold: #C9A227; --color-blush: #E8C5B8; --color-dusty-rose: #C98E8E; --color-ivory: #FAF6F0; --color-ink: #2E211F; --font-display: 'Cormorant Garamond', serif; --font-heading: 'Playfair Display', serif; --font-body: 'Montserrat', sans-serif; --font-flourish: 'Pinyon Script', cursive; /* one house exception to the brand palette, same spirit as the brand sheet's single filled-heart icon exception: WhatsApp green is a recognizable, trust-building convention for this specific CTA in the Malaysian market, so the primary contact button breaks from Gold/Maroon. */ --color-whatsapp: #25D366; --color-whatsapp-dark: #1DA851; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* ============ I18N TOGGLE ============ English is the default/primary language (data-active-lang="en" on at load). These two attribute-selector rules are the ONLY mechanism that shows/hides the language-tagged content — deliberately not the `hidden` attribute, which silently loses to any CSS `display` rule of equal specificity (a real bug hit earlier on the invitation templates). Keep these as the sole show/hide rule for [lang]. */ html[data-active-lang="en"] [lang="ms"] { display: none; } html[data-active-lang="ms"] [lang="en"] { display: none; } body { margin: 0; background: var(--color-ivory); color: var(--color-ink); font-family: var(--font-body); line-height: 1.6; } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-heading); font-weight: 500; margin: 0 0 0.75rem; color: var(--color-maroon); } a { color: inherit; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-maroon); color: #fff; padding: 0.75rem 1.25rem; z-index: 200; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* ============ BUTTONS ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 999px; text-decoration: none; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn:hover { transform: translateY(-1px); } .btn--outline { background: transparent; border-color: var(--color-maroon); color: var(--color-maroon); } .btn--primary { background: var(--color-gold); color: #fff; } .btn--whatsapp { background: var(--color-whatsapp); color: #fff; font-size: 1.05rem; padding: 1rem 2rem; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35); } .btn--whatsapp:hover { background: var(--color-whatsapp-dark); } .btn--whatsapp__icon { width: 1.4rem; height: 1.4rem; flex-shrink: 0; } /* ============ HEADER (shared .how-header rules live in the How It Works section below — both pages use the same header markup) ============ */ .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; } .brand__logo { width: 34px; height: 34px; object-fit: contain; } .brand__name { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--color-maroon); } .lang-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; padding: 0.4rem 0.75rem; border-radius: 999px; border: 2px solid var(--color-maroon); background: transparent; color: var(--color-maroon); font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease; } .lang-toggle:hover { background: var(--color-maroon); color: #fff; transform: translateY(-1px); } /* ============ LAYOUT / SECTIONS ============ */ .hero, .section { max-width: 1080px; margin: 0 auto; padding: 3rem 1.25rem; } .section--alt { background: #fff; max-width: none; } .section--alt > * { max-width: 1080px; margin-left: auto; margin-right: auto; } .section__title { text-align: center; font-size: 1.9rem; } .section__subtitle { text-align: center; max-width: 640px; margin: 0 auto 2.25rem; opacity: 0.8; } .placeholder-note { font-style: italic; } /* ============ HERO ============ */ .hero { text-align: center; padding-top: 3.5rem; } .hero__inner { display: flex; flex-direction: column-reverse; align-items: center; gap: 3rem; } .hero__content { width: 100%; } .hero__tagline { font-family: var(--font-flourish); font-size: 1.75rem; color: var(--color-gold); margin: 0 0 0.5rem; } .hero__title { font-size: 2.1rem; max-width: 640px; margin-left: auto; margin-right: auto; } .hero__pitch { max-width: 560px; margin: 0 auto 1.75rem; opacity: 0.9; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; } /* ---------- Hero quick-form (email/phone + pill CTA) ---------- */ .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; } .hero__quickform { display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 460px; margin: 0 auto; justify-content: center; } .hero__quickform input { flex: 1 1 220px; padding: 0.8rem 1.25rem; border-radius: 999px; border: 2px solid rgba(107, 39, 55, 0.2); background: #fff; font-family: var(--font-body); font-size: 0.95rem; color: var(--color-ink); } .hero__quickform input:focus { outline: none; border-color: var(--color-maroon); } .hero__quickform-hint { font-size: 0.78rem; opacity: 0.65; margin: 0.6rem 0 0; } /* ---------- Hero phone-stack + highlighted stat card ---------- */ .hero__stack { position: relative; width: 220px; height: 320px; flex-shrink: 0; } .phone-mock { position: absolute; top: 0; width: 150px; height: 300px; background: var(--color-ink); border-radius: 24px; padding: 8px; box-shadow: 0 18px 40px rgba(46, 33, 31, 0.28); } .phone-mock--back { left: 0; transform: rotate(-9deg); opacity: 0.85; } .phone-mock--front { left: 55px; transform: rotate(6deg); } .phone-mock__notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 46px; height: 6px; border-radius: 3px; background: var(--color-ink); } .phone-mock__screen { width: 100%; height: 100%; border-radius: 17px; background: linear-gradient(160deg, var(--color-blush), var(--color-ivory)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem 0.5rem; } .phone-mock__flourish { font-family: var(--font-flourish); font-size: 0.85rem; color: var(--color-gold); margin: 0 0 0.4rem; } .phone-mock__names { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--color-maroon); line-height: 1.25; margin: 0 0 0.4rem; } .phone-mock__amp { color: var(--color-gold); font-style: italic; } .phone-mock__date { font-size: 0.6rem; letter-spacing: 0.08em; color: var(--color-ink); opacity: 0.7; margin: 0; } .stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #fff; border-radius: 14px; padding: 0.85rem 1.1rem; box-shadow: 0 10px 26px rgba(46, 33, 31, 0.18); border: 1px solid rgba(201, 162, 39, 0.35); } .stat-card__num { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; color: var(--color-maroon); line-height: 1.1; } .stat-card__label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em; opacity: 0.75; max-width: 8rem; } .stat-card--hero { position: absolute; right: -0.5rem; bottom: -0.5rem; width: 8.5rem; } /* ============ TRUST / TOOLS LOGO ROW ============ */ .section--logos { padding-top: 0.5rem; padding-bottom: 2.5rem; } .logo-row__label { text-align: center; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0.6; margin: 0 0 1.25rem; } .logo-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 2.25rem; } .logo-row__item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--color-ink); filter: grayscale(1); opacity: 0.5; transition: opacity 0.15s ease, filter 0.15s ease; } .logo-row__item:hover { filter: grayscale(0); opacity: 0.9; } .logo-row__item svg { width: 22px; height: 22px; flex-shrink: 0; } /* ============ ICON BADGE (shared) ============ */ .icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--color-ivory); color: var(--color-maroon); margin-bottom: 1rem; } .icon-badge svg { width: 1.7rem; height: 1.7rem; } /* ============ ALTERNATING FEATURE ROWS ============ */ .section--features { padding-top: 1rem; } .feature-row { display: flex; flex-direction: column; gap: 2.5rem; align-items: center; padding: 2.5rem 0; } .feature-row + .feature-row { border-top: 1px solid rgba(107, 39, 55, 0.1); } .feature-row__text { text-align: center; } .feature-row__title { font-size: 1.5rem; max-width: 460px; margin-left: auto; margin-right: auto; } .feature-row__desc { opacity: 0.85; max-width: 460px; margin: 0 auto 1.5rem; } .feature-row__visual { position: relative; width: 100%; max-width: 280px; display: flex; justify-content: center; } .stat-card--float { position: absolute; right: -0.75rem; bottom: -0.75rem; width: 7.5rem; } .stat-card--alt { left: -0.75rem; right: auto; top: -0.75rem; bottom: auto; } /* ---------- device mockups (feature screens) ---------- */ .device-mock { width: 200px; background: var(--color-ink); border-radius: 22px; padding: 8px; box-shadow: 0 18px 40px rgba(46, 33, 31, 0.22); } .device-mock__bar { width: 40px; height: 5px; border-radius: 3px; background: var(--color-ink); margin: 0 auto 6px; } .device-mock__body { background: var(--color-ivory); border-radius: 16px; padding: 1.5rem 1.1rem; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .device-mock__label { font-size: 0.8rem; font-weight: 600; color: var(--color-maroon); margin: 0 0 0.85rem; } .device-mock__pillrow { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .device-mock__pill { padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; border: 1.5px solid var(--color-maroon); color: var(--color-maroon); } .device-mock__pill--active { background: var(--color-gold); border-color: var(--color-gold); color: #fff; } .device-mock__line { width: 100%; height: 8px; border-radius: 4px; background: rgba(107,39,55,0.12); margin-bottom: 0.5rem; } .device-mock__line--short { width: 60%; } .device-mock__body--map { justify-content: space-between; padding-top: 2rem; padding-bottom: 2rem; } .device-mock__flourish { font-family: var(--font-flourish); color: var(--color-gold); font-size: 0.9rem; margin: 0; } .device-mock__countdown { display: flex; gap: 0.5rem; } .device-mock__countdown span { background: #fff; border-radius: 8px; padding: 0.4rem 0.6rem; font-family: var(--font-heading); font-weight: 700; color: var(--color-maroon); font-size: 1rem; box-shadow: 0 4px 10px rgba(46,33,31,0.1); } .device-mock__pinrow { color: var(--color-maroon); width: 28px; } .device-mock__qr { width: 88px; height: 88px; border-radius: 10px; margin-bottom: 1rem; background: repeating-linear-gradient(0deg, var(--color-ink) 0 6px, transparent 6px 12px), repeating-linear-gradient(90deg, var(--color-ink) 0 6px, transparent 6px 12px); background-blend-mode: multiply; background-color: #fff; opacity: 0.85; } /* ============ ACCENT SECTION (WITHOUT / WITH) ============ */ .section-accent { position: relative; overflow: hidden; background: var(--color-maroon); color: #fff; padding: 4rem 1.25rem; } .section-accent__pattern { position: absolute; inset: 0; pointer-events: none; } .ring-cluster { position: absolute; width: 340px; height: 340px; border-radius: 50%; border: 1.5px solid rgba(201, 162, 39, 0.35); } .ring-cluster::before, .ring-cluster::after { content: ""; position: absolute; inset: 55px; border-radius: 50%; border: 1.5px solid rgba(201, 162, 39, 0.35); } .ring-cluster::after { inset: 110px; } .ring-cluster--a { top: -140px; left: -120px; } .ring-cluster--b { bottom: -160px; right: -110px; } .section-accent__inner { position: relative; max-width: 720px; margin: 0 auto; text-align: center; } .section-accent__title { color: #fff; font-size: 1.9rem; max-width: 560px; margin: 0 auto 0.75rem; } .section-accent__subtitle { opacity: 0.85; max-width: 480px; margin: 0 auto 2.25rem; } .compare-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; max-width: 680px; margin: 0 auto 3rem; text-align: left; } .compare-col { border-radius: 16px; padding: 1.5rem 1.5rem 1.75rem; } .compare-col__title { color: inherit; font-size: 1.05rem; text-align: center; margin: 0 0 1.1rem; } .compare-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .compare-col li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; line-height: 1.4; } .compare-col__mark { flex-shrink: 0; font-size: 0.85rem; line-height: 1.5; font-weight: 700; } /* muted/greyed — the option we want to look unappealing */ .compare-col--without { background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.6); } .compare-col--without .compare-col__title { color: rgba(255,255,255,0.75); } .compare-col--without .compare-col__mark { color: rgba(255,255,255,0.4); } /* gold-highlighted — the option we want to pop */ .compare-col--with { background: rgba(201, 162, 39, 0.16); border: 2px solid var(--color-gold); color: #fff; box-shadow: 0 12px 32px rgba(0,0,0,0.25); } .compare-col--with .compare-col__title { color: var(--color-gold); } .compare-col--with .compare-col__mark { color: var(--color-gold); } .section-accent__mockup { display: flex; flex-direction: column; align-items: center; } .device-mock--preview { width: 190px; } .device-mock__body--preview { min-height: 180px; } .section-accent__mockup-label { font-size: 0.75rem; opacity: 0.7; margin-top: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; } /* ============ THREE-COLUMN DIFFERENTIATORS ============ */ .grid-3col { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } .grid-3col__card { background: #fff; border-radius: 16px; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 10px 28px rgba(46, 33, 31, 0.08); } .grid-3col__card h3 { font-size: 1.15rem; } .grid-3col__card p { opacity: 0.85; font-size: 0.9rem; margin: 0; } /* ============ TEMPLATE GALLERY ============ */ .gallery-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } .template-card { background: var(--color-ivory); border: 1px solid rgba(107, 39, 55, 0.12); border-radius: 14px; padding: 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; } .template-card__swatch { width: 100%; height: 120px; border-radius: 10px; margin-bottom: 1.1rem; } .template-card__swatch--minimalist { background: linear-gradient(135deg, var(--color-ivory), var(--color-gold)); border: 1px solid rgba(46,33,31,0.1); } .template-card__swatch--floral { background: linear-gradient(135deg, var(--color-blush), var(--color-dusty-rose)); } .template-card__swatch--modern { background: linear-gradient(135deg, var(--color-maroon), #3a1420); } .template-card__title { font-size: 1.3rem; } .template-card__desc { opacity: 0.85; flex-grow: 1; margin-bottom: 1.25rem; } /* ============ HOW IT WORKS (connected timeline) ============ */ .steps-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.25rem; max-width: 640px; margin-left: auto; margin-right: auto; } .step-card { display: flex; align-items: flex-start; gap: 1.25rem; position: relative; } /* vertical connecting line (mobile) — sits behind the node circles */ .step-card:not(:last-child)::after { content: ""; position: absolute; z-index: 0; left: 27px; top: 56px; bottom: -2.25rem; width: 2px; background: rgba(107, 39, 55, 0.22); } .step-card__node { flex-shrink: 0; position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: var(--color-maroon); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff; } .step-card__icon { display: inline-flex; width: 26px; height: 26px; } .step-card__icon svg { width: 100%; height: 100%; } .step-card__num { position: absolute; top: -4px; right: -4px; width: 1.4rem; height: 1.4rem; line-height: 1.4rem; border-radius: 50%; background: var(--color-gold); color: #fff; font-weight: 700; font-size: 0.7rem; text-align: center; border: 2px solid #fff; } .step-card__body { padding-top: 0.35rem; } .step-card__title { font-size: 1.1rem; margin-bottom: 0.3rem; } .step-card__desc { opacity: 0.85; margin: 0; font-size: 0.9rem; } .steps-timeline__more { text-align: center; margin-top: 2.5rem; } /* ============ PACKAGE CARDS ============ */ .packages-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; } .package-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(46, 33, 31, 0.08); display: flex; flex-direction: column; } .package-card--featured { box-shadow: 0 12px 32px rgba(201, 162, 39, 0.3); transform: translateY(-6px); } .package-card__header { padding: 1.25rem 1.5rem; text-align: center; color: #fff; } .package-card__header--pilih { background: var(--color-ink); } .package-card__header--satu { background: var(--color-dusty-rose); } .package-card__header--dua { background: var(--color-gold); } .package-card__header--selamanya { background: var(--color-maroon); } .package-card__name { display: block; font-family: var(--font-heading); font-size: 1.2rem; } .package-card__price { display: block; font-size: 0.8rem; opacity: 0.9; margin-top: 0.15rem; } .package-card__features { list-style: none; margin: 0; padding: 1.25rem 1.5rem; flex-grow: 1; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.85rem; } .package-card__features li { padding-left: 1.2rem; position: relative; } .package-card__features li::before { content: "✓"; position: absolute; left: 0; color: var(--color-gold); font-weight: 700; } .package-card__features li.package-card__inherit { padding-left: 0; margin-bottom: 0.25rem; padding-bottom: 0.6rem; border-bottom: 1px dashed rgba(107, 39, 55, 0.25); font-style: italic; font-weight: 600; color: var(--color-maroon); } .package-card__features li.package-card__inherit::before { content: none; } .package-card__btn { margin: 0 1.5rem 1.5rem; } .packages-note { text-align: center; font-size: 0.8rem; opacity: 0.75; max-width: 560px; margin: 1.25rem auto 0; } /* ============ TESTIMONIALS ============ */ .testimonials-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } .testimonial-card--placeholder { border: 1px dashed rgba(107, 39, 55, 0.3); border-radius: 14px; padding: 1.5rem; text-align: center; background: var(--color-ivory); opacity: 0.75; } .testimonial-card__mark { display: block; font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: var(--color-gold); margin-bottom: 0.25rem; } .testimonial-card__stars { color: var(--color-gold); letter-spacing: 0.15em; margin: 0 0 0.75rem; font-size: 0.9rem; } .testimonial-card__quote { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; margin: 0 0 0.75rem; } .testimonial-card__author { font-size: 0.85rem; opacity: 0.8; margin: 0; } /* ============ FAQ ============ */ .faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; } .faq-item { background: #fff; border-radius: 10px; padding: 1rem 1.25rem; } .faq-item summary { cursor: pointer; font-weight: 600; font-family: var(--font-heading); font-size: 1.05rem; color: var(--color-maroon); } .faq-item summary::marker { color: var(--color-gold); } .faq-item p { margin: 0.75rem 0 0.25rem; opacity: 0.9; font-size: 0.95rem; } .faq-item p code { background: var(--color-ivory); padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.85em; } /* ============ CONTACT ============ */ .contact-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; } .contact-primary { text-align: center; background: #fff; border-radius: 14px; padding: 2.25rem 1.5rem; } .contact-primary__hint { margin-top: 0.9rem; font-size: 0.8rem; opacity: 0.7; } .lead-form { background: #fff; border-radius: 14px; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .lead-form__title { font-size: 1.1rem; text-align: center; } .lead-form__field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; } .lead-form__field label { font-weight: 600; } .lead-form__field input, .lead-form__field select, .lead-form__field textarea { padding: 0.65rem 0.8rem; border: 1px solid rgba(46, 33, 31, 0.2); border-radius: 8px; font-family: var(--font-body); font-size: 0.95rem; background: var(--color-ivory); } .lead-form__honeypot { position: absolute; left: -9999px; } .lead-form__status { text-align: center; color: var(--color-maroon); font-weight: 600; font-size: 0.9rem; } /* ============ FLOATING WHATSAPP BUTTON ============ */ .wa-float { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: var(--color-whatsapp); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45); transition: transform 0.15s ease, background 0.15s ease; } .wa-float:hover { transform: translateY(-2px); background: var(--color-whatsapp-dark); } .wa-float svg { width: 30px; height: 30px; } /* ============ HOW IT WORKS PAGE ============ */ /* ---------- top nav (logo / centered links / actions) ---------- */ .how-header { background: var(--color-ivory); border-bottom: 1px solid rgba(107, 39, 55, 0.12); position: sticky; top: 0; z-index: 20; } .how-header__inner { max-width: 1160px; margin: 0 auto; padding: 0.85rem 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; } .how-header__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; } .how-nav__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; } .how-nav__links a { text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--color-ink); opacity: 0.75; } .how-nav__links a:hover, .how-nav__links a.is-active { opacity: 1; color: var(--color-maroon); } .how-header__actions { display: flex; align-items: center; gap: 1rem; } .btn--dark-pill { display: inline-flex; align-items: center; background: var(--color-maroon); color: #fff; border-radius: 999px; padding: 0.6rem 1.35rem; font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; text-decoration: none; transition: transform 0.15s ease; } .btn--dark-pill:hover { transform: translateY(-1px); } /* ---------- hero ---------- */ .how-hero { background: linear-gradient(160deg, var(--color-blush) 0%, var(--color-ivory) 55%, #fff 100%); padding: 5rem 1.25rem 4rem; text-align: center; } .how-hero__inner { max-width: 620px; margin: 0 auto; } .how-hero h1 { font-size: 2.5rem; margin: 0 0 1rem; } .how-hero p { font-size: 1.05rem; opacity: 0.85; margin: 0 0 2rem; } .how-hero__video-btn { display: inline-flex; align-items: center; gap: 0.65rem; background: var(--color-ink); color: #fff; border: none; border-radius: 999px; padding: 0.9rem 1.75rem; font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: transform 0.15s ease; } .how-hero__video-btn:hover { transform: translateY(-1px); } .how-hero__play { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; color: var(--color-ink); font-size: 0.6rem; } /* ---------- steps ---------- */ .how-step { max-width: 1080px; margin: 0 auto; padding: 3.5rem 1.25rem; } .how-step__row { display: flex; flex-direction: column; gap: 2.5rem; align-items: center; } .how-step__text { text-align: center; } .how-step__label { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 0.75rem; } .how-step__heading { font-size: 1.75rem; max-width: 480px; margin: 0 auto 1rem; } .how-step__desc { max-width: 460px; margin: 0 auto; opacity: 0.85; } .how-step__visual { width: 100%; max-width: 320px; border-radius: 20px; background: linear-gradient(160deg, var(--color-blush), var(--color-ivory)); padding: 2rem; display: flex; align-items: center; justify-content: center; } .device-mock__body--form { align-items: stretch; text-align: left; } /* sub-feature breakdown */ .how-subfeatures { display: grid; gap: 1.75rem; grid-template-columns: 1fr; max-width: 880px; margin: 3rem auto 0; text-align: center; } .how-subfeatures__item h4 { font-family: var(--font-heading); font-size: 1.05rem; color: var(--color-maroon); margin: 0 0 0.4rem; } .how-subfeatures__item p { margin: 0; font-size: 0.9rem; opacity: 0.8; } /* step 3 — flow diagram + stacked labeled blocks */ .how-step__flow-row { display: flex; flex-direction: column; gap: 2.5rem; align-items: center; margin-top: 2.5rem; } .how-step__visual--flow { max-width: 280px; } .how-flow { width: 100%; display: flex; flex-direction: column; align-items: stretch; } .how-flow__node { background: #fff; border-radius: 12px; padding: 0.8rem 1rem; font-size: 0.85rem; font-weight: 700; color: var(--color-maroon); text-align: center; box-shadow: 0 6px 16px rgba(46, 33, 31, 0.12); } .how-flow__arrow { text-align: center; color: var(--color-gold); font-size: 1rem; margin: 0.35rem 0; } .how-stacklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; text-align: left; max-width: 460px; width: 100%; } .how-stacklist__label { display: block; font-weight: 700; color: var(--color-maroon); margin-bottom: 0.3rem; } .how-stacklist__desc { margin: 0; font-size: 0.9rem; opacity: 0.85; } /* step 4 — share/export list + device mockups */ .how-share-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; text-align: left; } .how-share-list li strong { display: block; color: var(--color-maroon); margin-bottom: 0.25rem; font-size: 0.95rem; } .how-share-list li .desc { font-size: 0.88rem; opacity: 0.85; } .how-devices { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 1.5rem; flex-wrap: wrap; } .phone-mock--single { position: relative; } .browser-mock { width: 210px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px rgba(46, 33, 31, 0.2); } .browser-mock__bar { display: flex; align-items: center; gap: 0.3rem; background: var(--color-ivory); padding: 0.5rem 0.65rem; } .browser-mock__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(107, 39, 55, 0.25); } .browser-mock__url { margin-left: 0.4rem; font-size: 0.58rem; background: #fff; border-radius: 999px; padding: 0.15rem 0.55rem; color: var(--color-ink); opacity: 0.6; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .browser-mock__screen { padding: 1.5rem 1rem; text-align: center; background: linear-gradient(160deg, var(--color-blush), var(--color-ivory)); } /* ---------- closing CTA ---------- */ .how-closing { background: var(--color-ivory); padding: 4rem 1.25rem; } .how-closing__inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column-reverse; gap: 2.5rem; align-items: center; } .how-closing__text { text-align: center; } .how-closing__text h2 { font-size: 1.9rem; max-width: 420px; margin: 0 auto 1.5rem; } .how-closing__visual { position: relative; width: 220px; height: 300px; flex-shrink: 0; } /* ---------- mega footer (shared by index.html and how-it-works.html) ---------- */ .how-footer { background: #fff; padding: 3.5rem 1.25rem 2rem; } .how-footer__inner { max-width: 1080px; margin: 0 auto; display: grid; gap: 2.5rem; grid-template-columns: 1fr; } .how-footer__brand .brand { margin-bottom: 0.6rem; } .how-footer__tagline { font-family: var(--font-flourish); color: var(--color-gold); font-size: 1.3rem; margin: 0.1rem 0 0.75rem; } .how-footer__brand p { opacity: 0.75; font-size: 0.88rem; max-width: 300px; margin: 0 0 1.1rem; } .how-footer__newsletter { display: flex; gap: 0.5rem; max-width: 340px; } .how-footer__newsletter input { flex: 1; padding: 0.65rem 1rem; border-radius: 999px; border: 1.5px solid rgba(107, 39, 55, 0.2); font-family: var(--font-body); font-size: 0.85rem; background: var(--color-ivory); } .how-footer__newsletter-status { color: var(--color-maroon); font-weight: 600; font-size: 0.85rem; margin-top: 0.75rem; } .how-footer__links { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); } .how-footer__col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-maroon); margin: 0 0 0.85rem; } .how-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .how-footer__col a { text-decoration: none; color: var(--color-ink); opacity: 0.75; font-size: 0.88rem; } .how-footer__col a:hover { opacity: 1; color: var(--color-maroon); } .how-footer__bottom { max-width: 1080px; margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(107, 39, 55, 0.08); font-size: 0.75rem; opacity: 0.6; text-align: center; } /* ============ RESPONSIVE ============ */ @media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } .testimonials-grid { grid-template-columns: repeat(2, 1fr); } .packages-grid { grid-template-columns: repeat(2, 1fr); } .grid-3col { grid-template-columns: repeat(3, 1fr); } .compare-grid { grid-template-columns: repeat(2, 1fr); } .hero__title { font-size: 2.5rem; } .how-subfeatures { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } .testimonials-grid { grid-template-columns: repeat(3, 1fr); } .packages-grid { grid-template-columns: repeat(4, 1fr); } .contact-grid { grid-template-columns: 1fr 1.2fr; } .hero__title { font-size: 2.9rem; } .section__title { font-size: 2.2rem; } .hero__inner { flex-direction: row; text-align: left; gap: 3.5rem; } .hero__content { text-align: left; } .hero__title, .hero__pitch { margin-left: 0; } .hero__ctas { justify-content: flex-start; } .hero__quickform { justify-content: flex-start; margin-left: 0; } .hero__quickform-hint { text-align: left; } .feature-row { flex-direction: row; text-align: left; gap: 4rem; } .feature-row--reverse { flex-direction: row-reverse; } .feature-row__text { text-align: left; flex: 1 1 50%; } .feature-row__title, .feature-row__desc { margin-left: 0; } .feature-row__visual { flex: 1 1 50%; max-width: 320px; } .steps-timeline { flex-direction: row; gap: 0; max-width: none; } .step-card { flex-direction: column; align-items: center; text-align: center; flex: 1; gap: 1rem; } .step-card__body { padding-top: 0; max-width: 220px; } .step-card:not(:last-child)::after { left: 50%; top: 27px; bottom: auto; width: 100%; height: 2px; } .how-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: left; } .how-header__brand { justify-self: start; } .how-nav__links { justify-self: center; } .how-header__actions { justify-self: end; } .how-hero h1 { font-size: 3.1rem; } .how-step__row { flex-direction: row; text-align: left; gap: 4rem; } .how-step__row--reverse { flex-direction: row-reverse; } .how-step__text { text-align: left; flex: 1 1 50%; } .how-step__heading, .how-step__desc { margin-left: 0; } .how-step__visual { flex: 1 1 50%; max-width: 360px; } .how-step__flow-row { flex-direction: row; align-items: flex-start; gap: 4rem; justify-content: center; } .how-closing__inner { flex-direction: row; text-align: left; } .how-closing__text { text-align: left; flex: 1 1 50%; } .how-closing__text h2 { margin-left: 0; } .how-closing__visual { flex: 1 1 50%; } .how-closing__cta { margin: 0; } .how-footer__inner { grid-template-columns: 1.2fr 2fr; } .how-footer__links { grid-template-columns: repeat(3, 1fr); } }