/* ================================================================= ARIE DRY — Tattoo Portfolio Hand-written CSS. No framework runtime. Tuned for fast paint on slow connections. Bold editorial base + neo-traditional color pops. ================================================================= */ /* ---- Design tokens ------------------------------------------------ */ :root { /* Harmonious palette — pink-led, berry warm accent, forest-green base. (Studio cherry oak reinterpreted as a deep berry so it sits with the pink.) */ --ink: #121510; /* dark green-charcoal base */ --ink-2: #1B211B; /* raised panel */ --green: #25332A; /* dark forest green */ --green-deep: #18211B; /* deepest green */ --oak: #8A2D4A; /* deep berry/wine — warm accent */ --oak-bright: #AC3A5E; /* brighter berry */ --bone: #F4ECE2; /* warm cream text */ --bone-dim: #B8B1A4; --bone-faint: #716C62; /* Neon pops pulled from the artwork */ --pop: #FF4D8C; /* hot pink (CTA) */ --pop-ink: #2E0A18; /* dark plum text on pink */ --pop-2: #2BD0C0; /* bright teal (cool accent/glow) */ --line: rgba(244,236,226,0.10); --line-strong:rgba(244,236,226,0.22); /* Type */ --font-display: "Archivo", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-he: "Heebo", system-ui, sans-serif; /* Motion */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur: 320ms; --maxw: 1320px; --gutter: clamp(18px, 5vw, 64px); } /* When Hebrew is active, swap display/body to a strong Hebrew face */ html[lang="he"] { --font-display: "Heebo", system-ui, sans-serif; --font-body: "Heebo", system-ui, sans-serif; } /* ---- Reset -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); background: var(--ink); color: var(--bone); line-height: 1.6; font-size: 1.0625rem; /* 17px at default root — scales with a11y font control */ overflow-x: clip; /* clip (not hidden) so the window stays the scroller — needed for scroll effects */ min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } :focus-visible { outline: 3px solid var(--pop-2); outline-offset: 3px; border-radius: 2px; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } /* Hide visually but keep for screen readers */ .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; } /* Language visibility: show .lang-he OR .lang-en depending on */ html[lang="en"] .lang-he { display: none !important; } html[lang="he"] .lang-en { display: none !important; } /* ---- Type scale --------------------------------------------------- */ .eyebrow { font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-dim); } html[lang="he"] .eyebrow { letter-spacing: .08em; } .display { font-family: var(--font-display); font-weight: 900; line-height: .92; letter-spacing: -.02em; text-transform: uppercase; } html[lang="he"] .display { letter-spacing: -.01em; line-height: 1.0; } /* ================================================================= NAV ================================================================= */ .nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease); border-block-end: 1px solid transparent; } .nav.scrolled { background: rgba(20,19,15,0.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-block-end-color: var(--line); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; } .brand { font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; letter-spacing: -.01em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .5ch; white-space: nowrap; direction: ltr; /* keep Latin wordmark readable in RTL */ } .brand .dot { color: var(--pop); } .nav__links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); } .nav__links a { font-size: .9rem; font-weight: 500; letter-spacing: .02em; position: relative; padding: 6px 2px; color: var(--bone-dim); transition: color 200ms var(--ease); } .nav__links a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 2px; background: var(--pop); transform: scaleX(0); transform-origin: inset-inline-start; transition: transform 260ms var(--ease); } .nav__links a:hover { color: var(--bone); } .nav__links a:hover::after { transform: scaleX(1); } .nav__actions { display: flex; align-items: center; gap: 14px; } .lang-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; font-size: .76rem; font-weight: 600; letter-spacing: .04em; } .lang-toggle button { padding: 7px 12px; color: var(--bone-dim); transition: background 200ms, color 200ms; } .lang-toggle button[aria-pressed="true"] { background: var(--bone); color: var(--ink); } .btn { display: inline-flex; align-items: center; gap: .6ch; font-weight: 600; letter-spacing: .02em; font-size: .92rem; padding: 13px 22px; border-radius: 999px; background: var(--pop); color: var(--pop-ink); transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 200ms; will-change: transform; } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(255,77,140,.55); background: #ff6aa0; } .btn:active { transform: translateY(0); } .btn--ghost { background: transparent; color: var(--bone); border: 1px solid var(--line-strong); } .btn--ghost:hover { background: rgba(243,237,225,.06); box-shadow: none; border-color: var(--bone); } .btn--lg { padding: 17px 30px; font-size: 1rem; } .nav__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; } .nav__burger span, .nav__burger span::before, .nav__burger span::after { content: ""; display: block; width: 24px; height: 2px; background: var(--bone); transition: transform 260ms var(--ease), opacity 200ms; } .nav__burger span { position: relative; } .nav__burger span::before { position: absolute; inset-block-start: -7px; inset-inline-start: 0; } .nav__burger span::after { position: absolute; inset-block-start: 7px; inset-inline-start: 0; } body.menu-open .nav__burger span { background: transparent; } body.menu-open .nav__burger span::before { transform: translateY(7px) rotate(45deg); } body.menu-open .nav__burger span::after { transform: translateY(-7px) rotate(-45deg); } /* Mobile overlay menu */ .mobile-menu { position: fixed; inset: 0; z-index: 90; background: var(--green-deep); display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: var(--gutter); transform: translateY(-100%); transition: transform 420ms var(--ease-out); visibility: hidden; } body.menu-open .mobile-menu { transform: translateY(0); visibility: visible; } .mobile-menu a { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 9vw, 3.4rem); line-height: 1.05; color: var(--bone); border-block-end: 1px solid var(--line); padding-block: 14px; transition: color 200ms, padding-inline-start 260ms var(--ease); } .mobile-menu a:hover { color: var(--pop); padding-inline-start: 12px; } /* Collapse nav to hamburger on small screens */ @media (max-width: 820px) { .nav__links { display: none; } .nav__book { display: none; } .nav__burger { display: inline-flex; } } /* ================================================================= HERO ================================================================= */ .hero { position: relative; min-height: 100svh; display: flex; padding-block: 88px 30px; overflow: hidden; background: radial-gradient(120% 90% at 85% 0%, rgba(37,51,42,.55), transparent 60%), radial-gradient(90% 80% at 0% 100%, rgba(138,45,74,.38), transparent 55%), var(--ink); } .hero__inner { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: clamp(24px, 4vh, 52px); justify-content: center; } /* Wrapper kept for structure; the hero no longer pins — the video morphs on its own after load and the hero rests as a normal full-height front page. */ .hero-pin { position: relative; } .hero__eyebrow { display: flex; align-items: center; gap: 12px; } .hero__eyebrow .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--pop-2); box-shadow: 0 0 0 0 rgba(43,208,192,.7); animation: pulse 2.4s infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(43,208,192,.6)} 70%{box-shadow:0 0 0 12px rgba(43,208,192,0)} 100%{box-shadow:0 0 0 0 rgba(43,208,192,0)} } /* Stage: left intro · center video medallion · right wordmark */ .hero__stage { /* minmax(0,1fr) keeps the two side columns equal so the video/medallion stays centered — a plain 1fr lets the big wordmark blow its column wider and push the center off to one side. */ display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: clamp(16px, 3vw, 40px); } .hero__col--left { max-width: 34ch; } .hero__col--right { display: flex; justify-content: flex-end; } html[dir="rtl"] .hero__col--right { justify-content: flex-start; } .hero__lead { color: var(--bone-dim); font-size: clamp(1rem, 1.3vw, 1.14rem); } .hero__lead strong { color: var(--bone); font-weight: 600; } .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-block-start: 22px; } /* Center medallion + colored disc halo — grid-stacked so both stay concentric in RTL & LTR */ .hero__col--center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; } .hero__medwrap { position: relative; display: grid; place-items: center; } .hero__medwrap > * { grid-area: 1 / 1; } /* stack disc + medallion in one centered cell */ .hero__disc { z-index: 0; width: min(46vh, 440px, 88vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--pop), var(--oak) 80%); box-shadow: 0 0 100px -4px rgba(255,77,140,.5); opacity: 0; } .hero.in .hero__disc { animation: discIn .9s var(--ease-out) .2s forwards; } /* While the video is morphing, the halo tracks the shape — hidden behind the rectangle, fading in only as it rounds into the circle (JS drives --disc-op). */ .hero.is-morph .hero__disc { animation: none !important; opacity: var(--disc-op, 1); transition: none; } @keyframes discIn { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: 1; } } .hero__medallion { /* Centered on the medallion cell via left/top:50% + negative half-size margins — direction-agnostic, so it stays centered in this RTL page (plain margin:auto anchored to the right edge and pushed the big rectangle left). Sizing morphs rectangle → circle without reflowing the grid. --mw/--mh hold current size. */ position: absolute; left: 50%; top: 50%; z-index: 2; --mw: min(90vw, 720px); --mh: min(50vh, 460px); /* wide opening, height capped clear of the divider */ width: var(--mw); height: var(--mh); margin-left: calc(var(--mw) / -2); margin-top: calc(var(--mh) / -2); border-radius: 40px; overflow: hidden; opacity: 0; will-change: width, height, border-radius, margin; box-shadow: 0 0 0 6px rgba(18,21,16,.55), 0 34px 70px -22px rgba(0,0,0,.75); transition: width .9s var(--ease-out), height .9s var(--ease-out), margin-left .9s var(--ease-out), margin-top .9s var(--ease-out), border-radius .9s var(--ease-out); } /* Resting state: the circular medallion. */ .hero__medallion.is-round { --mw: min(40vh, 400px, 80vw); --mh: min(40vh, 400px, 80vw); border-radius: 50%; } /* Motion off: skip the intro, show the circle immediately. */ @media (prefers-reduced-motion: reduce) { .hero__medallion { --mw: min(40vh,400px,80vw); --mh: min(40vh,400px,80vw); border-radius: 50%; transition: none; } } html.a11y-no-motion .hero__medallion { --mw: min(40vh,400px,80vw); --mh: min(40vh,400px,80vw); border-radius: 50%; transition: none; } /* Desktop scroll-scrub: the side content (wordmark + intro/CTAs) stays hidden behind the large rectangle and reveals only as the video rounds into the circle. JS drives --reveal (0 → 1) over the second half of the morph. */ .hero.is-scrub .hero__col--left, .hero.is-scrub .hero__col--right { animation: none !important; opacity: var(--reveal, 1); transform: translateY(calc((1 - var(--reveal, 1)) * 22px)); transition: none; will-change: opacity, transform; } .hero.is-scrub .hero__title .line > span { animation: none !important; transform: none; } .hero__medcap { position: relative; z-index: 1; opacity: 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bone-faint); text-align: center; } html[lang="he"] .hero__medcap { letter-spacing: 0; } .hero.in .hero__medcap { animation: heroFadeUp .7s var(--ease-out) .9s forwards; } .hero__medcap .scrollhint { color: var(--pop-2); } .hero.in .hero__medallion { animation: medIn 1s var(--ease-out) .4s forwards; } @keyframes medIn { from { transform: translateY(28px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } } .hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 18% 62%; display: block; } /* Hero wordmark — Latin display face in both languages */ .hero__title { font-size: clamp(2.8rem, 8.5vw, 8rem); font-family: "Archivo", system-ui, sans-serif; line-height: .9; text-align: end; } html[dir="rtl"] .hero__title { text-align: start; } .hero__title .line { display: block; overflow: hidden; } .hero__title .line > span { display: block; transform: translateY(110%); } .hero.in .hero__title .line > span { animation: riseIn .9s var(--ease-out) .5s forwards; } .hero.in .hero__title .line:nth-child(2) > span { animation-delay: .59s; } .hero__title .accent { color: var(--pop); } @keyframes riseIn { to { transform: translateY(0); } } /* Left intro + bottom bar entrance */ .hero__col--left, .hero__bottom { opacity: 0; } .hero.in .hero__col--left { animation: heroFadeUp .7s var(--ease-out) .9s forwards; } .hero.in .hero__bottom { animation: heroFadeUp .7s var(--ease-out) 1.1s forwards; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* Bottom bar: social · location */ .hero__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-block-start: 1px solid var(--line); padding-block-start: clamp(16px, 2vh, 24px); } .hero__social { display: flex; gap: 16px; } .hero__social a { color: var(--bone-dim); transition: color 200ms, transform 200ms; } .hero__social a:hover { color: var(--pop); transform: translateY(-2px); } .hero__social svg { width: 20px; height: 20px; } .hero__location { font-size: .85rem; color: var(--bone-dim); letter-spacing: .04em; } html[lang="he"] .hero__location { letter-spacing: 0; } @media (max-width: 900px) { .hero__stage { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(22px, 4vh, 34px); } .hero__col--center { order: 1; } .hero__col--right { order: 2; justify-content: center; } .hero__title { text-align: center; } .hero__col--left { order: 3; max-width: 42ch; } .hero__cta { justify-content: center; } } /* ================================================================= MARQUEE ================================================================= */ .marquee { border-block: 1px solid var(--line); background: var(--oak); overflow: hidden; padding-block: 16px; white-space: nowrap; } .marquee__track { display: inline-flex; gap: 0; will-change: transform; animation: scroll 28s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__track span { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 2.4vw, 1.7rem); letter-spacing: .02em; color: var(--bone); padding-inline: 28px; display: inline-flex; align-items: center; gap: 28px; } .marquee__track span::after { content: "✦"; color: var(--pop); font-size: .8em; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } html[dir="rtl"] .marquee__track { animation-direction: reverse; } /* ================================================================= SECTION SCAFFOLD ================================================================= */ .section { padding-block: clamp(72px, 11vw, 150px); position: relative; } .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-block-end: clamp(36px, 6vw, 64px); } .section__title { font-size: clamp(2.2rem, 6.5vw, 5rem); max-width: 16ch; } .section__title .accent { color: var(--pop); } .section__num { font-family: var(--font-display); font-weight: 800; color: var(--bone-faint); font-size: .9rem; letter-spacing: .1em; } /* Reveal-on-scroll utility */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .reveal.in { opacity: 1; transform: none; } .reveal[data-delay] { transition-delay: calc(var(--d, 0) * 1ms); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } .hero__title .line > span { transform: none !important; animation: none !important; } .marquee__track { animation: none !important; } .hero__eyebrow .pulse { animation: none !important; } .hero__disc, .hero__medallion, .hero__col--left, .hero__bottom, .hero__medcap { opacity: 1 !important; transform: none !important; animation: none !important; } } /* Accessibility "pause motion" also settles the hero */ html.a11y-no-motion .hero__disc, html.a11y-no-motion .hero__medallion, html.a11y-no-motion .hero__col--left, html.a11y-no-motion .hero__bottom, html.a11y-no-motion .hero__medcap { opacity: 1 !important; transform: none !important; animation: none !important; } /* ================================================================= WORK GALLERY ================================================================= */ .filters { display: flex; gap: 10px; flex-wrap: wrap; } .filters button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .85rem; font-weight: 600; color: var(--bone-dim); transition: color 200ms, background 200ms, border-color 200ms; } .filters button[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); } .filters button:hover { color: var(--bone); border-color: var(--bone); } .gallery { columns: 3; column-gap: clamp(14px, 1.6vw, 22px); } @media (max-width: 1000px) { .gallery { columns: 2; } } @media (max-width: 560px) { .gallery { columns: 1; } } .card { break-inside: avoid; margin-block-end: clamp(14px, 1.6vw, 22px); position: relative; border-radius: 14px; overflow: hidden; background: var(--ink-2); cursor: pointer; display: block; width: 100%; text-align: start; transition: transform 360ms var(--ease-out), box-shadow 360ms var(--ease-out); } .card.hide { display: none; } .card:hover { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--pop-2), 0 24px 50px -18px rgba(43,208,192,.55); } .card__media { position: relative; aspect-ratio: var(--ar, 3/4); background-size: cover; background-position: center; } .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease), transform 600ms var(--ease-out); } .card__media img.loaded { opacity: 1; } .card:hover .card__media img { transform: scale(1.06); } .card__cap { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; background: linear-gradient(to top, rgba(15,14,11,.86), transparent); transform: translateY(8px); opacity: 0; transition: opacity 320ms var(--ease), transform 320ms var(--ease); } .card:hover .card__cap, .card:focus-visible .card__cap { opacity: 1; transform: none; } .card__cap h3 { font-size: 1rem; font-weight: 700; } .card__cap .tag { font-size: .72rem; color: var(--ink); background: var(--pop-2); padding: 4px 9px; border-radius: 999px; font-weight: 700; } /* ================================================================= ABOUT (ambient dark, warm berry glow) ================================================================= */ .about { color: var(--bone); background: radial-gradient(90% 120% at 88% 12%, rgba(138,45,74,.20), transparent 55%), radial-gradient(80% 110% at 8% 92%, rgba(43,208,192,.06), transparent 55%), var(--ink); } .about__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; } @media (max-width: 820px) { .about__grid { grid-template-columns: 1fr; } } .about .eyebrow { color: var(--bone-dim); } .about__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .95; font-size: clamp(2.2rem, 6vw, 4.4rem); } .about__title .accent { color: var(--pop); } .about__body p { color: var(--bone-dim); font-size: 1.05rem; margin-block-start: 18px; max-width: 52ch; } .about__portrait { aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; position: relative; background: linear-gradient(135deg, var(--green), var(--oak)); border: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); } .about__portrait .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(243,237,225,.5); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; text-align: center; padding: 20px; } .about__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Editorial treatment: warm monochrome so a casual photo reads as styled */ filter: grayscale(1) sepia(.18) contrast(1.07) brightness(.94); mix-blend-mode: luminosity; } .about__portrait { background: linear-gradient(150deg, #2a2320, var(--oak) 140%); } .stats { display: flex; gap: clamp(20px, 4vw, 48px); margin-block-start: 30px; flex-wrap: wrap; } .stat .n { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1; color: var(--oak-bright); } .stat .l { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--bone-faint); margin-block-start: 6px; } html[lang="he"] .stat .l { letter-spacing: .04em; } /* ================================================================= PROCESS ================================================================= */ .process { background: var(--green-deep); } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 26px); } @media (max-width: 880px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .steps { grid-template-columns: 1fr; } } .step { padding: 28px 24px; border: 1px solid var(--line); border-radius: 14px; background: rgba(243,237,225,.02); transition: border-color 300ms, background 300ms, transform 300ms var(--ease-out); } .step:hover { border-color: var(--pop-2); background: rgba(43,208,192,.05); transform: translateY(-4px); } .step__n { font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; color: var(--oak-bright); line-height: 1; } .step h3 { font-size: 1.25rem; font-weight: 700; margin-block: 14px 8px; } .step p { color: var(--bone-dim); font-size: .96rem; } /* ================================================================= POP STATEMENT (full-bleed pink CTA band) ================================================================= */ .pop { background: radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.18), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(46,10,24,.30), transparent 55%), var(--pop); color: var(--pop-ink); padding-block: clamp(64px, 10vw, 128px); position: relative; overflow: hidden; } .pop__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(18px, 3vw, 30px); } .pop__kicker { font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pop-ink); opacity: .7; } html[lang="he"] .pop__kicker { letter-spacing: .08em; } .pop__text { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.1rem, 7vw, 5.6rem); line-height: .98; letter-spacing: -.02em; max-width: 20ch; } .pop__foot { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-block-start: 6px; } .pop__note { font-size: .84rem; font-weight: 600; letter-spacing: .04em; color: var(--pop-ink); opacity: .72; } html[lang="he"] .pop__note { letter-spacing: 0; } .pop .btn--dark { background: var(--pop-ink); color: var(--pop); } .pop .btn--dark:hover { background: #000; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); } /* ================================================================= BOOKING FORM ================================================================= */ .book { background: var(--ink); } .book__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 80px); align-items: start; } @media (max-width: 880px) { .book__grid { grid-template-columns: 1fr; } } .book__aside .section__title { font-size: clamp(2rem, 5vw, 3.6rem); margin-block-end: 18px; } .book__aside p { color: var(--bone-dim); max-width: 40ch; } .book__meta { margin-block-start: 28px; display: grid; gap: 14px; } .book__meta div { display: flex; gap: 12px; align-items: center; font-size: .95rem; color: var(--bone-dim); } .book__meta svg { flex: none; color: var(--pop-2); } .form { display: grid; gap: 18px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: .82rem; font-weight: 600; letter-spacing: .03em; color: var(--bone-dim); } .field label .req { color: var(--pop); } .field input, .field select, .field textarea { width: 100%; padding: 14px 15px; border-radius: 10px; font: inherit; background: var(--ink-2); color: var(--bone); border: 1px solid var(--line-strong); transition: border-color 200ms, background 200ms; } .field textarea { resize: vertical; min-height: 120px; } .field input::placeholder, .field textarea::placeholder { color: var(--bone-faint); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pop-2); background: #1f241d; outline: none; } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #e2574a; } .field .err { font-size: .78rem; color: #f08a7f; min-height: 0; opacity: 0; transition: opacity 200ms; } .field.invalid .err { opacity: 1; } /* File input */ .file { display: flex; align-items: center; gap: 12px; padding: 14px 15px; border-radius: 10px; border: 1px dashed var(--line-strong); background: var(--ink-2); color: var(--bone-dim); cursor: pointer; transition: border-color 200ms, color 200ms; } .file:hover { border-color: var(--pop-2); color: var(--bone); } .file input { position: absolute; width: 1px; height: 1px; opacity: 0; } .file .name { font-size: .85rem; } .form__submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-block-start: 4px; } .form__note { font-size: .82rem; color: var(--bone-faint); } .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } .btn .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(46,10,24,.35); border-top-color: var(--pop-ink); animation: spin .7s linear infinite; display: none; } .btn.loading .spinner { display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .form__success { display: none; padding: 20px; border-radius: 12px; border: 1px solid var(--pop-2); background: rgba(43,208,192,.08); color: var(--bone); } .form__success.show { display: block; } /* ================================================================= FOOTER ================================================================= */ .footer { background: var(--green-deep); border-block-start: 1px solid var(--line); padding-block: clamp(48px, 7vw, 88px) 32px; } .footer__top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-start; } .footer__brand { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.4rem, 9vw, 6rem); line-height: .9; letter-spacing: -.02em; direction: ltr; } .footer__brand .dot { color: var(--pop); } .footer__cols { display: flex; gap: clamp(28px, 6vw, 72px); flex-wrap: wrap; } .footer__col h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; color: var(--bone-faint); margin-block-end: 14px; } .footer__col a, .footer__col p { display: block; color: var(--bone-dim); font-size: .96rem; padding-block: 4px; transition: color 200ms; } .footer__col a:hover { color: var(--pop); } .footer__bottom { margin-block-start: 48px; padding-block-start: 24px; border-block-start: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--bone-faint); } /* ================================================================= LIGHTBOX ================================================================= */ .lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px); background: rgba(10,9,7,.92); backdrop-filter: blur(8px); } .lightbox.open { display: flex; } .lightbox img { max-width: 100%; max-height: 86vh; border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); } .lightbox__close { position: absolute; inset-block-start: clamp(16px,3vw,32px); inset-inline-end: clamp(16px,3vw,32px); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--bone); transition: background 200ms, transform 200ms; } .lightbox__close:hover { background: rgba(243,237,225,.1); transform: rotate(90deg); } .lightbox__cap { position: absolute; inset-block-end: clamp(16px,3vw,32px); inset-inline-start: 50%; transform: translateX(-50%); color: var(--bone-dim); font-size: .9rem; } html[dir="rtl"] .lightbox__cap { transform: translateX(50%); } /* ================================================================= ACCESSIBILITY (תפריט נגישות) ================================================================= */ /* Skip link */ .skip-link { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 300; background: var(--pop); color: var(--pop-ink); padding: 10px 16px; border-radius: 8px; font-weight: 700; transform: translateY(-150%); transition: transform 200ms var(--ease); } .skip-link:focus { transform: translateY(0); } /* Floating button */ .a11y-fab { position: fixed; inset-block-end: 20px; inset-inline-start: 20px; z-index: 150; width: 56px; height: 56px; border-radius: 50%; background: var(--pop-2); color: #06201d; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px -8px rgba(0,0,0,.55); transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .a11y-fab:hover { transform: scale(1.07); box-shadow: 0 12px 32px -8px rgba(43,208,192,.6); } .a11y-fab svg { width: 32px; height: 32px; } /* Panel */ .a11y-panel { position: fixed; inset-block-end: 88px; inset-inline-start: 20px; z-index: 150; width: min(348px, calc(100vw - 40px)); background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 18px; padding: 18px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.75); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98); transition: opacity 200ms var(--ease), transform 220ms var(--ease-out), visibility 200ms; max-height: min(82vh, 640px); overflow-y: auto; } .a11y-panel.open { opacity: 1; visibility: visible; transform: none; } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 14px; } .a11y-panel__head h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; } .a11y-close { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--bone); transition: background 200ms, transform 200ms; } .a11y-close:hover { background: rgba(244,236,226,.08); transform: rotate(90deg); } .a11y-fontrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-block-end: 12px; } .a11y-fontrow .lbl { font-size: .85rem; font-weight: 600; color: var(--bone-dim); } .a11y-fontrow .ctrls { display: flex; align-items: center; gap: 8px; } .a11y-fontrow button { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line-strong); font-weight: 800; font-size: 1rem; color: var(--bone); transition: background 200ms, border-color 200ms; } .a11y-fontrow button:hover { background: rgba(244,236,226,.08); border-color: var(--bone); } .a11y-fontrow .val { min-width: 3.2ch; text-align: center; font-weight: 700; font-size: .85rem; color: var(--bone); } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .a11y-opt { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 8px; border: 1px solid var(--line); border-radius: 12px; font-size: .78rem; font-weight: 600; text-align: center; color: var(--bone-dim); transition: color 200ms, border-color 200ms, background 200ms; } .a11y-opt svg { width: 23px; height: 23px; } .a11y-opt:hover { color: var(--bone); border-color: var(--bone); } .a11y-opt[aria-pressed="true"] { color: var(--bone); border-color: var(--pop-2); background: rgba(43,208,192,.10); } .a11y-foot { margin-block-start: 14px; display: grid; gap: 8px; } .a11y-statement { width: 100%; text-align: center; padding: 11px; border-radius: 10px; border: 1px solid var(--line-strong); font-size: .85rem; font-weight: 600; color: var(--bone-dim); transition: color 200ms, border-color 200ms; } .a11y-statement:hover { color: var(--bone); border-color: var(--bone); } .a11y-reset { width: 100%; text-align: center; padding: 11px; border-radius: 10px; background: var(--pop); color: var(--pop-ink); font-weight: 700; font-size: .85rem; transition: background 200ms; } .a11y-reset:hover { background: #ff6aa0; } /* ---- Applied states ---- */ html.a11y-readable { --font-display: "Arial", "Helvetica Neue", Helvetica, sans-serif; --font-body: "Arial", "Helvetica Neue", Helvetica, sans-serif; } html.a11y-readable .hero__title { font-family: "Arial", Helvetica, sans-serif; } html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; } html.a11y-bigcursor, html.a11y-bigcursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 1.5L9.5 19z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 4, auto !important; } /* High contrast theme */ html.a11y-contrast { --ink: #000000; --ink-2: #0b0b0b; --green: #000000; --green-deep: #000000; --bone: #ffffff; --bone-dim: #ffffff; --bone-faint: #d8d8d8; --line: rgba(255,255,255,.55); --line-strong: rgba(255,255,255,.8); --pop: #ffe600; --pop-ink: #000000; --pop-2: #00e5ff; --oak: #ff7ab4; --oak-bright: #ff95c4; } html.a11y-contrast .about { background: #fff; color: #000; } html.a11y-contrast .hero { background: #000; } /* Pause animations */ html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; } html.a11y-no-motion .hero__title .line > span { transform: none !important; } html.a11y-no-motion .hero__scribble path { stroke-dashoffset: 0 !important; } html.a11y-no-motion .marquee__track { animation: none !important; } html.a11y-no-motion .reveal { opacity: 1 !important; transform: none !important; } /* Accessibility statement modal */ .a11y-modal { position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; padding: clamp(16px,4vw,48px); background: rgba(8,8,8,.9); backdrop-filter: blur(6px); } .a11y-modal.open { display: flex; } .a11y-modal__box { background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 16px; max-width: 640px; width: 100%; max-height: 86vh; overflow-y: auto; padding: clamp(22px,4vw,38px); } .a11y-modal__box h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem,3vw,2rem); margin-block-end: 12px; } .a11y-modal__box h3 { font-size: 1.05rem; font-weight: 700; margin-block: 18px 6px; } .a11y-modal__box p, .a11y-modal__box li { color: var(--bone-dim); font-size: .96rem; margin-block-end: 8px; } .a11y-modal__box ul { padding-inline-start: 20px; } .a11y-modal__box a { color: var(--pop); text-decoration: underline; } .a11y-modal__close { margin-block-start: 22px; } @media (max-width: 560px) { .a11y-fab { width: 50px; height: 50px; inset-block-end: 16px; inset-inline-start: 16px; } .a11y-fab svg { width: 28px; height: 28px; } .a11y-panel { inset-block-end: 76px; inset-inline-start: 16px; } } /* ================================================================= MICRO-INTERACTIONS (restrained, "expensive" polish) ================================================================= */ /* Magnetic buttons — JS sets --mx/--my; keep the hover lift composed in */ .btn { --mx: 0px; --my: 0px; } .is-magnetic { transform: translate(var(--mx), var(--my)); } .is-magnetic:hover { transform: translate(var(--mx), calc(var(--my) - 2px)); } .is-magnetic .btn__label { display: inline-flex; align-items: center; gap: .6ch; transition: transform 300ms var(--ease-out); transform: translate(calc(var(--mx) * .3), calc(var(--my) * .3)); } /* Masked "wipe-up" reveal for big titles */ .reveal--mask { opacity: 1 !important; transform: none !important; clip-path: inset(0 -6% 100% -6%); transition: clip-path .9s var(--ease-out); will-change: clip-path; } .reveal--mask.in { clip-path: inset(-8% -6% -12% -6%); } /* Section number — small ticking accent */ .section__num { position: relative; padding-inline-start: 2px; } /* Gallery cards — subtle 3D tilt (JS drives --rx/--ry) */ .card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--ty, 0), 0); transform-style: preserve-3d; } .card:hover { --ty: -6px; } .card__cap { transform: translateY(8px) translateZ(30px); } .card:hover .card__cap, .card:focus-visible .card__cap { transform: translateZ(30px); } .card__corner { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pop); color: var(--pop-ink); opacity: 0; transform: scale(.5) translateZ(40px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); pointer-events: none; } .card:hover .card__corner { opacity: 1; transform: scale(1) translateZ(40px); } /* Process steps — accent line draws across the top on hover, number nudges */ .step { position: relative; overflow: hidden; } .step::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, var(--pop), var(--pop-2)); transform: scaleX(0); transform-origin: inset-inline-start; transition: transform 420ms var(--ease-out); } .step:hover::before { transform: scaleX(1); } .step__n { display: inline-block; transition: transform 360ms var(--ease-out), color 320ms; } .step:hover .step__n { transform: translateY(-3px); color: var(--pop); } /* Footer links — underline draws in from the leading edge */ .footer__col a { background-image: linear-gradient(var(--pop), var(--pop)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px; transition: background-size 340ms var(--ease-out), color 200ms; } html[dir="rtl"] .footer__col a { background-position: 100% 100%; } .footer__col a:hover { background-size: 100% 1.5px; } /* Footer wordmark — the dot breathes toward you on hover */ .footer__brand { transition: letter-spacing 400ms var(--ease); } .footer__brand .dot { display: inline-block; transition: transform 400ms var(--ease-out); } .footer__brand:hover .dot { transform: translateY(-6px) scale(1.15); } /* Gallery filter pills — active gets a tiny dot */ .filters button { position: relative; } /* Respect motion preferences */ @media (prefers-reduced-motion: reduce) { .is-magnetic, .is-magnetic:hover { transform: none !important; } .is-magnetic .btn__label { transform: none !important; } .reveal--mask { clip-path: none !important; } .card { transform: none !important; } .card:hover { --ty: 0; } } html.a11y-no-motion .is-magnetic, html.a11y-no-motion .is-magnetic:hover { transform: none !important; } html.a11y-no-motion .is-magnetic .btn__label { transform: none !important; } html.a11y-no-motion .reveal--mask { clip-path: none !important; } html.a11y-no-motion .card { transform: none !important; } /* ================================================================= HERO SPECIALTY CHIPS + EMBERS CANVAS ================================================================= */ .hero__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 26px; } .hero__tags li { font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--bone-dim); padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 999px; transition: color 200ms, border-color 200ms, background 200ms; } .hero__tags li:hover { color: var(--bone); border-color: var(--pop-2); background: rgba(43,208,192,.08); } html[lang="he"] .hero__tags li { letter-spacing: 0; } @media (max-width: 900px) { .hero__tags { justify-content: center; } } /* Embers — fixed glowing drift over the whole page */ .embers { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; } @media (prefers-reduced-motion: reduce) { .embers { display: none; } } html.a11y-no-motion .embers { display: none; } /* ================================================================= COOKIE CONSENT BANNER + FOOTER LEGAL LINKS ================================================================= */ .cookie { position: fixed; inset: auto 0 0 0; z-index: 200; background: rgba(18, 21, 16, 0.97); border-block-start: 1px solid var(--line-strong); box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding-block: clamp(12px, 2vh, 16px); animation: cookieUp .5s var(--ease-out); } .cookie[hidden] { display: none; } @keyframes cookieUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .cookie { animation: none; } } .cookie__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(14px, 3vw, 32px); flex-wrap: wrap; } .cookie__text { margin: 0; color: var(--bone-dim); font-size: .9rem; line-height: 1.55; max-width: 74ch; } .cookie__link { color: var(--pop-2); text-decoration: underline; text-underline-offset: 2px; margin-inline-start: 6px; white-space: nowrap; } .cookie__link:hover { color: var(--bone); } .cookie__actions { display: flex; gap: 10px; flex-shrink: 0; } .cookie__actions .btn { padding: 11px 26px; } @media (max-width: 640px) { .cookie__inner { flex-direction: column; align-items: stretch; } .cookie__actions { justify-content: stretch; } .cookie__actions .btn { flex: 1; } } /* Footer legal links (Privacy Policy · Cookie settings) */ .footer__legal { display: inline-flex; gap: 18px; flex-wrap: wrap; } .footer__legal a { color: var(--bone-dim); text-decoration: none; transition: color 200ms; } .footer__legal a:hover { color: var(--pop); }