/* ========================================================================== IdeaSweetSpot — STANDALONE EXPRESSION THEME · SPRING ZEN v1.0 (loads FIRST, before all other tool CSS) -------------------------------------------------------------------------- Source of truth: ~/Downloads/IdeaSweetSpot_Brand_Package_v1 (01_brand_guide/IdeaSweetSpot_Brand_Guide.md · 03_color_typography/CANON_SPEC.json) Direction: spring watercolor + zen calm + Ikigai four-circle clarity. The user should feel hopeful, purposeful, engaged, and harmonious moving through the flow — "calm, never hypey; clear, never clinical; encouraging, never blindly optimistic; reflective, but still action-oriented." This is IdeaSweetSpot's OWN world. It does five things, scoped to this page: 1. PALETTE — re-binds the shared styles.css tokens (--purple/--coral/--teal/ --mustard/--midnight/--ink…) to the spring palette, so the ~135 existing var(--purple) etc. usages instantly read as the four named circle colours — no churn in the other CSS/JS files. The four Ikigai circles: Care = Blossom #F7C9D6 · Capability = Leaf #88D7B2 Need = Sky #CFE8F3 · Paid path = Butter #FFE09A 2. TYPE — Playfair Display (display) · Source Sans 3 (body) · Satisfy (accent). 3. DEPTH — soft layered shadows, generous radii, low-contrast ink borders, a faint paper texture. Quiet UI, not corporate. 4. INK-FIRST INTERACTION — all functional text/CTAs ride Ink #23262F (AA on ivory ~13:1) with a deep-moss secondary; the pastels stay DECORATIVE (fills, tints, circles, washes) so contrast never depends on a pastel. 5. CALM TEMPO — gentle motion only; reduced-motion respected. ========================================================================== */ :root { /* ---- Canonical IdeaSweetSpot SPRING palette ------------------------- */ --iss-sky: #CFE8F3; /* Need circle, calm panels */ --iss-blossom: #F7C9D6; /* Care circle, emotional warmth */ --iss-leaf: #88D7B2; /* Capability circle, growth */ --iss-butter: #FFE09A; /* Paid path, highlight, warmth */ --iss-lilac: #DCC7F2; /* reflection / Zen Mode / support moments */ --iss-ivory: #FAF6EF; /* base background */ --iss-paper: #FFFDF7; /* card / raised paper */ --iss-ink: #23262F; /* headlines, body, primary CTA */ --iss-moss: #6F8F5B; /* growth accent (decorative + marks) */ --iss-soft-gray:#D8D2C6; /* hairlines, strong borders */ /* ---- Derived, AA-safe functional accents ---------------------------- */ /* The pastels all fail AA as text on ivory, so interactive colour is carried by Ink and a deepened moss. Deep moss #4F6B3E = ~5.3:1 on ivory. */ --iss-accent: #6F8F5B; /* moss — decorative rings / small marks */ --iss-accent-ink: #4F6B3E; /* deep moss — AA accent TEXT / links-hover */ --iss-accent-deep: #3E5730; /* pressed */ --iss-accent-soft: #EAF3E4; /* soft moss tint — upsell / chips */ --iss-accent-line: #D6E3CC; /* hairline in the accent family */ --iss-blossom-deep: #C75C7E; /* AA-ish rose for the script flourish */ /* ---- Warm neutral ramp (sits on ivory / paper) --------------------- */ --iss-n-0: #FFFFFF; --iss-n-25: #FFFDF7; /* paper */ --iss-n-50: #FAF6EF; /* ivory page wash */ --iss-n-100:#F1ECE1; --iss-n-200:#E7E0D2; /* borders */ --iss-n-300:#D8D2C6; /* strong borders / soft gray */ --iss-n-500:#6E6A5E; /* muted text — ~4.9:1 on white (AA) */ --iss-n-700:#3C3A33; /* dark warm gray body */ --iss-n-900:#23262F; /* ink */ /* iss-theme circle aliases (kept for any direct references) */ --iss-care: var(--iss-blossom); --iss-capability: var(--iss-leaf); --iss-need: var(--iss-moss); /* used by paywall ✓ ticks → legible green */ --iss-paid: var(--iss-butter); --iss-canvas: var(--iss-paper); --iss-slate: var(--iss-n-500); --iss-surface: var(--iss-paper); --iss-surface-2: var(--iss-n-25); /* ---- Depth: soft, layered, paper-grade ----------------------------- */ --iss-shadow-sm: 0 1px 2px rgba(35,38,47,.05), 0 2px 8px rgba(35,38,47,.05); --iss-shadow: 0 1px 0 rgba(255,255,255,.75) inset, /* top highlight */ 0 2px 6px rgba(35,38,47,.05), 0 18px 48px -16px rgba(35,38,47,.16); --iss-shadow-lg: 0 1px 0 rgba(255,255,255,.85) inset, 0 28px 70px -20px rgba(35,38,47,.24), 0 8px 22px -10px rgba(111,143,91,.12); /* faint moss bloom */ --iss-inset-hi: inset 0 1px 0 rgba(255,255,255,.8); --iss-radius-card: 28px; --iss-radius-pill: 999px; /* ---- Type ----------------------------------------------------------- */ --iss-font-display: "Playfair Display", "Lora", Georgia, "Times New Roman", serif; --iss-font-body: "Source Sans 3", Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --iss-font-accent: "Satisfy", "Caveat", cursive; /* feed the shared-spine display dial too */ --font-display: var(--iss-font-display); /* ===================================================================== RE-BIND the shared styles.css tokens to the SPRING palette. Re-skins every existing var(--purple)/var(--coral)/… usage in one move. IMPORTANT: these tokens are used PERVASIVELY as small label / tag / eyebrow / kicker TEXT across explorer/sweetspot/additions (~100 spots), so they must clear AA on light grounds. They are therefore AA-dark spring-JEWEL tones — NOT the pale circle colours. The pale Ikigai circle fills live on --ss-care/cap/need/paid DIRECTLY (see sweetspot.css), so the Venn stays canon while every label stays legible. Semantic roles: purple = primary accent · teal = positive/done · coral = warm/warning · mustard = caution/weakest. (Buttons/pills/focus are pinned to Ink/moss further down, independent of these.) ===================================================================== */ --coral: #C0436A; /* deep rose — care accent / warning / delete */ --coral-deep: #A23156; --teal: #237D63; /* deep green — positive / done / earn */ --teal-soft: #C7ECDA; /* pale green — backgrounds only */ --mustard: #9A6A1A; /* deep amber — caution / weakest */ --budget: #9A6A1A; --purple: #4F6B3E; /* deep moss — primary accent (eyebrows/tags) */ --purple-soft: #EAF3E4; /* moss tint — accent backgrounds / chips */ --midnight: #23262F; /* Ink */ --ink: #23262F; --muted: #5E574C; /* warm muted — ~6:1 on ivory (AA) */ --cloud: #F3EEE4; --surface-cloud:#F3EEE4; --border: rgba(35,38,47,.12); --border-strong:rgba(35,38,47,.20); --focus: #4F6B3E; /* deep moss focus ring (clearly visible) */ } /* ---- Body: Source Sans 3, ink on a spring-paper wash ------------------ */ body, .ss-body { font-family: var(--iss-font-body); color: var(--iss-ink); } .ss-body { background: radial-gradient(1150px 580px at 86% -12%, rgba(247,201,214,.30), transparent 60%), /* blossom */ radial-gradient(950px 540px at -4% 4%, rgba(207,232,243,.34), transparent 58%), /* sky */ radial-gradient(900px 680px at 52% 118%, rgba(136,215,178,.18), transparent 60%), /* leaf */ var(--iss-ivory); background-attachment: fixed; } /* ========================================================================= TYPE — Playfair Display for the one expressive moment per screen. Body stays Source Sans 3 (inherited). ========================================================================= */ .ss-intro h1, .iss-home__title, .iss-explore__title, .iss-hero h1, .iss-hero h2, .iss-closing h2, .ss-brief h1, .ss-brief h2, .brand-h1, .brand-h2, .ss-card h2, #brief-h, #lib-h, #plan-h, #iss-menu-h, .iss-door3__title { font-family: var(--iss-font-display); font-weight: 600; letter-spacing: -0.005em; color: var(--iss-ink); } .iss-home__title, .iss-explore__title, .iss-hero h1 { font-weight: 700; line-height: 1.1; } /* section kickers / eyebrows — small, calm, moss */ .eyebrow, .iss-home__eyebrow, .iss-explore__eyebrow, .iss-where__tab, .iss-door3__tag, .iss-closing__eyebrow { font-family: var(--iss-font-body); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: .76rem; } /* Satisfy script flourish — used sparingly (the tagline) */ .iss-script { font-family: var(--iss-font-accent); font-weight: 400; font-style: normal; color: var(--iss-blossom-deep); letter-spacing: .01em; line-height: 1; } .iss-home__script { display: block; font-size: clamp(1.5rem, 3.6vw, 2.1rem); margin: 0 0 .15rem; } /* ========================================================================= INK-FIRST INTERACTION — keep AA while the palette tokens are pale. ========================================================================= */ /* accent-coloured TEXT (eyebrows, kickers) → calm deep moss, AA on ivory */ .ss-body .eyebrow, .ss-body .eyebrow.is-purple, .ss-body .iss-home__eyebrow, .ss-body .iss-explore__eyebrow, .ss-body .iss-closing__eyebrow, .ss-body .iss-door3__tag { color: var(--iss-accent-ink); } a:not(.btn) { color: var(--iss-ink); text-underline-offset: .18em; } a:not(.btn):hover { color: var(--iss-accent-ink); } /* Primary CTA ("purple") → Ink, white text (~13:1) */ .btn--purple { --btn-bg: var(--iss-ink); --btn-fg: #ffffff; background: var(--iss-ink); color: #fff; border-color: var(--iss-ink); } .btn--purple:hover { background: #34384a; border-color: #34384a; } /* Secondary "save / keep" ("mustard") → warm Butter, ink text */ .btn--mustard { --btn-bg: var(--iss-butter); --btn-fg: var(--iss-ink); background: var(--iss-butter); color: var(--iss-ink); border-color: #EFCB73; } .btn--mustard:hover { background: #FBD589; } /* Ghost button — calm ink outline, moss on hover */ .btn--ghost:hover { border-color: var(--iss-accent-ink); color: var(--iss-accent-ink); background: var(--iss-paper); } /* Focus ring — deep moss, clearly visible on light surfaces */ :focus-visible { outline: 3px solid var(--iss-focus, #4F6B3E); outline-offset: 2px; } /* Saved-count pill / accent chips → Ink with white text */ .ss-pill { background: var(--iss-ink); color: #fff; } /* ========================================================================= SOFT CARDS + DEPTH (additive — these selectors already exist) — paper feel ========================================================================= */ .ss-card, .ss-panel__inner, .iss-door3, .iss-stage, .iss-rail, .iss-pricecard { background: rgba(255,253,247,.72); border: 1px solid rgba(255,255,255,.6); border-radius: 22px; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 22px 54px -26px rgba(35,38,47,.22), 0 4px 14px -8px rgba(111,143,91,.10); -webkit-backdrop-filter: blur(13px) saturate(1.05); backdrop-filter: blur(13px) saturate(1.05); } .iss-door3 { border-radius: var(--iss-radius-card); } .iss-door3:hover { box-shadow: var(--iss-shadow-lg); transform: translateY(-2px); } .ss-overlay .ss-brief-wrap, .iss-overlay .iss-plan-wrap, .ss-overlay .ss-library-wrap { box-shadow: var(--iss-shadow-lg); } /* buttons + chips ride the soft pill radius */ .btn { border-radius: 14px; } /* ========================================================================= HOME HERO — ivory paper texture + soft watercolor overlap circles. All art is CSS/SVG (no baked-in text); the four pastel washes sit at the edges so the Ink headline always keeps its ~13:1 contrast on paper. ========================================================================= */ .iss-home__hero { position: relative; border-radius: var(--iss-radius-card); padding: clamp(1.6rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3rem) clamp(2rem, 5vw, 3.2rem); /* De-boxed: the hero floats OPEN over the living watercolor atmosphere. A soft paper glow (no hard border, no card fill) sits just behind the copy column so the Ink headline stays crisp while the watercolor and its blossoms show through everywhere around it. */ background: radial-gradient(70% 78% at 24% 44%, rgba(255,253,247,.74) 0%, rgba(255,253,247,.50) 42%, rgba(255,253,247,.12) 66%, transparent 80%); } .iss-home__hero > * { position: relative; z-index: 1; } /* a soft watercolor plate behind the journey hero region */ .iss-hero { position: relative; border-radius: var(--iss-radius-card); background: linear-gradient(180deg, rgba(255,253,247,.92) 0%, rgba(255,253,247,.72) 46%, rgba(255,253,247,.40) 100%), url('assets/hero/hero-mountain-lotus.jpg') center 30% / cover no-repeat; } /* ========================================================================= STANDALONE IdeaSweetSpot brand mark in the header — lotus + Playfair word ========================================================================= */ .iss-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--iss-ink); } .iss-brand__logo { display: block; height: 34px; width: auto; flex: 0 0 auto; } .iss-brand__word { font-family: var(--iss-font-display); font-weight: 700; font-size: 1.24rem; letter-spacing: -0.005em; color: var(--iss-ink); line-height: 1; } .iss-brand__by { font-family: var(--iss-font-body); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--iss-n-500); line-height: 1.2; padding-left: 0.7rem; margin-left: 0.1rem; border-left: 1.5px solid var(--iss-n-200); white-space: nowrap; } .iss-brand__by b { color: var(--iss-ink); font-weight: 700; } @media (max-width: 640px) { .iss-brand__logo { height: 30px; } .iss-brand__by { display: none; } /* keep the header calm on phones */ } /* The constellation "core" spark in the live Venn — a calm ink focal */ .ss-spark > path { fill: var(--iss-ink); } /* The additive expert-panel CSS (additions.css) uses var(--purple, #7B61FF) only as a FALLBACK; because --purple is re-bound above, the fallback never fires and that layer inherits the spring palette automatically. */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } .ss-body { background-attachment: scroll; } .iss-door3:hover { transform: none; } }