/* ============================================================ Sammelan — design system (editorial / porcelain / exclusive) Themes per [data-theme]; base vars = porcelain (ivory + ink) ============================================================ */ /* Single palette. --maroon is the primary DARK (footer, nav mark, ink text) despite its name; --accent is the only saturated colour, used sparingly: primary button, logo disc, marquee band, the "shubh" italic, live dot, beta pill and the ambient motifs. Keep it scarce — that is the point. */ :root { --cream: #FDFBF7; --cream-deep: #F5F0E8; --maroon: #1A1613; --maroon-deep: #0E0B08; --maroon-light: #443C34; --gold: #756B60; --gold-deep: #5A5147; --gold-pale: #EFE9DF; --ink: #1A1613; --ink-soft: #7C7268; --border: rgba(26, 22, 19, 0.12); --accent: #7A2E2E; /* accent as a SURFACE (buttons, band, pills) */ --accent-ink: #7A2E2E; /* accent as INK on the page — same in light, lighter in dark */ --accent-deep: #5E2222; } :root { /* Declared per-state rather than "light dark", so the browser's scrollbars and form controls follow the palette the visitor CHOSE, not the one their OS reports. The inline script in each page's resolves that choice before first paint. */ color-scheme: light; --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none'%3E%3Cg stroke='black' stroke-width='1.25'%3E%3Ccircle cx='200' cy='200' r='180' opacity='.45'/%3E%3Ccircle cx='200' cy='200' r='124' opacity='.7'/%3E%3Ccircle cx='200' cy='200' r='68' opacity='.9'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='200' cy='76' r='7'/%3E%3Ccircle cx='287.7' cy='112.3' r='7'/%3E%3Ccircle cx='324' cy='200' r='7'/%3E%3Ccircle cx='287.7' cy='287.7' r='7'/%3E%3Ccircle cx='200' cy='324' r='7'/%3E%3Ccircle cx='112.3' cy='287.7' r='7'/%3E%3Ccircle cx='76' cy='200' r='7'/%3E%3Ccircle cx='112.3' cy='112.3' r='7'/%3E%3C/g%3E%3Ccircle cx='200' cy='200' r='24' fill='black' opacity='.7'/%3E%3C/svg%3E"); /* Text and marks that sit ON an accent/green surface. These stay light in BOTH colour schemes, because the surface under them stays coloured — this is the one thing a straight light/dark swap of --cream gets wrong. */ --on-accent: #FDFBF7; /* Phone mock-up surfaces. Hoisted out of the rules so the dark scheme can retheme the handset to WhatsApp's own dark palette instead of leaving a glowing white screen on a dark page. */ --phone-frame: #0e0d0b; --chat-bubble-out: #D9F5C6; --chat-card-border: #e5dfd5; --chat-card-alt: #F1EDE5; --chat-chip: rgba(255, 255, 255, 0.92); --chat-input-bg: rgba(255, 255, 255, 0.75); --chat-sheen: rgba(255, 255, 255, 0.22); --chat-dot: rgba(23, 21, 18, 0.04); --chat-hairline: rgba(0, 0, 0, 0.06); --rsvp-no-border: #ddd6cd; /* The footer is its own band. In light it is the dark slab; in dark it goes DEEPER than the page rather than flipping light — see the dark block. */ --footer-bg: #1A1613; --footer-ink: #FDFBF7; --footer-rule: rgba(255, 255, 255, 0.12); --wa-green: #25D366; --wa-green-dark: #0B7A6E; --wa-chat-bg: #ECE5DD; --white: #FFFFFF; --shadow-sm: 0 4px 16px rgba(23, 21, 18, 0.05); --shadow: 0 16px 48px rgba(23, 21, 18, 0.09); --shadow-lg: 0 32px 80px rgba(23, 21, 18, 0.16); --radius: 20px; /* Vertical rhythm — the whole site runs on these two numbers. Sections stack, so the gap you SEE between any two of them is 2 x --space-section. Change these, not the individual blocks. */ --space-section: 52px; /* section top/bottom padding -> 104px between sections */ --space-head: 44px; /* a section's heading block -> its content grid */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1); --font-head: "Fraunces", Georgia, serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-hindi: "Noto Sans Devanagari", "Inter", sans-serif; } /* ---- Dark scheme --------------------------------------------------------- Not an inversion — the same design re-pigmented. Three rules govern it: 1. --cream and --maroon SWAP. Every "dark chip with cream text" in this sheet is written as (background: --maroon; color: --cream), and every page surface is --cream, so swapping the pair flips all of them at once with no per-rule edits. The footer becomes a light band closing a dark page, which is the same relationship it has in the light scheme. 2. --accent does NOT swap. It is the brand, so it stays oxblood — only lifted enough to hold light text. Text uses go through --accent-ink, which lifts further, because a deep oxblood at 0.18 opacity is invisible against a near-black page. 3. --on-accent never changes. It is the ink on surfaces that stay coloured in BOTH schemes (the accent pill, the green chat header) — the one thing a --cream/--maroon swap gets wrong. Warm near-black throughout, never #000: the light palette is warm, and a neutral black beside it reads as a different product. ------------------------------------------------------------------------ */ /* Driven by [data-theme], never by the media query directly: the script resolves (stored choice) -> (system preference) -> "light" and stamps the attribute before first paint, so there is no flash and a manual choice always wins. One consequence to know: with JS off the site stays light. */ :root[data-theme="dark"] { color-scheme: dark; --cream: #14110E; /* page */ --cream-deep: #1C1815; /* tinted band — LIGHTER than the page, so a tinted section still reads as a band */ --maroon: #F0EAE0; /* was the dark surface; now the light one */ --maroon-deep: #FDFBF7; --maroon-light: #C9BFB1; --gold: #8A8071; --gold-deep: #B3A895; --gold-pale: #2A251F; --ink: #EFE9DF; --ink-soft: #A2978A; --border: rgba(239, 233, 223, 0.15); --accent: #8E3A34; /* surface: holds --on-accent comfortably */ --accent-ink: #D98077; /* ink: readable on the page */ --accent-deep: #A34840; /* WhatsApp's own dark palette, so the handset reads as a real phone at night rather than a lit screen pasted onto a dark page */ --wa-chat-bg: #0B141A; --white: #1F2C33; --phone-frame: #2E2A26; --chat-bubble-out: #005C4B; --chat-card-border: rgba(239, 233, 223, 0.10); --chat-card-alt: #26333B; --chat-chip: rgba(29, 42, 50, 0.92); --chat-input-bg: rgba(31, 44, 51, 0.85); --chat-sheen: rgba(255, 255, 255, 0.03); --chat-dot: rgba(255, 255, 255, 0.035); --chat-hairline: rgba(255, 255, 255, 0.07); --rsvp-no-border: rgba(239, 233, 223, 0.16); /* The footer is the ONE place the --cream/--maroon swap is wrong in practice. Letting it flip made a bright slab at the foot of a dark page — defensible as "the same relationship, reversed", glaring in use. So it opts out and goes deeper than the page instead: still a distinct closing band, no glare. */ --footer-bg: #0A0806; --footer-ink: #EFE9DF; --footer-rule: rgba(239, 233, 223, 0.10); /* a black shadow on a near-black page is nothing; depth is carried on the borders instead, with just enough shadow left to lift the phone */ --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.40); --shadow: 0 16px 48px rgba(0, 0, 0, 0.55); --shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.65); } * { margin: 0; padding: 0; box-sizing: border-box; } /* [hidden] is only display:none in the UA sheet, so ANY author display rule beats it — .console-rail{display:flex} silently un-hid hidden rails. */ [hidden] { display: none !important; } /* The nav is sticky, so an in-page anchor would otherwise scroll the section title underneath it. This must equal the nav's SCROLLED height exactly — measured 70.92px (82.92 unscrolled, minus 12 when .nav-inner padding goes 17px -> 11px). Any more and a sliver of the previous section shows in the gap below the nav; any less and the section's top edge hides under it. */ html { scroll-behavior: smooth; scroll-padding-top: 71px; } body { font-family: var(--font-body); background: var(--cream); color: var(--ink); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.5s ease, color 0.5s ease; } /* whisper of film grain */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.016; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } .container { width: min(1120px, 90%); margin: 0 auto; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; line-height: 1.15; letter-spacing: -0.018em; /* browser redistributes words so a headline never ends on an orphan */ text-wrap: balance; } p { text-wrap: pretty; } /* opsz is PINNED at 24, not tracked to font-size. WONK (Fraunces' alternate letterforms) was tried and removed — its 'f' and 'g' read as a rendering fault rather than a flourish. Then plain font-optical-sizing:auto was tried and also removed: at 46px it selects Fraunces' display cut, whose 'f' has a hairline arm ending in a small ball. On a 1x screen that hairline falls under one device pixel and the letter reads as broken — reported twice as "the f looks like a bug", and it is visible in a 1x render, not just on the owner's monitor. opsz 24 keeps the finer display serifs but with terminals that survive at 1x. Do not put font-optical-sizing:auto back. */ .hero-title, .page-title, .section-title, .testimonial-pending p, .team-name { font-variation-settings: "opsz" 24; } a { color: var(--accent-ink); } ::selection { background: var(--ink); color: var(--cream); } :focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; border-radius: 4px; } /* ---------- Scroll progress ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 999; background: var(--ink); transition: width 0.12s linear; } /* ---------- Buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 32px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.015em; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-arrow { display: inline-block; transition: transform 0.35s var(--ease); } .btn:hover .btn-arrow { transform: translateX(5px); } /* primary = the accent pill; the only strong colour in the layout */ .btn-gold { background: var(--accent); color: var(--on-accent); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 30%, transparent); } .btn-gold:hover { background: var(--accent-deep); box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 40%, transparent); } .btn-ghost { background: transparent; color: var(--maroon); border-color: color-mix(in srgb, var(--maroon) 28%, transparent); } .btn-ghost:hover { border-color: var(--maroon); background: color-mix(in srgb, var(--maroon) 4%, transparent); } .btn-outline { background: transparent; color: var(--maroon); border-color: color-mix(in srgb, var(--maroon) 28%, transparent); } .btn-outline:hover { background: var(--maroon); color: var(--cream); border-color: var(--maroon); } .btn-small { padding: 11px 24px; font-size: 0.88rem; } /* ---------- Navigation ---------- */ .nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--cream) 72%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid transparent; transition: box-shadow 0.45s ease, border-color 0.45s ease, background 0.45s ease; } .nav.scrolled { background: color-mix(in srgb, var(--cream) 88%, transparent); border-bottom-color: var(--border); box-shadow: 0 8px 32px rgba(23, 21, 18, 0.05); } .nav-inner { width: min(1120px, 90%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 0; transition: padding 0.45s ease; } .nav.scrolled .nav-inner { padding: 11px 0; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } /* gathering mandala — eight dots drawn together on a ring */ .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); transition: transform 0.45s var(--ease-spring); } .brand-mark svg { width: 100%; height: 100%; display: block; } .brand:hover .brand-mark { transform: rotate(45deg); } .brand-name { font-family: var(--font-head); font-weight: 500; font-size: 1.38rem; color: var(--maroon); letter-spacing: 0.01em; } .brand-sub { font-family: var(--font-hindi); color: var(--ink-soft); font-size: 0.82rem; align-self: center; } /* still in testing — signalled once, in the nav, on every page */ .brand-tag { align-self: center; margin-left: 3px; padding: 2px 8px 3px; border: 1px solid color-mix(in srgb, var(--accent-ink) 34%, transparent); border-radius: 999px; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); line-height: 1.5; white-space: nowrap; } .nav-links { display: flex; align-items: center; gap: 30px; } /* ---------- Theme toggle ---------- */ /* Lives in the footer, NOT the nav. It was tried beside the WhatsApp CTA and read as two buttons crowding an already-long link list. Down here it is a quiet utility, which is what it is. Shows the scheme you would switch TO — a moon while the page is light, a sun while it is dark. */ .theme-toggle { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 5px 0; border: 0; background: none; color: var(--footer-ink); opacity: 0.55; font-family: inherit; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: opacity 0.3s var(--ease); } .theme-toggle:hover { opacity: 1; } .theme-toggle svg { width: 14px; height: 14px; display: block; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Repainting the whole page mid-fade looks broken: .section-tint and .footer carry a 0.5s background transition (left over from the old theme switcher) while text and borders snap. Kill every transition for one frame so the switch is clean and instant. */ .theme-switching * , .theme-switching *::before, .theme-switching *::after { transition: none !important; } .nav-links a:not(.btn) { text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.02em; padding: 4px 0; transition: color 0.25s ease; } .nav-links a:not(.btn):hover { color: var(--ink); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .nav-toggle span { width: 24px; height: 2px; background: var(--maroon); border-radius: 2px; transition: transform 0.35s var(--ease), opacity 0.3s ease; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding: 80px 0 var(--space-section); text-align: center; background: radial-gradient(ellipse 60% 45% at 50% -12%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%); } .hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: 0.35; z-index: 0; transition: translate 0.7s var(--ease); } .hero-orb-1 { width: 360px; height: 360px; top: -140px; right: -80px; background: radial-gradient(circle, color-mix(in srgb, var(--maroon) 30%, transparent), transparent 70%); animation: orb-float 13s ease-in-out infinite; } .hero-orb-2 { width: 320px; height: 320px; bottom: -150px; left: -90px; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 45%, transparent), transparent 70%); animation: orb-float 16s ease-in-out infinite reverse; } @keyframes orb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(18px, -22px) scale(1.05); } 66% { transform: translate(-12px, 14px) scale(0.97); } } /* ---------- Ambient motif ---------- The logo mandala reused as a quiet watermark down the page. Defined once as a mask rather than inline SVG, so a single rule themes with currentColor and any element can carry it. Without mask support the div just stays empty. */ .motif { position: absolute; z-index: 0; pointer-events: none; } @supports (mask-image: url("")) or (-webkit-mask-image: url("")) { .motif { background-color: currentColor; -webkit-mask: var(--motif) no-repeat center / contain; mask: var(--motif) no-repeat center / contain; } } /* sections carrying a motif must clip it and keep their content above it */ .has-motif { position: relative; overflow: hidden; } .has-motif > .container { position: relative; z-index: 1; } /* placements alternate side to side so they read as rhythm, not repetition */ .motif-hero { top: 26px; right: -80px; width: 250px; height: 250px; color: var(--accent-ink); opacity: 0.45; animation: pattern-spin 180s linear infinite; } /* ---------- Hero motif: traces itself on ---------- */ .motif-hero-draw { position: absolute; top: 26px; right: -80px; width: 250px; height: 250px; z-index: 0; pointer-events: none; color: var(--accent-ink); opacity: 0.7; /* 100s = a full turn; with 8-fold symmetry the mark repeats every 12.5s, so it reads as alive on a second glance without pulling focus off the headline */ animation: pattern-spin 100s linear infinite; } .motif-hero-draw svg { width: 100%; height: 100%; display: block; } /* rings draw clockwise from the top */ .motif-hero-draw .ring circle { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: motif-draw 1.05s var(--ease) forwards; animation-delay: calc(var(--i) * 0.1s); } @keyframes motif-draw { to { stroke-dashoffset: 0; } } /* then the eight dots arrive one at a time, around the ring */ .motif-hero-draw .dots circle { opacity: 0; transform-box: fill-box; transform-origin: center; animation: motif-dot 0.34s var(--ease-spring) forwards; animation-delay: calc(0.42s + var(--i) * 0.055s); } @keyframes motif-dot { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } } /* the gathering completes at the centre */ .motif-hero-draw .core { opacity: 0; transform-box: fill-box; transform-origin: center; animation: motif-dot 0.4s var(--ease-spring) forwards; animation-delay: 1s; } .motif-left { bottom: -85px; left: -95px; width: 285px; height: 285px; color: var(--accent-ink); opacity: 0.4; animation: pattern-spin 240s linear infinite reverse; } .motif-center { top: 50%; left: 50%; width: 430px; height: 430px; margin: -215px 0 0 -215px; color: var(--accent-ink); opacity: 0.18; animation: pattern-spin 300s linear infinite; } .motif-right { top: 40%; right: -100px; width: 260px; height: 260px; color: var(--accent-ink); opacity: 0.3; animation: pattern-spin 260s linear infinite; } .motif-footer { right: -75px; bottom: -95px; width: 265px; height: 265px; color: var(--footer-ink); opacity: 0.16; animation: pattern-spin 220s linear infinite; } @keyframes pattern-spin { to { transform: rotate(360deg); } } .hero-inner { position: relative; z-index: 1; } .hero-kicker, .hero-title, .hero-sub, .hero-cta, .hero-note, .hero-chips { opacity: 0; animation: rise-in 0.95s var(--ease) forwards; } .hero-kicker { animation-delay: 0.05s; } .hero-title { animation-delay: 0.15s; } .hero-sub { animation-delay: 0.28s; } .hero-cta { animation-delay: 0.4s; } .hero-note { animation-delay: 0.5s; } .hero-chips { animation-delay: 0.6s; } @keyframes rise-in { from { opacity: 0; transform: translateY(28px); filter: blur(7px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } .hero-kicker { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 30px; } .hero-title { font-size: clamp(2.7rem, 6vw, 4.4rem); color: var(--ink); letter-spacing: -0.028em; line-height: 1.06; font-weight: 400; } .hero-title em { font-style: italic; color: var(--accent-ink); } .hero-title-en { display: block; } .hero-title-hi { display: block; margin-top: 14px; font-family: var(--font-hindi); font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--ink-soft); letter-spacing: 0; } .hero-sub { max-width: 580px; margin: 28px auto 0; font-size: 1.05rem; color: var(--ink-soft); } .hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 38px; } .hero-note { margin-top: 22px; font-size: 0.88rem; color: var(--ink-soft); opacity: 0.8; } .hero-chips { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0; margin-top: 32px; } .chip { font-size: 0.76rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); padding: 0 22px; transition: color 0.3s ease; } .chip + .chip { border-left: 1px solid var(--border); } .chip:hover { color: var(--ink); } /* ---------- Marquee ---------- */ .marquee { overflow: hidden; background: var(--accent); padding: 13px 0; position: relative; } .marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .marquee::before { left: 0; background: linear-gradient(90deg, var(--accent), transparent); } .marquee::after { right: 0; background: linear-gradient(270deg, var(--accent), transparent); } .marquee-track { display: flex; align-items: center; gap: 30px; width: max-content; /* 38s is only a fallback for a no-JS render; main.js overwrites the duration from the built track's width so the band always moves at 45px/s. Do not tune the feel here — change PX_PER_SECOND in main.js. */ animation: marquee 38s linear infinite; will-change: transform; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { color: color-mix(in srgb, var(--on-accent) 82%, transparent); font-family: var(--font-hindi); font-size: 0.9rem; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; } .marquee-track i { color: color-mix(in srgb, var(--on-accent) 45%, transparent); font-style: normal; font-size: 1rem; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Sections ---------- */ .section { position: relative; padding: var(--space-section) 0; } .section-tint { background: var(--cream-deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background 0.5s ease; } .section-title { font-size: clamp(2rem, 4vw, 2.9rem); color: var(--ink); text-align: center; letter-spacing: -0.022em; font-weight: 400; } .section-sub { text-align: center; margin-top: 20px; color: var(--ink-soft); font-size: 1rem; max-width: 620px; margin-left: auto; margin-right: auto; } /* ---------- Steps (editorial, no boxes) ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 56px; margin-top: var(--space-head); } .step { text-align: left; border-top: 1px solid var(--ink); padding-top: 26px; transition: transform 0.5s var(--ease); } .step:hover { transform: translateY(-6px); } .step-num { font-family: var(--font-head); font-style: italic; font-size: 3rem; font-weight: 300; color: color-mix(in srgb, var(--ink) 22%, transparent); margin-bottom: 16px; line-height: 1; } .step h3 { font-size: 1.3rem; color: var(--ink); margin-bottom: 12px; } .step p { color: var(--ink-soft); font-size: 0.95rem; } /* ---------- Features (editorial list, no boxes) ---------- */ /* ONE full-width list, not two columns. With side-by-side columns the hairlines never line up across them, and the offset shifts every time a row expands. Full width means every rule spans the page and expansion just pushes down. */ .features { margin-top: var(--space-head); } .feature { display: grid; grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr); gap: 20px 56px; align-items: start; text-align: left; padding: 26px 0 28px; border-bottom: 1px solid var(--border); } .feature:first-child { border-top: 1px solid var(--border); } .feature-head { display: flex; flex-direction: column; gap: 13px; } .feature-body p { max-width: 640px; } /* ---------- Feature examples (expand to a real message) ---------- */ .feature-toggle { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 0; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.3s ease; } .feature-toggle:hover { color: var(--ink); } /* plus that loses its vertical stroke to become a minus */ .feature-mark { position: relative; width: 9px; height: 9px; flex-shrink: 0; } .feature-mark::before, .feature-mark::after { content: ""; position: absolute; background: currentColor; } .feature-mark::before { left: 0; top: 4px; width: 9px; height: 1px; } .feature-mark::after { left: 4px; top: 0; width: 1px; height: 9px; transition: transform 0.35s var(--ease); } .feature.open .feature-mark::after { transform: scaleY(0); } /* 0fr -> 1fr animates open without needing a known height */ .feature-example { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; transition: grid-template-rows 0.45s var(--ease), opacity 0.3s var(--ease), margin-top 0.45s var(--ease); } .feature.open .feature-example { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; } /* the WhatsApp wallpaper is what licenses the green bubble out here — it reads as a fragment of the chat, not as a card in the editorial layout */ /* vertical padding must be 0 when collapsed — at grid-template-rows: 0fr the row is 0 but padding still renders, leaving 26px of dead space under a closed feature. It animates in alongside the row. */ .feature-example-inner { overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 0 13px; border-radius: 14px; background-color: var(--wa-chat-bg); background-image: radial-gradient(rgba(23, 21, 18, 0.045) 1px, transparent 1.2px); background-size: 17px 17px; transition: padding 0.45s var(--ease); } .feature.open .feature-example-inner { padding: 13px; } .feature-example .bubble { max-width: 92%; font-size: 0.85rem; line-height: 1.5; } .feature-example .bubble b { font-weight: 600; } /* monoline icons — never emoji; they break the mono palette */ .icon { width: 24px; height: 24px; display: block; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; } .icon .solid { fill: currentColor; stroke: none; } /* hover brightens only — nothing shifts position, which reads as jitter */ .feature-icon { display: block; color: var(--ink); opacity: 0.72; transition: opacity 0.4s var(--ease); } .feature:hover .feature-icon { opacity: 1; } .feature h3 { font-size: 1.22rem; color: var(--ink); } .feature p { color: var(--ink-soft); font-size: 0.94rem; } /* ---------- Chat demo (phone frame) ---------- */ .phone { max-width: 420px; background: var(--phone-frame); border-radius: 44px; padding: 10px; box-shadow: 0 40px 90px rgba(23, 21, 18, 0.28); position: relative; } .phone-notch { position: absolute; top: 19px; left: 50%; transform: translateX(-50%); width: 118px; height: 23px; background: var(--phone-frame); border-radius: 0 0 17px 17px; z-index: 5; } .chat { background: var(--wa-chat-bg); border-radius: 34px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.3); } .chat-header { background: linear-gradient(120deg, #0C6E63 0%, var(--wa-green-dark) 55%, #064E48 100%); color: var(--on-accent); /* top padding clears .phone-notch, which overlaps the header — at 16px the chat title rendered underneath the notch and was half hidden */ padding: 34px 18px 14px; display: flex; align-items: center; gap: 12px; } .chat-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; flex-shrink: 0; } .chat-title { font-weight: 600; font-size: 0.97rem; } .chat-status { font-size: 0.79rem; opacity: 0.85; } .chat-body { padding: 20px 15px; min-height: 392px; display: flex; flex-direction: column; gap: 9px; background-image: radial-gradient(var(--chat-dot) 1px, transparent 1.2px), linear-gradient(180deg, var(--chat-sheen), transparent 24%); background-size: 19px 19px, 100% 100%; } .chat-date { align-self: center; background: var(--chat-chip); color: var(--ink-soft); font-size: 0.74rem; padding: 4px 13px; border-radius: 9px; margin-bottom: 8px; } .bubble { max-width: 84%; padding: 11px 15px; border-radius: 14px; font-size: 0.92rem; line-height: 1.52; box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.09); } .bubble-in { align-self: flex-start; background: var(--white); border-top-left-radius: 4px; } .bubble-out { align-self: flex-end; background: var(--chat-bubble-out); border-top-right-radius: 4px; } .bubble-meta { align-self: flex-end; font-size: 0.67rem; color: #9B948C; margin-top: -4px; margin-right: 4px; } .bubble-typing { display: flex; gap: 5px; align-items: center; padding: 14px 16px; } .bubble-typing span, .seq-typing span { width: 8px; height: 8px; border-radius: 50%; background: #B7AFA5; animation: typing-dot 1.2s ease-in-out infinite; } .bubble-typing span:nth-child(2), .seq-typing span:nth-child(2) { animation-delay: 0.18s; } .bubble-typing span:nth-child(3), .seq-typing span:nth-child(3) { animation-delay: 0.36s; } @keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-6px); opacity: 1; } } .link-text { color: #0C6E63; font-weight: 600; } .chat-tip { align-self: center; margin-top: 12px; font-size: 0.77rem; color: var(--ink-soft); font-style: italic; background: var(--chat-input-bg); padding: 6px 13px; border-radius: 9px; } .chat-input { display: flex; align-items: center; justify-content: space-between; background: var(--white); padding: 13px 17px; border-top: 1px solid var(--chat-hairline); } .chat-input-hint { color: #9B948C; font-size: 0.9rem; } .chat-send { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg, var(--wa-green) 0%, #1DA851 100%); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35); transition: transform 0.3s var(--ease-spring); } .chat-send:hover { transform: scale(1.14) rotate(10deg); } /* ---------- Carousel ---------- */ .carousel { position: relative; margin-top: var(--space-head); } .carousel-viewport { overflow: hidden; padding: 6px 2px 16px; } .carousel-track { display: flex; transition: transform 0.7s var(--ease); will-change: transform; } .carousel-slide { flex: 0 0 100%; min-width: 0; display: flex; justify-content: center; } .carousel-arrow { position: absolute; top: 36%; z-index: 6; width: 50px; height: 50px; border-radius: 50%; background: var(--cream); color: var(--ink); border: 1px solid var(--border); font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease, opacity 0.3s ease, background 0.3s ease; } .carousel-arrow:hover { transform: scale(1.1); background: var(--white); box-shadow: var(--shadow); } .carousel-arrow:active { transform: scale(0.94); } .carousel-prev { left: 1%; } .carousel-next { right: 1%; } /* used only for the invisible hop off an edge clone back onto the real slide */ .carousel-track.no-transition { transition: none; } .carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; } .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); border: none; cursor: pointer; padding: 0; transition: width 0.4s var(--ease), background 0.35s ease; } .carousel-dot.active { width: 28px; border-radius: 999px; background: var(--ink); } /* ---------- Demo item (mini phone) ---------- */ .demo-item { display: flex; flex-direction: column; align-items: center; text-align: center; } .demo-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 20px; } .demo-item .phone { margin: 0; width: 100%; max-width: 240px; padding: 8px; border-radius: 32px; box-shadow: 0 24px 52px rgba(23, 21, 18, 0.2); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); } .demo-item .phone:hover { transform: translateY(-9px); box-shadow: 0 34px 68px rgba(23, 21, 18, 0.26); } .demo-item .phone-notch { width: 84px; height: 17px; top: 13px; border-radius: 0 0 13px 13px; } .demo-item .chat { border-radius: 24px; } /* margin-bottom:auto against the body's justify-content:flex-end — the chip holds the top, the conversation holds the bottom, wallpaper in between. */ .demo-item .chat-date { font-size: 0.62rem; padding: 3px 10px; border-radius: 7px; margin: 0 0 auto; } .demo-item .chat-header { padding: 25px 12px 11px; gap: 9px; } .demo-item .chat-avatar { width: 30px; height: 30px; font-size: 0.9rem; } .demo-item .chat-title { font-size: 0.8rem; } .demo-item .chat-status { font-size: 0.66rem; } /* Fixed height, not min-height: every slide must be the same phone. Height and width are a pair — a real handset is about 2:1, and at 274x430 this read as a squat toy. Chat 416 + header 76 + 16 padding = 508 tall on a 240 body = 2.12:1, which is an iPhone. Messages sit at the bottom like a real chat and a "Today" chip pins the top, so the wallpaper above them reads as an opened conversation rather than dead space. Changing either number without the other breaks the proportion — measure. */ .demo-item .chat-body { padding: 13px 10px; height: 416px; min-height: 0; /* .chat-body's 392px min-height would otherwise win */ justify-content: flex-end; gap: 7px; background-size: 15px 15px, 100% 100%; } .demo-item .bubble { font-size: 0.74rem; line-height: 1.45; padding: 8px 11px; max-width: 90%; } .demo-item .rsvp-yes, .demo-item .rsvp-no { font-size: 0.68rem; padding: 6px 10px; } .demo-item .live-card { padding: 10px 11px; } .demo-item .live-card-head { font-size: 0.68rem; margin-bottom: 8px; } .demo-item .live-step { font-size: 0.72rem; gap: 8px; } .demo-item .live-step span { width: 17px; height: 17px; font-size: 0.6rem; } /* At 240px the avatar / copy / button row squeezed the copy to two words a line. Wrap the button onto its own full-width row — which is also how a real WhatsApp interactive card is laid out — and left-align the card's text against .demo-item's centred default, because a card is not a message. */ .demo-item .selfie-card { flex-wrap: wrap; padding: 10px 11px; gap: 8px; text-align: left; } .demo-item .selfie-btn { flex: 1 0 100%; text-align: center; } .demo-item .selfie-avatar { width: 34px; height: 34px; font-size: 1rem; } .demo-item .selfie-title { font-size: 0.74rem; } .demo-item .selfie-note { font-size: 0.63rem; } .demo-item .selfie-btn { font-size: 0.66rem; padding: 6px 10px; } /* Album strip, not six emoji in boxes. Three changes together: drop the white card so the tiles sit straight on the chat wallpaper, go 3-across so each tile is ~69px instead of ~33px, and crop 4:3 instead of square. Square tiles at 3-across cost 160px and blew the phone's height budget; 4:3 costs 110px, which fits. The fills are deeper than the full-size ones on purpose — the page-scale tints disappear against the #ECE5DD wallpaper once the white card is gone. */ .demo-item .photo-grid { grid-template-columns: repeat(3, 1fr); background: transparent; border: none; padding: 0; gap: 6px; } .demo-item .photo-tile { aspect-ratio: 4 / 3; font-size: 1.35rem; border-radius: 9px; } .demo-item .photo-tile:nth-child(1) { background: linear-gradient(140deg, #E9DFCB, #D8CBB0); } .demo-item .photo-tile:nth-child(2) { background: linear-gradient(140deg, #E4D6C6, #CFBFA8); } .demo-item .photo-tile:nth-child(3) { background: linear-gradient(140deg, #EADFD0, #D3C2A9); } .demo-item .photo-tile:nth-child(4) { background: linear-gradient(140deg, #DED0BC, #C8B79E); } .demo-item .photo-tile:nth-child(5) { background: linear-gradient(140deg, #ECE1CE, #D6C7AF); } .demo-item .photo-tile:nth-child(6) { background: linear-gradient(140deg, #E1D4BF, #CDBCA3); } .demo-item h3 { font-size: 1.15rem; color: var(--ink); margin-top: 22px; } .demo-item p { font-size: 0.87rem; color: var(--ink-soft); margin-top: 8px; max-width: 260px; } /* ---------- Chat playback ---------- */ .carousel .bubble { animation: none; } .chat-body[data-playback] .seq-item { opacity: 0; transform: translateY(10px) scale(0.97); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); } .chat-body[data-playback] .seq-item.shown { opacity: 1; transform: none; } .seq-typing { display: flex; gap: 5px; align-items: center; align-self: flex-start; background: var(--white); border-radius: 14px; border-top-left-radius: 4px; padding: 12px 14px; box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.09); opacity: 0; transform: translateY(7px); transition: opacity 0.28s ease, transform 0.28s ease; } .seq-typing.show { opacity: 1; transform: none; } /* ---------- RSVP / live / selfie / photos ---------- */ .rsvp-buttons { display: flex; gap: 8px; align-self: flex-start; margin: 4px 0; } .rsvp-yes, .rsvp-no { font-size: 0.82rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: transform 0.3s var(--ease-spring), opacity 0.25s ease; } .rsvp-yes { background: var(--maroon); color: var(--cream); } .rsvp-no { background: var(--white); color: var(--ink-soft); border: 1px solid var(--rsvp-no-border); } .rsvp-yes:hover, .rsvp-no:hover { transform: translateY(-2px); } .live-card { align-self: stretch; background: var(--white); border: 1px solid var(--chat-card-border); border-radius: 16px; padding: 14px 16px; } .live-card-head { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: live-pulse 1.4s ease-in-out infinite; } @keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.45); } 50% { box-shadow: 0 0 0 6px rgba(229, 72, 77, 0); } } .live-steps { display: flex; flex-direction: column; gap: 7px; } .live-step { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--ink-soft); } .live-step span { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; background: var(--chat-card-alt); color: var(--ink-soft); } .live-step.done span { background: var(--chat-card-alt); color: var(--ink-soft); } .live-step.now { font-weight: 700; color: var(--ink); } .live-step.now span { background: var(--maroon); color: var(--cream); animation: live-pulse 1.4s ease-in-out infinite; } .selfie-card { align-self: stretch; display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--chat-card-border); border-radius: 16px; padding: 12px 14px; } .selfie-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--chat-card-alt); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .selfie-text { flex: 1; min-width: 0; } .selfie-title { font-size: 0.85rem; font-weight: 700; color: var(--ink); } .selfie-note { font-size: 0.74rem; color: var(--ink-soft); line-height: 1.4; margin-top: 2px; } .selfie-btn { flex-shrink: 0; font-size: 0.78rem; font-weight: 600; color: var(--cream); background: var(--maroon); padding: 8px 13px; border-radius: 999px; cursor: pointer; transition: transform 0.3s var(--ease-spring); } .selfie-btn:hover { transform: translateY(-2px); } .photo-grid { align-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; background: var(--white); border: 1px solid var(--chat-card-border); border-radius: 16px; padding: 8px; } .photo-tile { aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: transform 0.35s var(--ease-spring); } .photo-tile:hover { transform: scale(1.08) rotate(2deg); } .photo-tile:nth-child(1) { background: linear-gradient(140deg, #F1EDE5, #EAE4D8); } .photo-tile:nth-child(2) { background: linear-gradient(140deg, #EAE4D8, #F1EDE5); } .photo-tile:nth-child(3) { background: linear-gradient(140deg, #E6E0D2, #F1EDE5); } .photo-tile:nth-child(4) { background: linear-gradient(140deg, #F1EDE5, #E6E0D2); } .photo-tile:nth-child(5) { background: linear-gradient(140deg, #EDE8DC, #EAE4D8); } .photo-tile:nth-child(6) { background: linear-gradient(140deg, #EAE4D8, #EDE8DC); } /* ---------- Audience (editorial columns) ---------- */ /* 2x2 — four audiences don't divide into three columns without an orphan */ .audience { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 72px; margin-top: var(--space-head); } .audience-card { text-align: left; border-top: 1px solid var(--ink); padding-top: 26px; transition: transform 0.5s var(--ease); } .audience-card:hover { transform: translateY(-6px); } .audience-icon { display: block; margin-bottom: 18px; color: var(--ink); opacity: 0.72; transition: opacity 0.4s var(--ease); } .audience-card:hover .audience-icon { opacity: 1; } .audience-card h3 { font-size: 1.35rem; color: var(--ink); margin-bottom: 13px; } .audience-card p { color: var(--ink-soft); font-size: 0.95rem; } /* ---------- Pricing (columns with hairlines) ---------- */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--space-head); align-items: stretch; } .price-card { position: relative; display: flex; flex-direction: column; padding: 6px 40px 0; } .price-card + .price-card { border-left: 1px solid var(--border); } .price-card-featured { border-left: 1px solid var(--ink); } .price-card-featured::before { content: ""; position: absolute; top: 0; left: 40px; right: 40px; height: 1px; background: var(--ink); } /* every card reserves the badge line so the three titles share a baseline */ .price-badge { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; text-align: center; color: var(--ink-soft); margin-bottom: 14px; } .price-badge-empty { visibility: hidden; } .price-card h3 { font-size: 1.45rem; color: var(--ink); text-align: center; letter-spacing: -0.015em; } .price-tag { text-align: center; font-family: var(--font-head); font-style: italic; font-size: 1.35rem; font-weight: 400; color: var(--ink-soft); margin: 12px 0 26px; } .price-card ul { list-style: none; margin-bottom: 34px; flex-grow: 1; } .price-card li { padding: 9px 0; border-bottom: 1px solid var(--border); color: var(--ink-soft); font-size: 0.92rem; display: flex; align-items: flex-start; gap: 10px; transition: color 0.3s ease; } .price-card li:hover { color: var(--ink); } .price-card li::before { content: "—"; color: color-mix(in srgb, var(--ink) 30%, transparent); font-size: 0.8rem; padding-top: 2px; } .price-card .btn { justify-content: center; } /* ---------- Testimonials (open quotes, no boxes) ---------- */ .testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 72px; margin-top: var(--space-head); } .testimonial { text-align: center; position: relative; } .testimonial::before { content: "“"; display: block; font-family: var(--font-head); font-size: 4.5rem; line-height: 0.6; color: color-mix(in srgb, var(--ink) 22%, transparent); margin-bottom: 26px; } .testimonial p { font-family: var(--font-head); font-style: italic; font-size: 1.4rem; font-weight: 400; color: var(--ink); line-height: 1.45; } .testimonial footer { margin-top: 20px; color: var(--ink-soft); font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; } .testimonial-soon { opacity: 0.55; } /* pilot state — one honest line instead of empty quote marks */ .testimonial-pending { max-width: 660px; margin: 46px auto 0; text-align: center; } .testimonial-pending::before { content: "“"; display: block; font-family: var(--font-head); font-size: 4.5rem; line-height: 0.6; color: color-mix(in srgb, var(--ink) 20%, transparent); margin-bottom: 28px; } .testimonial-pending p { font-family: var(--font-head); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--ink); line-height: 1.5; } .testimonial-pending footer { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border); display: inline-block; color: var(--ink-soft); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; } /* ---------- Team teaser ---------- */ .team-teaser { display: flex; align-items: center; gap: 80px; } .team-teaser-text { flex: 1; } .team-teaser-text .section-title { text-align: left; } .team-teaser-text p { margin: 22px 0 32px; color: var(--ink-soft); } .team-teaser-mark { flex-shrink: 0; color: var(--accent-ink); } .team-teaser-mark svg { width: 210px; height: 210px; animation: seal-float 9s ease-in-out infinite; } .team-teaser-mark .seal-ring { transform-origin: 100px 100px; animation: pattern-spin 120s linear infinite; } @keyframes seal-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-13px) rotate(2deg); } } /* ---------- Page hero (team) — same ivory/ink language as home ---------- */ .page-hero { position: relative; overflow: hidden; padding: 64px 0 32px; text-align: center; border-bottom: 1px solid var(--border); background: radial-gradient(ellipse 60% 45% at 50% -12%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%); } .page-hero .container { position: relative; z-index: 1; } .page-hero .hero-orb-1 { top: -130px; right: -80px; background: radial-gradient(circle, color-mix(in srgb, var(--maroon) 28%, transparent), transparent 70%); } .page-hero .hero-orb-2 { bottom: -140px; left: -90px; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 40%, transparent), transparent 70%); } .page-hero .hero-kicker, .page-hero .page-title, .page-hero .page-sub { opacity: 0; animation: rise-in 0.9s var(--ease) forwards; } .page-hero .hero-kicker { margin-bottom: 14px; } .page-hero .page-title { animation-delay: 0.12s; } .page-hero .page-sub { animation-delay: 0.24s; } .page-title { font-size: clamp(2.6rem, 5.4vw, 3.8rem); color: var(--ink); letter-spacing: -0.024em; font-weight: 400; } .page-sub { margin-top: 20px; color: var(--ink-soft); font-size: 1.1rem; font-family: var(--font-hindi); } /* ---------- Team page ---------- */ /* the team page carries far less copy than the home page, so it uses a tighter vertical rhythm — the standard .section padding leaves it hollow */ .section-tight { padding: 28px 0 var(--space-section); } /* Column, not row: each card is itself a horizontal avatar+text composition, so a second person stacks under the first rather than halving both widths. */ .team-grid { display: flex; flex-direction: column; align-items: center; gap: var(--space-head); } .team-card { max-width: 800px; display: flex; gap: 52px; align-items: flex-start; } .team-avatar { flex-shrink: 0; width: 148px; height: 148px; border-radius: 50%; overflow: hidden; background: var(--maroon); display: flex; align-items: center; justify-content: center; } .team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Optical left-edge correction, and it is NOT a fudge — measured. "BUILDER" and the bio begin with flat stems whose ink sits at x+1 for their whole height. "Vinit" begins with a V: a diagonal whose ink runs from x+0 at the cap-line to x+9 at the baseline, averaging x+5. So with all three boxes flush at the same x (verified: 500.00 / 500.00 / 500.00), the name still *looks* indented ~4px. That is what was reported three times as "the founder and the description are not aligned with the name" — and why measuring the boxes kept saying they were fine. -0.1em pulls the V back so its mass, not its tip, sits on the shared edge; the tip overhangs slightly, which is correct for a diagonal cap. A name starting with a flat-stemmed letter (R, D, H, B...) must NOT get this correction or it over-corrects in the other direction — hence .team-name-flat, which "Rahul" carries. */ .team-name { font-size: 2.1rem; color: var(--ink); letter-spacing: -0.02em; margin-left: -0.1em; } .team-name-flat { margin-left: 0; } /* tighter tracking and a small gap bind this to the name above it — at 2.5px tracking and a 10px gap it read as a loose line floating on its own */ .team-role { font-size: 0.78rem; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; } /* no leading icon here on purpose — it indented this line ~24px and broke the shared left edge with the name and role above it */ .team-location { font-size: 0.92rem; color: var(--ink-soft); margin-top: 10px; } /* no rule here: it drew a box around the role + bio that the name sat outside of, which read as the name being misaligned */ .team-bio { margin-top: 14px; } .team-bio p { color: var(--ink-soft); margin-bottom: 15px; } /* ---------- Hiring (team page) ---------- */ /* padding is 20px, not 40px like its siblings: the kicker below carries ~22px of leading above its caps, so 20 here makes the *optical* gap match them */ .team-hiring { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 20px; text-align: center; } .team-hiring .hero-kicker { opacity: 1; animation: none; margin-bottom: 20px; } .roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 56px; margin-top: var(--space-head); text-align: left; } .role { border-top: 1px solid var(--ink); padding-top: 24px; transition: transform 0.5s var(--ease); } .role:hover { transform: translateY(-6px); } .role h3 { font-size: 1.28rem; color: var(--ink); } .role-type { font-size: 0.72rem; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ink-soft); margin: 9px 0 14px; } .role p:last-child { color: var(--ink-soft); font-size: 0.93rem; } /* The hiring block currently has no .roles grid between the intro and the CTA (AGENTS.md, 2026-08-20), so the button would otherwise sit tight under the paragraph. Matches only while .roles is absent — restore it and the grid's own margins take over again. */ .team-hiring .section-sub + .btn { margin-top: var(--space-head); } .roles-note { margin: 44px auto 30px; max-width: 560px; color: var(--ink-soft); font-family: var(--font-head); font-style: italic; font-size: 1.05rem; } .team-cta { margin-top: 40px; text-align: center; border-top: 1px solid var(--border); padding-top: 40px; } .team-cta p { color: var(--ink-soft); margin: 16px 0 32px; } /* ---------- Footer ---------- */ .footer { position: relative; overflow: hidden; background: var(--footer-bg); color: color-mix(in srgb, var(--footer-ink) 88%, transparent); padding: var(--space-section) 0 0; transition: background 0.5s ease; } .footer .container { position: relative; z-index: 1; } /* a real 3-column grid, all left-aligned — the old right-aligned contact column never lined up with the two beside it */ .footer-inner { display: grid; grid-template-columns: 1.7fr 1fr 1.1fr; gap: 40px; padding-bottom: 48px; } .brand-footer .brand-name { color: var(--footer-ink); } /* on the ink footer the disc would vanish — show the mark bare instead */ .brand-footer .brand-mark { background: transparent; color: var(--footer-ink); width: 42px; height: 42px; margin-left: -4px; } .footer-tag { margin-top: 14px; font-family: var(--font-hindi); font-size: 0.95rem; opacity: 0.7; } .footer-links { display: flex; flex-direction: column; gap: 12px; } .footer-links a { color: color-mix(in srgb, var(--footer-ink) 78%, transparent); text-decoration: none; font-size: 0.92rem; letter-spacing: 0.03em; width: fit-content; transition: color 0.25s ease, transform 0.3s var(--ease); } .footer-links a:hover { color: var(--footer-ink); transform: translateX(5px); } .footer-contact { text-align: left; } /* column headings — without them the third column read as a stray button */ .footer-h { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.5; margin-bottom: 16px; } /* the number is the CTA now; the old solid pill dominated the whole footer */ .footer-phone { display: inline-block; font-family: var(--font-head); font-size: 1.22rem; color: var(--footer-ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--footer-ink) 35%, transparent); padding-bottom: 2px; transition: border-color 0.25s ease; } .footer-phone:hover { border-bottom-color: var(--footer-ink); } .footer-note { margin-top: 10px; font-size: 0.84rem; opacity: 0.55; } .footer-links .footer-h { margin-bottom: 14px; } .footer-bottom { border-top: 1px solid var(--footer-rule); padding: 22px 0; font-size: 0.84rem; display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* the copyright keeps its old centred weight; the toggle is the quiet third thing at the end of the line, not a peer of it */ .footer-bottom p { opacity: 0.6; } /* ---------- Legal pages (privacy, terms) ---------- Long-form prose, so this is the one place with a measure narrower than the container. No cards or boxes: .legal-note is a left RULE, matching the 1px-rule language the audience and pricing sections use. */ .legal { max-width: 42rem; margin: 0 auto; } .legal h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); letter-spacing: -0.015em; margin-top: var(--space-head); padding-top: 26px; border-top: 1px solid var(--border); } .legal h2:first-of-type { margin-top: 34px; } .legal p, .legal li { color: var(--ink-soft); } .legal p { margin-bottom: 16px; } .legal ul { margin: 0 0 16px; padding-left: 20px; } .legal li { margin-bottom: 10px; } .legal strong { color: var(--ink); font-weight: 600; } .legal a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; } .legal-meta { font-size: 0.86rem; color: var(--ink-soft); opacity: 0.75; margin-bottom: 30px; } .legal-note { border-left: 2px solid var(--accent); padding: 2px 0 2px 20px; margin: 26px 0 30px; } .legal-note p:last-child { margin-bottom: 0; } /* ---------- Footer legal row ---------- */ .footer-legal { display: flex; gap: 18px; } .footer-legal a { color: var(--footer-ink); opacity: 0.6; text-decoration: none; } .footer-legal a:hover { opacity: 1; } /* ---------- Reveal animations ---------- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0); } .steps .step:nth-child(2), .features .feature:nth-child(2n), .audience .audience-card:nth-child(2), .pricing .price-card:nth-child(2), .roles .role:nth-child(2) { transition-delay: 0.1s; } .steps .step:nth-child(3), .features .feature:nth-child(3), .audience .audience-card:nth-child(3), .pricing .price-card:nth-child(3), .roles .role:nth-child(3) { transition-delay: 0.2s; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .steps, .audience, .pricing, .roles { grid-template-columns: 1fr; gap: 44px; } .feature { grid-template-columns: 1fr; gap: 14px; } .testimonials { grid-template-columns: 1fr; gap: 56px; } .price-card, .price-card + .price-card { padding: 0; border-left: none; } .price-card + .price-card { border-top: 1px solid var(--border); padding-top: 48px; } .price-card-featured { border-left: none; } .price-card-featured::before { display: none; } .carousel-arrow { width: 42px; height: 42px; top: 34%; } .team-teaser { flex-direction: column-reverse; text-align: center; gap: 34px; } .team-teaser-text .section-title { text-align: center; } .team-card { flex-direction: column; align-items: center; text-align: center; padding-top: 24px; gap: 36px; } .footer-inner { grid-template-columns: 1fr; gap: 34px; } .motif-hero, .motif-left { display: none; } .motif-center { width: 300px; height: 300px; margin: -150px 0 0 -150px; } } @media (max-width: 720px) { /* one dial, not a list of per-block overrides */ :root { --space-section: 40px; --space-head: 32px; } .nav-toggle { display: flex; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: color-mix(in srgb, var(--cream) 95%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); padding: 8px 5%; display: none; box-shadow: var(--shadow-sm); } .nav-links.open { display: flex; animation: menu-in 0.34s var(--ease); } @keyframes menu-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .nav-links a:not(.btn) { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--border); } .nav-links .btn { margin: 15px 0; } .hero { padding: 60px 0 44px; } .section-tight { padding: 30px 0 var(--space-section); } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } /* stacked, so wrapping never strands a separator rule mid-line */ .hero-chips { flex-direction: column; gap: 11px; } .chip { padding: 0; } .chip + .chip { border-left: none; } .carousel-arrow { width: 36px; height: 36px; top: 30%; } .carousel-prev { left: 0; } .carousel-next { right: 0; } .demo-item .phone { max-width: 252px; } .phone { max-width: 100%; border-radius: 36px; padding: 9px; } .chat { border-radius: 27px; } .steps, .audience { gap: 36px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ Planner console (planners.html) The console frame is a product mock-up, like .phone on the home page — that is why it is an enclosed box in an otherwise box-free layout. Everything here is a DESIGN PREVIEW: the product does not exist yet, so the page must never imply a planner can log in today (see .notice / .console-caption). ============================================================ */ /* honest framing block — hairline rule, not a coloured alert box */ .notice { max-width: 720px; margin: 0 auto 72px; padding-top: 22px; border-top: 1px solid var(--accent); text-align: center; } .notice-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 12px; } .notice p:last-child { color: var(--ink-soft); font-size: 0.95rem; } .console-intro { margin-bottom: 8px; } .console { margin-top: var(--space-head); } .console-caption { text-align: center; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 20px; } .console-frame { border-radius: 18px; overflow: hidden; background: var(--cream); border: 1px solid var(--border); box-shadow: 0 30px 70px rgba(23, 21, 18, 0.13); } .console-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--maroon); color: var(--cream); } .console-mark { width: 22px; height: 22px; flex-shrink: 0; } .console-mark svg { width: 100%; height: 100%; display: block; } .console-event { font-family: var(--font-head); font-size: 1rem; font-weight: 500; } .console-meta { margin-left: auto; font-size: 0.78rem; letter-spacing: 0.04em; opacity: 0.65; } .console-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); } .console-rail { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; border-right: 1px solid var(--border); background: var(--cream-deep); } .console-tab { text-align: left; padding: 10px 14px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-family: inherit; font-size: 0.86rem; font-weight: 500; color: var(--ink-soft); transition: background 0.25s ease, color 0.25s ease; } .console-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); } .console-tab.is-active { color: var(--on-accent); background: var(--accent); font-weight: 600; } .console-main { padding: 26px 28px 30px; min-height: 372px; } .console-panel { animation: panel-in 0.4s var(--ease); } @keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .panel-note { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 22px; } /* stat row */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; margin-bottom: 28px; } .stat { border-top: 1px solid var(--ink); padding-top: 12px; } .stat-num { display: block; font-family: var(--font-head); font-size: 1.75rem; font-weight: 500; color: var(--ink); line-height: 1.1; } .stat-label { display: block; margin-top: 5px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } /* guest table */ .console-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .console-table th { text-align: left; font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); padding: 0 0 10px; border-bottom: 1px solid var(--border); } .console-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--border); color: var(--ink-soft); } .console-table tr td:first-child { color: var(--ink); font-weight: 500; } .pill { display: inline-block; padding: 3px 10px 4px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; } .pill-yes { background: color-mix(in srgb, var(--accent-ink) 14%, transparent); color: var(--accent-ink); } .pill-wait { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-soft); } .pill-no { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink-soft); } .pill-done { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-soft); } .pill-live { background: var(--accent); color: var(--on-accent); } /* schedule list */ .sched { list-style: none; } .sched li { display: grid; grid-template-columns: 190px minmax(0, 1fr) 170px auto; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 0.87rem; } .sched-when { color: var(--ink-soft); font-variant-numeric: tabular-nums; } .sched-what { color: var(--ink); font-weight: 500; } .sched-where { color: var(--ink-soft); } /* broadcast composer */ .composer { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 26px; } .composer-text { padding: 16px 18px; font-size: 0.9rem; color: var(--ink); } .composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px 11px 18px; border-top: 1px solid var(--border); background: var(--cream-deep); } .composer-to { font-size: 0.76rem; color: var(--ink-soft); } .composer-send { padding: 7px 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 0.76rem; font-weight: 600; } .sent-list { list-style: none; } .sent-list li { display: grid; grid-template-columns: 80px minmax(0, 1fr) 200px; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; } .sent-when { color: var(--ink-soft); font-variant-numeric: tabular-nums; } .sent-what { color: var(--ink); } .sent-stat { color: var(--ink-soft); font-size: 0.78rem; text-align: right; } /* progress + feedback bars */ .progress { margin-top: 6px; } .progress-head { display: flex; justify-content: space-between; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 9px; } .progress-track, .bar-track { display: block; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; } .progress-fill, .bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .bars { display: flex; flex-direction: column; gap: 15px; } .bar-row { display: grid; grid-template-columns: 210px minmax(0, 1fr) 46px; align-items: center; gap: 16px; font-size: 0.85rem; color: var(--ink-soft); } .bar-val { text-align: right; font-variant-numeric: tabular-nums; } .planner-capabilities { margin-top: var(--space-section); } .planner-capabilities .features { margin-top: var(--space-head); } /* ---------- Home-page teaser ---------- */ .planner-teaser { display: flex; align-items: center; gap: 72px; } .planner-teaser-text { flex: 1; } .planner-teaser-text .section-title { text-align: left; } .planner-teaser-text p { margin: 20px 0 30px; color: var(--ink-soft); } .planner-teaser-mock { flex-shrink: 0; width: 340px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--cream); box-shadow: var(--shadow); } .planner-teaser-mock .console-bar { padding: 10px 14px; gap: 9px; } .planner-teaser-mock .console-mark { width: 17px; height: 17px; } .planner-teaser-mock .console-event { font-size: 0.8rem; } .planner-teaser-mock .console-meta { display: none; } .planner-teaser-mock .stat-row { grid-template-columns: repeat(2, 1fr); gap: 16px 18px; margin: 16px 16px 18px; } .planner-teaser-mock .stat-num { font-size: 1.3rem; } .planner-teaser-mock .stat-label { font-size: 0.62rem; } @media (max-width: 900px) { .console-body { grid-template-columns: 1fr; } .console-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 12px; } .console-tab { white-space: nowrap; } .console-main { padding: 22px 18px 26px; } .stat-row { grid-template-columns: repeat(2, 1fr); gap: 20px 18px; } .sched li { grid-template-columns: 1fr auto; gap: 4px 12px; } .sched-where { display: none; } .sent-list li { grid-template-columns: 1fr; gap: 4px; } .sent-stat { text-align: left; } .bar-row { grid-template-columns: 1fr 40px; gap: 6px 12px; } .bar-track { grid-column: 1 / -1; } .planner-teaser { flex-direction: column; gap: 36px; } .planner-teaser-text .section-title { text-align: center; } .planner-teaser-text { text-align: center; } .planner-teaser-mock { width: 100%; max-width: 340px; } /* explicit areas — auto-placing 5 cells into 2 columns scattered them */ .console-table thead { display: none; } .console-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name pill" "meta pill"; gap: 3px 14px; padding: 12px 0; border-bottom: 1px solid var(--border); } .console-table td { border: 0; padding: 0; } .console-table td:nth-child(1) { grid-area: name; } .console-table td:nth-child(2) { grid-area: meta; font-size: 0.78rem; } .console-table td:nth-child(2)::before { content: "Party of "; } /* functions + meal are secondary; they don't survive this width legibly */ .console-table td:nth-child(3), .console-table td:nth-child(4) { display: none; } .console-table td:nth-child(5) { grid-area: pill; align-self: center; text-align: right; } } /* billing basis sits under the tier name — the two event tiers and the marketing tier are charged differently, so the basis has to be explicit */ .price-basis { text-align: center; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 9px; } .price-basis + .price-tag { margin-top: 8px; } /* The price line is a placeholder until real prices exist, so the feature list may sit directly under the basis label. This selector only matches in that case — restore .price-tag and it stops applying, no double margin. */ .price-basis + ul { margin-top: 26px; } /* workspace switcher — segmented control inside the dark console bar */ .ws-switch { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--cream) 13%, transparent); } .ws-tab { padding: 5px 15px 6px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-family: inherit; font-size: 0.73rem; font-weight: 600; letter-spacing: 0.07em; color: color-mix(in srgb, var(--cream) 62%, transparent); transition: background 0.25s ease, color 0.25s ease; } .ws-tab:hover { color: var(--cream); } .ws-tab.is-active { background: var(--cream); color: var(--maroon); } @media (max-width: 900px) { .console-bar { flex-wrap: wrap; gap: 10px; } .console-meta { margin-left: 0; width: 100%; } }