diff --git a/beingone/.gitignore b/beingone/.gitignore new file mode 100644 index 0000000..a40bd9f --- /dev/null +++ b/beingone/.gitignore @@ -0,0 +1 @@ +.hallmark/shots/ diff --git a/beingone/.hallmark/.gitignore b/beingone/.hallmark/.gitignore new file mode 100644 index 0000000..35cbd5f --- /dev/null +++ b/beingone/.hallmark/.gitignore @@ -0,0 +1,5 @@ +shots/ +before/ +before.json +before.txt +compare.html diff --git a/beingone/.hallmark/log.json b/beingone/.hallmark/log.json new file mode 100644 index 0000000..a975641 --- /dev/null +++ b/beingone/.hallmark/log.json @@ -0,0 +1,31 @@ +[ + { + "shape": "Marquee Hero", + "theme": "squeeze", + "axes": "mid/geometric-sans/warm", + "hero": "Banner", + "nav": "edge-aligned", + "footer": "letter close", + "imagery": "photographs, library 1, natural", + "photos": [ + "worm-bay" + ], + "entry": "BeingOne front page", + "sections": [ + "Hero", + "Path", + "Finder", + "Checks", + "Privacy", + "Talk", + "Family+Safety", + "Questions+Join", + "Footer" + ], + "signature": "match finder with a tappable map of Australia and a moving score", + "waived": [], + "prompt": "BeingOne marriage site for Australians", + "date": "2026-10-23", + "mode": "build" + } +] diff --git a/beingone/PRD.md b/beingone/PRD.md new file mode 100644 index 0000000..442cc69 --- /dev/null +++ b/beingone/PRD.md @@ -0,0 +1,65 @@ +# BeingOne: plan (PRD) + +Tagline: Real people. Real profiles. Real marriage. +For: Australians, and the families of Australians, who want to find a life partner. English only. Australia only. +Written for: Keith. Plain words on purpose. + +## The big idea + +BeingOne is a marriage website where every profile is checked to be a real person. People find matches, talk safely, and families can be part of it. + +## The 13 core features (from Keith's plan) + +1. Sign up and log in with email. +2. Make a profile: photos, age, city, job, things you love, a short "about me". +3. Check the profile is real: phone check, photo check, ID check, and a quick look by a person on the team. +4. Search by Australian city, age and shared interests. +5. Match score: a number showing how well two people fit. +6. Photo privacy: you decide who sees your photos. +7. Send an interest. The other person accepts or says no thanks. +8. Private chat that opens only when both say yes. +9. Family view: a parent or sibling helps look at profiles. +10. Safety tools: block, report, hide your profile. +11. Free plan and paid plan (payments). +12. Admin area for the BeingOne team: review profiles, handle reports, see numbers. +13. Emails and phone alerts: new matches, interests, messages. + +## Phase 1 (today): the new look, with working demos + +What you get: one front page in a new design. Everything on it is a demo that runs in your browser, with made-up sample people. + +| Feature | Where it shows up on the page | +| --- | --- | +| 1 Sign up, log in | The join card at the bottom (Join and Log in tabs). It does not save anything yet. | +| 2 Profile | Shown through the sample people and the checks demo. The real profile editor is Phase 3. | +| 3 Checks | "Every profile is checked": run the four checks on a sample profile. | +| 4 Search | "Find your match across Australia": map of Australia, city, ages, interests. | +| 5 Match score | The score and bar on every sample person. | +| 6 Photo privacy | "You choose who sees your photos": pick who can see, pick who is looking. | +| 7 Interest, accept | "Chat opens when both say yes": accept or say no thanks. | +| 8 Private chat | Same section: the chat unlocks after Accept. | +| 9 Family view | "Family view" tile: pick who helps you look. | +| 10 Safety tools | "Safety tools" tile: block, report, hide. | +| 11 Plans | The "What does it cost?" answer. The paid price is left blank until you give it. | +| 12 Admin | Mentioned in "Who runs the site?". The real admin area is Phase 7 and is a separate private page. | +| 13 Alerts | The "Will I get alerts?" answer. Real alerts are Phase 6. | + +Tests, in this order: +1. The page loads with no errors. +2. Every button, chip, slider, tab and form reacts. +3. Real connections: none yet, so nothing to test. +4. Security: no passwords, no keys, no calls to other servers for data. The forms only show a message on screen. + +## Phases 2 to 8 (one at a time, each must work before the next) + +2. Real sign-up and login (needs a host, a domain, a privacy policy and a consent step). +3. Real profiles and photos, with private photo storage. +4. Real checks (phone code, ID check through a trusted provider, team review screen). +5. Real search and matching on real profiles. +6. Private chat, block and report, email and phone alerts. +7. Payments (test mode first) and the admin area. +8. Launch checks: speed, phones, privacy rules, backups, a trial with friends and family. + +## Important + +Marriage sites hold very private details. In Australia some of them are "sensitive information" under the Privacy Act 1988, so people must clearly agree to how they are used. Plan the privacy policy and consent step in Phase 2. Please check with a lawyer before launch. This is not legal advice. diff --git a/beingone/app.js b/beingone/app.js new file mode 100644 index 0000000..c66c196 --- /dev/null +++ b/beingone/app.js @@ -0,0 +1,262 @@ +(() => { + 'use strict'; + const $ = (s, r = document) => r.querySelector(s); + const $$ = (s, r = document) => Array.from(r.querySelectorAll(s)); + const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1); + + /* made-up sample people; nothing here is a real person */ + const PEOPLE = [ + { n: 'Mia', a: 28, c: 'Sydney', l: ['beach', 'coffee', 'travel'], t: 'a' }, + { n: 'Arjun', a: 31, c: 'Melbourne', l: ['footy', 'cooking', 'music'], t: 'b' }, + { n: 'Hannah', a: 27, c: 'Brisbane', l: ['beach', 'hiking', 'pets'], t: 'c' }, + { n: 'Wei', a: 30, c: 'Perth', l: ['coffee', 'travel', 'hiking'], t: 'd' }, + { n: 'Sana', a: 29, c: 'Adelaide', l: ['cooking', 'music', 'pets'], t: 'a' }, + { n: 'Tom', a: 33, c: 'Hobart', l: ['hiking', 'footy', 'coffee'], t: 'b' }, + { n: 'Priya', a: 26, c: 'Sydney', l: ['music', 'cooking', 'beach'], t: 'c' }, + { n: 'Jack', a: 35, c: 'Melbourne', l: ['footy', 'beach', 'pets'], t: 'd' }, + { n: 'Elena', a: 32, c: 'Brisbane', l: ['travel', 'coffee', 'music'], t: 'a' }, + { n: 'Dev', a: 34, c: 'Perth', l: ['footy', 'cooking', 'hiking'], t: 'b' }, + { n: 'Grace', a: 30, c: 'Canberra', l: ['hiking', 'coffee', 'pets'], t: 'c' }, + { n: 'Sam', a: 28, c: 'Darwin', l: ['beach', 'footy', 'travel'], t: 'd' }, + { n: 'Lena', a: 38, c: 'Sydney', l: ['travel', 'music', 'pets'], t: 'a' }, + { n: 'Omar', a: 29, c: 'Melbourne', l: ['coffee', 'cooking', 'hiking'], t: 'c' } + ]; + + /* ---------- one reveal, once ---------- */ + const revealEls = $$('[data-reveal]'); + if ('IntersectionObserver' in window) { + const io = new IntersectionObserver((es) => es.forEach((e) => { + if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } + }), { rootMargin: '0px 0px -10% 0px' }); + revealEls.forEach((el) => io.observe(el)); + } else { + revealEls.forEach((el) => el.classList.add('is-in')); + } + + /* ---------- match finder ---------- */ + const st = { city: 'Anywhere', from: 25, to: 40, likes: new Set(), sent: new Set() }; + const selCity = $('#f-city'), from = $('#f-from'), to = $('#f-to'); + const oFrom = $('#o-from'), oTo = $('#o-to'), results = $('#results'); + const status = $('#finder-status'), mapCity = $('#map-city'); + const pins = $$('.pin'); + + function scoreOf(p) { + const mid = (st.from + st.to) / 2, half = Math.max((st.to - st.from) / 2, 1); + const ageFit = Math.max(0, 1 - Math.abs(p.a - mid) / (half + 4)); + const shared = p.l.filter((x) => st.likes.has(x)).length; + const likeFit = st.likes.size ? Math.min(1, shared / Math.min(st.likes.size, 3)) : 0.5; + const cityFit = st.city === 'Anywhere' ? 0.7 : 1; + return Math.round(55 + 45 * (0.5 * likeFit + 0.3 * ageFit + 0.2 * cityFit)); + } + + function tile(r, i) { + const p = r.p, sent = st.sent.has(p.n); + const tags = p.l.map((x) => '' + cap(x) + '').join(''); + return '
' + + '
' + + '

' + p.n + ', ' + p.a + '

' + p.c + '

' + + '
' + r.score + 'match
' + + '
' + + '' + + '' + + '
'; + } + + function renderFinder() { + const pool = PEOPLE + .filter((p) => (st.city === 'Anywhere' || p.c === st.city) && p.a >= st.from && p.a <= st.to) + .map((p) => ({ p, score: scoreOf(p) })) + .sort((x, y) => y.score - x.score || x.p.n.localeCompare(y.p.n)); + const top = pool.slice(0, 4); + results.innerHTML = top.length + ? top.map(tile).join('') + : '

No one fits yet. Widen the ages or try another city.

'; + const where = st.city === 'Anywhere' ? 'all of Australia' : st.city; + status.textContent = top.length ? top.length + ' of ' + pool.length + ' shown.' : ''; + mapCity.textContent = st.city === 'Anywhere' ? 'All of Australia' : st.city; + selCity.value = st.city; + pins.forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.city === st.city))); + } + + pins.forEach((b) => b.addEventListener('click', () => { + st.city = st.city === b.dataset.city ? 'Anywhere' : b.dataset.city; + renderFinder(); + })); + selCity.addEventListener('change', () => { st.city = selCity.value; renderFinder(); }); + from.addEventListener('input', () => { + st.from = +from.value; + if (st.from > st.to) { st.to = st.from; to.value = st.to; } + oFrom.textContent = st.from; oTo.textContent = st.to; renderFinder(); + }); + to.addEventListener('input', () => { + st.to = +to.value; + if (st.to < st.from) { st.from = st.to; from.value = st.from; } + oFrom.textContent = st.from; oTo.textContent = st.to; renderFinder(); + }); + $$('#f-likes input').forEach((c) => c.addEventListener('change', () => { + c.checked ? st.likes.add(c.value) : st.likes.delete(c.value); + renderFinder(); + })); + results.addEventListener('click', (e) => { + const b = e.target.closest('[data-interest]'); + if (!b) return; + const name = b.dataset.interest; + st.sent.has(name) ? st.sent.delete(name) : st.sent.add(name); + const on = st.sent.has(name); + b.setAttribute('aria-pressed', String(on)); + b.textContent = on ? 'Interest sent' : 'Send interest'; + }); + renderFinder(); + + /* ---------- the four checks ---------- */ + const rows = $$('[data-check]'), vStatus = $('#v-status'), vText = $('#v-status-text'); + const timers = new Map(); + function updateChecks() { + const n = rows.filter((r) => r.classList.contains('is-done')).length; + vStatus.dataset.state = n === rows.length ? 'done' : 'idle'; + vText.textContent = n === rows.length ? 'Verified' : n ? n + ' of 4 passed' : 'Not verified yet'; + } + function runCheck(row) { + if (row.classList.contains('is-done') || timers.has(row)) return; + const btn = $('[data-run]', row); + btn.setAttribute('aria-busy', 'true'); btn.disabled = true; btn.textContent = 'Checking…'; + timers.set(row, setTimeout(() => { + timers.delete(row); + row.classList.add('is-done'); + btn.hidden = true; btn.removeAttribute('aria-busy'); + $('.passed', row).hidden = false; + updateChecks(); + }, 800)); + } + rows.forEach((r) => $('[data-run]', r).addEventListener('click', () => runCheck(r))); + $('#v-all').addEventListener('click', () => rows.forEach((r, i) => setTimeout(() => runCheck(r), i * 250))); + $('#v-reset').addEventListener('click', () => { + timers.forEach((t) => clearTimeout(t)); timers.clear(); + rows.forEach((r) => { + r.classList.remove('is-done'); + const btn = $('[data-run]', r); + btn.hidden = false; btn.disabled = false; btn.removeAttribute('aria-busy'); btn.textContent = 'Run check'; + $('.passed', r).hidden = true; + }); + updateChecks(); + }); + + /* ---------- photo privacy ---------- */ + const photo = $('#photo'), photoState = $('#photo-state'); + const rank = { stranger: 0, verified: 1, accepted: 2 }; + function renderPhoto() { + const setting = $('input[name="setting"]:checked').value; + const viewer = $('input[name="viewer"]:checked').value; + const can = setting === 'everyone' || + (setting === 'verified' && rank[viewer] >= 1) || + (setting === 'accepted' && rank[viewer] >= 2); + photo.classList.toggle('is-hidden', !can); + photoState.textContent = can ? 'Visible to this visitor' : 'Hidden from this visitor'; + } + $$('input[name="setting"], input[name="viewer"]').forEach((r) => r.addEventListener('change', renderPhoto)); + renderPhoto(); + + /* ---------- interest, accept, chat ---------- */ + const chat = $('#chat'), log = $('#chat-log'), tResult = $('#t-result'); + const accept = $('#t-accept'), decline = $('#t-decline'), tReset = $('#t-reset'); + const chatForm = $('#chat-form'), chatInput = $('#chat-input'); + function addLine(text, cls) { + const li = document.createElement('li'); + if (cls) li.className = cls; + li.textContent = text; + log.appendChild(li); + log.scrollTop = log.scrollHeight; + } + function decide(yes) { + accept.hidden = true; decline.hidden = true; tReset.hidden = false; + tResult.textContent = yes ? 'You both said yes. Say hello.' : 'You said no thanks. Nothing opens.'; + if (yes) { + chat.classList.remove('is-locked'); + addLine('You and Priya both said yes.', 'note'); + chatInput.focus(); + } + } + accept.addEventListener('click', () => decide(true)); + decline.addEventListener('click', () => decide(false)); + tReset.addEventListener('click', () => { + accept.hidden = false; decline.hidden = false; tReset.hidden = true; + tResult.textContent = ''; log.textContent = ''; + chat.classList.add('is-locked'); chatInput.value = ''; + }); + chatForm.addEventListener('submit', (e) => { + e.preventDefault(); + const v = chatInput.value.trim(); + if (!v) { chatInput.focus(); return; } + addLine(v, 'me'); chatInput.value = ''; chatInput.focus(); + }); + + /* ---------- family view and safety tools ---------- */ + const famStatus = $('#fam-status'); + function renderFam() { + const on = $$('#fam input:checked').map((c) => c.value); + famStatus.textContent = !on.length ? 'Just you for now.' + : (on.length === 1 ? on[0] : on.slice(0, -1).join(', ') + ' and ' + on[on.length - 1]) + + (on.length === 1 ? ' is' : ' are') + ' looking with you.'; + } + $$('#fam input').forEach((c) => c.addEventListener('change', renderFam)); + + const safe = $('#safe-status'), sBlock = $('#s-block'), sHide = $('#s-hide'), sReport = $('#s-report'); + let blocked = false; + sBlock.addEventListener('click', () => { + blocked = !blocked; + $('span', sBlock).textContent = blocked ? 'Unblock' : 'Block'; + sBlock.setAttribute('aria-pressed', String(blocked)); + safe.textContent = blocked ? 'Jack is blocked. He cannot message you.' : 'Jack is unblocked.'; + }); + sReport.addEventListener('click', () => { safe.textContent = 'Demo only: nothing was sent to our team.'; }); + sHide.addEventListener('click', () => { + const on = sHide.getAttribute('aria-pressed') !== 'true'; + sHide.setAttribute('aria-pressed', String(on)); + $('span', sHide).textContent = on ? 'Show my profile' : 'Hide my profile'; + safe.textContent = on ? 'Your profile is hidden from search.' : 'Your profile shows in search.'; + }); + + /* ---------- join card: tabs and forms that post nowhere yet ---------- */ + const tabs = $$('[role="tab"]', $('#join-card')); + const panels = { join: $('#panel-join'), login: $('#panel-login') }; + function openTab(name, focus) { + tabs.forEach((t) => { + const on = t.id === 'tab-' + name; + t.setAttribute('aria-selected', String(on)); + t.tabIndex = on ? 0 : -1; + if (on && focus) t.focus(); + }); + Object.keys(panels).forEach((k) => { panels[k].hidden = k !== name; }); + } + tabs.forEach((t, i) => { + t.addEventListener('click', () => openTab(t.id.replace('tab-', ''))); + t.addEventListener('keydown', (e) => { + if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return; + e.preventDefault(); + const next = tabs[(i + (e.key === 'ArrowRight' ? 1 : tabs.length - 1)) % tabs.length]; + openTab(next.id.replace('tab-', ''), true); + }); + }); + $$('[data-open-tab]').forEach((a) => a.addEventListener('click', () => openTab(a.dataset.openTab))); + openTab('join'); + + $$('form[data-endpoint]').forEach((form) => { + const help = $('.form-help', form); + form.addEventListener('input', (e) => { e.target.removeAttribute && e.target.removeAttribute('aria-invalid'); }); + form.addEventListener('submit', (e) => { + e.preventDefault(); + help.classList.remove('is-error'); + const bad = $$('input', form).filter((i) => !i.checkValidity()); + $$('input', form).forEach((i) => i.toggleAttribute('aria-invalid', bad.includes(i))); + if (bad.length) { + help.classList.add('is-error'); + help.textContent = bad[0].type === 'email' + ? 'That email looks incomplete. Write it as name@example.com.' + : 'Please fill in the highlighted field.'; + bad[0].focus(); + return; + } + if (!form.dataset.endpoint) { help.textContent = 'Nothing was sent: this form is not connected yet.'; return; } + }); + }); +})(); diff --git a/beingone/base.css b/beingone/base.css new file mode 100644 index 0000000..be87418 --- /dev/null +++ b/beingone/base.css @@ -0,0 +1,27 @@ +*, *::before, *::after { box-sizing: border-box; } +html, body { overflow-x: clip; } +html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); } +body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); } +::selection { background: color-mix(in oklab, var(--color-accent) 45%, transparent); color: var(--color-card-ink); } +:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } +a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; } +h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; } +h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; } +.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; } +p { margin: 0; text-wrap: pretty; } +p:not([class]) { max-width: 65ch; } +img, video { max-width: 100%; height: auto; display: block; } +svg { display: block; } +[hidden] { display: none !important; } +button, input, select, textarea { font: inherit; } +.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; } +.num, .figure, td.num { font-variant-numeric: tabular-nums; } +.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } +[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); } +[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } +[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; } +@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } } +@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } } +@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } +/* photographs: natural vib=12 con=4 */ +[data-slot] > img { filter: saturate(1.06) contrast(1.04); } diff --git a/beingone/index.html b/beingone/index.html new file mode 100644 index 0000000..ec316f2 --- /dev/null +++ b/beingone/index.html @@ -0,0 +1,318 @@ + + + + + +BeingOne: marriage profiles for Australians, every one checked + + + + + + + + + + + + + +
+
+ BeingOne + +
+
+ +
+ +
+
+

+ Real people. + Real profiles. + Real marriage. +

+
+

Every profile is checked, so you meet real people across Australia.

+ Make my profile +
+
+
+ +
+
+
    +
  1. Join
    2. +
  2. Get checked
    3. +
  3. Find
    4. +
  4. Say yes
    5. +
  5. Chat
    6. +
+
+
+ +
+
+
+

Find your match across Australia

+

Pick a city, then ages and what you love.

+
+
+
+ + + + + + + + + + + +

All of Australia

+
+ +
+
+ + +
+
+
+
25
+ +
+
+
40
+ +
+
+
+ You love + + + + + + + + +
+
+
+ +
+

+

Sample people, made up for this demo.

+
+
+ +
+
+
+

Every profile is checked

+

Run the four checks on a sample profile.

+
+
+
+ +

Mia, 28

Sydney

+ Not verified yet +
+
    +
  • + +

    Phone check

    A code arrives by text.

    + +
    • +
  • + +

    Photo check

    Your photo is checked as real.

    + +
    • +
  • + +

    ID check

    Your ID is checked against your photo.

    + +
    • +
  • + +

    Team look

    A person on our team takes a quick look.

    + +
    • +
+
+ + +
+
+
+
+ +
+
+
+ A beach below orange sandstone cliffs, standing in for a profile photo + + + Hidden from this visitor +
+
+

You choose who sees your photos

+
+ Photos are visible to + + + + +
+
+ Right now, a visitor is + + + +
+
+
+
+ +
+
+

Chat opens when both say yes

+
+
+
+ +

Priya sent you an interest

26, Sydney

+
+
+ + + +
+

+
+
+
    +
    + + + +
    +
    Chat opens when you both say yes.
    +
    +
    +
    +
    + +
    +
    +
    +

    Family view

    +

    A parent or sibling can look at profiles with you.

    +
    + Who helps you look + + + + +
    +

    Just you for now.

    +
    +
    +

    Safety tools

    +
    + +

    Jack, 35

    Melbourne

    +
    +
    + + + +
    +

    +
    +
    +
    + +
    +
    +
    +

    Make your profile

    +
    +
    What does it cost?
    A free plan and a paid plan. Paid price: to be announced
    +
    Will I get alerts?
    Email and phone alerts for matches, interests and messages.
    +
    Who runs the site?
    Our team reviews profiles and reports.
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    + +
    + +

    +
    +
    +
    +
    +
    + +

    +
    +
    +
    +
    +
    + +
    + + + + + + diff --git a/beingone/style.css b/beingone/style.css new file mode 100644 index 0000000..b2a5f6d --- /dev/null +++ b/beingone/style.css @@ -0,0 +1,237 @@ +/* Hallmark · shape: Marquee Hero · genre: playful · theme: Squeeze (deal 2/3, seed beingone-marriage-australians-verified-c51f·ff37d1cd·2026-10-23·r0) · job: sign up · draw: 48b5d3 + * hero: Banner · nav: edge-aligned · footer: letter close · imagery: photographs, library 1, natural · signature: the match finder, a map of Australia you tap and a score that moves + * axes: mid/geometric-sans/warm · posture: drenched · contrast: pass · fold: pass · v2.0.0 */ +/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the sample people could belong to any dating page; the map pins, the four named checks and the photo-privacy rule set make it BeingOne's own */ +/* Hallmark · answered F4 · the hero button and the join card button are the same primary action, repeated at the close */ +/* Hallmark · dismissed F7 · the pill radius sits on controls only: nav links, choice chips and the map pins are all pressed to act */ +/* Hallmark · dismissed F7 · the Squeeze theme is built from tiles at one card radius, and the finder, checks and chat tiles each hold a different kind of control */ +@import url("./tokens.css"); +@import url("./base.css"); + +:root { + --tone-a: oklch(86% 0.09 20); --tone-b: oklch(92% 0.11 98); --tone-c: oklch(85% 0.08 205); --tone-d: oklch(89% 0.09 135); + --nav-h: 72px; +} + +/* page frame */ +.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-card); color: var(--color-card-ink); border-radius: var(--radius-control); font-weight: 700; } +.skip:focus-visible { top: var(--space-md); } +.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); } +.sec { padding-block: var(--space-3xl); } +.sec--tall { padding-block: var(--space-4xl); } +.sec--ruled > .container { border-top: var(--rule-bar) solid var(--color-rule); padding-top: var(--space-3xl); } +.band { background: var(--color-paper-2); color: var(--color-ink); padding-block: var(--section-gap-s); } +.band--deep { background: var(--color-paper-3); color: var(--color-ink); padding-block: var(--section-gap-s); } +.head { display: grid; gap: var(--space-md); align-content: start; } +.head .lead { color: var(--color-muted); } +.label { font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); } +.muted { color: var(--color-muted); } +.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; } +.icon { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } +.icon--sm { width: 20px; height: 20px; } + +/* nav: edge-aligned */ +.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); height: var(--nav-h); background: var(--color-paper); } +.nav .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); } +.wordmark { font: 800 var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; color: var(--color-ink); } +.nav__links { display: flex; align-items: center; gap: var(--space-xs); } +.nav__links a:not(.btn) { padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); text-decoration: none; font-weight: 700; font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out); } +.nav__links a:not(.btn):hover { background: var(--color-paper-2); } +@media (max-width: 60rem) { .nav__links a.hide-sm { display: none; } } + +/* controls */ +.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-control); background: transparent; color: var(--color-ink); font: 700 var(--text-md)/1.25 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); } +.btn:hover { background: var(--color-paper-3); } +.btn:active { transform: translateY(1px); } +.btn--sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); } +.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); } +.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); } +.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; } +.btn[aria-busy="true"] { cursor: progress; } +.btn[aria-pressed="true"] { background: var(--color-paper-3); box-shadow: inset 0 0 0 3px var(--color-accent); } +.btn .icon { width: 20px; height: 20px; } + +/* chips and choices: radios and checkboxes stay in flow at one pixel */ +.choices { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-xs); border: 0; margin: 0; padding: 0; min-width: 0; } +.choices legend { padding: 0; margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); } +.choices input { position: absolute; opacity: 0; width: 1px; height: 1px; } +.choices label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-rule); border-radius: var(--radius-pill); font-weight: 700; font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); } +.choices label:hover { background: var(--color-paper-3); } +.choices input:checked + label { background: var(--color-paper-3); border-color: var(--color-paper-3); box-shadow: 0 0 0 3px var(--color-accent); } +.choices input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 4px; } +.choices--stack { flex-direction: column; flex-wrap: nowrap; } +.choices--stack label { border-radius: var(--radius-control); width: 100%; } +.choices--stack input:checked + label { box-shadow: inset 0 0 0 3px var(--color-accent); border-color: var(--color-paper-3); } + +.field { display: grid; gap: var(--space-xs); } +.field label { font-size: var(--text-sm); font-weight: 700; } +.field input:not([type="range"]), .field select, .chat__form input { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-muted); border-radius: var(--radius-control); background: transparent; color: inherit; outline: 2px solid transparent; outline-offset: -3px; } +.field select option { color: var(--color-card-ink); background: var(--color-card); } +.field input:not([type="range"]):focus-visible, .field select:focus-visible, .chat__form input:focus-visible { outline-color: var(--color-focus); } +.field input[aria-invalid] { border-color: var(--color-error); } +.field input[type="range"] { width: 100%; accent-color: var(--color-accent); min-height: 32px; cursor: pointer; } +.field output { font: 800 var(--text-lg)/1 var(--font-display); font-variant-numeric: tabular-nums; } +.field__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); } + +/* hero: banner, poster-scale head */ +.hero { padding-block: var(--space-xl) var(--space-xl); } +.band--path { padding-block: var(--space-lg) var(--space-xl); } +.hero h1 { grid-column: 1 / 9; max-width: none; font-size: clamp(3rem, 7.4vw, 6.5rem); line-height: 1; } +.hero h1 span { display: block; } +.hero__side { grid-column: 9 / 13; align-self: end; display: grid; gap: var(--space-lg); justify-items: start; padding-bottom: var(--space-sm); } +.hero__side .lead { color: var(--color-ink-2); } +@media (max-width: 60rem) { .hero h1, .hero__side { grid-column: 1 / -1; } .hero__side { margin-top: var(--space-lg); } } + +/* path: a real ol */ +.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); counter-reset: step; } +.path li { counter-increment: step; display: grid; gap: var(--space-xs); align-content: start; } +.path li::before { content: counter(step); font: 800 clamp(3.5rem, 6vw, 5.5rem)/0.9 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums; } +.path a { font: 800 var(--text-title)/1.15 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; text-underline-offset: 0.2em; } +.path a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; } +@media (max-width: 60rem) { .path { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .path li { grid-template-columns: 64px minmax(0, 1fr); align-items: center; } .path li::before { font-size: var(--text-3xl); } } + +/* finder */ +.finder__top { align-items: end; margin-bottom: var(--space-2xl); } +.finder__top h2 { grid-column: 1 / 8; } +.finder__top .lead { grid-column: 8 / 13; color: var(--color-muted); } +.finder__body { align-items: stretch; } +.map { grid-column: 1 / 6; position: relative; aspect-ratio: 605 / 516; background: var(--color-paper-2); border-radius: var(--radius-card); } +.map svg { position: absolute; inset: 0; width: 100%; height: 100%; } +.map path { fill: var(--color-paper-3); stroke: var(--color-rule); stroke-width: 2; stroke-linejoin: round; } +.pin { position: absolute; left: var(--x); top: var(--y); width: 36px; height: 36px; transform: translate(-50%, -50%); padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-pill); } +.pin::before { content: ""; position: absolute; inset: 11px; border-radius: var(--radius-pill); background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); } +.pin:hover::before { transform: scale(1.35); } +.pin[aria-pressed="true"]::before { background: var(--color-accent); transform: scale(1.9); box-shadow: 0 0 0 3px var(--color-paper-3); } +.pin:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; } +.map__city { position: absolute; left: var(--space-md); bottom: var(--space-md); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-control); background: var(--color-paper-3); font-size: var(--text-sm); font-weight: 700; } +.controls { grid-column: 6 / 13; display: grid; gap: var(--space-lg); align-content: space-between; padding: var(--space-xl); background: var(--color-paper-2); border-radius: var(--radius-card); } +.controls__ages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); } +.results { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); min-height: 300px; } +.person { display: grid; gap: var(--space-md); align-content: space-between; padding: var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-card); animation: rise var(--dur-long) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); } +.person__who { display: flex; align-items: center; gap: var(--space-md); } +.person h3 { font-size: var(--text-lg); } +.avatar { width: 56px; height: 56px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--tone, var(--tone-a)); color: var(--color-card-ink); font: 800 var(--text-lg)/1 var(--font-display); } +.score { display: flex; align-items: baseline; gap: var(--space-xs); } +.score b { font: 800 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; } +.bar { height: 8px; margin-top: var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; } +.bar i { display: block; height: 100%; background: var(--color-ink); transform-origin: left; transform: scaleX(calc(var(--s, 0) / 100)); animation: grow var(--dur-long) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms); } +.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: 0; margin: 0; list-style: none; } +.tags li { padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); border: var(--rule-bar) solid var(--color-rule); font-size: var(--text-sm); font-weight: 700; } +.tags li.is-shared { background: var(--color-paper-3); border-color: var(--color-paper-3); } +.results__empty { grid-column: 1 / -1; align-self: center; font: 800 var(--text-xl)/1.2 var(--font-display); max-width: 30ch; } +.finder__note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); } +@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } +@keyframes grow { from { transform: scaleX(0); } } +@media (max-width: 60rem) { + .finder__top h2, .finder__top .lead, .map, .controls { grid-column: 1 / -1; } + .finder__top .lead { margin-top: var(--space-md); } + .controls { margin-top: var(--space-lg); padding: var(--space-lg); } + .results { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} +@media (max-width: 40rem) { .results { grid-template-columns: minmax(0, 1fr); } .controls__ages { grid-template-columns: minmax(0, 1fr); } } + +/* checks */ +.checks .head { grid-column: 1 / 6; } +.checks__panel { grid-column: 7 / 13; background: var(--color-paper-2); color: var(--color-ink); border-radius: var(--radius-card); padding: var(--space-lg); display: grid; gap: var(--space-md); } +.checks__who { display: flex; align-items: center; gap: var(--space-md); padding-bottom: var(--space-md); } +.checks__who h3 { font-size: var(--text-lg); } +.status { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper-3); font-size: var(--text-sm); font-weight: 700; } +.status .icon { display: none; } +.status[data-state="done"] { background: var(--color-ink); color: var(--color-card-ink); } +.status[data-state="done"] .icon { display: block; } +.rows { list-style: none; margin: 0; padding: 0; } +.rows > li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); } +.rows h3 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; line-height: 1.3; } +.rows p { font-size: var(--text-sm); color: var(--color-muted); } +.rows .is-done { color: var(--color-ink); } +.rows .tick { display: none; } +.rows .is-done .tick { display: block; animation: rise var(--dur-short) var(--ease-out) both; } +.rows .is-done .idle { display: none; } +.rows .passed { font-weight: 700; font-size: var(--text-sm); } +.checks__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-md); } +@media (max-width: 60rem) { .checks .head, .checks__panel { grid-column: 1 / -1; } .checks__panel { margin-top: var(--space-xl); } } +@media (max-width: 40rem) { .rows > li { grid-template-columns: 24px minmax(0, 1fr); } .rows .btn, .rows .passed { grid-column: 2; justify-self: start; } .checks__who { flex-wrap: wrap; } } + +/* photo privacy */ +.privacy__photo { grid-column: 1 / 8; position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-3); margin: 0; } +.privacy__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 40%; filter: saturate(1.06) contrast(1.04); } +.privacy__photo .blur { filter: blur(28px) saturate(1.06); transform: scale(1.15); transition: opacity var(--dur-long) var(--ease-in-out); } +.js .privacy__photo:not(.is-hidden) .blur { opacity: 0; } +.privacy__badge { position: absolute; left: var(--space-lg); bottom: var(--space-lg); display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper-3); font-size: var(--text-sm); font-weight: 700; z-index: 2; } +.privacy__lock { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; transition: opacity var(--dur-long) var(--ease-in-out); } +.privacy__lock .icon { width: 72px; height: 72px; stroke-width: 1.75; } +.js .privacy__photo:not(.is-hidden) .privacy__lock { opacity: 0; } +.privacy__panel { grid-column: 9 / 13; display: grid; gap: var(--space-lg); align-content: center; } +.privacy__badge .icon-open, .privacy__badge .icon-shut { display: none; } +.privacy__photo:not(.is-hidden) .icon-open { display: block; } +.privacy__photo.is-hidden .icon-shut { display: block; } +@media (max-width: 60rem) { .privacy__photo, .privacy__panel { grid-column: 1 / -1; } .privacy__panel { margin-top: var(--space-xl); } } + +/* talk */ +.talk__top { margin-bottom: var(--space-2xl); } +.talk__body { align-items: stretch; } +.invite { grid-column: 1 / 6; display: grid; gap: var(--space-lg); align-content: space-between; padding: var(--space-xl); background: var(--color-paper-2); border-radius: var(--radius-card); } +.invite__who { display: flex; align-items: center; gap: var(--space-md); } +.invite h3 { font-size: var(--text-xl); } +.invite__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); } +.invite__result { min-height: 1lh; font-weight: 700; } +.chat { grid-column: 6 / 13; position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 380px; padding: var(--space-lg); background: var(--color-paper-3); border-radius: var(--radius-card); } +.chat__log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-xs); overflow-y: auto; } +.chat__log li { max-width: 80%; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-control); background: var(--color-paper-2); animation: rise var(--dur-short) var(--ease-out) both; overflow-wrap: break-word; } +.chat__log li.me { align-self: flex-end; background: var(--color-ink); color: var(--color-card-ink); } +.chat__log li.note { align-self: center; max-width: 100%; background: transparent; color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; } +.chat__form { display: flex; gap: var(--space-sm); margin-top: var(--space-md); } +.chat__form input { flex: 1; min-width: 0; } +.chat.is-locked .chat__log, .chat.is-locked .chat__form { visibility: hidden; } +.chat__lock { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: var(--space-sm); text-align: center; padding: var(--space-lg); font: 800 var(--text-xl)/1.2 var(--font-display); } +.chat__lock .icon { width: 48px; height: 48px; margin-inline: auto; } +.chat.is-locked .chat__lock { display: grid; } +@media (max-width: 60rem) { .invite, .chat { grid-column: 1 / -1; } .chat { margin-top: var(--space-lg); } } + +/* family and safety: bento */ +.together { align-items: stretch; row-gap: var(--gap-columns); } +.tile { display: grid; gap: var(--space-lg); align-content: start; padding: var(--space-xl); background: var(--color-paper-2); border-radius: var(--radius-card); } +.tile--wide { grid-column: 1 / 8; } +.tile--narrow { grid-column: 8 / 13; background: var(--color-paper-3); } +.tile h2 { font-size: var(--text-section); } +.tile .lead { color: var(--color-muted); } +.safety__who { display: flex; align-items: center; gap: var(--space-md); } +.safety__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); } +.live { min-height: 1lh; font-weight: 700; } +@media (max-width: 60rem) { .tile--wide, .tile--narrow { grid-column: 1 / -1; } .tile { padding: var(--space-lg); } } + +/* questions and join */ +.join .head { grid-column: 1 / 7; align-content: start; gap: var(--space-xl); } +.qa { margin: 0; display: grid; } +.qa > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-md); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); } +.qa dt { font: 800 var(--text-md)/1.3 var(--font-display); letter-spacing: var(--tracking-display); } +.qa dd { margin: 0; color: var(--color-muted); font-size: var(--text-md); } +.card { grid-column: 8 / 13; background: var(--color-card); color: var(--color-card-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-xl); display: grid; gap: var(--space-lg); align-content: start; } +.card :focus-visible { outline-color: var(--color-card-ink); } +.card h2 { font-size: var(--text-section); } +.tabs { display: flex; gap: var(--space-xs); border-bottom: var(--rule-bar) solid color-mix(in oklab, var(--color-card-ink) 20%, var(--color-card)); } +.tabs button { min-height: 44px; padding: 0 var(--space-md); border: 0; border-bottom: 4px solid transparent; margin-bottom: calc(-1 * var(--space-3xs)); background: transparent; color: inherit; font-weight: 700; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); } +.tabs button[aria-selected="true"] { border-bottom-color: var(--color-accent-2); } +.card .field input, .card .field select { border-color: color-mix(in oklab, var(--color-card-ink) 70%, var(--color-card)); } +.card .field select option { color: var(--color-card-ink); } +.card .btn { border-color: var(--color-accent-2); } +.card .btn--primary { background: var(--color-accent); border-color: var(--color-accent-2); } +.card .btn--primary:hover { background: var(--color-accent-2); } +.form-help { min-height: 1lh; font-size: var(--text-sm); } +.form-help.is-error { color: var(--color-error); font-weight: 700; } +.panel { display: grid; gap: var(--space-md); } +@media (max-width: 60rem) { .join .head, .card { grid-column: 1 / -1; } .card { margin-top: var(--space-xl); padding: var(--space-lg); } .qa > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); } } + +/* footer: letter close */ +.foot { padding-block: var(--space-3xl) var(--space-xl); } +.foot__sign { font: 800 var(--text-section)/1.05 var(--font-display); letter-spacing: var(--tracking-display); max-width: 18ch; text-wrap: balance; } +.foot__row { margin-top: var(--space-2xl); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); font-size: var(--text-sm); } +.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; } +.foot__links a { font-weight: 700; } +.foot__links a:hover { text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; } +.foot [data-credits] { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-xs); max-width: 80ch; } + +/* one reveal, visible without script */ +.js [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); } +.js [data-reveal].is-in { opacity: 1; transform: none; } +@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } .person, .bar i, .chat__log li, .rows .is-done .tick { animation: none; } .bar i { transform: scaleX(calc(var(--s, 0) / 100)); } } diff --git a/beingone/tokens.css b/beingone/tokens.css new file mode 100644 index 0000000..70b62ac --- /dev/null +++ b/beingone/tokens.css @@ -0,0 +1,21 @@ +:root { + color-scheme: light; + --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px; + --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem; + --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem); + --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem); + --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); + --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; + --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150); + --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px; + --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; + --color-paper: oklch(41% 0.100 154); --color-paper-2: oklch(47% 0.105 154); --color-paper-3: oklch(34% 0.090 156); + --color-ink: oklch(99% 0.005 90); --color-ink-2: oklch(94% 0.020 120); --color-muted: oklch(90% 0.030 150); --color-rule: oklch(55% 0.100 154); + --color-accent: oklch(83% 0.115 56); --color-accent-2: oklch(74% 0.150 46); --color-accent-ink: oklch(30% 0.070 40); --color-focus: oklch(88% 0.14 85); + --color-card: oklch(97% 0.012 85); --color-card-ink: oklch(24% 0.05 160); + --font-display: "Gabarito", ui-sans-serif, system-ui, sans-serif; --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif; + --font-outlier: var(--font-display); + --radius-card: 24px; --radius-control: 16px; --radius-pill: 999px; --rule-hair: 1px; --rule-bar: 2px; + --shadow-card: 0 14px 32px -16px oklch(22% 0.05 160 / 0.5); + --tracking-display: -0.025em; --display-weight: 800; +}