/* =========================================================== Project Pan Journey — website styles Brand: Playfair Display + DM Sans, pastel + charcoal palette Three full-page directions via [data-direction] on : editorial (default) · minimal · boutique =========================================================== */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap'); :root { /* brand palette */ --mint:#cae4d3; --peach:#fed9bf; --lavender:#e7e0e9; --yellow:#fefcd1; --yellow-lt:#fffef0; --blue:#d0d6e7; --beige:#fbf6f1; --charcoal:#2e2e2e; --white:#fff; --purple:#6b5c8e; --purple-dk:#574a73; --plum:#2a2342; /* semantic — overridden per direction */ --bg:var(--beige); --surface:#ffffff; --text:var(--charcoal); --muted:#76707a; --accent:var(--purple); --accent-ink:#fff; --line:rgba(46,46,46,.10); --radius:26px; --radius-sm:16px; --section-y:120px; --shadow:0 30px 70px -30px rgba(46,46,46,.35); --shadow-soft:0 18px 50px -24px rgba(46,46,46,.28); --maxw:1180px; --serif:'Playfair Display',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif; /* hero / section tints */ --hero-bg:radial-gradient(120% 130% at 78% 8%, var(--lavender) 0%, rgba(231,224,233,0) 52%), radial-gradient(120% 120% at 8% 92%, var(--peach) 0%, rgba(254,217,191,0) 50%), var(--beige); --stats-bg:var(--plum); --stats-text:#fff; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--sans); color:var(--text); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; font-size:18px; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px} /* serif display */ h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.04;letter-spacing:-.01em;color:var(--text)} .eyebrow{ font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.16em; text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:9px; } .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)} /* ---------- buttons / store badges ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px;font-family:var(--sans); font-weight:600;font-size:16px;padding:15px 26px;border-radius:999px; background:var(--accent);color:var(--accent-ink);border:1px solid transparent; cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease; box-shadow:0 12px 28px -14px rgba(107,92,142,.7); } .btn:hover{transform:translateY(-2px)} .btn--ghost{background:transparent;color:var(--text);border-color:var(--line);box-shadow:none} .btn--ghost:hover{border-color:var(--accent);color:var(--accent)} .store-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .store-badge{ display:inline-flex;align-items:center;gap:12px;background:var(--charcoal);color:#fff; padding:12px 20px;border-radius:14px;transition:transform .18s ease,opacity .2s; } .store-badge:hover{transform:translateY(-2px);opacity:.92} .store-badge svg{width:24px;height:24px;flex:none;fill:#fff} .store-badge>span{display:inline-flex;flex-direction:column;justify-content:center} .store-badge br{display:none} .store-badge .sb-sm{display:block;font-size:11px;letter-spacing:.04em;opacity:.82;line-height:1.2;white-space:nowrap} .store-badge .sb-lg{display:block;font-size:17px;font-weight:600;line-height:1.2;font-family:var(--sans);white-space:nowrap} /* ---------- phone frame ---------- */ .device{ position:relative;width:300px;aspect-ratio:1179/2556;border-radius:13% / 6%; background:#1c1a1f;padding:11px;box-shadow:var(--shadow); flex:none; } .device::after{ /* subtle edge sheen */ content:"";position:absolute;inset:0;border-radius:inherit; box-shadow:inset 0 0 0 2px rgba(255,255,255,.06);pointer-events:none; } .device .screen{width:100%;height:100%;border-radius:9.5% / 4.4%;overflow:hidden;background:var(--beige)} .device .screen img{width:100%;height:100%;object-fit:cover;object-position:top center} /* ==================================================================== NAV ==================================================================== */ .nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(12px); background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px} .brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:700;font-size:20px} .brand img{width:38px;height:38px;border-radius:11px;box-shadow:0 4px 12px -6px rgba(46,46,46,.5)} .nav-links{display:flex;gap:34px;font-size:15px;font-weight:500} .nav-links a{color:var(--muted);transition:color .15s} .nav-links a:hover{color:var(--text)} .nav-actions{display:flex;align-items:center;gap:16px} .nav-toggle{display:none;background:none;border:0;cursor:pointer} /* ==================================================================== HERO ==================================================================== */ .hero{background:var(--hero-bg);position:relative;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center; padding:96px 0 104px} .hero-title{font-size:clamp(44px,5.6vw,76px);margin:22px 0 0} .hero-title em{font-style:italic;color:var(--accent)} .hero-sub{font-size:20px;color:var(--muted);margin:24px 0 34px;max-width:30ch} .hero-cta{display:flex;flex-direction:column;gap:18px} .hero-note{font-size:14px;color:var(--muted)} .hero-stage{display:flex;justify-content:center;position:relative} .hero-stage .device{width:330px} .hero-blob{position:absolute;inset:auto;width:380px;height:380px;border-radius:50%; background:var(--mint);filter:blur(8px);opacity:.5;z-index:0;right:-40px;top:30px} .hero-stage .device{position:relative;z-index:1} /* ==================================================================== STATS ==================================================================== */ .stats{background:var(--stats-bg);color:var(--stats-text)} .stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:64px 0} .stat{text-align:center;padding:8px} .stat-num{font-family:var(--serif);font-weight:700;font-size:clamp(42px,5vw,64px);line-height:1} .stat-num span{color:var(--peach)} .stat-label{font-size:14px;letter-spacing:.04em;color:rgba(255,255,255,.7);margin-top:12px} .stats-lead{grid-column:1/-1;text-align:center;margin-bottom:14px} .stats-lead .eyebrow{color:var(--peach)} .stats-lead .eyebrow::before{background:var(--peach)} /* ==================================================================== STEPS — how it works ==================================================================== */ .section{padding:var(--section-y) 0} .sec-head{max-width:680px;margin:0 auto 64px;text-align:center} .sec-head h2{font-size:clamp(34px,4.4vw,54px);margin:18px 0 0} .sec-head p{color:var(--muted);font-size:19px;margin-top:18px} .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:30px 26px 28px;display:flex;flex-direction:column;gap:14px} .step-num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center; font-family:var(--serif);font-weight:700;font-size:19px;background:var(--lavender);color:var(--purple-dk)} .step h3{font-size:22px} .step p{color:var(--muted);font-size:15.5px;line-height:1.55} .step:nth-child(2) .step-num{background:var(--mint);color:#3c6b4f} .step:nth-child(3) .step-num{background:var(--peach);color:#a6571f} .step:nth-child(4) .step-num{background:var(--blue);color:#41507e} /* ==================================================================== FEATURES — alternating rows ==================================================================== */ .feature-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center; padding:60px 0} .feature-row--rev .feature-media{order:2} .feature-media{display:flex;justify-content:center;position:relative} .feature-media .glow{position:absolute;width:320px;height:320px;border-radius:50%; filter:blur(10px);opacity:.55;z-index:0} .feature-media .device{position:relative;z-index:1;width:288px} .feature-tag{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);margin-bottom:16px} .feature-title{font-size:clamp(30px,3.6vw,44px);margin-bottom:20px} .feature-text{color:var(--muted);font-size:18px;max-width:42ch} .feature-list{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px} .feature-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--text)} .feature-list li::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;margin-top:2px; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat} /* feature media tints */ .fm-home .glow{background:var(--lavender)} .fm-add .glow{background:var(--mint)} .fm-pan .glow{background:var(--peach)} .fm-coll .glow{background:var(--mint)} .fm-stat .glow{background:var(--blue)} /* ==================================================================== QUOTES ==================================================================== */ .quotes{background:var(--surface)} .quotes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .quote{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px; display:flex;flex-direction:column;gap:22px} .quote .stars{color:var(--accent);font-size:15px;letter-spacing:3px} .quote .stars .star-empty{opacity:.28} .quote-text{font-family:var(--serif);font-size:21px;line-height:1.4;font-weight:500} .quote-author{display:flex;align-items:center;gap:13px;margin-top:auto} .quote-ava{width:42px;height:42px;border-radius:50%;display:grid;place-items:center; font-family:var(--serif);font-weight:700;color:#fff;font-size:18px} .quote-author .qa-name{font-weight:600;font-size:15px} .quote-author .qa-meta{font-size:13px;color:var(--muted)} /* ==================================================================== FINAL CTA ==================================================================== */ .cta-band{position:relative;overflow:hidden; background:radial-gradient(110% 140% at 85% 15%,var(--peach),rgba(254,217,191,0) 55%), radial-gradient(110% 130% at 10% 90%,var(--lavender),rgba(231,224,233,0) 55%), var(--beige)} .cta-inner{text-align:center;padding:104px 0} .cta-inner h2{font-size:clamp(36px,5vw,60px);margin-bottom:22px} .cta-inner p{color:var(--muted);font-size:20px;max-width:46ch;margin:0 auto 34px} .cta-inner .store-row{justify-content:center} /* ==================================================================== FOOTER ==================================================================== */ .footer{background:var(--plum);color:#cfcad2} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:72px 0 40px} .footer-brand .brand{color:#fff;margin-bottom:18px} .footer-brand p{font-size:15px;color:#9d97a3;max-width:34ch} .footer-col h4{font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase; color:#fff;margin-bottom:18px;font-weight:600} .footer-col a{display:block;font-size:15px;color:#aaa3b0;padding:7px 0;transition:color .15s} .footer-col a:hover{color:#fff} .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:24px 0; display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#8e8895;flex-wrap:wrap;gap:12px} /* generic page header for sub-pages */ .page-hero{background:var(--hero-bg);padding:92px 0 76px;text-align:center} .page-hero h1{font-size:clamp(40px,5.4vw,68px);margin:18px 0 0} .page-hero p{color:var(--muted);font-size:20px;max-width:50ch;margin:22px auto 0} /* prose for privacy/about */ .prose{max-width:760px;margin:0 auto} .prose h2{font-size:30px;margin:48px 0 16px} .prose h3{font-size:21px;margin:30px 0 10px;font-family:var(--sans);font-weight:700} .prose h4{font-size:16px;margin:20px 0 6px;font-family:var(--sans);font-weight:700;color:var(--purple-dk)} .prose p,.prose li{color:var(--text);font-size:17px;line-height:1.72;margin-bottom:14px} .prose ul{padding-left:22px;margin-bottom:14px} .prose .muted{color:var(--muted);font-size:15px} /* ==================================================================== DIRECTION B — MINIMAL crisp white, hairlines, restrained type, mint accent, more air ==================================================================== */ [data-direction="minimal"]{ --bg:#ffffff; --surface:#fafafa; --accent:#3c6b4f; --accent-ink:#fff; --line:rgba(46,46,46,.12); --radius:14px; --radius-sm:10px; --section-y:128px; --shadow:0 24px 60px -34px rgba(46,46,46,.4); --maxw:1120px; --hero-bg:#ffffff; --stats-bg:#fafafa; --stats-text:var(--charcoal); } [data-direction="minimal"] h1,[data-direction="minimal"] h2,[data-direction="minimal"] h3{font-weight:600;letter-spacing:-.02em} [data-direction="minimal"] .hero{border-bottom:1px solid var(--line)} [data-direction="minimal"] .hero-blob{display:none} [data-direction="minimal"] .btn{box-shadow:none} [data-direction="minimal"] .stat-num span{color:var(--accent)} [data-direction="minimal"] .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} [data-direction="minimal"] .stat-label{color:var(--muted)} [data-direction="minimal"] .stats-lead .eyebrow,[data-direction="minimal"] .stats-lead .eyebrow::before{color:var(--accent);background:var(--accent)} [data-direction="minimal"] .stats-lead .eyebrow::before{background:var(--accent)} [data-direction="minimal"] .step{border-radius:var(--radius);box-shadow:none} [data-direction="minimal"] .step-num{background:#f0f0f0!important;color:var(--charcoal)!important} [data-direction="minimal"] .device{background:#2a282d;box-shadow:var(--shadow)} [data-direction="minimal"] .feature-media .glow{display:none} [data-direction="minimal"] .cta-band{background:#fafafa;border-top:1px solid var(--line)} /* ==================================================================== DIRECTION C — BOUTIQUE dramatic: charcoal + cream alternation, bolder type, chunky rounds, color-blocked feature rows ==================================================================== */ [data-direction="boutique"]{ --bg:#f3ece3; --surface:#ffffff; --accent:#2e2e2e; --accent-ink:#fff; --line:rgba(46,46,46,.12); --radius:34px; --radius-sm:20px; --section-y:128px; --maxw:1220px; --hero-bg:linear-gradient(180deg,var(--charcoal),#3a363f); --stats-bg:var(--peach); --stats-text:var(--charcoal); } [data-direction="boutique"] h1,[data-direction="boutique"] h2,[data-direction="boutique"] h3{font-weight:800} [data-direction="boutique"] .hero{color:#fff} [data-direction="boutique"] .hero-title,[data-direction="boutique"] .hero .eyebrow{color:#fff} [data-direction="boutique"] .hero-title em{color:var(--peach)} [data-direction="boutique"] .hero .eyebrow::before{background:var(--peach)} [data-direction="boutique"] .hero-sub{color:rgba(255,255,255,.78)} [data-direction="boutique"] .hero-note{color:rgba(255,255,255,.6)} [data-direction="boutique"] .hero-blob{background:var(--purple);opacity:.45} [data-direction="boutique"] .btn{background:#fff;color:var(--charcoal);box-shadow:none} [data-direction="boutique"] .hero .store-badge{background:#fff;color:var(--charcoal)} [data-direction="boutique"] .hero .store-badge svg{fill:var(--charcoal)} [data-direction="boutique"] .stat-num span{color:var(--purple)} [data-direction="boutique"] .stat-label{color:rgba(46,46,46,.62)} [data-direction="boutique"] .stats-lead .eyebrow,[data-direction="boutique"] .stats-lead .eyebrow::before{color:var(--purple-dk)} [data-direction="boutique"] .stats-lead .eyebrow::before{background:var(--purple-dk)} [data-direction="boutique"] .step{border:0} [data-direction="boutique"] .step:nth-child(1){background:var(--lavender)} [data-direction="boutique"] .step:nth-child(2){background:var(--mint)} [data-direction="boutique"] .step:nth-child(3){background:var(--peach)} [data-direction="boutique"] .step:nth-child(4){background:var(--blue)} [data-direction="boutique"] .step-num{background:rgba(255,255,255,.6)!important;color:var(--charcoal)!important} /* color-blocked feature rows */ [data-direction="boutique"] .feature-row{border-radius:var(--radius);padding:64px 56px;margin:14px 0} [data-direction="boutique"] .feature-row.fb-1{background:var(--lavender)} [data-direction="boutique"] .feature-row.fb-2{background:var(--mint)} [data-direction="boutique"] .feature-row.fb-3{background:var(--peach)} [data-direction="boutique"] .feature-row.fb-4{background:var(--yellow)} [data-direction="boutique"] .feature-row.fb-5{background:var(--blue)} [data-direction="boutique"] .feature-media .glow{display:none} [data-direction="boutique"] .feature-tag{color:var(--purple-dk)} [data-direction="boutique"] .feature-list li::before{background-color:var(--charcoal)} [data-direction="boutique"] .quotes{background:var(--charcoal)} [data-direction="boutique"] .quotes .sec-head h2,[data-direction="boutique"] .quotes .eyebrow{color:#fff} [data-direction="boutique"] .quote{background:#3a363f;border-color:rgba(255,255,255,.1);color:#eee} [data-direction="boutique"] .quote-text{color:#fff} [data-direction="boutique"] .quote-author .qa-meta{color:#aaa3b0} [data-direction="boutique"] .cta-band{background:var(--charcoal)} [data-direction="boutique"] .cta-inner h2{color:#fff} [data-direction="boutique"] .cta-inner p{color:rgba(255,255,255,.72)} /* ==================================================================== RESPONSIVE ==================================================================== */ /* Keep decorative blobs (e.g. .hero-blob, offset past the right edge) from widening the page and shifting centered content on small screens. `clip` (not `hidden`) preserves the sticky nav. */ html,body{overflow-x:clip} @media (max-width:980px){ body{font-size:17px} .hero-grid{grid-template-columns:1fr;gap:48px;padding:64px 0 72px;text-align:center} .hero-sub{margin-left:auto;margin-right:auto} .hero-cta{align-items:center} .store-row{justify-content:center} .stats-inner{grid-template-columns:repeat(2,1fr);gap:36px 24px} .steps-grid{grid-template-columns:repeat(2,1fr)} .feature-row,.feature-row--rev .feature-media{grid-template-columns:1fr;gap:36px} .feature-row--rev .feature-media{order:0} .feature-row{text-align:center;padding:46px 0} .feature-media{order:-1} .feature-text{margin-left:auto;margin-right:auto} .feature-list{align-items:flex-start;max-width:300px;margin-left:auto;margin-right:auto} .quotes-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto} .footer-grid{grid-template-columns:1fr 1fr;gap:32px} [data-direction="boutique"] .feature-row{padding:44px 28px} } @media (max-width:640px){ .wrap{padding:0 22px} .nav-links{display:none} .nav-links.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column; gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 22px 18px} .nav-links.open a{padding:13px 0;border-bottom:1px solid var(--line)} .nav-toggle{display:block} .nav-actions .btn{display:none} .stats-inner{grid-template-columns:1fr 1fr;gap:30px 18px;padding:48px 0} .steps-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} /* keep the phone mockups comfortably sized on a phone screen — smaller so the screenshots have generous breathing room instead of filling the viewport */ .hero-stage .device{width:210px} .feature-media .device{width:200px} .feature-media .glow{width:225px;height:225px;left:50%;top:50%;transform:translate(-50%,-50%)} .hero-blob{width:300px;height:300px;right:-10px} }