/* ========================================================= A B. Capital — abcapital.ltd Dark editorial theme, RTL-first. ========================================================= */ /* --------------------------------------------------------- Self-hosted fonts (previously fonts.googleapis.com — that third-party, render-blocking chain was the single largest performance cost on the site). Google now serves each of these families as one variable-weight woff2 per subset, so one file covers the whole weight range with font-weight as a range, not a discrete value — hence 4 files, not ~14. Hebrew + Latin subsets only; this site has no other scripts. --------------------------------------------------------- */ @font-face { font-family: 'Assistant'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fonts/assistant-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: 'Assistant'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fonts/assistant-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('../fonts/cormorant-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg: #0B0B0C; --bg-elev: #141416; --bg-elev-2: #1B1B1E; --bg-foot: #08080A; --fg: #FFFFFF; --fg-soft: #D1D5DB; /* gray-300, per hero spec */ --fg-muted: #9A9AA1; --footer-muted: #6E6E75; --placeholder: #6E6E75; --field-focus-bg: #201F1C; --line: rgba(255, 255, 255, 0.12); --line-soft: rgba(255, 255, 255, 0.07); --sand: #C2A878; --wrap: 1400px; --pad: 1.5rem; /* px-6 */ /* Legibility scrim behind hero text. Set to 0 for the raw, un-dimmed video. */ --hero-scrim: 0.55; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Light theme — toggled via [data-theme="light"] on , see .theme-toggle / main.js. Chrome that always sits over media (nav, hero, page-hero photos, footer... see the pin block below) stays on the dark values regardless, for legibility over the media. */ :root[data-theme="light"] { --bg: #FFFFFF; --bg-elev: #F6F5F1; --bg-elev-2: #EFEDE6; --bg-foot: #F1EFE9; --fg: #16161A; --fg-soft: #4B4B47; --fg-muted: #74716A; --footer-muted: #8C897F; --placeholder: #A8A59B; --field-focus-bg: #E8E4D8; --line: rgba(0, 0, 0, 0.12); --line-soft: rgba(0, 0, 0, 0.07); --sand: #8B6B3D; /* deepened for AA contrast on white */ } @media (min-width: 768px) { :root { --pad: 3rem; } } /* md:px-12 */ @media (min-width: 1024px) { :root { --pad: 4rem; } } /* lg:px-16 */ /* Chrome pinned to the dark palette in both themes: the floating nav sits on a translucent dark glass regardless of page theme, and hero / page-hero sections and imgcard captions overlay photos or video that need light text over a dark scrim no matter what. Re-anchoring `color` here (not just the custom properties) matters: descendants that rely on inherited `color` rather than an explicit var() would otherwise keep inheriting the page theme's value instead of picking up this pin. */ .nav-shell, .hero, .page-hero:has(.page-hero__media), .mobile-cta, .imgcard__body { --bg: #0B0B0C; --bg-elev: #141416; --bg-elev-2: #1B1B1E; --fg: #FFFFFF; --fg-soft: #D1D5DB; --fg-muted: #9A9AA1; --line: rgba(255, 255, 255, 0.12); --line-soft: rgba(255, 255, 255, 0.07); --sand: #C2A878; color: var(--fg); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: 'Inter', 'Assistant', system-ui, -apple-system, sans-serif; font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } ::selection { background: var(--sand); color: #000; } :focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 3px; } /* --------------------------------------------------------- Liquid glass (verbatim from the design spec) --------------------------------------------------------- */ .liquid-glass { background: rgba(0, 0, 0, 0.4); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* --------------------------------------------------------- Layout --------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); } .section { padding-block: clamp(4.5rem, 10vw, 8.5rem); } .section--tight { padding-block: clamp(3rem, 6vw, 5rem); } .section--elev { background: var(--bg-elev); } .section--line { border-top: 1px solid var(--line-soft); } .grid { display: grid; gap: 1.5rem; } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } @media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid { gap: 2rem; } } /* Two-column text + media block */ .split { display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); } .split--wide-text { grid-template-columns: 1.1fr 0.9fr; } .split--flip > :first-child { order: 2; } } /* --------------------------------------------------------- Typography --------------------------------------------------------- */ h1, h2, h3, h4 { font-weight: 400; line-height: 1.15; letter-spacing: -0.03em; margin: 0; text-wrap: balance; } .h-hero { font-size: 2.25rem; /* text-4xl */ font-weight: 400; margin-bottom: 1rem; /* mb-4 */ letter-spacing: -0.035em; max-width: 100%; overflow-wrap: break-word; /* guard against a wider fallback font during font-swap */ } @media (min-width: 768px) { .h-hero { font-size: 3rem; } } @media (min-width: 1024px) { .h-hero { font-size: 3.75rem; } } @media (min-width: 1280px) { .h-hero { font-size: 4.5rem; } } .h1 { font-size: clamp(2.25rem, 6vw, 4.25rem); font-weight: 300; max-width: 100%; overflow-wrap: break-word; } .h2 { font-size: clamp(1.75rem, 3.6vw, 3rem); font-weight: 300; } .h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -0.02em; } .h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; } .eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; color: var(--sand); margin-bottom: 1.25rem; } .lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--fg-soft); line-height: 1.75; max-width: 62ch; } .prose { color: var(--fg-soft); max-width: 68ch; } .prose p { margin: 0 0 1.15em; } .prose strong { color: var(--fg); font-weight: 600; } .prose a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; } .muted { color: var(--fg-muted); } .small { font-size: 0.875rem; } .center { text-align: center; } .mx-auto { margin-inline: auto; } .section-head { max-width: 70ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-head.center { margin-inline: auto; } /* --------------------------------------------------------- Buttons --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 2rem; /* px-8 py-3 */ border-radius: 0.5rem; /* rounded-lg */ font-weight: 500; font-size: 0.9375rem; cursor: pointer; border: 1px solid transparent; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease); white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: #fff; color: #000; } .btn-primary:hover { background: #E9E9EC; } .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.2); } .btn-ghost:hover { background: #fff; color: #000; } .btn-sm { padding: 0.5rem 1.5rem; font-size: 0.875rem; } /* nav CTA: px-6 py-2 */ .btn-row { display: flex; flex-wrap: wrap; gap: 1rem; } .link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--fg); font-weight: 500; font-size: 0.9375rem; border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; transition: border-color .25s, gap .25s var(--ease); } .link-arrow:hover { border-color: var(--sand); gap: 0.8rem; } .link-arrow::after { content: '←'; color: var(--sand); } /* --------------------------------------------------------- Wordmark --------------------------------------------------------- */ .wordmark { font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-weight: 600; letter-spacing: -0.01em; line-height: 0.92; display: inline-block; color: var(--fg); /* white in nav (pinned dark scope) and footer (theme-adaptive) alike */ } .wordmark span { display: block; } .wordmark .wm-1 { font-size: 1.05em; letter-spacing: 0.02em; } .wordmark .wm-2 { font-size: 1em; margin-inline-start: 0.12em; } .wordmark--nav { font-size: 1.05rem; } .wordmark--foot { font-size: 1.6rem; } /* --------------------------------------------------------- Navigation --------------------------------------------------------- */ .nav-shell { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; padding: 1.5rem var(--pad) 0; /* pt-6 + page padding */ pointer-events: none; } .nav-bar { pointer-events: auto; max-width: var(--wrap); margin-inline: auto; border-radius: 0.75rem; /* rounded-xl */ padding: 0.5rem 1rem; /* py-2 px-4 */ display: flex; align-items: center; justify-content: space-between; gap: 1rem; overflow: visible; /* allow mobile panel to escape */ } .nav-bar::before { border-radius: 0.75rem; } .nav-links { display: none; align-items: center; gap: 2rem; /* gap-8 */ font-size: 0.875rem; /* text-sm */ } @media (min-width: 1024px) { .nav-links { display: flex; } } .nav-links a { color: #fff; transition: color .2s; white-space: nowrap; } .nav-links a:hover { color: #D1D5DB; } .nav-links a[aria-current="page"] { color: var(--sand); } .nav-right { display: flex; align-items: center; gap: 0.5rem; } .nav-cta { display: none; } @media (min-width: 1024px) { .nav-cta { display: inline-flex; } } /* --------------------------------------------------------- Theme toggle --------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 38px; height: 38px; border-radius: 50%; background: none; border: 1px solid rgba(255,255,255,0.2); color: #fff; cursor: pointer; flex: none; transition: background-color .2s, transform .2s var(--ease); } .theme-toggle:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); } .theme-toggle .i { width: 17px; height: 17px; flex: none; } .theme-toggle .only-light { display: none; } html[data-theme="light"] .theme-toggle .only-dark { display: none; } html[data-theme="light"] .theme-toggle .only-light { display: inline-flex; } .theme-toggle--panel { width: 100%; height: auto; border-radius: 0.5rem; border: none; justify-content: flex-start; padding: 0.85rem 1rem; font-size: 1rem; margin-top: 0.25rem; } .theme-toggle--panel:hover { background: rgba(255,255,255,0.06); transform: none; } .theme-toggle--panel .i { width: 19px; height: 19px; } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 38px; padding: 0 10px; background: none; border: 0; cursor: pointer; } @media (min-width: 1024px) { .nav-toggle { display: none; } } .nav-toggle span { display: block; height: 1.5px; width: 100%; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav-panel { pointer-events: auto; max-width: var(--wrap); margin: 0.5rem auto 0; border-radius: 0.75rem; padding: 0.5rem; display: none; background: rgba(11,11,12,0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); } .nav-panel.open { display: block; } @media (min-width: 1024px) { .nav-panel { display: none !important; } } .nav-panel a { display: block; padding: 0.85rem 1rem; font-size: 1rem; border-radius: 0.5rem; transition: background-color .2s; } .nav-panel a:hover { background: rgba(255,255,255,0.06); } .nav-panel a[aria-current="page"] { color: var(--sand); } .nav-panel .btn { width: 100%; margin-top: 0.5rem; } /* --------------------------------------------------------- Hero --------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: #000; } .hero__media { position: absolute; inset: 0; } .hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; } /* Bottom-only scrim so the copy stays legible; top of the frame stays raw. */ .hero__media::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 62%; background: linear-gradient(to top, rgba(0,0,0,var(--hero-scrim)) 0%, rgba(0,0,0,calc(var(--hero-scrim) * 0.55)) 38%, rgba(0,0,0,0) 100%); pointer-events: none; } .hero__body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: var(--wrap); margin-inline: auto; padding: 0 var(--pad) 3rem; /* pb-12 */ } @media (min-width: 1024px) { .hero__body { padding-bottom: 4rem; } /* lg:pb-16 */ .hero__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 2rem; } } .hero__sub { font-size: 1rem; color: var(--fg-soft); margin: 0 0 1.25rem; /* mb-5 */ max-width: 46ch; } @media (min-width: 768px) { .hero__sub { font-size: 1.125rem; } } .hero__tag { display: flex; align-items: flex-end; justify-content: flex-start; margin-top: 2rem; } @media (min-width: 1024px) { .hero__tag { justify-content: flex-end; margin-top: 0; } } .hero__tag > div { border: 1px solid rgba(255,255,255,0.2); padding: 0.75rem 1.5rem; /* px-6 py-3 */ border-radius: 0.75rem; font-size: 1.125rem; font-weight: 300; } @media (min-width: 768px) { .hero__tag > div { font-size: 1.25rem; } } @media (min-width: 1024px) { .hero__tag > div { font-size: 1.5rem; } } .hero__trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1.75rem; font-size: 0.8125rem; color: var(--fg-soft); } .hero__trust span::before { content: '✓ '; color: var(--sand); } /* Page hero (inner pages) */ .page-hero { position: relative; padding-block: clamp(9rem, 18vw, 13rem) clamp(3rem, 6vw, 5rem); overflow: hidden; border-bottom: 1px solid var(--line-soft); } .page-hero__media { position: absolute; inset: 0; z-index: 0; } .page-hero__media img { width: 100%; height: 100%; object-fit: cover; } .page-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,11,12,0.97) 6%, rgba(11,11,12,0.72) 55%, rgba(11,11,12,0.55) 100%); } .page-hero > .wrap { position: relative; z-index: 1; } .page-hero--plain { background: var(--bg-elev); } /* --------------------------------------------------------- Entrance animations Hidden states are scoped to html.js so that content stays visible if JS fails, is blocked, or never gets to run. --------------------------------------------------------- */ .anim-char { display: inline-block; } .js .anim-char { opacity: 0; transform: translateX(18px); /* RTL: enters from the start edge */ transition: opacity .5s var(--ease), transform .5s var(--ease); will-change: opacity, transform; } .js .anim-char.in { opacity: 1; transform: translateX(0); } .js [data-fade] { opacity: 0; transition: opacity 1s ease; } .js [data-fade].in { opacity: 1; } /* --------------------------------------------------------- Scroll reveal --------------------------------------------------------- */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal, .js .anim-char, .js [data-fade] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* --------------------------------------------------------- Cards --------------------------------------------------------- */ .card { background: var(--bg-elev); border: 1px solid var(--line-soft); border-radius: 0.9rem; padding: 1.75rem; height: 100%; transition: border-color .3s, transform .3s var(--ease), background-color .3s; } .card:hover { border-color: var(--line); transform: translateY(-3px); } .card p { color: var(--fg-soft); margin: 0.6rem 0 0; font-size: 0.9375rem; } .section--elev .card { background: var(--bg-elev-2); } .card__num { font-family: 'Cormorant Garamond', serif; font-size: 2.25rem; line-height: 1; color: var(--sand); display: block; margin-bottom: 0.9rem; } /* Image card */ .imgcard { position: relative; border-radius: 0.9rem; overflow: hidden; background: var(--bg-elev); display: block; height: 100%; } .imgcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s var(--ease); } .imgcard:hover img { transform: scale(1.05); } .imgcard__body { position: absolute; inset-block-end: 0; inset-inline: 0; padding: 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.45) 60%, transparent 100%); } .imgcard__body p { color: var(--fg-soft); font-size: 0.875rem; margin: 0.35rem 0 0; } .media { border-radius: 1rem; overflow: hidden; background: var(--bg-elev); } .media img { width: 100%; object-fit: cover; } /* --------------------------------------------------------- Lists --------------------------------------------------------- */ .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; } .ticks li { position: relative; padding-inline-start: 1.9rem; color: var(--fg-soft); } .ticks li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--sand); font-weight: 600; } .ticks--no li::before { content: '×'; color: #9A9AA1; } .stats { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat__n { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1; display: block; } .stat__l { color: var(--fg-muted); font-size: 0.875rem; margin-top: 0.5rem; display: block; } /* --------------------------------------------------------- Timeline / steps --------------------------------------------------------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .steps li { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; padding-block: 1.75rem; border-top: 1px solid var(--line-soft); } .steps li:last-child { border-bottom: 1px solid var(--line-soft); } .steps__n { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--sand); min-width: 2.5rem; line-height: 1.4; } .steps p { margin: 0.4rem 0 0; color: var(--fg-soft); font-size: 0.9375rem; } /* --------------------------------------------------------- Table --------------------------------------------------------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.t { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.9375rem; } table.t th, table.t td { text-align: start; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; } table.t thead th { color: var(--sand); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.1em; border-bottom-color: var(--line); } table.t td { color: var(--fg-soft); } table.t tbody tr:hover { background: rgba(255,255,255,0.02); } :root[data-theme="light"] table.t tbody tr:hover { background: rgba(0,0,0,0.025); } table.t td:first-child { color: var(--fg); font-weight: 500; } /* --------------------------------------------------------- FAQ — native
--------------------------------------------------------- */ .faq { border-top: 1px solid var(--line-soft); } .faq details { border-bottom: 1px solid var(--line-soft); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; cursor: pointer; font-size: 1.0625rem; font-weight: 500; list-style: none; transition: color .2s; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--sand); } .faq summary::after { content: '+'; color: var(--sand); font-size: 1.5rem; font-weight: 300; line-height: 1; flex: none; transition: transform .3s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details > div { padding-bottom: 1.75rem; color: var(--fg-soft); max-width: 72ch; font-size: 0.9375rem; } .faq details > div p { margin: 0 0 0.9em; } .faq details > div p:last-child { margin-bottom: 0; } /* --------------------------------------------------------- Gallery --------------------------------------------------------- */ .gallery { display: grid; gap: 0.85rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: 1rem; } } .gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0.6rem; transition: transform .6s var(--ease), opacity .3s; } .gallery a:hover img { transform: scale(1.04); opacity: 0.9; } .gallery .span-2 { grid-column: span 2; } @media (min-width: 900px) { .gallery .tall { aspect-ratio: auto; } .gallery .span-2 img { aspect-ratio: 2 / 1; } } /* --------------------------------------------------------- Forms --------------------------------------------------------- */ .form { display: grid; gap: 1.15rem; } .field { display: grid; gap: 0.5rem; } .field label { font-size: 0.875rem; font-weight: 500; } .field label .req { color: var(--sand); } .field input, .field select, .field textarea { width: 100%; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 0.55rem; color: var(--fg); padding: 0.85rem 1rem; font: inherit; font-size: 0.9375rem; transition: border-color .2s, background-color .2s; } .field input::placeholder, .field textarea::placeholder { color: var(--placeholder); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sand); background: var(--field-focus-bg); } .field textarea { resize: vertical; min-height: 120px; } .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%); background-position: left 1.15rem top 52%, left 0.85rem top 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-inline-end: 1rem; padding-inline-start: 2.5rem; } .field select option { background: var(--bg-elev-2); color: var(--fg); } .checkbox { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: var(--fg-soft); cursor: pointer; } .checkbox input { width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; accent-color: var(--sand); flex: none; } .form-note { font-size: 0.8125rem; color: var(--fg-muted); } .contact-grid { display: grid; gap: 3rem; } @media (min-width: 900px) { .contact-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; } } .contact-item { padding-block: 1.15rem; border-bottom: 1px solid var(--line-soft); } .contact-item:first-child { border-top: 1px solid var(--line-soft); } .contact-item .k { font-size: 0.75rem; letter-spacing: 0.14em; color: var(--sand); display: block; margin-bottom: 0.35rem; } .contact-item .v { color: var(--fg); font-size: 1.0625rem; } .contact-item .v:hover { color: var(--sand); } /* --------------------------------------------------------- Callout / disclaimer --------------------------------------------------------- */ .callout { border: 1px solid var(--line); border-inline-start: 2px solid var(--sand); border-radius: 0.6rem; padding: 1.35rem 1.5rem; background: rgba(194,168,120,0.05); color: var(--fg-soft); font-size: 0.9375rem; } .callout strong { color: var(--fg); } /* --------------------------------------------------------- CTA band --------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--line-soft); background: var(--bg-elev); } .cta-band__inner { position: relative; z-index: 1; text-align: center; } .cta-band__inner .lede { margin-inline: auto; } .cta-band .btn-row { justify-content: center; margin-top: 2rem; } /* --------------------------------------------------------- Footer --------------------------------------------------------- */ .footer { background: var(--bg-foot); border-top: 1px solid var(--line-soft); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; font-size: 0.9375rem; } .footer__top { display: grid; gap: 2.5rem; } @media (min-width: 900px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } } .footer h4 { font-size: 0.75rem; letter-spacing: 0.16em; color: var(--sand); margin-bottom: 1.1rem; font-weight: 600; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .footer a { color: var(--fg-soft); transition: color .2s; } .footer a:hover { color: var(--fg); } .footer__tagline { color: var(--fg-soft); margin: 1.25rem 0 0; max-width: 40ch; } .footer__bottom { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; color: var(--fg-muted); font-size: 0.8125rem; } .footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; } .footer__disclaimer { margin-top: 1.25rem; color: var(--footer-muted); font-size: 0.75rem; line-height: 1.7; } /* --------------------------------------------------------- Floating WhatsApp + mobile CTA bar --------------------------------------------------------- */ .wa { position: fixed; inset-inline-end: 1.25rem; inset-block-end: 1.25rem; z-index: 90; width: 54px; height: 54px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 8px 26px rgba(0,0,0,0.45); transition: transform .25s var(--ease); } .wa:hover { transform: scale(1.07); } .wa svg { width: 27px; height: 27px; fill: #fff; } @media (max-width: 767px) { .wa { inset-block-end: 5rem; width: 48px; height: 48px; } .wa svg { width: 24px; height: 24px; } } .mobile-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 89; padding: 0.7rem 1rem; background: rgba(11,11,12,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); } .mobile-cta .btn { width: 100%; } @media (min-width: 768px) { .mobile-cta { display: none; } } @media (max-width: 767px) { body { padding-bottom: 4.25rem; } } /* --------------------------------------------------------- Utilities --------------------------------------------------------- */ .skip { position: absolute; inset-block-start: -100px; inset-inline-start: 1rem; background: #fff; color: #000; padding: 0.75rem 1.25rem; border-radius: 0.5rem; z-index: 200; transition: top .2s; } .skip:focus { inset-block-start: 1rem; } .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; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }