/* ========================================================================== Rachel Arviv, Wine Export Services Premium RTL landing page. Bordeaux + gold. Hand-crafted, no template feel. ========================================================================== */ /* ---------- Self-hosted webfonts (licence: fonts/OFL-*.txt) ---------- */ @font-face { font-family: "Google Sans"; src: url("../fonts/GoogleSans-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* Kept available: to restore the serif for headings, add this @font-face back and point --serif / --latin-serif at "Frank Ruhl Libre" below. @font-face { font-family: "Frank Ruhl Libre"; src: url("../fonts/FrankRuhlLibre-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } */ :root { /* Brand palette */ --bordeaux: #6E1423; --bordeaux-deep: #4A0D18; --bordeaux-soft: #8A2233; --gold: #C9A24B; --gold-deep: #B8860B; --gold-soft: #E3CE9B; /* Accessible gold for small text on the light surfaces (cream/sand/offwhite). --gold-deep only reaches 2.5-3.2:1 there; this clears WCAG AA 4.5 on all three: cream 5.72, sand 4.79, offwhite 6.06. */ --gold-text: #7F5C0A; --cream: #FBF7F0; --offwhite: #FFFEFB; --sand: #EBE3D5; --ink: #2A2020; --muted: #6B5D54; /* Type */ /* Google Sans throughout. To bring the serif back for headings, swap --serif and --latin-serif to: "Frank Ruhl Libre", "David Libre", Georgia, serif (and uncomment its @font-face + preload in index.html). */ --serif: "Google Sans", "Segoe UI", "Arial Hebrew", Arial, sans-serif; --sans: "Google Sans", "Segoe UI", "Arial Hebrew", Arial, sans-serif; --latin-serif: "Google Sans", "Segoe UI", "Arial Hebrew", Arial, sans-serif; /* Spacing scale (8px base) */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px; --s7: 128px; --maxw: 1200px; --radius: 3px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --shadow-soft: 0 10px 40px -12px rgba(74, 13, 24, 0.28); --shadow-float: 0 8px 24px -6px rgba(42, 32, 32, 0.35); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; } @media (max-width: 600px) { html { scroll-padding-top: 80px; } } body { font-family: var(--sans); font-size: 18px; line-height: 1.75; color: var(--ink); background: var(--cream); /* Direction comes from , so the English page at /en/ inherits LTR without needing its own stylesheet. text-align:start follows it. */ text-align: start; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Faint paper grain, kills the flat template feel */ body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ::selection { background: var(--gold-soft); color: var(--bordeaux-deep); } h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; color: var(--bordeaux-deep); } /* Latin/numbers stay LTR inside RTL */ [dir="ltr"] { unicode-bidi: isolate; } /* ---------- Layout helpers ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s3); } section { position: relative; z-index: 2; } .section-pad { padding-block: var(--s7); } .eyebrow { font-family: var(--latin-serif); font-size: 15px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; margin-bottom: var(--s2); display: inline-block; } .eyebrow.he { font-family: var(--sans); letter-spacing: 0.24em; font-size: 14px; } .section-title { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: var(--s3); } .lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--muted); max-width: 62ch; } /* Gold hairline divider motif (echoes the logo circle) */ .hairline { height: 1px; width: 84px; background: var(--gold); border: 0; margin: var(--s3) 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 16px; padding: 15px 32px; border-radius: var(--radius); transition: transform 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.35s var(--ease); position: relative; line-height: 1; } .btn-primary { background: var(--bordeaux); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(201,162,75,0); } .btn-primary:hover { background: var(--bordeaux-deep); transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gold), var(--shadow-soft); } .btn-ghost { color: var(--bordeaux); box-shadow: inset 0 0 0 1px rgba(110,20,35,0.3); } .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--bordeaux); transform: translateY(-2px); } .btn svg { width: 20px; height: 20px; } /* ---------- Header / nav ---------- */ .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50; transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease); padding-block: 12px; } .site-header.scrolled { background: rgba(251, 247, 240, 0.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(201,162,75,0.35), 0 6px 24px -18px rgba(42,32,32,0.5); padding-block: 12px; } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } /* flex:none so the lockup is never squeezed by the nav in the same row. */ .nav-logo { position: relative; display: block; flex: none; } /* The cropped wordmark is 498x278 (aspect 1.79) where the old lockup was 2.52, so the same height renders visibly narrower. Sized up to compensate, with the header padding pulled in so the bar does not balloon. */ .nav-logo img { height: 116px; width: auto; transition: height 0.4s var(--ease), opacity 0.4s var(--ease); } .site-header.scrolled .nav-logo img { height: 68px; } /* Cream lockup over the dark hero, dark lockup once the header turns cream. */ .nav-logo .logo-dark { position: absolute; inset-block-start: 0; inset-inline-start: 0; opacity: 0; } .site-header.scrolled .nav-logo .logo-light { opacity: 0; } .site-header.scrolled .nav-logo .logo-dark { opacity: 1; } .nav-links { display: flex; align-items: center; gap: var(--s4); list-style: none; } /* The mobile menu markup is always in the DOM; it must stay hidden above the 900px breakpoint, otherwise it renders as a second nav inside the header. */ .nav-links.mobile { display: none; } .nav-links a { font-size: 16px; font-weight: 500; color: var(--ink); position: relative; padding-block: 4px; } .nav-links a::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-end: 0; width: 0; height: 1.5px; background: var(--gold); transition: width 0.35s var(--ease); } .nav-links a:hover { color: var(--bordeaux); } .nav-links a:hover::after { width: 100%; } .nav-cta { display: inline-flex; } /* Before the header gains its cream background it floats over the dark hero. The default ink/bordeaux styling measures 1.35:1 and 1.0:1 there, i.e. invisible. Light treatment until .scrolled kicks in. */ .site-header:not(.scrolled) .nav-links.desktop a { color: var(--cream); } .site-header:not(.scrolled) .nav-links.desktop a:hover { color: var(--gold-soft); } .site-header:not(.scrolled) .nav-cta.btn-primary { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(227,206,155,0.55); } .site-header:not(.scrolled) .nav-cta.btn-primary:hover { background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px var(--gold-soft); } .site-header:not(.scrolled) .nav-toggle span, .site-header:not(.scrolled) .nav-toggle span::before, .site-header:not(.scrolled) .nav-toggle span::after { background: var(--cream); } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 26px; height: 2px; background: var(--bordeaux); transition: 0.3s var(--ease); position: relative; } .nav-toggle span::before { position: absolute; inset-block-start: -8px; inset-inline-start: 0; } .nav-toggle span::after { position: absolute; inset-block-start: 8px; inset-inline-start: 0; } body.nav-open .nav-toggle span { background: transparent; } body.nav-open .nav-toggle span::before { transform: rotate(45deg); inset-block-start: 0; } body.nav-open .nav-toggle span::after { transform: rotate(-45deg); inset-block-start: 0; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; color: var(--cream); background: var(--bordeaux-deep); } .hero__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 80% 10%, rgba(138,34,51,0.55), transparent 60%), radial-gradient(100% 80% at 10% 90%, rgba(201,162,75,0.18), transparent 55%), linear-gradient(135deg, #4A0D18 0%, #6E1423 55%, #3d0a14 100%); animation: kenburns 24s ease-in-out infinite alternate; transform-origin: center; } @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } } /* decorative oversized monogram watermark */ .hero__mark { position: absolute; z-index: 0; inset-block-start: 50%; inset-inline-start: 8%; transform: translateY(-50%); width: min(46vw, 560px); opacity: 0.06; filter: brightness(0) invert(1); pointer-events: none; } /* Original vineyard illustration behind the bordeaux. Kept very low contrast so it reads as texture, never as an image competing with the headline. */ .hero__vineyard { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("../images/vineyard.svg?v=2") left bottom / cover no-repeat; opacity: 0.32; /* Two masks intersected: fade out upward, and fade out toward the right so the illustration never sits behind the headline (the page is RTL, so the copy occupies the right half). */ -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.92) 44%, rgba(0,0,0,0.4) 64%, transparent 84%), linear-gradient(to right, #000 0%, #000 32%, rgba(0,0,0,0.34) 56%, transparent 74%); mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.92) 44%, rgba(0,0,0,0.4) 64%, transparent 84%), linear-gradient(to right, #000 0%, #000 32%, rgba(0,0,0,0.34) 56%, transparent 74%); -webkit-mask-composite: source-in; mask-composite: intersect; } /* On the LTR page the copy sits on the left, so mirror the whole layer. This flips the artwork AND its fade in one move, putting the vineyard on the right and the fade toward the text. */ html[dir="ltr"] .hero__vineyard { transform: scaleX(-1); } .hero__vignette { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 120% at 70% 30%, transparent 40%, rgba(43,10,18,0.55) 100%); } .hero .wrap { position: relative; z-index: 2; padding-block: 140px 80px; } .hero__inner { max-width: 780px; } .hero .eyebrow { color: var(--gold-soft); } .hero h1 { color: #fff; font-size: clamp(38px, 6.4vw, 74px); line-height: 1.08; letter-spacing: -0.01em; margin-bottom: var(--s3); } .hero h1 .grad { color: var(--gold-soft); } .hero__sub { font-size: clamp(18px, 2.4vw, 22px); color: rgba(255,255,255,0.86); max-width: 56ch; line-height: 1.65; margin-bottom: var(--s4); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; } .hero .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(227,206,155,0.5); } .hero .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--gold-soft); background: rgba(255,255,255,0.06); } .hero__hairline { height: 1px; background: var(--gold-soft); width: 0; margin-bottom: var(--s3); } /* ---------- Reveal animation base ---------- */ /* Gated on .js (set synchronously in ). Without JS, or if main.js fails to load or throws, the content stays visible instead of hiding forever. */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .js .reveal.in { opacity: 1; transform: none; } .js .reveal.from-side { transform: translateX(40px); } .js .reveal.in.from-side { transform: none; } .js [data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .js [data-stagger].in > * { opacity: 1; transform: none; } /* ---------- About (asymmetric split) ---------- */ .about { background: var(--cream); overflow: hidden; } .split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s6); align-items: center; } .split.reverse { grid-template-columns: 0.9fr 1.1fr; } .about__watermark { position: absolute; inset-block-start: 50%; inset-inline-start: -60px; transform: translateY(-50%); width: 420px; opacity: 0.05; pointer-events: none; z-index: 0; } .portrait-frame { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; background: linear-gradient(135deg, var(--sand), var(--cream)); box-shadow: var(--shadow-soft); } .portrait-frame::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(201,162,75,0.6); pointer-events: none; } .portrait-frame picture { display: block; width: 100%; height: 100%; } .portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform 1.2s var(--ease); } .portrait-frame:hover img { transform: scale(1.04); } .about p { margin-bottom: var(--s2); color: var(--ink); } /* ---------- Journey (the signature scroll moment) ---------- */ .journey { background: var(--bordeaux-deep); color: var(--cream); overflow: hidden; } .journey .section-title { color: #fff; } .journey .eyebrow { color: var(--gold-soft); } .journey .lead { color: rgba(255,255,255,0.8); } .journey__head { text-align: center; margin-inline: auto; margin-bottom: var(--s6); } .journey__head .lead { margin-inline: auto; } .journey__head .hairline { margin-inline: auto; } .timeline { position: relative; max-width: 760px; margin-inline: auto; } .timeline__rail { position: absolute; inset-inline-start: 31px; inset-block: 8px; width: 2px; background: rgba(227,206,155,0.18); } .timeline__progress { position: absolute; inset-inline-start: 31px; inset-block-start: 8px; width: 2px; height: 0; background: linear-gradient(var(--gold-soft), var(--gold)); box-shadow: 0 0 14px rgba(201,162,75,0.6); transition: height 0.15s linear; } .step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: var(--s3); padding-block: var(--s4); align-items: start; } .step__dot { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bordeaux); border: 2px solid rgba(227,206,155,0.35); font-family: var(--latin-serif); font-size: 26px; color: var(--gold-soft); font-weight: 600; transition: border-color 0.5s var(--ease), background 0.5s var(--ease), box-shadow 0.5s var(--ease), color 0.5s var(--ease); position: relative; z-index: 2; } .step.lit .step__dot { background: var(--gold); color: var(--bordeaux-deep); border-color: var(--gold-soft); box-shadow: 0 0 0 6px rgba(201,162,75,0.12), 0 0 24px rgba(201,162,75,0.4); } .step__body h3 { color: #fff; font-size: 24px; margin-bottom: 6px; } .step__body p { color: rgba(255,255,255,0.78); font-size: 17px; max-width: 52ch; } /* ---------- Services (editorial rows, not cards) ---------- */ .services { background: var(--cream); } .service-row { display: grid; grid-template-columns: 120px 1fr auto; gap: var(--s4); align-items: baseline; padding-block: var(--s4); border-block-end: 1px solid rgba(201,162,75,0.35); position: relative; } .service-row:first-of-type { border-block-start: 1px solid rgba(201,162,75,0.35); } /* Large decorative numeral: --gold (2.25:1) failed even AA-large; --gold-deep at full opacity reaches 3.05 and clears the 3.0 large-text threshold. */ .service-row__num { font-family: var(--latin-serif); font-size: clamp(40px, 6vw, 68px); color: var(--gold-deep); font-weight: 600; line-height: 0.9; opacity: 1; } .service-row__main h3 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 10px; } .service-row__main p { color: var(--muted); max-width: 62ch; } .service-row__glyph { width: 44px; color: var(--gold-deep); opacity: 0; transform: translateX(12px); transition: 0.5s var(--ease); } .service-row:hover { background: linear-gradient(90deg, rgba(235,227,213,0.4), transparent); } .service-row:hover .service-row__glyph { opacity: 0.7; transform: none; } .service-row__glyph svg { width: 100%; height: auto; } /* ---------- Why me / pull-quote ---------- */ .why { background: var(--bordeaux); color: var(--cream); position: relative; overflow: hidden; } .why::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.5; background: radial-gradient(80% 120% at 20% 0%, rgba(138,34,51,0.8), transparent 60%), radial-gradient(70% 100% at 100% 100%, rgba(201,162,75,0.1), transparent 55%); } .why .wrap { position: relative; z-index: 2; } .pullquote { font-family: var(--serif); font-size: clamp(28px, 4.6vw, 50px); line-height: 1.28; color: #fff; text-align: center; max-width: 20ch; margin-inline: auto; margin-bottom: var(--s6); position: relative; } .pullquote::before { content: "“"; font-family: var(--latin-serif); position: absolute; inset-block-start: -0.5em; inset-inline-start: 50%; transform: translateX(50%); font-size: 2.4em; color: var(--gold); opacity: 0.4; } .diffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); } .diff h3 { color: var(--gold-soft); font-size: 22px; margin-bottom: 10px; } .diff p { color: rgba(255,255,255,0.82); font-size: 16px; } .diff .diff__rule { width: 40px; height: 1px; background: var(--gold); margin-bottom: var(--s2); } /* ---------- Pricing ---------- */ .pricing { background: var(--sand); } .pricing__head { text-align: center; margin-bottom: var(--s6); } .pricing__head .lead, .pricing__head .hairline { margin-inline: auto; } .price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); max-width: 940px; margin-inline: auto; } .price-card { background: var(--offwhite); border-radius: var(--radius); padding: var(--s5) var(--s4); position: relative; overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid rgba(201,162,75,0.4); } .price-card__tag { font-family: var(--sans); font-size: 14px; letter-spacing: 0.15em; color: var(--gold-text); font-weight: 600; margin-bottom: var(--s2); } .price-card h3 { font-size: 26px; margin-bottom: var(--s3); } .price-card__amount { font-family: var(--serif); font-size: 52px; color: var(--bordeaux); line-height: 1; margin-bottom: 4px; } .price-card__amount small { font-size: 18px; color: var(--muted); font-family: var(--sans); } .price-card__meta { color: var(--muted); font-size: 16px; margin-bottom: var(--s3); } .price-card ul { list-style: none; } .price-card li { position: relative; padding-inline-start: 26px; margin-bottom: 10px; color: var(--ink); } .price-card li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 11px; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8860B' stroke-width='2.5'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat; } .price-note { max-width: 70ch; margin-inline: auto; margin-block-start: var(--s4); text-align: center; color: var(--muted); font-size: 15px; } /* ---------- FAQ ---------- */ .faq { background: var(--cream); } .faq__list { max-width: 820px; margin-inline: auto; } .faq-item { border-block-end: 1px solid rgba(201,162,75,0.4); } .faq-item:first-child { border-block-start: 1px solid rgba(201,162,75,0.4); } .faq-q { width: 100%; text-align: start; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-block: var(--s3); font-family: var(--serif); font-size: clamp(18px, 2.4vw, 23px); color: var(--bordeaux-deep); } .faq-q .icon { flex: none; width: 26px; height: 26px; position: relative; transition: transform 0.4s var(--ease); } /* Physical `left` on purpose: the icon is a fixed square and translate(-50%) is left-based, so inset-inline-start resolves to `right` in RTL and splits the two strokes apart instead of centring them. */ .faq-q .icon::before, .faq-q .icon::after { content: ""; position: absolute; inset-block-start: 50%; left: 50%; background: var(--gold-deep); transition: 0.4s var(--ease); } .faq-q .icon::before { width: 16px; height: 2px; transform: translate(-50%,-50%); } .faq-q .icon::after { width: 2px; height: 16px; transform: translate(-50%,-50%); } .faq-item.open .faq-q .icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; } .faq-a { overflow: hidden; max-height: 0; transition: max-height 0.45s var(--ease); } .faq-a__inner { padding-block-end: var(--s3); color: var(--muted); max-width: 70ch; } /* ---------- Contact / CTA ---------- */ .contact { background: var(--bordeaux-deep); color: var(--cream); position: relative; overflow: hidden; text-align: center; } /* Physical `left` for the same reason as the FAQ icon above. */ .contact__mark { position: absolute; inset-block-start: 50%; left: 50%; transform: translate(-50%,-50%); width: 520px; opacity: 0.05; filter: brightness(0) invert(1); pointer-events: none; } .contact .wrap { position: relative; z-index: 2; } .contact h2 { color: #fff; font-size: clamp(30px, 4.6vw, 50px); margin-bottom: var(--s2); } .contact__line { color: rgba(255,255,255,0.82); font-size: clamp(18px,2.2vw,21px); max-width: 46ch; margin-inline: auto; margin-bottom: var(--s4); } .contact__actions { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; align-items: center; margin-bottom: var(--s4); } .contact__direct { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: center; color: var(--gold-soft); font-size: 17px; } .contact__direct a { display: inline-flex; align-items: center; gap: 8px; } .contact__direct a:hover { color: #fff; } .contact__direct svg { width: 18px; height: 18px; } /* ---------- Footer ---------- */ .site-footer { background: #38090f; color: rgba(255,255,255,0.7); padding-block: var(--s5) var(--s4); position: relative; z-index: 2; } .footer-grid { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; align-items: center; } /* No filter: logo-full-light.png is already a cream lockup on transparency. logo-full.png is opaque white-backed RGB, so brightness(0) invert(1) turned the entire rectangle into a solid white block. */ .site-footer img { height: 54px; width: auto; opacity: 0.9; } .footer-tag { font-family: var(--latin-serif); letter-spacing: 0.2em; font-size: 14px; color: var(--gold-soft); text-transform: uppercase; } .footer-links { display: flex; gap: var(--s3); flex-wrap: wrap; } .footer-links a:hover { color: var(--gold-soft); } .footer-legal { width: 100%; margin-block-start: var(--s4); padding-block-start: var(--s3); border-block-start: 1px solid rgba(255,255,255,0.1); font-size: 14px; color: rgba(255,255,255,0.6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); } /* ---------- Floating WhatsApp ---------- */ .wa-float { /* Right-hand side of the page, per request. In RTL that is inline-start. */ position: fixed; inset-block-end: 24px; inset-inline-start: 24px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-float); transition: transform 0.35s var(--ease); opacity: 0; transform: translateY(20px) scale(0.8); } .wa-float.show { opacity: 1; transform: none; } .wa-float:hover { transform: translateY(-3px) scale(1.06); } .wa-float svg { width: 32px; height: 32px; } .wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: pulse 2.6s ease-out infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } } /* ---------- Why-me section head ---------- */ .why__head { text-align: center; margin-bottom: var(--s5); } .why__head .section-title { color: #fff; } .why__head .eyebrow { color: var(--gold-soft); } .why__head .hairline { margin-inline: auto; } /* ---------- Facts strip (replaced the animated counters) ---------- */ .facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); margin-block-start: var(--s6); padding-block-start: var(--s4); border-block-start: 1px solid rgba(227,206,155,0.25); } .facts li { color: var(--gold-soft); font-size: 16px; letter-spacing: 0.04em; display: flex; align-items: center; gap: 12px; } .facts li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: 0.7; flex: none; } /* ---------- Mid-page CTAs ---------- */ .journey__cta, .pricing__cta { text-align: center; margin-block-start: var(--s5); } .pricing__cta p { color: var(--muted); margin-bottom: var(--s2); } .journey__cta .btn { box-shadow: inset 0 0 0 1px rgba(201,162,75,0.5); } /* ---------- Contact expectation list ---------- */ .contact__expect { list-style: none; margin-block-start: var(--s4); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s4); color: rgba(255,255,255,0.72); font-size: 15px; } .contact__expect li { display: flex; align-items: center; gap: 10px; } .contact__expect li::before { content: ""; width: 16px; height: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3CE9B' stroke-width='2.5'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---------- Count-up stats (markup removed; kept for reuse with real numbers) ---------- */ .stats { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: center; margin-block-start: var(--s6); } .stat { text-align: center; } /* isolate: the trailing "+" is bidi-neutral and flipped to the left of the digit in an RTL paragraph, rendering "3+" as "+3". */ .stat__num { font-family: var(--serif); font-size: clamp(40px, 6vw, 64px); color: var(--gold-soft); line-height: 1; direction: ltr; unicode-bidi: isolate; } .stat__label { color: rgba(255,255,255,0.75); font-size: 15px; letter-spacing: 0.05em; margin-block-start: 8px; } /* ========================================================================== Responsive, mobile, tablet portrait/landscape, desktop ========================================================================== */ /* Tablet landscape & below */ @media (max-width: 1024px) { .section-pad { padding-block: var(--s6); } .split, .split.reverse { grid-template-columns: 1fr; gap: var(--s4); } .about__watermark { display: none; } .diffs { gap: var(--s4); } } /* Tablet portrait */ @media (max-width: 900px) { .nav-links.desktop, .nav-cta.desktop-only { display: none; } .nav-toggle { display: flex; } .nav-links.mobile { display: flex; position: fixed; inset-block-start: 0; inset-inline: 0; inset-block-end: 0; background: var(--bordeaux-deep); flex-direction: column; justify-content: center; gap: var(--s4); font-size: 22px; transform: translateX(100%); transition: transform 0.45s var(--ease); z-index: 45; padding: var(--s5); } body.nav-open .nav-links.mobile { transform: none; } /* The X sits on the dark panel once open, bordeaux on bordeaux is invisible. */ body.nav-open .nav-toggle { position: relative; z-index: 46; } body.nav-open .nav-toggle span::before, body.nav-open .nav-toggle span::after { background: var(--gold-soft); } body.nav-open { overflow: hidden; } .nav-links.mobile a { color: var(--cream); } .nav-links.mobile a::after { background: var(--gold-soft); } .nav-links.mobile .btn { margin-block-start: var(--s2); } .diffs { grid-template-columns: 1fr; gap: var(--s4); text-align: center; } /* Centred + full-width was hitting ~91ch here, the hardest case to read. */ .diff { max-width: 62ch; margin-inline: auto; } .diff .diff__rule { margin-inline: auto; } .service-row { grid-template-columns: 72px 1fr; } .service-row__glyph { display: none; } .price-grid { grid-template-columns: 1fr; max-width: 480px; } } /* Phones */ @media (max-width: 600px) { body { font-size: 17px; } .wrap { padding-inline: var(--s3); } .section-pad { padding-block: 64px; } .hero .wrap { padding-block: 120px 64px; } .hero__mark { inset-inline-start: -20%; width: 90vw; } .timeline__rail, .timeline__progress { inset-inline-start: 23px; } .step { grid-template-columns: 48px 1fr; gap: var(--s2); } .step__dot { width: 48px; height: 48px; font-size: 20px; } .service-row { grid-template-columns: 1fr; gap: 6px; } .service-row__num { font-size: 40px; } .stats { gap: var(--s4); } .wa-float { width: 54px; height: 54px; inset-block-end: 18px; inset-inline-start: 18px; } .site-header { padding-block: 10px; } .nav-logo img { height: 92px; } .site-header.scrolled .nav-logo img { height: 58px; } .btn { width: 100%; justify-content: center; } .hero__cta .btn { width: auto; } .hero__cta { flex-direction: column; align-items: stretch; } .contact__actions { flex-direction: column; align-items: stretch; } } /* iPad landscape specific tune */ @media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) { .split, .split.reverse { grid-template-columns: 1fr 1fr; } .diffs { grid-template-columns: repeat(3, 1fr); } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal, [data-stagger] > * { opacity: 1 !important; transform: none !important; } .hero__bg { animation: none; } }