/* ========================================================================== Summer Surf Shop Palette derived from the brand logo: Costa Rica flag navy + flag red, on a cool sea-salt neutral. Deliberately NOT the beige/brass default. SHAPE SYSTEM (locked, one rule, applied everywhere): buttons + pills .... 999px (full) cards + tiles ...... 20px inputs ............. 12px media inside tiles . inherits the tile COLOR LOCK: one accent (flag red). Used on primary CTA, links, focus rings, the brand band rule, and the accessories tile. Nothing else. THEME LOCK: the page is one theme (light by default, dark via prefers-color-scheme or the manual toggle). The single deliberate colour block is the navy brand band under the hero. ========================================================================== */ /* ---------- Fonts (self-hosted, no external requests) -------------------- */ @font-face { font-family:'Clash Display'; src:url('assets/fonts/clash-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Clash Display'; src:url('assets/fonts/clash-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'Clash Display'; src:url('assets/fonts/clash-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:'Satoshi'; src:url('assets/fonts/satoshi-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Satoshi'; src:url('assets/fonts/satoshi-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Satoshi'; src:url('assets/fonts/satoshi-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } /* ---------- Tokens ------------------------------------------------------- */ :root { color-scheme: light; --bg: #f4f5f2; /* sea salt */ --surface: #fcfcfa; /* paper */ --surface-2: #e9edea; /* sea glass */ --ink: #101e33; /* deep navy, from the logo */ --ink-soft: #46536a; --ink-faint: #5d6675; /* 4.9:1 on the tinted surface, the lowest-contrast ground */ --line: rgb(16 30 51 / .13); --line-strong: rgb(16 30 51 / .22); --accent: #ce1126; /* flag red, for fills */ --accent-text: #b60f21; /* flag red, tuned for AA as text on light */ --on-accent: #ffffff; /* 5.6:1 on --accent */ --deep: #0b1626; /* navy colour block */ --deep-ink: #edf1f4; --deep-soft: #9fb0c4; --deep-line: rgb(237 241 244 / .16); --shadow-soft: 0 1px 2px rgb(16 30 51 / .05), 0 12px 32px rgb(16 30 51 / .07); --shadow-lift: 0 2px 6px rgb(16 30 51 / .07), 0 24px 56px rgb(16 30 51 / .12); --r-pill: 999px; --r-card: 20px; --r-input: 12px; --wrap: 1400px; --gutter: clamp(1.25rem, 4vw, 3.25rem); --nav-h: 68px; --section-y: clamp(5.5rem, 11vw, 9rem); --ease: cubic-bezier(.16, 1, .3, 1); /* z-scale, documented so nobody sprinkles arbitrary values */ --z-grain: 60; --z-nav: 50; --z-panel: 55; } /* Dark tokens: applied by system preference OR by the manual toggle. [data-theme] on always wins, so the toggle works in both directions. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: #0a1422; --surface: #101e31; --surface-2: #16273d; --ink: #e8eef3; --ink-soft: #a3b1c2; --ink-faint: #7e8da0; --line: rgb(232 238 243 / .14); --line-strong: rgb(232 238 243 / .26); --accent-text: #ff6070; /* 6.1:1 on --bg */ --deep: #060e18; --tile-deep: #1c3049; --shadow-soft: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .34); --shadow-lift: 0 2px 6px rgb(0 0 0 / .45), 0 24px 56px rgb(0 0 0 / .5); } } :root[data-theme='dark'] { color-scheme: dark; --bg: #0a1422; --surface: #101e31; --surface-2: #16273d; --ink: #e8eef3; --ink-soft: #a3b1c2; --ink-faint: #7e8da0; --line: rgb(232 238 243 / .14); --line-strong: rgb(232 238 243 / .26); --accent-text: #ff6070; --deep: #060e18; --tile-deep: #1c3049; --shadow-soft: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .34); --shadow-lift: 0 2px 6px rgb(0 0 0 / .45), 0 24px 56px rgb(0 0 0 / .5); } /* ---------- Base --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Satoshi', ui-sans-serif, system-ui, sans-serif; font-size: clamp(1rem, .96rem + .18vw, 1.0625rem); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, .display { font-family: 'Clash Display', 'Satoshi', ui-sans-serif, sans-serif; font-weight: 600; letter-spacing: -.018em; word-spacing: .03em; line-height: 1.04; margin: 0; text-wrap: balance; } p { margin: 0; max-width: 62ch; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } /* Anchor targets clear the sticky header. */ section[id], main[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bg); padding: .75rem 1.25rem; border-radius: 0 0 var(--r-input) 0; z-index: 99; } .skip:focus { left: 0; } .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; } /* One eyebrow style. Budget for this page: 2 total. */ .eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1.25rem; } .section-title { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); max-width: 18ch; } .section-lede { margin-top: 1.25rem; color: var(--ink-soft); font-size: 1.0625rem; max-width: 54ch; } /* ---------- Buttons ------------------------------------------------------ */ .btn { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap; /* CTAs never wrap */ font-family: 'Satoshi', sans-serif; font-weight: 700; font-size: .9375rem; letter-spacing: -.005em; padding: .875rem 1.5rem; border-radius: var(--r-pill); border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); } .btn:active { transform: translateY(0) scale(.985); } .btn i { font-size: 1.15em; line-height: 1; } .btn--primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: var(--accent); } .btn--primary:hover { --btn-bg: #b60f21; --btn-bd: #b60f21; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); } .btn--ghost:hover { --btn-bg: var(--surface); } .btn--on-deep { --btn-fg: var(--deep-ink); --btn-bd: var(--deep-line); } .btn--on-deep:hover { --btn-bg: rgb(255 255 255 / .08); } /* Over the video. Needs its own stroke and fill so it never floats contrast-free on a photographic background. */ .btn--on-media { --btn-fg: #fdfdfc; --btn-bd: rgb(255 255 255 / .45); --btn-bg: rgb(6 14 24 / .32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .btn--on-media:hover { --btn-bg: rgb(6 14 24 / .55); --btn-bd: rgb(255 255 255 / .7); } @media (prefers-reduced-transparency: reduce) { .btn--on-media { --btn-bg: rgb(6 14 24 / .8); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* White button sitting on the accent band. */ .btn--on-accent { --btn-bg: #fdfdfc; --btn-fg: #a80d1f; --btn-bd: #fdfdfc; } /* 6.4:1 */ .btn--on-accent:hover { --btn-bg: #ffffff; --btn-bd: #ffffff; } .btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; } .link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--accent-text); border-bottom: 1px solid currentColor; padding-bottom: 2px; } .link-arrow i { transition: transform .3s var(--ease); } .link-arrow:hover i { transform: translateX(4px); } /* ---------- Header ------------------------------------------------------- */ .nav-sentinel { position: absolute; top: 0; height: 1px; width: 100%; } .header { /* Fixed, not sticky: the video hero must run edge to edge underneath it. */ position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); height: var(--nav-h); display: flex; align-items: center; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background-color .3s var(--ease); } .header[data-stuck='true'] { border-bottom-color: var(--line); } /* Over the video hero the bar goes transparent and flips to light content. The logo keeps its plate here because the footage is bright and shifting. */ .header[data-over-hero='true'] { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } .header[data-over-hero='true'] .nav a { color: rgb(255 255 255 / .86); } .header[data-over-hero='true'] .nav a:hover { color: #ffffff; } .header[data-over-hero='true'] .icon-btn { color: #ffffff; border-color: rgb(255 255 255 / .38); } .header[data-over-hero='true'] .icon-btn:hover { background: rgb(255 255 255 / .14); } .header[data-over-hero='true'] .brand__plate { background: #f4f5f2; } @media (prefers-reduced-transparency: reduce) { .header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } } .header__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); } /* The logo is a die-cut sticker design. On light it sits bare; on dark it sits on its own light plate so the black brush strokes stay legible. */ .brand { display: inline-flex; align-items: center; flex: 0 0 auto; } .brand img { height: 44px; width: auto; } @media (max-width: 420px) { .brand img { height: 34px; } } .brand__plate { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--r-input); background: transparent; transition: background-color .3s var(--ease); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .brand__plate { background: #f4f5f2; } } :root[data-theme='dark'] .brand__plate { background: #f4f5f2; } .nav { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; } .nav a { font-size: .9375rem; font-weight: 500; color: var(--ink-soft); position: relative; padding-block: .35rem; transition: color .2s var(--ease); } .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .nav a:hover { color: var(--ink); } .nav a:hover::after { transform: scaleX(1); } .header__actions { display: flex; align-items: center; gap: .625rem; } .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; font-size: 1.2rem; transition: background-color .25s var(--ease), transform .25s var(--ease); } .icon-btn:hover { background: var(--surface); transform: translateY(-1px); } .icon-btn:active { transform: scale(.94); } .nav-toggle { display: none; } @media (max-width: 960px) { .nav { display: none; } .header__actions .btn--primary { display: none; } .nav-toggle { display: inline-grid; margin-left: auto; } } .mobile-panel { position: fixed; inset: var(--nav-h) 0 auto 0; z-index: var(--z-panel); background: var(--bg); border-bottom: 1px solid var(--line); padding: 1.5rem var(--gutter) 2rem; display: grid; gap: .25rem; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); } .mobile-panel[data-open='true'] { transform: none; opacity: 1; pointer-events: auto; } .mobile-panel a { font-family: 'Clash Display', sans-serif; font-size: 1.5rem; font-weight: 600; padding: .55rem 0; border-bottom: 1px solid var(--line); } .mobile-panel .btn { margin-top: 1.25rem; } @media (min-width: 961px) { .mobile-panel { display: none; } } /* ---------- Hero --------------------------------------------------------- */ /* The wrapper supplies the scroll distance, the stage pins inside it. The video's currentTime is driven from how far through the wrapper you are, so the ride plays forward as you scroll and backward as you scroll up. */ .hero { position: relative; } .hero__scroll { position: relative; height: 240vh; } .hero__stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; background: var(--deep); --p: 0; /* scroll progress 0 to 1, written from JS */ } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* a slow push-in as the ride progresses, so the frame never feels static */ transform: scale(calc(1.06 - var(--p) * .06)); will-change: transform; } .hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgb(6 14 24 / .90) 0%, rgb(6 14 24 / .55) 26%, rgb(6 14 24 / .10) 52%, rgb(6 14 24 / .00) 68%), linear-gradient(to bottom, rgb(6 14 24 / .55) 0%, rgb(6 14 24 / .00) 22%); } .hero__copy { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: clamp(3rem, 8vh, 6rem); opacity: clamp(0, calc(1 - var(--p) * 2.1), 1); transform: translateY(calc(var(--p) * -40px)); } .hero__title { font-size: clamp(2.75rem, 1.4rem + 5.4vw, 5.5rem); font-weight: 600; line-height: 1.02; letter-spacing: -.02em; word-spacing: .05em; max-width: 13ch; color: #fdfdfc; text-shadow: 0 2px 30px rgb(6 14 24 / .5); } .hero__title strong { font-weight: 700; color: #ff5566; } /* 4.9:1 on the scrim */ .hero__lede { margin-top: clamp(1rem, 2vw, 1.5rem); font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: rgb(253 253 252 / .88); max-width: 44ch; text-shadow: 0 1px 16px rgb(6 14 24 / .6); } .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); } /* Mobile and reduced motion both drop the scrub: no pinning, no seeking. */ @media (max-width: 900px), (prefers-reduced-motion: reduce) { .hero__scroll { height: auto; } .hero__stage { position: static; height: 100dvh; } .hero__video { transform: none; } .hero__copy { opacity: 1; transform: none; } } /* ---------- Brand band (the one deliberate colour block) ----------------- */ .brands { background: var(--deep); color: var(--deep-ink); padding-block: clamp(3rem, 6vw, 4.5rem); overflow: hidden; } .brands .eyebrow { color: var(--deep-soft); margin-bottom: 1.75rem; } .brands__rule { height: 2px; background: var(--accent); width: 56px; margin-bottom: 1.75rem; } .marquee { position: relative; display: flex; overflow: hidden; } .marquee::before, .marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 120px); z-index: 2; pointer-events: none; } .marquee::before { left: 0; background: linear-gradient(90deg, var(--deep), transparent); } .marquee::after { right: 0; background: linear-gradient(270deg, var(--deep), transparent); } .marquee__track { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); padding-right: clamp(2.5rem, 6vw, 5rem); animation: slide 38s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes slide { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } .marquee { overflow-x: auto; } } /* Real logo SVGs where we have them, typographic wordmarks for the rest. The logos are single-colour art, so a brightness/invert filter turns them white to match the wordmarks on the navy band. */ .wordmark--logo { display: inline-flex; align-items: center; } .wordmark--logo img { height: var(--lh); width: auto; max-width: 14rem; object-fit: contain; filter: brightness(0) invert(1); } /* Each logo gets its own height. These lockups run from square (Volcom, Reef) to about 12:1 (O'Neill), so a single shared height would leave the square marks tiny and the wide wordmarks dominating. The heights below are set so every logo covers roughly the same area, which is what actually reads as "same size" to the eye. */ [data-brand='oneill'] { --lh: clamp(11px, 1.4vw, 19px); } [data-brand='quiksilver'] { --lh: clamp(16px, 1.9vw, 26px); } [data-brand='ripcurl'] { --lh: clamp(17px, 2.0vw, 27px); } [data-brand='hurley'] { --lh: clamp(20px, 2.3vw, 32px); } [data-brand='vans'] { --lh: clamp(25px, 2.9vw, 40px); } [data-brand='billabong'] { --lh: clamp(29px, 3.3vw, 46px); } [data-brand='volcom'] { --lh: clamp(31px, 3.6vw, 50px); } [data-brand='reef'] { --lh: clamp(31px, 3.6vw, 50px); } /* Typographic wordmarks, used until the official SVG arrives. */ .wordmark { font-family: 'Clash Display', sans-serif; font-weight: 700; font-size: clamp(1.25rem, 1rem + 1.4vw, 2.125rem); letter-spacing: -.02em; text-transform: uppercase; color: var(--deep-ink); opacity: .78; white-space: nowrap; transition: opacity .3s var(--ease); } .marquee:hover .wordmark { opacity: .55; } .marquee .wordmark:hover { opacity: 1; } /* ---------- Colecciones (bento, exactly 5 cells) ------------------------- */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); /* Explicit rows, not auto: otherwise each tile sizes to its own content and the row-2 pair ends up at different heights. Row 1 is the taller one so the Skate tile reads as the second focal point after Surf. */ grid-template-rows: clamp(15rem, 25vw, 23.75rem) clamp(13.5rem, 20vw, 18.75rem) auto; gap: clamp(.75rem, 1.4vw, 1.125rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); } .tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); isolation: isolate; } .tile__img { position: absolute; inset: 0; z-index: -1; } .tile__img img, .tile__img video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); } .tile:hover .tile__img img { transform: scale(1.05); } .tile:hover .tile__img video { transform: scale(1.03); } /* A scrubbed tile already moves on its own, so it does not also grow on hover. */ .tile[data-scrub]:hover .tile__img video { transform: none; } /* Hover-played tiles. The video's own poster covers the idle state, and on leave playback is rewound to frame 0, so the card always settles back to the same still rather than freezing on a random frame. */ .tile[data-hover-play] .tile__bar { transition: background-color .3s var(--ease); } .tile__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--surface); border-top: 1px solid var(--line); } .tile__name { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.125rem; letter-spacing: -.02em; } .tile__meta { display: block; font-size: .8125rem; color: var(--ink-faint); font-family: 'Satoshi', sans-serif; font-weight: 400; letter-spacing: 0; } .tile__bar i { font-size: 1.25rem; color: var(--accent-text); transition: transform .3s var(--ease); } .tile:hover .tile__bar i { transform: translateX(4px); } .tile--lg { grid-column: span 2; grid-row: span 2; } .tile--wide{ grid-column: span 2; } .tile--band{ grid-column: span 4; } /* Tinted tile: carries the navy instead of a photo. */ .tile--deep { /* In dark mode --deep is darker than the page, so the tile would vanish. It steps UP to the elevated surface instead. */ background: var(--tile-deep, var(--deep)); color: var(--deep-ink); justify-content: space-between; padding: 1.5rem; } .tile--deep > i { font-size: 2rem; color: var(--deep-soft); } .tile--deep .tile__bar { background: transparent; border: 0; padding: 0; } .tile--deep .tile__name { color: var(--deep-ink); } .tile--deep .tile__meta { color: var(--deep-soft); } /* Background diversity plus the coming-soon state: this cell carries the accent instead of a photo, and says plainly what is not ready yet. */ .tile--accent { background: var(--accent); color: var(--on-accent); flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.75rem, 3.5vw, 2.75rem); min-height: 0; } .tile__flag { font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgb(255 255 255 / .88); margin-bottom: .75rem; } .tile__headline { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); letter-spacing: -.02em; line-height: 1.1; max-width: 20ch; } .tile__sub { margin-top: .625rem; font-size: .9688rem; color: rgb(255 255 255 / .88); max-width: 46ch; } .tile--accent .btn { flex: 0 0 auto; } @media (max-width: 700px) { .tile--accent { flex-direction: column; align-items: flex-start; } } @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; } .tile { min-height: 17rem; } .tile--lg { grid-column: span 2; grid-row: span 1; min-height: 22rem; } .tile--wide, .tile--band { grid-column: span 2; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; grid-template-rows: auto; } .tile, .tile--lg, .tile--wide, .tile--band { grid-column: span 1; min-height: 16.5rem; } } /* ---------- La tienda (editorial split) ---------------------------------- */ .store { background: var(--surface-2); } .store__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .store__media { margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; /* the clip is portrait */ max-height: 78vh; box-shadow: var(--shadow-soft); background: var(--surface-2); } .store__media img, .store__media video { width: 100%; height: 100%; object-fit: cover; display: block; } .store__facts { display: grid; gap: 1.5rem; margin-top: 2.25rem; } .store__fact { display: grid; gap: .3rem; padding-left: 1.125rem; border-left: 2px solid var(--accent); } .store__fact dt { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.0625rem; } .store__fact dd { margin: 0; color: var(--ink-soft); font-size: .9688rem; } @media (max-width: 900px) { .store__grid { grid-template-columns: 1fr; } .store__media { aspect-ratio: 3 / 4; max-height: 70vh; } } /* ---------- Novedades (horizontal rail) ---------------------------------- */ .rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .rail-nav { display: flex; gap: .5rem; } .rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(230px, 24vw, 310px); gap: clamp(.875rem, 1.6vw, 1.25rem); margin-top: clamp(2rem, 4vw, 3rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding-bottom: 1rem; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .card { scroll-snap-align: start; display: grid; gap: .875rem; } .card__media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-2); position: relative; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .card:hover .card__media img { transform: scale(1.04); } .card__brand { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .card__name { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; margin-top: .2rem; } .card__price { font-weight: 700; margin-top: .35rem; } /* ---------- Testimonios (asymmetric quote band) -------------------------- */ .quotes__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); } .quotes__col { display: grid; gap: clamp(1rem, 2vw, 1.5rem); align-content: start; } .quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; align-content: space-between; gap: 1.75rem; } .quote--lead { height: 100%; } .quote--lead p { font-family: 'Clash Display', sans-serif; font-weight: 500; font-size: clamp(1.375rem, 1rem + 1.5vw, 2rem); line-height: 1.22; letter-spacing: -.025em; } .quote p { color: var(--ink); } .quote figcaption { display: grid; gap: .15rem; } .quote__name { font-weight: 700; font-size: .9375rem; } .quote__role { font-size: .8438rem; color: var(--ink-faint); } @media (max-width: 900px) { .quotes__grid { grid-template-columns: 1fr; } } /* ---------- Visitanos (info + form) -------------------------------------- */ .visit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .info-group { display: grid; gap: .5rem; padding-block: 1.5rem; border-top: 1px solid var(--line); } .info-group:first-of-type { border-top: 0; padding-top: 0; } .info-group h3 { display: flex; align-items: center; gap: .55rem; font-size: 1rem; font-weight: 600; } .info-group h3 i { color: var(--accent-text); font-size: 1.25rem; } .info-group p, .info-group a { color: var(--ink-soft); font-size: .9688rem; } .info-group a:hover { color: var(--accent-text); } .map { margin-top: 1.75rem; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); } .map img { width: 100%; height: 100%; object-fit: cover; } .form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1.25rem; } .field { display: grid; gap: .5rem; } .field label { font-size: .875rem; font-weight: 700; } .field .help { font-size: .8125rem; color: var(--ink-faint); } .field input, .field textarea { font: inherit; font-size: .9688rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-input); padding: .8125rem .9375rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); width: 100%; } .field textarea { resize: vertical; min-height: 118px; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 22%, transparent); } .field .error { display: none; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 500; color: var(--accent-text); } .field[data-invalid='true'] input, .field[data-invalid='true'] textarea { border-color: var(--accent-text); } .field[data-invalid='true'] .error { display: flex; } .field[data-invalid='true'] .help { display: none; } .form__status { display: none; align-items: flex-start; gap: .6rem; padding: .875rem 1rem; border-radius: var(--r-input); background: var(--surface-2); border: 1px solid var(--line); font-size: .9063rem; } .form__status[data-show='true'] { display: flex; } .form__status i { color: var(--accent-text); font-size: 1.25rem; flex: 0 0 auto; } .form__note { font-size: .8125rem; color: var(--ink-faint); margin-top: -.25rem; } .spinner { display: none; } .btn[data-loading='true'] .spinner { display: inline-block; animation: spin 1s linear infinite; } .btn[data-loading='true'] .btn-label-idle { display: none; } .btn-label-busy { display: none; } .btn[data-loading='true'] .btn-label-busy { display: inline; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation: none !important; } } @media (max-width: 900px) { .visit__grid { grid-template-columns: 1fr; } } /* ---------- Footer ------------------------------------------------------- */ .footer { background: var(--surface-2); border-top: 1px solid var(--line); padding-block: clamp(3.5rem, 7vw, 5rem) 2.5rem; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 3rem); } .footer__brand img { height: 64px; } .footer__blurb { margin-top: 1.25rem; color: var(--ink-soft); font-size: .9375rem; max-width: 32ch; } .footer__socials { display: flex; gap: .5rem; margin-top: 1.5rem; } .footer h4 { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1rem; font-weight: 700; } .footer li + li { margin-top: .625rem; } .footer li a { font-size: .9375rem; color: var(--ink-soft); } .footer li a:hover { color: var(--accent-text); } .footer__base { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: .8438rem; color: var(--ink-faint); } @media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } } /* ---------- Scroll reveal (IntersectionObserver driven) ------------------ */ .reveal { opacity: 0; transform: translateY(22px); } .reveal[data-seen='true'] { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* Hero entry: a delay cascade, no library needed. */ @media (prefers-reduced-motion: no-preference) { .enter { opacity: 0; transform: translateY(18px); animation: enter .9s var(--ease) forwards; animation-delay: var(--d, 0ms); } @keyframes enter { to { opacity: 1; transform: none; } } }