/* oddly titan primitives. Shared visual-system layer (2026-06-15). * * The single source of truth for the "titan-grade" primitives that every * oddly surface consumes: the gold-O wordmark, one button system, and the * full-bleed section primitives. CC3 owns this file (marketing site); CC4 * links it from the dashboard, embedded /app, and the shared component bar * so the surfaces share ONE wordmark and ONE button system instead of each * reinventing them. See briefs/visual-direction-titan-grade-2026-06-15.md. * * Built on the locked 52.0a tokens (/_shared/oddly-tokens.css), which every * surface already loads, so this file is portable: it declares no palette of * its own, only consumes --oddly-* with safe fallbacks. Anti-slop holds: * sharp corners, hairline borders over shadows, tabular numerals on figures, * teal as the one action color, gold earned not sprinkled. * * Page-scoped under .titan (added to ) so the overrides of existing * product classes (the marketing dashboard preview button) never reach the * live dashboard, which does not carry .titan. */ /* ============================================================ * The gold-O wordmark. ONE component, used in every masthead, * header, footer, and embedded bar. The brand mark is the gold * "O"; the rest of the word takes the surrounding ink. Markup: * oddly * Size via --wm-size (default 20px). The 5-degree tilt matches * the canonical halo logomark. * ============================================================ */ .oddly-wm { --wm-size: 20px; font-family: var(--oddly-font-serif, Georgia, "Times New Roman", serif); font-optical-sizing: auto; font-size: var(--wm-size); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--oddly-ink, #1A1A2E); text-decoration: none; display: inline-block; } .oddly-wm-o { color: var(--oddly-gold, #B08D57); display: inline-block; transform: rotate(5deg); transform-origin: 50% 60%; } /* on a dark surface the word goes cream; the O stays gold */ .oddly-wm--oninK, .oddly-wm--onink { color: var(--oddly-canvas, #FAFAF7); } /* ============================================================ * One button system. primary (teal action), secondary (ink * outline), tertiary (text link with affordance), shopify (the * read-only hand-off, a quiet bordered button with the bag * glyph), gold (the single premium CTA used on ink panels). * Sharp corners, confident padding, 44px min touch target. * ============================================================ */ .obtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 22px; font-family: var(--oddly-font-sans, "Inter", system-ui, sans-serif); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; line-height: 1; text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: 0; cursor: pointer; transition: background 140ms var(--oddly-ease, ease), color 140ms var(--oddly-ease, ease), border-color 140ms var(--oddly-ease, ease); } .obtn:focus-visible { outline: 2px solid var(--oddly-gold, #B08D57); outline-offset: 3px; } .obtn--primary { background: var(--oddly-teal, #2C7873); color: var(--oddly-canvas, #FAFAF7); border-color: var(--oddly-teal, #2C7873); } .obtn--primary:hover { background: var(--oddly-teal-hover, #246059); border-color: var(--oddly-teal-hover, #246059); color: var(--oddly-canvas, #FAFAF7); } .obtn--secondary { background: transparent; color: var(--oddly-ink, #1A1A2E); border-color: var(--oddly-ink, #1A1A2E); } .obtn--secondary:hover { background: var(--oddly-ink, #1A1A2E); color: var(--oddly-canvas, #FAFAF7); } /* secondary on an ink panel inverts: cream outline, fills cream */ .obtn--secondary.obtn--onink { color: var(--oddly-canvas, #FAFAF7); border-color: rgba(250, 250, 249, 0.55); } .obtn--secondary.obtn--onink:hover { background: var(--oddly-canvas, #FAFAF7); color: var(--oddly-ink, #1A1A2E); border-color: var(--oddly-canvas, #FAFAF7); } .obtn--tertiary { min-height: 0; padding: 4px 2px; background: transparent; color: var(--oddly-teal, #2C7873); border-color: transparent; letter-spacing: 0.01em; } .obtn--tertiary:hover { color: var(--oddly-teal-hover, #246059); } /* The Shopify hand-off button. Read-only by design: a quiet bordered * button with the Shopify bag glyph, so "Open it in Shopify" reads as an * intentional, branded secondary action and never an alarming primary. */ .obtn--shopify { background: var(--oddly-surface, #FFFFFF); color: var(--oddly-ink, #1A1A2E); border-color: var(--oddly-border-strong, #D8D5CC); font-weight: 600; } .obtn--shopify:hover { border-color: var(--oddly-ink, #1A1A2E); background: var(--oddly-surface, #FFFFFF); } .obtn--shopify .obtn-bag, .obtn--shopify::before { content: ""; width: 15px; height: 15px; flex: 0 0 auto; background: currentColor; /* a simple shopping-bag silhouette, masked to currentColor */ -webkit-mask: var(--obtn-bag-mask) center / contain no-repeat; mask: var(--obtn-bag-mask) center / contain no-repeat; } :root { --obtn-bag-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l-1 12H7L6 8zm3 0a3 3 0 0 1 6 0' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .obtn--gold { background: var(--oddly-gold, #B08D57); color: var(--oddly-ink, #1A1A2E); border-color: var(--oddly-gold, #B08D57); } .obtn--gold:hover { background: var(--oddly-canvas, #FAFAF7); border-color: var(--oddly-canvas, #FAFAF7); color: var(--oddly-ink, #1A1A2E); } .obtn--lg { min-height: 52px; padding: 16px 30px; font-size: 15px; } .obtn--block { display: flex; width: 100%; } /* ============================================================ * Full-bleed section primitives. A .t-band spans edge to edge * and carries the section background; the .t-wrap inside holds * the content at a confident 1280px with generous, fluid * gutters. This is the "use the full page" fix: nothing floats * as a narrow centred column in a sea of white. * ============================================================ */ .t-band { width: 100%; background: var(--oddly-canvas, #FAFAF7); } .t-band--cream { background: var(--oddly-canvas, #FAFAF7); } .t-band--sunken { background: var(--oddly-surface-sunken, #F4F2EC); } .t-band--navy { background: var(--oddly-ink, #1A1A2E); color: var(--oddly-canvas, #FAFAF7); } /* the one allowed restrained tint, for a single hero band */ .t-band--tint { background: linear-gradient(160deg, color-mix(in srgb, var(--oddly-ink, #1A1A2E) 6%, transparent), color-mix(in srgb, var(--oddly-teal, #2C7873) 5%, transparent)), var(--oddly-canvas, #FAFAF7); } .t-wrap { max-width: 1280px; margin: 0 auto; padding-left: clamp(20px, 5vw, 56px); padding-right: clamp(20px, 5vw, 56px); } .t-wrap--narrow { max-width: 960px; } .t-nums { font-variant-numeric: tabular-nums; } /* ============================================================ * Marketing dashboard preview: the "Open it in Shopify" snapshot * (a non-interactive .oi-btn span) adopts the shopify button look * so the preview matches the one button system. Scoped to * .titan .oi-frame so the LIVE product dashboard, which never * carries .titan, keeps its own button untouched (CC4's surface). * ============================================================ */ .titan .oi-frame .oi-btn-primary { background: var(--oddly-surface, #FFFFFF); color: var(--oddly-ink, #1A1A2E); border: 1px solid var(--oddly-border-strong, #D8D5CC); font-weight: 600; gap: 8px; } .titan .oi-frame .oi-btn-primary:hover { background: var(--oddly-surface, #FFFFFF); border-color: var(--oddly-ink, #1A1A2E); color: var(--oddly-ink, #1A1A2E); } .titan .oi-frame .oi-btn-primary::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--obtn-bag-mask) center / contain no-repeat; mask: var(--obtn-bag-mask) center / contain no-repeat; } /* ============================================================ * Titan FLOW primitives (2026-06-17). Atmosphere, section rhythm, * and scroll motion that turn stacked bands into one continuous * flow. All scoped under body.titan (the marketing surface) so * nothing reaches the live dashboard or embedded app. * * Honesty guardrail: the atmosphere layer is pure CSS gradient * texture in the locked brand palette. It depicts nothing: no * fabricated dashboards, metrics, customers, or logos. The real * product proof stays the captures the pages already carry. * ============================================================ */ /* Atmosphere: a restrained brand-palette glow behind hero bands. */ body.titan .t-band { position: relative; } body.titan .t-band--hero { isolation: isolate; } body.titan .t-band--hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 85% at 82% -12%, color-mix(in srgb, var(--oddly-teal, #2C7873) 12%, transparent), transparent 60%), radial-gradient(95% 70% at 6% 4%, color-mix(in srgb, var(--oddly-gold, #B08D57) 9%, transparent), transparent 55%); } /* a navy hero warms the ink field rather than washing it out */ body.titan .t-band--navy.t-band--hero::before { background: radial-gradient(120% 95% at 85% -22%, color-mix(in srgb, var(--oddly-teal, #2C7873) 30%, transparent), transparent 62%), radial-gradient(80% 80% at 4% 112%, color-mix(in srgb, var(--oddly-gold, #B08D57) 18%, transparent), transparent 55%); } /* the landing keeps a bespoke .hero class: give it the same air */ body.titan .hero { position: relative; isolation: isolate; } body.titan .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(110% 80% at 88% -14%, color-mix(in srgb, var(--oddly-teal, #2C7873) 10%, transparent), transparent 58%), radial-gradient(90% 70% at 2% 2%, color-mix(in srgb, var(--oddly-gold, #B08D57) 8%, transparent), transparent 52%); } /* Section rhythm: a faint gold seam at the top of each band after * the first, so adjacent full-bleed bands flow into one another * instead of stacking as hard boxes. One hairline, no overflow. */ body.titan main > .t-band + .t-band { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--oddly-gold, #B08D57) 22%, transparent); } /* Scroll motion: sections fade and rise as they enter the viewport. * The hidden state is gated on .flow-ready (added by oddly-nav.js) * so it never applies without JS, and the whole effect is disabled * for visitors who prefer reduced motion. Heroes are never hidden. */ @media (prefers-reduced-motion: no-preference) { body.titan.flow-ready [data-reveal], body.titan.flow-ready main > .t-band:not(.t-band--hero) > .t-wrap { opacity: 0; transform: translateY(20px); transition: opacity 620ms var(--oddly-ease, ease), transform 620ms var(--oddly-ease, ease); } body.titan.flow-ready [data-reveal].is-in, body.titan.flow-ready main > .t-band:not(.t-band--hero) > .t-wrap.is-in { opacity: 1; transform: none; } }