/* CityNoms design system.
Editorial hospitality: cream surfaces, walnut text, baby-blue accents.
Mobile-first. WCAG AA on every surface. Respects prefers-reduced-motion. */
/* ---------- design tokens ---------- */
:root{
/* brand palette (only walnut on cream for body text — never baby-blue text on cream) */
--cream:#F5EFE4;
--cream-2:#EFE7D8;
--walnut:#574030;
--walnut-deep:#3C2C20;
--babyblue:#ABCBDD;
--babyblue-deep:#7FA8BE;
/* surfaces / utility */
--line:rgba(87,64,48,.14);
--line-strong:rgba(87,64,48,.28);
--babyblue-tint:rgba(171,203,221,.22);
--babyblue-tint-strong:rgba(171,203,221,.36);
--muted:#7a6a5c;
--on-walnut:#F5EFE4;
--shadow-soft:0 1px 2px rgba(60,44,32,.06), 0 8px 24px rgba(60,44,32,.06);
--shadow-card:0 1px 2px rgba(60,44,32,.05), 0 18px 40px rgba(60,44,32,.08);
/* type */
--font-display:"Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
--font-display-weight:500;
--font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* type scale (fluid, mobile-first) */
--fs-display: clamp(40px, 7vw, 84px);
--fs-h2: clamp(28px, 4.2vw, 44px);
--fs-h3: clamp(20px, 2.4vw, 26px);
--fs-lead: clamp(17px, 1.6vw, 20px);
--fs-body: 16px;
--fs-small: 14px;
--fs-eyebrow: 12px;
/* spacing */
--gap-1:6px;
--gap-2:10px;
--gap-3:16px;
--gap-4:24px;
--gap-5:36px;
--gap-6:56px;
--pad-section:56px; /* mobile */
--maxw:1120px;
/* radius + motion */
--r-card:18px;
--r-btn:12px;
--r-pill:999px;
--r-sm:10px;
--r-lg:24px;
--ease:cubic-bezier(.2,.7,.2,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--dur:200ms;
--dur-slow:420ms;
/* elevation tokens */
--shadow-hairline:0 1px 0 rgba(60,44,32,.04);
--shadow-medium:0 2px 4px rgba(60,44,32,.05), 0 12px 32px rgba(60,44,32,.08);
--shadow-floating:0 8px 16px rgba(60,44,32,.08), 0 24px 64px rgba(60,44,32,.10);
/* refined accents */
--warm:#C4623B;
--warm-tint:rgba(196,98,59,.10);
--gold:#A8814A;
--leaf:#5F7855;
/* dark-mode-safe email companion (no alpha) */
--email-cream:#F5EFE4;
--email-cream-2:#EFE7D8;
--email-walnut:#574030;
--email-walnut-deep:#3C2C20;
--email-babyblue:#ABCBDD;
--email-babyblue-deep:#7FA8BE;
color-scheme: light;
}
@media (min-width: 900px){
:root{ --pad-section:88px; }
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}
/* ---------- font face stubs (CDN today; drop self-hosted woff2 into /fonts/ later) ---------- */
/* Real + Google Fonts live in each page .
When you self-host, swap in @font-face blocks here pointing at /fonts/*.woff2 and remove the
Google Fonts tags from the page heads. font-display: swap is already on per page. */
/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
background:var(--cream);
color:var(--walnut-deep);
font-family:var(--font-body);
font-size:var(--fs-body);
line-height:1.55;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; height:auto; }
a{ color:var(--walnut-deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--walnut); }
:focus-visible{ outline:2px solid var(--babyblue-deep); outline-offset:3px; border-radius:6px; }
/* ---------- typography ---------- */
h1,h2,h3{ font-family:var(--font-display); font-weight:var(--font-display-weight); color:var(--walnut-deep); letter-spacing:-0.005em; line-height:1.15; margin:0; text-wrap:balance; }
h1{ font-size:var(--fs-display); font-weight:600; letter-spacing:-0.015em; line-height:1.12; }
h2{ font-size:var(--fs-h2); line-height:1.18; font-weight:500; }
h3{ font-size:var(--fs-h3); line-height:1.25; letter-spacing:0; font-weight:500; }
.eyebrow{ font-family:var(--font-body); font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--walnut); font-weight:600; }
.lead{ font-size:var(--fs-lead); color:var(--walnut); line-height:1.55; }
.muted{ color:var(--muted); }
/* ---------- layout helpers ---------- */
.container{ max-width:var(--maxw); margin:0 auto; padding-left:24px; padding-right:24px; }
.section{ padding-top:var(--pad-section); padding-bottom:var(--pad-section); }
.section--cream2{ background:var(--cream-2); }
.section--blue{ background:linear-gradient(180deg, var(--babyblue-tint), var(--babyblue-tint-strong)); }
.section--walnut{ background:var(--walnut-deep); color:var(--on-walnut); }
.section--walnut h2{ color:var(--on-walnut); }
.section--walnut .lead{ color:rgba(245,239,228,.78); }
/* ---------- buttons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font-family:var(--font-body); font-weight:600; font-size:15px; line-height:1;
padding:14px 22px; border-radius:var(--r-btn); border:1px solid transparent;
text-decoration:none; cursor:pointer; transition:transform var(--dur) var(--ease), background var(--dur), color var(--dur), box-shadow var(--dur);
min-height:48px;
}
.btn-primary{ background:var(--walnut-deep); color:var(--on-walnut); box-shadow:var(--shadow-soft); }
.btn-primary:hover{ background:var(--walnut); transform:translateY(-1px); }
.btn-secondary{ background:transparent; color:var(--walnut-deep); border-color:var(--walnut-deep); }
.btn-secondary:hover{ background:rgba(87,64,48,.06); }
.btn-cream{ background:var(--cream); color:var(--walnut-deep); }
.btn-cream:hover{ background:#fff; }
.btn-link{ background:transparent; color:var(--walnut-deep); padding:8px 4px; min-height:auto; text-decoration:underline; }
.btn-block{ display:flex; width:100%; }
/* ---------- nav ---------- */
.nav{
position:sticky; top:0; z-index:30;
background:rgba(245,239,228,.85);
backdrop-filter:saturate(140%) blur(12px);
border-bottom:1px solid var(--line);
}
.nav-inner{
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:14px 24px;
max-width:var(--maxw); margin:0 auto;
}
.nav-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--walnut-deep); }
.nav-brand img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.nav-brand .wordmark{ font-family:var(--font-display); font-size:22px; letter-spacing:0; font-weight:500; }
.nav-links{ display:none; gap:28px; align-items:center; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:14px; font-weight:500; text-decoration:none; color:var(--walnut); }
.nav-links a:hover{ color:var(--walnut-deep); }
.nav-cta{ display:flex; gap:10px; align-items:center; }
/* Default (mobile): hide desktop signin link; show hamburger; hide nav-links
until the hamburger opens. The breakpoint is 900px so the hero grid and nav
flip in lockstep (no awkward window-width state where the dashboard mockup
stacks but the hamburger has already hidden). */
.nav-signin{
display:none;
font-size:14px; font-weight:500; color:var(--walnut);
text-decoration:none; padding:10px 4px;
}
.nav-signin:hover{ color:var(--walnut-deep); text-decoration:underline; }
.nav-toggle{
display:inline-flex; align-items:center; justify-content:center;
background:transparent; border:1px solid var(--line-strong); color:var(--walnut-deep);
width:44px; height:44px; padding:0; border-radius:10px; cursor:pointer;
transition:background var(--dur);
}
.nav-toggle:hover{ background:rgba(87,64,48,.05); }
.nav-toggle svg{ width:20px; height:20px; display:block; }
.nav-toggle .open-icon{ display:block; }
.nav-toggle .close-icon{ display:none; }
.nav.is-open .nav-toggle .open-icon{ display:none; }
.nav.is-open .nav-toggle .close-icon{ display:block; }
/* Mobile menu when open: full-width flyout. */
.nav.is-open .nav-links{
display:flex; flex-direction:column; gap:0; align-items:stretch;
position:absolute; left:0; right:0; top:100%;
background:var(--cream-2);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:4px 0;
box-shadow:var(--shadow-soft);
}
.nav.is-open .nav-links li{ list-style:none; }
.nav.is-open .nav-links a{
display:block; padding:14px 24px; font-size:16px; color:var(--walnut-deep);
border-bottom:1px solid var(--line);
}
.nav.is-open .nav-links li:last-child a{ border-bottom:0; }
.nav.is-open .nav-links a:hover{ background:rgba(87,64,48,.05); }
.nav.is-open .nav-links a.signin-mobile{
color:var(--walnut-deep); font-weight:600;
}
/* Desktop: nav-links visible inline, single 'Sign in' link, hamburger hidden,
and the duplicate '.signin-mobile' inside .nav-links is hidden. */
@media (min-width: 900px){
.nav-links{ display:flex; }
.nav-links a.signin-mobile{ display:none !important; }
.nav-signin{ display:inline-flex; padding:10px 12px; }
.nav-toggle{ display:none !important; }
}
/* ---------- hero ---------- */
.hero{ padding-top:64px; padding-bottom:64px; }
@media (min-width: 900px){ .hero{ padding-top:96px; padding-bottom:96px; } }
.hero-grid{ display:grid; gap:48px; align-items:center; }
@media (min-width: 900px){ .hero-grid{ grid-template-columns:1.05fr 1fr; gap:64px; } }
.hero h1{ margin:14px 0 18px; }
.hero .lead{ max-width:48ch; }
.hero-cta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:28px; }
.hero-trust{ margin-top:18px; font-size:13px; color:var(--muted); }
/* phone mockup */
.phone{
width:100%; max-width:340px; margin:0 auto;
background:var(--cream); border:1px solid var(--line-strong);
border-radius:36px; padding:14px; box-shadow:var(--shadow-card);
aspect-ratio: 9 / 18;
}
.phone-screen{
background:var(--cream-2);
border-radius:24px; height:100%;
padding:16px 14px; overflow:hidden;
display:flex; flex-direction:column; gap:10px;
}
.phone-bar{ height:6px; width:36px; background:rgba(87,64,48,.18); border-radius:6px; align-self:center; }
.phone-title{ font-family:var(--font-display); font-weight:500; font-size:18px; color:var(--walnut-deep); margin-top:6px; }
.phone-sub{ font-size:11px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
.res-card{
background:var(--cream);
border:1px solid var(--line);
border-radius:14px; padding:11px 12px;
display:flex; gap:10px; align-items:flex-start;
box-shadow:0 1px 0 rgba(60,44,32,.04);
}
.res-stripe{ width:3px; align-self:stretch; border-radius:3px; background:var(--walnut); }
.res-meta{ flex:1; min-width:0; }
.res-name{ font-family:var(--font-display); font-weight:500; font-size:15px; color:var(--walnut-deep); line-height:1.2; }
.res-when{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.res-tag{
font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--walnut-deep); background:var(--babyblue);
padding:3px 7px; border-radius:999px; align-self:flex-start;
}
.res-tag--resy{ background:#E8B7B0; }
.res-tag--ot{ background:#D9B98F; }
.res-tag--tock{ background:var(--babyblue); }
.res-tag--7r{ background:#CBB7D9; }
/* ---------- "how it works" steps ---------- */
.steps{ display:grid; gap:28px; margin-top:48px; }
@media (min-width: 760px){ .steps{ grid-template-columns:repeat(3, 1fr); gap:32px; } }
.step{
background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card);
padding:28px 24px; box-shadow:var(--shadow-soft);
}
/* Icon + step-number lockup: a 40px tile with the SVG centered, the step
number tucked in a small pill bottom-right so the "Three steps" pattern
stays readable but the visual hierarchy is the icon, not the number. */
.step .ico{
position:relative;
width:44px; height:44px; border-radius:12px;
background:var(--babyblue-tint-strong); color:var(--walnut-deep);
display:flex; align-items:center; justify-content:center;
margin-bottom:16px;
}
.step .ico svg{ width:22px; height:22px; }
.step .ico .num{
position:absolute; right:-6px; bottom:-6px;
width:22px; height:22px; border-radius:50%;
background:var(--walnut-deep); color:var(--cream);
font-family:var(--font-body); font-weight:700; font-size:11px;
display:flex; align-items:center; justify-content:center;
border:2px solid var(--cream);
font-feature-settings:"tnum" 1;
}
.section--cream2 .step .ico .num{ border-color:var(--cream-2); }
.step h3{ margin-bottom:8px; }
.step p{ margin:0; color:var(--walnut); }
/* ---------- features grid ---------- */
.features{ display:grid; gap:18px; margin-top:48px; }
@media (min-width: 760px){ .features{ grid-template-columns:repeat(2,1fr); gap:22px; } }
@media (min-width: 1080px){ .features{ grid-template-columns:repeat(4,1fr); } }
.feature{
background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card);
padding:24px; box-shadow:var(--shadow-soft);
}
.feature .ico{
width:38px; height:38px; border-radius:10px;
background:var(--babyblue-tint-strong); color:var(--walnut-deep);
display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.feature h3{ font-size:20px; margin-bottom:6px; }
.feature p{ margin:0; color:var(--walnut); font-size:15px; }
/* ---------- privacy block ---------- */
.privacy{
text-align:center;
padding:72px 24px;
border-radius:0;
}
.privacy h2{ max-width:18ch; margin:0 auto 18px; }
.privacy p{ max-width:64ch; margin:0 auto; color:var(--walnut); font-size:var(--fs-lead); }
/* ---------- works-with badges ---------- */
.works{ text-align:center; }
.works h2{ margin-bottom:32px; }
.badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.badge{
display:inline-flex; align-items:center; gap:8px;
background:var(--cream); border:1px solid var(--line-strong);
border-radius:var(--r-pill); padding:10px 18px; font-weight:600; color:var(--walnut-deep);
font-size:15px;
}
.badge .dot{ width:8px; height:8px; border-radius:50%; }
/* ---------- social proof ---------- */
.testimonials{ display:grid; gap:18px; margin-top:40px; }
@media (min-width: 760px){ .testimonials{ grid-template-columns:repeat(3,1fr); gap:22px; } }
.tcard{
background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card);
padding:24px; box-shadow:var(--shadow-soft);
}
.tcard .quote{ font-family:var(--font-display); font-weight:500; font-size:22px; line-height:1.25; color:var(--walnut-deep); }
.tcard .who{ margin-top:14px; font-size:13px; color:var(--muted); }
/* ---------- principles (honest claims grid) ---------- */
.principles{ display:grid; gap:18px; margin-top:40px; }
@media (min-width: 760px){ .principles{ grid-template-columns:repeat(3,1fr); gap:22px; } }
.pcard{
background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card);
padding:26px 24px 24px; box-shadow:var(--shadow-soft);
}
.pcard h3{
font-family:var(--font-body); font-weight:600; font-size:17px;
letter-spacing:-0.005em; color:var(--walnut-deep); margin:0 0 8px;
}
.pcard p{ margin:0; color:var(--walnut); font-size:15px; line-height:1.6; }
/* ---------- FAQ ---------- */
.faq{ max-width:780px; margin:40px auto 0; }
.faq details{
background:var(--cream); border:1px solid var(--line); border-radius:14px;
padding:18px 22px; margin-bottom:14px;
transition:background var(--dur), border-color var(--dur);
}
.faq details[open]{ background:var(--cream-2); border-color:var(--line-strong); }
.faq summary{
cursor:pointer; list-style:none;
display:flex; justify-content:space-between; align-items:center; gap:16px;
font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--walnut-deep);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--font-body); font-weight:500; color:var(--walnut); font-size:22px; }
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin-top:14px; color:var(--walnut); }
/* ---------- final CTA band ---------- */
.cta-band{ text-align:center; }
.cta-band h2{ max-width:18ch; margin:0 auto 28px; }
/* ---------- footer ---------- */
.footer{
background:var(--cream-2);
border-top:1px solid var(--line);
padding:48px 0 32px;
}
.footer-inner{ display:grid; gap:32px; padding:0 24px; max-width:var(--maxw); margin:0 auto; }
@media (min-width: 820px){ .footer-inner{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; text-decoration:none; color:var(--walnut-deep); }
.footer-brand img{ width:32px; height:32px; border-radius:50%; }
.footer-brand .wordmark{ font-family:var(--font-display); font-weight:500; font-size:22px; }
.footer h4{ font-family:var(--font-body); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--walnut); margin:0 0 14px; font-weight:700; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer a{ color:var(--walnut); text-decoration:none; font-size:14px; }
.footer a:hover{ color:var(--walnut-deep); text-decoration:underline; }
.footer-entity{ grid-column:1/-1; border-top:1px solid var(--line); padding-top:24px; margin-top:8px; font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
/* ---------- guides index cards (2-up, sans titles for clean wrap) ---------- */
.guide-grid{ display:grid; gap:20px; margin-top:8px; }
@media (min-width: 760px){ .guide-grid{ grid-template-columns:repeat(2,1fr); gap:24px; } }
.guide-card{
display:flex; flex-direction:column; gap:10px;
background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card);
padding:28px 28px 24px;
text-decoration:none; color:var(--walnut-deep);
box-shadow:var(--shadow-soft);
transition:transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur);
}
.guide-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:var(--line-strong); }
.guide-card .eyebrow{ margin:0; }
.guide-card h2{
font-family:var(--font-body); font-weight:600;
font-size:21px; line-height:1.35; letter-spacing:-0.005em;
color:var(--walnut-deep);
text-wrap:balance;
margin:0;
}
.guide-card p{ color:var(--walnut); font-size:15px; line-height:1.55; margin:0; }
.guide-card-cta{
margin-top:auto; padding-top:8px;
font-size:14px; font-weight:600; color:var(--walnut-deep);
}
/* ---------- guide article pages ---------- */
.guide article{ max-width:720px; margin:0 auto; padding:0 24px; }
.guide h1{ font-size:clamp(34px, 5vw, 56px); margin-bottom:18px; font-weight:600; }
.guide .lead{ margin-bottom:32px; }
.guide article h2{ font-size:clamp(24px, 3vw, 32px); margin-top:48px; margin-bottom:14px; font-weight:500; }
.guide article h3{ font-size:20px; margin-top:32px; margin-bottom:10px; font-weight:500; }
.guide article p, .guide article li{ font-size:17px; line-height:1.65; color:var(--walnut); }
.guide article p{ margin:0 0 16px; }
.guide article ol, .guide article ul{ padding-left:22px; margin:0 0 18px; }
.guide article li{ margin-bottom:8px; }
.crumbs{ font-size:13px; color:var(--muted); margin-bottom:20px; }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--walnut); text-decoration:underline; }
/* ---------- "About" page ---------- */
.about-hero{ padding-top:72px; padding-bottom:24px; }
.about article{ max-width:760px; margin:0 auto; padding:0 24px 96px; }
.about article p{ font-size:17px; line-height:1.65; color:var(--walnut); margin:0 0 18px; }
.about article h2{ font-size:clamp(24px, 3vw, 32px); margin-top:48px; margin-bottom:12px; font-weight:500; }
/* ---------- subtle animated demo (the "email becomes card" inset) ---------- */
.demo{
margin-top:48px;
background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card);
padding:24px; box-shadow:var(--shadow-soft);
display:grid; gap:18px;
}
@media (min-width: 760px){ .demo{ grid-template-columns:1fr auto 1fr; align-items:center; gap:28px; } }
.demo-mail{
background:var(--cream-2); border:1px solid var(--line); border-radius:12px; padding:14px;
font-family:var(--font-body); font-size:13px; color:var(--walnut-deep); line-height:1.5;
}
.demo-mail .from{ font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.demo-arrow{
align-self:center; justify-self:center;
font-family:var(--font-display); color:var(--walnut); font-size:28px;
animation:slideArrow 2.4s var(--ease) infinite;
}
@keyframes slideArrow{ 0%,100%{ transform:translateX(-4px); opacity:.65; } 50%{ transform:translateX(4px); opacity:1; } }
.demo-card{
background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:14px;
display:flex; gap:12px; align-items:flex-start;
animation:cardAppear 3.6s var(--ease) infinite;
transform-origin:50% 50%;
}
.demo-card .stripe{ width:3px; align-self:stretch; border-radius:3px; background:var(--walnut); }
@keyframes cardAppear{
0% { transform:scale(.97); opacity:.55; box-shadow:0 0 0 rgba(60,44,32,0); }
25% { transform:scale(1); opacity:1; box-shadow:0 8px 22px rgba(60,44,32,.12); }
75% { transform:scale(1); opacity:1; box-shadow:0 8px 22px rgba(60,44,32,.12); }
100% { transform:scale(.97); opacity:.55; box-shadow:0 0 0 rgba(60,44,32,0); }
}
@media (prefers-reduced-motion: reduce){
.demo-arrow{ animation:none; }
.demo-card{ animation:none; box-shadow:var(--shadow-soft); }
}
/* ============================================================
v2 component library (uplift pass)
Adds: refined nav scroll state, section ornaments, dashboard mock,
platform strip, signature, stat row, dark noir section, testimonials v2,
guides teaser, toast, scroll-reveal, hover refinements.
============================================================ */
/* nav scroll state — subtle elevation when page is scrolled */
.nav.is-scrolled{
box-shadow:0 1px 0 var(--line), 0 4px 18px rgba(60,44,32,.04);
}
/* section eyebrow + ornaments */
.section-head{ max-width:760px; }
.section-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; }
.section-head .eyebrow::before{
content:""; width:24px; height:1px; background:var(--walnut); opacity:.5; display:inline-block;
}
.ornament{
display:flex; align-items:center; justify-content:center; gap:14px;
color:var(--walnut); opacity:.55; margin:32px auto;
}
.ornament::before,
.ornament::after{ content:""; flex:1; height:1px; background:currentColor; max-width:120px; }
.ornament .mark{ font-family:var(--font-display); font-size:18px; letter-spacing:.04em; }
/* hero v2 — dashboard mockup */
.hero-trust-list{
display:flex; flex-wrap:wrap; gap:14px 22px; margin-top:22px;
font-size:13px; color:var(--walnut); list-style:none; padding:0;
}
.hero-trust-list li{ display:inline-flex; align-items:center; gap:8px; }
.hero-trust-list li::before{
content:""; width:6px; height:6px; border-radius:50%; background:var(--leaf);
}
/* platform strip */
.platform-strip{
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
padding:22px 0; background:var(--cream);
}
.platform-strip-inner{
display:flex; flex-wrap:wrap; gap:18px 36px; align-items:center; justify-content:center;
max-width:var(--maxw); margin:0 auto; padding:0 24px;
}
.platform-strip .label{
font-family:var(--font-body); font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:var(--muted); font-weight:600;
}
.platform-mark{
font-family:var(--font-display); font-weight:500;
font-size:clamp(20px, 2.2vw, 26px);
color:var(--walnut-deep); letter-spacing:0;
}
.platform-mark .accent{
display:inline-block; width:6px; height:6px; border-radius:50%;
vertical-align:middle; margin-right:6px;
}
/* Dashboard mockup — used in hero + product preview sections.
Built as a self-contained, device-framed card so it reads as the product
even when other styles (.reveal transforms) create a new stacking context.
The previous z-index:-1 halo was getting clipped by .reveal — replaced
with a layered box-shadow + gradient cap. */
.dash-mock{
position:relative;
background:var(--cream);
border:1px solid var(--line-strong);
border-radius:var(--r-lg);
padding:0;
box-shadow:
0 1px 0 var(--line-strong),
0 1px 2px rgba(60,44,32,.04),
0 24px 48px -8px rgba(60,44,32,.18),
0 48px 96px -24px rgba(60,44,32,.14);
max-width:520px; margin:0 auto;
overflow:hidden;
isolation:isolate;
}
.dash-mock::before{
content:""; position:absolute; left:0; right:0; top:0; height:120px;
background:linear-gradient(180deg, var(--babyblue-tint-strong) 0%, transparent 100%);
pointer-events:none; z-index:0;
}
.dash-mock-bar{
position:relative; z-index:1;
display:flex; align-items:center; gap:14px;
padding:14px 18px;
background:rgba(245,239,228,.7);
border-bottom:1px solid var(--line);
backdrop-filter:blur(8px);
}
.dash-mock-dots{ display:flex; gap:6px; }
.dash-mock-dots span{
width:10px; height:10px; border-radius:50%; background:var(--line-strong);
}
.dash-mock-dots span:nth-child(1){ background:#E8B7B0; }
.dash-mock-dots span:nth-child(2){ background:#D9B98F; }
.dash-mock-dots span:nth-child(3){ background:#A8C39A; }
.dash-mock-title{
font-family:var(--font-display); font-weight:500; color:var(--walnut-deep);
font-size:17px; margin-left:auto; margin-right:auto;
}
.dash-mock-eyebrow{
position:relative; z-index:1;
font-size:10px; letter-spacing:.16em; text-transform:uppercase;
color:var(--walnut); font-weight:600;
padding:18px 22px 6px;
display:flex; align-items:center; gap:10px;
}
.dash-mock-eyebrow::after{
content:""; flex:1; height:1px; background:var(--line);
}
.dash-mock > .dash-row{ padding-left:22px; padding-right:22px; }
.dash-row{
position:relative; z-index:1;
display:flex; gap:14px; align-items:center;
padding:16px 4px;
border-bottom:1px solid var(--line);
background:var(--cream);
transition:background var(--dur);
}
.dash-row:last-child{ border-bottom:0; }
.dash-row-stripe{ width:3px; height:36px; border-radius:3px; flex-shrink:0; }
.dash-row-meta{ flex:1; min-width:0; }
.dash-row-name{
font-family:var(--font-display); font-weight:500; font-size:19px;
color:var(--walnut-deep); line-height:1.2;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dash-row-when{ font-size:13px; color:var(--walnut); margin-top:3px; }
.dash-row-when .sep{ color:var(--muted); margin:0 6px; }
.dash-pill{
font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--walnut-deep); padding:5px 11px; border-radius:999px;
flex-shrink:0; white-space:nowrap;
box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.dash-pill--resy{ background:#E8B7B0; }
.dash-pill--ot{ background:#D9B98F; }
.dash-pill--tock{ background:var(--babyblue); }
.dash-pill--7r{ background:#CBB7D9; }
.dash-pill--other{ background:var(--cream-2); border:1px solid var(--line); color:var(--walnut); }
.dash-mock:hover .dash-row:hover{ background:rgba(171,203,221,.10); }
/* signature feature block — Canva-style product preview */
.signature{
display:grid; gap:32px; align-items:center; margin-top:8px;
}
@media (min-width: 900px){
.signature{ grid-template-columns:1.05fr 1fr; gap:64px; }
.signature.is-reversed{ grid-template-columns:1fr 1.05fr; }
.signature.is-reversed .signature-visual{ order:-1; }
}
.signature-visual{
background:var(--cream); border:1px solid var(--line);
border-radius:var(--r-card); padding:28px;
box-shadow:var(--shadow-medium);
position:relative; overflow:hidden;
}
.signature-visual::before{
content:""; position:absolute; inset:-1px; pointer-events:none;
background:radial-gradient(80% 50% at 20% 0%, var(--babyblue-tint), transparent 60%);
z-index:0;
}
.signature-visual > *{ position:relative; z-index:1; }
.signature h3{ font-size:clamp(22px, 2.2vw, 28px); margin-bottom:12px; }
.signature p{ color:var(--walnut); }
.signature-cta{ margin-top:18px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
/* Email-to-card transform: an "envelope" before card and a polished after card,
connected by a soft chevron. Replaces the prior -monospace layout that
read as raw text rather than as a designed product story. */
.parse-demo{ display:flex; flex-direction:column; gap:14px; }
.parse-demo .envelope{
background:var(--cream-2); border:1px solid var(--line); border-radius:14px;
padding:0; overflow:hidden;
box-shadow:var(--shadow-hairline);
}
.parse-demo .envelope-head{
background:var(--cream);
border-bottom:1px solid var(--line);
padding:12px 16px;
display:flex; flex-direction:column; gap:4px;
}
.parse-demo .envelope-from{
font-size:10.5px; letter-spacing:.10em; text-transform:uppercase;
color:var(--muted); font-weight:600;
}
.parse-demo .envelope-subject{
font-family:var(--font-display); font-weight:500; font-size:17px;
color:var(--walnut-deep); line-height:1.25;
}
.parse-demo .envelope-body{
padding:14px 16px 16px; font-size:13.5px; line-height:1.55;
color:var(--walnut); font-family:var(--font-body);
}
.parse-demo .envelope-body p{ margin:0 0 8px; }
.parse-demo .envelope-body p:last-child{ margin:0; }
.parse-demo .hl{
background:var(--babyblue-tint-strong);
border-bottom:1px solid var(--babyblue-deep);
padding:0 3px; border-radius:3px;
color:var(--walnut-deep); font-weight:500;
}
.parse-demo .transform-arrow{
display:flex; align-items:center; justify-content:center;
width:36px; height:36px; border-radius:50%;
background:var(--walnut-deep); color:var(--cream);
margin:-4px auto; position:relative; z-index:2;
box-shadow:0 4px 12px rgba(60,44,32,.18);
}
.parse-demo .transform-arrow svg{ width:18px; height:18px; }
.parse-demo .out-card{
background:var(--cream); border:1px solid var(--line-strong);
border-radius:14px; padding:16px 18px;
display:flex; gap:14px; align-items:center;
box-shadow:var(--shadow-medium);
}
.parse-demo .out-card .dash-row-stripe{ width:3px; height:40px; border-radius:3px; flex-shrink:0; }
.parse-demo .out-card .dash-row-meta{ flex:1; min-width:0; }
.parse-demo .out-card .dash-row-name{
font-family:var(--font-display); font-weight:500; font-size:20px;
color:var(--walnut-deep); line-height:1.2;
}
.parse-demo .out-card .dash-row-when{ font-size:13px; color:var(--walnut); margin-top:3px; }
.parse-demo .out-card .dash-pill{ flex-shrink:0; }
/* Extraction card — used in the "Reads any confirmation" feature signature.
A designed UI surface showing what CityNoms pulled from the email: a header
row with platform badge + verified pill, then field rows with label/value. */
.extract-card{
background:var(--cream); border:1px solid var(--line);
border-radius:14px; overflow:hidden;
box-shadow:var(--shadow-medium);
}
.extract-card-head{
background:var(--cream-2);
padding:12px 18px;
border-bottom:1px solid var(--line);
display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.extract-card-head .label{
font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
color:var(--muted); font-weight:600;
}
.extract-card-head .verified{
display:inline-flex; align-items:center; gap:6px;
font-size:11px; font-weight:600;
background:rgba(95,120,85,.12); color:#3F5237;
border:1px solid rgba(95,120,85,.32);
border-radius:999px; padding:3px 9px;
}
.extract-card-head .verified::before{
content:""; width:5px; height:5px; border-radius:50%; background:#5F7855;
}
.extract-row{
display:grid; grid-template-columns:96px 1fr;
gap:14px; align-items:center;
padding:11px 18px;
border-bottom:1px solid var(--line);
}
.extract-row:last-child{ border-bottom:0; }
.extract-row .key{
font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
color:var(--muted); font-weight:600;
}
.extract-row .val{
font-size:15px; color:var(--walnut-deep); line-height:1.35;
}
.extract-row .val--name{ font-family:var(--font-display); font-weight:500; font-size:20px; line-height:1.15; }
.extract-row .val--mono{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:13px; color:var(--walnut);
background:var(--cream-2); border:1px solid var(--line);
border-radius:6px; padding:2px 8px; display:inline-block;
}
/* stat row — quiet numbers */
.stat-row{
display:grid; gap:18px; margin-top:48px;
}
@media (min-width: 760px){ .stat-row{ grid-template-columns:repeat(4,1fr); gap:0; } }
.stat{
text-align:center; padding:24px 16px;
border-top:1px solid var(--line);
}
@media (min-width: 760px){
.stat{ border-top:0; border-left:1px solid var(--line); }
.stat:first-child{ border-left:0; }
}
.stat-num{
font-family:var(--font-display); font-weight:600;
font-size:clamp(36px, 4vw, 52px); color:var(--walnut-deep); line-height:1;
letter-spacing:-0.01em;
}
.stat-label{
margin-top:8px; font-size:13px; color:var(--walnut);
letter-spacing:.04em;
}
/* dark "noir" section — SevenRooms-grade */
.section--noir{
background:var(--walnut-deep); color:var(--cream);
}
.section--noir h2{ color:var(--cream); }
.section--noir .eyebrow{ color:rgba(245,239,228,.65); }
.section--noir .lead{ color:rgba(245,239,228,.84); }
.section--noir .ornament{ color:rgba(245,239,228,.5); }
.section--noir a{ color:var(--cream); }
.noir-card{
background:rgba(245,239,228,.06); border:1px solid rgba(245,239,228,.14);
border-radius:var(--r-card); padding:32px;
}
.noir-card h3{ color:var(--cream); margin-bottom:10px; }
.noir-card p{ color:rgba(245,239,228,.8); margin:0; }
/* guides teaser on home */
.teaser-grid{
display:grid; gap:20px; margin-top:8px;
}
@media (min-width: 760px){ .teaser-grid{ grid-template-columns:repeat(2,1fr); gap:24px; } }
.teaser{
display:flex; flex-direction:column; gap:12px;
background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card);
padding:28px 28px 24px; text-decoration:none; color:var(--walnut-deep);
box-shadow:var(--shadow-soft);
transition:transform var(--dur) var(--ease), box-shadow var(--dur);
}
.teaser:hover{ transform:translateY(-2px); box-shadow:var(--shadow-medium); }
.teaser .eyebrow{ margin:0; }
.teaser h3{ font-family:var(--font-body); font-weight:600; font-size:21px; line-height:1.35; letter-spacing:-0.005em; }
.teaser p{ color:var(--walnut); font-size:15px; line-height:1.55; margin:0; }
.teaser-cta{ margin-top:auto; padding-top:8px; font-size:14px; font-weight:600; }
/* testimonial v2 — editorial */
.testimonials-v2{ display:grid; gap:22px; margin-top:40px; }
@media (min-width: 760px){ .testimonials-v2{ grid-template-columns:repeat(3,1fr); } }
.tcard-v2{
display:flex; flex-direction:column; gap:18px;
background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card);
padding:28px 26px;
box-shadow:var(--shadow-soft);
}
.tcard-v2 .quote-mark{
font-family:var(--font-display); font-size:48px; line-height:.6;
color:var(--babyblue-deep);
}
.tcard-v2 .quote{
font-family:var(--font-display); font-weight:500; font-size:21px; line-height:1.3;
color:var(--walnut-deep); flex:1;
}
.tcard-v2 .attrib{
display:flex; align-items:center; gap:12px; padding-top:12px;
border-top:1px solid var(--line);
}
.tcard-v2 .avatar{
width:36px; height:36px; border-radius:50%; background:var(--babyblue-tint-strong);
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:600; color:var(--walnut-deep);
font-size:15px; flex-shrink:0;
}
.tcard-v2 .who{ font-size:14px; color:var(--walnut); line-height:1.3; }
.tcard-v2 .who strong{ display:block; color:var(--walnut-deep); font-weight:600; }
/* scroll-reveal — tasteful fade-in (gated by no-reduced-motion via media query below) */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
.reveal{ opacity:1; transform:none; transition:none; }
}
/* toast / confirmation pattern (used by app) */
.toast{
position:fixed; left:50%; bottom:24px;
transform:translate(-50%, 24px); opacity:0;
background:var(--walnut-deep); color:var(--cream);
border-radius:14px; padding:12px 18px;
font-size:14px; font-weight:500;
box-shadow:var(--shadow-floating);
z-index:80; pointer-events:none;
transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
display:flex; align-items:center; gap:10px;
max-width:min(90vw, 460px);
}
.toast::before{
content:"✓"; display:inline-flex; align-items:center; justify-content:center;
width:18px; height:18px; border-radius:50%; background:var(--leaf); color:var(--cream);
font-weight:700; font-size:11px;
}
.toast.is-visible{ opacity:1; transform:translate(-50%, 0); }
/* premium empty state (homepage CTA tile + app empty) */
.empty-premium{
text-align:center;
background:var(--cream); border:1px dashed var(--line-strong);
border-radius:var(--r-card); padding:48px 28px;
}
.empty-premium .empty-mark{
width:56px; height:56px; margin:0 auto 14px;
border-radius:50%; background:var(--babyblue-tint-strong);
display:flex; align-items:center; justify-content:center;
}
.empty-premium h3{ font-family:var(--font-display); font-weight:500; font-size:22px; margin-bottom:8px; }
.empty-premium p{ color:var(--walnut); margin:0 0 18px; }
.empty-premium .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
/* review flag / needs-review state pill */
.review-flag{
display:inline-flex; align-items:center; gap:6px;
background:var(--warm-tint); color:var(--warm);
border:1px solid rgba(196,98,59,.32);
border-radius:999px; padding:3px 10px;
font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
.review-flag::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--warm); }
/* refined button hover */
.btn{ transition:transform var(--dur) var(--ease-out), background var(--dur), box-shadow var(--dur); }
.btn:hover{ box-shadow:var(--shadow-medium); }
.btn-primary:hover{ background:var(--walnut); transform:translateY(-2px); box-shadow:var(--shadow-floating); }
/* CTA tile pattern (used in features section + footer) */
.cta-tile{
background:linear-gradient(135deg, var(--cream-2), var(--cream));
border:1px solid var(--line-strong);
border-radius:var(--r-card);
padding:32px 28px; text-align:center;
position:relative; overflow:hidden;
}
.cta-tile::before{
content:""; position:absolute; inset:0;
background:radial-gradient(80% 80% at 100% 0%, var(--babyblue-tint-strong), transparent 60%);
pointer-events:none;
}
.cta-tile > *{ position:relative; }
.cta-tile h3{ font-size:24px; margin-bottom:6px; }
.cta-tile p{ color:var(--walnut); margin:0 0 18px; }
/* article enhancement (about + guides) */
.lead-quote{
border-left:3px solid var(--babyblue-deep);
padding:6px 0 6px 18px; margin:32px 0;
font-family:var(--font-display); font-style:italic;
font-size:clamp(22px, 2.4vw, 28px); line-height:1.35; color:var(--walnut-deep);
}
/* refined focus state already global, but make it visible against the noir section too */
.section--noir :focus-visible{ outline-color:var(--babyblue); }
/* utility: badge dot for live activity */
.live-dot{
display:inline-block; width:8px; height:8px; border-radius:50%;
background:var(--leaf); margin-right:6px;
box-shadow:0 0 0 4px rgba(95,120,85,.22);
animation:livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse{
0%, 100%{ box-shadow:0 0 0 4px rgba(95,120,85,.22); }
50%{ box-shadow:0 0 0 9px rgba(95,120,85,0); }
}
@media (prefers-reduced-motion: reduce){
.live-dot{ animation:none; }
}
/* ---------- prose utility (long-form copy inside sections) ---------- */
.prose{ max-width:760px; margin:0 auto; }
.prose p{ font-size:17px; line-height:1.65; color:var(--walnut); margin:0 0 16px; }
.prose h2{ font-size:clamp(22px, 2.4vw, 28px); margin-top:32px; margin-bottom:10px; font-weight:500; }
.prose h3{ font-size:20px; margin-top:24px; margin-bottom:8px; font-weight:500; }
.prose ul, .prose ol{ padding-left:22px; margin:0 0 18px; }
.prose li{ font-size:17px; line-height:1.65; color:var(--walnut); margin-bottom:8px; }
.prose blockquote{ border-left:3px solid var(--babyblue-deep); padding:6px 0 6px 18px; margin:18px 0; font-style:italic; color:var(--walnut-deep); }
/* ---------- screen reader only ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* ============================================================
Refinement pass: centered editorial layout + edge doodles.
Appended last so it cleanly overrides earlier alignment rules.
============================================================ */
html{ overflow-x:clip; }
body{ position:relative; }
/* centered section heads everywhere */
.section-head{ margin-left:auto; margin-right:auto; text-align:center; }
/* hero: one centered column, dashboard mock beneath the copy */
.hero-grid{ text-align:center; justify-items:center; }
@media (min-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:44px; } }
.hero-grid > .reveal{ max-width:720px; }
.hero h1{ margin-top:6px; }
.hero .lead{ margin-left:auto; margin-right:auto; }
.hero-cta{ justify-content:center; }
.hero-trust-list{ justify-content:center; flex-wrap:wrap; }
.hero-visual{ display:flex; justify-content:center; width:100%; }
.hero-visual .dash-mock{ width:100%; max-width:430px; }
/* signature blocks: stack and center (copy on top, visual below) */
@media (min-width:900px){
.signature, .signature.is-reversed{ grid-template-columns:1fr; gap:40px; }
.signature.is-reversed .signature-visual{ order:0; }
}
.signature{ text-align:center; justify-items:center; }
.signature .section-head{ text-align:center; }
.signature .lead{ max-width:60ch; margin-left:auto; margin-right:auto; }
.signature-cta{ justify-content:center; }
.signature-visual{ width:100%; max-width:560px; margin-left:auto; margin-right:auto; }
/* center the short card copy in steps + features */
.step, .feature{ text-align:center; }
.step .ico, .feature .ico{ margin-left:auto; margin-right:auto; }
/* ------------------------------------------------------------
Edge doodles: small, thin baby-blue food line-art scattered
down the desktop gutters. Decorative, non-interactive, and
only shown when there is gutter room (>=1200px). Clipped so
they never extend the page or cause horizontal scroll.
------------------------------------------------------------ */
.edge-doodles{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:clip; display:none; }
@media (min-width:1000px){ .edge-doodles{ display:block; } }
.edge-doodles .doodle{ position:absolute; width:42px; height:42px; color:var(--babyblue-deep); opacity:.7; }
.edge-doodles .doodle svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }