/* Serai — "a ceramic studio at 7 a.m." Light-first token sheet (brand-spec C.2). Dark via prefers-color-scheme. No shadows in light. Radii 24 / 16 / 12. Fraunces for h1–h3, system stack for body. */ /* Fraunces is loaded from Google Fonts with font-display: swap by a in (see scripts/build-locales.mjs), so it never blocks this stylesheet. */ :root { color-scheme: light; /* Surfaces */ --sand: #F3ECE2; --paper: #FBF8F3; --line: #E6DDD1; /* Pillars */ --clay: #A84E36; --clay-soft: #F2DCD3; --plum: #6B4A5E; --plum-soft: #E9DCE4; /* Text */ --ink: #2B2027; --muted: #6E5F68; /* Semantic */ --sage: #4F6B4B; --ochre-text: #7A551A; --ochre-fill: #D9B061; --brick: #A93F35; /* Inner weather (fields, blobs and dots only — never body text) */ --heavy: #5A4B5E; --grey: #7E6C7C; --mixed: #A89C95; --clearing: #E2A57B; --bright: #E4B94E; --on-clay: #FFFFFF; --on-plum: #FFFFFF; --radius-card: 24px; --radius-inner: 16px; --radius-chip: 12px; --radius-pill: 999px; --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --shadow-card: none; --field-alpha: .55; --grain-alpha: .07; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --sand: #17131A; --paper: #221C26; --paper-raised: #2C2530; --line: rgba(242, 235, 230, .10); --clay: #D9775C; --clay-soft: #3A2A2A; --plum: #C39BB4; --plum-soft: #352A33; --ink: #F2EBE6; --muted: #B3A6AE; --sage: #9DB595; --ochre-text: #D9B061; --ochre-fill: #D9B061; --brick: #E07A6E; --heavy: #3E3344; --grey: #5C4E5C; --mixed: #6E6660; --clearing: #C98E6A; --bright: #D4AC55; --on-clay: #1B1418; --on-plum: #1B1418; --shadow-card: 0 18px 40px rgba(0, 0, 0, .35); --field-alpha: .42; --grain-alpha: .09; } } :root { --paper-raised: var(--paper); } @media (prefers-color-scheme: dark) { :root { --paper-raised: #2C2530; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; } body { background: var(--sand); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; margin: 0; min-height: 100vh; overflow-x: hidden; } h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.015em; line-height: 1.1; margin: 0; } h1 { font-size: clamp(38px, 5.4vw, 62px); } h2 { font-size: clamp(28px, 3.6vw, 40px); } h3 { font-size: clamp(20px, 2.2vw, 24px); } h4 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin: 0; } p { margin: 0 0 16px; } p:last-child { margin-bottom: 0; } a { color: var(--clay); text-decoration-thickness: .07em; text-underline-offset: .22em; } a:hover { color: var(--ink); } a, button { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 4px; } .shell { margin: 0 auto; width: min(1120px, calc(100% - 40px)); } .skip-link { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-chip); color: var(--ink); left: 12px; padding: 10px 14px; position: absolute; top: -80px; z-index: 60; } .skip-link:focus { top: 12px; } /* ---------- Header ---------- */ .site-header { align-items: center; display: flex; gap: 20px; justify-content: space-between; padding: 22px 0; position: relative; z-index: 20; } .brand { align-items: center; color: var(--ink); display: inline-flex; gap: 10px; text-decoration: none; } .mark { display: block; flex: none; height: 30px; width: 30px; } .chat-header .mark { height: 22px; width: 22px; } .brand span { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -.01em; } .desktop-nav { display: flex; gap: 22px; } .desktop-nav a { color: var(--muted); font-size: 14px; text-decoration: none; } .desktop-nav a:hover { color: var(--ink); } .header-actions { align-items: center; display: flex; gap: 10px; } .language-links { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-pill); display: flex; gap: 2px; padding: 3px; } .language-links a { border-radius: var(--radius-pill); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 5px 10px; text-decoration: none; } .language-links a[aria-current="true"] { background: var(--clay); color: var(--on-clay); } .mini-cta { background: var(--clay); border-radius: var(--radius-pill); color: var(--on-clay); font-size: 13px; font-weight: 600; padding: 9px 16px; text-decoration: none; white-space: nowrap; } .mini-cta:hover { color: var(--on-clay); opacity: .9; } /* ---------- Weather field (procedural CSS gradient, no assets) ---------- */ .weather-field { border-radius: var(--radius-card); inset: 0; overflow: hidden; pointer-events: none; position: absolute; } .weather-field::before { background: radial-gradient(38% 46% at 18% 26%, color-mix(in oklab, var(--heavy) 78%, transparent) 0%, transparent 70%), radial-gradient(42% 44% at 46% 18%, color-mix(in oklab, var(--grey) 72%, transparent) 0%, transparent 72%), radial-gradient(50% 52% at 74% 36%, color-mix(in oklab, var(--mixed) 70%, transparent) 0%, transparent 70%), radial-gradient(46% 50% at 62% 78%, color-mix(in oklab, var(--clearing) 82%, transparent) 0%, transparent 72%), radial-gradient(40% 44% at 92% 76%, color-mix(in oklab, var(--bright) 82%, transparent) 0%, transparent 70%); content: ""; filter: blur(46px); inset: -18%; opacity: var(--field-alpha); position: absolute; } /* Film grain: 6–8%, hero only. Inline SVG turbulence, zero network cost. */ .weather-field::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"); content: ""; inset: 0; mix-blend-mode: multiply; opacity: var(--grain-alpha); position: absolute; } @media (prefers-color-scheme: dark) { .weather-field::after { mix-blend-mode: screen; } } /* ---------- Layout blocks ---------- */ main { padding-bottom: 96px; } .section-block { padding: 72px 0 0; } .section-heading { margin-bottom: 32px; max-width: 720px; } .section-heading h2 { margin: 10px 0 14px; } .section-heading p { color: var(--muted); margin: 0; } .eyebrow { color: var(--clay); display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .lede { color: var(--muted); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; margin: 18px 0 0; max-width: 640px; } .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 24px; } /* ---------- Hero ---------- */ .hero { align-items: center; border: 1px solid var(--line); border-radius: var(--radius-card); display: grid; gap: 44px; grid-template-columns: 1.1fr .9fr; margin-top: 8px; overflow: hidden; padding: clamp(28px, 4vw, 56px); position: relative; } .hero > :not(.weather-field) { position: relative; z-index: 1; } .hero h1 { margin: 14px 0 0; } .hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; } .primary-cta { align-items: center; background: var(--clay); border: 0; border-radius: var(--radius-inner); color: var(--on-clay); display: inline-flex; font: inherit; font-size: 16px; font-weight: 600; gap: 12px; padding: 15px 22px; text-decoration: none; } .primary-cta:hover { color: var(--on-clay); opacity: .92; } .text-link { color: var(--plum); font-size: 15px; font-weight: 600; } .trust-row { border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; font-size: 13px; gap: 18px; margin-top: 30px; padding-top: 18px; } .device { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); display: grid; gap: 14px; padding: 22px; position: relative; } .device .device-question { font-family: var(--serif); font-size: 26px; line-height: 1.15; } .weather-arc { display: flex; gap: 8px; } .weather-arc i { border-radius: var(--radius-pill); display: block; flex: 1; height: 34px; } .weather-arc i:nth-child(1) { background: var(--heavy); } .weather-arc i:nth-child(2) { background: var(--grey); } .weather-arc i:nth-child(3) { background: var(--mixed); } .weather-arc i:nth-child(4) { background: var(--clearing); } .weather-arc i:nth-child(5) { background: var(--bright); } .weather-arc i[data-selected] { outline: 2px solid var(--ink); outline-offset: 3px; } .device-pair { display: grid; gap: 10px; } .pair-chip { border-radius: var(--radius-chip); font-size: 14px; padding: 12px 14px; } .pair-chip.body { background: var(--clay-soft); color: var(--ink); } .pair-chip.mind { background: var(--plum-soft); color: var(--ink); } .pair-chip b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .device-note { color: var(--muted); font-size: 13px; } /* ---------- Proof strip ---------- */ .proof-strip { align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-around; margin-top: 20px; padding: 18px 20px; } .proof-strip span { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .proof-strip i { color: var(--clay); font-style: normal; } /* ---------- Grids ---------- */ .card-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); } .card-grid.two { grid-template-columns: repeat(2, 1fr); } .card-grid article { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 26px; } .card-grid article h3 { margin: 12px 0 10px; } .card-grid article p { color: var(--muted); font-size: 15px; } .card-grid .step-number { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .12em; } .pair-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); } .pair-card { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 26px; } .pair-card.body { background: var(--clay-soft); } .pair-card.mind { background: var(--plum-soft); } .pair-card > span { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .pair-card.body > span { color: var(--clay); } .pair-card.mind > span { color: var(--plum); } .pair-card h3 { margin: 12px 0 10px; } .pair-card ul { margin: 0; padding-left: 18px; } .pair-card li { margin: 8px 0; } .evidence-sample { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); margin-top: 16px; padding: 24px; } .evidence-sample .strength { border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: .08em; padding: 4px 10px; text-transform: uppercase; } .strength { background: var(--sand); border: 1px solid var(--line); color: var(--muted); } .strength-strong { background: color-mix(in oklab, var(--sage) 18%, transparent); border-color: color-mix(in oklab, var(--sage) 40%, transparent); color: var(--sage); } .strength-moderate { background: color-mix(in oklab, var(--ochre-fill) 22%, transparent); border-color: color-mix(in oklab, var(--ochre-fill) 45%, transparent); color: var(--ochre-text); } .strength-limited { background: var(--plum-soft); border-color: var(--line); color: var(--plum); } .strength-review { background: var(--sand); border-color: var(--line); color: var(--muted); } /* ---------- Coach mock ---------- */ .coach-block { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; } .chat-mock { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); display: grid; gap: 12px; padding: 22px; } .chat-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 10px; padding-bottom: 12px; } .chat-header b { font-size: 15px; } .ai-badge { background: var(--plum-soft); border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--plum); font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; } .bubble { border-radius: var(--radius-inner); font-size: 15px; padding: 12px 14px; } .bubble.user { background: var(--clay-soft); justify-self: end; max-width: 82%; } .bubble.coach { background: var(--paper-raised); border: 1px solid var(--line); max-width: 92%; } .honesty-list { list-style: none; margin: 20px 0 0; padding: 0; } .honesty-list li { border-bottom: 1px solid var(--line); padding: 14px 0; } .honesty-list li:last-child { border-bottom: 0; } .honesty-list b { display: block; } .honesty-list span { color: var(--muted); font-size: 15px; } /* ---------- Pricing ---------- */ .pricing-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 26px; } .plan.best { border-color: var(--clay); } .plan > span { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .plan strong { display: block; font-family: var(--serif); font-size: 40px; font-weight: 500; margin: 14px 0 6px; } .plan small { color: var(--muted); display: block; font-size: 14px; } .plan p { color: var(--muted); font-size: 14px; margin: 14px 0 0; } .price-note { color: var(--muted); font-size: 13px; margin-top: 16px; } /* ---------- FAQ ---------- */ .faq-list { border-top: 1px solid var(--line); } .faq-list details { border-bottom: 1px solid var(--line); padding: 18px 0; } .faq-list summary { cursor: pointer; font-weight: 600; list-style: none; padding-right: 28px; position: relative; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { color: var(--clay); content: "+"; font-size: 22px; line-height: 1; position: absolute; right: 0; top: 0; } .faq-list details[open] summary::after { content: "\2212"; } .faq-list p { color: var(--muted); margin: 12px 0 0; } /* ---------- Waitlist / final CTA ---------- */ .waitlist { align-items: center; border: 1px solid var(--line); border-radius: var(--radius-card); display: grid; gap: 36px; grid-template-columns: 1fr 1fr; margin-top: 76px; overflow: hidden; padding: clamp(26px, 4vw, 48px); position: relative; } .waitlist > :not(.weather-field) { position: relative; z-index: 1; } .waitlist h2 { margin: 12px 0 14px; } .waitlist p { color: var(--muted); } .waitlist-form { display: grid; gap: 12px; } .waitlist-form label > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .waitlist-form input[type="email"] { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-inner); color: var(--ink); font: inherit; padding: 14px 15px; width: 100%; } .waitlist-form input[type="email"]:focus { border-color: var(--clay); outline: none; } .waitlist-form .consent { align-items: flex-start; display: flex; gap: 10px; } .waitlist-form .consent input { margin-top: 5px; } .waitlist-form .consent span { color: var(--muted); font-size: 13px; line-height: 1.5; } .waitlist-form button { cursor: pointer; justify-content: space-between; } .waitlist-form button:disabled { cursor: wait; opacity: .6; } .hp-field { height: 0; opacity: 0; overflow: hidden; position: absolute; width: 0; } .form-status { color: var(--muted); font-size: 13px; margin: 0; min-height: 20px; } .form-status.success { color: var(--sage); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); display: grid; gap: 32px; grid-template-columns: 2fr repeat(3, 1fr); margin-top: 80px; padding: 40px 0 56px; } .site-footer p, .site-footer a, .site-footer span { color: var(--muted); font-size: 14px; } .site-footer nav { display: flex; flex-direction: column; gap: 8px; } .site-footer nav strong { color: var(--ink); font-size: 13px; letter-spacing: .06em; margin-bottom: 4px; text-transform: uppercase; } .site-footer nav a { text-decoration: none; } .site-footer nav a:hover { color: var(--ink); } .footer-brand p { margin-top: 12px; max-width: 320px; } .footer-meta { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px; grid-column: 1 / -1; justify-content: space-between; padding-top: 20px; } /* ---------- Documents / content pages ---------- */ .breadcrumbs { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 13px; gap: 8px; padding: 8px 0 20px; } .breadcrumbs a { color: var(--muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--ink); } .page-hero { max-width: 780px; padding: 28px 0 40px; } .page-hero h1 { margin-bottom: 8px; } .document { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: clamp(24px, 4vw, 48px); } .document h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 36px 0 12px; } .document h3 { font-size: 19px; margin: 24px 0 8px; } .document h2:first-of-type { margin-top: 0; } .document ul, .document ol { color: var(--ink); margin: 0 0 16px; padding-left: 22px; } .document li { margin: 8px 0; } .document .updated { color: var(--muted); font-size: 14px; margin-bottom: 28px; } .document table { border-collapse: collapse; font-size: 15px; margin: 0 0 20px; width: 100%; } .document th, .document td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; } .document th { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .table-scroll { overflow-x: auto; } .notice { background: var(--clay-soft); border: 1px solid var(--line); border-radius: var(--radius-inner); margin: 24px 0; padding: 18px 20px; } .notice.crisis { background: var(--paper); border: 1px solid var(--brick); } .notice p:last-child { margin-bottom: 0; } .answer-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); display: grid; gap: 18px; grid-template-columns: 150px 1fr; padding: 26px 28px; } .answer-card strong { color: var(--clay); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .answer-card p { margin: 0; } .two-column-note { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 32px; } .two-column-note > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px; } .two-column-note h2 { font-size: 22px; margin: 0 0 12px; } .check-list, .x-list { list-style: none; margin: 0; padding: 0; } .check-list li, .x-list li { border-bottom: 1px solid var(--line); color: var(--ink); padding: 10px 0; } .check-list li:last-child, .x-list li:last-child { border-bottom: 0; } .check-list li::before { color: var(--sage); content: "\2713"; font-weight: 700; margin-right: 10px; } .x-list li::before { color: var(--brick); content: "\00d7"; font-weight: 700; margin-right: 10px; } .drill { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); margin-top: 32px; padding: 28px; } .drill-top { border-bottom: 1px solid var(--line); margin-bottom: 18px; padding-bottom: 16px; } .drill-top span { color: var(--plum); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .drill-top h2 { font-size: 26px; margin: 10px 0 8px; } .drill ol { margin: 0; padding-left: 22px; } .drill li { margin: 10px 0; } .use-case-list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 6px 24px; } .use-case-list div { border-bottom: 1px solid var(--line); display: flex; flex-direction: column; padding: 16px 0; } .use-case-list div:last-child { border-bottom: 0; } .use-case-list span { color: var(--muted); font-size: 15px; } .intent-split { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; } .intent-pair { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); margin-top: 32px; padding: 26px; } .intent-pair h2 { font-size: 24px; margin: 0 0 14px; } .guide-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-grid a { align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-inner); color: var(--ink); display: flex; gap: 12px; padding: 16px 18px; text-decoration: none; } .guide-grid a:hover { border-color: var(--clay); } .guide-grid i { color: var(--clay); font-style: normal; } /* ---------- Research ---------- */ .family-block { margin-top: 36px; } .family-block > h2 { margin-bottom: 6px; } .family-block > p { color: var(--muted); margin-bottom: 16px; } .source-list { display: grid; gap: 12px; } .source { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-inner); padding: 18px 20px; } .source .source-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .source .kind { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .source p { margin: 0 0 10px; } .source cite { color: var(--muted); display: block; font-size: 14px; font-style: normal; } .source a { overflow-wrap: anywhere; } .source.under-review { border-style: dashed; } /* ---------- Root language picker ---------- */ .root-choice { align-items: center; display: flex; flex-direction: column; gap: 18px; justify-content: center; min-height: 70vh; text-align: center; } .root-choice .language-links { font-size: 16px; } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---------- Responsive ---------- */ @media (max-width: 940px) { .hero, .coach-block, .waitlist, .intent-split { grid-template-columns: 1fr; } .card-grid, .card-grid.two, .pair-grid, .pricing-grid, .two-column-note, .guide-grid { grid-template-columns: 1fr; } .site-footer { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 720px) { .desktop-nav { display: none; } .mini-cta { display: none; } .answer-card { grid-template-columns: 1fr; gap: 12px; } .section-block { padding-top: 56px; } body { font-size: 16px; } } @media (max-width: 380px) { .brand span { display: none; } }