/* ========================================================================= ORO BRANDS — Foundations: Color + Type "Only Real Original Brands" · oro (ES/IT) = gold Dark-first, premium, minimal. Platinum metallic wordmark, champagne-gold accent used sparingly. Off-white ink on near-black canvas. ------------------------------------------------------------------------- FONTS: Jost (geometric display, matches the thin wordmark) + Hanken Grotesk (neutral body grotesque). Loaded from Google Fonts CDN below. ⚠ SUBSTITUTION FLAG: no brand font files were supplied. Jost is the closest Google Fonts match to the geometric thin "oro" wordmark. If you own the real brand typeface, drop the files in /fonts and swap the vars. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600&family=Hanken+Grotesk:wght@400;500;600;700&display=swap'); :root { /* ---- CANVAS / SURFACES (dark-first) ---------------------------------- */ --oro-ink: #050506; /* deepest black — full-bleed sections */ --oro-black: #0A0A0B; /* default canvas */ --oro-surface-1: #141416; /* raised card */ --oro-surface-2: #1C1C1F; /* raised card, hover / nested */ --oro-surface-3: #26262A; /* input wells, chips */ /* ---- HAIRLINES / BORDERS (premium = thin, low-contrast) -------------- */ --oro-line: rgba(255,255,255,0.09); --oro-line-strong: rgba(255,255,255,0.16); --oro-line-faint: rgba(255,255,255,0.05); /* ---- INK (off-white, slightly warm) ---------------------------------- */ --oro-fg-1: #F5F4F1; /* primary text, headlines */ --oro-fg-2: #ABABA6; /* secondary / body on dark */ --oro-fg-3: #6C6C68; /* tertiary / captions / disabled */ --oro-fg-on-light: #0A0A0B; /* ---- METALLIC PLATINUM (the wordmark + premium accents) -------------- */ --oro-platinum-hi: #FFFFFF; --oro-platinum: #E6E6E8; --oro-platinum-mid: #B7B7BC; --oro-platinum-lo: #87878C; --oro-grad-platinum: linear-gradient(160deg,#FFFFFF 0%,#E6E6E8 28%,#9A9AA0 55%,#D6D6DA 74%,#7E7E84 100%); /* @kind color */ /* ---- CHAMPAGNE GOLD (oro = gold — single accent, used sparingly) ----- */ --oro-gold-hi: #F4E4BE; --oro-gold: #CBA867; /* the accent */ --oro-gold-deep:#9C7E45; --oro-grad-gold: linear-gradient(150deg,#F6E7C2 0%,#CFAC6C 46%,#9C7E45 100%); /* @kind color */ --oro-gold-glow: rgba(203,168,103,0.20); /* ---- SEMANTIC --------------------------------------------------------- */ --oro-positive: #6FBF8E; --oro-warning: #D9A441; --oro-danger: #E2685E; --oro-focus: rgba(203,168,103,0.55); /* ---- TYPE FAMILIES ---------------------------------------------------- */ --oro-font-display: 'Jost', 'Futura', 'Century Gothic', sans-serif; --oro-font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --oro-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---- TYPE SCALE (fluid, web 1280–1600) -------------------------------- */ --oro-fs-display: clamp(3.5rem, 7vw, 7.5rem); /* @kind font */ --oro-fs-h1: clamp(2.5rem, 4.4vw, 4rem); /* @kind font */ --oro-fs-h2: clamp(1.9rem, 2.8vw, 2.75rem); /* @kind font */ --oro-fs-h3: clamp(1.3rem, 1.6vw, 1.6rem); /* @kind font */ --oro-fs-lead: 1.25rem; /* 20px intro paragraph */ --oro-fs-body: 1rem; /* 16px */ --oro-fs-sm: 0.875rem; /* 14px */ --oro-fs-eyebrow: 0.75rem; /* 12px uppercase, wide tracking */ /* ---- TRACKING / LEADING ---------------------------------------------- */ --oro-track-display: -0.03em; /* tight on big geometric display */ --oro-track-tight: -0.015em; --oro-track-eyebrow: 0.28em; /* very wide on eyebrows */ --oro-track-button: 0.06em; --oro-lh-tight: 1.04; /* @kind font */ --oro-lh-snug: 1.2; /* @kind font */ --oro-lh-body: 1.6; /* @kind font */ /* ---- SPACING (4px base) ---------------------------------------------- */ --oro-1: 4px; --oro-2: 8px; --oro-3: 12px; --oro-4: 16px; --oro-5: 24px; --oro-6: 32px; --oro-7: 48px; --oro-8: 64px; --oro-9: 96px; --oro-10:128px; --oro-11:192px; /* ---- RADII (sharp & confident; subtle softening only) ---------------- */ --oro-r-none: 0px; --oro-r-xs: 2px; --oro-r-sm: 4px; --oro-r-md: 10px; --oro-r-lg: 18px; --oro-r-pill: 999px; /* ---- ELEVATION (dark UI: shadows are deep + low-opacity, plus an inner top-highlight hairline for the "lit edge" premium look) --- */ --oro-shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --oro-shadow-md: 0 8px 30px rgba(0,0,0,0.45); --oro-shadow-lg: 0 24px 60px rgba(0,0,0,0.55); --oro-edge-light: inset 0 1px 0 rgba(255,255,255,0.06); /* @kind shadow */ /* ---- MOTION ----------------------------------------------------------- */ --oro-ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --oro-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --oro-dur-fast: 140ms; /* @kind other */ --oro-dur: 280ms; /* @kind other */ --oro-dur-slow: 600ms; /* @kind other */ } /* ========================================================================= SEMANTIC ELEMENT STYLES — apply on a dark canvas. Use .oro-scope as a wrapper, or apply :root globally. ========================================================================= */ .oro-scope { background: var(--oro-black); color: var(--oro-fg-2); font-family: var(--oro-font-body); font-size: var(--oro-fs-body); line-height: var(--oro-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .oro-eyebrow { font-family: var(--oro-font-body); font-size: var(--oro-fs-eyebrow); font-weight: 600; letter-spacing: var(--oro-track-eyebrow); text-transform: uppercase; color: var(--oro-fg-3); } .oro-display { font-family: var(--oro-font-display); font-weight: 300; font-size: var(--oro-fs-display); line-height: var(--oro-lh-tight); letter-spacing: var(--oro-track-display); color: var(--oro-fg-1); } .oro-h1 { font-family: var(--oro-font-display); font-weight: 400; font-size: var(--oro-fs-h1); line-height: var(--oro-lh-tight); letter-spacing: var(--oro-track-tight); color: var(--oro-fg-1); } .oro-h2 { font-family: var(--oro-font-display); font-weight: 400; font-size: var(--oro-fs-h2); line-height: var(--oro-lh-snug); letter-spacing: var(--oro-track-tight); color: var(--oro-fg-1); } .oro-h3 { font-family: var(--oro-font-display); font-weight: 500; font-size: var(--oro-fs-h3); line-height: var(--oro-lh-snug); color: var(--oro-fg-1); } .oro-lead { font-size: var(--oro-fs-lead); line-height: 1.5; color: var(--oro-fg-2); } .oro-body { font-size: var(--oro-fs-body); line-height: var(--oro-lh-body); color: var(--oro-fg-2); } .oro-small{ font-size: var(--oro-fs-sm); color: var(--oro-fg-3); } /* Metallic text fill — for the wordmark set in live type, or premium numerals */ .oro-platinum-text { background: var(--oro-grad-platinum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .oro-gold-text { background: var(--oro-grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }