/* ----------------------------------------
Variables
---------------------------------------- */
:root {
--color-primary: #C4704F;
--color-secondary: #3D3D3D;
--color-accent: #FFCBA4;
--color-bg: #FAF7F2;
--color-bg-dark: #F2EDE5;
--color-text: #3D3D3D;
--color-text-muted: #8A7F75;
--font-heading: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Inter', system-ui, sans-serif;
--max-width: 680px;
--spacing-xl: clamp(4rem, 8vw, 8rem);
}
/* ----------------------------------------
Reset & Base
---------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
body {
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-weight: 300;
line-height: 1.7;
}
/* Global links — terracotta, never browser-default blue. Per-context
overrides (footer text-link, beta banner) apply where needed. */
a {
color: var(--color-primary);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover {
color: #b06040;
}
/* Focus rings — terracotta tinted, only when keyboard-navigating
(not on mouse clicks). a11y baseline + brand-consistent. */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* For checkbox / radio, the focus ring goes on our visual checkmark
instead of the hidden input. Already handled in .gdpr-label rule. */
/* ── Modals + toasts ───────────────────────────────────────────
Brand-styled replacements for window.confirm() and window.alert().
Used by showConfirm() / showAlert() / showToast() helpers. */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(45, 30, 20, 0.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
animation: modal-backdrop-in 200ms ease;
}
.modal-card {
background: #fff;
border-radius: 10px;
padding: 1.75rem 1.75rem 1.5rem;
max-width: 420px;
width: 100%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
animation: modal-card-in 220ms cubic-bezier(0.32, 0.72, 0.32, 1.0);
}
.modal-card h2 {
font-family: var(--font-heading);
font-style: italic;
font-size: 1.45rem;
font-weight: 400;
color: var(--color-primary);
margin: 0 0 0.75rem;
line-height: 1.2;
}
.modal-card p {
font-family: var(--font-body);
color: var(--color-secondary);
font-size: 0.95rem;
font-weight: 300;
line-height: 1.55;
margin: 0 0 1.5rem;
}
.modal-actions {
display: flex;
gap: 0.6rem;
justify-content: flex-end;
flex-wrap: wrap;
}
.modal-actions .btn-primary,
.modal-actions .btn-secondary {
flex: 0 0 auto;
padding: 0.65rem 1.2rem;
font-size: 0.82rem;
}
@media (max-width: 480px) {
.modal-actions { flex-direction: column-reverse; }
.modal-actions .btn-primary,
.modal-actions .btn-secondary { width: 100%; }
}
@keyframes modal-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modal-card-in {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.modal-backdrop,
.modal-card { animation: none; }
}
.modal-toast {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
background: var(--color-secondary);
color: #fff;
padding: 0.85rem 1.5rem;
border-radius: 6px;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 400;
z-index: 1001;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
max-width: 90vw;
text-align: center;
animation: modal-toast-in 220ms ease;
}
.modal-toast.error { background: #B45A3F; }
.modal-toast.success { background: #5A8B5A; }
.modal-toast.is-fading {
opacity: 0;
transition: opacity 200ms;
}
@keyframes modal-toast-in {
from { opacity: 0; transform: translate(-50%, 12px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* ----------------------------------------
Top accent bar (replaces top beta-banner on the waitlist homepage)
---------------------------------------- */
.top-bar {
height: 6px;
background-color: var(--color-accent);
}
/* ----------------------------------------
Beta Banner
---------------------------------------- */
.beta-banner {
background-color: var(--color-accent);
color: var(--color-secondary);
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.06em;
text-align: center;
padding: 0.6rem 1.5rem;
}
.beta-banner a {
color: #9E5A38;
text-decoration: underline;
}
/* When the beta banner sits at the bottom (homepage waitlist layout),
give it a touch of breathing room from the footer above. */
.beta-banner-bottom {
margin-top: 1.5rem;
}
/* ----------------------------------------
Header
---------------------------------------- */
.site-header {
display: flex;
align-items: center;
justify-content: center;
padding: 2.5rem 2rem 0;
position: relative;
}
.btn-signin {
position: absolute;
right: 2rem;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-signin:hover {
border-bottom-color: var(--color-primary);
}
.logo {
font-family: var(--font-heading);
font-size: clamp(1.6rem, 3vw, 2rem);
font-weight: 400;
letter-spacing: 0.12em;
color: var(--color-primary);
text-decoration: none;
text-transform: uppercase;
}
.logo:hover {
color: var(--color-secondary);
transition: color 0.2s ease;
}
/* ----------------------------------------
Hero
---------------------------------------- */
.hero {
display: flex;
justify-content: center;
align-items: flex-start;
/* Less bottom padding than top — keeps the form close to the footer
on the waitlist screen, less wasted vertical space between Share/Join
and the bottom beta banner. */
padding: var(--spacing-xl) 2rem 2rem;
}
.hero-inner {
max-width: var(--max-width);
width: 100%;
display: flex;
flex-direction: column;
/* Uniform vertical rhythm — every text block + the button group
sit at the same distance from each other. The button group gets
extra breathing room via .hero-buttons margin-top below. */
gap: 1.75rem;
align-items: center;
text-align: center;
}
.hero-heading {
font-family: var(--font-heading);
/* Cap reduced from 4.8rem to 4.2rem so all three rotating phrases fit on
one line within the hero-inner max-width on desktop. 'around the corner?'
was tipping over the edge at 4.8rem due to letter widths in italic
Cormorant (o/d/r run wider than t/h/l), causing 'Who's' to drop to its
own line. Smaller cap = consistent single-line layout across all phrases. */
font-size: clamp(2.8rem, 7vw, 4.2rem);
font-weight: 300;
line-height: 1.08;
letter-spacing: -0.01em;
color: var(--color-secondary);
margin: 0;
/* No text-wrap: balance — it caused visible re-layout jumps as the
rotating phrase changed length. Greedy wrapping is more stable.
The "?" is glued to the rotating em via the .hero-rotating-glue
wrapper below; internal em wrapping is restored by overriding
white-space back to normal on the em itself. */
}
/* Wraps the rotating em + the trailing "?" so the browser can't break
between them, even at element boundaries (where U+2060 word joiner
alone failed in some viewports). The em re-enables wrapping for its
internal phrase via white-space: normal, so "around the corner?"
wraps as "around the / corner?" if it has to, never as "corner / ?". */
.hero-rotating-glue {
white-space: nowrap;
}
.hero-rotating-glue em {
white-space: normal;
}
.hero-heading em {
font-style: italic;
color: var(--color-primary);
font-weight: 300;
}
.hero-rotating {
display: inline-block;
transition: opacity 0.4s ease;
}
.hero-rotating-fade {
opacity: 0;
}
.hero-subheading {
font-family: var(--font-heading);
font-size: clamp(1.2rem, 2.6vw, 1.5rem);
font-weight: 400;
font-style: italic;
color: var(--color-text-muted);
line-height: 1.5;
margin: 0;
max-width: 520px;
}
.hero-body {
font-family: var(--font-body);
font-size: clamp(1rem, 2vw, 1.15rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
/* Avoid single-word orphans on the last line (e.g. 'down.' alone).
Falls back to greedy wrapping on browsers that don't support it. */
text-wrap: pretty;
/* Was 500px — bumped to 560 so the two body sentences sit on
single lines at desktop sizes and only wrap when the screen
genuinely can't fit them. */
max-width: 560px;
margin: 0;
}
/* Utility — keeps phrases atomic so they break as a group rather
than orphaning a single word on a new line. */
.nowrap {
white-space: nowrap;
}
/* In-body emphasis: italic only, inherits body color. Terracotta is
reserved for the closing-line kicker via .hero-emphasis below. */
.hero-body em {
font-style: italic;
}
/* Reserved for the final line ("...your world got a little bigger today.")
on the homepage. Italic comes from the em element; this just adds the
terracotta color. Specificity (.hero-body em.hero-emphasis) intentionally
beats .hero-body em above. */
.hero-body em.hero-emphasis {
color: var(--color-primary);
}
/* ----------------------------------------
Button
---------------------------------------- */
.btn-primary {
display: inline-block;
background-color: var(--color-primary);
color: #fff;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
padding: 1rem 2.5rem;
border: none;
border-radius: 2px;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.15s ease;
align-self: center;
}
.btn-primary:hover {
background-color: #b06040;
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(196, 112, 79, 0.25);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(196, 112, 79, 0.18);
}
.btn-secondary {
display: inline-block;
background-color: transparent;
color: var(--color-primary);
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
padding: 1rem 2.5rem;
border: 1.5px solid var(--color-primary);
border-radius: 2px;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn-secondary:hover {
background-color: var(--color-primary);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(196, 112, 79, 0.2);
}
.btn-secondary:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(196, 112, 79, 0.15);
}
.hero-buttons {
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
/* Extra breathing room before the call-to-action — sits visually
apart from the rhythm of the copy above (which uses 1.75rem gap). */
margin-top: 1.25rem;
}
/* Equal-width buttons. Sized to comfortably fit 'CREATE AN ACCOUNT' on
one line at 0.9rem with the 0.1em letter-spacing — once the longer
label fits, the shorter one ('SIGN IN') matches via the same fixed
flex-basis, so the pair reads as balanced regardless of label length. */
.hero-buttons .btn-primary,
.hero-buttons .btn-secondary {
flex: 0 0 16rem;
text-align: center;
padding: 0.95rem 1.5rem;
font-size: 0.9rem;
border: 1.5px solid transparent;
white-space: nowrap;
}
.hero-buttons .btn-secondary {
border-color: var(--color-primary);
}
/* ----------------------------------------
Responsive
---------------------------------------- */
@media (max-width: 480px) {
.hero {
padding: 3rem 1.25rem 4rem;
min-height: auto;
}
.hero-inner {
/* Tighter rhythm on small screens */
gap: 1.25rem;
}
.hero-buttons {
/* Stack buttons full-width on phones — easier thumb-reach,
no awkward two-column squeeze on narrow screens. */
flex-direction: column;
width: 100%;
margin-top: 1rem;
}
.hero-buttons .btn-primary,
.hero-buttons .btn-secondary {
flex: none;
width: 100%;
max-width: 22rem;
}
}
/* ----------------------------------------
Password toggle
---------------------------------------- */
.input-with-toggle {
position: relative;
display: flex;
align-items: center;
}
.input-with-toggle input {
width: 100%;
padding-right: 3rem;
}
.password-toggle {
position: absolute;
right: 0.85rem;
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
color: var(--color-text-muted);
transition: color 0.2s ease;
}
.password-toggle:hover {
color: var(--color-primary);
}
.password-toggle svg {
width: 18px;
height: 18px;
}
/* ----------------------------------------
Match flow
---------------------------------------- */
.match-section {
display: flex;
justify-content: center;
padding: clamp(3rem, 6vw, 5rem) 2rem clamp(4rem, 8vw, 7rem);
min-height: calc(100dvh - 7rem);
align-items: flex-start;
}
.match-inner {
max-width: 520px;
width: 100%;
text-align: center;
}
.state { display: none; }
.state.active { display: block; }
.state-heading {
font-family: var(--font-heading);
font-size: clamp(2.2rem, 5vw, 3.4rem);
font-weight: 300;
line-height: 1.1;
color: var(--color-secondary);
margin-bottom: 0.75rem;
}
.state-heading em {
font-style: italic;
color: var(--color-primary);
}
.state-subheading {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.1rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: 2.5rem;
}
.pulse-wrap {
display: flex;
justify-content: center;
align-items: center;
margin: 2.5rem auto;
position: relative;
width: 100px;
height: 100px;
}
.pulse-ring {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: var(--color-accent);
opacity: 0.5;
animation: pulse-expand 2s ease-out infinite;
}
.pulse-ring:nth-child(2) { animation-delay: 0.7s; }
.pulse-ring:nth-child(3) { animation-delay: 1.4s; }
.pulse-core {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--color-primary);
position: relative;
z-index: 1;
}
@keyframes pulse-expand {
0% { transform: scale(0.4); opacity: 0.5; }
100% { transform: scale(1.6); opacity: 0; }
}
.profile-card {
background-color: #fff;
border: 1.5px solid #DDD8D0;
border-radius: 6px;
padding: 2rem;
text-align: left;
margin-bottom: 2rem;
}
.profile-card-top {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 1.75rem;
}
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background-color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.avatar span {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 400;
color: var(--color-primary);
}
.avatar.large {
width: 120px;
height: 120px;
margin: 0 auto 1.5rem;
}
.avatar.large span { font-size: 2.8rem; }
.profile-name {
font-family: var(--font-heading);
font-size: 1.9rem;
font-weight: 300;
color: var(--color-secondary);
}
.profile-row { margin-bottom: 1.1rem; }
.profile-row:last-child { margin-bottom: 0; }
.profile-row-label {
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 0.2rem;
}
.profile-row-text {
font-family: var(--font-body);
font-size: clamp(0.95rem, 2vw, 1.05rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.6;
}
.match-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.btn-outline {
display: inline-block;
background-color: transparent;
color: var(--color-secondary);
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
padding: 1rem 1.5rem;
border: 1.5px solid var(--color-secondary);
border-radius: 2px;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
width: 100%;
}
.btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.match-actions .btn-primary {
align-self: auto;
width: 100%;
text-align: center;
}
.map-placeholder {
background-color: #E8E3DC;
border-radius: 6px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
position: relative;
overflow: hidden;
}
.map-placeholder::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
45deg,
transparent,
transparent 20px,
rgba(255,255,255,0.3) 20px,
rgba(255,255,255,0.3) 21px
);
}
.map-label {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8A7F75;
position: relative;
z-index: 1;
background-color: rgba(232, 227, 220, 0.85);
padding: 0.4rem 0.9rem;
border-radius: 2px;
}
.venue-cards {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 2.5rem;
}
.venue-card {
background-color: #fff;
border: 1.5px solid #DDD8D0;
border-radius: 4px;
padding: 1rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.venue-card:hover {
border-color: var(--color-primary);
background-color: #FFF7F2;
}
.venue-name {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--color-secondary);
margin-bottom: 0.15rem;
}
.venue-meta {
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 300;
color: var(--color-text-muted);
}
.venue-distance {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 400;
color: var(--color-primary);
white-space: nowrap;
margin-left: 1rem;
}
.chat-box {
background-color: #fff;
border: 1.5px solid #DDD8D0;
border-radius: 6px;
overflow: hidden;
margin-bottom: 1rem;
text-align: left;
}
.chat-header {
padding: 1rem 1.25rem 0.75rem;
border-bottom: 1px solid #EDE8E0;
display: flex;
justify-content: space-between;
align-items: center;
}
.chat-header-label {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
}
.chat-countdown {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 500;
color: var(--color-primary);
font-variant-numeric: tabular-nums;
}
.chat-messages {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
min-height: 160px;
}
.chat-msg {
max-width: 75%;
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 300;
line-height: 1.5;
}
.chat-msg-bubble {
padding: 0.6rem 0.9rem;
border-radius: 14px;
display: inline-block;
}
.chat-msg.them .chat-msg-bubble {
background-color: #F2EDE5;
color: var(--color-secondary);
border-bottom-left-radius: 4px;
}
.chat-msg.me {
align-self: flex-end;
text-align: right;
}
.chat-msg.me .chat-msg-bubble {
background-color: var(--color-primary);
color: #fff;
border-bottom-right-radius: 4px;
}
.chat-input-row {
display: flex;
border-top: 1px solid #EDE8E0;
}
.chat-input-row input {
flex: 1;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 300;
color: var(--color-secondary);
background-color: transparent;
border: none;
padding: 0.85rem 1rem;
outline: none;
}
.chat-input-row input::placeholder { color: #C4BAB0; }
.chat-send {
background-color: transparent;
border: none;
padding: 0 1rem;
cursor: pointer;
color: var(--color-primary);
display: flex;
align-items: center;
transition: color 0.2s ease;
}
.chat-send:hover { color: #b06040; }
.chat-send svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.photo-timer {
font-family: var(--font-body);
font-size: 2rem;
font-weight: 300;
color: var(--color-primary);
margin: 1rem 0 0.5rem;
font-variant-numeric: tabular-nums;
}
.photo-note {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.1rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: 1rem;
}
.photo-reveal-img {
width: 120px;
height: 160px;
object-fit: cover;
border-radius: 6px;
margin: 2rem auto;
display: block;
}
.searching-msg {
font-family: var(--font-heading);
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
font-style: italic;
font-weight: 300;
color: var(--color-text-muted);
margin-top: 1.5rem;
}
.confirm-countdown {
display: block;
font-family: var(--font-body);
font-size: clamp(3.5rem, 9vw, 5rem);
font-weight: 300;
color: var(--color-primary);
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
margin: 1.5rem auto 0.75rem;
text-align: center;
}
.confirm-note {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.6;
}
.confirm-expired {
display: none;
font-family: var(--font-heading);
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
font-style: italic;
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.5;
margin-top: 1.5rem;
}
.confirm-expired.visible { display: block; }
.final-heading {
font-family: var(--font-heading);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 300;
font-style: italic;
color: var(--color-primary);
line-height: 1.2;
margin-bottom: 1rem;
}
.final-body {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.15rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
}
.icebreaker {
margin-top: 2.5rem;
padding-top: 2.5rem;
border-top: 1px solid #EDE8E0;
text-align: center;
}
.icebreaker-label {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 1rem;
}
.icebreaker-question {
font-family: var(--font-heading);
font-size: clamp(1.3rem, 3vw, 1.7rem);
font-weight: 300;
font-style: italic;
color: var(--color-secondary);
line-height: 1.4;
margin-bottom: 1rem;
}
.icebreaker-note {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.6;
}
/* ----------------------------------------
Footer
---------------------------------------- */
.site-footer {
text-align: center;
padding: 3rem 2rem 2.5rem;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 300;
color: var(--color-text-muted);
letter-spacing: 0.03em;
}
.site-footer a {
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
transition: border-color 0.2s ease;
}
.site-footer a:hover {
border-bottom-color: var(--color-primary);
}
/* ----------------------------------------
Settings
---------------------------------------- */
.settings-section {
display: flex;
justify-content: center;
padding: clamp(3rem, 6vw, 5rem) 2rem clamp(4rem, 8vw, 7rem);
}
.settings-inner {
max-width: 560px;
width: 100%;
text-align: center;
}
.section-heading {
font-family: var(--font-heading);
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 300;
line-height: 1.1;
color: var(--color-secondary);
margin-bottom: 0.75rem;
}
.section-heading em {
font-style: italic;
color: var(--color-primary);
}
.section-subheading {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.15rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: 3rem;
}
.plan-cards {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2.5rem;
}
.plan-card {
border: 1.5px solid #DDD8D0;
border-radius: 4px;
padding: 1.75rem 2rem;
cursor: pointer;
text-align: left;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
background-color: #fff;
position: relative;
user-select: none;
}
.plan-card:hover {
border-color: var(--color-primary);
background-color: #FFF7F2;
}
.plan-card.selected {
border-color: var(--color-primary);
background-color: #FFF7F2;
box-shadow: 0 0 0 1px var(--color-primary);
}
.plan-card input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.plan-card-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.plan-card-radio {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid #C4BAB0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s ease;
}
.plan-card.selected .plan-card-radio { border-color: var(--color-primary); }
.plan-card-radio::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--color-primary);
opacity: 0;
transition: opacity 0.15s ease;
}
.plan-card.selected .plan-card-radio::after { opacity: 1; }
.plan-card-name {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
}
.plan-card-description {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.1rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.65;
padding-left: calc(18px + 0.75rem);
}
.section-divider {
border: none;
border-top: 1px solid #EDE8E0;
margin: clamp(3rem, 6vw, 5rem) 0;
}
#section-reminder { display: none; }
#section-reminder.visible { display: block; }
.settings-form { text-align: left; }
.settings-form .form-field {
display: flex;
flex-direction: column;
margin-bottom: 2.5rem;
}
.settings-form .form-field label {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
margin-bottom: 0.6rem;
}
.settings-form input[type="time"] {
font-family: var(--font-body);
font-size: 1.1rem;
font-weight: 300;
color: var(--color-secondary);
background-color: #fff;
border: 1px solid #DDD8D0;
border-radius: 2px;
padding: 0.85rem 1rem;
outline: none;
width: 100%;
max-width: 220px;
transition: border-color 0.2s ease;
}
.settings-form input[type="time"]:focus { border-color: var(--color-primary); }
.day-checkboxes {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.day-checkbox { position: relative; }
.day-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.day-checkbox label {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border: 1.5px solid #DDD8D0;
border-radius: 2px;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
background-color: #fff;
margin-bottom: 0;
}
.day-checkbox input[type="checkbox"]:checked + label {
border-color: var(--color-primary);
background-color: var(--color-primary);
color: #fff;
}
.day-checkbox label:hover { border-color: var(--color-primary); }
.form-submit {
display: flex;
justify-content: center;
margin-top: 1rem;
}
/* ----------------------------------------
Quiz pills (signup)
---------------------------------------- */
.quiz-question-label {
font-family: var(--font-body);
font-size: clamp(0.95rem, 2vw, 1.05rem);
font-weight: 400;
color: var(--color-secondary);
margin-bottom: 0.9rem;
line-height: 1.5;
display: block;
text-transform: none;
letter-spacing: 0;
}
.quiz-pills { flex-direction: column; gap: 0.5rem; }
.quiz-unanswered {
outline: 2px solid var(--color-primary);
outline-offset: 6px;
border-radius: 4px;
animation: quiz-shake 0.3s ease;
}
@keyframes quiz-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
.quiz-pills .pill {
border-radius: 4px;
text-align: left;
padding: 0.75rem 1.1rem;
font-size: 0.92rem;
line-height: 1.4;
}
/* ----------------------------------------
Pill buttons (shared)
---------------------------------------- */
.pill-group {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.pill {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.05em;
color: var(--color-text-muted);
background-color: #fff;
border: 1.5px solid #DDD8D0;
border-radius: 100px;
padding: 0.5rem 1.25rem;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
user-select: none;
}
.pill:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.pill.selected {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
/* ----------------------------------------
Logbook
---------------------------------------- */
.logbook-section {
display: flex;
justify-content: center;
padding: clamp(3rem, 6vw, 5rem) 2rem clamp(4rem, 8vw, 7rem);
}
.logbook-inner {
max-width: 560px;
width: 100%;
text-align: center;
}
.logbook-heading {
font-family: var(--font-heading);
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 300;
line-height: 1.1;
color: var(--color-secondary);
margin-bottom: 0.75rem;
}
.logbook-subheading {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.15rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.log-field {
margin-bottom: 2.5rem;
text-align: left;
}
.log-label {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
display: block;
margin-bottom: 0.9rem;
text-align: left;
}
.log-sublabel {
font-family: var(--font-body);
font-size: clamp(0.9rem, 1.8vw, 1rem);
font-weight: 300;
color: var(--color-text-muted);
margin-bottom: 0.9rem;
line-height: 1.5;
text-align: left;
}
.log-textarea {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
color: var(--color-secondary);
background-color: #fff;
border: 1px solid #DDD8D0;
border-radius: 2px;
padding: 0.85rem 1rem;
outline: none;
resize: vertical;
min-height: 160px;
line-height: 1.7;
width: 100%;
transition: border-color 0.2s ease;
}
.log-textarea:focus { border-color: var(--color-primary); }
.log-textarea::placeholder {
color: #C4BAB0;
font-weight: 300;
}
.star-group {
display: flex;
gap: 0.4rem;
justify-content: flex-start;
}
.star {
font-size: 2rem;
color: #DDD8D0;
cursor: pointer;
transition: color 0.15s ease;
line-height: 1;
user-select: none;
}
.star.lit { color: var(--color-primary); }
.star:hover { color: var(--color-primary); }
.log-divider {
border: none;
border-top: 1px solid #EDE8E0;
margin: 0.5rem 0 3rem;
}
.log-field-remind {
margin-top: 1.5rem;
margin-bottom: 5rem;
}
.log-submit {
display: flex;
justify-content: flex-start;
margin-top: 2.5rem;
}
.log-private-note {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.6;
text-align: center;
margin-top: 0.75rem;
}
.log-privacy-footer {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.6;
text-align: center;
margin-top: 2rem;
}
.log-privacy-footer a {
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
}
.log-privacy-footer a:hover { border-bottom-color: var(--color-primary); }
#logbook-confirmation {
display: none;
text-align: center;
padding: 2rem 0 1rem;
}
#logbook-confirmation.visible { display: block; }
#logbook-confirmation p {
font-family: var(--font-heading);
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
font-weight: 300;
font-style: italic;
color: var(--color-text-muted);
line-height: 1.5;
margin-bottom: 2rem;
}
#logbook-confirmation a {
display: inline-block;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
}
#logbook-confirmation a:hover { border-bottom-color: var(--color-primary); }
/* ----------------------------------------
Connections
---------------------------------------- */
.connections-section {
display: flex;
justify-content: center;
padding: clamp(3rem, 6vw, 5rem) 2rem clamp(4rem, 8vw, 7rem);
}
.connections-inner {
max-width: 560px;
width: 100%;
}
.connections-heading {
font-family: var(--font-heading);
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 300;
line-height: 1.1;
color: var(--color-secondary);
margin-bottom: 0.75rem;
text-align: center;
}
.connections-subheading {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.15rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
text-align: center;
}
.connection-card {
border: 1.5px solid #DDD8D0;
border-radius: 4px;
padding: 1.5rem 1.75rem;
background-color: #fff;
margin-bottom: 1rem;
}
.connection-card-top {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.4rem;
gap: 1rem;
}
.connection-card-name {
font-family: var(--font-heading);
font-size: clamp(1.3rem, 3vw, 1.6rem);
font-weight: 400;
color: var(--color-secondary);
}
.connection-card-date {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 400;
color: var(--color-text-muted);
white-space: nowrap;
}
.connection-card-stars {
font-size: 1rem;
color: var(--color-primary);
letter-spacing: 0.05em;
margin-bottom: 0.6rem;
}
.connection-card-meta {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 0.6rem;
}
.connection-card-notes {
font-family: var(--font-body);
font-size: clamp(0.9rem, 1.8vw, 1rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.6;
margin-bottom: 0.6rem;
}
.connection-card-remind {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 400;
color: var(--color-primary);
margin-top: 0.75rem;
}
.connections-empty-text {
font-family: var(--font-body);
font-size: clamp(1rem, 2vw, 1.1rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
text-align: center;
margin-bottom: 2rem;
}
.connections-back {
display: block;
text-align: center;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
width: fit-content;
margin: 0 auto;
}
.connections-back:hover { border-bottom-color: var(--color-primary); }
/* ----------------------------------------
Profile
---------------------------------------- */
.profile-section {
display: flex;
justify-content: center;
padding: clamp(3rem, 6vw, 5rem) 2rem clamp(4rem, 8vw, 7rem);
}
.profile-inner {
max-width: 560px;
width: 100%;
}
.profile-heading {
font-family: var(--font-heading);
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 300;
line-height: 1.1;
color: var(--color-secondary);
margin-bottom: clamp(2rem, 4vw, 3rem);
text-align: center;
}
.profile-photo-field {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
.profile-photo-wrap {
position: relative;
width: 120px;
height: 160px;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
background-color: var(--color-bg-dark);
}
.profile-photo-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.profile-photo-overlay {
position: absolute;
inset: 0;
background-color: rgba(61, 61, 61, 0.55);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
}
.profile-photo-wrap:hover .profile-photo-overlay { opacity: 1; }
.profile-photo-overlay span {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
pointer-events: none;
}
.profile-photo-overlay input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.profile-divider {
border: none;
border-top: 1px solid #EDE8E0;
margin: 0.5rem 0 2.5rem;
}
.profile-field-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
@media (max-width: 480px) {
.profile-field-group { grid-template-columns: 1fr; gap: 0; }
}
.profile-field {
display: flex;
flex-direction: column;
margin-bottom: 2rem;
}
.profile-label {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
margin-bottom: 0.6rem;
}
.profile-field input[type="text"] {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
color: var(--color-secondary);
background-color: #fff;
border: 1px solid #DDD8D0;
border-radius: 2px;
padding: 0.85rem 1rem;
outline: none;
transition: border-color 0.2s ease;
width: 100%;
}
.profile-field input[type="text"]:focus { border-color: var(--color-primary); }
.profile-textarea {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
color: var(--color-secondary);
background-color: #fff;
border: 1px solid #DDD8D0;
border-radius: 2px;
padding: 0.85rem 1rem;
outline: none;
resize: vertical;
min-height: 120px;
line-height: 1.7;
width: 100%;
transition: border-color 0.2s ease;
}
.profile-textarea:focus { border-color: var(--color-primary); }
.profile-textarea::placeholder,
.profile-field input::placeholder {
color: #C4BAB0;
font-weight: 300;
}
.profile-field-note {
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.5;
margin-top: 0.5rem;
}
.profile-text-btn {
background: none;
border: none;
color: var(--color-primary);
font-family: var(--font-body);
font-size: 0.85rem;
cursor: pointer;
text-decoration: underline;
padding: 0;
margin-top: 0.5rem;
}
.profile-error {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
color: var(--color-primary);
margin-bottom: 1rem;
line-height: 1.5;
}
.profile-submit {
display: flex;
justify-content: flex-start;
}
.profile-links {
display: flex;
justify-content: center;
gap: 2.5rem;
padding: 1.5rem 0 0;
}
.profile-link {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.05em;
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
transition: border-color 0.2s ease;
}
.profile-link:hover { border-bottom-color: var(--color-primary); }
.profile-view-section {
margin-bottom: 2rem;
text-align: left;
}
.profile-view-label {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 0.4rem;
}
.profile-view-body {
font-family: var(--font-body);
font-size: clamp(1rem, 2vw, 1.1rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
}
.profile-view-actions {
display: flex;
gap: 1rem;
justify-content: center;
align-items: stretch;
margin-top: clamp(2.5rem, 5vw, 4rem);
}
.profile-view-actions .btn-primary,
.profile-view-actions .btn-outline {
flex: 1;
max-width: 260px;
width: auto;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
}
.profile-view-footer {
text-align: center;
margin-top: 1.75rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.profile-view-footer a {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 300;
color: var(--color-text-muted);
text-decoration: none;
border-bottom: 1px solid #DDD8D0;
transition: color 0.2s ease, border-color 0.2s ease;
}
.profile-view-footer a:hover {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
#delete-account-link {
color: #B85C5C !important;
border-bottom-color: #B85C5C !important;
font-size: 0.8rem !important;
}
#delete-account-link:hover {
color: #8B3A3A !important;
border-bottom-color: #8B3A3A !important;
}
#delete-confirm-panel {
display: none;
margin-top: 2rem;
padding: 1.5rem;
background: #FDF5F5;
border: 1px solid #E8C5C5;
border-radius: 8px;
text-align: center;
}
#delete-confirm-panel.visible { display: block; }
.delete-confirm-heading {
font-family: var(--font-heading);
font-size: 1.2rem;
color: #8B3A3A;
margin-bottom: 0.75rem;
}
.delete-confirm-body {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--color-secondary);
margin-bottom: 0.75rem;
line-height: 1.5;
}
#delete-confirm-input {
width: 100%;
max-width: 280px;
padding: 0.6rem 0.9rem;
border: 1px solid #E8C5C5;
border-radius: 4px;
font-family: var(--font-body);
font-size: 0.9rem;
text-align: center;
margin-bottom: 1rem;
box-sizing: border-box;
}
#delete-confirm-input:focus {
outline: none;
border-color: #B85C5C;
}
.delete-confirm-actions {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.btn-danger {
background: #B85C5C;
color: white;
border: none;
padding: 0.75rem 1.5rem;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 500;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s ease;
}
.btn-danger:hover:not(:disabled) { background: #8B3A3A; }
.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }
.delete-confirm-error {
font-family: var(--font-body);
font-size: 0.85rem;
color: #B85C5C;
margin-top: 1rem;
}
.profile-edit-actions {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
/* ── Login / auth pages (login, forgot-password, reset-password, check-email) ── */
.login-section,
.auth-section {
display: flex;
justify-content: center;
align-items: flex-start;
padding: clamp(3rem, 6vw, 5rem) 2rem clamp(4rem, 8vw, 7rem);
}
.auth-inner {
max-width: 460px;
width: 100%;
text-align: center;
}
.auth-heading {
font-family: var(--font-heading);
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 300;
color: var(--color-secondary);
margin-bottom: 1.5rem;
}
.auth-subheading {
font-family: var(--font-body);
font-size: clamp(0.95rem, 2vw, 1.1rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: 1rem;
}
.login-form {
max-width: 460px;
width: 100%;
}
.login-heading {
font-family: var(--font-heading);
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 300;
line-height: 1.1;
color: var(--color-secondary);
margin-bottom: 0.5rem;
text-align: center;
}
.login-heading em {
font-style: italic;
color: var(--color-primary);
}
.login-subheading {
font-family: var(--font-body);
font-size: clamp(0.95rem, 2vw, 1.1rem);
font-weight: 300;
color: var(--color-text-muted);
text-align: center;
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
line-height: 1.7;
}
.form-field {
display: flex;
flex-direction: column;
margin-bottom: 1.75rem;
}
.form-field label {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
margin-bottom: 0.6rem;
}
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="text"],
.form-field input[type="date"],
.form-field input[type="tel"],
.form-field select {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
color: var(--color-secondary);
background-color: #fff;
border: 1px solid #DDD8D0;
border-radius: 2px;
padding: 0.85rem 1rem;
outline: none;
transition: border-color 0.2s ease;
width: 100%;
}
.form-field select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
.form-field textarea {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
color: var(--color-secondary);
background-color: #fff;
border: 1px solid #DDD8D0;
border-radius: 2px;
padding: 0.85rem 1rem;
outline: none;
resize: vertical;
min-height: 120px;
line-height: 1.7;
transition: border-color 0.2s ease;
width: 100%;
}
.form-field input:focus,
.form-field textarea:focus {
border-color: var(--color-primary);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: #C4BAB0;
font-weight: 300;
}
.form-field .field-note {
font-family: var(--font-body);
/* Aligned to .form-section-subtitle 0.85rem so per-field hints
read at the same visual rank as the section descriptions
above them — no surprise size jump from "All optional…"
down to the under-input notes. */
font-size: 0.85rem;
font-weight: 300;
color: var(--color-text-muted);
margin-top: 0.5rem;
line-height: 1.5;
}
.login-error {
display: none;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
color: var(--color-primary);
margin-top: 0.5rem;
line-height: 1.5;
}
.login-error.visible {
display: block;
}
.login-submit {
margin-top: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.login-submit .btn-primary {
width: 100%;
text-align: center;
}
.login-footer-links {
display: flex;
justify-content: center;
gap: 2rem;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 300;
color: var(--color-text-muted);
}
.login-footer-links a {
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
transition: border-color 0.2s ease;
}
.login-footer-links a:hover {
border-bottom-color: var(--color-primary);
}
.login-footer-link {
margin-top: 1.5rem;
text-align: center;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 300;
color: var(--color-text-muted);
}
.login-footer-link a {
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
transition: border-color 0.2s ease;
}
.login-footer-link a:hover {
border-bottom-color: var(--color-primary);
}
/* ── Signup page ── */
.signup-intro {
text-align: center;
max-width: 540px;
margin: 0 auto var(--spacing-xl);
}
.signup-intro h1 {
font-family: var(--font-heading);
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 300;
line-height: 1.1;
color: var(--color-secondary);
margin-bottom: 1.25rem;
}
.signup-intro h1 em {
font-style: italic;
color: var(--color-primary);
}
.signup-intro p {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.25rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
}
.signup-section {
display: flex;
justify-content: center;
padding: clamp(3rem, 6vw, 5rem) 2rem clamp(4rem, 8vw, 7rem);
}
.signup-form {
max-width: 600px;
width: 100%;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.photo-upload-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1.5px dashed #DDD8D0;
/* Circular drop-zone — visually anticipates the round avatar
output. Width controlled to keep it from going edge-to-edge. */
border-radius: 50%;
width: 220px;
height: 220px;
margin: 0 auto;
padding: 1.5rem;
background-color: #FDFAF6;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
position: relative;
text-align: center;
}
.photo-upload-area:hover {
border-color: var(--color-primary);
background-color: #FFF7F2;
}
.photo-upload-area input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.photo-upload-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.75rem;
flex-shrink: 0;
}
.photo-upload-icon svg {
width: 18px;
height: 18px;
stroke: var(--color-primary);
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.photo-upload-label {
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 400;
color: var(--color-secondary);
}
.photo-upload-label span {
color: var(--color-primary);
text-decoration: underline;
}
.form-divider {
border: none;
border-top: 1px solid #EDE8E0;
margin: 1rem 0 3rem;
}
.form-section-title {
font-family: var(--font-heading);
font-size: clamp(1.4rem, 3vw, 1.9rem);
font-weight: 300;
font-style: italic;
color: var(--color-primary);
margin-bottom: 0.4rem;
}
.form-section-subtitle {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 300;
color: var(--color-text-muted);
margin-bottom: 2.5rem;
line-height: 1.6;
}
/* "← Back" link at the top of privacy.html / terms.html — gives mobile
users a clear way to return to signup without relying on browser back. */
.page-back-link {
display: inline-block;
margin-bottom: 1.5rem;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 400;
color: var(--color-primary);
text-decoration: none;
}
.page-back-link:hover,
.page-back-link:focus {
text-decoration: underline;
}
/* Inline pill used in form-section-title to flag "All optional"
without competing with the italic Cormorant heading itself. */
.form-section-pill {
display: inline-block;
vertical-align: middle;
margin-left: 0.6em;
padding: 0.18em 0.7em;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
font-style: normal;
letter-spacing: 0.02em;
color: var(--color-primary);
background: rgba(196, 112, 79, 0.12);
border-radius: 999px;
white-space: nowrap;
}
.field-university-note {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.6;
margin-top: 0.5rem;
}
.field-email-error {
display: none;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
color: var(--color-primary);
margin-top: 0.5rem;
line-height: 1.5;
}
.field-email-error.visible {
display: block;
}
input.input-error {
border-color: var(--color-primary);
}
.gdpr-consent {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid #EDE8E0;
}
.gdpr-label {
display: flex;
align-items: flex-start;
gap: 1rem;
cursor: pointer;
/* Larger total tap area — full row is clickable, comfortable on
phones. Padding adds visual breathing room between consents. */
padding: 0.75rem 0;
margin-bottom: 0.25rem;
min-height: 44px;
transition: background-color 0.15s ease;
border-radius: 4px;
}
.gdpr-label:hover {
background-color: rgba(196, 112, 79, 0.04);
}
.gdpr-label input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.gdpr-checkmark {
/* Bigger box — 24×24 sits comfortably with the body text and
gives a meaningful tap surface independent of the row. */
width: 24px;
height: 24px;
min-width: 24px;
border: 1.5px solid #DDD8D0;
border-radius: 4px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.05rem;
transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.gdpr-label:hover .gdpr-checkmark {
border-color: var(--color-primary);
}
.gdpr-label input[type="checkbox"]:focus-visible + .gdpr-checkmark {
box-shadow: 0 0 0 3px rgba(196, 112, 79, 0.25);
}
.gdpr-checkmark::after {
content: '';
width: 6px;
height: 11px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg) translate(-1px, -1px) scale(0.7);
opacity: 0;
transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.32, 0.72, 0, 1.6);
}
.gdpr-label input[type="checkbox"]:checked + .gdpr-checkmark::after {
transform: rotate(45deg) translate(-1px, -1px) scale(1);
}
.gdpr-label input[type="checkbox"]:checked + .gdpr-checkmark {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.gdpr-label input[type="checkbox"]:checked + .gdpr-checkmark::after {
opacity: 1;
}
.gdpr-label:hover .gdpr-checkmark {
border-color: var(--color-primary);
}
.gdpr-text {
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 300;
color: var(--color-secondary);
line-height: 1.65;
}
.gdpr-text a {
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
transition: border-color 0.2s ease;
}
.gdpr-text a:hover {
border-bottom-color: var(--color-primary);
}
.gdpr-note {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.6;
padding-left: calc(20px + 0.85rem);
}
.gdpr-note a {
color: var(--color-text-muted);
text-decoration: none;
border-bottom: 1px solid #DDD8D0;
transition: color 0.2s ease, border-color 0.2s ease;
}
.gdpr-note a:hover {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
@media (max-width: 520px) {
.form-row {
grid-template-columns: 1fr;
gap: 0;
}
}
/* ── Dashboard ── */
.dashboard-section {
display: flex;
justify-content: center;
padding: clamp(3rem, 6vw, 5rem) 2rem clamp(4rem, 8vw, 7rem);
}
.dashboard-inner {
max-width: 680px;
width: 100%;
text-align: center;
}
.dashboard-heading {
font-family: var(--font-heading);
font-size: clamp(2.8rem, 6vw, 4.2rem);
font-weight: 300;
color: var(--color-secondary);
line-height: 1.1;
margin-bottom: 0.75rem;
}
.dashboard-subheading {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.15rem);
font-weight: 300;
color: var(--color-text-muted);
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.nav-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.nav-card {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
background-color: #fff;
border: 1.5px solid #DDD8D0;
border-radius: 4px;
padding: 1.75rem 1.5rem;
text-decoration: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.nav-card:hover {
border-color: var(--color-primary);
background-color: #FFF7F2;
box-shadow: 0 2px 16px rgba(196, 112, 79, 0.08);
}
.nav-card-label {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 0.6rem;
}
.nav-card-description {
font-family: var(--font-body);
font-size: clamp(0.92rem, 1.8vw, 1rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.6;
}
@media (max-width: 580px) {
.nav-cards {
grid-template-columns: 1fr;
}
}
/* ── Dashboard secondary nav ── */
.dashboard-secondary {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.5rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #DDD8D0;
}
.dashboard-secondary-link {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
color: var(--color-text-muted);
text-decoration: none;
letter-spacing: 0.02em;
transition: color 0.2s ease;
}
.dashboard-secondary-link:hover {
color: var(--color-primary);
}
/* ── Daily setup page ── */
.setup-section {
display: flex;
justify-content: center;
padding: clamp(3rem, 6vw, 5rem) 2rem clamp(4rem, 8vw, 7rem);
}
.setup-inner {
max-width: 560px;
width: 100%;
text-align: center;
}
.setup-heading {
font-family: var(--font-heading);
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 300;
line-height: 1.1;
color: var(--color-secondary);
margin-bottom: 0.75rem;
}
.setup-subheading {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.15rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.step-label {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
text-align: left;
margin-bottom: 1rem;
}
.mode-cards {
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-bottom: 2.5rem;
}
.mode-card {
border: 1.5px solid #DDD8D0;
border-radius: 4px;
padding: 1.5rem 1.75rem;
cursor: pointer;
text-align: left;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
background-color: #fff;
position: relative;
user-select: none;
}
.mode-card:hover {
border-color: var(--color-primary);
background-color: #FFF7F2;
}
.mode-card.selected {
border-color: var(--color-primary);
background-color: #FFF7F2;
box-shadow: 0 0 0 1px var(--color-primary);
}
.mode-card input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.mode-card-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.4rem;
}
.mode-card-radio {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid #C4BAB0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s ease;
}
.mode-card.selected .mode-card-radio {
border-color: var(--color-primary);
}
.mode-card-radio::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--color-primary);
opacity: 0;
transition: opacity 0.15s ease;
}
.mode-card.selected .mode-card-radio::after {
opacity: 1;
}
.mode-card-name {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
}
.mode-card-description {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.1rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.6;
padding-left: calc(18px + 0.75rem);
}
#step-time {
display: none;
margin-bottom: 2.5rem;
text-align: left;
}
#step-time.visible {
display: block;
}
.time-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.form-field input[type="time"] {
font-family: var(--font-body);
font-size: 1.1rem;
font-weight: 300;
color: var(--color-secondary);
background-color: #fff;
border: 1px solid #DDD8D0;
border-radius: 2px;
padding: 0.85rem 1rem;
outline: none;
width: 100%;
transition: border-color 0.2s ease;
}
.form-field input[type="time"]:focus {
border-color: var(--color-primary);
}
.btn-primary:disabled {
background-color: #DDD8D0;
color: #B0A89F;
cursor: not-allowed;
transform: none;
}
.btn-primary:disabled:hover {
background-color: #DDD8D0;
transform: none;
}
#incognito-message {
display: none;
text-align: center;
padding: 2.5rem 0 1rem;
}
#incognito-message.visible {
display: block;
}
#incognito-message p {
font-family: var(--font-heading);
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
font-weight: 300;
font-style: italic;
color: var(--color-text-muted);
line-height: 1.4;
}
#incognito-message a {
display: inline-block;
margin-top: 1.5rem;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
}
#incognito-message a:hover {
border-bottom-color: var(--color-primary);
}
#incognito-message a + a {
margin-left: 2rem;
}
.location-note {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.6;
text-align: center;
margin-bottom: 1.25rem;
}
.location-pin {
font-size: 14px;
margin-right: 0.3em;
display: inline-block;
filter: grayscale(1) sepia(1) saturate(3) hue-rotate(330deg) brightness(0.75);
}
#location-message {
display: none;
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.1rem);
font-weight: 300;
line-height: 1.7;
color: var(--color-primary);
margin-top: 1.5rem;
padding: 1.25rem 1.5rem;
background-color: #FFF7F2;
border: 1.5px solid var(--color-accent);
border-radius: 4px;
text-align: left;
}
#location-message.visible {
display: block;
}
#notification-card {
display: none;
}
#notification-card.visible {
display: block;
}
.notif-done-msg {
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 400;
color: var(--color-primary);
margin-bottom: 1.5rem;
letter-spacing: 0.01em;
}
.notif-phone-card {
background-color: #fff;
border: 1.5px solid #DDD8D0;
border-radius: 12px;
padding: 1.25rem 1.5rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.07);
text-align: left;
margin-bottom: 2rem;
}
.notif-app-name {
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-primary);
display: block;
margin-bottom: 0.5rem;
}
.notif-message {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.1rem);
font-weight: 300;
color: var(--color-secondary);
line-height: 1.5;
}
.notif-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
}
.notif-actions .btn-primary,
.notif-actions .btn-outline {
width: 100%;
text-align: center;
}
.btn-text-link {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 300;
color: var(--color-text-muted);
text-decoration: none;
border-bottom: 1px solid #DDD8D0;
padding-bottom: 1px;
transition: color 0.2s ease, border-color 0.2s ease;
cursor: pointer;
}
.btn-text-link:hover {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.btn-outline-terracotta {
display: inline-block;
background-color: var(--color-bg);
color: var(--color-primary);
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 1rem 2.5rem;
border: 1.5px solid var(--color-primary);
border-radius: 2px;
cursor: pointer;
width: 100%;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn-outline-terracotta:hover {
background-color: #FFF7F2;
transform: translateY(-1px);
}
.btn-outline-terracotta:active {
transform: translateY(0);
}
.btn-charcoal {
display: inline-block;
background-color: var(--color-secondary);
color: #fff;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 1rem 2.5rem;
border: none;
border-radius: 2px;
cursor: pointer;
width: 100%;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn-charcoal:hover {
background-color: #2a2a2a;
transform: translateY(-1px);
}
.btn-charcoal:active {
transform: translateY(0);
}
.notif-location-msg {
display: none;
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.1rem);
font-weight: 300;
line-height: 1.7;
color: var(--color-primary);
margin-bottom: 1.5rem;
padding: 1.25rem 1.5rem;
background-color: #FFF7F2;
border: 1.5px solid var(--color-accent);
border-radius: 4px;
text-align: left;
}
.notif-location-msg.visible {
display: block;
}
#plans-changed-message {
display: none;
text-align: center;
padding: 2.5rem 0 1rem;
}
#plans-changed-message.visible {
display: block;
}
#plans-changed-message p {
font-family: var(--font-heading);
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
font-weight: 300;
font-style: italic;
color: var(--color-text-muted);
line-height: 1.4;
margin-bottom: 1.5rem;
}
#plans-changed-message a {
display: inline-block;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
}
#plans-changed-message a:hover {
border-bottom-color: var(--color-primary);
}
#cancelled-message {
display: none;
text-align: center;
padding: 2.5rem 0 1rem;
}
#cancelled-message.visible {
display: block;
}
#cancelled-message p:first-child {
font-family: var(--font-heading);
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
font-weight: 300;
font-style: italic;
color: var(--color-text-muted);
line-height: 1.4;
margin-bottom: 1rem;
}
#cancelled-message p:last-of-type {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--color-text-muted);
line-height: 1.6;
margin-bottom: 1.5rem;
}
#cancelled-message a {
display: inline-block;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
}
#cancelled-message a:hover {
border-bottom-color: var(--color-primary);
}
#adjust-time-section {
display: none;
text-align: left;
}
#adjust-time-section.visible {
display: block;
}
.adjust-heading {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 300;
color: var(--color-secondary);
text-align: center;
margin-bottom: 0.5rem;
}
.adjust-subheading {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.1rem);
font-weight: 300;
color: var(--color-text-muted);
text-align: center;
margin-bottom: 2rem;
}
.adjust-submit {
display: flex;
justify-content: center;
margin-top: 1.5rem;
}
/* ── After meeting page ── */
.after-section {
display: flex;
justify-content: center;
padding: clamp(3rem, 6vw, 5rem) 2rem clamp(4rem, 8vw, 7rem);
}
.after-inner {
max-width: 560px;
width: 100%;
text-align: center;
}
.after-heading {
font-family: var(--font-heading);
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 300;
line-height: 1.1;
color: var(--color-secondary);
margin-bottom: 0.75rem;
}
.after-subheading {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.15rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.outcome-cards {
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-bottom: 2rem;
}
.outcome-card {
border: 1.5px solid #DDD8D0;
border-radius: 4px;
padding: 1.5rem 1.75rem;
cursor: pointer;
text-align: left;
background-color: #fff;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
user-select: none;
}
.outcome-card:hover {
border-color: var(--color-primary);
background-color: #FFF7F2;
}
.outcome-card-name {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 0.4rem;
}
.outcome-card.report .outcome-card-name { color: #9B6B6B; }
.outcome-card.report { border-color: #E8DDD0; }
.outcome-card.report:hover {
border-color: #9B6B6B;
background-color: #FDF8F8;
}
.outcome-card-description {
font-family: var(--font-body);
font-size: clamp(1rem, 2.1vw, 1.1rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.6;
}
.response-message {
display: none;
text-align: center;
padding: 2rem 0 1rem;
}
.response-message.visible { display: block; }
.response-message p {
font-family: var(--font-heading);
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
font-weight: 300;
font-style: italic;
color: var(--color-text-muted);
line-height: 1.5;
margin-bottom: 2rem;
}
.response-message a {
display: inline-block;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
}
.response-message a:hover { border-bottom-color: var(--color-primary); }
#report-form {
display: none;
text-align: left;
}
#report-form.visible { display: block; }
.report-textarea {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
color: var(--color-secondary);
background-color: #fff;
border: 1px solid #DDD8D0;
border-radius: 2px;
padding: 0.85rem 1rem;
outline: none;
resize: vertical;
min-height: 160px;
line-height: 1.7;
width: 100%;
transition: border-color 0.2s ease;
margin-top: 0.6rem;
}
.report-textarea:focus { border-color: var(--color-primary); }
.report-textarea::placeholder {
color: #C4BAB0;
font-weight: 300;
}
.report-field { margin-bottom: 2.5rem; }
.report-label {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
display: block;
margin-bottom: 0.9rem;
}
.report-privacy-note {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.6;
margin-top: 0.85rem;
}
.report-privacy-note a {
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
}
.report-privacy-note a:hover { border-bottom-color: var(--color-primary); }
.report-submit {
display: flex;
justify-content: flex-start;
margin-top: 2.5rem;
}
#report-confirmation {
display: none;
text-align: center;
padding: 2rem 0 1rem;
}
#report-confirmation.visible { display: block; }
#report-confirmation p {
font-family: var(--font-heading);
font-size: clamp(1.4rem, 3vw, 1.9rem);
font-weight: 300;
font-style: italic;
color: var(--color-text-muted);
line-height: 1.6;
margin-bottom: 2rem;
}
#report-confirmation a {
display: inline-block;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
}
#report-confirmation a:hover { border-bottom-color: var(--color-primary); }
/* ── Privacy policy and Terms pages ── */
.privacy-section {
display: flex;
justify-content: center;
padding: clamp(3rem, 6vw, 5rem) 2rem clamp(3rem, 6vw, 5rem);
}
.privacy-inner {
max-width: 680px;
width: 100%;
}
.privacy-heading {
font-family: var(--font-heading);
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 300;
line-height: 1.1;
color: var(--color-secondary);
margin-bottom: 0.5rem;
}
.privacy-updated {
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 300;
color: var(--color-text-muted);
margin-bottom: clamp(2.5rem, 5vw, 4rem);
letter-spacing: 0.02em;
}
.privacy-block {
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.privacy-block-heading {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 1rem;
}
.privacy-block p {
font-family: var(--font-body);
font-size: clamp(0.95rem, 1.8vw, 1.05rem);
font-weight: 300;
color: var(--color-secondary);
line-height: 1.85;
margin-bottom: 0.85rem;
}
.privacy-block p:last-child {
margin-bottom: 0;
}
.privacy-block ul {
list-style: none;
padding: 0;
margin: 0;
}
.privacy-block ul li {
font-family: var(--font-body);
font-size: clamp(0.95rem, 1.8vw, 1.05rem);
font-weight: 300;
color: var(--color-secondary);
line-height: 1.85;
padding-left: 1.25rem;
position: relative;
margin-bottom: 0.35rem;
}
.privacy-block ul li::before {
content: '';
position: absolute;
left: 0;
top: 0.75em;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: var(--color-primary);
opacity: 0.6;
}
.privacy-block .legal-basis {
font-family: var(--font-body);
font-size: clamp(0.95rem, 1.8vw, 1.05rem);
font-weight: 300;
color: var(--color-secondary);
line-height: 1.85;
margin-bottom: 0.85rem;
padding-left: 1.25rem;
border-left: 2px solid var(--color-accent);
}
.privacy-divider {
border: none;
border-top: 1px solid #EDE8E0;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.privacy-block a {
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid var(--color-accent);
transition: border-color 0.2s ease;
}
.privacy-block a:hover {
border-bottom-color: var(--color-primary);
}
.beta-notice {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 300;
color: var(--color-text-muted);
background-color: var(--color-bg-dark);
border-left: 3px solid var(--color-accent);
padding: 1rem 1.25rem;
margin-bottom: clamp(2rem, 4vw, 3rem);
line-height: 1.65;
}
/* ----------------------------------------
V2: Daily setup simplified
---------------------------------------- */
.setup-v2-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-top: 2rem;
}
.incognito-toggle {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-family: var(--font-body);
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.5;
cursor: pointer;
}
.incognito-toggle input[type="checkbox"] {
margin-top: 0.15rem;
flex-shrink: 0;
accent-color: var(--color-primary);
width: 1rem;
height: 1rem;
}
/* ----------------------------------------
V2: Field / canvas view
---------------------------------------- */
#field-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: var(--color-bg);
}
.field-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 20;
background: rgba(250, 247, 242, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-top: 1px solid rgba(196, 112, 79, 0.15);
padding: 1.25rem 1.5rem 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.field-bar-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
}
.field-bar-count {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 300;
color: var(--color-secondary);
}
.field-bar-window {
font-family: var(--font-body);
font-size: 0.78rem;
color: var(--color-text-muted);
letter-spacing: 0.04em;
}
.field-bar-btn {
width: 100%;
max-width: 320px;
}
/* ----------------------------------------
V2: Match modal
---------------------------------------- */
.match-modal-overlay {
position: fixed;
inset: 0;
z-index: 50;
background: rgba(61, 61, 61, 0.45);
display: none;
align-items: flex-end;
justify-content: center;
padding: 0;
}
@media (min-width: 520px) {
.match-modal-overlay {
align-items: center;
padding: 1rem;
}
}
.match-modal-card {
background: var(--color-bg);
border-radius: 16px 16px 0 0;
padding: 2rem 1.5rem 2.5rem;
width: 100%;
max-width: 480px;
max-height: 90vh;
overflow-y: auto;
}
@media (min-width: 520px) {
.match-modal-card {
border-radius: 12px;
}
}
.modal-heading {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 3.5vw, 2rem);
font-weight: 300;
color: var(--color-secondary);
line-height: 1.3;
margin-bottom: 1.25rem;
text-align: center;
}
.modal-heading em {
font-style: italic;
color: var(--color-primary);
}
.match-score-badge {
text-align: center;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 1rem;
}
.modal-empty-msg {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 300;
font-style: italic;
color: var(--color-text-muted);
line-height: 1.5;
text-align: center;
padding: 1rem 0;
}
/* ----------------------------------------
V2: Overlay for States 3-5
---------------------------------------- */
.match-overlay {
position: fixed;
inset: 0;
z-index: 40;
background: var(--color-bg);
display: none;
overflow-y: auto;
}
/* ----------------------------------------
V2: Setup section — reduced top padding
---------------------------------------- */
.setup-section {
padding-top: clamp(1.25rem, 2.5vw, 2rem);
}
/* ----------------------------------------
V2: Match page tagline under logo
---------------------------------------- */
.field-page-tagline {
font-family: var(--font-heading);
font-size: clamp(0.95rem, 2vw, 1.15rem);
font-weight: 300;
font-style: italic;
color: var(--color-text-muted);
letter-spacing: 0.02em;
margin: 0.1rem 0 0;
}
/* ----------------------------------------
V2: Field bar privacy line
---------------------------------------- */
.field-bar-privacy {
font-family: var(--font-body);
font-size: 0.68rem;
color: var(--color-text-muted);
letter-spacing: 0.03em;
opacity: 0.65;
margin: 0;
}
.field-bar-privacy a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid rgba(138, 127, 117, 0.4);
}
/* =====================================================================
May 8 2026 event dashboard
===================================================================== */
.dashboard-body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.dashboard-nav {
margin-left: auto;
display: flex;
gap: 1.25rem;
align-items: center;
}
.dashboard-nav-link {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--color-text-muted);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.dashboard-nav-link:hover {
color: var(--color-primary);
border-color: var(--color-primary);
}
/* Mobile dashboard header: logo + horizontal padding shrink so the
'I can't make it' + 'Sign out' nav links fit alongside without
wrapping or overlapping the logo. Scoped to .dashboard-body so the
home/marketing pages keep the larger centred logo. */
@media (max-width: 480px) {
.dashboard-body .site-header {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.dashboard-body .logo {
font-size: 1.2rem;
letter-spacing: 0.08em;
}
.dashboard-body .dashboard-nav {
gap: 0.85rem;
}
.dashboard-body .dashboard-nav-link {
font-size: 0.78rem;
}
}
/* Connection-lost banner — pinned at the top, only shown when network
or Realtime channel is down. Discreet but visible. Top offset uses
clamp so it clears the beta-banner on both desktop (~2.5rem tall)
and mobile (where wrapped beta text can push it to ~4rem). */
.connection-banner {
position: fixed;
top: clamp(2.5rem, 8vw, 4rem);
left: 50%;
transform: translateX(-50%);
z-index: 30;
background: var(--color-secondary);
color: #fff;
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.05em;
padding: 0.45rem 0.95rem;
border-radius: 999px;
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
animation: connection-banner-in 220ms ease;
}
.connection-banner[hidden] { display: none; }
.connection-banner-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #FFCBA4;
animation: connection-banner-pulse 1.4s ease-in-out infinite;
}
@keyframes connection-banner-in {
from { opacity: 0; transform: translate(-50%, -8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes connection-banner-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.connection-banner,
.connection-banner-dot { animation: none; }
}
/* ── Field bar ─────────────────────────────────────────────────
V2 pattern restored. Single fixed-bottom frosted-glass surface
that houses every dashboard state. Canvas stays full-bleed
behind it — ambient presence rather than fighting for screen
real estate. Content inside the bar scrolls if it exceeds
max-height (chat in the live state pushes it tall). */
.field-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
background-color: rgba(250, 247, 242, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid rgba(196, 112, 79, 0.14);
border-top-left-radius: 24px;
border-top-right-radius: 24px;
box-shadow: 0 -10px 40px rgba(61, 61, 61, 0.08);
padding: 1.5rem clamp(1rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2rem);
max-height: 88vh;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
}
/* Personalised greeting at top of bar (V2 had this — gives a small
moment of recognition each time the user opens the dashboard). */
.field-bar-greeting {
font-family: var(--font-heading);
font-style: italic;
font-size: 0.95rem;
font-weight: 400;
color: var(--color-text-muted);
text-align: center;
margin: 0 0 1.25rem;
}
.field-bar-greeting em {
color: var(--color-primary);
font-style: italic;
}
/* Footer is part of normal flow; the field-bar overlays it. Hide it
on dashboard pages so the privacy link doesn't peek behind the bar. */
.dashboard-body .site-footer {
display: none;
}
/* ── States: each .dash-state is the content of one moment in the
user journey. They render directly in the field-bar (no
.dash-card wrapper around them — the bar is the container). */
.dash-state {
width: 100%;
max-width: 540px;
text-align: center;
/* Soft enter animation each time a state becomes visible */
animation: dash-state-fade-in 320ms cubic-bezier(0.32, 0.72, 0.32, 1.0);
}
@keyframes dash-state-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.dash-state { animation: none; }
}
.dash-eyebrow {
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-muted);
margin: 0 0 0.75rem;
}
.dash-state h1 {
font-family: var(--font-heading);
/* Tightened scale (was 1.7-2.3) so headings sit in clearer
hierarchy below the special match-name moment. */
font-size: clamp(1.6rem, 3.8vw, 2rem);
font-weight: 400;
color: var(--color-secondary);
margin: 0 0 1rem;
line-height: 1.2;
letter-spacing: -0.005em;
}
.dash-state h1 em {
font-style: italic;
color: var(--color-primary);
}
.dash-body {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
color: var(--color-secondary);
line-height: 1.55;
margin: 0 0 1rem;
}
.dash-countdown {
font-family: var(--font-heading);
/* Was 2rem — competed with H1 above. Dropped to 1.4rem so it sits
as a secondary italic moment, not a rival heading. */
font-size: 1.4rem;
font-style: italic;
color: var(--color-primary);
margin: 1.25rem 0 0.5rem;
letter-spacing: 0.02em;
}
/* Match card (state 2 — reveal). Match name is THE moment; sized
bigger than any other heading so it lands as the focus. */
.match-card .match-name {
font-family: var(--font-heading);
font-size: clamp(2rem, 5vw, 2.5rem);
font-style: italic;
color: var(--color-primary);
margin: 0 0 1rem;
font-weight: 400;
line-height: 1.1;
}
.match-icebreaker {
font-family: var(--font-body);
/* Aligned to dash-body 1rem — keeps icebreaker as body-rank with
italic emphasis rather than its own size tier. */
font-size: 1rem;
font-weight: 300;
font-style: italic;
color: var(--color-secondary);
line-height: 1.55;
margin: 0 0 2rem;
padding: 0 0.5rem;
}
.match-card .match-actions {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin-bottom: 1.5rem;
}
.match-card .match-actions .btn-primary,
.match-card .match-actions .btn-secondary {
width: 100%;
}
.match-waiting {
margin-bottom: 1.5rem;
}
.match-waiting em {
color: var(--color-primary);
font-style: italic;
}
.match-meta {
font-family: var(--font-body);
/* Aligned to .field-note 0.85rem — same "small" tier; one less
distinct size in circulation. */
font-size: 0.85rem;
font-weight: 300;
color: var(--color-text-muted);
margin: 0.25rem 0;
}
/* Live state */
.live-card .live-eyebrow {
color: var(--color-primary);
font-weight: 500;
}
.live-card .live-eyebrow::before {
content: '● ';
animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
#agreed-btn {
margin-top: 1rem;
}
.photo-reveal {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin-top: 1.5rem;
}
.photo-reveal img {
width: 240px;
height: 240px;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 12px 40px rgba(61, 61, 61, 0.18);
}
/* When the photo is showing, hide chat + all surrounding controls so
the photo is the only thing visible for those 10 seconds.
(.live-card is now a class on #state-live itself, not a wrapper
inside it, so selectors are flattened.) */
#state-live.photo-active .chat-panel,
#state-live.photo-active #agreed-btn,
#state-live.photo-active #lock-in-copy,
#state-live.photo-active #agreed-status,
#state-live.photo-active #view-photo-btn,
#state-live.photo-active #inline-feedback-prompt,
#state-live.photo-active .dash-body,
#state-live.photo-active h1,
#state-live.photo-active .live-eyebrow {
display: none !important;
}
.inline-feedback {
display: block;
border-top: 1px solid rgba(196, 112, 79, 0.15);
padding-top: 1rem;
margin-top: 1.25rem;
}
#inline-feedback-cta { margin-top: 0.5rem; }
.inline-feedback .feedback-options { margin-top: 1rem; }
/* Circular crop overlay on signup */
.cropper-circle .cropper-view-box,
.cropper-circle .cropper-face {
border-radius: 50%;
}
/* Validation shake — briefly applied to .input-error fields when
the user tries to advance with invalid data. Subtle (3px each
side, 250ms) so it nudges attention without being annoying.
Also applies a terracotta-red border to the field so it stays
visually flagged after the shake settles. */
@keyframes input-shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-3px); }
40%, 80% { transform: translateX(3px); }
}
.input-error,
.form-field input.input-error,
.form-field textarea.input-error,
.form-field select.input-error {
border-color: #B45A3F !important;
animation: input-shake 250ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@media (prefers-reduced-motion: reduce) {
.input-error { animation: none; }
}
/* Inline button spinner — used during async submits so the user
sees something is happening, not just a text change. */
.btn-primary.is-loading,
.btn-secondary.is-loading {
position: relative;
pointer-events: none;
opacity: 0.85;
}
.btn-primary.is-loading::before,
.btn-secondary.is-loading::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: currentColor;
border-radius: 50%;
margin-right: 0.55rem;
vertical-align: -2px;
animation: btn-spinner 0.7s linear infinite;
}
.btn-secondary.is-loading::before {
border: 2px solid rgba(196, 112, 79, 0.3);
border-top-color: var(--color-primary);
}
@keyframes btn-spinner {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.btn-primary.is-loading::before,
.btn-secondary.is-loading::before { animation: none; }
}
/* ── Signup progressive disclosure ──────────────────────────
The form is split into 4 steps. Only one .signup-step is
visible at a time; navigation buttons inside each step move
between them. Form values + Cropper instance persist across
step changes (we just hide/show, never destroy). */
.signup-progress {
display: flex;
align-items: center;
justify-content: center;
gap: 0.85rem;
margin-bottom: 2rem;
}
.signup-progress-text {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.signup-progress-dots {
display: flex;
gap: 0.4rem;
}
.signup-progress-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #DDD8D0;
transition: background-color 0.25s ease, transform 0.25s ease;
}
.signup-progress-dot.active {
background-color: var(--color-primary);
transform: scale(1.25);
}
.signup-progress-dot.completed {
background-color: rgba(196, 112, 79, 0.5);
}
.signup-step {
display: none;
/* Min-height keeps the form's visual height roughly constant as
users navigate between steps (different content lengths).
Reduces the 'jumpy' feel without forcing huge whitespace. */
min-height: 380px;
}
.signup-step.active {
display: block;
animation: signup-step-in 280ms cubic-bezier(0.32, 0.72, 0.32, 1.0);
}
@keyframes signup-step-in {
from { opacity: 0; transform: translateX(8px); }
to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.signup-step.active { animation: none; }
}
/* Per-step navigation row at the bottom of each step */
.step-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-top: 2.5rem;
}
.step-nav .btn-primary,
.step-nav .btn-secondary {
/* Fixed equal width so Back / Continue render as a matched pair
regardless of label length (Back is 4 letters, Continue is 8;
auto-sizing made them visibly different). */
flex: 0 0 9rem;
padding: 0.85rem 1.75rem;
font-size: 0.85rem;
text-align: center;
white-space: nowrap;
}
/* Submit button on step 4 is wider — 'CREATE MY PROFILE' (with the
uppercase + letter-spacing) doesn't fit comfortably in 9rem. Same
height (same padding + font-size) so it sits visually paired with
the Back button on the same row. */
.step-nav #submit-btn {
flex: 0 0 13rem;
}
/* On step 1, the back-button slot is an empty — push the
Continue button to the right by giving it auto margin-left. */
.step-nav > span:empty + .btn-primary {
margin-left: auto;
}
@media (max-width: 480px) {
.step-nav .btn-primary,
.step-nav .btn-secondary {
flex: 1 1 0;
min-width: 0;
}
}
.photo-hide-link {
background: none;
border: none;
color: var(--color-text-muted);
font-family: var(--font-body);
font-size: 0.78rem;
text-decoration: underline;
cursor: pointer;
padding: 0.5rem;
margin-top: 0.25rem;
transition: color 0.15s ease;
}
.photo-hide-link:hover {
color: var(--color-primary);
}
.photo-reveal-timer {
font-family: var(--font-heading);
font-size: 1.4rem;
font-style: italic;
color: var(--color-primary);
margin: 0;
}
.initials-fallback {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin-top: 1.5rem;
}
/* Confirmation step before photo opens — gives the user a beat to back out
if they tapped Open photo by accident. Tapping "Yes, show me" runs the
single-use DB write; "Not yet" returns to the Open photo button. */
.photo-confirm {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin-top: 1rem;
}
.photo-confirm .dash-body {
margin-bottom: 0.25rem;
}
.initials-circle {
width: 110px;
height: 110px;
border-radius: 50%;
background: linear-gradient(135deg, #FFCBA4 0%, #C4704F 100%);
color: #fff;
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
}
/* Feedback (state 5) */
.feedback-options {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}
.btn-feedback {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 400;
background-color: #fff;
color: var(--color-secondary);
border: 1px solid #DDD8D0;
border-radius: 2px;
padding: 0.95rem 1rem;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
}
.btn-feedback:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn-feedback:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Chat panel (lives inside the field-bar). Now a contained sub-surface
with its own background + rounded corners, so the boundary between
"the message at top" and "the chat below" is unambiguous. The
semi-transparent white sits over the field-bar's frosted cream and
reads as a clearly separate panel. */
.chat-panel {
display: flex;
flex-direction: column;
max-height: 50vh;
margin-top: 2rem;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(196, 112, 79, 0.16);
border-radius: 14px;
text-align: left;
width: 100%;
overflow: hidden;
box-shadow: 0 4px 14px rgba(61, 61, 61, 0.05);
}
.chat-panel .chat-messages {
flex: 1;
overflow-y: auto;
max-height: 320px;
}
.chat-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0.75rem 1rem 0;
border-top: 1px solid #EDE8E0;
}
.chat-chip {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 300;
background-color: #FAF7F2;
color: var(--color-secondary);
border: 1px solid #DDD8D0;
border-radius: 999px;
padding: 0.35rem 0.85rem;
cursor: pointer;
transition: all 0.15s ease;
}
.chat-chip:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.chat-input-form {
display: flex;
gap: 0.5rem;
padding: 0.75rem 1rem 1rem;
border-top: 1px solid #EDE8E0;
}
.chat-input-form input[type="text"],
.chat-input-form textarea {
flex: 1;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 300;
color: var(--color-secondary);
background-color: #fff;
border: 1px solid #DDD8D0;
border-radius: 2px;
padding: 0.65rem 0.85rem;
outline: none;
resize: none;
min-height: 2.4rem;
max-height: 6rem;
line-height: 1.5;
overflow-y: auto;
}
.chat-input-form input[type="text"]:focus,
.chat-input-form textarea:focus {
border-color: var(--color-primary);
}
.chat-send-btn {
padding: 0.65rem 1.1rem;
font-size: 0.9rem;
}
/* Mobile tweaks */
@media (max-width: 600px) {
.field-bar {
padding: 1.25rem 1rem 1.5rem;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
max-height: 92vh;
}
.field-bar-greeting { margin-bottom: 1rem; }
.dash-state h1 { font-size: 1.6rem; }
.match-card .match-name { font-size: 2.1rem; }
.photo-reveal img { width: 200px; height: 200px; }
.chat-panel { max-height: 45vh; }
}
/* =====================================================================
Admin tool (admin.html)
===================================================================== */
.admin-body { background: var(--color-bg); min-height: 100vh; }
.admin-header {
background: #fff;
border-bottom: 1px solid #EDE8E0;
padding: 0.75rem 1.25rem;
}
.admin-header-inner {
display: flex; align-items: center; gap: 1rem;
max-width: 1400px; margin: 0 auto;
}
.admin-badge {
font-family: var(--font-body);
font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
background: var(--color-primary); color: #fff;
padding: 0.2rem 0.55rem; border-radius: 2px;
}
.admin-link {
font-family: var(--font-body); font-size: 0.85rem;
color: var(--color-text-muted); text-decoration: none;
margin-left: auto;
}
.admin-link + .admin-link { margin-left: 1rem; }
.admin-link:hover { color: var(--color-primary); }
.admin-main { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.admin-loading, .admin-forbidden { padding: 4rem 0; text-align: center; }
.admin-forbidden h1 { font-family: var(--font-heading); font-size: 2rem; }
.admin-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.5rem; margin-bottom: 1.5rem;
}
.admin-stat {
background: #fff; border: 1px solid #EDE8E0; border-radius: 4px;
padding: 0.85rem 1rem; text-align: center;
display: flex; flex-direction: column; gap: 0.25rem;
}
.admin-stat strong {
font-family: var(--font-heading); font-size: 1.8rem; font-weight: 400;
color: var(--color-primary); font-style: italic;
}
.admin-stat span {
font-family: var(--font-body); font-size: 0.75rem; font-weight: 300;
color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.admin-creator {
background: #fff; border: 2px solid var(--color-primary); border-radius: 4px;
padding: 1.25rem; margin-bottom: 1.5rem;
position: sticky; top: 0; z-index: 5;
box-shadow: 0 4px 16px rgba(196, 112, 79, 0.18);
}
.admin-creator-pair {
font-family: var(--font-body); font-size: 1rem; margin: 0 0 0.75rem;
}
.admin-creator-pair strong { color: var(--color-primary); font-weight: 500; }
.admin-creator-arrow { margin: 0 0.5rem; color: var(--color-text-muted); }
.admin-creator textarea {
width: 100%; min-height: 70px;
font-family: var(--font-body); font-size: 0.95rem; font-weight: 300;
padding: 0.65rem 0.85rem;
border: 1px solid #DDD8D0; border-radius: 2px; resize: vertical;
}
.admin-creator-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.admin-creator-actions button { padding: 0.6rem 1rem; font-size: 0.9rem; }
.admin-creator-error {
margin-top: 0.5rem; color: #B45A3F; font-size: 0.85rem;
font-family: var(--font-body);
}
.admin-cols {
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.admin-col {
background: #fff; border: 1px solid #EDE8E0; border-radius: 4px;
padding: 1rem; display: flex; flex-direction: column;
}
.admin-col-header {
display: flex; align-items: center; justify-content: space-between;
gap: 0.75rem; margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.admin-col-header h2 {
font-family: var(--font-heading); font-size: 1.4rem;
font-weight: 400; margin: 0; color: var(--color-secondary);
}
.admin-col-count {
font-family: var(--font-body); font-size: 0.9rem; font-weight: 400;
color: var(--color-text-muted);
}
#unmatched-search {
flex: 1; min-width: 200px;
font-family: var(--font-body); font-size: 0.85rem;
padding: 0.5rem 0.75rem; border: 1px solid #DDD8D0; border-radius: 2px;
outline: none;
}
#unmatched-search:focus { border-color: var(--color-primary); }
.admin-cards {
display: flex; flex-direction: column; gap: 0.5rem;
max-height: 70vh; overflow-y: auto;
}
.admin-user-card, .admin-match-card {
background: #FAF7F2; border: 1px solid #EDE8E0; border-radius: 4px;
padding: 0.75rem;
font-family: var(--font-body); font-size: 0.85rem; font-weight: 300;
color: var(--color-secondary);
transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-user-card.selected {
border-color: var(--color-primary); background: #fff;
box-shadow: 0 0 0 2px rgba(196, 112, 79, 0.2);
}
.admin-user-card.standby { opacity: 0.7; }
.admin-user-head, .admin-match-head {
display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
margin-bottom: 0.35rem;
}
.admin-user-head strong, .admin-match-head strong {
font-weight: 500; color: var(--color-secondary);
}
.admin-user-meta {
font-size: 0.75rem; color: var(--color-text-muted);
margin-bottom: 0.5rem;
}
.admin-user-line {
font-size: 0.8rem; line-height: 1.4; margin-bottom: 0.2rem;
}
.admin-user-line em {
font-style: normal; color: var(--color-text-muted);
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.admin-user-actions {
display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap;
}
.admin-pill {
font-size: 0.7rem; font-weight: 400;
background: #EDE8E0; color: var(--color-secondary);
padding: 0.15rem 0.5rem; border-radius: 999px;
text-transform: lowercase; letter-spacing: 0.02em;
}
.admin-pill-standby { background: #FFCBA4; color: #5A3221; }
.admin-pill-warning { background: #F4D6CC; color: #8B3A20; }
.admin-pill-pending_both, .admin-pill-pending_initiator, .admin-pill-pending_responder {
background: #FFE9D6; color: #8A4828;
}
.admin-pill-confirmed, .admin-pill-met, .admin-pill-completed {
background: #C4704F; color: #fff;
}
.admin-pill-cancelled, .admin-pill-declined, .admin-pill-expired {
background: #DDD8D0; color: var(--color-text-muted);
}
.admin-match-arrow { color: var(--color-text-muted); }
.admin-match-confirm {
font-size: 0.8rem; color: var(--color-text-muted);
margin-bottom: 0.4rem;
}
.admin-match-icebreaker {
font-style: italic; font-size: 0.85rem;
color: var(--color-secondary);
margin-bottom: 0.5rem; line-height: 1.4;
}
.admin-match-card.status-cancelled,
.admin-match-card.status-declined,
.admin-match-card.status-expired { opacity: 0.55; }
.btn-tiny {
font-family: var(--font-body); font-size: 0.78rem; font-weight: 400;
background: #fff; color: var(--color-secondary);
border: 1px solid #DDD8D0; border-radius: 2px;
padding: 0.35rem 0.7rem;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.15s ease;
}
.btn-tiny:hover {
border-color: var(--color-primary); color: var(--color-primary);
}
.admin-emails {
background: #fff; border: 1px solid #EDE8E0; border-radius: 4px;
padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.admin-emails h2 {
font-family: var(--font-heading); font-size: 1.4rem; font-weight: 400;
margin: 0 0 0.4rem; color: var(--color-secondary);
}
.admin-email-buttons {
display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem;
}
.btn-email {
font-family: var(--font-body); font-size: 0.85rem; font-weight: 400;
background: #FAF7F2; color: var(--color-secondary);
border: 1px solid #DDD8D0; border-radius: 2px;
padding: 0.55rem 0.95rem; cursor: pointer;
transition: all 0.15s ease;
}
.btn-email:hover {
border-color: var(--color-primary); color: var(--color-primary);
}
.btn-email:disabled { opacity: 0.5; cursor: wait; }
.admin-email-result {
margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--color-text-muted);
}
.admin-email-success { color: var(--color-primary); font-weight: 500; }
.admin-email-error { color: #B45A3F; font-weight: 500; }
.admin-stragglers {
background: #fff; border: 2px solid #FFCBA4; border-radius: 4px;
padding: 1rem; margin-top: 1.5rem;
}
.admin-stragglers h2 {
font-family: var(--font-heading); font-size: 1.4rem; margin: 0 0 0.4rem;
color: var(--color-secondary);
}
@media (max-width: 800px) {
.admin-cols { grid-template-columns: 1fr; }
.admin-cards { max-height: none; }
}
/* ----------------------------------------
Admin · Waitlist section (closed alpha)
---------------------------------------- */
.admin-waitlist {
margin-bottom: 2rem;
}
.admin-section-header {
margin-bottom: 1rem;
}
.admin-section-header h2 {
font-family: var(--font-heading);
font-size: 1.6rem;
font-weight: 500;
color: var(--color-secondary);
margin: 0 0 0.25rem;
}
.admin-section-header .field-note {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--color-text-muted);
margin: 0;
}
.admin-divider {
border: 0;
border-top: 1px solid #DDD8D0;
margin: 2.5rem 0 1.5rem;
}
.admin-cohort {
background: #fff;
border: 1px solid #DDD8D0;
border-radius: 4px;
padding: 1rem 1.25rem;
margin-bottom: 1rem;
}
.admin-cohort-row {
display: flex;
align-items: baseline;
gap: 1rem;
padding: 0.4rem 0;
border-bottom: 1px dashed #EEE9E1;
}
.admin-cohort-row:last-child {
border-bottom: none;
}
.admin-cohort-row h3 {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
margin: 0;
min-width: 180px;
flex: 0 0 auto;
}
.admin-cohort-cells {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.85rem;
font-size: 0.85rem;
color: var(--color-secondary);
}
.cohort-cell {
font-family: var(--font-body);
font-weight: 300;
}
.cohort-cell strong {
font-weight: 500;
color: var(--color-primary);
margin-right: 0.25rem;
}
.admin-action-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
margin-bottom: 1rem;
}
.admin-action-bar .btn-primary,
.admin-action-bar .btn-secondary {
flex: 0 0 auto;
padding: 0.55rem 1rem;
font-size: 0.82rem;
}
.admin-action-bar .btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.admin-action-result {
font-family: var(--font-body);
font-size: 0.82rem;
margin: 0 0 0 0.5rem;
flex: 1 1 auto;
min-width: 200px;
}
.admin-waitlist-table {
background: #fff;
border: 1px solid #DDD8D0;
border-radius: 4px;
overflow: auto;
max-height: 500px;
}
.admin-waitlist-table table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--color-secondary);
}
.admin-waitlist-table th {
background: #FAF7F2;
text-align: left;
padding: 0.6rem 0.75rem;
font-weight: 500;
font-size: 0.75rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
border-bottom: 1px solid #DDD8D0;
position: sticky;
top: 0;
}
.admin-waitlist-table td {
padding: 0.55rem 0.75rem;
border-bottom: 1px solid #F2EDE5;
vertical-align: middle;
}
.admin-waitlist-table tr:last-child td {
border-bottom: none;
}
.admin-waitlist-table input[type="checkbox"] {
cursor: pointer;
}
.admin-waitlist-table input[type="checkbox"]:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.wl-status {
display: inline-block;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.18rem 0.5rem;
border-radius: 2px;
}
.wl-status-invited {
background: rgba(196, 112, 79, 0.12);
color: var(--color-primary);
}
.wl-status-activated {
background: rgba(90, 139, 90, 0.15);
color: #4a7a4a;
}
/* ----------------------------------------
Waitlist (homepage)
---------------------------------------- */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.waitlist-counter {
font-family: var(--font-heading);
font-style: italic;
font-size: clamp(1rem, 2vw, 1.15rem);
color: var(--color-text-muted);
margin: 0;
}
.waitlist-form {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 420px;
}
.waitlist-field {
display: flex;
flex-direction: column;
}
.waitlist-form input[type="email"] {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
color: var(--color-secondary);
background-color: #fff;
border: 1px solid #DDD8D0;
border-radius: 2px;
padding: 0.95rem 1rem;
outline: none;
transition: border-color 0.2s ease;
width: 100%;
text-align: left;
}
.waitlist-form input[type="email"]::placeholder {
color: #C4BAB0;
font-weight: 300;
}
.waitlist-form input[type="email"]:focus {
border-color: var(--color-primary);
}
.waitlist-form select {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
color: var(--color-secondary);
background-color: #fff;
border: 1px solid #DDD8D0;
border-radius: 2px;
padding: 0.95rem 2.5rem 0.95rem 1rem;
outline: none;
transition: border-color 0.2s ease;
width: 100%;
text-align: left;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1rem center;
}
.waitlist-form select:focus {
border-color: var(--color-primary);
}
.waitlist-form select:invalid,
.waitlist-form select:has(option[value=""]:checked) {
color: #C4BAB0;
}
.waitlist-form select.input-error {
border-color: var(--color-primary);
animation: waitlist-shake 0.32s cubic-bezier(.36,.07,.19,.97) both;
}
.waitlist-form input.input-error {
border-color: var(--color-primary);
animation: waitlist-shake 0.32s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes waitlist-shake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-3px); }
40%, 60% { transform: translateX(3px); }
}
.waitlist-error {
display: none;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
color: var(--color-primary);
margin-top: 0.5rem;
line-height: 1.4;
text-align: left;
}
.waitlist-error.visible {
display: block;
}
.waitlist-consent {
align-self: stretch;
}
.waitlist-form .btn-primary {
margin-top: 0.5rem;
width: 100%;
}
@media (min-width: 520px) {
.waitlist-form .btn-primary {
width: auto;
align-self: center;
min-width: 220px;
}
}
.waitlist-thanks {
text-align: center;
width: 100%;
max-width: 480px;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
/* Both .waitlist-form and .waitlist-thanks set display: flex above, which
would otherwise win against the UA [hidden] { display: none } rule. Force
hide so the JS toggle (.hidden = true/false) actually works. */
.waitlist-form[hidden],
.waitlist-thanks[hidden] {
display: none;
}
.waitlist-thanks-line {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
color: var(--color-secondary);
line-height: 1.7;
margin: 0 0 1rem;
}
.waitlist-share {
margin-top: 2rem;
padding-top: 2rem;
width: 100%;
border-top: 1px solid rgba(196, 112, 79, 0.18);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.waitlist-share-prompt {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
color: var(--color-secondary);
line-height: 1.7;
margin: 0;
}
/* Match the .hero-body em pattern: Inter italic at parent size, terracotta.
Keeps the page on a single italic system. */
.waitlist-share-prompt em {
font-style: italic;
color: var(--color-primary);
}
.waitlist-share .btn-primary {
min-width: 220px;
}
.share-toast {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
background: var(--color-secondary);
color: #fff;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-family: var(--font-body);
font-size: 0.9rem;
z-index: 1000;
opacity: 0;
transition: opacity 200ms ease;
pointer-events: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.share-toast.visible {
opacity: 1;
}