/* Smarvelous design system — v1. No build step; ship this file immutably from the CDN. * * One token grammar, two vocabularies bridged by amber (--sv-amber): * .sv-keepsake warm cream/brown, serif — front door, cards, checkout, email * .sv-play dark teal, sans (Sora) — toy chrome, newsletter reader * Apply a theme class to . Toy *canvas* colors are content; never themed. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Caveat:wght@400;600&family=Sora:wght@300;400;500;600;700&display=swap'); :root { /* Bridge colors — survive theme switches */ --sv-amber: #f4a259; --sv-amber-deep: #e07a3a; --sv-sage: #78c6a3; --sv-rose: #d98e8e; /* Fonts */ --sv-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sv-font-script: 'Caveat', 'Segoe Script', cursive; --sv-font-sans: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Spacing scale */ --sv-1: 4px; --sv-2: 8px; --sv-3: 12px; --sv-4: 16px; --sv-5: 24px; --sv-6: 32px; --sv-7: 48px; --sv-8: 64px; --sv-9: 96px; /* Radius & motion */ --sv-r-sm: 8px; --sv-r: 14px; --sv-r-lg: 22px; --sv-r-pill: 999px; --sv-ease: cubic-bezier(.22,.61,.36,1); --sv-dur: .28s; --sv-maxw: 1080px; } /* ------------------------------------------------------------------ themes */ .sv-keepsake { --sv-bg: #f4ead4; --sv-bg-2: #f0e4c6; --sv-surface: #fffaf0; --sv-surface-2: #fbf3e2; --sv-text: #3d2e1f; --sv-text-soft: #5a3a2a; --sv-muted: #8a6a4a; --sv-line: #e6d4b3; --sv-accent: var(--sv-amber-deep); --sv-accent-ink: #fff; --sv-shadow: 0 18px 44px rgba(91, 58, 42, .14); --sv-shadow-sm: 0 6px 18px rgba(91, 58, 42, .12); --sv-font-body: var(--sv-font-serif); --sv-font-head: var(--sv-font-serif); } .sv-play { --sv-bg: #0b1113; --sv-bg-2: #122026; --sv-surface: rgba(14, 24, 29, .78); --sv-surface-2: rgba(8, 16, 20, .92); --sv-text: #e7f4f3; --sv-text-soft: #cfe6e4; --sv-muted: #9ab8bd; --sv-line: rgba(149, 192, 200, .26); --sv-accent: var(--sv-amber); --sv-accent-ink: #10202a; --sv-shadow: 0 18px 46px rgba(0, 0, 0, .34); --sv-shadow-sm: 0 8px 22px rgba(0, 0, 0, .3); --sv-font-body: var(--sv-font-sans); --sv-font-head: var(--sv-font-sans); } /* ------------------------------------------------ section tints * Warm shades of the keepsake family. Use WITH .sv-keepsake on * (e.g. class="sv-keepsake sv-toys"). Same brown ink, serif, spacing and * tokens — only the background wash + accent shift, so every area feels like * the same site while reading as its own distinct place. */ .sv-cards { /* keepsakes — warm heather / mauve (terracotta CTA pops) */ --sv-bg: #e7d7e2; --sv-bg-2: #ddc8d6; --sv-surface: #fbf5f8; --sv-surface-2: #f3e9ef; --sv-line: #d6c0cf; --sv-accent: #e07a3a; } .sv-toys { /* playful apricot / peach */ --sv-bg: #f9e7cf; --sv-bg-2: #f4d9b4; --sv-surface: #fff7ec; --sv-surface-2: #fcefdc; --sv-line: #efd5ac; --sv-accent: #e07d33; } .sv-meditation { /* calm sage */ --sv-bg: #dfe4cf; --sv-bg-2: #d3dabc; --sv-surface: #f5f7ec; --sv-surface-2: #ebf0dd; --sv-line: #c6cfaa; --sv-accent: #687849; } .sv-puzzles { /* focused warm gray-blue */ --sv-bg: #d9dfe1; --sv-bg-2: #cbd4d7; --sv-surface: #f1f5f6; --sv-surface-2: #e6edee; --sv-line: #bfcace; --sv-accent: #50707c; } .sv-games { /* energetic warm clay */ --sv-bg: #efd8ce; --sv-bg-2: #e7c7b8; --sv-surface: #fdf4ef; --sv-surface-2: #f8e8e0; --sv-line: #e0c2b3; --sv-accent: #b35c45; } .sv-horoscopes { /* twilight amethyst */ --sv-bg: #e1d6ea; --sv-bg-2: #d4c6e0; --sv-surface: #f7f3fb; --sv-surface-2: #ede5f3; --sv-line: #cabfdc; --sv-accent: #6b5793; } /* ------------------------------------------------------------------ base */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sv-font-body); background: var(--sv-bg); color: var(--sv-text); min-height: 100vh; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .sv-keepsake body, body.sv-keepsake { font-size: 18px; } a { color: inherit; } img { max-width: 100%; display: block; } /* Horizontal-overflow guard: media never exceeds its column; long words/URLs wrap. */ img, svg, video, canvas, iframe { max-width: 100%; } img, svg, video { height: auto; } body { overflow-wrap: break-word; } p, h1, h2, h3, li, a, .sv-lede { overflow-wrap: break-word; word-break: break-word; } h1, h2, h3 { font-family: var(--sv-font-head); font-weight: 600; line-height: 1.1; margin: 0 0 .4em; } h1 { font-size: clamp(34px, 6vw, 60px); letter-spacing: -.01em; } h2 { font-size: clamp(26px, 4vw, 40px); } h3 { font-size: clamp(20px, 2.6vw, 26px); } p { margin: 0 0 1em; } .sv-script { font-family: var(--sv-font-script); color: var(--sv-muted); } .sv-muted { color: var(--sv-muted); } .sv-center { text-align: center; } /* ------------------------------------------------------------------ layout */ .sv-container { max-width: var(--sv-maxw); margin: 0 auto; padding: 0 var(--sv-5); } .sv-section { padding: var(--sv-9) 0; } .sv-grid { display: grid; gap: var(--sv-5); } @media (min-width: 720px) { .sv-grid-3 { grid-template-columns: repeat(3, 1fr); } .sv-grid-2 { grid-template-columns: repeat(2, 1fr); } } /* ------------------------------------------------------------------ nav / footer */ .sv-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--sv-4) var(--sv-5); max-width: var(--sv-maxw); margin: 0 auto; } /* Wordmark logo as a CSS mask → themeable via background-color (inherits the theme's ink). */ .sv-brand { display: inline-block; width: 176px; height: 42px; font-size: 0; text-decoration: none; vertical-align: middle; background-color: var(--sv-text-soft); -webkit-mask: url(/assets/sv/v1/logo.svg) left center / contain no-repeat; mask: url(/assets/sv/v1/logo.svg) left center / contain no-repeat; } .sv-footer .sv-brand { width: 224px; height: 54px; background-color: var(--sv-muted); } .sv-nav-links { display: flex; gap: var(--sv-5); align-items: center; } .sv-nav-links a { text-decoration: none; color: var(--sv-text-soft); opacity: .85; } .sv-nav-links a:hover { opacity: 1; } .sv-nav-links a.sv-nav-me { color: var(--sv-accent); opacity: 1; font-weight: 600; } @media (max-width: 600px){ .sv-nav-links a.sv-hide-sm { display: none; } } .sv-footer { border-top: 1px solid var(--sv-line); padding: var(--sv-7) 0; color: var(--sv-muted); margin-top: var(--sv-8); } .sv-footer a { color: var(--sv-muted); } /* ------------------------------------------------------------------ hero */ .sv-hero { text-align: center; padding: var(--sv-9) var(--sv-5) var(--sv-7); background: linear-gradient(180deg, var(--sv-bg) 0%, var(--sv-bg-2) 100%); } .sv-hero .sv-lede { max-width: 560px; margin: var(--sv-3) auto 0; font-size: clamp(18px, 2.3vw, 22px); font-style: italic; color: var(--sv-text-soft); } .sv-eyebrow { font-family: var(--sv-font-script); font-size: 24px; color: var(--sv-accent); margin: 0 0 var(--sv-2); } /* ------------------------------------------------------------------ buttons */ .sv-btn { display: inline-flex; align-items: center; gap: var(--sv-2); font-family: var(--sv-font-sans); font-weight: 600; font-size: 16px; padding: 13px 26px; border-radius: var(--sv-r-pill); border: 0; cursor: pointer; text-decoration: none; transition: transform var(--sv-dur) var(--sv-ease), box-shadow var(--sv-dur) var(--sv-ease), filter var(--sv-dur); background: var(--sv-accent); color: var(--sv-accent-ink); box-shadow: var(--sv-shadow-sm); } .sv-btn:hover { transform: translateY(-2px); box-shadow: var(--sv-shadow); filter: brightness(1.04); } .sv-btn:active { transform: translateY(0); } .sv-btn-ghost { background: transparent; color: var(--sv-text-soft); box-shadow: none; border: 1.5px solid var(--sv-line); } .sv-btn-ghost:hover { border-color: var(--sv-accent); color: var(--sv-accent); } .sv-btn-lg { font-size: 18px; padding: 16px 34px; } .sv-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; } /* ------------------------------------------------------------------ cards / surfaces */ .sv-card { background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-r-lg); padding: var(--sv-6); box-shadow: var(--sv-shadow-sm); transition: transform var(--sv-dur) var(--sv-ease), box-shadow var(--sv-dur) var(--sv-ease); } .sv-card-hover:hover { transform: translateY(-4px); box-shadow: var(--sv-shadow); } .sv-card-icon { font-size: 34px; line-height: 1; margin-bottom: var(--sv-3); } .sv-price { font-family: var(--sv-font-sans); font-weight: 700; font-size: 22px; color: var(--sv-text); } .sv-price small { font-weight: 400; font-size: 14px; color: var(--sv-muted); } .sv-pill { display: inline-block; font-family: var(--sv-font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--sv-r-pill); background: color-mix(in srgb, var(--sv-amber) 22%, transparent); color: var(--sv-accent); } /* ------------------------------------------------------------------ forms */ .sv-field { margin-bottom: var(--sv-4); text-align: left; } .sv-label { display: block; font-family: var(--sv-font-sans); font-size: 13px; font-weight: 600; color: var(--sv-muted); margin-bottom: var(--sv-2); letter-spacing: .02em; } .sv-input, .sv-textarea { width: 100%; font-family: var(--sv-font-body); font-size: 18px; color: var(--sv-text); background: var(--sv-surface); border: 1.5px solid var(--sv-line); border-radius: var(--sv-r); padding: 12px 16px; transition: border-color var(--sv-dur); } .sv-input:focus, .sv-textarea:focus { outline: none; border-color: var(--sv-accent); } .sv-textarea { min-height: 110px; resize: vertical; } /* ------------------------------------------------------------------ utilities */ .sv-stack > * + * { margin-top: var(--sv-4); } .sv-row { display: flex; gap: var(--sv-3); flex-wrap: wrap; align-items: center; } .sv-row-center { justify-content: center; } .sv-mt-0 { margin-top: 0; } .sv-mb-0 { margin-bottom: 0; } .sv-divider { height: 1px; background: var(--sv-line); border: 0; margin: var(--sv-6) 0; } .sv-fade-in { animation: sv-fade .6s var(--sv-ease) both; } @keyframes sv-fade { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------- soundtrack picker (reusable; SmarvelousSoundtracks.mount) ---------- */ .sv-st-chips { display: flex; gap: var(--sv-2); flex-wrap: wrap; } .sv-st-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sv-font-sans); font-size: 13px; font-weight: 600; border: 1.5px solid var(--sv-line); background: var(--sv-surface); color: var(--sv-text-soft); border-radius: var(--sv-r-pill); padding: 7px 8px 7px 14px; cursor: pointer; } .sv-st-chip.sel { border-color: var(--sv-accent); color: var(--sv-accent); } .sv-st-play { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--sv-amber) 22%, transparent); font-size: 11px; } .sv-st-blurb { font-family: var(--sv-font-sans); font-size: 12px; color: var(--sv-muted); margin-top: var(--sv-2); } /* ------------------------------------------------------------------ mobile defaults * Mobile-first base hardening. Additive only — no palette, font, or token changes. */ /* Comfortable tap targets (~44px) for buttons, nav links, and chips. */ .sv-btn { min-height: 44px; } .sv-nav-links a { display: inline-flex; align-items: center; min-height: 44px; } .sv-st-chip { min-height: 44px; } @media (max-width: 600px) { /* Trim oversized desktop type/spacing for phones. */ .sv-keepsake body, body.sv-keepsake { font-size: 16px; } body { line-height: 1.5; } /* Largest spacing steps are too tall on small screens — scale them down. * Only the big end of the scale is reduced; small steps stay put. */ :root { --sv-7: 36px; --sv-8: 48px; --sv-9: 64px; } /* 16px inputs stop iOS Safari from auto-zooming on focus. */ .sv-input, .sv-textarea, select, input, textarea { font-size: 16px; } /* Generous touch padding for nav links on phones. */ .sv-nav-links a { padding: 6px 4px; } }