/* ================================================================= PROPIO FORMENTERA — style.css Tokens (light default + dark) · components · i18n (4 lang) · html.js reveal gating · reduced-motion full render · responsive ================================================================= */ /* ---------- TOKENS ---------- */ :root { /* DEFAULT — Formentera aqua (light turquoise) */ --bg: #D3EEEA; --surface: #E8F6F3; --surface-2: #C2E6E0; --border: #B3DDD6; --accent: #A8472F; /* deep terracotta — AA as text on aqua (4.8:1) */ --accent-bright: #19B3AA; /* turquoise — glow/decor only, never under text */ --accent-deep: #A8472F; /* button/CTA bg, white text, AA in BOTH themes (5.8:1) */ --btn-fg: #ffffff; --accent-2: #0F756F; /* sea-teal (secondary, AA 4.5:1) */ --sun: #E8A33D; /* ochre sun — decorative highlights only */ --danger: #B5392B; /* form error text (AA) */ --text: #143E40; /* deep teal ink */ --text-dim: #46696A; /* muted teal (AA 4.9:1 on bg) */ --shadow: 0 14px 34px -16px rgba(20,62,64,.18); --shadow-lg: 0 30px 70px -24px rgba(20,62,64,.26); --map-filter: saturate(1.1) hue-rotate(-6deg); /* Type */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Nunito Sans', system-ui, sans-serif; --text-xs: .64rem; --text-sm: .8rem; --text-base: 1rem; --text-md: 1.25rem; --text-lg: 1.563rem;--text-xl: 1.953rem; --text-2xl: 2.441rem; --text-3xl: 3.052rem; /* Space (4px base) */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; /* Radius */ --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px; /* z-index scale */ --z-top:40; --z-progress:55; --z-cookie:80; --z-menu:90; --z-nav:100; --z-pre:120; --nav-h: 72px; --ease: cubic-bezier(.22,.61,.36,1); } /* ALT — warm sand (toggle; on so it restores pre-paint) */ html.theme-dark { --bg: #FBF4E9; --surface: #FFFCF5; --surface-2: #F3E9D7; --border: #E7D9C2; --accent: #B24A31; /* terracotta clay — AA on sand (4.9:1) */ --accent-bright: #E2724E; /* warm coral — decor/glow only */ --accent-2: #0F756F; /* sea-teal */ --sun: #E8A33D; --danger: #B5392B; --text: #2A2018; /* warm ink */ --text-dim: #6B5D4F; --shadow: 0 14px 34px -16px rgba(70,46,26,.22); --shadow-lg: 0 30px 70px -24px rgba(70,46,26,.34); --map-filter: saturate(1.06) sepia(.06); color-scheme: light; } /* ---------- RESET / BASE ---------- */ *,*::before,*::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } /* no blue tap flash; controlled press feedback instead (native feel on touch) */ a, button, summary, .lang-btn, .pin__card, .snap__card, .icon-btn { -webkit-tap-highlight-color: transparent; } /* native smooth-scroll OFF while Lenis runs (RULE 15) */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .4s var(--ease), color .4s var(--ease); } h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; } img,svg,iframe { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } .container { width: min(1180px, 92vw); margin-inline: auto; } .container--narrow { width: min(760px, 92vw); } /* focus-visible everywhere */ :where(a,button,summary,input,textarea,.lang-btn):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } /* ---------- i18n (4 languages) — keyed on , set pre-paint. Specificity html[lang=x] body [data-y] = (0,2,2) outranks component rules like .footer a (0,1,1). RULE 11 / BUG-008. ---------- */ html body [data-en], html body [data-it], html body [data-de] { display: none; } html[lang="en"] body [data-es], html[lang="en"] body [data-it], html[lang="en"] body [data-de] { display: none; } html[lang="en"] body [data-en] { display: revert; } html[lang="it"] body [data-es], html[lang="it"] body [data-en], html[lang="it"] body [data-de] { display: none; } html[lang="it"] body [data-it] { display: revert; } html[lang="de"] body [data-es], html[lang="de"] body [data-en], html[lang="de"] body [data-it] { display: none; } html[lang="de"] body [data-de] { display: revert; } /* ---------- ANIMATION GATING (html.js only; reduced-motion safe) ---------- */ html.js .reveal { opacity: 0; transform: translateY(38px); } html.js .reveal-line { display: block; overflow: hidden; } html.js .reveal-line > * { display: inline-block; transform: translateY(110%); } /* belt & braces: once entrance done, lock final (BUG-009) */ body.anim-done .reveal-line > * { transform: none; } /* let the hand-drawn underline escape the line mask after entrance */ body.anim-done .reveal-line { overflow: visible; } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal, .reveal-line > * { opacity: 1 !important; transform: none !important; } } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 14px 26px; border-radius: var(--r-pill); border: 1.5px solid transparent; font-weight: 700; font-size: var(--text-sm); letter-spacing: .02em; line-height: 1.2; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .btn--sm { padding: 9px 18px; font-size: var(--text-xs); } .btn--primary { background: var(--accent-deep); color: var(--btn-fg); box-shadow: 0 8px 24px -10px var(--accent-deep); } .btn--primary:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -10px var(--accent-deep); } .btn--ghost { border-color: var(--border); color: var(--text); background: transparent; } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .btn--whatsapp { background: #0e7a4e; color: #fff; border-color: transparent; box-shadow: 0 8px 24px -10px #0e7a4e; } .btn--whatsapp:hover { background: #0b6e45; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -10px #0b6e45; } .btn--whatsapp svg { width: 20px; height: 20px; } .btn.is-disabled { opacity: .5; pointer-events: none; } /* tactile press feedback (mobile/touch where hover doesn't exist) */ .btn:active { transform: translateY(0) scale(.97); } .icon-btn:active, .lang-btn:active { transform: scale(.9); } .pin__card:active, .snap__card:active { transform: rotate(0) scale(.98); box-shadow: var(--shadow); } .faq__item summary:active { color: var(--accent); } /* gradient accent word — sea to terracotta (AA ≥4.3:1 at both stops, both themes) */ .grad { position: relative; color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(100deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; } /* hand-drawn underline under the hero word */ .grad::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.12em; height: .16em; background: no-repeat center/100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 60 2, 110 14, 160 7 S 250 2, 297 8' fill='none' stroke='%23E8A33D' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"); opacity: .9; } /* ---------- PILL / BADGE ---------- */ .pill { display: inline-flex; align-items: center; gap: var(--s2); padding: 7px 16px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); font-size: var(--text-sm); color: var(--text-dim); font-weight: 600; } .pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .badge { display: inline-flex; align-items: center; gap: var(--s2); padding: 8px 16px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--text-sm); border: 1px solid var(--border); background: var(--surface); } .badge__dot { width: 9px; height: 9px; border-radius: 50%; } .badge--open .badge__dot { background: #22b36b; box-shadow: 0 0 0 0 rgba(34,179,107,.5); animation: pulse 2s infinite; } .badge--open { color: #136f46; } /* AA ≥5:1 on both theme surfaces */ .badge--closed .badge__dot { background: var(--danger); } .badge--closed { color: var(--danger); } @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(34,179,107,.5)} 70%{box-shadow:0 0 0 8px rgba(34,179,107,0)} 100%{box-shadow:0 0 0 0 rgba(34,179,107,0)} } /* ---------- NAV ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); height: var(--nav-h); display: flex; align-items: center; transition: background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s; } .nav.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--border); } .nav__inner { width: min(1180px,94vw); margin-inline: auto; display: flex; align-items: center; gap: var(--s4); } .nav__logo { flex: 1; display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; letter-spacing: .01em; white-space: nowrap; } .nav__logo-img { width: 40px; height: 40px; flex: none; border-radius: 50%; } .nav__logo-sub { color: var(--accent); } .nav__links { flex: 0 auto; display: flex; gap: var(--s4); justify-content: center; } .nav__links a { font-size: var(--text-sm); font-weight: 600; color: var(--text-dim); position: relative; padding: 4px 0; transition: color .2s; } .nav__links a::after { content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0; background: var(--accent); transition: width .25s var(--ease); } .nav__links a:hover, .nav__links a.active { color: var(--text); } .nav__links a.active::after, .nav__links a:hover::after { width: 100%; } .nav__actions { flex: 1; display: flex; align-items: center; gap: var(--s2); justify-content: flex-end; } .lang-switch { display: inline-flex; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; } .lang-btn { padding: 13px 13px; font-size: var(--text-xs); font-weight: 700; color: var(--text-dim); background: transparent; border: 0; transition: background .2s, color .2s; } .lang-btn[aria-pressed="true"] { background: var(--accent); color: #fff; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: border-color .2s, color .2s, transform .2s; } .icon-btn:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle .icon-sun { display: none; } /* default = aqua → show the wave */ html.theme-dark .theme-toggle .icon-moon { display: none; } html.theme-dark .theme-toggle .icon-sun { display: block; } /* warm alt → show the sun */ .burger { display: none; flex-direction: column; gap: 4px; } .burger span { width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s, opacity .3s; } .burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); } /* mobile menu (full screen, premium) */ .mobile-menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--bg); transform: translateY(-100%); transition: transform .5s var(--ease); overflow-y: auto; -webkit-overflow-scrolling: touch; visibility: hidden; } .mobile-menu.open { transform: translateY(0); visibility: visible; } .mobile-menu__inner { min-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: var(--s6); padding: calc(var(--nav-h) + var(--s5)) var(--s6) var(--s7); max-width: 460px; margin-inline: auto; } .mobile-menu__links { display: flex; flex-direction: column; } .mobile-menu__links a { display: flex; align-items: baseline; gap: var(--s4); color: var(--text); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; line-height: 1.1; padding: var(--s4) 0; border-bottom: 1px solid var(--border); opacity: 0; transform: translateX(-18px); transition: color .2s, opacity .55s var(--ease), transform .55s var(--ease); } .mobile-menu.open .mobile-menu__links a { opacity: 1; transform: none; } .mobile-menu.open .mobile-menu__links a:nth-child(1) { transition-delay: .10s, .10s, .10s; } .mobile-menu.open .mobile-menu__links a:nth-child(2) { transition-delay: .16s, .16s, .16s; } .mobile-menu.open .mobile-menu__links a:nth-child(3) { transition-delay: .22s, .22s, .22s; } .mobile-menu.open .mobile-menu__links a:nth-child(4) { transition-delay: .28s, .28s, .28s; } .mobile-menu.open .mobile-menu__links a:nth-child(5) { transition-delay: .34s, .34s, .34s; } .mobile-menu.open .mobile-menu__links a:nth-child(6) { transition-delay: .40s, .40s, .40s; } .mobile-menu__links a:hover, .mobile-menu__links a:active { color: var(--accent); } .mm-i { font-family: var(--font-display); font-style: italic; font-size: var(--text-sm); color: var(--accent-2); min-width: 2.4ch; } .mobile-menu__tools { display: flex; flex-direction: column; align-items: center; gap: var(--s3); opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease) .42s, transform .5s var(--ease) .42s; } .mobile-menu.open .mobile-menu__tools { opacity: 1; transform: none; } .mobile-menu__toolslabel { font-family: var(--font-display); font-style: italic; color: var(--text-dim); font-size: var(--text-sm); } .lang-switch--menu { overflow: visible; border: 0; gap: var(--s2); } .lang-switch--menu .lang-btn { padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--r-pill); } .lang-switch--menu .lang-btn[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); } .mobile-menu__cta { width: 100%; padding-block: 16px; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease) .5s, transform .5s var(--ease) .5s; } .mobile-menu.open .mobile-menu__cta { opacity: 1; transform: none; } .mobile-menu__foot { text-align: center; font-family: var(--font-display); font-style: italic; color: var(--text-dim); font-size: var(--text-sm); } /* ---------- SECTIONS ---------- */ .section { padding: var(--s10) 0; } section[id] { scroll-margin-top: 96px; } .section--alt { background: var(--surface-2); } .section__head { max-width: 640px; margin-bottom: var(--s7); } .section__title { font-size: var(--text-2xl); } .section__lead { color: var(--text-dim); margin-top: var(--s3); font-size: var(--text-md); } .section__note { color: var(--text-dim); font-size: var(--text-sm); margin-top: var(--s5); } /* ---------- HERO ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + var(--s8)) 0 var(--s8); overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -1; } .hero__orb { position: absolute; border-radius: 50%; filter: blur(72px); } /* warm low sun */ .hero__orb--1 { width: 50vw; height: 50vw; max-width: 640px; max-height: 640px; top: -10%; right: -6%; opacity: .8; background: radial-gradient(circle at 50% 50%, var(--sun), var(--accent-bright) 45%, transparent 72%); } /* soft sea */ .hero__orb--2 { width: 40vw; height: 40vw; max-width: 540px; max-height: 540px; bottom: -18%; left: -12%; opacity: .35; background: radial-gradient(circle at 50% 50%, var(--accent-2), transparent 70%); } /* real logo as a floating brand stamp (top-right of hero) */ .hero__stamp { position: absolute; top: calc(var(--nav-h) + 18px); right: max(5vw, 18px); width: clamp(94px, 12vw, 156px); height: auto; z-index: 2; transform: rotate(7deg); filter: drop-shadow(0 12px 26px rgba(70,46,26,.26)); } html.js .hero__stamp { animation: stampIn 1s var(--ease) .3s both; } @keyframes stampIn { from { opacity: 0; transform: rotate(-6deg) scale(.7); } to { opacity: 1; transform: rotate(7deg) scale(1); } } /* content aligns to the page's real left edge (like the nav), not a centered 880px box */ .hero__inner { max-width: none; } .hero__pill { margin-bottom: var(--s5); } .hero__title, .hero__sub, .hero__cta, .hero__badge { max-width: 42rem; } .hero__title { font-size: clamp(2.6rem, 8vw, 5rem); font-weight: 600; letter-spacing: -.01em; } .hero__sub { font-size: var(--text-md); color: var(--text-dim); max-width: 620px; margin: var(--s5) 0 var(--s6); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); } .hero__badge { min-height: 38px; } /* taped polaroid pile, floating right of the hero copy (desktop only) */ .hero__snaps { position: absolute; right: max(4vw, 30px); bottom: 7%; z-index: 1; width: clamp(300px, 30vw, 400px); height: clamp(330px, 33vw, 440px); } .hero__snap { position: absolute; margin: 0; width: clamp(190px, 19vw, 258px); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 11px 11px 11px; box-shadow: var(--shadow-lg); } .hero__snap picture { display: block; aspect-ratio: 5/4; overflow: hidden; border-radius: 2px; } .hero__snap img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__snap figcaption { font-family: var(--font-display); font-style: italic; font-size: var(--text-sm); color: var(--text-dim); text-align: center; padding-top: 8px; } .hero__snap .snap__tape { position: absolute; top: -10px; left: 50%; width: 78px; height: 22px; transform: translateX(-50%) rotate(-4deg); background: color-mix(in srgb, var(--sun) 55%, transparent); border-radius: 2px; } .hero__snap--a { top: 0; left: 0; transform: rotate(-5deg); z-index: 1; } .hero__snap--b { bottom: 0; right: 0; transform: rotate(4deg); z-index: 2; } html.js .hero__snap--a { animation: snapInA 1s var(--ease) .5s both; } html.js .hero__snap--b { animation: snapInB 1s var(--ease) .66s both; } @keyframes snapInA { from { opacity: 0; transform: rotate(3deg) translateY(24px); } to { opacity: 1; transform: rotate(-5deg) translateY(0); } } @keyframes snapInB { from { opacity: 0; transform: rotate(11deg) translateY(28px); } to { opacity: 1; transform: rotate(4deg) translateY(0); } } /* only when there's honest room for it — never crowd the copy or a short screen */ @media (max-width: 1260px), (max-height: 640px) { .hero__snaps { display: none; } } /* ---------- FILM GRAIN (warmth; kills the flat "AI" look) ---------- */ .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; } /* ---------- CLIP-PATH IMAGE REVEAL (awwwards) ---------- */ .clip-reveal { overflow: hidden; } html.js .clip-reveal { clip-path: inset(100% 0 0 0); } html.js .clip-reveal > * { transform: scale(1.25); transform-origin: center; } @media (prefers-reduced-motion: reduce) { .clip-reveal { clip-path: none !important; } .clip-reveal > * { transform: none !important; } } /* ---------- ORGANIC CURVED DIVIDER (replaces the marquee) ---------- */ .divider { display: block; width: 100%; height: clamp(48px, 7vw, 110px); color: var(--surface-2); margin-top: -1px; } .divider svg { display: block; width: 100%; height: 100%; } .divider--flip { transform: scaleY(-1); } /* ---------- KICKER (editorial, handwritten-feel via Fraunces italic) ---------- */ .kicker { display: inline-block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-md); color: var(--accent); margin-bottom: var(--s2); } .kicker::before { content: '✿ '; content: '✿ ' / ''; color: var(--sun); font-style: normal; } /* ---------- PRODUCTS PINBOARD (polaroid frames — not a grid) ---------- */ .pinboard { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s7) var(--s5); align-items: start; margin-top: var(--s6); } .pin { grid-column: span 4; } .pin:nth-child(2) { margin-top: var(--s8); } .pin:nth-child(3) { margin-top: var(--s4); } .pin:nth-child(5) { margin-top: var(--s8); } .pin:nth-child(6) { margin-top: var(--s4); } .pin__card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 14px 14px 18px; box-shadow: var(--shadow); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .pin:nth-child(odd) .pin__card { transform: rotate(-2deg); } .pin:nth-child(even) .pin__card { transform: rotate(1.6deg); } .pin:nth-child(3n) .pin__card { transform: rotate(-1deg); } .pin__card:hover { transform: rotate(0) translateY(-6px); box-shadow: var(--shadow-lg); z-index: 2; } .pin__tape { position: absolute; top: -11px; left: 50%; width: 86px; height: 24px; transform: translateX(-50%) rotate(-4deg); background: color-mix(in srgb, var(--sun) 55%, transparent); border-radius: 2px; } .pin:nth-child(even) .pin__tape { transform: translateX(-50%) rotate(5deg); } .pin__photo { aspect-ratio: 4/5; border-radius: 2px; background: var(--surface-2); border: 1px dashed var(--border); display: grid; place-items: center; color: var(--text-dim); } .pin__photo svg { width: 32px; height: 32px; opacity: .5; } .pin__label { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-md); margin: 16px 2px 4px; } .pin__note { font-size: var(--text-sm); color: var(--text-dim); margin: 0 2px; line-height: 1.5; } /* ---------- STORY ---------- */ .story { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s8); align-items: center; } .story__p { color: var(--text-dim); font-size: var(--text-md); margin-top: var(--s4); } .story__p:first-of-type { margin-top: var(--s5); } /* ---------- PLACEHOLDERS ---------- */ .placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); min-height: 220px; border: 1.5px dashed var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text-dim); font-size: var(--text-sm); text-align: center; } .placeholder svg { width: 34px; height: 34px; opacity: .6; } .placeholder--portrait { aspect-ratio: 4/5; min-height: 360px; } /* ---------- QUOTE ---------- */ .quote { padding: var(--s9) 0; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--bg)), var(--bg)); } .quote__text { font-family: var(--font-display); font-size: clamp(1.5rem, 3.5vw, var(--text-2xl)); font-weight: 500; line-height: 1.3; max-width: 900px; } /* ---------- VISIT / HOURS / MAP ---------- */ .visit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; } .visit__address { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; color: var(--text); margin: var(--s2) 0 var(--s4); } .visit__address svg { width: 20px; height: 20px; color: var(--accent); } .visit__address:hover { color: var(--accent); } .visit__badge { margin-bottom: var(--s5); } /* hanging shop sign holding the hours */ .sign { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s7) var(--s6) var(--s5); box-shadow: var(--shadow); transform: rotate(-1.3deg); margin: var(--s4) 0 var(--s6); } .sign::before { content: ''; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 34px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--accent-2) 45%, transparent); } .sign__nail { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent-2); } .visit__hours-title { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); margin-bottom: var(--s2); } .visit__hours-note { color: var(--text-dim); font-size: var(--text-sm); margin-bottom: var(--s4); } .hours { width: 100%; border-collapse: collapse; margin-bottom: var(--s5); } .hours th, .hours td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); } .hours th { font-weight: 700; color: var(--text-dim); width: 64px; } .hours tr.today th, .hours tr.today td { color: var(--accent); font-weight: 700; } .visit__map { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); } .visit__map iframe { width: 100%; height: 460px; border: 0; filter: var(--map-filter); } /* map loads only on tap — no Google cookies before that */ .map-lazy { width: 100%; height: 460px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); text-align: center; padding: var(--s6); background: var(--surface-2); border: 0; font: inherit; color: var(--text); } .map-lazy svg { width: 42px; height: 42px; color: var(--accent); } .map-lazy p { color: var(--text-dim); font-size: var(--text-sm); max-width: 38ch; } .map-lazy .btn { pointer-events: none; } /* whole tile is the button */ .map-lazy:hover .btn { transform: translateY(-2px); } /* ---------- REVIEWS ---------- */ .reviews-empty { display: flex; flex-direction: column; align-items: center; gap: var(--s4); text-align: center; max-width: 560px; margin-inline: auto; padding: var(--s8) var(--s5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); } .reviews-empty svg { width: 44px; height: 44px; color: var(--accent); } .reviews-empty p { color: var(--text-dim); } .reviews-cta { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; } /* ---------- GALLERY: scattered taped photo wall ---------- */ .wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s7) var(--s5); align-items: start; margin-top: var(--s6); } .snap { grid-column: span 4; margin: 0; } .snap:nth-child(2) { margin-top: var(--s8); } .snap:nth-child(4) { margin-top: var(--s4); } .snap:nth-child(6) { margin-top: var(--s8); } .snap__card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 12px 12px 14px; box-shadow: var(--shadow); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .snap:nth-child(3n+1) .snap__card { transform: rotate(-2.5deg); } .snap:nth-child(3n+2) .snap__card { transform: rotate(1.8deg); } .snap:nth-child(3n) .snap__card { transform: rotate(-1.2deg); } .snap__card:hover { transform: rotate(0) translateY(-6px) scale(1.02); box-shadow: var(--shadow-lg); z-index: 2; } .snap__tape { position: absolute; top: -10px; left: 50%; width: 76px; height: 22px; transform: translateX(-50%) rotate(4deg); background: color-mix(in srgb, var(--accent-2) 42%, transparent); border-radius: 2px; } .snap:nth-child(even) .snap__tape { transform: translateX(-50%) rotate(-5deg); background: color-mix(in srgb, var(--sun) 50%, transparent); } .snap__photo { border-radius: 2px; background: var(--surface-2); border: 1px dashed var(--border); display: grid; place-items: center; color: var(--text-dim); } .snap__photo svg { width: 30px; height: 30px; opacity: .5; } /* mixed snapshot ratios so it reads like a real wall, not a grid */ .snap:nth-child(3n+1) .snap__photo { aspect-ratio: 4/5; } .snap:nth-child(3n+2) .snap__photo { aspect-ratio: 1/1; } .snap:nth-child(3n) .snap__photo { aspect-ratio: 5/4; } .snap__cap { font-family: var(--font-display); font-style: italic; font-size: var(--text-sm); color: var(--text-dim); text-align: center; margin-top: 10px; } /* real photos inside pin / snap frames + story */ .pin__photo--img, .snap__photo--img { border: none; overflow: hidden; } .pin__photo--img picture, .snap__photo--img picture { width: 100%; height: 100%; display: block; } .pin__photo--img img, .snap__photo--img img { width: 100%; height: 100%; object-fit: cover; display: block; } .story__photo { display: block; } .story__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); } /* ---------- FAQ ---------- */ .faq { display: flex; flex-direction: column; gap: var(--s3); } .faq__item { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; } .faq__item summary { list-style: none; cursor: pointer; padding: var(--s4) var(--s5); font-weight: 700; font-family: var(--font-display); font-size: var(--text-md); display: flex; justify-content: space-between; align-items: center; gap: var(--s4); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: '+'; content: '+' / ''; color: var(--accent); font-size: 1.4em; transition: transform .25s; } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__a { padding: 0 var(--s5) var(--s5); color: var(--text-dim); } /* ---------- CTA BAND ---------- */ .cta-band { padding: var(--s9) 0; background: var(--accent-deep); color: #fff; } .cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); } .cta-band__text { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; } .cta-band .btn--primary { background: #fff; color: var(--accent-deep); box-shadow: none; } .cta-band .btn--primary:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(0,0,0,.3); } /* ---------- FORM ---------- */ .form { display: flex; flex-direction: column; gap: var(--s4); max-width: 520px; } .form__row { display: flex; flex-direction: column; gap: var(--s2); } .form label { font-size: var(--text-sm); font-weight: 700; color: var(--text-dim); } .form input, .form textarea { padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; transition: border-color .2s, box-shadow .2s; } .form input:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } .form textarea { resize: vertical; } .form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form__submit { align-self: flex-start; } .form__submit[disabled] { opacity: .65; pointer-events: none; } .form__status { font-size: var(--text-sm); font-weight: 700; min-height: 1.4em; } .form__status.ok { color: #136f46; } .form__status.err { color: var(--danger); } .form__status a { color: var(--accent); text-decoration: underline; } .form__legal { font-size: var(--text-xs); color: var(--text-dim); } .form__legal a { text-decoration: underline; } /* direct channels first — a stall answers WhatsApp, not email */ .contact-direct { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s7); } .contact-alt { font-family: var(--font-display); font-style: italic; color: var(--text-dim); font-size: var(--text-md); margin-bottom: var(--s4); } /* ---------- LEGAL PAGE ---------- */ .legal h2 { font-size: var(--text-lg); margin: var(--s7) 0 var(--s3); } .legal p, .legal li { color: var(--text-dim); font-size: var(--text-sm); line-height: 1.7; } .legal p { margin-bottom: var(--s3); } .legal ul { padding-left: 1.3em; margin-bottom: var(--s3); } .legal .back { display: inline-flex; margin-top: var(--s6); } /* ---------- FOOTER ---------- */ .footer { border-top: 1px solid var(--border); background: var(--surface); padding-top: var(--s8); } .footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s6); padding-bottom: var(--s7); } .footer__tag { color: var(--text-dim); margin-top: var(--s3); max-width: 320px; } .footer__ig { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s4); font-weight: 700; color: var(--accent); } .footer__ig svg { width: 20px; height: 20px; } .footer__ig:hover { color: var(--accent-2); } .footer__col h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: var(--s3); } .footer__col a { display: block; padding: 5px 0; color: var(--text); font-size: var(--text-sm); } .footer__col a:hover { color: var(--accent); } .footer__bottom { border-top: 1px solid var(--border); padding: var(--s4) 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); width: min(1180px,92vw); margin-inline: auto; font-size: var(--text-sm); color: var(--text-dim); } .footer__credit a { color: var(--accent); font-weight: 700; } /* ---------- UTILITIES: skip, progress, scroll-top, preloader, cookie ---------- */ .skip-link { position: fixed; top: -100px; left: var(--s4); z-index: var(--z-pre); background: var(--accent); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); transition: top .2s; } .skip-link:focus { top: var(--s3); } .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); z-index: var(--z-progress); } .scroll-top { position: fixed; right: var(--s5); bottom: var(--s5); z-index: var(--z-top); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .3s, transform .3s, border-color .2s, color .2s; box-shadow: var(--shadow); } .scroll-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-top:hover { border-color: var(--accent); color: var(--accent); } .scroll-top svg { width: 20px; height: 20px; } .preloader { position: fixed; inset: 0; z-index: var(--z-pre); background: var(--bg); display: grid; place-items: center; transition: opacity .6s var(--ease), visibility .6s; } .preloader.done { opacity: 0; visibility: hidden; } .preloader__mark { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--accent); letter-spacing: .02em; } html:not(.js) .preloader { display: none; } /* no-JS: no preloader trap */ /* ---------- RESPONSIVE ---------- */ /* Collapse the (4-language) nav to the burger before it crowds — BUG-005/015 */ @media (max-width: 1000px) { .nav__links, .nav__cta { display: none; } .nav__actions .lang-switch { display: none; } /* language lives in the menu on mobile */ .burger { display: inline-flex; } .nav__actions { gap: var(--s3); } } @media (max-width: 900px) { .pinboard { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s5); } .pin { grid-column: span 1; margin-top: 0 !important; } .pin:nth-child(even) { margin-top: var(--s6) !important; } /* keep gentle stagger */ .story, .visit { grid-template-columns: 1fr; gap: var(--s6); } .footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { :root { --text-2xl: 1.953rem; --text-3xl: 2.441rem; --text-xl: 1.563rem; } .section { padding: var(--s9) 0; } .wall { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s5); } .snap { grid-column: span 1; } .cta-band__inner { flex-direction: column; align-items: flex-start; } /* thumb-friendly hero CTAs */ .hero__cta { flex-direction: column; align-items: stretch; gap: var(--s3); } .hero__cta .btn { width: 100%; padding-block: 16px; } .hero { min-height: auto; padding-top: calc(var(--nav-h) + var(--s7)); } .visit__map iframe, .map-lazy { height: 320px; } } @media (max-width: 640px) { .hero__stamp { display: none; } /* nav badge already carries the logo — no duplicate in first viewport */ } @media (max-width: 480px) { .pinboard { grid-template-columns: 1fr; } .pin, .pin:nth-child(even) { max-width: 340px; margin-inline: auto; margin-top: 0 !important; } .wall { grid-template-columns: 1fr; } .snap, .snap:nth-child(even) { max-width: 320px; margin-inline: auto; margin-top: 0 !important; } .placeholder--wide { grid-column: span 1; } .footer__inner { grid-template-columns: 1fr; } .nav .nav__logo-txt { display: none; } /* badge alone is the logo on small screens (BUG-015) */ .footer .nav__logo-txt { display: inline; } }