/* ============================================ NoGilt — Coming Soon Premium editorial, beige-first design system ============================================ */ :root { --color-bg: #F4EBDD; --color-bg-alt: #EDE1CD; --color-cream: #FBF6EC; --color-ink: #241A12; --color-ink-soft: #4A3B2E; --color-brown: #2B1D12; --color-line: rgba(36, 26, 18, 0.14); --color-accent: #B5471B; --font-display: 'Bebas Neue', Impact, 'Arial Narrow Bold', 'Arial Black', sans-serif; --font-body: 'DM Sans', 'Helvetica Neue', sans-serif; --max-width: 1240px; --gutter: clamp(20px, 6vw, 72px); } /* Zoom lock: the viewport tag stops pinch-zoom, this stops double-tap-to-zoom. 'manipulation' keeps panning and scrolling working normally. */ html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } * { box-sizing: border-box; } /* Native smooth scrolling is the fallback. When Lenis is running it adds .lenis to and drives the scroll itself, so the native behaviour is switched off to stop the two fighting each other. */ html { scroll-behavior: smooth; } html.lenis, html.lenis body { height: auto; } /* Whenever Lenis is driving, native smooth scrolling must be off or the two animate the same scroll position against each other. */ html.lenis { scroll-behavior: auto !important; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* Anyone who has asked for less motion gets instant jumps instead. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Main grows to fill the viewport so the footer never floats mid-screen. min-width: 0 overrides the flex default (min-width: auto), which otherwise lets a large image's intrinsic pixel width force the whole page wider than the viewport (horizontal overflow) since percentage widths can't be resolved for the automatic minimum size calculation. */ body > main { flex: 1 0 auto; min-width: 0; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .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; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; border: none; cursor: pointer; transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .btn-cta { background: var(--color-brown); color: var(--color-cream); padding: 0.85em 1.7em; font-size: clamp(0.95rem, 1.1vw, 1.05rem); border-radius: 999px; } .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(43, 29, 18, 0.28); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(244, 235, 221, 0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-line); opacity: 0; transform: translateY(-12px); animation: reveal-down 0.7s ease forwards; } .header-inner { max-width: var(--max-width); margin: 0 auto; padding: 18px var(--gutter); display: flex; align-items: center; justify-content: space-between; } .header-logo img { height: clamp(40px, 6vw, 58px); width: auto; } .header-cta { padding: 0.75em 1.5em; font-size: clamp(0.95rem, 2.5vw, 1.05rem); font-weight: 400; letter-spacing: 0.06em; line-height: 1; white-space: nowrap; } /* ---------- Hero ---------- */ .hero { width: 100%; min-width: 0; line-height: 0; opacity: 0; animation: reveal-up 0.9s ease 0.15s forwards; } .hero-image { width: 100%; height: auto; display: block; } /* ---------- About ---------- */ .about { padding: clamp(48px, 8vw, 96px) var(--gutter); text-align: center; background: var(--color-bg); } .about-inner { max-width: 1040px; margin: 0 auto; } .eyebrow { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.75rem; color: var(--color-accent); margin: 0 0 16px; } .about-heading { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 0.94; letter-spacing: 0.01em; max-width: 900px; margin: 0 auto clamp(30px, 4.5vw, 44px); color: var(--color-brown); } .about-lead { font-family: var(--font-body); font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 500; line-height: 1.4; color: var(--color-brown); max-width: 780px; margin: 0 auto clamp(30px, 4.5vw, 44px); } .about-copy { font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.72; color: var(--color-ink-soft); max-width: 860px; margin: 0 auto; /* Long-form copy: centred text is hard to track across five paragraphs, so the body reads left-aligned while the headings stay centred. */ text-align: left; } .about-copy p { margin: 0 0 1.15em; } .about-copy p:last-child { margin-bottom: 0; } .about-closer { color: var(--color-brown); font-weight: 500; text-align: center; margin-top: clamp(24px, 3.5vw, 36px); } .about-closer em { font-style: normal; color: var(--color-accent); font-weight: 600; } [data-reveal] .about-heading, [data-reveal] .about-copy { opacity: 0; transform: translateY(24px); } .about.is-visible .about-heading { animation: reveal-up 0.8s ease forwards; } .about.is-visible .about-copy { animation: reveal-up 0.8s ease 0.15s forwards; } /* ---------- Section heading shared ---------- */ .section-heading { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 0.95; letter-spacing: 0.01em; color: var(--color-brown); margin: 0 0 clamp(28px, 4vw, 48px); text-align: center; } /* ---------- FAQ ---------- */ .faq { padding: clamp(44px, 7.5vw, 88px) var(--gutter); background: var(--color-bg-alt); } .faq-inner { max-width: 880px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--color-line); } .faq-question { width: 100%; background: none; border: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 4px; font-family: var(--font-display); text-transform: uppercase; font-weight: 400; letter-spacing: 0.01em; font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--color-brown); cursor: pointer; text-align: left; } .faq-icon { flex-shrink: 0; font-family: var(--font-body); font-size: 1.6rem; font-weight: 400; line-height: 1; transition: transform 0.35s ease; color: var(--color-accent); } .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease; opacity: 0; } .faq-answer p { margin: 0 0 26px; width: 100%; color: var(--color-ink-soft); font-size: clamp(0.95rem, 1.4vw, 1.05rem); } .faq-item.is-open .faq-answer { opacity: 1; } /* ---------- Newsletter / Footer section ---------- */ .newsletter { padding: clamp(56px, 9vw, 104px) var(--gutter) clamp(44px, 7vw, 76px); background: var(--color-brown); color: var(--color-cream); text-align: center; } .newsletter-inner { max-width: 720px; margin: 0 auto; } .newsletter-heading { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(3rem, 10vw, 6.5rem); line-height: 0.9; letter-spacing: 0.01em; margin: 0 0 24px; color: var(--color-cream); } .newsletter-copy { font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(251, 246, 236, 0.78); max-width: 480px; margin: 0 auto 32px; } .newsletter-form { width: 100%; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .newsletter-field { display: flex; align-items: stretch; gap: 12px; background: var(--color-cream); border-radius: 999px; padding: 6px; max-width: 520px; margin: 0 auto; } .newsletter-field input[type="email"] { flex: 1; min-width: 0; border: none; background: none; padding: 14px 20px; font-family: var(--font-body); font-size: 1rem; color: var(--color-ink); outline: none; } .newsletter-field input::placeholder { color: var(--color-ink-soft); } .newsletter-submit { background: var(--color-brown); color: var(--color-cream); white-space: nowrap; padding: 0 1.5em; } .form-message { margin: 18px 0 0; font-size: 0.9rem; min-height: 1.2em; color: #E7B7A2; } .form-message.is-success { color: #C7E3B8; } .newsletter-success h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(2rem, 6vw, 3.2rem); margin: 0 0 12px; } .newsletter-success p { color: rgba(251, 246, 236, 0.78); margin: 0; } /* ---------- Footer ---------- */ .site-footer { background: var(--color-brown); color: rgba(251, 246, 236, 0.6); border-top: 1px solid rgba(251, 246, 236, 0.14); padding: 22px var(--gutter) 24px; } .footer-inner { max-width: var(--max-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .footer-logo { height: 56px; width: auto; opacity: 0.92; } /* Instagram / social link */ .footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; } .footer-social { display: inline-flex; align-items: center; gap: 8px; color: var(--color-cream); text-decoration: none; font-size: 0.9rem; letter-spacing: 0.02em; padding: 6px 14px; border: 1px solid rgba(251, 246, 236, 0.28); border-radius: 999px; opacity: 0.85; transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .footer-social:hover, .footer-social:focus-visible { opacity: 1; border-color: rgba(251, 246, 236, 0.65); transform: translateY(-1px); } .footer-social .icon-instagram { flex: none; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; font-size: 0.85rem; letter-spacing: 0.02em; } .footer-links a { opacity: 0.8; transition: opacity 0.2s ease; } .footer-links a:hover { opacity: 1; } .footer-copy { font-size: 0.78rem; margin: 0; opacity: 0.6; } /* ---------- Floating Gift Button ---------- */ .gift-btn { position: fixed; right: clamp(16px, 4vw, 32px); bottom: clamp(16px, 4vw, 32px); z-index: 60; width: 54px; height: 54px; border-radius: 50%; background: var(--color-brown); color: var(--color-cream); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; box-shadow: 0 8px 24px rgba(36, 26, 18, 0.35); transition: transform 0.3s ease, box-shadow 0.3s ease; } .gift-btn:focus-visible { outline: 2px solid var(--color-cream); outline-offset: 3px; } .gift-btn:hover { transform: scale(1.08) rotate(-4deg); box-shadow: 0 12px 30px rgba(36, 26, 18, 0.45); } .gift-tooltip { position: absolute; right: 64px; bottom: 50%; transform: translateY(50%) translateX(6px); background: var(--color-ink); color: var(--color-cream); padding: 8px 14px; border-radius: 8px; font-size: 0.78rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .gift-btn:hover .gift-tooltip { opacity: 1; transform: translateY(50%) translateX(0); } /* ---------- Reveal animations ---------- */ @keyframes reveal-down { to { opacity: 1; transform: translateY(0); } } @keyframes reveal-up { to { opacity: 1; transform: translateY(0); } } /* ---------- Responsive ---------- */ @media (max-width: 640px) { .header-inner { padding: 12px var(--gutter); gap: 12px; } .header-cta { padding: 0.7em 1.1em; letter-spacing: 0.04em; } .site-footer { padding: 20px var(--gutter) 22px; } .footer-inner { gap: 10px; } .footer-logo { height: 44px; } .footer-links { gap: 10px 18px; } .newsletter-field { flex-direction: column; border-radius: 22px; padding: 10px; } .newsletter-submit { padding: 14px 0; } .gift-tooltip { display: none; } } /* ---------- Legal pages (terms, privacy) ---------- */ .legal { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 760px; width: 100%; margin: 0 auto; padding: clamp(56px, 9vw, 96px) var(--gutter) clamp(48px, 7vw, 80px); } .legal h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: 0.95; color: var(--color-brown); margin: 0 0 clamp(20px, 3vw, 32px); } .legal p { color: var(--color-ink-soft); font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.7; max-width: 640px; margin: 0 0 1.15em; } .legal p:last-child { margin-bottom: 0; } .legal a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }