/* ============================================================= DESISLE — UI REVAMP LAYER (taste-skill v1, Apr 2026) DESIGN_VARIANCE 10 · MOTION_INTENSITY 10 · VISUAL_DENSITY 2 Premium "Framer/Webflow" aesthetic. Dark-first, airy, magnetic, scroll-cinematic. This layer sits on top of main.css and introduces a new token system + components. Pages tagged with `.rv` on adopt the revamp; untouched pages keep legacy. ============================================================= */ :root { /* ---- Palette (LIGHT-first, mix of light + dark spotlight sections) ---- */ --rv-ink: #0A0A0C; /* near-black */ --rv-ink-rgb: 10, 10, 12; --rv-paper: #FAF7F2; /* warm off-white (body) */ --rv-paper-2: #F3EEE5; /* cream tile */ --rv-paper-3: #E9E3D6; /* cream stronger */ --rv-cream-rgb: 246, 242, 236; /* Primary tokens used everywhere — LIGHT by default */ --rv-bg: var(--rv-paper); --rv-bg-1: var(--rv-paper); --rv-bg-2: var(--rv-paper-2); --rv-fg: var(--rv-ink); --rv-fg-inv: var(--rv-paper); --rv-muted: rgba(var(--rv-ink-rgb), .62); --rv-muted-2: rgba(var(--rv-ink-rgb), .42); --rv-line: rgba(var(--rv-ink-rgb), .10); --rv-line-str: rgba(var(--rv-ink-rgb), .22); --rv-surface: var(--rv-paper-2); --rv-surface-2: var(--rv-paper-3); /* Dark-sibling tokens (for .rv-on-dark sections) */ --rv-dark-bg-1: #0E0E11; --rv-dark-bg-2: #16161B; --rv-dark-fg: #F6F2EC; --rv-dark-muted: rgba(246,242,236,.62); --rv-dark-muted-2: rgba(246,242,236,.42); --rv-dark-line: rgba(246,242,236,.10); --rv-dark-line-str: rgba(246,242,236,.22); --rv-accent: #FF5A1F; /* ember — single accent */ --rv-accent-2: #B93A0A; --rv-glow: 0 0 80px rgba(255,90,31,.22); /* ---- Fluid type (VISUAL_DENSITY 2 → big, airy) ---- */ --rv-fs-micro: clamp(.72rem, .68rem + .2vw, .82rem); --rv-fs-xs: clamp(.82rem, .78rem + .2vw, .9rem); --rv-fs-sm: clamp(.95rem, .9rem + .25vw, 1.05rem); --rv-fs-body: clamp(1.02rem, .96rem + .4vw, 1.18rem); --rv-fs-lead: clamp(1.18rem, 1.05rem + .8vw, 1.5rem); --rv-fs-h4: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); --rv-fs-h3: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem); --rv-fs-h2: clamp(2.4rem, 1.8rem + 3vw, 4.2rem); --rv-fs-h1: clamp(3rem, 2rem + 5vw, 7.2rem); --rv-fs-hero: clamp(3.6rem, 2.2rem + 7.5vw, 10.5rem); /* ---- Spacing scale ---- */ --rv-s-1: .25rem; --rv-s-2: .5rem; --rv-s-3: .75rem; --rv-s-4: 1rem; --rv-s-5: 1.5rem; --rv-s-6: 2rem; --rv-s-7: 3rem; --rv-s-8: 4.5rem; --rv-s-9: 6.5rem; --rv-s-10: 9rem; --rv-s-11: 12rem; /* ---- Motion ---- */ --rv-ease-out: cubic-bezier(.16,1,.3,1); --rv-ease-in: cubic-bezier(.7,0,.84,0); --rv-ease-spring: cubic-bezier(.34,1.56,.64,1); --rv-dur-fast: 180ms; --rv-dur: 420ms; --rv-dur-slow: 900ms; /* ---- Radius ---- */ --rv-r-1: 6px; --rv-r-2: 14px; --rv-r-3: 24px; --rv-r-pill: 999px; /* ---- Shadow ---- */ --rv-shadow-1: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px rgba(var(--rv-ink-rgb),.06); --rv-shadow-soft: 0 30px 80px -30px rgba(var(--rv-ink-rgb),.18); } /* ============================================================ DARK-SPOTLIGHT SCOPE — use `.rv-on-dark` on any section/div to flip tokens locally (dark hero, CTA zone, feature spotlight). ============================================================ */ body.rv .rv-on-dark { --rv-bg: var(--rv-dark-bg-1); --rv-bg-1: var(--rv-dark-bg-1); --rv-bg-2: var(--rv-dark-bg-2); --rv-fg: var(--rv-dark-fg); --rv-fg-inv: var(--rv-ink); --rv-muted: var(--rv-dark-muted); --rv-muted-2: var(--rv-dark-muted-2); --rv-line: var(--rv-dark-line); --rv-line-str: var(--rv-dark-line-str); background: var(--rv-dark-bg-1); color: var(--rv-dark-fg); position: relative; } body.rv .rv-on-dark .rv-btn-ghost { color: var(--rv-dark-fg); border-color: var(--rv-dark-line-str); } body.rv .rv-on-dark .rv-tile { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) , var(--rv-dark-bg-2); border-color: var(--rv-dark-line); } body.rv .rv-on-dark .rv-glass { background: rgba(20,20,24,.55); border-color: var(--rv-dark-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px -30px rgba(0,0,0,.6); } body.rv .rv-on-dark .rv-tag, body.rv .rv-on-dark .rv-chip, body.rv .rv-on-dark .rv-field input, body.rv .rv-on-dark .rv-field textarea, body.rv .rv-on-dark .rv-field select { background: rgba(255,255,255,.03); border-color: var(--rv-dark-line); color: var(--rv-dark-muted); } body.rv .rv-on-dark ::selection { background: var(--rv-accent); color: #fff; } /* ============================================================ BASE / RESET (scoped to body.rv — non-destructive) ============================================================ */ body.rv { background: var(--rv-bg); color: var(--rv-fg); font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: var(--rv-fs-body); line-height: 1.55; font-feature-settings: "ss01","cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } body.rv.rv-light { background: var(--rv-surface); color: var(--rv-fg-inv); } body.rv * { box-sizing: border-box; } body.rv img, body.rv svg, body.rv video { display:block; max-width:100%; height:auto; } body.rv a { color: inherit; text-decoration: none; } body.rv ::selection { background: var(--rv-accent); color: #fff; } body.rv .rv-display { font-family: 'Syne', 'DM Sans', serif; font-weight: 600; letter-spacing: -.035em; line-height: .92; } body.rv .rv-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.01em; } body.rv .rv-eyebrow { font: 500 var(--rv-fs-micro)/1.2 'DM Sans', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--rv-muted); display: inline-flex; align-items: center; gap: .6rem; } body.rv .rv-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .5; } /* ============================================================ LAYOUT ============================================================ */ body.rv .rv-container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: clamp(1.25rem, 2vw + 1rem, 3rem); } body.rv .rv-container-tight { max-width: 1120px; } body.rv .rv-section { position: relative; padding-block: clamp(5rem, 3rem + 8vw, 11rem); } body.rv .rv-section + .rv-section { border-top: 1px solid var(--rv-line); } body.rv .rv-grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 1vw + .5rem, 2rem); } /* Asymmetric split (DESIGN_VARIANCE 10) */ body.rv .rv-split { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(2rem, 2vw + 1rem, 4rem); align-items: end; } @media (max-width: 900px) { body.rv .rv-split { grid-template-columns: 1fr; } } /* ============================================================ GLOBAL CANVAS — abstract light trails (ambient bg) ============================================================ */ body.rv .rv-trail-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .38; mix-blend-mode: multiply; } /* When inside a dark spotlight section, swap to screen */ body.rv .rv-on-dark .rv-trail-canvas { mix-blend-mode: screen; opacity: .65; } body.rv .rv-noise { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml;utf8,"); background-size: 180px 180px; } body.rv main, body.rv header, body.rv footer { position: relative; z-index: 2; } /* ============================================================ CUSTOM CURSOR ============================================================ */ body.rv .rv-cursor { position: fixed; left:0; top:0; width: 10px; height: 10px; border-radius: 50%; background: var(--rv-ink); pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: width .25s var(--rv-ease-out), height .25s var(--rv-ease-out), background .2s, border-color .2s; } body.rv .rv-cursor.is-hover { width: 46px; height: 46px; background: transparent; border: 1px solid var(--rv-accent); } body.rv .rv-cursor.is-press { transform: translate(-50%,-50%) scale(.6); } @media (hover: none) { body.rv .rv-cursor { display: none; } } /* ============================================================ BUTTONS — magnetic, tactile ============================================================ */ body.rv .rv-btn { --btn-bg: var(--rv-fg); --btn-fg: var(--rv-fg-inv); --btn-br: var(--rv-fg); position: relative; display: inline-flex; align-items: center; gap: .85rem; padding: 1.05rem 1.65rem; border-radius: var(--rv-r-pill); background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-br); font: 500 var(--rv-fs-sm)/1 'DM Sans', sans-serif; letter-spacing: -.005em; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform var(--rv-dur) var(--rv-ease-spring), color var(--rv-dur) var(--rv-ease-out); will-change: transform; } body.rv .rv-btn::before { content: ""; position: absolute; inset: 0; background: var(--rv-accent); transform: translateY(101%); transition: transform var(--rv-dur) var(--rv-ease-out); z-index: -1; } body.rv .rv-btn:hover { color: #fff; } body.rv .rv-btn:hover::before { transform: translateY(0); } body.rv .rv-btn:active { transform: scale(.98) translateY(1px); } body.rv .rv-btn-ghost { --btn-bg: transparent; --btn-fg: var(--rv-fg); --btn-br: var(--rv-line-str); } body.rv .rv-btn-accent { --btn-bg: var(--rv-accent); --btn-fg: #fff; --btn-br: var(--rv-accent); box-shadow: var(--rv-glow); } body.rv .rv-btn-accent::before { background: var(--rv-fg-inv); } body.rv .rv-btn .rv-btn-ico { display: inline-flex; width: 1.25em; height: 1.25em; align-items: center; justify-content: center; transition: transform var(--rv-dur) var(--rv-ease-spring); } body.rv .rv-btn:hover .rv-btn-ico { transform: translateX(4px) rotate(-12deg); } /* Link with underline sweep */ body.rv .rv-link { position: relative; padding-bottom: 2px; color: var(--rv-fg); } body.rv .rv-link::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; opacity:.35; transform-origin: right; transform: scaleX(1); transition: transform .45s var(--rv-ease-out); } body.rv .rv-link:hover::after { transform-origin:left; transform:scaleX(1); opacity:1; } /* ============================================================ GLASS / CARDS / BORDERS ============================================================ */ body.rv .rv-glass { background: rgba(255,255,255,.55); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--rv-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 80px -30px rgba(var(--rv-ink-rgb),.18); border-radius: var(--rv-r-3); } body.rv .rv-hairline { border: 0; border-top: 1px solid var(--rv-line); } body.rv .rv-divider-x { height: 1px; background: var(--rv-line); width: 100%; } /* Bento / feature tile */ body.rv .rv-tile { position: relative; padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); border-radius: var(--rv-r-3); background: linear-gradient(180deg, rgba(var(--rv-ink-rgb),.04), rgba(255,255,255,0)) , var(--rv-bg-1); border: 1px solid var(--rv-line); overflow: hidden; transition: transform .5s var(--rv-ease-spring), border-color .5s; will-change: transform; } body.rv .rv-tile::after { content:""; position:absolute; inset:0; background: radial-gradient(600px circle at var(--mx,50%) var(--my,0%), rgba(255,90,31,.12), transparent 40%); opacity: 0; transition: opacity .6s var(--rv-ease-out); pointer-events: none; } body.rv .rv-tile:hover::after { opacity: 1; } body.rv .rv-tile:hover { border-color: var(--rv-line-str); } /* ============================================================ REVEAL / STAGGER ============================================================ */ body.rv .rv-reveal { opacity: 0; transform: translateY(32px); transition: opacity var(--rv-dur-slow) var(--rv-ease-out), transform var(--rv-dur-slow) var(--rv-ease-out); transition-delay: calc(var(--rv-i, 0) * 70ms); } body.rv .rv-reveal.is-in { opacity: 1; transform: translateY(0); } body.rv .rv-reveal-clip { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--rv-ease-out); transition-delay: calc(var(--rv-i, 0) * 70ms); } body.rv .rv-reveal-clip.is-in { clip-path: inset(0 0 0 0); } /* Split word reveal — each word wrapped in span.rv-word */ body.rv .rv-split-words .rv-word { display: inline-block; overflow: hidden; vertical-align: top; } body.rv .rv-split-words .rv-word > span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--rv-ease-out); transition-delay: calc(var(--rv-i, 0) * 55ms); } body.rv .rv-split-words.is-in .rv-word > span { transform: translateY(0); } /* ============================================================ MARQUEE ============================================================ */ body.rv .rv-marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } body.rv .rv-marquee__track { display: flex; gap: clamp(2rem, 2vw + 1rem, 4.5rem); width: max-content; animation: rv-marq 42s linear infinite; } body.rv .rv-marquee--slow .rv-marquee__track { animation-duration: 72s; } body.rv .rv-marquee--reverse .rv-marquee__track { animation-direction: reverse; } body.rv .rv-marquee__item { font-family: 'Syne', sans-serif; font-weight: 500; font-size: clamp(2rem, 1rem + 4vw, 5rem); letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 2rem; color: var(--rv-fg); } body.rv .rv-marquee__item::after { content: ""; width: .45em; height: .45em; border-radius: 50%; background: var(--rv-accent); display: inline-block; } @keyframes rv-marq { to { transform: translateX(-50%); } } /* ============================================================ HEADINGS & HERO ============================================================ */ body.rv h1, body.rv h2, body.rv h3, body.rv h4 { margin: 0; } body.rv .rv-h1 { font-family: 'Syne', sans-serif; font-weight: 600; font-size: var(--rv-fs-h1); line-height: .94; letter-spacing: -.035em; } body.rv .rv-h2 { font-family: 'Syne', sans-serif; font-weight: 600; font-size: var(--rv-fs-h2); line-height: .98; letter-spacing: -.03em; } body.rv .rv-h3 { font-family: 'Syne', sans-serif; font-weight: 600; font-size: var(--rv-fs-h3); line-height: 1.02; letter-spacing: -.025em; } body.rv .rv-h4 { font-family: 'Syne', sans-serif; font-weight: 500; font-size: var(--rv-fs-h4); line-height: 1.15; letter-spacing: -.015em; } body.rv .rv-hero-text { font-family: 'Syne', sans-serif; font-weight: 600; font-size: var(--rv-fs-hero); line-height: .9; letter-spacing: -.045em; } body.rv .rv-lead { font-size: var(--rv-fs-lead); color: var(--rv-muted); max-width: 62ch; line-height: 1.45; } /* Emphasis italic-serif accent (anti-AI-slop tweak) */ body.rv .rv-emph { font-style: italic; font-weight: 400; font-family: 'Syne', serif; color: var(--rv-accent); } /* ============================================================ TAG / BADGE ============================================================ */ body.rv .rv-tag { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem; border-radius: var(--rv-r-pill); border: 1px solid var(--rv-line-str); font: 500 var(--rv-fs-micro)/1 'DM Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--rv-muted); background: rgba(var(--rv-ink-rgb),.04); } body.rv .rv-tag .rv-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--rv-accent); box-shadow: 0 0 0 0 var(--rv-accent); animation: rv-pulse 2.2s var(--rv-ease-out) infinite; } @keyframes rv-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,90,31,.55); } 70% { box-shadow: 0 0 0 10px rgba(255,90,31,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,31,0); } } /* ============================================================ HEADER (new) ============================================================ */ body.rv .rv-header { position: sticky; top: 0; z-index: 50; padding: 1rem 0; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); background: linear-gradient(180deg, rgba(250,247,242,.72), rgba(250,247,242,.35)); border-bottom: 1px solid transparent; transition: border-color var(--rv-dur) var(--rv-ease-out), background var(--rv-dur) var(--rv-ease-out); } body.rv .rv-header.is-scrolled { border-bottom-color: var(--rv-line); background: linear-gradient(180deg, rgba(250,247,242,.95), rgba(250,247,242,.85)); } body.rv .rv-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; } body.rv .rv-logo { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: -.04em; display: inline-flex; align-items: center; gap: .55rem; } body.rv .rv-logo__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rv-accent); box-shadow: 0 0 18px var(--rv-accent); animation: rv-pulse 2.4s var(--rv-ease-out) infinite; } body.rv .rv-nav { display: flex; gap: clamp(1rem, .5rem + 1.5vw, 2.2rem); justify-content: center; font-size: var(--rv-fs-sm); } body.rv .rv-nav a { position: relative; color: var(--rv-muted); padding: .5rem .25rem; transition: color var(--rv-dur) var(--rv-ease-out); } body.rv .rv-nav a:hover, body.rv .rv-nav a.is-active { color: var(--rv-fg); } body.rv .rv-nav a::before { content:""; position:absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--rv-accent); opacity: 0; transform: translate(-50%, 6px); transition: opacity var(--rv-dur), transform var(--rv-dur) var(--rv-ease-spring); } body.rv .rv-nav a:hover::before, body.rv .rv-nav a.is-active::before { opacity: 1; transform: translate(-50%, 0); } body.rv .rv-header__cta { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; } /* Mobile drawer */ body.rv .rv-burger { appearance: none; border: 1px solid var(--rv-line-str); background: transparent; color: var(--rv-fg); width: 46px; height: 46px; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; } @media (max-width: 900px) { body.rv .rv-nav { display: none; } body.rv .rv-burger { display: inline-flex; } body.rv .rv-header__inner { grid-template-columns: 1fr auto; } } body.rv .rv-drawer { background: var(--rv-paper); color: var(--rv-ink); position: fixed; inset: 0; z-index: 60; padding: 6rem 2rem 2rem; transform: translateY(-100%); transition: transform .6s var(--rv-ease-out); display: flex; flex-direction: column; gap: 1rem; } body.rv .rv-drawer.is-open { transform: translateY(0); } body.rv .rv-drawer a { font-family: 'Syne', sans-serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 500; letter-spacing:-.03em; } /* ============================================================ FOOTER (new) ============================================================ */ body.rv .rv-footer { position: relative; padding: clamp(4rem, 3vw + 3rem, 8rem) 0 2rem; background: var(--rv-bg); color: var(--rv-fg); border-top: 1px solid var(--rv-line); } body.rv .rv-footer__bigmark { font-family: 'Syne', sans-serif; font-weight: 600; font-size: clamp(4rem, 8vw + 2rem, 16rem); line-height: .82; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--rv-line-str); user-select: none; pointer-events: none; } body.rv .rv-footer__grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 2rem; align-items: start; padding-block: 3rem; } @media (max-width: 900px) { body.rv .rv-footer__grid { grid-template-columns: 1fr 1fr; } } body.rv .rv-footer h4 { font: 500 var(--rv-fs-micro)/1.2 'DM Sans',sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--rv-muted-2); margin-bottom: 1.25rem; } body.rv .rv-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; } body.rv .rv-footer a { color: var(--rv-muted); transition: color var(--rv-dur); } body.rv .rv-footer a:hover { color: var(--rv-fg); } body.rv .rv-footer__legal { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid var(--rv-line); color: var(--rv-muted-2); font-size: var(--rv-fs-xs); flex-wrap: wrap; gap: 1rem; } /* ============================================================ KPI / METRIC ============================================================ */ body.rv .rv-kpi { display: grid; gap: .5rem; padding-block: 1rem; border-top: 1px solid var(--rv-line); } body.rv .rv-kpi__num { font-family: 'Syne', sans-serif; font-size: clamp(2.5rem, 1rem + 4vw, 4.5rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; } body.rv .rv-kpi__label { color: var(--rv-muted); font-size: var(--rv-fs-sm); } /* ============================================================ HORIZONTAL RAIL (scroll-linked) ============================================================ */ body.rv .rv-rail { position: relative; overflow: hidden; } body.rv .rv-rail__track { display: flex; gap: clamp(1rem, 1vw + .5rem, 2rem); will-change: transform; } body.rv .rv-rail__item { flex: 0 0 clamp(260px, 28vw, 420px); } /* ============================================================ FORM ============================================================ */ body.rv .rv-field { display: grid; gap: .5rem; } body.rv .rv-field label { font-size: var(--rv-fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--rv-muted); } body.rv .rv-field input, body.rv .rv-field textarea, body.rv .rv-field select { width: 100%; padding: 1rem 1.1rem; border-radius: var(--rv-r-2); background: rgba(var(--rv-ink-rgb),.04); border: 1px solid var(--rv-line); color: var(--rv-fg); font: 400 var(--rv-fs-body)/1.4 'DM Sans', sans-serif; transition: border-color var(--rv-dur), background var(--rv-dur); } body.rv .rv-field input:focus, body.rv .rv-field textarea:focus, body.rv .rv-field select:focus { outline: none; border-color: var(--rv-accent); background: rgba(255,90,31,.06); } /* ============================================================ SECTION HEADER helper ============================================================ */ body.rv .rv-sec-head { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(1.5rem, 2vw + 1rem, 4rem); align-items: end; padding-bottom: clamp(2rem, 2vw + 1rem, 4rem); } @media (max-width: 900px) { body.rv .rv-sec-head { grid-template-columns: 1fr; } } /* ============================================================ ACCORDION ============================================================ */ body.rv .rv-acc { border-top: 1px solid var(--rv-line); } body.rv .rv-acc details { border-bottom: 1px solid var(--rv-line); padding: clamp(1.25rem, 1vw + .75rem, 2rem) 0; } body.rv .rv-acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; font-family: 'Syne', sans-serif; font-weight: 500; font-size: clamp(1.15rem, .9rem + .6vw, 1.55rem); letter-spacing: -.015em; line-height: 1.25; } body.rv .rv-acc summary::-webkit-details-marker { display: none; } body.rv .rv-acc summary::after { content: ""; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rv-line-str); background: radial-gradient(circle, transparent 45%, var(--rv-line-str) 46%, var(--rv-line-str) 48%, transparent 49%) , radial-gradient(circle, var(--rv-line-str) 0%, var(--rv-line-str) 4%, transparent 5%); background-position: center; background-size: 18px 2px, 2px 18px; background-repeat: no-repeat; transition: transform var(--rv-dur) var(--rv-ease-spring), border-color var(--rv-dur); } body.rv .rv-acc details[open] summary::after { transform: rotate(45deg); border-color: var(--rv-accent); } body.rv .rv-acc details > div { padding-top: 1rem; color: var(--rv-muted); max-width: 72ch; font-size: var(--rv-fs-body); line-height: 1.6; overflow: hidden; animation: rv-acc-in .5s var(--rv-ease-out); } @keyframes rv-acc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ============================================================ BREADCRUMBS ============================================================ */ body.rv .rv-crumbs { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: var(--rv-fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--rv-muted-2); } body.rv .rv-crumbs a { color: var(--rv-muted); } body.rv .rv-crumbs a:hover { color: var(--rv-fg); } body.rv .rv-crumbs .sep { opacity: .5; } /* ============================================================ CHIP / FILTER BUTTON ============================================================ */ body.rv .rv-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: var(--rv-r-pill); border: 1px solid var(--rv-line-str); background: rgba(var(--rv-ink-rgb),.04); color: var(--rv-muted); font-size: var(--rv-fs-sm); cursor: pointer; transition: color var(--rv-dur), border-color var(--rv-dur), background var(--rv-dur); } body.rv .rv-chip:hover, body.rv .rv-chip.is-active { color: var(--rv-fg); border-color: var(--rv-accent); background: rgba(255,90,31,.08); } /* ============================================================ ARTICLE PROSE (blog, case study, legal) ============================================================ */ body.rv .rv-prose { font-size: var(--rv-fs-body); line-height: 1.75; color: var(--rv-fg); } body.rv .rv-prose > * { max-width: 68ch; } body.rv .rv-prose p, body.rv .rv-prose ul, body.rv .rv-prose ol { margin: 0 0 1.25em; color: var(--rv-fg); opacity: .88; } body.rv .rv-prose h2 { font-family: 'Syne', sans-serif; font-size: clamp(1.75rem, 1rem + 2vw, 2.6rem); font-weight: 600; letter-spacing:-.02em; margin: 2.5em 0 .75em; line-height: 1.1; } body.rv .rv-prose h3 { font-family: 'Syne', sans-serif; font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); font-weight: 500; letter-spacing:-.015em; margin: 2em 0 .5em; line-height: 1.2; } body.rv .rv-prose h4 { font-weight: 500; font-size: 1.15rem; margin: 1.75em 0 .5em; } body.rv .rv-prose blockquote { border-left: 2px solid var(--rv-accent); padding: .25em 0 .25em 1.25em; margin: 1.5em 0; font-family: 'Syne', serif; font-style: italic; font-size: clamp(1.15rem, .8rem + .8vw, 1.45rem); color: var(--rv-fg); max-width: 60ch; } body.rv .rv-prose a { color: var(--rv-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } body.rv .rv-prose a:hover { text-decoration-thickness: 2px; } body.rv .rv-prose img { border-radius: var(--rv-r-2); margin: 2em 0; border: 1px solid var(--rv-line); max-width: 100%; width: 100%; } body.rv .rv-prose code { background: rgba(var(--rv-ink-rgb),.06); padding: .15em .4em; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: .9em; } body.rv .rv-prose pre { background: var(--rv-bg-2); border: 1px solid var(--rv-line); padding: 1.25rem; border-radius: var(--rv-r-2); overflow-x: auto; } body.rv .rv-prose pre code { background: transparent; padding: 0; } body.rv .rv-prose hr { border: 0; height: 1px; background: var(--rv-line); margin: 3em 0; } body.rv .rv-prose ul { padding-left: 1.25em; } body.rv .rv-prose ul li::marker { color: var(--rv-accent); } /* ============================================================ PAGINATION ============================================================ */ body.rv .rv-pager { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding-top: 3rem; border-top: 1px solid var(--rv-line); margin-top: 3rem; } body.rv .rv-pager a, body.rv .rv-pager span { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 1rem; border: 1px solid var(--rv-line); border-radius: var(--rv-r-pill); color: var(--rv-muted); font-size: var(--rv-fs-sm); transition: all var(--rv-dur); } body.rv .rv-pager a:hover { color: var(--rv-fg); border-color: var(--rv-accent); } body.rv .rv-pager .is-current { color: var(--rv-fg); border-color: var(--rv-accent); background: rgba(255,90,31,.08); } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { body.rv *, body.rv *::before, body.rv *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } body.rv .rv-trail-canvas, body.rv .rv-noise { display: none; } } /* ============================================================ UTIL ============================================================ */ body.rv .rv-stack-1 > * + * { margin-top: var(--rv-s-4); } body.rv .rv-stack-2 > * + * { margin-top: var(--rv-s-5); } body.rv .rv-stack-3 > * + * { margin-top: var(--rv-s-6); } body.rv .rv-stack-4 > * + * { margin-top: var(--rv-s-7); } body.rv .rv-stack-5 > * + * { margin-top: var(--rv-s-8); } body.rv .rv-flex { display: flex; } body.rv .rv-items-center { align-items: center; } body.rv .rv-justify-between { justify-content: space-between; } body.rv .rv-gap-1 { gap: var(--rv-s-2); } body.rv .rv-gap-2 { gap: var(--rv-s-4); } body.rv .rv-gap-3 { gap: var(--rv-s-5); } body.rv .rv-muted { color: var(--rv-muted); } body.rv .rv-accent { color: var(--rv-accent); } body.rv .rv-center { text-align: center; } body.rv .rv-wrap { flex-wrap: wrap; } /* Hide legacy global chrome on revamped pages to avoid clashes */ body.rv .scroll-progress { background: var(--rv-accent); }