/* ============================================================================ TABADAL — Marketing homepage (design-system implementation) Pairs with ds-tokens.css (the foundation: colors, type, spacing, shadows). Visual system: Ben's Claude-built Tabadal Design System (teal/clay/cream). Motion: Emil Kowalski easings (sharper than the prototype's Material curves). A11y: WCAG AA focus / skip-link / touch targets (ui-ux-pro-max floor). ---------------------------------------------------------------------------- STAGING FILE. Live index.html is untouched. Promote by swapping links. ============================================================================ */ /* Emil-motion easing tokens (override the prototype's weak Material curves) */ :root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* enter / hover — default */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen move */ --dur-press: 140ms; --dur-hover: 180ms; --dur-reveal: 420ms; /* Tertiary text bumped one step darker than the token default so small captions clear WCAG AA on cream + sunken (ink-500 was 4.46, fails). */ --fg3: var(--ink-600); } *{ box-sizing:border-box; min-width:0; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--paper); color:var(--fg1); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } img,svg{ display:block; } .lic{ display:inline-flex; align-items:center; justify-content:center; } .lic svg{ display:block; } /* Inline SVG icons (sprite ). Default fill is black, so set the stroke style explicitly. .ic-fill (defined after) wins for solid glyphs. */ .ic{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .ic-fill{ fill:currentColor; stroke:none; } svg.mk{ flex:none; } /* Accessibility ----------------------------------------------------------- */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--brand); color:var(--fg-on-teal); padding:12px 18px; border-radius:0 0 var(--radius-md) 0; font-weight:var(--weight-semibold); } .skip-link:focus{ left:0; } :focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:var(--radius-sm); } /* On deep teal surfaces a teal ring is invisible — use a warm one */ .band-teal :focus-visible, .cta :focus-visible, .footer :focus-visible, .nav :focus-visible{ outline-color:color-mix(in oklab, var(--clay-300) 80%, transparent); } .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; } /* Layout ------------------------------------------------------------------ */ .wrap{ max-width:1200px; margin:0 auto; padding:0 32px; } .eyebrow{ font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--clay-700); } .ar{ font-family:var(--font-arabic); direction:rtl; unicode-bidi:isolate; } /* Buttons ----------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:600; border-radius:10px; padding:13px 20px; border:1px solid transparent; min-height:44px; white-space:nowrap; transition:background var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out), border-color var(--dur-hover) var(--ease-out); } .btn-lg{ padding:16px 26px; font-size:16px; border-radius:12px; } .btn-primary{ background:var(--brand); color:var(--fg-on-teal); box-shadow:var(--shadow-sm); } .btn-primary:hover{ background:var(--brand-hover); transform:translateY(-1px); box-shadow:var(--shadow-md); } .btn-primary:active{ transform:translateY(0); background:var(--brand-active); } /* clay-600 base (not clay-500) so white text clears AA 4.5:1 for normal text */ .btn-accent{ background:var(--clay-600); color:var(--fg-on-accent); box-shadow:var(--shadow-accent); } .btn-accent:hover{ background:var(--clay-700); transform:translateY(-1px); } .btn-ghost{ background:transparent; color:var(--fg1); } .btn-ghost:hover{ background:var(--sand-100); } .btn-outline{ background:transparent; color:var(--fg1); border-color:var(--border-strong); } .btn-outline:hover{ background:var(--sand-100); border-color:var(--ink-400); } .btn-white{ background:var(--surface); color:var(--brand); } .btn-white:hover{ background:var(--teal-50); } /* Nav --------------------------------------------------------------------- */ .nav{ position:sticky; top:0; z-index:50; transition:background 200ms var(--ease-out), box-shadow 200ms var(--ease-out); } .nav.scrolled{ background:rgba(250,247,239,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--border); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px; } .nav-links{ display:flex; align-items:center; gap:30px; } .nav-links a{ font-size:15px; font-weight:500; color:var(--fg2); white-space:nowrap; transition:color 140ms var(--ease-out); } .nav-links a:hover{ color:var(--fg1); } .nav-actions{ display:flex; align-items:center; gap:14px; } .logo{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:700; font-size:23px; letter-spacing:-.02em; color:var(--fg1); } .logo .mk{ width:38px; height:38px; flex:none; } .logo .suffix{ color:var(--fg3); font-weight:600; } .nav-burger{ display:none; background:none; border:0; padding:10px; color:var(--fg1); border-radius:var(--radius-sm); min-height:44px; min-width:44px; align-items:center; justify-content:center; } @media(max-width:860px){ .nav-links, .nav-actions .btn{ display:none; } .nav-burger{ display:inline-flex; } } /* Mobile menu sheet */ .msheet{ position:fixed; inset:0; z-index:60; background:rgba(20,32,29,.45); display:none; } .msheet.open{ display:block; } .msheet .panel{ position:absolute; top:0; right:0; bottom:0; width:min(300px,84vw); background:var(--paper); padding:24px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow-xl); } .msheet .panel a{ padding:14px 8px; font-size:17px; font-weight:500; border-bottom:1px solid var(--border); } /* Hero -------------------------------------------------------------------- */ .hero{ position:relative; padding:72px 0 88px; overflow:clip; } .hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(900px 520px at 80% -10%, var(--teal-50), transparent 60%); pointer-events:none; } .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative; } .hero h1{ font-family:var(--font-display); font-size:clamp(40px,6vw,62px); line-height:1.04; letter-spacing:-.025em; font-weight:700; margin:18px 0 0; color:var(--fg1); } .hero h1 .u{ position:relative; white-space:nowrap; } .hero h1 .u::after{ content:""; position:absolute; left:0; right:0; bottom:.06em; height:.28em; background:var(--clay-300); z-index:-1; border-radius:3px; } .hero p.lead{ font-size:19px; line-height:1.6; color:var(--fg2); margin:22px 0 30px; max-width:500px; } .hero-cta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; } .hero-trust{ display:flex; align-items:center; gap:18px 22px; margin-top:28px; flex-wrap:wrap; font-size:14px; color:var(--fg3); } .hero-trust .ti{ display:inline-flex; align-items:center; gap:8px; } .hero-trust .ti .lic{ color:var(--brand); } .hero-contact{ margin-top:24px; font-size:14px; color:var(--fg3); } .hero-contact a{ color:var(--fg2); border-bottom:1px solid var(--border-strong); padding-bottom:1px; transition:color 140ms var(--ease-out); } .hero-contact a:hover{ color:var(--fg1); } @media(max-width:860px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } } /* Swap visual (illustrative) */ .swapviz{ position:relative; display:flex; flex-direction:column; gap:16px; align-items:center; } .swaplabel{ align-self:flex-start; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg3); margin-bottom:2px; } .swapcard{ background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-md); padding:18px; width:min(320px,86vw); display:flex; gap:14px; align-items:center; } .swapcard .thumb{ width:56px; height:56px; border-radius:12px; flex:none; display:grid; place-items:center; color:#fff; } .swapcard .nm{ font-weight:700; font-size:16px; } .swapcard .of{ font-size:13.5px; color:var(--fg3); margin-top:2px; } .swapcard .tc{ margin-left:auto; font-family:var(--font-mono); font-weight:700; color:var(--brand); font-size:14px; font-variant-numeric:tabular-nums; } .swapbtwn{ width:52px; height:52px; border-radius:999px; background:var(--brand); color:var(--fg-on-teal); display:grid; place-items:center; box-shadow:var(--shadow-md); z-index:2; } .swapcard.b{ transform:translateX(34px); } .swapcard.a{ transform:translateX(-34px); } .swapresolve{ margin-top:8px; display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:var(--fg2); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:8px 16px; box-shadow:var(--shadow-xs); } .swapresolve b{ color:var(--fg1); font-weight:600; } .swapresolve .lic{ color:var(--brand); } @media(max-width:860px){ .swapcard.a,.swapcard.b{ transform:none; } } /* Brand-intro video block */ .intro-grid{ display:grid; grid-template-columns:1fr 360px; gap:48px; align-items:center; max-width:1000px; } .intro-video{ width:100%; max-width:360px; aspect-ratio:9/16; border-radius:18px; background:var(--bg-sunken); border:1px solid var(--border); box-shadow:var(--shadow-md); justify-self:end; } @media(max-width:760px){ .intro-grid{ grid-template-columns:1fr; gap:24px; } .intro-video{ justify-self:start; max-width:320px; } } /* Sections ---------------------------------------------------------------- */ .section{ padding:88px 0; } .section-sunken{ background:var(--bg-sunken); } .section-head{ max-width:640px; margin:0 auto 52px; text-align:center; } .section-head h2{ font-family:var(--font-display); font-size:clamp(30px,4vw,40px); letter-spacing:-.02em; font-weight:700; margin:12px 0 0; line-height:1.1; color:var(--fg1); } .section-head p{ font-size:18px; color:var(--fg2); margin:16px 0 0; line-height:1.6; } /* How it works (4 steps) */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .step{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px 24px; box-shadow:var(--shadow-xs); } .step .n{ width:42px; height:42px; border-radius:12px; background:var(--teal-50); color:var(--brand); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:18px; margin-bottom:18px; } .step h3{ font-family:var(--font-display); font-size:20px; font-weight:600; margin:0 0 8px; color:var(--fg1); } .step p{ font-size:14.5px; line-height:1.6; color:var(--fg2); margin:0; } @media(max-width:980px){ .steps{ grid-template-columns:1fr 1fr; } } @media(max-width:560px){ .steps{ grid-template-columns:1fr; } } /* Eligibility (replaces a content gap; real copy) */ .elig-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start; } .elig-checks{ display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; } .elig-item{ display:flex; align-items:flex-start; gap:12px; font-size:15.5px; line-height:1.45; color:var(--fg1); } .elig-item .mk{ flex:none; width:24px; height:24px; border-radius:999px; background:var(--teal-50); color:var(--brand); display:grid; place-items:center; margin-top:1px; } .elig-action{ grid-column:1/-1; margin-top:8px; padding-top:24px; border-top:1px solid var(--border); display:flex; gap:20px; align-items:center; flex-wrap:wrap; } .elig-action .note{ font-size:14px; color:var(--fg3); max-width:380px; } .elig-action .note a{ color:var(--fg1); border-bottom:1px solid var(--border-strong); } @media(max-width:860px){ .elig-grid{ grid-template-columns:1fr; gap:28px; } .elig-checks{ grid-template-columns:1fr; } } /* Categories */ .cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .cat{ display:flex; flex-direction:column; gap:12px; padding:22px; border-radius:16px; background:var(--surface); border:1px solid var(--border); transition:transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out); } .cat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border-strong); } .cat .ci{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--teal-50); color:var(--brand); } .cat .cn{ font-weight:600; font-size:16px; color:var(--fg1); } .cat .cc{ font-size:13px; color:var(--fg3); } @media(max-width:860px){ .cats{ grid-template-columns:1fr 1fr; } } /* The mechanic band (replaces fabricated stats — states the real model in teal) */ .band-teal{ background:var(--teal-900); color:var(--fg-on-teal); border-radius:24px; padding:52px; position:relative; overflow:hidden; } .band-teal::after{ content:""; position:absolute; right:-60px; bottom:-90px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(209,91,56,.20), transparent 65%); pointer-events:none; } .band-teal .be{ color:var(--clay-300); } .band-teal h2{ font-family:var(--font-display); font-size:clamp(26px,3.4vw,34px); font-weight:700; letter-spacing:-.02em; line-height:1.12; margin:12px 0 0; max-width:680px; position:relative; } .mech{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative; } .mech .m .mh{ font-family:var(--font-mono); font-weight:700; font-size:15px; letter-spacing:.02em; color:var(--clay-300); display:inline-flex; align-items:center; gap:9px; } .mech .m .mt{ font-family:var(--font-display); font-size:23px; font-weight:600; margin:12px 0 6px; } .mech .m .mp{ font-size:14.5px; line-height:1.55; color:var(--fg-on-teal); opacity:.82; } @media(max-width:860px){ .band-teal{ padding:32px 24px; } .mech{ grid-template-columns:1fr; gap:24px; } } /* Note from the founding team (real, no avatar / no founder identity) */ .fnote-grid{ display:grid; grid-template-columns:.7fr 1.3fr; gap:48px; align-items:start; } .fnote-label{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--clay-700); margin-bottom:10px; } .fnote-sig{ font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--fg1); } .fnote-role{ font-size:14px; color:var(--fg3); margin-top:2px; } .fnote-body p{ font-size:16.5px; line-height:1.75; color:var(--fg1); margin:0 0 16px; max-width:620px; } .fnote-body p.muted{ color:var(--fg2); } .fnote-reply{ margin-top:8px; padding-top:18px; border-top:1px solid var(--border); font-size:14px; color:var(--fg3); } .fnote-reply a{ color:var(--fg1); border-bottom:1px solid var(--border-strong); } @media(max-width:860px){ .fnote-grid{ grid-template-columns:1fr; gap:20px; } } /* Pricing tease */ .price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; } .price-display{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; } .price-display .amount{ font-family:var(--font-display); font-size:clamp(56px,9vw,92px); font-weight:700; letter-spacing:-.03em; color:var(--brand); line-height:1; } .price-display .unit{ font-size:18px; color:var(--fg3); } .price-note{ color:var(--fg2); font-size:16px; max-width:400px; line-height:1.6; } @media(max-width:768px){ .price-grid{ grid-template-columns:1fr; gap:24px; } } /* CTA panel */ .cta{ background:var(--teal-900); border-radius:28px; padding:64px; text-align:center; position:relative; overflow:hidden; color:var(--fg-on-teal); } .cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(620px 320px at 50% 120%, rgba(209,91,56,.22), transparent 60%); pointer-events:none; } .cta h2{ font-family:var(--font-display); font-size:clamp(30px,4.4vw,44px); letter-spacing:-.02em; font-weight:700; margin:0 0 14px; position:relative; } .cta p{ font-size:18px; opacity:.86; margin:0 auto 30px; max-width:540px; position:relative; line-height:1.55; } .cta .cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; } @media(max-width:860px){ .cta{ padding:40px 24px; } } /* Footer */ .footer{ background:var(--teal-950); color:rgba(234,246,242,.72); padding:64px 0 36px; } .footer .fgrid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; } .footer h4{ color:var(--fg-on-teal); font-size:14px; font-weight:600; margin:0 0 16px; } .footer a{ display:block; font-size:14.5px; padding:6px 0; color:rgba(234,246,242,.72); transition:color 140ms var(--ease-out); } .footer a:hover{ color:var(--fg-on-teal); } .footer .logo{ color:var(--fg-on-teal); margin-bottom:14px; } .footer .blurb{ font-size:14.5px; line-height:1.6; max-width:300px; } .footer .ar-nod{ font-family:var(--font-arabic); direction:rtl; font-size:20px; color:var(--clay-400); margin-top:14px; } .footer .fbot{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:24px; border-top:1px solid rgba(234,246,242,.14); font-size:13px; } @media(max-width:860px){ .footer .fgrid{ grid-template-columns:1fr 1fr; } } @media(max-width:520px){ .footer .fgrid{ grid-template-columns:1fr; } } /* Motion — ONE purposeful scroll reveal (Emil). No settle-in cascade. -------- */ .reveal{ transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } html.js .reveal{ opacity:0; transform:translateY(10px); } /* only hide when JS can reveal it */ .reveal.in{ opacity:1; transform:none; } /* the swap viz resolve draws in after the cards (a tight 2-step, not a cascade) */ .swapresolve.reveal{ transition-delay:80ms; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } } /* Motion micro-interaction: press feedback (Emil). Hovers defined above. */ .btn:active{ transform:scale(0.97); } /* ---- Mobile polish (audit 2026-05-29): tighten rhythm, full-width CTAs ---- */ @media (max-width:600px){ .section{ padding:56px 0; } .wrap{ padding:0 20px; } .hero{ padding:48px 0 56px; } } @media (max-width:480px){ .hero-cta{ flex-direction:column; align-items:stretch; } .hero-cta .btn{ width:100%; } .cta-actions{ flex-direction:column; align-items:stretch; } .cta-actions .btn{ width:100%; } } /* Taste/emil gate: never leave a stuck "lifted" hover state on touch devices */ @media (hover: none) { .cat:hover, .alist:hover { transform:none; } }