/* ========================================================================== VAULT — marketing site (V2) Dark, editorial. Sora (body) + Mazarin HTF (display serif). ========================================================================== */ /* --------------------------- Display face ------------------------------- */ /* Mazarin @font-face is defined in mazarin.css (base64 data URI) so it also loads over file://, which Safari blocks for external/local font fetches. Link mazarin.css BEFORE styles.css in each page's . */ /* ------------------------------ Tokens ---------------------------------- */ :root { --bg-primary: #0D0D0D; --bg-alt: #141414; --bg-deep: #0A0A0A; --bg-card: #1A1A1A; --bg-surface: #242424; --bg-elevated: #2E2E2E; --border: #333333; --text-primary: #FFFFFF; --text-secondary: #A0A0A0; --text-muted: #666666; --accent: #E53935; --accent-muted: rgba(229, 57, 53, 0.2); --success: #4CAF50; --font-display: "Mazarin", "Playfair Display", Georgia, "Times New Roman", serif; --font-sans: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --wrap: 1200px; --nav-h: 73px; } /* ------------------------------ Reset ----------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* ------------------------------ Layout ---------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; } .section { padding-block: 110px; } .section--alt { background: var(--bg-alt); } /* #141414 — Discover, FAQ */ /* Organize: bg-primary with a 20% black overlay (near-black), per the design */ .section--tint { background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), var(--bg-primary); } /* eyebrow / display / lede --------------------------------------------- */ .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-secondary); } .eyebrow--accent { color: var(--accent); } .display { font-family: var(--font-display); font-style: italic; font-weight: 500; letter-spacing: -0.5px; line-height: 1.0; color: var(--text-primary); overflow-wrap: break-word; } h1.display { font-size: clamp(3.5rem, 7vw, 6rem); line-height: 0.9; letter-spacing: -1px; } h2.display { font-size: 4.5rem; line-height: 0.92; } /* 72px desktop */ .lede { font-size: 20px; line-height: 1.6; color: var(--text-primary); } .muted { color: var(--text-secondary); } .section-header { max-width: 700px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; } .section-header .lede { color: var(--text-secondary); font-size: 18px; } /* logo (brand wordmark image) ------------------------------------------ */ .logo { display: inline-flex; align-items: center; } .logo img { height: 22px; width: auto; } /* ------------------------------ Buttons --------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding-inline: 26px; border-radius: 14px; font-family: var(--font-sans); font-weight: 600; font-size: 15px; transition: transform .15s ease, background .15s ease, border-color .15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: #f44540; } .btn-sm { height: 42px; padding-inline: 18px; font-size: 14px; border-radius: 12px; } /* ------------------------- Store badges (real SVGs) --------------------- */ .stores { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .store-badge { display: inline-block; transition: transform .15s ease, opacity .15s ease; } .store-badge img { height: 50px; width: auto; } .store-badge:hover { transform: translateY(-2px); opacity: .9; } /* ========================================================================= NAV ========================================================================= */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(13, 13, 13, 0.72); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease, background .2s ease; } .nav.scrolled { border-bottom-color: var(--border); background: rgba(13, 13, 13, 0.9); } .nav .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); } .nav-links { display: flex; align-items: center; gap: 36px; } .nav-links > a:not(.btn) { font-size: 15px; color: var(--text-secondary); transition: color .15s ease; } .nav-links > a:not(.btn):hover { color: #fff; } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; } .nav-toggle .bar { display: block; width: 22px; height: 2px; background: #fff; position: relative; transition: transform .25s ease, opacity .2s ease; } .nav-toggle .bar::before, .nav-toggle .bar::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: #fff; transition: transform .25s ease, top .25s ease; } .nav-toggle .bar::before { top: -7px; } .nav-toggle .bar::after { top: 7px; } body.menu-open .nav-toggle .bar { background: transparent; } body.menu-open .nav-toggle .bar::before { top: 0; transform: rotate(45deg); } body.menu-open .nav-toggle .bar::after { top: 0; transform: rotate(-45deg); } .mobile-menu { display: none; } /* ========================================================================= HERO ========================================================================= */ .hero { position: relative; overflow: hidden; background: radial-gradient(120% 120% at 62% 68%, rgba(229, 56, 53, 0.62) 0%, rgba(13,13,13,0) 62%), var(--bg-primary); } .hero .wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: end; padding-block: 80px 0; /* no bottom padding — the phones bleed to the section edge */ } .hero-copy { display: flex; flex-direction: column; gap: 24px; max-width: 560px; align-self: center; padding-bottom: 56px; } .hero-copy .lede { max-width: 500px; } .hero-copy .stores { margin-top: 8px; } /* Phones sit at the bottom of the hero and bleed off the section edge (cut there). */ .hero-visual { display: flex; justify-content: center; align-self: end; } .hero-visual img { width: 100%; max-width: 640px; height: auto; margin-bottom: -56px; filter: drop-shadow(0 22px 42px rgba(0,0,0,.45)); } /* ========================================================================= PHONE MOCKUP IMAGES (exported from the Pencil design) ========================================================================= */ .mockup { width: 100%; max-width: 400px; height: auto; filter: drop-shadow(0 26px 55px rgba(0,0,0,.5)); } /* ========================================================================= FEATURE SECTIONS (two-column, alternating mockup L / R / L) ========================================================================= */ .feature .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; } .feature-copy { display: flex; flex-direction: column; gap: 20px; max-width: 520px; } .feature-copy .lede { color: var(--text-secondary); font-size: 18px; } .feature-media { display: flex; justify-content: center; } .feature--reverse .feature-media { order: -1; } /* mockup on the left */ /* checklist — bare-icon variant (Feature: Organize) */ .checklist { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; } .checklist li { display: flex; gap: 12px; align-items: center; } .checklist .ci { flex: none; display: grid; place-items: center; color: var(--text-primary); } .checklist .ci svg { width: 20px; height: 20px; } .checklist .ct { font-size: 15px; color: var(--text-primary); line-height: 1.45; } /* checklist — accent-chip variant (Feature: Price Intelligence) */ .checklist--chip { gap: 16px; } .checklist--chip li { gap: 14px; } .checklist--chip .ci { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-muted); color: var(--accent); } .checklist--chip .ci svg { width: 18px; height: 18px; } .checklist--chip .ct { font-size: 16px; } /* ========================================================================= PRICING ========================================================================= */ .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); gap: 24px; justify-content: center; margin-top: 56px; } .plan { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 8px; } .plan--featured { border-color: var(--accent); background: linear-gradient(180deg, rgba(229,57,53,.06), rgba(229,57,53,0) 40%), var(--bg-card); } .plan .ribbon { position: absolute; top: 18px; right: 18px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 4px 10px; border-radius: 999px; } .plan .pname { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-secondary); } .plan .pprice { font-size: 40px; font-weight: 700; } .plan .pprice span { font-size: 15px; font-weight: 400; color: var(--text-secondary); } .plan .ptrial { font-size: 13px; color: var(--accent); min-height: 20px; } .plan .pdivider { height: 1px; background: var(--border); margin: 12px 0 4px; } .plan ul { display: flex; flex-direction: column; gap: 12px; } .plan li { display: flex; gap: 10px; font-size: 14px; color: var(--text-primary); } .plan li .ck { color: var(--success); flex: none; } .plan--featured li .ck { color: var(--accent); } /* ========================================================================= FAQ ========================================================================= */ .faq { max-width: 860px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 16px; } .faq details { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 4px 28px; transition: border-color .2s ease; } .faq details[open] { border-color: var(--accent); } .faq summary { list-style: none; cursor: pointer; padding: 22px 0; font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 28px; font-weight: 400; line-height: 1; color: var(--text-muted); } .faq details[open] summary::after { content: "\2212"; color: var(--accent); } .faq details p { padding: 0 0 22px; color: var(--text-secondary); font-size: 16px; line-height: 1.55; } /* ========================================================================= FINAL CTA ========================================================================= */ .final-cta { text-align: center; background: radial-gradient(120% 130% at 50% 100%, rgba(229,57,53,.18) 0%, rgba(20,20,20,0) 55%), var(--bg-alt); } .final-cta .wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; } .final-cta h2 { font-size: clamp(3rem, 8vw, 6rem); } .final-cta .lede { color: var(--text-secondary); font-size: clamp(1.1rem, 2.2vw, 1.5rem); max-width: 560px; } .final-cta .cta-note { color: var(--accent); font-size: 13px; } /* ========================================================================= FOOTER ========================================================================= */ .footer { background: var(--bg-deep); padding-block: 72px 40px; } .footer .wrap { display: flex; flex-direction: column; gap: 48px; } .footer-top { display: flex; justify-content: space-between; gap: 48px; } .footer-brand { width: 320px; flex: none; } .footer-brand .logo { margin-bottom: 18px; } .footer-brand .logo img { height: 24px; } .footer-brand p { color: var(--text-secondary); font-size: 14px; max-width: 280px; } .footer-links { display: flex; gap: 80px; } .footer .col h4 { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-primary); font-weight: 700; margin-bottom: 16px; } .footer .col a { display: block; color: var(--text-secondary); font-size: 14px; padding: 6px 0; transition: color .15s ease; } .footer .col a:hover { color: #fff; } .footer-divider { height: 1px; background: var(--border); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--text-muted); font-size: 13px; } .footer-bottom .made { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--text-muted); } .footer-disclaimer { color: var(--text-muted); font-size: 12px; } /* ========================================================================= LEGAL PAGES ========================================================================= */ .legal { padding-block: 72px 96px; } .legal .wrap { max-width: 820px; } .legal h1.display { font-size: clamp(2.5rem, 6vw, 4rem); } .legal .updated { color: var(--text-muted); font-size: 14px; margin-top: 10px; } .legal .intro { color: var(--text-secondary); font-size: 17px; line-height: 1.7; margin-top: 24px; } .legal-section { margin-top: 40px; } .legal-section h2 { font-family: var(--font-sans); font-size: 20px; font-weight: 700; margin-bottom: 12px; } .legal-section p { color: var(--text-secondary); font-size: 15px; line-height: 1.75; } .legal-section a { color: var(--accent); } .legal-section ol { color: var(--text-secondary); font-size: 15px; line-height: 1.75; margin: 12px 0 0; padding-left: 22px; } .legal-section li { margin-bottom: 8px; } .legal-section li strong { color: var(--text-primary); } /* ========================================================================= SCROLL REVEAL ========================================================================= */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ========================================================================= RESPONSIVE — Tablet (641–991px, design ref 768) Hero stays 2-col; Organize + Discover (the mockup-left / .feature--reverse sections) become centered-stacked; Drops stays 2-col. Nav stays full. ========================================================================= */ @media (max-width: 991px) { .section { padding-block: 84px; } h1.display { font-size: 3.5rem; } /* 56 */ h2.display { font-size: 3rem; } /* 48 */ .final-cta h2 { font-size: clamp(3rem, 8vw, 4.5rem); } .hero .wrap { gap: 40px; grid-template-columns: 1fr 1fr; padding-block: 64px 0; } .hero-copy { padding-bottom: 40px; } .hero-copy .lede { font-size: 18px; } .hero-visual img { max-width: 340px; margin-bottom: -48px; } /* single collection phone, bleeds at bottom */ /* centered features (Organize, Discover) */ .feature--reverse .wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 40px; } .feature--reverse .feature-copy { align-items: center; max-width: 620px; } .feature--reverse .feature-media { order: 0; } .feature--reverse .checklist { text-align: left; } .mockup { max-width: 360px; } /* footer: brand stacked over a row of link columns */ .footer-top { flex-direction: column; gap: 32px; } .footer-brand { width: auto; } .footer-links { gap: 64px; } } /* ========================================================================= RESPONSIVE — Mobile (<= 640px, design ref 390) Everything stacks centered; nav → slide-down menu. ========================================================================= */ @media (max-width: 640px) { :root { --nav-h: 61px; } .wrap { padding-inline: 20px; } .section { padding-block: 64px; } h1.display { font-size: 3.5rem; } /* 56 */ h2.display { font-size: 3.375rem; } /* 54 */ .final-cta h2 { font-size: 3.5rem; } /* nav → hamburger */ .nav-links { display: none; } .nav-toggle { display: inline-flex; } /* mobile menu (design: "Mobile Menu Open") */ .mobile-menu { display: flex; flex-direction: column; justify-content: space-between; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 90; background: radial-gradient(150% 80% at 50% 100%, rgba(229,57,53,.15) 0%, rgba(13,13,13,0) 60%), var(--bg-primary); padding: 8px 0 32px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; } body.menu-open .mobile-menu { transform: none; opacity: 1; pointer-events: auto; } body.menu-open { overflow: hidden; } .mm-links { display: flex; flex-direction: column; } .mm-links a { padding: 22px 24px; font-size: 26px; font-weight: 500; color: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .mm-arrow { color: var(--text-muted); width: 22px; height: 22px; flex: none; } .mm-bottom { padding: 24px; display: flex; flex-direction: column; gap: 16px; } .mm-getapp { width: 100%; height: 56px; border-radius: 12px; } .mm-login { text-align: center; color: var(--text-secondary); font-size: 15px; } .mm-login a { color: var(--accent); font-weight: 600; } /* hero → stacked, centered (no bleed on mobile) */ .hero .wrap { grid-template-columns: 1fr; align-items: center; text-align: center; padding-block: 48px 56px; gap: 40px; } .hero-copy { max-width: 620px; margin-inline: auto; align-items: center; align-self: auto; padding-bottom: 0; } .hero-visual { align-self: auto; } .hero-copy .lede, .lede { font-size: 16px; } .hero-visual img { max-width: 320px; margin-bottom: 0; } /* all features stacked, centered (incl. Drops) */ .feature .wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 36px; } .feature-copy { align-items: center; max-width: 600px; } .feature-media { order: 0; } .feature-copy .lede, .section-header .lede { font-size: 16px; } .checklist { text-align: left; } .mockup { max-width: 320px; } /* pricing */ .plans { grid-template-columns: 1fr; gap: 20px; max-width: 420px; margin-inline: auto; } .plan { padding: 26px; } /* faq */ .faq { margin-top: 40px; } /* footer: brand over stacked link columns */ .footer-top { flex-direction: column; gap: 32px; } .footer-brand { width: auto; } .footer-links { flex-direction: column; gap: 28px; } .footer-bottom { flex-direction: column; align-items: flex-start; } .footer-bottom .made { font-size: 20px; } }