@import "./tokens.css"; /* ============================================================ Packages — three stamped data-plates Quiet, machined, riveted. Not generic pricing cards: hairline borders, no radius beyond 2-3px, no shadows, corner rivets, a stamped plate number, middle plate distinguished by an accent top-edge line. ============================================================ */ #packages { padding: 4rem 1.25rem 4.5rem; border-top: 1px solid var(--hairline); } .packages-inner { max-width: 1200px; margin: 0 auto; } #packages h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2rem); text-align: center; margin: 0 0 0.75rem; color: var(--ink); } .packages-intro { font-family: var(--font-body); color: var(--muted); font-size: clamp(0.9rem, 2vw, 1rem); line-height: 1.7; text-align: center; max-width: 42rem; margin: 0 auto 2.5rem; } .plates { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 900px) { .plates { grid-template-columns: repeat(3, 1fr); align-items: start; } } /* ---- the plate itself ---------------------------------------------- */ .plate { position: relative; border: 1px solid var(--hairline); border-radius: 3px; padding: 2rem 1.5rem 1.75rem; background-color: var(--plate-bg); display: flex; flex-direction: column; gap: 1rem; /* riveted corners — pure CSS, no extra DOM. Four small dots, one per corner, each its own background layer so they can sit at fixed physical corners (decorative hardware; must not mirror under RTL). */ background-image: radial-gradient(circle 2.5px, var(--hairline) 0 2.5px, transparent 2.5px), radial-gradient(circle 2.5px, var(--hairline) 0 2.5px, transparent 2.5px), radial-gradient(circle 2.5px, var(--hairline) 0 2.5px, transparent 2.5px), radial-gradient(circle 2.5px, var(--hairline) 0 2.5px, transparent 2.5px); background-repeat: no-repeat; background-size: 5px 5px; background-position: 10px 10px, calc(100% - 10px) 10px, 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px); } /* middle plate: distinct, accent top edge */ .plate-featured { border-top: 2px solid var(--accent); padding-top: calc(2rem - 1px); } @media (min-width: 900px) { .plate-featured { /* margin, not transform: `transform` is reserved for the scroll-reveal rise-in below, so the two never fight over the same property */ margin-top: -0.75rem; } } /* ============================================================ Scroll-reveal — quiet, one-by-one entrance driven by reveal.js. Each .plate is observed INDIVIDUALLY (IntersectionObserver, threshold 0.2) and gets its own ".in" class the moment IT enters the viewport — not the section as a whole — so scrolling down reveals plate 1, then 2, then 3 in natural reading order. That scroll order is itself the stagger, so no nth-child transition- delay is needed here (kept out on purpose; re-add only if a fixed delay is ever wanted regardless of scroll position). One-shot: reveal.js unobserves each element once revealed. Progressive enhancement: .plate is fully visible by default. It is only ever hidden pre-reveal when reveal.js has actually run and tagged — if that script 404s, is blocked, or throws (old browser, no IntersectionObserver), the class is never added and pricing content stays visible. ============================================================ */ html.js-reveal #packages .plate { opacity: 0; transform: translateY(14px); transition: opacity 600ms cubic-bezier(.2, .9, .25, 1.05), transform 600ms cubic-bezier(.2, .9, .25, 1.05); } html.js-reveal #packages .plate.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.js-reveal #packages .plate, html.js-reveal #packages .plate.in { opacity: 1; transform: none; transition: none; } } /* ---- plate number (stamped, muted, machined) + icon ------------------ */ .plate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .plate-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--muted); opacity: 0.6; font-variant-numeric: tabular-nums; } /* Hand-drawn technical icons — mirror-safe on purpose (direction-neutral shapes) so they must NEVER flip under RTL, unlike text content. */ .plate-icon { flex-shrink: 0; width: 28px; height: 28px; color: var(--accent-ink); } /* ---- title / description --------------------------------------------- */ .plate h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--ink); margin: 0; } /* ---- benefit bullet list ---------------------------------------------- */ .plate-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; flex-grow: 1; } .plate-bullets li { position: relative; padding-inline-start: 1.1em; font-family: var(--font-body); color: var(--muted); font-size: 0.95rem; line-height: 1.6; } .plate-bullets li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background-color: var(--accent-ink); opacity: 0.7; } /* ---- "Best for" line: distinct, muted, bordered note ------------------ */ .plate-best { font-family: var(--font-body); color: var(--muted); font-size: 0.8rem; line-height: 1.5; opacity: 0.75; font-style: italic; margin: 0; padding-inline-start: 0.75rem; border-inline-start: 2px solid var(--hairline); } /* ---- price: machined part-number styling ------------------------------ */ .plate-price { display: flex; align-items: baseline; gap: 0.4rem; padding-top: 0.75rem; border-top: 1px solid var(--hairline); margin-top: 0.25rem; } .price-currency { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--accent-ink); opacity: 0.85; } .price-num { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--accent-ink); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* ---- per-plate apply button -------------------------------------------- */ .plate-apply { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; color: var(--ink); background-color: var(--accent); border: none; border-radius: 2px; padding: 0.7rem 1.25rem; cursor: pointer; transition: opacity 0.15s ease; } .plate-apply:hover { opacity: 0.9; } /* ============================================================ Mobile compaction — the 3 plates must feel scannable in ~2.5 viewport heights at small widths, not 4+. Desktop (>= 480px, and the 900px 3-col grid) is untouched. ============================================================ */ @media (max-width: 479px) { #packages { padding: 2rem 1rem 2.25rem; } #packages h2 { margin-bottom: 0.5rem; } .packages-intro { font-size: 0.85rem; line-height: 1.55; margin-bottom: 1.1rem; } .plates { gap: 0.7rem; } .plate { padding: 0.9rem 0.9rem 0.8rem; gap: 0.5rem; } .plate-featured { padding-top: calc(0.9rem - 1px); } .plate-num { font-size: 0.65rem; } .plate-icon { width: 22px; height: 22px; } .plate h3 { font-size: 1.05rem; } .plate-bullets { gap: 0.3rem; } .plate-bullets li { font-size: 0.88rem; line-height: 1.35; } .plate-bullets li::before { top: 0.55em; } .plate-best { font-size: 0.68rem; line-height: 1.35; } .plate-price { padding-top: 0.45rem; } .price-num { font-size: 1.5rem; } .plate-apply { width: 100%; font-size: 0.85rem; padding: 0.65rem 1rem; } }