/* ============================================================ RememberedCards — boutique indie-print. A warm ecru gallery wall: muted card-derived palette, hand-cut grotesk headlines, flat matte surfaces, thin kraft hairline frames. Calm, refined, light mode only. No dots, no confetti, no wobble, no tilt. Bricolage Grotesque (display) · Mulish (body) · Caveat (asides). ============================================================ */ :root { --bg: #F6EEDD; /* warm ecru paper */ --bg-2: #EFE6D2; /* deeper ecru */ --surface: #FCF8F0; /* warm white */ --surface-2: #FBF3E4; --ink: #2A2622; /* text */ --ink-2: #6E6357; --muted: #8A7E6E; --stroke: #D9CDB2; /* soft kraft hairline (borders, not heavy outlines) */ --line: #EADFC9; /* faint divider */ --line-2: #E4D8C2; /* dark reverse-out grounds */ --ink-deep: #2C3A24; /* forest */ --ink-navy: #283044; /* deep navy */ /* the muted, card-derived palette (mapped onto the old crayon var names) */ --pink: #C92B43; --pink-2: #9E1F38; /* Crimson */ --sun: #C58A1E; --sun-2: #9C6A12; /* Amber — display/large only */ --teal: #5C6638; --teal-2: #47512A; /* Olive */ --grape: #283044; --grape-2: #283044; /* Deep Navy */ --tang: #C92B43; --tang-2: #C92B43; /* Crimson */ --sky: #283044; /* Deep Navy */ --mint: #5C6638; /* Olive */ /* AA-safe variants for text/fills under cream text */ --pink-ink: #9E1F38; --pink-strong: #C92B43; --pink-strong-2: #9E1F38; --teal-strong: #5C6638; --green-ink: #47512A; --on-tint: #2A2622; --band-sun: #FBF1DC; --band-sun-line: #EADFC9; --band-lav: #F3EAE0; --band-lav-line: #E4D8C2; --tint-pink: #FAE6EA; --tint-err: #FAE6EA; --tint-err-line: #ECC6CE; --primary: var(--pink-strong); --primary-2: var(--pink-strong-2); --on-primary: #FCF8F0; --on-dark: #FCF8F0; --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Mulish", -apple-system, "Segoe UI", Roboto, sans-serif; --font-hand: "Caveat", cursive; --fs-label: 0.78rem; --fs-small: 0.9rem; --fs-body: 1.07rem; --fs-lead: clamp(1.16rem, 1.5vw, 1.36rem); --fs-h3: clamp(1.3rem, 1.8vw, 1.6rem); --fs-h2: clamp(1.9rem, 3.4vw, 2.7rem); --fs-h1: clamp(2.5rem, 5.4vw, 4.3rem); --lh-tight: 1.04; --lh-snug: 1.14; --lh-body: 1.6; --track-label: 0.1em; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --r: 16px; --r-lg: 22px; --r-pill: 999px; /* clean, machine-true corners — no wobble */ --hand-1: 12px; --hand-2: 12px; /* soft matte shadows — no hard colored offset */ --shadow-soft: rgba(42, 38, 34, 0.14); --sh-stick: 0 1px 2px rgba(42, 38, 34, 0.10); --sh-pop: 0 8px 22px -12px rgba(42, 38, 34, 0.22); --sh-card: 0 1px 0 var(--line), 0 10px 24px -14px rgba(42, 38, 34, 0.18); --sh-card-hi: 0 14px 30px -16px rgba(42, 38, 34, 0.22); --maxw: 1180px; --ease: cubic-bezier(.2,.7,.3,1); /* calm easing — no overshoot */ /* envelope logomark */ --logo-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3' y='7' width='26' height='18' rx='3'/%3E%3Cpath d='M4 9l12 8.4L28 9'/%3E%3C/svg%3E"); /* a short terracotta hand-drawn deckled underline, used under headings */ --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M3 8 C 20 4 34 9 52 6 S 86 4 104 7 Q 113 8 117 5' fill='none' stroke='%23C92B43' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --confetti: none; color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: var(--pink-ink); text-decoration: none; font-weight: 800; } a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; } button { font-family: inherit; cursor: pointer; color: inherit; } .hidden { display: none !important; } img, svg { max-width: 100%; } ::selection { background: var(--sun); color: var(--ink); } :focus-visible { outline: 3px solid var(--pink-ink); outline-offset: 2px; border-radius: var(--r); } h1, h2, h3 { font-family: var(--font-display); color: var(--ink); font-weight: 800; letter-spacing: -0.01em; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } #landing, #appScreen, #authScreen, #accountScreen, #aboutScreen { position: relative; z-index: 1; } /* ---- labels / heads ---- */ .eyebrow, .section-title { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); font-family: var(--font-hand); font-size: 1.55rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--teal); background: none; padding: 0; border-radius: 0; line-height: 1; } .eyebrow::before, .section-title::before { content: "✿"; font-size: 0.8em; color: var(--pink); -webkit-text-fill-color: var(--pink); } .section-head { max-width: 44rem; margin: 0 0 var(--sp-7); } .section-head h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); margin: 0 0 var(--sp-3); } .section-head h2 .accent, .section-head h2 b { color: var(--pink); } .section-head p { color: var(--ink-2); margin: 0; font-size: var(--fs-lead); max-width: 48ch; } /* ---- buttons (flat letterpress) ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); background: var(--surface); color: var(--ink); border: 1.5px solid var(--stroke); padding: 11px 22px; border-radius: 10px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); transition: transform .12s var(--ease), box-shadow .12s ease, background .2s ease, color .2s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn.primary { background: var(--primary); color: var(--on-primary); border-color: var(--pink-strong-2); box-shadow: var(--sh-stick); } .btn.primary:hover { background: var(--primary-2); box-shadow: var(--sh-pop); transform: translateY(-1px); } .btn.primary:active { box-shadow: var(--sh-stick); transform: translateY(0); } .btn.ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink-2); } .btn.ghost:hover { background: var(--tint-pink); color: var(--pink-ink); } .btn.block { width: 100%; } .btn.big { padding: 14px 30px; font-size: 1.04rem; box-shadow: var(--sh-stick); } .btn.big:hover { box-shadow: var(--sh-pop); } .btn.big:active { box-shadow: var(--sh-stick); } .btn.danger { color: var(--pink-ink); border-color: var(--pink-ink); } /* ---- brand ---- */ .brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 800; font-size: 1.42rem; color: var(--ink); letter-spacing: -0.01em; } .brand .logo { width: 78px; height: 60px; flex: none; display: inline-block; font-size: 0; background: url("logo.png") center / contain no-repeat; } .brand small { color: var(--muted); font-weight: 600; font-size: 12px; font-family: var(--font-body); } /* ============================================================ LANDING — nav ============================================================ */ .lwrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-6); } .landing-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .landing-nav-links { display: flex; align-items: center; gap: var(--sp-6); } .landing-nav-links a { color: var(--ink-2); font-weight: 800; font-size: var(--fs-small); font-family: var(--font-display); } .landing-nav-links a:hover { color: var(--pink-ink); text-decoration: none; } .landing-nav-actions, .nav-right { display: flex; align-items: center; gap: var(--sp-3); } /* ============================================================ LANDING — hero ============================================================ */ .hero { position: relative; overflow: visible; padding: var(--sp-9) 0 var(--sp-10); background: transparent; } .hero::before { display: none; } .hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); align-items: center; } .hero-copy { animation: rise .6s var(--ease) both; } .hero-eyebrow-hand { font-family: var(--font-hand); font-size: 1.9rem; color: var(--green-ink); display: block; margin-bottom: var(--sp-1); transform-origin: left; } .hero-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; font-size: var(--fs-h1); line-height: var(--lh-tight); margin: 0 0 var(--sp-5); } .hero-title .accent { color: var(--pink); position: relative; white-space: nowrap; } .hero-title .accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: 11px; background: var(--squiggle) repeat-x left center / 120px 12px; } .hero-sub { font-size: var(--fs-lead); color: var(--ink-2); max-width: 42ch; margin: 0 0 var(--sp-6); } .hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; } .hero-trust { margin-top: var(--sp-5); color: var(--muted); font-size: var(--fs-small); font-weight: 700; font-family: var(--font-hand); font-size: 1.25rem; } .hero-art { display: grid; place-items: center; } .hero-doodle, .hero-balloons { width: 100%; max-width: 380px; height: auto; animation: float 5.5s ease-in-out infinite; transform-origin: bottom center; } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* ---- hero: centered copy + fanned card carousel (variant 3) ---- */ .hero { padding: var(--sp-6) 0 var(--sp-8); text-align: center; overflow: hidden; } .hero-copy-center { max-width: 740px; margin: 0 auto var(--sp-5); padding: 0 var(--sp-6); } .hero-copy-center .hero-eyebrow-hand { display: block; transform: none; color: var(--pink-ink); margin: 0 0 var(--sp-2); } .hero-copy-center .hero-title { margin: 0 0 var(--sp-4); } .hero-copy-center .hero-sub { margin: 0 auto var(--sp-5); } .hero-copy-center .hero-cta { justify-content: center; } .cc { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 56px; } .cc-fan { position: relative; height: 308px; } .cc-card { position: absolute; left: 50%; bottom: 0; width: 188px; aspect-ratio: 5 / 7; border-radius: 9px; overflow: hidden; background: var(--surface); box-shadow: var(--sh-card); transform-origin: bottom center; transition: transform .55s var(--ease), opacity .45s ease, box-shadow .3s ease; will-change: transform, opacity; } .cc-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .cc-card.is-center { box-shadow: var(--sh-card-hi); } .cc-arrow { position: absolute; top: 54%; transform: translateY(-50%); z-index: 20; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--pink-ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--sh-card); transition: transform .15s var(--ease), box-shadow .2s, background .2s, border-color .2s, color .2s; } .cc-arrow svg { display: block; width: 19px; height: 19px; } .cc-arrow:hover { background: var(--tint-pink); border-color: var(--tint-err-line); color: var(--pink-strong); transform: translateY(-50%) scale(1.08); box-shadow: var(--sh-stick); } .cc-arrow:active { transform: translateY(-50%) scale(.96); } .cc-prev { left: 0; } .cc-next { right: 0; } .cc-dots { display: flex; gap: 7px; justify-content: center; margin-top: var(--sp-5); flex-wrap: wrap; } .cc-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line-2); cursor: pointer; transition: background .2s, transform .2s; } .cc-dot:hover { background: var(--stroke); } .cc-dot.is-active { background: var(--pink-strong); transform: scale(1.3); } @media (max-width: 760px) { .cc { padding: 0 40px; } .cc-fan { height: 250px; } .cc-card { width: 146px; } .cc-arrow { width: 40px; height: 40px; } .cc-arrow svg { width: 17px; height: 17px; } } /* ============================================================ LANDING — steps (numbered cards) ============================================================ */ /* Section divider — a hand-drawn vine garland (olive leaves, crimson + amber blossoms) in place of a plain rule. The 240px SVG tile repeats across any width; a mask fades the ends so it never hard-cuts at the column edges. */ .sec-divide { border: 0; height: 46px; margin: var(--sp-3) auto; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'240'%20height%3D'46'%20viewBox%3D'0%200%20240%2046'%20fill%3D'none'%3E%3Cpath%20d%3D'M0%2023%20Q30%2014%2060%2023%20Q90%2032%20120%2023%20Q150%2014%20180%2023%20Q210%2032%20240%2023'%20fill%3D'none'%20stroke%3D'%235C6638'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M30%2018%20Q28%2013%2030%209'%20fill%3D'none'%20stroke%3D'%2379853F'%20stroke-width%3D'1.3'%20stroke-linecap%3D'round'%2F%3E%3Cg%20transform%3D'translate(30%208)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'-2.76'%20rx%3D'1.5'%20ry%3D'2.64'%20fill%3D'%23E0A33A'%20transform%3D'rotate(0)'%2F%3E%3Cellipse%20cx%3D'0'%20cy%3D'-2.76'%20rx%3D'1.5'%20ry%3D'2.64'%20fill%3D'%23E0A33A'%20transform%3D'rotate(72)'%2F%3E%3Cellipse%20cx%3D'0'%20cy%3D'-2.76'%20rx%3D'1.5'%20ry%3D'2.64'%20fill%3D'%23E0A33A'%20transform%3D'rotate(144)'%2F%3E%3Cellipse%20cx%3D'0'%20cy%3D'-2.76'%20rx%3D'1.5'%20ry%3D'2.64'%20fill%3D'%23E0A33A'%20transform%3D'rotate(216)'%2F%3E%3Cellipse%20cx%3D'0'%20cy%3D'-2.76'%20rx%3D'1.5'%20ry%3D'2.64'%20fill%3D'%23E0A33A'%20transform%3D'rotate(288)'%2F%3E%3Ccircle%20r%3D'1.44'%20fill%3D'%23C92B43'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M0%200%20C-3%20-4%20-3%20-9%200%20-13%20C3%20-9%203%20-4%200%200%20Z'%20fill%3D'%2379853F'%20transform%3D'translate(55%2020)%20rotate(-38)%20scale(1)'%2F%3E%3Cpath%20d%3D'M0%200%20C-3%20-4%20-3%20-9%200%20-13%20C3%20-9%203%20-4%200%200%20Z'%20fill%3D'%235C6638'%20transform%3D'translate(55%2020)%20rotate(6)%20scale(1)'%2F%3E%3Cpath%20d%3D'M0%200%20C-3%20-4%20-3%20-9%200%20-13%20C3%20-9%203%20-4%200%200%20Z'%20fill%3D'%2379853F'%20transform%3D'translate(90%2028)%20rotate(152)%20scale(0.95)'%2F%3E%3Cpath%20d%3D'M120%2023%20Q117%2016%20120%209'%20fill%3D'none'%20stroke%3D'%235C6638'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M0%200%20C-3%20-4%20-3%20-9%200%20-13%20C3%20-9%203%20-4%200%200%20Z'%20fill%3D'%235C6638'%20transform%3D'translate(120%2019)%20rotate(-58)%20scale(0.62)'%2F%3E%3Cpath%20d%3D'M0%200%20C-3%20-4%20-3%20-9%200%20-13%20C3%20-9%203%20-4%200%200%20Z'%20fill%3D'%2379853F'%20transform%3D'translate(120%2019)%20rotate(58)%20scale(0.62)'%2F%3E%3Cg%20transform%3D'translate(120%209)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'-4.6'%20rx%3D'2.5'%20ry%3D'4.4'%20fill%3D'%23C92B43'%20transform%3D'rotate(0)'%2F%3E%3Cellipse%20cx%3D'0'%20cy%3D'-4.6'%20rx%3D'2.5'%20ry%3D'4.4'%20fill%3D'%23C92B43'%20transform%3D'rotate(72)'%2F%3E%3Cellipse%20cx%3D'0'%20cy%3D'-4.6'%20rx%3D'2.5'%20ry%3D'4.4'%20fill%3D'%23C92B43'%20transform%3D'rotate(144)'%2F%3E%3Cellipse%20cx%3D'0'%20cy%3D'-4.6'%20rx%3D'2.5'%20ry%3D'4.4'%20fill%3D'%23C92B43'%20transform%3D'rotate(216)'%2F%3E%3Cellipse%20cx%3D'0'%20cy%3D'-4.6'%20rx%3D'2.5'%20ry%3D'4.4'%20fill%3D'%23C92B43'%20transform%3D'rotate(288)'%2F%3E%3Ccircle%20r%3D'2.4'%20fill%3D'%23E0A33A'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M0%200%20C-3%20-4%20-3%20-9%200%20-13%20C3%20-9%203%20-4%200%200%20Z'%20fill%3D'%2379853F'%20transform%3D'translate(150%2028)%20rotate(208)%20scale(0.95)'%2F%3E%3Cpath%20d%3D'M0%200%20C-3%20-4%20-3%20-9%200%20-13%20C3%20-9%203%20-4%200%200%20Z'%20fill%3D'%235C6638'%20transform%3D'translate(185%2020)%20rotate(-6)%20scale(1)'%2F%3E%3Cpath%20d%3D'M0%200%20C-3%20-4%20-3%20-9%200%20-13%20C3%20-9%203%20-4%200%200%20Z'%20fill%3D'%2379853F'%20transform%3D'translate(185%2020)%20rotate(38)%20scale(1)'%2F%3E%3Cpath%20d%3D'M210%2028%20Q212%2033%20210%2037'%20fill%3D'none'%20stroke%3D'%2379853F'%20stroke-width%3D'1.3'%20stroke-linecap%3D'round'%2F%3E%3Cg%20transform%3D'translate(210%2038)'%3E%3Cellipse%20cx%3D'0'%20cy%3D'-2.76'%20rx%3D'1.5'%20ry%3D'2.64'%20fill%3D'%23E0A33A'%20transform%3D'rotate(0)'%2F%3E%3Cellipse%20cx%3D'0'%20cy%3D'-2.76'%20rx%3D'1.5'%20ry%3D'2.64'%20fill%3D'%23E0A33A'%20transform%3D'rotate(72)'%2F%3E%3Cellipse%20cx%3D'0'%20cy%3D'-2.76'%20rx%3D'1.5'%20ry%3D'2.64'%20fill%3D'%23E0A33A'%20transform%3D'rotate(144)'%2F%3E%3Cellipse%20cx%3D'0'%20cy%3D'-2.76'%20rx%3D'1.5'%20ry%3D'2.64'%20fill%3D'%23E0A33A'%20transform%3D'rotate(216)'%2F%3E%3Cellipse%20cx%3D'0'%20cy%3D'-2.76'%20rx%3D'1.5'%20ry%3D'2.64'%20fill%3D'%23E0A33A'%20transform%3D'rotate(288)'%2F%3E%3Ccircle%20r%3D'1.44'%20fill%3D'%23C92B43'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x center / 240px 46px; -webkit-mask: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); } .steps { padding: var(--sp-9) 0 var(--sp-8); } /* how-it-works: copy + vertical steps on the left, video on the right */ .how-video { max-width: 920px; margin: 0 auto; border-radius: 16px; overflow: hidden; border: 1.5px solid var(--stroke); box-shadow: var(--sh-card); background: var(--surface); line-height: 0; } .how-video video { display: block; width: 100%; height: auto; } .how-row { display: grid; grid-template-columns: 2fr 3fr; gap: var(--sp-8); align-items: center; } .how-row .how-video { max-width: none; margin: 0; } .how-row .how-text { max-width: none; margin: 0; } .how-steps { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-6) 0 0; padding: 0; } .how-steps li { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.08rem; } .how-steps .hs-n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pink-strong); color: var(--on-primary); font-size: 0.85rem; } @media (min-width: 761px) { #how .lwrap { max-width: var(--maxw); padding-left: var(--sp-6); padding-right: var(--sp-6); } } @media (max-width: 860px) { .how-row { grid-template-columns: 1fr; gap: var(--sp-5); } } .steps-grid { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7) var(--sp-6); } .step { counter-increment: step; background: var(--surface); border: 1.5px solid var(--stroke); border-radius: var(--hand-1); padding: var(--sp-6) var(--sp-5); text-align: left; box-shadow: var(--sh-card); transition: transform .2s var(--ease), box-shadow .2s ease; } .step:nth-child(even) { border-radius: var(--hand-2); } .step:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hi); } .step-emoji { width: 56px; height: 56px; margin: 0 0 var(--sp-4); border-radius: 12px; display: grid; place-items: center; font-size: 0; background: var(--pink-strong); border: 1.5px solid var(--pink-strong-2); box-shadow: var(--sh-stick); } .step:nth-child(2) .step-emoji { background: var(--teal-strong); border-color: var(--green-ink); } .step:nth-child(3) .step-emoji { background: var(--grape); border-color: var(--grape); } .step-emoji::before { content: counter(step); font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--on-primary); } .step h3 { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); } .step-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; margin: 0 0 var(--sp-4); border: 1.5px solid var(--stroke); border-radius: 12px; box-shadow: var(--sh-stick); } .step:nth-child(even) .step-img { border-radius: 12px; } .step p { margin: 0; color: var(--ink-2); } /* open a band above the home-page step cards */ @media (min-width: 761px) { #landing .steps-grid { margin-top: 175px; } } /* widen the steps section so the three cards span ~75% of the window (vs the 1180px cap) */ @media (min-width: 761px) { #how .lwrap { max-width: 75vw; padding-left: 0; padding-right: 0; } } /* ============================================================ LANDING — showcase (quiet warm tint band) ============================================================ */ .showcase { padding: var(--sp-9) 0; background: var(--band-sun); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* ============================================================ LANDING — feature (navy reverse-out band) ============================================================ */ .feature { padding: var(--sp-9) 0; background: var(--ink-navy); border-top: 1px solid var(--ink-navy); border-bottom: 1px solid var(--ink-navy); } .feature-inner { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--sp-8); align-items: center; } .feature-copy h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); margin: 0 0 var(--sp-3); color: var(--on-dark); } .feature-copy h2 .accent { color: var(--sun); } .feature-copy p { color: var(--on-dark); font-size: var(--fs-lead); margin: 0 0 var(--sp-4); max-width: 44ch; } .feature-list { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-3); } .feature-list li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--on-dark); font-weight: 700; } .feature-list .tick { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--mint); border: 1.5px solid var(--on-dark); position: relative; } .feature-list .tick::before { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid var(--on-dark); border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); } .feature-art { background: var(--surface); border: 1.5px solid var(--stroke); border-radius: var(--hand-1); padding: var(--sp-5); display: grid; gap: var(--sp-3); box-shadow: var(--sh-card-hi); } /* dashboard how-it-works feature sits on the cream page (no navy band) — dark, readable text */ .hiw-feature .feature-copy h2 { color: var(--ink); } .hiw-feature .feature-copy h2 .accent { color: var(--pink); } .hiw-feature .feature-copy p { color: var(--ink-2); } .hiw-feature .feature-list li { color: var(--ink); } .hiw-feature .feature-list .tick { border-color: var(--ink-deep); } .mock-notif { display: flex; align-items: center; gap: var(--sp-4); background: var(--surface-2); border: 1.5px solid var(--stroke); border-left: 5px solid var(--pink); border-radius: var(--r); padding: var(--sp-4); } .mock-notif.holiday { border-left-color: var(--teal); } .mock-notif .m-emoji { display: none; } .mock-notif .m-grow { flex: 1; min-width: 0; } .mock-notif .m-title { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; } .mock-notif .m-sub { color: var(--muted); font-size: var(--fs-small); } .mock-notif .m-sub.chosen { color: var(--green-ink); font-weight: 800; } .mock-notif .m-pill { font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink-2); border: 1.5px solid var(--stroke); white-space: nowrap; } .mock-notif .m-pill.today, .mock-notif .m-pill.soon { background: var(--pink-strong); color: var(--on-primary); border-color: var(--pink-strong-2); } .mock-notif .m-pill.chosen { background: var(--mint); color: var(--on-dark); border-color: var(--green-ink); } .mock-notif .m-cta { padding: 8px 16px; font-size: var(--fs-small); white-space: nowrap; } .mock-notif.sent { border-left-color: var(--green-ink); } .mock-notif .m-done { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-small); color: var(--green-ink); white-space: nowrap; padding: 8px 4px; } .mock-notif .m-thumb { flex: none; width: 44px; aspect-ratio: 5 / 7; border-radius: 7px; overflow: hidden; border: 1.5px solid var(--stroke); background: var(--surface); box-shadow: var(--sh-stick); } .mock-notif .m-thumb .card-img { width: 100%; height: 100%; object-fit: cover; display: block; } .mock-notif .m-thumb svg { width: 100%; height: 100%; display: block; } /* ============================================================ LANDING — pricing ============================================================ */ .pricing-wrap { padding: var(--sp-7) 0; } .pricing-head { text-align: center; max-width: 40rem; margin: 0 auto var(--sp-6); } .pricing-head .eyebrow, .pricing-head h2 { justify-content: center; } .price-card { max-width: 420px; margin: 0 auto; background: var(--surface); border: 1.5px solid var(--stroke); border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: var(--sp-7) var(--sp-6); text-align: center; } .price-amount { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 3.6rem); color: var(--ink); line-height: 1; } .price-unit { font-size: 1.1rem; font-weight: 700; color: var(--muted); } .price-list { text-align: left; margin: var(--sp-5) 0 var(--sp-6); } .price-list li { color: var(--ink); } .price-list .tick { border-color: var(--ink-deep); } /* ============================================================ LANDING — CTA + footer ============================================================ */ .cta-band { position: relative; overflow: hidden; padding: var(--sp-9) var(--sp-6); margin: var(--sp-7) var(--sp-6) var(--sp-6); text-align: center; border-radius: 12px; background: var(--ink-deep); color: var(--on-dark); border: 1.5px solid var(--ink-deep); box-shadow: var(--sh-pop); } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); color: var(--on-dark); margin: 0 auto var(--sp-3); max-width: 24ch; } .cta-band p { margin: 0 auto var(--sp-6); font-size: var(--fs-lead); color: var(--on-dark); max-width: 42ch; } .cta-band .btn { background: var(--on-dark); color: var(--ink-deep); border-color: var(--on-dark); } .cta-band .btn:hover { background: var(--sun); color: var(--ink); border-color: var(--sun); } .landing-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); max-width: var(--maxw); margin: 0 auto; padding: var(--sp-7) var(--sp-6) var(--sp-9); } .footer-brand .logo { width: 110px; height: 84px; } .landing-foot .muted { color: var(--muted); font-size: 1.25rem; font-weight: 700; font-family: var(--font-hand); } .foot-link { color: var(--ink-2); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-small); } .foot-link:hover { color: var(--pink-ink); text-decoration: none; } .footer-legal { color: var(--muted); font-size: var(--fs-small); font-weight: 700; } .footer-legal a { color: var(--muted); text-decoration: none; } .footer-legal a:hover { color: var(--pink-ink); } /* ============================================================ ABOUT (our little mission) ============================================================ */ .about { padding: var(--sp-8) 0 var(--sp-9); } .about-col { max-width: 720px; margin: 0 auto; } .about-head { max-width: none; margin-bottom: var(--sp-6); } .about-title { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: var(--lh-snug); margin: 0 0 var(--sp-4); } .about-title .accent { color: var(--pink); } .about-tagline { font-family: var(--font-hand); font-size: clamp(1.35rem, 2.4vw, 1.7rem); color: var(--ink-2); margin: 0; line-height: 1.3; } .about-prose { color: var(--ink-2); font-size: 1.13rem; line-height: var(--lh-body); } .about-prose h2 { font-size: var(--fs-h3); color: var(--ink); margin: var(--sp-7) 0 var(--sp-3); padding-bottom: 9px; background: var(--squiggle) left bottom / 116px 9px no-repeat; } .about-prose p { margin: 0 0 var(--sp-4); } .about-prose strong { color: var(--ink); font-weight: 800; } .about-prose em { font-style: italic; } .about-prose ul:not(.feature-list) { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-2); } .about-prose ul:not(.feature-list) li { position: relative; padding-left: var(--sp-5); } .about-prose ul:not(.feature-list) li::before { content: "•"; position: absolute; left: 6px; color: var(--pink); font-weight: 800; } .about-steps { list-style: none; counter-reset: astep; padding: 0; margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-4); } .about-steps li { counter-increment: astep; position: relative; padding-left: 52px; } .about-steps li::before { content: counter(astep); position: absolute; left: 0; top: 1px; width: 34px; height: 34px; display: grid; place-items: center; background: var(--sun); color: var(--on-tint); border: 1.5px solid var(--sun-2); border-radius: 50%; font-family: var(--font-display); font-weight: 800; font-size: 1rem; box-shadow: var(--sh-stick); } .feature-list.about-why { margin: 0 0 var(--sp-4); } /* about-why sits on the warm canvas (not the navy band) — keep ink text + olive ticks */ .about-why li { color: var(--ink-2); } .about-why .tick { background: var(--mint); border-color: var(--green-ink); } .about-why .tick::before { border-color: var(--on-dark); } .about-closer { margin: var(--sp-7) 0 0; padding: var(--sp-6); background: var(--band-sun); border: 1.5px solid var(--stroke); border-radius: var(--hand-1); box-shadow: var(--sh-card); font-family: var(--font-hand); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; color: var(--ink); text-align: center; } .about-cta { margin-top: var(--sp-7); text-align: center; } /* ============================================================ AUTH ============================================================ */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5); position: relative; background: radial-gradient(120% 80% at 50% 0%, var(--tint-pink), var(--bg) 60%); } .auth-box { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 440px; position: relative; } .auth-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--sp-3); margin-bottom: var(--sp-5); } .link-back { align-self: flex-start; background: none; border: none; color: var(--pink-ink); font-weight: 800; font-size: var(--fs-small); padding: 0; font-family: var(--font-display); } .auth-top .link-back { padding-bottom: 0; } .auth-hero { text-align: center; margin-bottom: var(--sp-6); } .auth-hero .brand { justify-content: center; font-size: 1.8rem; } .auth-sub { text-align: center; color: var(--muted); margin: var(--sp-2) 0 0; font-weight: 700; font-family: var(--font-hand); font-size: 1.4rem; } #authBox, #accountBox { display: flex; justify-content: center; width: 100%; } .signin-status { color: var(--muted); padding: var(--sp-6); font-size: var(--fs-small); } .error { background: var(--tint-err); color: var(--pink-ink); padding: var(--sp-3) var(--sp-4); border-radius: var(--r); border: 1.5px solid var(--tint-err-line); font-size: var(--fs-small); line-height: 1.5; font-weight: 700; } /* custom Firebase auth form (email + Google) */ .auth-form { width: 100%; max-width: 380px; background: var(--surface); border: 1.5px solid var(--stroke); border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); } .auth-tabs { display: flex; gap: var(--sp-1); background: var(--bg-2); border-radius: var(--r-pill); padding: 4px; } .auth-tab { flex: 1; border: none; background: none; color: var(--ink-2); padding: 8px 0; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); transition: background .2s, color .2s; } .auth-tab.active { background: var(--surface); color: var(--pink-ink); box-shadow: var(--sh-stick); } .google-btn { background: var(--surface); border: 1.5px solid var(--stroke); color: var(--ink); font-weight: 700; gap: var(--sp-2); } .google-btn:hover { background: var(--bg-2); } .g-icon { display: inline-flex; } .auth-or { display: flex; align-items: center; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-small); font-weight: 700; } .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); } .auth-fields { display: flex; flex-direction: column; gap: var(--sp-3); } .auth-field { display: flex; flex-direction: column; gap: 4px; } .auth-label { font-size: var(--fs-label); font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: var(--track-label); } .auth-input { padding: 11px 14px; border: 1.5px solid var(--stroke); border-radius: 10px; background: var(--surface-2); color: var(--ink); font-size: var(--fs-small); font-family: inherit; font-weight: 600; } .auth-input:focus { outline: none; border-color: var(--pink); box-shadow: var(--sh-stick); } .auth-link { align-self: center; background: none; border: none; color: var(--pink-ink); font-weight: 800; font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 3px; } .account-card .acct-row { display: flex; flex-direction: column; gap: 2px; } .acct-label { font-size: var(--fs-label); font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-label); } .acct-value { font-weight: 700; color: var(--ink); } /* ============================================================ DASHBOARD — topbar + tabs ============================================================ */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .topbar .brand { cursor: pointer; } .topnav { display: flex; align-items: center; gap: var(--sp-3); } .topnav .who, .landing-nav-actions .who, .nav-who { font-family: var(--font-hand); font-size: 1.55rem; color: var(--pink-ink); line-height: 1; } .apptabs { display: flex; gap: var(--sp-2); } .apptab { background: none; border: none; border-bottom: 2px solid transparent; padding: 7px 12px; border-radius: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); color: var(--ink-2); transition: color .2s, border-color .2s; } .apptab:hover { background: none; color: var(--ink); } .apptab.is-active { background: none; color: var(--pink-ink); border-bottom: 2.5px solid var(--pink); } #appScreen .topbar, .landing-nav.signed-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } #appScreen .topbar > .brand, .landing-nav.signed-in > .brand { justify-self: start; } #appScreen .topbar > .apptabs, .landing-nav.signed-in > .landing-nav-links { justify-self: center; } #appScreen .topbar > .topnav, .landing-nav.signed-in > .nav-right { justify-self: end; } /* Guest (logged-out) browsing: hide the account/reminders chrome, show Log in / Sign up */ #appScreen.guest #whoami, #appScreen.guest #accountBtn, #appScreen.guest #logoutBtn, #appScreen.guest #tabReminders { display: none; } .topnav .guest-only { display: none; } #appScreen.guest .topnav .guest-only { display: inline-flex; } .browse-all-wrap { text-align: center; margin-top: var(--sp-6); } .landing-nav.signed-in { padding: var(--sp-4) var(--sp-6); } .landing-nav.signed-in > .landing-nav-links { gap: var(--sp-2); } .hiw-feature { margin-top: var(--sp-7); } .app { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-7) var(--sp-6) var(--sp-9); } .section-title { margin: var(--sp-6) 0 var(--sp-4); } .grid { display: grid; gap: var(--sp-4); } .notif-strip { display: flex; flex-direction: column; gap: var(--sp-3); } .empty { color: var(--muted); background: var(--surface); border: 1.5px dashed var(--line-2); border-radius: var(--r); padding: var(--sp-5); text-align: center; font-weight: 700; } #appScreen .app { max-width: 1360px; } .dash-cols { display: grid; grid-template-columns: 360px minmax(0, 1fr) 300px; gap: var(--sp-7); align-items: start; } .dash-side, .dash-right { position: sticky; top: 92px; } @media (max-width: 1100px) { .dash-cols { grid-template-columns: 1fr; } .dash-side, .dash-right { position: static; } .calendar { max-width: 520px; margin: 0 auto; } } /* calendar */ .calendar { background: var(--surface); border: 1.5px solid var(--stroke); border-radius: var(--hand-1); padding: var(--sp-5); box-shadow: var(--sh-card); } .cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-4); } .cal-title { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; } .cal-nav { border: 1.5px solid var(--stroke); background: var(--surface); color: var(--ink-2); width: 32px; height: 32px; border-radius: 50%; font-size: 18px; line-height: 1; display: grid; place-items: center; padding: 0; } .cal-nav:hover { color: var(--pink-ink); background: var(--tint-pink); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-dow { text-align: center; font-size: 0.66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: var(--sp-1); } .cal-day { aspect-ratio: 1 / 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; color: var(--ink-2); border: 1.5px solid transparent; } .cal-day.blank { visibility: hidden; } .cal-day.has-events { background: var(--tint-pink); color: var(--pink-ink); font-weight: 800; border-color: var(--pink); } .cal-day.is-today { background: var(--pink-strong); color: var(--on-primary); border-color: var(--pink-strong-2); } .cal-day .cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); margin-top: 3px; } .cal-day.is-today .cal-dot { background: var(--on-primary); } .cal-tip { position: fixed; z-index: 90; max-width: 240px; background: var(--ink-deep); color: #FCF8F0; border-radius: var(--r); box-shadow: var(--sh-pop); padding: var(--sp-3) var(--sp-4); pointer-events: none; display: grid; gap: var(--sp-2); border: 1.5px solid var(--ink-deep); } .cal-tip .ct-title { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; line-height: 1.2; } .cal-tip .ct-sub { color: rgba(252,248,240,.72); font-size: 0.8rem; } /* reminder recs */ .reminder-cards { display: flex; flex-direction: column; gap: var(--sp-5); } .rc-event-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); } .rc-ev-title { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-ev-days { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .rc-ev-days.chosen { color: var(--green-ink); } .rc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .rc-card { cursor: pointer; transition: transform .18s var(--ease); } .rc-card:hover { transform: translateY(-3px); } .rc-card.is-chosen .rc-front { outline: 3px solid var(--mint); outline-offset: 2px; } .rc-front { aspect-ratio: 5 / 7; border-radius: var(--r); overflow: hidden; border: 1.5px solid var(--stroke); background: var(--surface); box-shadow: var(--sh-stick); } .rc-front svg { width: 100%; height: 100%; display: block; } /* Cards-to-send carousel (arrows in side gutters + position dots + auto-cycle) */ .rc-carousel { display: flex; flex-direction: column; } .rc-stage { display: flex; align-items: center; gap: var(--sp-2); } .rc-viewport { overflow: hidden; flex: 1; min-width: 0; } .rc-track { display: flex; gap: var(--sp-3); transition: transform .35s var(--ease); } .rc-track > .rc-card { flex: 0 0 calc((100% - var(--sp-3)) / 2); } .rc-arrow { flex: none; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); box-shadow: var(--sh-stick); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2); transition: transform .15s var(--ease), box-shadow .15s, color .15s, border-color .15s; } .rc-arrow svg { display: block; } .rc-arrow:hover { color: var(--pink-ink); border-color: var(--tint-err-line); transform: scale(1.1); box-shadow: var(--sh-card); } .rc-arrow:active { transform: scale(.95); } .rc-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--sp-3); } .rc-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--stroke); opacity: .55; cursor: pointer; transition: transform .2s var(--ease), background .2s, opacity .2s; } .rc-dot.is-active { background: var(--pink-ink); opacity: 1; transform: scale(1.25); } /* Card preview inside the send modal */ .card-modal-art { display: flex; justify-content: center; margin: var(--sp-3) 0; } .card-modal-art .cm-face { width: 190px; max-width: 62%; aspect-ratio: 5 / 7; border-radius: var(--r); overflow: hidden; border: 1.5px solid var(--stroke); background: var(--surface); box-shadow: var(--sh-card); } .card-modal-art .cm-face .card-img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-modal-art .cm-face svg { width: 100%; height: 100%; display: block; } /* people */ .people-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .person-card { background: var(--surface); border: 1.5px solid var(--stroke); border-radius: var(--hand-1); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); box-shadow: var(--sh-card); } .person-card:nth-child(even) { border-radius: var(--hand-2); } .person-card .pc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .person-card .pc-name { font-family: var(--font-display); font-weight: 800; font-size: 1.28rem; } .person-card .pc-meta { color: var(--muted); font-size: var(--fs-small); font-weight: 700; } .person-card .pc-bday { font-size: var(--fs-small); color: var(--ink-2); font-weight: 800; } .person-card.editable { cursor: pointer; transition: transform .18s var(--ease), box-shadow .15s; } .person-card.editable:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hi); } .add-tile { position: relative; overflow: hidden; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 124px; border: 1.5px dashed var(--pink-strong); background: var(--tint-pink); color: var(--pink-ink); font-family: inherit; box-shadow: none; } .add-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-card); } .add-tile .add-plus { position: relative; z-index: 1; font-size: 28px; line-height: 1; } .add-tile .add-label { position: relative; z-index: 1; font-weight: 800; font-size: var(--fs-small); color: var(--ink-2); } .add-tile .cycle-word { font-family: var(--font-hand); font-weight: 700; font-size: 1.45em; color: var(--pink-ink); } .add-tile .cycle-word::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; background: var(--pink); vertical-align: -2px; animation: caret-blink 1s step-end infinite; } @keyframes caret-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .pc-holidays { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); } .pc-hol { font-size: 0.7rem; font-weight: 800; color: var(--grape-2); background: var(--band-lav); border: 1.5px solid var(--stroke); border-radius: var(--r-pill); padding: 2px 10px; white-space: nowrap; } /* browse */ /* The default state is a quiet one-line tip — NOT a field. Only the "choosing" state (which carries a Cancel action) gets the tinted notice-card treatment, so the banner never reads as a second search box. */ .cards-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-small); margin-bottom: var(--sp-4); } .cards-banner .cb-text.muted { color: var(--muted); font-weight: 600; } .cards-banner.active { background: var(--tint-pink); border: 1.5px solid var(--tint-err-line); border-radius: var(--r); padding: var(--sp-3) var(--sp-4); box-shadow: var(--sh-stick); } .cards-banner.active .cb-text { font-weight: 800; color: var(--ink); } #gallery .pick { display: none; } #gallery.choosing .pick { display: block; } .browse-controls { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-5); } #cardSearch { flex: 0 1 320px; min-width: 220px; padding: 11px 18px 11px 44px; border: 1.5px solid var(--stroke); border-radius: var(--r-pill); font-size: var(--fs-small); font-family: inherit; color: inherit; font-weight: 700; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7E6E' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.4-4.4'/%3E%3C/svg%3E") no-repeat 17px center; background-size: 16px 16px; } #cardSearch:focus { outline: none; box-shadow: var(--sh-stick); border-color: var(--pink); } .card-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .filter-chip { border: none; border-bottom: 2px solid transparent; background: none; color: var(--ink-2); padding: 6px 8px; border-radius: 0; font-family: var(--font-display); font-size: var(--fs-small); font-weight: 700; } .filter-chip:hover { color: var(--pink-ink); background: none; } .filter-chip.active { background: none; color: var(--pink-ink); border-bottom: 2.5px solid var(--pink); } .card-group { margin-bottom: var(--sp-7); } .cg-head { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; margin: 0 0 var(--sp-4); } .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } @media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } /* browse mode switch: Birthdays & Holidays ⇄ Life Moments */ .browse-modes { display: inline-flex; gap: var(--sp-1); background: var(--surface); border: 1.5px solid var(--stroke); border-radius: var(--r-pill); padding: 4px; margin-bottom: var(--sp-5); box-shadow: var(--sh-stick); } .browse-mode { border: none; background: none; color: var(--ink-2); padding: 8px 18px; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); transition: background .2s, color .2s; } .browse-mode:hover { color: var(--pink-ink); background: none; } .browse-mode.active { background: var(--pink-strong); color: var(--on-primary); } /* Life Moments: intro + group → occasion nav + selected-occasion panel */ .lm-intro { margin-bottom: var(--sp-6); } .lm-intro-title { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; } .lm-intro-sub { color: var(--muted); font-weight: 600; max-width: 60ch; margin-top: var(--sp-1); } .lm-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-7); } .lm-group { background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r); padding: var(--sp-4); } .lm-group-head { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; color: var(--ink); margin-bottom: var(--sp-3); } .lm-occasions { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .lm-chip { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--stroke); background: var(--bg); color: var(--ink-2); padding: 7px 13px; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); transition: background .2s, color .2s, border-color .2s; } .lm-chip:hover { border-color: var(--pink); color: var(--pink-ink); background: var(--bg); } .lm-chip.active { background: var(--pink-strong); border-color: var(--pink-strong); color: var(--on-primary); } .lm-chip-count { font-size: var(--fs-label); font-weight: 800; letter-spacing: .02em; text-transform: lowercase; padding: 1px 7px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--muted); } .lm-chip.active .lm-chip-count { background: rgba(255,255,255,.24); color: var(--on-primary); } .lm-panel-head { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; margin: 0 0 var(--sp-4); } .lm-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); background: var(--surface); border: 1.5px dashed var(--line-2); border-radius: var(--r); padding: var(--sp-7) var(--sp-5); } .lm-empty-badge { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--pink-ink); background: var(--tint-pink); border-radius: var(--r-pill); padding: 4px 12px; } .lm-empty-title { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--ink); } .lm-empty-sub { color: var(--muted); font-weight: 600; max-width: 46ch; } /* card gallery */ .gallery { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-6); } @media (max-width: 600px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } } .card-tile { display: flex; flex-direction: column; height: 100%; } .cardopen { position: relative; width: 100%; aspect-ratio: 5 / 7; perspective: 1700px; cursor: pointer; } .co-inside, .co-face { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; border: 1.5px solid var(--stroke); background: var(--surface); box-shadow: var(--sh-card); } .co-inside svg, .co-face svg { width: 100%; height: 100%; display: block; } /* image cards (birthday): fit the 2:3 art in the 3:4 frame, no crop */ .co-inside .card-img, .co-face .card-img, .rc-front .card-img { width: 100%; height: 100%; object-fit: contain; display: block; } /* the right inside panel (the printed message) sits behind, revealed as the cover opens */ .co-inside { z-index: 1; } .co-inside::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 16px; background: linear-gradient(to right, rgba(0,0,0,.18), transparent); pointer-events: none; } /* the cover is a two-sided panel hinged on its left edge: artwork on the front, blank inside-left on the back. It swings open past 90° so both insides show. */ /* pointer-events:none so the swung-open cover never captures hover outside the card's own rectangle — opening/closing is driven purely by hovering the .cardopen box (whose right edge is the inside-right panel edge), and the click handler on .cardopen still toggles on tap because the cover lets the pointer through to it. */ .co-cover { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform-origin: left center; transform-style: preserve-3d; will-change: transform; transition: transform .8s var(--ease); } .co-face { backface-visibility: hidden; } .co-face.back { transform: rotateY(180deg); background: #fffdf8; } /* Open on hover (mouse) or when toggled open via tap (.open). Hover is gated to real pointers so a tap on a touchscreen doesn't get stuck in :hover and block closing — on touch it's purely the .open class, toggled by the click handler. */ .cardopen.open .co-cover { transform: rotateY(-130deg); } @media (hover: hover) { .cardopen:hover .co-cover { transform: rotateY(-130deg); } } /* lift the opening card above its neighbours so the swing isn't clipped */ .card-tile { position: relative; } .card-tile:has(.cardopen.open), .card-tile:focus-within { z-index: 5; } @media (hover: hover) { .card-tile:hover { z-index: 5; } } .card-label { margin-top: var(--sp-3); margin-bottom: var(--sp-3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); } .cl-left { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; } .card-label .cname { font-family: var(--font-display); font-weight: 800; font-size: 1rem; } .card-aud { flex: none; font-size: 0.55rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); border: 1.5px solid var(--stroke); border-radius: var(--r-pill); padding: 1px 6px; } .card-price { flex: none; font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--ink-2); } .card-tile .pick, .card-tile .add-cart { margin-top: auto; } /* pin to bottom → buttons align across a row */ /* confetti burst when a card is added to cart */ .cart-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; } .cart-confetti .cc-bit { position: fixed; width: 8px; height: 8px; border-radius: 2px; transform: translate(-50%, -50%); animation: ccpop .8s var(--ease) forwards; } @keyframes ccpop { 0% { transform: translate(-50%, -50%) scale(.5) rotate(0deg); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(220deg); opacity: 0; } } /* modals + fields */ .modal-back { position: fixed; inset: 0; background: rgba(42,38,34,.55); display: grid; place-items: center; padding: var(--sp-5); z-index: 50; } .modal { background: var(--surface); border-radius: var(--hand-1); width: 100%; max-width: 460px; padding: var(--sp-6); box-shadow: var(--sh-pop); border: 1.5px solid var(--stroke); max-height: 88vh; overflow-y: auto; } .modal h3 { font-weight: 800; margin: 0 0 var(--sp-1); font-size: 1.7rem; } .modal .sub { color: var(--muted); margin: 0 0 var(--sp-5); font-size: 1.25rem; font-weight: 700; font-family: var(--font-hand); } .modal-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); } .modal-actions .danger { color: var(--pink-ink); } .modal-actions #deletePerson { margin-right: auto; } /* cart: floating button + cart modal */ /* cart button (top-right in every header / the dashboard topbar) */ .cart-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--ink); padding: 4px 6px; line-height: 1; } .cart-btn:hover { color: var(--pink-ink); } .cart-btn-icon { font-size: 1.3rem; line-height: 1; } .cart-btn-count { background: var(--primary); color: var(--on-primary); font-family: var(--font-display); font-weight: 800; font-size: 0.7rem; min-width: 18px; padding: 1px 5px; border-radius: var(--r-pill); text-align: center; } .cart-modal { max-width: 480px; } .cart-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-4) 0; max-height: 48vh; overflow-y: auto; } .cart-row { display: grid; grid-template-columns: 46px 1fr auto; align-items: start; gap: var(--sp-3); } .cart-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cart-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .cart-line-total { font-family: var(--font-display); font-weight: 800; color: var(--ink); } .cart-thumb { width: 46px; aspect-ratio: 5 / 7; border-radius: 6px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-2); } .cart-thumb img, .cart-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; } .cart-name { font-weight: 800; font-size: var(--fs-small); } .cart-line { color: var(--muted); font-size: var(--fs-label); font-weight: 700; } .cart-qty { display: inline-flex; align-items: center; gap: 6px; } .cart-qbtn { width: 26px; height: 26px; border: 1.5px solid var(--stroke); background: var(--surface-2); border-radius: 7px; font-weight: 800; line-height: 1; color: var(--ink); } .cart-qnum { min-width: 18px; text-align: center; font-weight: 800; } .cart-remove { background: none; border: none; color: var(--pink-ink); font-weight: 800; font-size: var(--fs-label); text-decoration: underline; text-underline-offset: 2px; } .cart-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1.5px solid var(--line-2); padding-top: var(--sp-3); font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; } .cart-total-amt { color: var(--pink-ink); } .cart-fine { color: var(--muted); font-size: var(--fs-label); font-weight: 600; margin: var(--sp-2) 0 var(--sp-4); line-height: 1.4; } /* mini-cart: non-blocking "added to cart" popover, pinned top-right under the header */ .mini-cart { position: fixed; top: 80px; right: 16px; z-index: 40; width: 344px; max-width: calc(100vw - 32px); background: var(--surface); border: 1.5px solid var(--stroke); border-radius: var(--r); box-shadow: var(--sh-pop); padding: var(--sp-4); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); } .mini-cart-empty { color: var(--muted); font-size: var(--fs-small); margin: 2px 0 0; } .mini-cart.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .mini-cart-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 800; margin-bottom: var(--sp-3); } .mini-cart-close { background: none; border: none; color: var(--muted); font-size: 1.3rem; line-height: 1; padding: 0 2px; } .mini-cart-close:hover { color: var(--ink); } .mini-cart-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 320px; overflow-y: auto; margin-bottom: var(--sp-3); } .mini-cart-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); font-weight: 700; } .mini-cart-row .mc-thumb { flex: none; width: 56px; aspect-ratio: 5 / 7; border-radius: 6px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-2); } .mini-cart-row .mc-thumb img, .mini-cart-row .mc-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; } .mini-cart-row .mc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .mini-cart-row .mc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-cart-row .mc-cost { flex: none; min-width: 40px; text-align: right; font-family: var(--font-display); font-weight: 800; } .mini-cart-total { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 800; border-top: 1.5px solid var(--line-2); padding-top: var(--sp-3); margin-bottom: var(--sp-3); } .field { margin-bottom: var(--sp-4); } .field label { display: block; font-family: var(--font-display); font-size: 0.82rem; letter-spacing: .02em; text-transform: none; font-weight: 700; margin-bottom: var(--sp-2); color: var(--ink-2); } .field input, .field select { width: 100%; padding: 12px 15px; border: 1.5px solid var(--stroke); border-radius: var(--r); font-size: 1rem; background: var(--surface-2); font-family: inherit; color: inherit; font-weight: 700; } .field input:focus, .field select:focus { outline: none; background: var(--surface); box-shadow: var(--sh-stick); border-color: var(--pink); } /* custom dropdown overlaying the native relationship