/* Landing page only. Everything here composes on top of style.css's tokens and shared components (--night/--amber/--paper/--rose/--sage, --paper-base-bg, .gate-submit, .auth-secondary, .subtitle, .flip-card, .note-heart) rather than re-declaring a second visual language -- see the design brief this page was built from for why. Nothing on this page depends on any app JS module; it is plain static markup. */ /* style.css sets this on site-wide to stop the app's jar/header from visibly re-centering when a note overlay opens/closes and toggles a real scrollbar on/off (see that rule's own comment). This page has no overlay to protect against, so it only pays the cost: a permanently reserved, never-drawn-on-mobile scrollbar gutter that left the whole page laid out a few px short of the true viewport width, flush left -- "the whole page is to the left," confirmed by measuring body's own box narrower than window.innerWidth. landing.css loads after style.css and only on this page, so this cascades cleanly without touching any other page. */ html{ scrollbar-gutter:auto; } body.landing{ align-items:stretch; } .landing-main{ width:100%; display:flex; flex-direction:column; align-items:center; } .landing-section{ width:100%; max-width:1040px; padding: 0 24px; margin: 0 auto; } /* A plain sentence, not a shouted label -- all-caps mono reads fine for a single short word (see the "you"/"them" tags below), but this is a full sentence, and the accessibility/readability consensus on that is not close: slower reading, lost word-shape recognition, and a screen reader that can misread it as an acronym. */ .section-label{ font-size:13px; font-weight:300; color: var(--amber); text-align:center; margin: 0 0 18px; } .section-title{ font-family:'Roboto Slab', serif; font-weight:400; font-size: clamp(22px, 4vw, 30px); text-align:center; margin: 0 0 40px; letter-spacing:-0.01em; } /* ---------------------------------------------------------------- hero -- */ /* padding-top/-bottom, not the shorthand -- every section here also carries .landing-section, whose own `padding: 0 24px` gives it its 24px side inset. A same-specificity shorthand declared after it in the cascade (this rule and .how-line/.inside/.closing below) resets *all four* sides, silently zeroing that 24px back out. That's what actually let .hero-jar's width:min(100%, 420px) run edge-to-edge on a phone with no margin at all. */ .hero{ padding-top:64px; padding-bottom:20px; text-align:center; } .hero-copy h1{ max-width:640px; margin-left:auto; margin-right:auto; } .hero-sub{ margin-left:auto; margin-right:auto; } .hero-actions{ margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:12px; } .cta-btn{ display:inline-block; width:auto; min-width:220px; text-decoration:none; text-align:center; box-sizing:border-box; } /* width:100% (of the section's own padded content box), not a raw vw unit -- 92vw ignores .landing-section's 24px side padding, so on a narrow phone the jar was wider than the space actually available to it. With auto margins unable to go negative, that overflow doesn't split evenly: the whole box (and the notes positioned off of it) sits flush against the left edge instead, bleeding only to the right -- which is exactly what read as "everything's a little to the left." */ .hero-jar{ position:relative; width:min(100%, 420px); margin: 48px auto 0; } .hero-jar-svg{ width:100%; height:auto; display:block; overflow:visible; } /* Same real .countdown-card component the app uses (style.css), just dropped in the same spot relative to the jar that index.html puts it -- right underneath -- instead of off in its own feature card. */ .hero-countdown{ margin-top:28px; } /* The app's flip clock pulses (style.css's .flip-card{ animation: flipCelebratePulse }), an infinite box-shadow keyframe -- non-composited, and pointless on this static preview clock. Kill it here (0,2,0 beats the base rule's 0,1,0). */ .hero-countdown .flip-card{ animation: none; } /* Scoped to this page's countdown only -- style.css's real .flip-unit-label is a bare unit word ("day"/"days"), short enough that all-caps is fine there. This page's version is a full descriptive phrase, which isn't. */ .hero-countdown .flip-unit-label{ text-transform:none; letter-spacing:0.02em; } /* Quiet aside under the label -- reads as explanatory chrome, not as a note the couple wrote, so it stays lighter and smaller than everything else in the card. */ .hero-countdown-hint{ margin-top:7px; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.02em; line-height:1.45; color: rgba(246,241,228,0.5); } /* --------------------------------------------------------- how it works -- */ /* One quiet sentence instead of a 3-icon-in-a-circle grid -- same styling family as .closing p (muted, centered, no card/border treatment). */ .how-line{ padding-top:8px; padding-bottom:60px; text-align:center; } .how-line p{ font-size:14px; font-weight:300; color: rgba(246,241,228,0.75); max-width:460px; margin:0 auto; line-height:1.6; } /* ------------------------------------------------------- what's inside -- */ .inside{ padding-top:20px; padding-bottom:70px; } .inside-grid{ max-width:640px; margin:0 auto; } .inside-card{ position:relative; padding:20px 18px 16px; border-radius:2px; background:#EFE7D6; background-image: var(--paper-base-bg); background-blend-mode: multiply; box-shadow: 0 8px 16px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.28); color:#2A2318; } .inside-card::after{ content:''; position:absolute; inset:0; border-radius:2px; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 30%); } /* Only one card now (the scrapbook), so it doesn't need grid-column or a rotation of its own -- see .inside-card--album below. */ .inside-card--wide{ width:100%; } /* The scrapbook, built as a physical object: a warm leather/kraft frame (.inside-card--album) around a cream album page (.album-scraps) that holds a handful of small mounted notes, the whole thing casting a real shadow onto the near-black page so it reads as an album lying on a dark table. Flat, not rotated -- it's a page, not a loose scrap -- while the notes inside it carry the tilt instead. The app's own scrapbook board is dark; this is the marketing counterpart, traded for legibility and a brighter contrast against the page. */ .inside-card--album{ padding:14px; background: linear-gradient(160deg, #3E3125, #231a12); background-blend-mode: normal; /* .inside-card sets multiply for its paper texture; the frame has none */ box-shadow: 0 22px 44px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,.36); transform: none; } .inside-card--album::after{ content:''; position:absolute; inset:0; border-radius:2px; pointer-events:none; border:1px solid rgba(255,236,208,0.1); background: linear-gradient(180deg, rgba(255,240,214,.06), transparent 24%); } /* The cream page sitting in the frame's well -- inset shadow reads as the page recessed slightly below the frame's lip. */ .album-scraps{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; /* flex-start, not the default stretch: a taller scrap (the drawn-heart one) must not pull its row-mates up to match -- mounted slips sit at their own heights, ragged, like a real page. */ align-items:flex-start; gap:20px 16px; padding:26px 18px 22px; /* Kept lighter than the slips on it -- the page is the ground, the notes are the figures, and they need clear tonal separation. */ background: var(--album-page); background-image: var(--paper-base-bg); background-blend-mode: multiply; box-shadow: inset 0 0 0 1px rgba(42,27,15,.14), inset 0 2px 10px rgba(42,27,15,.14); } /* Same shapes and paper recipe as the app's real scrapbook notes (style.css's .jar-card-body .prev-item), just miniature. */ .album-scrap{ position:relative; width:112px; padding:10px 10px 8px; border-radius:2px; font-family: var(--cursive-font), cursive; font-size:12px; line-height:1.4; color:#2A2318; background-image: var(--paper-base-bg); background-blend-mode: multiply; border:1px solid rgba(42,35,24,.16); box-shadow: 0 6px 14px rgba(46,33,20,.24), 0 2px 4px rgba(46,33,20,.22); } /* Clearly deeper than the album page so each slip reads as a separate piece of paper. The shared note-tint tokens (style.css :root) -- the same values the app's real scrapbook slips and opened notes use, one source of truth. */ .album-scrap--cream{ background-color: var(--note-tint-b-surface); } .album-scrap--rose{ background-color: var(--note-tint-rose-surface); } .album-scrap--kraft{ background-color: var(--note-tint-sage-surface); } /* Same diagonal two-tone split style.css uses to flag a joint note in the real board (.jar-card-body .prev-item.tint-joint.paper-joint), plus both answers actually written out below -- the split alone reads as "joint" only to someone who already knows the app's convention; a first-time visitor needs the two answers to see what "answered together" means. A little wider than the other scraps to hold that extra text. */ .album-scrap--joint{ width:150px; background-image: var(--note-tint-joint-surface), var(--paper-joint-bg), var(--paper-base-bg); background-blend-mode: normal, multiply, multiply; } .album-scrap-joint-q{ margin:0 0 8px; } .album-scrap-joint-a{ margin:0 0 3px; font-size:11.5px; } .album-scrap-joint-a:last-child{ margin-bottom:0; } .album-scrap-joint-label{ font-family:'JetBrains Mono', monospace; font-size:8px; letter-spacing:0.08em; text-transform:uppercase; color: rgba(42,35,24,0.45); margin-right:5px; } .album-scrap:nth-child(1){ transform: rotate(-4deg); } .album-scrap:nth-child(2){ transform: rotate(3deg); } .album-scrap:nth-child(3){ transform: rotate(-2deg); } .album-scrap:nth-child(4){ transform: rotate(5deg); } .album-scrap svg{ display:block; width:100%; height:auto; } /* The kraft scrap holds only the drawn heart, which is portrait -- size it by height so it keeps a footprint close to the text scraps instead of stretching to the full card width. */ .album-scrap--kraft svg{ width:auto; height:54px; margin:2px auto 0; } /* .note-heart (style.css) sets top/left/padding for its spot in the real overlay; without resetting left+padding here, left:14px and right:-6px both apply and the span stretches full-width, dropping the heart mid-card. */ .album-scrap-heart{ position:absolute; top:-6px; right:-6px; left:auto; padding:0; cursor:default; } .album-scrap-heart svg{ width:14px; height:14px; } /* Per-note mounts, the same three recipes style.css cycles per real scrapbook note (its data-deco="tape-top"/"pin"/"corners"). */ .album-scrap[data-deco="tape"]::before{ content:''; position:absolute; width:44px; height:14px; top:-7px; left:50%; transform:translateX(-50%) rotate(-2deg); /* Translucent kraft, not the near-white of the dark-board version -- it needs to read as matte tape against the cream page now. */ background: rgba(120,98,64,.3); box-shadow:0 1px 2px rgba(46,33,20,.22); } .album-scrap[data-deco="pin"]::before{ content:''; position:absolute; width:10px; height:10px; top:-6px; left:50%; transform:translateX(-50%); border-radius:50%; background: var(--rose); box-shadow:0 2px 3px rgba(0,0,0,.35); } .album-scrap[data-deco="corners"]::before, .album-scrap[data-deco="corners"]::after{ content:''; position:absolute; width:13px; height:13px; background:#3B2E24; bottom:0; } .album-scrap[data-deco="corners"]::before{ left:0; clip-path:polygon(0 0,0 100%,100% 100%); } .album-scrap[data-deco="corners"]::after{ right:0; clip-path:polygon(100% 0,0 100%,100% 100%); } /* ------------------------------------------------------------- closing -- */ /* Trust line + CTA, one quiet section instead of two -- a separate hype-line-then-button section is its own sales-page convention (build up, land the "closer," push the button); folding them together reads more like a plain closing thought than a pitch. */ .closing{ padding-top:8px; padding-bottom:80px; text-align:center; } .closing p{ font-size:13.5px; font-weight:300; color: rgba(246,241,228,0.75); max-width:420px; margin:0 auto; line-height:1.6; } .closing .cta-btn{ margin-top:24px; } /* ------------------------------------------------------------- footer -- */ .landing-footer{ width:100%; text-align:center; padding: 26px 20px 40px; font-size:12.5px; color: rgba(246,241,228,0.6); border-top: 1px solid var(--line); } .landing-footer a{ color: var(--amber); }