/* * Ravello Child — base.css * Reset, typography, utilities, noise overlay, buttons, form inputs. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; max-width: 100%; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } input, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } table { border-collapse: collapse; width: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { font-family: var(--rv-font-body); font-weight: var(--weight-regular); font-size: var(--fs-body); line-height: var(--leading-body); color: var(--rv-text); background-color: var(--rv-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* NOTE: no overflow-x:clip here — it makes a scroll container and kills position:sticky for descendants (e.g. the PDP gallery column). html{overflow-x:clip} already prevents horizontal scroll at the root. */ } h1, h2, h3, h4, h5, h6, .display { font-family: var(--rv-font-display); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--rv-text); } h1, .h1 { font-size: var(--fs-h1); } h2, .h2 { font-size: var(--fs-h2); } h3, .h3 { font-size: var(--fs-h3); } h4, .h4 { font-size: var(--fs-h4); } /* Section-tier display scale (Vercel parity: ~64px ceiling). */ .display { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.08; letter-spacing: -0.02em; } .display-mega { font-size: clamp(56px, 6.5vw, 96px); font-weight: var(--weight-light); line-height: 0.95; letter-spacing: -0.02em; } .display-italic { font-style: italic; font-weight: var(--weight-medium); } p { max-width: 68ch; } strong, b { font-weight: var(--weight-semibold); } .kicker { font-family: var(--rv-font-body); font-size: var(--fs-micro); letter-spacing: var(--tracking-editorial); text-transform: uppercase; font-weight: var(--weight-medium); color: var(--rv-text-muted); display: inline-flex; align-items: center; gap: 0.95em; } .kicker.on-dark { color: var(--rv-mist); } .dotted-kicker::before, .dotted-kicker::after { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.7; } .ravello-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter); width: 100%; } .ravello-container--wide { max-width: min(100%, 1680px); } .ravello-container--narrow { max-width: 980px; } .section-pad { padding-block: var(--space-2xl); } .section-pad-lg { padding-block: var(--space-3xl); } .section-pad-sm { padding-block: var(--space-xl); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 0; background: var(--rv-black); color: var(--rv-paper); padding: var(--space-xs) var(--space-sm); z-index: 9999; font-size: var(--fs-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .skip-link:focus { top: 0; } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-overlay); opacity: 0.025; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; } @media (prefers-reduced-motion: reduce) { body::after { opacity: 0.015; } } :focus-visible { outline: 2px solid var(--rv-ink); outline-offset: 3px; } .is-dark :focus-visible, .rv-dark :focus-visible { outline-color: var(--rv-paper); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; padding: 0.95em 1.8em; font-family: var(--rv-font-body); font-size: var(--fs-small); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; line-height: 1; transition: background-color var(--dur-standard) var(--ease-default), color var(--dur-standard) var(--ease-default), border-color var(--dur-standard) var(--ease-default), transform var(--dur-standard) var(--ease-default); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn[disabled], .btn.is-disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; } .btn-primary { background: var(--rv-black); color: var(--rv-paper); border: 1px solid var(--rv-black); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--rv-ink); color: var(--rv-paper); border-color: var(--rv-ink); } .btn-ghost { background: transparent; color: var(--rv-ink); border: 1px solid var(--rv-ink); } .btn-ghost:hover, .btn-ghost:focus-visible { background: var(--rv-ink); color: var(--rv-paper); border-color: var(--rv-ink); } .is-dark .btn-ghost, .rv-dark .btn-ghost { color: var(--rv-paper); border-color: var(--rv-paper); } .is-dark .btn-ghost:hover, .is-dark .btn-ghost:focus-visible, .rv-dark .btn-ghost:hover, .rv-dark .btn-ghost:focus-visible { background: var(--rv-paper); color: var(--rv-ink); border-color: var(--rv-paper); } .btn-link { background: none; padding: 0 0 2px; font-size: var(--fs-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; border-bottom: 1px solid currentColor; transition: color var(--dur-standard) var(--ease-default); } .btn-link:hover, .btn-link:focus-visible { color: var(--rv-graphite); } .btn-block { width: 100%; } /* Aliases used in JS-rendered chrome (cart drawer, empty states) */ .btn--filled { background: var(--rv-black); color: var(--rv-paper); border: 1px solid var(--rv-black); } .btn--filled:hover, .btn--filled:focus-visible { background: var(--rv-ink); color: var(--rv-paper); border-color: var(--rv-ink); } .btn--ghost { background: transparent; color: var(--rv-ink); border: 1px solid var(--rv-ink); } .btn--ghost:hover, .btn--ghost:focus-visible { background: var(--rv-ink); color: var(--rv-paper); border-color: var(--rv-ink); } .is-dark .btn--ghost, .rv-dark .btn--ghost { color: var(--rv-paper); border-color: var(--rv-paper); } .is-dark .btn--ghost:hover, .is-dark .btn--ghost:focus-visible, .rv-dark .btn--ghost:hover, .rv-dark .btn--ghost:focus-visible { background: var(--rv-paper); color: var(--rv-ink); border-color: var(--rv-paper); } .rv-field { display: flex; flex-direction: column; gap: 0.35em; } .rv-field label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-editorial); font-weight: var(--weight-medium); color: var(--rv-text-muted); } .rv-input, .rv-textarea, .rv-select { width: 100%; padding: 0.9em 1em; background: var(--rv-white); border: 1px solid var(--rv-border-strong); border-radius: var(--radius-sm); font-size: var(--fs-body); color: var(--rv-ink); transition: border-color var(--dur-standard) var(--ease-default); } .rv-input:focus, .rv-textarea:focus, .rv-select:focus { border-color: var(--rv-ink); outline: 0; } .rv-input::placeholder, .rv-textarea::placeholder { color: var(--rv-stone); } .rv-inline-form { display: flex; align-items: stretch; border-bottom: 1px solid currentColor; } .rv-inline-form .rv-input { background: transparent; border: 0; border-radius: 0; padding: 0.75em 0; color: inherit; flex: 1; } .rv-inline-form .rv-input:focus { border: 0; } .rv-inline-form button:not(.btn) { background: transparent; color: inherit; font-size: var(--fs-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 0 var(--space-sm); cursor: pointer; transition: color var(--dur-standard) var(--ease-default); } .rv-inline-form button:not(.btn):hover { color: var(--rv-gold); } .rv-badge { display: inline-block; padding: 0.35em 0.6em; font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--weight-medium); border-radius: var(--radius-sm); line-height: 1; } .rv-badge--new { background: var(--rv-ink); color: var(--rv-paper); } .rv-badge--sale { background: var(--rv-sale); color: var(--rv-white); } .rv-badge--limited { background: var(--rv-gold); color: var(--rv-ink); } .rv-badge--shoe-sale { background: var(--rv-ink); color: var(--rv-paper); border: 1px solid rgba(250, 247, 242, 0.18); letter-spacing: var(--tracking-wide, 0.08em); } /* Reveal: opt-in to animation only when JS confirms intersection support * AND element hasn't been marked visible. Default is visible so failed * observers / no-JS / above-fold elements never get stuck invisible. */ .rv-reveal { opacity: 1; transform: none; transition: opacity var(--dur-editorial) var(--ease-editorial), transform var(--dur-editorial) var(--ease-editorial); } html.js .rv-reveal.rv-reveal--armed:not(.is-visible) { opacity: 0; transform: translateY(24px); } .rv-reveal.is-visible { opacity: 1; transform: translateY(0); } a { transition: color var(--dur-standard) var(--ease-default); } a:hover { color: var(--rv-graphite); } .rv-hscroll { display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--space-sm); } .rv-hscroll::-webkit-scrollbar { display: none; } .rv-hscroll > * { scroll-snap-align: start; flex: 0 0 auto; } .woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--rv-ink) !important; background-color: var(--rv-cream) !important; color: var(--rv-ink) !important; } .woocommerce-message::before, .woocommerce-info::before { color: var(--rv-ink) !important; }