/* ═══════════════════════════════════════════════════════════════════════════ tarikalhadethi.com — built to the Sevora reference, near-1:1 The client picked sevora.framer.website and said COPY IT. So this matches its anatomy rather than blending: serif display (Lora) over a clean sans (Instrument Sans), an off-white page with white cards at ~24px radii, a near-black block as punctuation, soft shadows, and the density carried by IMAGERY — six real screenshots in a two-column work grid, plus the portrait. ⚠️ THE LESSON OF SEVEN FAILED VERSIONS, kept here so it is never relearned: every reference the client responded to was IMAGE-DRIVEN. Layout without the assets looks empty no matter how it is styled. The tiles in /shots are real captures — the app itself via PrintWindow, the live sites via headless Chrome — and the grid is the point of the whole page. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Warm paper palette anchored on the client's #ECE2D0. Same relationships as the reference (card lighter than page, hero a shade darker, near-black punctuation) - the temperature is what changed. */ --page: #ece2d0; --card: #f6f0e5; --hero: #e1d5be; --hero-top: #e6dbc7; --dark: #1b1610; --ink: #1b1610; --paper: #f8f3ea; /* light on dark: button text, dark blocks, the glass */ --grey: #6a6154; --grey-2: #877b68; /* 3.2:1 on the page, 3.5:1 on a card - the old value fell under 3 */ --line: #dacdb4; --chip: #e7dcc6; /* chips, inline code, ghost buttons */ --blue: #0099ff; --r-lg: 24px; --r-md: 16px; --r-sm: 11px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --shell: 1200px; --gut: clamp(20px, 3.4vw, 40px); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; } /* Lenis (smooth scroll) - the five rules the reference injects, verbatim. `.lenis-smooth` switches off native scroll-behavior while Lenis drives, so the `smooth` above only applies when it is not running (reduced motion, script blocked). */ html.lenis, html.lenis body { height: auto; } /* The reference's computes scroll-behavior:auto - Lenis owns every frame, and native smoothing on top of it would double-ease each write. Keyboard/touch stay native there too, so this matches, not just avoids. */ html.lenis { scroll-behavior: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } body { margin: 0; background: var(--page); color: var(--ink); font-family: "Instrument Sans", system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ::selection { background: var(--dark); color: var(--paper); } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } img { max-width: 100%; display: block; } .wrap { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); } /* ── type ────────────────────────────────────────────────────────────────── */ h1 { font-family: "Lora", Georgia, serif; font-weight: 500; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.06; letter-spacing: -0.025em; margin: 0; } h1 .soft { color: var(--grey-2); } h2 { font-family: "Lora", Georgia, serif; font-weight: 500; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.02em; margin: 0; } h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } p { margin: 0; text-wrap: pretty; } .sub { color: var(--grey); font-size: 16.5px; line-height: 1.6; } .kicker { display: block; font-size: 13.5px; font-weight: 600; color: var(--grey-2); margin-bottom: 12px; } code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.86em; background: var(--chip); border-radius: 4px; padding: 0.08em 0.34em; white-space: nowrap; } /* ── buttons: the reference's measured recipe ────────────────────────────── */ /* radius 8 · 48px tall · 12/22 padding · bevel = inset top highlight + soft drop shadow · the arrow is its own span so it can travel on hover. Values read off the live template's computed styles, not eyeballed. */ .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 12px 22px; border-radius: 8px; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; background: var(--dark); color: var(--paper); box-shadow: rgb(76, 68, 58) 0 2px 0 0 inset, rgba(27, 22, 16, 0.5) 0 2px 4px -2px, rgba(27, 22, 16, 0.18) 0 6px 14px -6px; overflow: hidden; transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease), background 0.24s var(--ease); } .btn:hover { transform: translateY(-1px); box-shadow: rgb(92, 84, 72) 0 2px 0 0 inset, rgba(27, 22, 16, 0.5) 0 4px 8px -3px, rgba(27, 22, 16, 0.24) 0 12px 24px -8px; } .btn:active { transform: translateY(0); box-shadow: rgb(76, 68, 58) 0 1px 0 0 inset, rgba(27, 22, 16, 0.5) 0 1px 2px -1px; } /* the arrow slides up-right and a fresh one arrives from below-left */ .btn .arr { position: relative; display: inline-block; width: 15px; height: 15px; overflow: hidden; flex: none; } .btn .arr svg { position: absolute; inset: 0; width: 15px; height: 15px; transition: transform 0.32s var(--ease), opacity 0.32s var(--ease); } .btn .arr svg + svg { transform: translate(-100%, 100%); opacity: 0; } .btn:hover .arr svg:first-child { transform: translate(100%, -100%); opacity: 0; } .btn:hover .arr svg + svg { transform: translate(0, 0); opacity: 1; } .btn.ghost { background: var(--chip); color: var(--ink); box-shadow: none; } .btn.ghost:hover { background: #dfd3bb; transform: translateY(-1px); box-shadow: rgba(27, 22, 16, 0.1) 0 6px 14px -6px; } /* ── nav: the reference's header, 68px, three zones ──────────────────────── */ .top { height: 68px; display: flex; align-items: center; } .top-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; } .brand { display: inline-flex; align-items: center; gap: 8px; justify-self: start; } .mark { width: 24px; height: 24px; border-radius: 7px; background: var(--dark); color: var(--paper); display: grid; place-items: center; font-family: "Lora", Georgia, serif; font-size: 15px; font-weight: 600; line-height: 1; } .name { font-weight: 600; font-size: 16px; letter-spacing: -0.02em; } .top-links { display: flex; align-items: center; gap: 32px; font-size: 15px; color: var(--ink); } .top-links a { opacity: 0.86; transition: opacity 0.18s var(--ease); } .top-links a:hover { opacity: 1; } .top .btn { justify-self: end; height: 40px; padding: 8px 16px; font-size: 14px; } /* ── hero: one big rounded card, portrait bleeding off the right ─────────── */ .hero { position: relative; background: linear-gradient(180deg, var(--hero-top) 0%, var(--hero) 100%); border-radius: var(--r-lg); overflow: hidden; min-height: clamp(420px, 42vw, 560px); display: flex; align-items: center; } .hero-in { position: relative; z-index: 2; padding: clamp(30px, 4.6vw, 70px); max-width: 60%; } .hero h1 { max-width: 13ch; } .hero .sub { margin: 18px 0 24px; max-width: 44ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 10px; } .hero-stats { display: flex; gap: clamp(24px, 3.6vw, 56px); margin-top: clamp(26px, 3.6vw, 48px); } .hero-stats b { display: block; font-family: "Lora", Georgia, serif; font-weight: 500; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1; } .hero-stats span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--grey); } /* the portrait, greyscale, hard against the right edge */ .hero-shot { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; z-index: 1; } .hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; /* mono, but WARM mono - a neutral grey photo reads cold on paper */ filter: grayscale(1) sepia(0.32) contrast(1.03); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%); mask-image: linear-gradient(to right, transparent 0%, #000 30%); } /* the dark glass widget overlapping the photo — the template's signature */ .glass { position: absolute; z-index: 3; right: clamp(18px, 3vw, 44px); bottom: clamp(18px, 3vw, 40px); display: flex; align-items: center; gap: 16px; background: rgba(27, 22, 16, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-md); padding: 16px 16px 16px 20px; color: var(--paper); max-width: 340px; transition: transform 0.18s var(--ease); } .glass:hover { transform: translateY(-2px); } .glass .g-k { font-size: 12px; color: rgba(255, 255, 255, 0.55); } .glass b { display: block; font-size: 15.5px; font-weight: 600; margin: 2px 0 3px; } .glass p { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); line-height: 1.45; } .glass .g-arr { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--paper); color: var(--dark); display: grid; place-items: center; } .glass .g-arr svg { width: 18px; height: 18px; } /* ── the ticker: the reference's logo cloud, measured ────────────────────── */ /* overflow:hidden · mask 0%→5%→95%→100% ·