/* ============================================================ Off Court Social Club — KDS token override ("their theme") Load AFTER kds/tokens/kds.css and kds/css/components.css. Champagne-paper light theme · Velvet Merlot accent · Crista display. Set on every page. ============================================================ */ @font-face { font-family: "Crista"; src: url("../assets/fonts/crista-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } :root, [data-kds-theme="light"] { /* brand primitives */ --oc-merlot: #6a0024; --oc-merlot-deep: #4a0019; --oc-champagne: #f2e5c6; --oc-midnight: #1f4173; --oc-olive: #435934; --oc-ink: #2e2218; /* semantic remap */ --kds-bg: var(--oc-champagne); --kds-surface: #f7edd6; --kds-surface-2: #fbf3e2; --kds-border: rgba(106, 0, 36, 0.14); --kds-border-strong: rgba(106, 0, 36, 0.32); --kds-fg: var(--oc-ink); --kds-fg-muted: rgba(46, 34, 24, 0.72); --kds-fg-faint: rgba(46, 34, 24, 0.5); --kds-accent: var(--oc-merlot); --kds-accent-fg: var(--oc-champagne); --kds-brand: var(--oc-merlot); --kds-brand-fg: var(--oc-champagne); --kds-positive: var(--oc-olive); --kds-info: var(--oc-midnight); --kds-danger: #9c1130; --kds-warning: #a5652a; --kds-focus-ring: color-mix(in srgb, var(--oc-merlot) 55%, transparent); --kds-scrim: rgba(46, 34, 24, 0.55); /* type */ --kds-font-sans: "Lato", -apple-system, "Segoe UI", Roboto, sans-serif; --kds-font-display: "Crista", "Cormorant Garamond", Georgia, serif; --kds-font-serif: "Cormorant Garamond", Georgia, serif; /* shape — the brand's 18px editorial radius */ --kds-radius-lg: 18px; } /* dark merlot scope — footers, sidebars, payment-sheet headers, NFC-style cards */ .oc-dark { --kds-bg: var(--oc-merlot-deep); --kds-surface: #58001e; --kds-surface-2: #641f38; --kds-border: rgba(242, 229, 198, 0.16); --kds-border-strong: rgba(242, 229, 198, 0.34); --kds-fg: var(--oc-champagne); --kds-fg-muted: rgba(242, 229, 198, 0.72); --kds-fg-faint: rgba(242, 229, 198, 0.5); --kds-accent: var(--oc-champagne); --kds-accent-fg: var(--oc-merlot-deep); background: var(--kds-bg); color: var(--kds-fg); } /* editorial helpers shared across both apps */ .oc-display { font-family: var(--kds-font-display); font-weight: 400; line-height: 1.04; letter-spacing: 0.01em; color: var(--kds-accent); } .oc-display em { font-family: var(--kds-font-serif); font-style: italic; font-weight: 500; letter-spacing: 0; } .oc-kicker { font-family: var(--kds-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.38em; text-transform: uppercase; color: var(--oc-merlot); opacity: 0.8; } .oc-dark .oc-kicker { color: var(--oc-champagne); } /* pill buttons — the brand's CTA shape (overrides .kds-btn geometry) */ .oc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 34px; border-radius: 999px; border: 1px solid transparent; font-family: var(--kds-font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, letter-spacing 0.7s cubic-bezier(0.25, 0.1, 0.25, 1); } .oc-btn:hover { letter-spacing: 0.32em; } .oc-btn:focus-visible { outline: 2px solid var(--kds-focus-ring); outline-offset: 2px; } .oc-btn-primary { background: var(--oc-merlot); color: var(--oc-champagne); border-color: var(--oc-merlot); } .oc-btn-primary:hover { background: var(--oc-merlot-deep); border-color: var(--oc-merlot-deep); } .oc-btn-ghost { background: transparent; color: var(--oc-merlot); border-color: rgba(106, 0, 36, 0.5); } .oc-btn-ghost:hover { background: var(--oc-merlot); color: var(--oc-champagne); } .oc-dark .oc-btn-ghost { color: var(--oc-champagne); border-color: rgba(242, 229, 198, 0.5); } .oc-dark .oc-btn-ghost:hover { background: var(--oc-champagne); color: var(--oc-merlot-deep); } /* underline-only editorial fields (the brand's form language) */ .oc-field { margin-bottom: clamp(14px, 2vh, 22px); } .oc-field label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.38em; text-transform: uppercase; color: var(--oc-merlot); opacity: 0.6; margin-bottom: 3px; transition: opacity 0.5s ease, letter-spacing 0.6s ease; } .oc-field:focus-within label { opacity: 1; letter-spacing: 0.44em; } .oc-field input, .oc-field select, .oc-field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(106, 0, 36, 0.3); border-radius: 0; color: var(--kds-fg); font-family: var(--kds-font-serif); font-size: clamp(18px, 2.6vw, 22px); padding: 7px 0 9px; outline: none; transition: border-color 0.5s ease; } .oc-field input:focus, .oc-field select:focus, .oc-field textarea:focus { border-bottom-color: var(--oc-merlot); } /* film grain — one per page, optional but on-brand */ .oc-grain { position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 70; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }