/* ============================================================ Divly — shared stylesheet (all pages) Aligned to the app's brand kit v5 (apps/mobile/src/lib/theme.ts): fonts Nunito 900 (wordmark) · Fraunces (display) · Inter 400/500 (all UI, capped at 500); brand #2563FF + teal/purple/pink accents; white/near-black surfaces. Light + dark via [data-theme] on . ============================================================ */ :root{ /* Surfaces — app light palette */ --bg:#FFFFFF; --bg2:#FAFAFB; --surface:#FFFFFF; --ink:#0E1726; --muted:#6B7280; --line:rgba(14,23,38,.22); /* Brand — locked #2563FF; accents mirror the app rings */ --brand:#2563FF; --brand-deep:#1E4FD6; /* True brand blue for primary button fills — constant across light/dark so dark-mode primary buttons match the app (the lightened --brand above is kept for text/links, where contrast on dark needs it). */ --brand-solid:#2563FF; --brand-solid-deep:#1E4FD6; --brand-soft:rgba(37,99,255,.12); --brand-soft2:rgba(37,99,255,.22); --teal:#57DCBE; --purple:#9B30FF; --pink:#FF3D7F; --ok:#0B7D61; /* dark teal — AA on white for checkmarks */ --on-brand:#FFFFFF; /* text on a brand-blue fill (light) */ --shadow:0 4px 12px rgba(14,23,38,.06); --shadow-lg:0 12px 30px rgba(14,23,38,.10); --r:18px; --font-display:'Fraunces',Georgia,'Times New Roman',serif; --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-logo:'Nunito',var(--font-body); --pop:linear-gradient(120deg,var(--brand),var(--purple)); } [data-theme="dark"]{ --bg:#000000; --bg2:#0B0B10; --surface:#14141A; --ink:#FFFFFF; --muted:#9A9AA3; --line:#2A2A33; --brand:#6690FF; --brand-deep:#7AA2FF; --brand-soft:rgba(102,144,255,.16); --brand-soft2:rgba(102,144,255,.30); --ok:#57DCBE; /* teal — 12:1 on the dark surface */ --on-brand:#0A0E17; /* dark text on the lightened brand fill */ --shadow:none; --shadow-lg:0 20px 50px rgba(0,0,0,.55); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]):not([data-theme="dark"]){ --bg:#000000; --bg2:#0B0B10; --surface:#14141A; --ink:#FFFFFF; --muted:#9A9AA3; --line:#2A2A33; --brand:#6690FF; --brand-deep:#7AA2FF; --brand-soft:rgba(102,144,255,.16); --brand-soft2:rgba(102,144,255,.30); --ok:#57DCBE; --on-brand:#0A0E17; --shadow:none; --shadow-lg:0 20px 50px rgba(0,0,0,.55); } } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:var(--brand);text-decoration:none} a:hover{color:var(--brand-deep);text-decoration:underline} :focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px} /* Display headings = Fraunces upright (the app's Brand-surface role); h3/h4 = Inter (functional) */ h1,h2{font-family:var(--font-display);font-weight:400;line-height:1.1;margin:0 0 .5em;text-wrap:balance;letter-spacing:-.01em} h1{font-size:clamp(2.4rem,5.4vw,3.6rem)} h2{font-size:clamp(1.8rem,3.4vw,2.5rem)} h3,h4{font-family:var(--font-body);font-weight:500;line-height:1.2;margin:0 0 .5em} h3{font-size:1.2rem;letter-spacing:-.01em} p{margin:0 0 1em;text-wrap:pretty} ul{padding-left:1.2em} li{margin-bottom:.4em} strong{font-weight:500} .container{max-width:1120px;margin:0 auto;padding:0 24px} .section{padding:84px 0} .section-alt{background:var(--bg2)} .eyebrow{display:inline-block;font-size:.8rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:14px} .lead{font-size:1.2rem;color:var(--muted);max-width:640px} .center{text-align:center} .center .lead{margin-left:auto;margin-right:auto} .muted{color:var(--muted)} .small{font-size:.9rem} /* ---- Buttons: rounded pills (brand requirement) ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:14px 28px;font-weight:500;font-size:1rem;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;text-decoration:none;white-space:nowrap;font-family:var(--font-body)} .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn-primary{background:var(--brand-solid);color:#fff} .btn-primary:hover{background:var(--brand-solid-deep);color:#fff;box-shadow:0 8px 24px rgba(37,99,255,.30)} .btn-ghost{border-color:var(--line);color:var(--ink);background:var(--surface)} .btn-ghost:hover{border-color:var(--brand);color:var(--brand)} .btn-sm{padding:10px 20px;font-size:.92rem} .btn-lg{padding:17px 34px;font-size:1.08rem} /* ---- Header / nav ---- */ .site-header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .nav-row{display:flex;align-items:center;gap:28px;height:68px} /* Wordmark = Nunito 900 lowercase "divly" (the app Wordmark component) */ .logo{display:flex;align-items:center;gap:9px;font-family:var(--font-logo);font-weight:900;font-size:1.4rem;letter-spacing:-.03em;text-transform:lowercase;color:var(--brand)} .logo:hover{text-decoration:none;color:var(--brand)} .logo-mark{width:24px;height:24px;border-radius:50%;background:conic-gradient(var(--brand) 0 72%,var(--brand-soft2) 72% 100%);position:relative;flex:none} .logo-mark::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--bg)} .nav{display:flex;gap:24px;margin-left:auto} .nav a{color:var(--muted);font-weight:500;font-size:.97rem} .nav a:hover{color:var(--ink);text-decoration:none} .nav a[aria-current="page"]{color:var(--brand);font-weight:500} .nav-actions{display:flex;align-items:center;gap:12px} .theme-toggle{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center} .theme-toggle:hover{border-color:var(--brand)} .tt-dot{width:16px;height:16px;border-radius:50%;background:linear-gradient(120deg,var(--ink) 50%,transparent 50%);border:2px solid var(--ink)} .nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer} .nav-toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px} @media (max-width:840px){ .nav-toggle{display:flex} .nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 24px 16px} .nav a{padding:12px 0;font-size:1.05rem} .nav-open .nav{display:flex} .nav-actions .btn{display:none} } /* ---- Breadcrumb (inner pages, mirrors BreadcrumbList JSON-LD) ---- */ .breadcrumb{padding:18px 24px 0;font-size:.88rem;color:var(--muted)} .breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0} .breadcrumb li+li::before{content:"/";margin-right:6px;color:var(--line)} .breadcrumb a{color:var(--muted)} .breadcrumb [aria-current]{color:var(--ink);font-weight:500} /* ---- Hero ---- */ .hero{padding:76px 0 60px} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center} @media (max-width:840px){.hero-grid{grid-template-columns:1fr}} .store-badges{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 14px} .store-badge{display:inline-flex;align-items:center;gap:10px;border-radius:14px;padding:10px 18px;background:var(--ink);color:var(--bg);font-weight:500;font-size:.95rem;line-height:1.2} .store-badge:hover{color:var(--bg);text-decoration:none;opacity:.88} .store-badge .small{display:block;font-weight:400;font-size:.7rem;opacity:.75} .trust-line{font-size:.9rem;color:var(--muted)} /* ---- Phone mockup + image placeholders ---- */ .phone{width:min(300px,80%);margin:0 auto;aspect-ratio:9/19;border-radius:42px;border:10px solid var(--ink);background:var(--surface);box-shadow:var(--shadow-lg);overflow:hidden} .placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;background:repeating-linear-gradient(-45deg,var(--brand-soft),var(--brand-soft) 12px,var(--surface) 12px,var(--surface) 24px)} .placeholder span{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--brand-deep);background:var(--surface);padding:6px 12px;border-radius:999px;border:1px dashed var(--brand)} .placeholder-box{border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;box-shadow:var(--shadow)} /* ---- Cards / grids ---- */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} @media (max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow)} .card h3{margin-top:14px} .card p:last-child{margin-bottom:0} .icon-chip{width:46px;height:46px;border-radius:14px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;color:var(--brand);font-weight:500;font-size:1.15rem;font-family:var(--font-body)} /* Feature rows (alternating) */ .feature-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:44px 0} .feature-row.flip>.feature-media{order:2} @media (max-width:840px){.feature-row{grid-template-columns:1fr;gap:28px}.feature-row.flip>.feature-media{order:0}} /* Rings visual — mirrors the app's real rings: Tasks blue, Habits teal, Lists purple */ .rings{display:flex;gap:18px;align-items:center;justify-content:center;padding:34px 0} .ring{border-radius:50%;position:relative;flex:none} .ring::after{content:"";position:absolute;border-radius:50%;background:var(--surface);inset:11px} .ring-a{width:96px;height:96px;background:conic-gradient(var(--brand) 0 78%,var(--brand-soft2) 78% 100%)} .ring-b{width:72px;height:72px;background:conic-gradient(var(--teal) 0 62%,var(--brand-soft) 62% 100%)} .ring-b::after{inset:9px} .ring-c{width:56px;height:56px;background:conic-gradient(var(--purple) 0 88%,var(--brand-soft) 88% 100%)} .ring-c::after{inset:8px} /* Steps */ .step-num{width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center;font-weight:500;font-family:var(--font-body)} /* Quotes / social proof */ .quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;font-size:1.02rem} .quote footer{margin-top:14px;color:var(--muted);font-size:.9rem} .stars{color:var(--brand);letter-spacing:2px;font-size:.9rem} /* Ask Divly highlight */ .ask-panel{background:var(--brand-soft);border-radius:calc(var(--r) + 8px);padding:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center} @media (max-width:840px){.ask-panel{grid-template-columns:1fr;padding:32px}} .chat-demo{background:var(--surface);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px} .bubble{border-radius:18px;padding:12px 16px;font-size:.95rem;max-width:88%} .bubble-user{background:var(--brand);color:var(--on-brand);align-self:flex-end;border-bottom-right-radius:6px} .bubble-ai{background:var(--bg2);align-self:flex-start;border-bottom-left-radius:6px} .bubble-ai ul{margin:6px 0 0;padding-left:1.1em} .bubble-ai li{margin-bottom:2px} /* Pricing */ .price-card{background:var(--surface);border:2px solid var(--brand);border-radius:calc(var(--r) + 6px);padding:44px;max-width:460px;margin:0 auto;box-shadow:var(--shadow-lg);text-align:center} .price{font-family:var(--font-body);font-size:3.2rem;font-weight:500;letter-spacing:-.02em} .price sup{font-size:1.3rem;font-weight:500} .price-note{color:var(--muted);margin-top:-6px} .check-list{list-style:none;padding:0;text-align:left;margin:26px 0} .check-list li{padding-left:30px;position:relative;margin-bottom:10px} .check-list li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:500} /* FAQ —
keeps answers in DOM for crawlers & AI engines */ .faq{max-width:760px;margin:0 auto} .faq details{border-bottom:1px solid var(--line);padding:6px 0} .faq summary{cursor:pointer;font-weight:500;font-size:1.06rem;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;font-family:var(--font-body)} .faq summary::after{content:"+";color:var(--brand);font-size:1.3rem;flex:none} .faq details[open] summary::after{content:"–"} .faq summary::-webkit-details-marker{display:none} .faq .faq-a{padding:0 0 18px;color:var(--muted)} /* Definition block ("What is Divly?") — extractable for AI engines */ .definition{background:var(--surface);border-left:none;border:1px solid var(--line);border-radius:var(--r);padding:30px 34px;box-shadow:var(--shadow);max-width:820px;margin:0 auto} .definition p{margin-bottom:0;font-size:1.08rem} /* Comparison table */ .compare{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);font-size:.97rem} .compare th,.compare td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} .compare th{background:var(--bg2);font-family:var(--font-body);font-weight:500} .compare tr:last-child td{border-bottom:0} /* Blog cards */ .post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);color:var(--ink)} .post-card:hover{text-decoration:none;color:var(--ink);box-shadow:var(--shadow-lg)} .post-card .placeholder{aspect-ratio:16/9;height:auto} .post-body{padding:24px} .post-body h3{margin-bottom:8px} .post-meta{font-size:.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:500} /* CTA band */ .cta-band{background:var(--brand);border-radius:calc(var(--r) + 8px);padding:64px 40px;text-align:center;color:var(--on-brand)} .cta-band h2{color:var(--on-brand)} .cta-band p{color:color-mix(in srgb,var(--on-brand) 82%,transparent)} .cta-band .btn-primary{background:var(--surface);color:var(--brand)} .cta-band .btn-primary:hover{background:var(--surface);color:var(--brand-deep)} /* Prose pages (about, privacy, terms) */ .prose{max-width:760px} .prose h2{margin-top:2em} /* ---- Footer ---- */ .site-footer{border-top:1px solid var(--line);background:var(--bg2);padding:60px 0 40px;margin-top:40px;font-size:.94rem} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px} @media (max-width:840px){.footer-grid{grid-template-columns:1fr 1fr}} .site-footer h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:14px} .site-footer ul{list-style:none;padding:0;margin:0} .site-footer li{margin-bottom:9px} .site-footer a{color:var(--ink)} .site-footer a:hover{color:var(--brand)} .footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:44px;padding-top:24px;color:var(--muted);font-size:.85rem} /* ---- Announcement bar (launch capture) ---- */ .announce-bar{background:var(--pop);color:#fff} .announce-bar[hidden]{display:none} .announce-inner{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;min-height:40px;padding:7px 40px} .announce-text{margin:0;font-size:.9rem;font-weight:500;text-align:center;color:#fff} .announce-text a{color:#fff;text-decoration:underline;white-space:nowrap} .announce-text a:hover{color:#fff;opacity:.85} .announce-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:1.35rem;line-height:1;cursor:pointer;padding:2px 8px;opacity:.85} .announce-close:hover{opacity:1} /* Small screens: smaller copy + tighter gutters so the line fits without clipping at the right edge (kept clear of the close button). */ @media(max-width:560px){ .announce-inner{padding:7px 34px} .announce-text{font-size:.76rem} } /* ---- Launch email capture modules (hero, footer, pricing, blog) ---- */ .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} .notify{margin-top:22px;max-width:460px} .notify-eyebrow{display:inline-block;font-size:.8rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin:0 0 10px} .notify-form{display:flex;gap:10px;flex-wrap:wrap} .notify-form[hidden]{display:none} .notify-input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:999px;padding:13px 20px;font-size:1rem;font-family:var(--font-body);background:#fff;color:#0E1726} .notify-input::placeholder{color:#6B7280} /* The input is always white; in dark mode the default --line border reads as a black outline on it, so match the border to the white fill. */ [data-theme="dark"] .notify-input{border-color:#fff} .notify-btn{flex:none} .notify-consent{font-size:.8rem;color:var(--muted);margin:10px 0 0} .notify-consent a{color:var(--muted);text-decoration:underline} .notify-success,.notify-error{margin:10px 0 0;font-weight:500} .notify-success{color:var(--ok)} .notify-error{color:var(--pink)} /* Footer launch module: its own color-pop card above the footer columns */ .footer-notify{display:grid;grid-template-columns:1fr auto;gap:8px 28px;align-items:center;background:var(--pop);color:#fff;border-radius:calc(var(--r) + 4px);padding:28px 32px;margin-bottom:44px;box-shadow:var(--shadow)} .footer-notify .notify-copy h4{margin:0 0 2px;color:#fff;text-transform:none;letter-spacing:normal;font-size:1.05rem} .footer-notify .notify-copy p{margin:0;color:rgba(255,255,255,.85)} .footer-notify .notify-form{min-width:300px} .footer-notify .notify-consent,.footer-notify .notify-success,.footer-notify .notify-error{grid-column:1 / -1} .footer-notify .notify-consent{color:rgba(255,255,255,.82)} .footer-notify .notify-success,.footer-notify .notify-error{color:#fff} @media(max-width:640px){.footer-notify{grid-template-columns:1fr}} /* Hero launch signup band: full-width color-pop strip below the hero */ .notify-band{background:var(--pop);color:#fff;padding:40px 0} .notify-band .notify{margin:0 auto;max-width:560px;text-align:center} .notify-band .notify-form{justify-content:center} .notify-band .notify-eyebrow{color:#fff} .notify-band .notify-consent{color:rgba(255,255,255,.85)} .notify-band .notify-success,.notify-band .notify-error{color:#fff} #notify{scroll-margin-top:90px} /* White CTA button on the color-pop backgrounds (band + footer module) */ .notify-band .btn-primary,.footer-notify .btn-primary{background:#fff;color:var(--brand)} .notify-band .btn-primary:hover,.footer-notify .btn-primary:hover{background:#fff;color:var(--brand-deep);box-shadow:0 8px 24px rgba(0,0,0,.18)} /* Mobile: stack the email field above the Get notified button */ @media(max-width:640px){ .notify-form{flex-direction:column;align-items:stretch} .notify-form .notify-input,.notify-form .notify-btn{width:100%} } /* Mobile: center card icons and step numbers at the top of each card */ @media(max-width:640px){ .card .icon-chip,.card .step-num{margin-left:auto;margin-right:auto} } /* Mobile header: hamburger left, logo centered, theme picker right */ @media(max-width:840px){ .nav-toggle{order:1} .logo{order:2;margin:0 auto} .nav-actions{order:3} } /* CTA band: give the secondary button a clear outline-on-band treatment */ .cta-band .btn-ghost{background:transparent;border-color:color-mix(in srgb,var(--on-brand) 55%,transparent);color:var(--on-brand)} .cta-band .btn-ghost:hover{background:color-mix(in srgb,var(--on-brand) 12%,transparent);border-color:var(--on-brand);color:var(--on-brand)}