/* ============================================================ TISHTUSH HOUSE TEMPLATE — style.css Extracted 2026-11-03 from the live https://tishtushpos.com/ homepage (style-65.css + footer-1.css + sophie-tikva-1.css, merged). This is a SOURCE template: stamp a client copy, fill the slots in index.html, then rename this file fresh on every publish (cache law — see README.md). DESIGN TOKENS — E.L stamp of the house tokens (founder palette ruling 2026-11-03: the color is blue, the background is white). The template's near-black ground becomes WHITE, its ink becomes E.L navy, and brand blue #0059B1 sits in the accent slot the template fills with copper (the --copper variable keeps the template's name; its value is E.L blue). --bg #FFFFFF page ground (white) --raised #EFF4FA raised panel --raised2 #E2ECF7 raised panel 2 --ink #06204A primary text (E.L navy) --cream #FFFFFF bright sections / white slab buttons --muted #42536C secondary text --faint #71809A tertiary text --copper #0059B1 THE accent (E.L brand blue) --copper-hover #2672BD --copper-ink #FFFFFF text on the accent --poster-accent #0059B1 accent on bright grounds --line #D8E2EF hairline borders --ink-dark #06204A headline navy on bright grounds Type: "IBM Plex Sans" (body/UI), "IBM Plex Sans Condensed" 700 (poster headlines, uppercase), "IBM Plex Mono" (eyebrows/labels, letterspaced uppercase). Type is the design: flat colour, no gradients, no glow, no card soup. Buttons: base .btn radius 12px; variants — b-line pill 999px outline, b-block accent slab with hard 5px offset navy shadow, b-cream white slab radius 4px, b-cline accent outline radius 12px, b-rail raised with accent bottom rule, b-band accent top/bottom rules, b-chip mono uppercase outline (header CTA). Layout: .wrap max-width 1240px, side padding 24px; sticky slim header 52px; statement sections pad clamp(104px,13vw,184px). ============================================================ */ :root{ --bg:#FFFFFF; --raised:#EFF4FA; --raised2:#E2ECF7; --ink:#06204A; --muted:#42536C; --faint:#71809A; --copper:#0059B1; --copper-ink:#FFFFFF; --line:#D8E2EF; --cream:#FFFFFF; --wrap:1240px; --hh:52px; --dots-safe:72px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--ink); font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:17.5px; line-height:1.55; -webkit-font-smoothing:antialiased; } img{max-width:100%; height:auto; display:block} /* Self-hosted poster face — IBM Plex Sans Condensed Bold, SIL OFL 1.1 (license: fonts/LICENSE-IBM-Plex.txt). Slide 1's headline only; no external font request at runtime for this face. */ a{color:var(--copper)} a:hover{text-decoration-thickness:2px} :focus-visible{outline:3px solid var(--copper); outline-offset:3px; border-radius:4px} .wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px} .mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace} /* ---------- header ---------- */ header.site{ position:sticky; top:0; z-index:40; background:rgba(6,32,74,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .header-in{display:flex; align-items:center; gap:20px; min-height:var(--hh); padding-top:4px; padding-bottom:4px; position:relative} .brand{display:flex; align-items:center; text-decoration:none; flex:none} .brand img{height:38px; width:auto} .nav-toggle{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; appearance:none; -webkit-appearance:none; clip-path:inset(50%); overflow:hidden; white-space:nowrap} .menu-btn{ display:none; margin-left:auto; cursor:pointer; user-select:none; border:1.5px solid var(--line); color:var(--ink); border-radius:999px; padding:7px 16px; font-weight:600; font-size:14.5px; min-height:40px; align-items:center; } .nav-toggle:focus-visible ~ .menu-btn{outline:3px solid var(--copper); outline-offset:3px} .navpanel{display:contents} nav.main{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap; align-items:center} nav.main a{ color:var(--muted); text-decoration:none; font-size:15.5px; font-weight:500; padding:8px 11px; border-radius:999px; min-height:40px; display:inline-flex; align-items:center; } nav.main a:hover{color:var(--ink); background:var(--raised)} nav.main a[aria-current="page"]{color:var(--copper)} .header-actions{display:flex; gap:10px; align-items:center; flex:none} /* Button system (2026-10-29, founder: the uniform copper pill is hated and gone — every button carries its own variant; no two peer buttons on a screen share a style). .btn is layout only. */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:16.5px; padding:15px 30px; text-decoration:none; cursor:pointer; min-height:54px; line-height:1.2; text-align:center; background:#FFFFFF; color:var(--ink); border:1px solid #C4D3E6; border-radius:12px; } .btn:hover{background:#EFF4FA; text-decoration:none} .btn.small{padding:10px 20px; min-height:44px; font-size:15px} .btn.b-cream{background:var(--cream); color:#06204A; border:1.5px solid var(--cream); border-radius:4px} .btn.b-cream:hover{background:#FFFFFF; border-color:#FFFFFF} .btn.b-line{background:transparent; color:var(--ink); border:1.5px solid var(--ink); border-radius:999px; text-transform:uppercase; letter-spacing:.08em; font-size:.92em} .btn.b-line:hover{background:var(--ink); color:#06204A} .btn.b-cline{background:transparent; color:var(--copper); border:1.5px solid var(--copper); border-radius:12px} .btn.b-cline:hover{background:rgba(0,89,177,.12)} .btn.b-block{background:var(--copper); color:var(--copper-ink); border:1.5px solid var(--copper); border-radius:2px; box-shadow:5px 5px 0 rgba(0,0,0,.85)} .btn.b-block:hover{background:#2672BD; border-color:#2672BD; transform:translate(-1px,-1px); box-shadow:6px 6px 0 rgba(0,0,0,.85)} .btn.b-under{background:transparent; color:var(--copper); border:0; border-radius:0; padding-left:4px; padding-right:4px; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px} .btn.b-under:hover{color:#2672BD; background:transparent} .btn.b-rail{background:var(--raised); color:var(--copper); border:1px solid var(--line); border-bottom:3px solid var(--copper); border-radius:10px} .btn.b-rail:hover{color:#2672BD; border-bottom-color:#2672BD; background:var(--raised)} .btn.b-chip{background:transparent; color:var(--ink); border:1px solid var(--ink); border-radius:6px; text-transform:uppercase; letter-spacing:.1em; font-size:12.5px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:500} .btn.b-chip:hover{background:var(--ink); color:#06204A} .btn.b-band{background:transparent; color:var(--copper); border:0; border-top:2px solid var(--copper); border-bottom:2px solid var(--copper); border-radius:0; text-transform:uppercase; letter-spacing:.06em} .btn.b-band:hover{background:rgba(0,89,177,.1)} .btn.b-text{background:transparent; color:var(--muted); border:0; border-radius:999px} .btn.b-text:hover{color:var(--ink); background:var(--raised)} .btn.ghost{background:transparent; color:var(--copper); border:1.5px solid var(--copper); border-radius:12px} .btn.ghost:hover{background:rgba(0,89,177,.12)} /* ---------- type system ---------- */ .eyebrow{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--copper); margin:0 0 22px; display:flex; align-items:center; gap:16px; } .eyebrow::before{content:""; width:38px; height:2px; background:var(--copper); flex:none} h1.page, .display{ font-size:clamp(44px,6.8vw,88px); line-height:1.0; letter-spacing:-.028em; font-weight:700; margin:0 0 20px; text-wrap:balance; } h1.page .accent, .display .accent{color:var(--copper)} .lede{font-size:clamp(18.5px,1.7vw,21.5px); color:var(--muted); margin:0 0 30px; max-width:38em; line-height:1.5} .line{font-size:clamp(18px,1.6vw,21px); color:var(--muted); margin:0; max-width:36em; line-height:1.5} .line b, .lede b{color:var(--ink); font-weight:600} .cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:34px} .cta-note{color:var(--faint); font-size:15.5px; margin:14px 0 0} section{padding:clamp(84px,11vw,150px) 0} section + section{border-top:1px solid var(--line)} h2.display{font-size:clamp(40px,6vw,80px)} .more-link{font-weight:600; font-size:17px; text-decoration:none} .more-link:hover{text-decoration:underline} /* ---------- hero slider (index) ---------- */ .slider{position:relative; overflow:hidden; background:var(--bg)} .slides{display:flex} .slide{ min-width:100%; height:calc(100svh - var(--hh)); min-height:540px; position:relative; display:flex; align-items:center; overflow:hidden; /* The bottom strip belongs to the slider dots alone: slide content is laid out in the box above it and can never reach the dot row. */ padding-bottom:var(--dots-safe); } .slide-media{position:absolute; inset:0; z-index:0} .slide-media img, .slide-media video{ width:100%; height:100%; object-fit:cover; display:block; } /* bright slides (2 & 3) — bright photo-slide grammar: white ground, black type, black pill. The contrast against the near-black hero slide is the point. */ .slide-bright{background:#FFFFFF; color:#06204A; display:grid; grid-template-columns:1fr 1fr; align-items:stretch} .slide-bright .bright-media{position:relative; overflow:hidden} .slide-bright .bright-media img, .slide-bright .bright-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .slide-bright .bright-in{ align-self:center; padding:clamp(28px,4.5vw,72px); max-width:640px; } .slide-bright .bright-in .eyebrow{color:#06204A} .slide-bright .slide-line{color:#42536C} .slide-bright .slide-h{font-size:clamp(42px,6.4vw,92px)} .slide-bright .bright-media img.sophie{object-position:center 20%} .btn.dark{background:#06204A; border-color:#06204A; color:#FFFFFF; border-radius:12px} .btn.dark:hover{background:#0B2E63; border-color:#0B2E63} /* QR signup slide (homepage slide 2) — house grammar on the dark stage: the get-started card IS the visual, presented large and clean; one headline, one short line, copper the only accent. The card's own ground is #06204A with transparent corners, so it sits on the stage seamlessly. */ .slide-qr{background:var(--bg); color:var(--ink)} .slide-qr-in{ position:relative; z-index:2; width:100%; display:grid; grid-template-columns:.84fr 1.16fr; gap:clamp(30px,4vw,56px); align-items:center; } .qr-media img{width:100%; height:auto; display:block} .qr-card-link{display:block; -webkit-tap-highlight-color:transparent} .qr-card-link:active{opacity:.92} .qr-tap-hint{ margin:12px 0 0; text-align:center; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--copper); } .slide-qr .slide-line{margin-bottom:0} /* leads slide (homepage slide 4) — full-bleed original scene, live type over the photograph's dark left half; one copper ask. A scrim (not a card) holds the type's contrast while staying honest to the photo. */ .slide-leads{background:var(--bg); color:var(--ink)} .slide-leads::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(6,32,74,.90) 0%, rgba(6,32,74,.72) 34%, rgba(6,32,74,.18) 62%, rgba(6,32,74,0) 78%); } .slide-leads-in{position:relative; z-index:2; width:100%} .slide-leads .slide-h{max-width:8em} .slide-leads .slide-line{max-width:25em} two-pill row): ONE pill — "Sign up", black, flex-grown to the full poster content width, the width the single wide pill owned in the reference render. The owner: "For two buttons is an issue — have only the sign-up button." Log in lives in the header menu only. */ .poster-cta{display:flex; gap:12px; justify-content:center; align-items:stretch; flex-wrap:nowrap; width:100%} .poster-cta .poster-signup{flex:1 1 auto} .btn.outline-dark{background:transparent; color:#06204A; border:1.5px solid #06204A} .btn.outline-dark:hover{background:rgba(17,17,17,.08); border-color:#06204A; text-decoration:none} /* poster slide (homepage slide 1) — house grammar: the photo IS the first screen, full-bleed edge to edge; poster headline on the bright ground; one short line; ONE black pill. Nothing else competes on the slide. */ .slide-poster{ background:#FFFFFF; color:#06204A; display:grid; grid-template-columns:1.08fr .92fr; align-items:stretch; } .poster-media{position:relative; overflow:hidden} .poster-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 16%; display:block; } .poster-in{ align-self:center; justify-self:center; text-align:center; padding:clamp(28px,4.5vw,72px); max-width:720px; } .poster-h{ font-family:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:clamp(76px,8.8vw,164px); line-height:.94; letter-spacing:-.01em; font-weight:700; margin:0 0 20px; text-wrap:balance; color:#06204A; text-transform:uppercase; } .poster-h .accent{color:#0059B1} .poster-line{ font-size:clamp(18.5px,1.9vw,22.5px); color:#42536C; max-width:24em; margin:0 auto 30px; line-height:1.45; } .slider.on-bright .dots button{border-color:#06204A} .slider.on-bright .dots button[aria-current="true"]{background:#06204A} .slide-in{position:relative; z-index:2; width:100%; padding-top:30px; padding-bottom:16px} .poster-media, .poster-in, .slide-bright .bright-media, .slide-bright .bright-in{min-height:0} .slide-1{ background-color:var(--bg); background-image:linear-gradient(90deg, rgba(242,237,232,.05) 1px, transparent 1px); background-size:calc(100%/6) 100%; } .hero-h1{ font-size:clamp(54px,12.6vw,148px); line-height:.97; letter-spacing:-.032em; font-weight:700; margin:0 0 26px; text-wrap:balance; } .hero-h1 .accent{color:var(--copper)} .hero-sub{font-size:clamp(18.5px,2vw,23px); color:var(--muted); max-width:30em; margin:0 0 32px; line-height:1.45} .slide-h{ font-size:clamp(46px,9.4vw,118px); line-height:.98; letter-spacing:-.03em; font-weight:700; margin:0 0 18px; text-wrap:balance; } .slide-h .accent{color:var(--copper)} .slide-line{font-size:clamp(18px,1.9vw,22px); color:#E8E2DA; max-width:26em; margin:0 0 30px; line-height:1.45} .status{ display:block; margin-top:28px; font-size:15px; color:var(--muted); max-width:34em; } .status b{color:var(--copper); font-weight:600} html.js .slides{transition:transform .65s cubic-bezier(.22,.61,.21,1)} html:not(.js) .slides{flex-direction:column} html:not(.js) .slide{height:auto; min-height:0; padding:70px 0} .dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:27px; z-index:6; display:none; gap:8px; } html.js .dots{display:flex} .dots button{ width:9px; height:9px; border-radius:999px; border:1.5px solid var(--copper); background:transparent; padding:0; cursor:pointer; transition:all .3s; } .dots button[aria-current="true"]{background:var(--copper); width:30px} .dots button:focus-visible{outline:3px solid var(--copper); outline-offset:3px} /* ---------- full-screen stills (index, below the slider) ---------- */ .still{ min-height:100svh; display:flex; align-items:center; position:relative; overflow:hidden; padding:96px 0; border-top:1px solid var(--line); } .still-in{position:relative; z-index:2; width:100%} .still-h{ font-size:clamp(44px,7.4vw,104px); line-height:.99; letter-spacing:-.03em; font-weight:700; margin:0 0 20px; text-wrap:balance; } .still-h .accent{color:var(--copper)} .still .say{ font-size:clamp(20px,2.2vw,26px); color:var(--ink); max-width:30em; margin:0 0 8px; line-height:1.4; } .still-media{position:absolute; inset:0; z-index:0} .still-media img, .still-media video{width:100%; height:100%; object-fit:cover; display:block} .still-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,32,74,.86) 0%, rgba(6,32,74,.38) 52%, rgba(6,32,74,.30) 100%); } .still-media img{object-position:center 30%} .still-pro{background:var(--raised)} /* inner Pro slider */ /* ---------- statement sections: homepage below the slider ---------- The type is the design: one idea, one line, hairline rules, negative space, and media shown full-width instead of trapped behind copy. */ .stmt-section{ padding:clamp(104px,13vw,184px) 0; border-top:1px solid var(--line); position:relative; overflow:hidden; } .stmt-section .eyebrow{margin-bottom:30px} .stmt-h{ font-size:clamp(40px,7vw,88px); line-height:.98; letter-spacing:-.032em; font-weight:700; margin:0 0 24px; text-wrap:balance; } .stmt-line{ font-size:clamp(19px,2vw,23px); line-height:1.45; color:var(--muted); margin:0; max-width:34em; } .stmt-line b{color:var(--ink); font-weight:600} /* photo-behind sections (2026-10-29 founder rule: every section carries a photo behind its copy). The photo stays bright up top — the shade gathers only where the words sit, the way the deck's leads slide does it. */ .stmt-bg{display:flex; flex-direction:column; justify-content:flex-end; min-height:96svh} .sec-bg{position:absolute; inset:0; z-index:0; background:#000} .sec-bg img{width:100%; height:100%; object-fit:cover; display:block} .stmt-bg::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(6,32,74,.10) 0%, rgba(6,32,74,.22) 42%, rgba(6,32,74,.86) 74%, rgba(6,32,74,.97) 100%); } .stmt-bg .wrap{position:relative; z-index:2; width:100%; min-width:0} /* face sections (install + counter): the shade gathers earlier so the headline never sits on a face — eyes stay in the bright zone, the words land in the dark one. */ .stmt-bg.bgface{min-height:115svh} .stmt-bg.bgface::after{ background:linear-gradient(180deg, rgba(6,32,74,.08) 0%, rgba(6,32,74,.16) 32%, rgba(6,32,74,.80) 54%, rgba(6,32,74,.96) 76%, rgba(6,32,74,.98) 100%); } /* the Pro section runs tall (intro + carousel): a deeper shade overall so every mini slide stays readable over the scene. */ .stmt-pro.stmt-bg::after{ background:linear-gradient(180deg, rgba(6,32,74,.34) 0%, rgba(6,32,74,.44) 45%, rgba(6,32,74,.78) 78%, rgba(6,32,74,.94) 100%); } .bg-call img{object-position:center 28%} .bg-install img{object-position:center 45%} .bg-counter img{object-position:center 45%} .bg-close img{object-position:center 32%} .stmt-close .stmt-line{font-size:clamp(21px,2.4vw,28px)} /* ---------- statements ---------- */ .statement{ display:grid; grid-template-columns:110px 1fr; gap:10px 34px; padding:clamp(52px,7vw,84px) 0; border-top:1px solid var(--line); } .statement:first-child{border-top:none; padding-top:6px} .statement .idx{ font-family:"IBM Plex Mono",monospace; color:var(--copper); font-size:15px; letter-spacing:.18em; padding-top:clamp(12px,1.6vw,22px); } .statement h3{ font-size:clamp(38px,5.6vw,72px); line-height:1.0; letter-spacing:-.026em; font-weight:700; margin:0 0 14px; text-wrap:balance; } .statement p{font-size:clamp(18px,1.6vw,21px); color:var(--muted); margin:0; max-width:34em; line-height:1.5} .statement p b{color:var(--ink); font-weight:600} /* ---------- faces ---------- */ .faces{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px)} .face figure{margin:0 0 24px} .face img{width:100%; aspect-ratio:1; object-fit:cover} .face .role{ font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--copper); margin:0 0 10px; } .face h3{font-size:clamp(34px,4vw,54px); line-height:1.02; letter-spacing:-.024em; margin:0 0 12px; font-weight:700} .face p{color:var(--muted); font-size:18.5px; margin:0 0 12px; max-width:26em; line-height:1.5} .face .mins{font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--faint); letter-spacing:.04em; margin:0 0 16px} /* ---------- full-bleed media ---------- */ .bleed{width:100%; margin:0} .bleed img{width:100%; height:auto} .bleed.tall img{aspect-ratio:16/8.4; object-fit:cover; object-position:center 38%} video.ph{width:100%; background:#000; display:block} /* ---------- plain rows & columns (no cards) ---------- */ .cols{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.6vw,48px)} .col{border-top:2px solid var(--copper); padding-top:20px} .col .tag{ font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--copper); display:block; margin-bottom:12px; } .col h3{font-size:23px; margin:0 0 10px; letter-spacing:-.01em} .col p{color:var(--muted); margin:0; font-size:17px} ul.lines{list-style:none; padding:0; margin:0} ul.lines li{ padding:15px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:18px; } ul.lines li:first-child{padding-top:2px} ul.lines li b{color:var(--ink); font-weight:600} .rows{border-top:1px solid var(--line)} .row-item{ display:grid; grid-template-columns:220px 1fr; gap:8px 40px; padding:30px 0; border-bottom:1px solid var(--line); align-items:baseline; } .row-item .tag{ font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--copper); } .row-item h3{font-size:clamp(24px,2.8vw,34px); margin:0 0 8px; letter-spacing:-.018em} .row-item p{color:var(--muted); margin:0; font-size:18px; max-width:38em} .row-item p + p{margin-top:8px} /* ---------- split (services) ---------- */ .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.5vw,64px); align-items:center} .split .ph{width:100%; aspect-ratio:1; object-fit:cover} .split.flip .split-media{order:2} /* ---------- pricing ---------- */ .plans{display:grid; grid-template-columns:1fr 1fr 1fr; gap:clamp(26px,3.6vw,48px); align-items:start} .plan{border-top:1px solid var(--line); padding-top:24px; display:flex; flex-direction:column} .plan.pro{border-top:2px solid var(--copper)} .plan .tag{ font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--copper); display:block; margin-bottom:14px; } .plan .amount{font-size:clamp(54px,5.6vw,78px); font-weight:700; letter-spacing:-.03em; line-height:1; margin:0 0 6px} .plan .amount .per{font-size:.38em; color:var(--faint); font-weight:600; letter-spacing:0} .plan .per-line{color:var(--faint); font-size:15.5px; margin:0 0 20px} .plan ul.lines{margin-bottom:26px} .plan ul.lines li{font-size:16.5px; padding:12px 0} .plan .btn{margin-top:auto; align-self:flex-start} .fineprint{color:var(--faint); font-size:15px; max-width:62em; margin-top:34px} table.fees{width:100%; border-collapse:collapse; margin:10px 0 6px} table.fees th, table.fees td{ text-align:left; padding:20px 16px 20px 0; border-bottom:1px solid var(--line); vertical-align:top; font-size:17.5px; } table.fees th{color:var(--ink); font-weight:600; width:30%; font-size:19px} table.fees td{color:var(--muted)} .example-num{color:var(--ink); font-weight:700} /* ---------- faq ---------- */ details{border-top:1px solid var(--line); padding:2px 0} details:last-of-type{border-bottom:1px solid var(--line)} summary{ cursor:pointer; font-weight:600; font-size:clamp(21px,2.5vw,29px); letter-spacing:-.015em; padding:26px 40px 26px 0; min-height:44px; list-style:none; position:relative; } summary::-webkit-details-marker{display:none} summary::after{ content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%); color:var(--copper); font-weight:400; font-size:30px; } details[open ] summary::after{content:"–"} details p{color:var(--muted); margin:0 0 28px; max-width:44em; font-size:18px; line-height:1.55} /* ---------- closing / end cta ---------- */ .closing h2{ font-size:clamp(42px,6.6vw,86px); line-height:1.0; letter-spacing:-.028em; font-weight:700; margin:0 0 20px; text-wrap:balance; } .closing p.say{ font-size:clamp(20px,2.2vw,26px); color:var(--ink); max-width:30em; margin:0 0 8px; line-height:1.4; } .endcta h2{ font-size:clamp(38px,5.6vw,72px); line-height:1.0; letter-spacing:-.026em; font-weight:700; margin:0 0 16px; text-wrap:balance; } /* ---------- footer ---------- */ footer.site{border-top:1px solid var(--line); padding:52px 0 48px} .footer-grid{display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start} footer.site .footer-grid img{height:48px; width:auto; border-radius:6px} footer.site nav{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto} footer.site nav a{ color:var(--muted); text-decoration:none; padding:10px 12px; font-size:15.5px; min-height:44px; display:inline-flex; align-items:center; border-radius:999px; } footer.site nav a:hover{color:var(--ink)} .foot-note{color:var(--faint); font-size:14.5px; margin-top:26px; max-width:72em} .big-call{ font-size:clamp(38px,8vw,92px); font-weight:700; letter-spacing:-.03em; line-height:1.05; margin:10px 0 14px; } .big-call a{text-decoration:none; color:var(--ink)} .big-call a:hover{color:var(--copper)} @media (max-width:1020px){ .cols,.plans{grid-template-columns:1fr; gap:38px} .plan .btn{align-self:stretch} } @media (max-width:900px){ .faces,.split{grid-template-columns:1fr} .split.flip .split-media{order:0} .statement{grid-template-columns:1fr; gap:2px} .statement .idx{padding-top:0} .row-item{grid-template-columns:1fr; gap:4px} .menu-btn{display:inline-flex} .navpanel{ display:none; position:absolute; top:calc(100% + 10px); left:12px; right:12px; background:var(--raised); border:1px solid var(--line); border-radius:18px; box-shadow:0 26px 60px rgba(0,0,0,.55); padding:14px 18px 16px; flex-direction:column; align-items:stretch; gap:4px; } .nav-toggle:checked ~ .navpanel{display:flex} nav.main{margin-left:0; flex-direction:column; align-items:stretch; gap:0} nav.main a{padding:11px 6px; font-size:17px; border-radius:0; border-bottom:1px solid var(--line)} nav.main a:last-child{border-bottom:0} .header-actions{flex-direction:column; align-items:flex-start; gap:10px; margin-top:12px; padding-top:14px; border-top:1px solid var(--line)} section{padding:76px 0} .slide{min-height:480px} /* The photo row takes every pixel the type row doesn't (1fr / auto): no fixed share can starve the jacket again at an in-between height. */ .slide-poster{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto} .poster-in{align-self:start; padding:16px 24px 14px} .poster-h{font-size:clamp(54px,15vw,92px); margin-bottom:12px} .poster-line{margin-bottom:18px} .slide-bright{grid-template-columns:1fr; grid-template-rows:44% 56%} .slide-bright .bright-media{order:-1} .slide-bright .bright-in{order:0; align-self:start; padding:26px 24px 16px} .slide-qr-in{grid-template-columns:1fr; gap:20px; align-content:center; padding-left:0; padding-right:0} .slide-qr .qr-copy{padding:0 24px} .slide-qr .qr-media{padding:0} .slide-leads{align-items:flex-end} .slide-leads .slide-media img{object-position:64% center} .slide-leads::after{background:linear-gradient(0deg, rgba(6,32,74,.95) 0%, rgba(6,32,74,.86) 52%, rgba(6,32,74,.45) 78%, rgba(6,32,74,.18) 100%)} .slide-leads-in{padding-bottom:24px} .bleed.tall img{aspect-ratio:4/4.6; object-position:center 30%} } @media (max-width:900px) and (max-height:760px){ /* Short phones (and short in-app browsers): the dots strip narrows to 60px (the dots themselves occupy 27–36px from the bottom, so the clearance stays wide) and the poster type compacts hard — smaller headline, tighter line, lower pill — so the 1fr photo row grows until the jacket is plainly across the bottom of the band here too. */ :root{--dots-safe:60px} .poster-in{padding:6px 20px 2px} .poster-h{font-size:34px; margin-bottom:5px} .poster-line{font-size:14.5px; margin-bottom:8px} .poster-cta .btn{min-height:46px; padding-top:10px; padding-bottom:10px; font-size:15px} .slide-in{padding-top:10px; padding-bottom:8px} .slide-1 .eyebrow{margin-bottom:14px} .hero-h1{font-size:47px; margin-bottom:16px} .hero-sub{font-size:18px; margin-bottom:22px} .status{margin-top:18px; font-size:14px} .slide-bright{grid-template-rows:35% 65%} .slide-bright .bright-in{padding:16px 24px 12px} .slide-bright .bright-in .eyebrow{margin-bottom:14px} .slide-bright .slide-h{font-size:40px; margin-bottom:12px} .slide-bright .slide-line{font-size:17.5px; margin-bottom:20px} .slide-qr-in{gap:14px} .slide-qr .slide-h{font-size:40px; margin-bottom:12px} .slide-qr .slide-line{font-size:17.5px} .slide-leads .eyebrow{margin-bottom:14px} .slide-leads .slide-h{font-size:40px; margin-bottom:12px} .slide-leads .slide-line{font-size:17.5px; margin-bottom:20px} .slide-leads-in{padding-bottom:14px} } @media (max-width:900px) and (min-height:761px) and (max-height:860px){ /* Mid-height phones: the un-compacted poster type is tall enough to starve the 1fr photo row (at 844 the band fell to 332px and the jacket shrank back to a sliver) — compact the type moderately here too, so the photo keeps its quarter-plus of jacket. */ .poster-in{padding:10px 24px 6px} .poster-h{font-size:44px; margin-bottom:8px} .poster-line{font-size:17px; margin-bottom:12px} .poster-cta .btn{min-height:50px; padding-top:12px; padding-bottom:12px} } @media (max-width:900px) and (min-height:861px){ /* Tall phones: no poster override needed — the 1fr / auto rows give the photo the whole stage above the type at these heights too. */ } @media (max-width:900px){ .stmt-section{padding:88px 0} .stmt-bg{min-height:92svh} .stmt-bg.bgface{min-height:106svh} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} html.js .slides{transition:none} } /* photo behind every section (all pages) */ .phsec{position:relative;overflow:hidden;isolation:isolate} .phsec>.ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .phsec>.ph-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,32,74,.80),rgba(6,32,74,.90))} .phsec.ph-deep>.ph-shade{background:linear-gradient(180deg,rgba(6,32,74,.88),rgba(6,32,74,.95))} .phsec>.wrap,.phsec>.endcta-in{position:relative;z-index:2} .slide-qr>.qr-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .slide-qr>.ph-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(6,32,74,.88) 30%,rgba(6,32,74,.45))} .slide-qr>.slide-qr-in{position:relative;z-index:2} .phsec.ph-band>.ph-bg{height:440px} .phsec.ph-band>.ph-shade{background:linear-gradient(180deg,rgba(6,32,74,.80),rgba(6,32,74,.93) 300px,#06204A 440px)} /* Geo-Grid proof tile inside Pro mini-slide 2 */ /* st4 AI-bots supporting line */ .stmt-line.ai-line{margin-top:14px; font-size:clamp(18px,2vw,23px)} /* Pro section photo (2026-10-29 update): the grows slide's own photo and the brief's first fallback both already appear in the professions slider (skincare + med-spa slides), so the section carries the owner-at-his-books photo instead — unused on this page. The crop rides left so the owner's face stays at the right edge, clear of the headline. */ .bg-pro img{object-position:78% 32%} /* Grows section phone treatment (2026-10-29 growsfix): the .bgface pattern scoped to phones. The deep .stmt-pro shade above was tuned for the old tall carousel and, paired with the landscape crop, crushed the golden photo to a black void on phones. On phone the section now runs taller (106svh, the bgface phone height), carries a dedicated portrait crop of the same photo, and wears the bgface gradient — shade off the face up top, gathering only where the words sit. Desktop is unchanged. */ @media (max-width:900px){ .stmt-pro.stmt-bg{min-height:106svh} .stmt-pro.stmt-bg::after{ background:linear-gradient(180deg, rgba(6,32,74,.08) 0%, rgba(6,32,74,.16) 32%, rgba(6,32,74,.80) 54%, rgba(6,32,74,.96) 76%, rgba(6,32,74,.98) 100%); } .bg-pro img{content:url("/assets/section-scene-1.jpg"); object-position:center 30%} } /* ============ Professions slider (2026-10-29 update) ============ "One Sophie. Every trade." — the approved mock, carried into the package skin (IBM Plex, brand tokens). Badge card is constant across slides; only the scene, the words, and the badge's role line change. */ .prof{padding:clamp(56px,8vw,96px) 0 clamp(48px,6vw,72px)} .prof-h{text-align:center; font-size:clamp(32px,4.6vw,44px); font-weight:700; letter-spacing:-.02em; line-height:1.08} .prof-h span{color:var(--copper)} .prof-sub{text-align:center; color:var(--muted); font-size:16.5px; margin:12px auto 30px; max-width:520px; line-height:1.55} .prof-stage{position:relative; border-radius:26px; overflow:hidden; border:1px solid var(--line); background:var(--raised)} .prof-track{display:flex; transition:transform .55s cubic-bezier(.22,.8,.24,1)} .prof-slide{position:relative; flex:0 0 100%; min-height:520px} .prof-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block} .prof-shade{position:absolute; inset:0; background:linear-gradient(90deg, rgba(6,32,74,.88) 22%, rgba(6,32,74,.45) 55%, rgba(6,32,74,.12) 80%)} .prof-copy{position:absolute; left:86px; top:50%; transform:translateY(-50%); max-width:52%} .prof-kick{display:flex; align-items:center; gap:12px; color:var(--copper); font-size:13px; font-weight:700; letter-spacing:.28em; margin-bottom:18px} .prof-kick::before{content:""; width:34px; height:2px; background:var(--copper); flex:none} .prof-copy h3{font-size:clamp(34px,4.4vw,52px); font-weight:700; letter-spacing:-.02em; line-height:1.05} .prof-copy h3 em{font-style:normal; color:var(--copper); display:block} .prof-copy p{margin-top:16px; font-size:17px; line-height:1.55; color:#EDE7DC; max-width:440px} .prof-cta{margin-top:24px} .prof-badge{position:absolute; right:44px; top:50%; transform:translateY(-50%); width:236px; background:#06204A; border:1px solid #33527E; border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.55)} .prof-bar{display:flex; justify-content:space-between; align-items:center; padding:11px 14px; font-size:10.5px; letter-spacing:.18em; color:#C9D8EC; border-bottom:1px solid #33527E} .prof-bar b{color:var(--ink); font-weight:700} .prof-face{margin:12px 12px 0; border-radius:120px 120px 14px 14px; overflow:hidden; aspect-ratio:4/4.6} .prof-face img{width:100%; height:100%; object-fit:cover; object-position:50% 8%; display:block} .prof-who{padding:13px 16px 16px} .prof-nm{display:flex; align-items:center; gap:9px} .prof-name{font-size:23px; font-weight:700; letter-spacing:-.01em} .prof-pill{font-size:9.5px; font-weight:700; letter-spacing:.1em; background:var(--copper); color:var(--copper-ink); padding:4px 8px; border-radius:999px} .prof-role{margin-top:5px; font-size:13.5px; color:var(--muted)} .prof-duty{margin-top:10px; display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#CDE8CF} .prof-duty i{width:7px; height:7px; border-radius:50%; background:#58C472; display:inline-block} .prof-arrow{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:0; background:#000; color:#fff; font-size:24px; cursor:pointer; z-index:5; box-shadow:0 8px 24px rgba(0,0,0,.5)} .prof-prev{left:16px} .prof-next{right:16px} .prof-dots{display:flex; justify-content:center; gap:8px; margin-top:20px} .prof-dots button{width:9px; height:9px; border-radius:999px; border:0; background:#B9C9DE; cursor:pointer; padding:0; transition:all .3s} .prof-dots button[aria-current="true"]{width:28px; background:var(--copper)} @media (max-width:760px){ .prof-slide{min-height:540px} .prof-shade{background:linear-gradient(180deg, rgba(6,32,74,.84) 0%, rgba(6,32,74,.38) 52%, rgba(6,32,74,.55) 100%)} .prof-copy{left:20px; right:20px; top:64px; transform:none; max-width:100%} .prof-kick{font-size:10px; letter-spacing:.16em; margin-bottom:12px} .prof-kick::before{width:22px} .prof-copy h3{font-size:30px} .prof-copy p{font-size:14.5px; margin-top:11px; max-width:300px} .prof-cta{margin-top:16px; font-size:14.5px; min-height:44px; padding:10px 18px} .prof-badge{left:14px; right:14px; top:auto; bottom:14px; transform:none; width:auto; display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:16px} .prof-bar{display:none} .prof-face{margin:0; width:46px; height:46px; flex:none; border-radius:50%; aspect-ratio:auto} .prof-who{padding:0; flex:1; min-width:0} .prof-nm{gap:7px} .prof-name{font-size:16px} .prof-pill{font-size:7.5px; padding:3px 6px} .prof-role{font-size:11px; margin-top:2px} .prof-duty{font-size:10px; margin-top:3px} .prof-arrow{width:38px; height:38px; font-size:18px; top:14px; transform:none} .prof-prev{left:10px} .prof-next{right:10px} } /* ============ Video reel (2026-10-29 update) ============ "See Sophie at work." — the approved mock: portrait film cards, tap to play (the film swaps in only on a tap — nothing autoplays). */ .reel-sec{padding:clamp(48px,6vw,72px) 0 clamp(56px,7vw,84px)} .reel-head{max-width:560px; margin:0 auto; text-align:center} .reel-head h2{font-size:clamp(30px,4.4vw,42px); font-weight:700; letter-spacing:-.02em; line-height:1.12} .reel-head h2 .accent{color:var(--copper)} .reel-sub{margin-top:12px; font-size:16.5px; line-height:1.5; color:var(--muted)} .reel{margin-top:28px; display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 22px 10px; scrollbar-width:none} .reel::-webkit-scrollbar{display:none} .reel-card{flex:0 0 76%; max-width:320px; scroll-snap-align:center} .reel-frame{position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/5; background:var(--raised); border:1px solid var(--line); cursor:pointer} .reel-poster{width:100%; height:100%; object-fit:cover; display:block} .reel-frame video{width:100%; height:100%; object-fit:cover; display:block} .reel-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,32,74,.06) 55%, rgba(6,32,74,.45)); pointer-events:none} .reel-dur{position:absolute; top:12px; right:12px; background:rgba(6,32,74,.72); color:var(--ink); font-size:13px; font-weight:600; padding:4px 9px; border-radius:8px} .reel-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.35); pointer-events:none} .reel-play::after{content:""; border-left:22px solid #111; border-top:14px solid transparent; border-bottom:14px solid transparent; margin-left:5px} .reel-chip{position:absolute; left:12px; bottom:12px; width:52px; height:52px; border-radius:50%; overflow:hidden; border:2.5px solid #fff; box-shadow:0 6px 18px rgba(0,0,0,.4)} .reel-chip img{width:100%; height:100%; object-fit:cover; display:block} .reel-cap{margin-top:13px; font-size:16.5px; font-weight:600; line-height:1.4; text-align:center; padding:0 6px} .reel-cap span{color:var(--muted); font-weight:400} .reel-dots{margin-top:20px; display:flex; gap:8px; justify-content:center} .reel-dots button{width:9px; height:9px; border-radius:99px; border:none; background:#B9C9DE; cursor:pointer; padding:0; transition:all .25s} .reel-dots button[aria-current="true"]{width:30px; background:var(--ink)} @media (min-width:760px){ .reel-card{flex-basis:300px} .reel{justify-content:safe center} } /* With six cards the reel scrolls at desktop widths too — the dots are working controls there, so they stay visible at every width. */ /* ---------- footer groups (from live footer-1.css) ---------- */ /* Footer groups (2026-11-02): Company / Partners accordion + legal row. Loaded after the brand stylesheet on every page; the brand sheets are untouched. All rules are scoped under footer.site so they win over the brand footer's generic nav rules. */ footer.site .foot-groups{display:flex;gap:clamp(30px,6vw,88px);margin-left:auto;flex-wrap:wrap} footer.site .foot-title{margin:0 0 12px;font-size:15px;line-height:1.2} footer.site .foot-toggle{ background:none;border:0;padding:0;margin:0;cursor:pointer; font:inherit;font-weight:700;color:#FFFFFF;letter-spacing:.01em; display:inline-flex;align-items:center;gap:10px;text-align:left; } footer.site .foot-chev{ width:9px;height:9px;flex:none;display:none; border-right:2px solid #0059B1;border-bottom:2px solid #0059B1; transform:rotate(45deg);transition:transform .18s ease; } footer.site .foot-group:not(.is-open) .foot-chev{transform:rotate(-45deg)} footer.site .foot-links{ display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start; gap:2px;margin:0; } footer.site .foot-links a{ color:var(--muted);text-decoration:none;font-size:15.5px;line-height:1.35; padding:7px 0;min-height:36px;display:inline-flex;align-items:center;border-radius:0; } footer.site .foot-links a:hover{color:#FFFFFF} footer.site .foot-legal{ display:flex;gap:4px;flex-wrap:wrap;margin:34px 0 0;padding-top:22px; border-top:1px solid var(--line); } footer.site .foot-legal a{ color:var(--muted);text-decoration:none;padding:10px 12px;font-size:15.5px; min-height:44px;display:inline-flex;align-items:center;border-radius:999px;margin:0; } footer.site .foot-legal a:hover{color:#FFFFFF} footer.site .foot-note{margin-top:18px} @media (min-width:901px){ footer.site .foot-toggle{pointer-events:none;cursor:default} footer.site .foot-links{display:flex} } @media (max-width:900px){ footer.site .foot-groups{flex-direction:column;gap:0;margin-left:0;width:100%} footer.site .foot-group{border-top:1px solid var(--line);width:100%} footer.site .foot-title{margin:0} footer.site .foot-toggle{ width:100%;display:flex;justify-content:space-between; padding:16px 0;min-height:54px;cursor:pointer; } footer.site .foot-chev{display:block} footer.site .foot-links{display:none;padding:2px 0 16px} footer.site .foot-group.is-open .foot-links{display:flex} footer.site .foot-links a{padding-left:16px;min-height:44px} } /* ---------- meet-the-agent + accent slide (from live sophie-tikva-1.css) ---------- */ /* TishTush — Meet Sophie section + Tikva hero slide (2026-11-02). Loaded ONLY by index.html, after style-65.css and footer-1.css. House grammar throughout: cream #FFFFFF / ink #06204A on the bright slide (poster accent #0059B1), the site ground + copper on the dark section, IBM Plex, flat colour, no gradients, no glow. New filename per the cache law — style-65.css is untouched. */ /* ---------- Meet Sophie (dark section, right after the hero) ---------- */ .meet-in{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px,5vw,84px); align-items:center; } /* The portrait figure keeps the source's exact 2:3 frame, so the cover fit crops nothing: head, shoulders, upper body and the cream blazer are all in frame at every width — the founder's wide-framing rule. */ .meet-media{ margin:0; aspect-ratio:2/3; max-width:460px; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--raised); } .meet-media img{width:100%; height:100%; object-fit:cover; object-position:center; display:block} .meet-h{ font-size:clamp(52px,6.4vw,96px); line-height:.98; letter-spacing:-.03em; font-weight:700; margin:0 0 22px; text-wrap:balance; } .meet-line{ font-size:clamp(20px,2.1vw,25px); line-height:1.45; color:var(--ink); margin:0 0 18px; max-width:32em; } .meet-role{color:var(--muted); font-size:16.5px; margin:0; max-width:34em} /* ---------- Tikva slide (hero slide 4 — bright poster grammar) ---------- */ .slide-tikva{background:var(--cream); color:#06204A; justify-content:center} .tikva-in{width:100%; text-align:center; position:relative; z-index:2} .slide-tikva .eyebrow{color:#06204A; justify-content:center} .tikva-h{ font-family:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:clamp(76px,8.8vw,164px); line-height:.94; letter-spacing:-.01em; font-weight:700; margin:0 0 20px; text-wrap:balance; color:#06204A; text-transform:uppercase; } .tikva-h .accent{color:#0059B1} .tikva-line{ font-size:clamp(18.5px,1.9vw,22.5px); color:#42536C; max-width:26em; margin:0 auto 30px; line-height:1.45; } /* ---------- phone / tablet ---------- */ @media (max-width:900px){ .meet-in{grid-template-columns:1fr; gap:30px} .meet-media{max-width:440px; margin:0 auto; width:100%} .tikva-h{font-size:clamp(52px,14.5vw,88px); margin-bottom:12px} .tikva-line{margin-bottom:22px} } @media (max-width:900px) and (max-height:760px){ .tikva-h{font-size:44px; margin-bottom:8px} .tikva-line{font-size:16.5px; margin-bottom:16px} } /* ---------- template addition: footer social row (slot-driven) ---------- */ footer.site .foot-social{display:flex;gap:4px;flex-wrap:wrap;margin:22px 0 0} footer.site .foot-social a{color:var(--copper);text-decoration:none;padding:10px 12px;font-size:15.5px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase} footer.site .foot-social a:hover{color:#2672BD} /* ============ E.L skin overrides — founder palette ruling 2026-11-03: the house template's structure, type and rhythm; the skin is E.L's — WHITE ground, navy #06204A headings/text, brand blue #0059B1 in the slot where the template carries copper. Photo sections keep the template's scrim grammar, recoloured navy. ============ */ header.site{background:rgba(255,255,255,.94)} .brand img{height:44px} .btn.b-ink{background:#06204A;color:#FFFFFF;border:1.5px solid #06204A;border-radius:12px} .btn.b-ink:hover{background:#0B2E63;border-color:#0B2E63} .btn.b-blue{background:#0059B1;color:#FFFFFF;border:1.5px solid #0059B1;border-radius:12px} .btn.b-blue:hover{background:#2672BD;border-color:#2672BD} .btn.b-block{box-shadow:5px 5px 0 rgba(6,32,74,.85)} .btn.b-block:hover{box-shadow:6px 6px 0 rgba(6,32,74,.85)} .btn.b-line:hover{color:#FFFFFF} .btn.b-chip:hover{color:#FFFFFF} .poster-media{background:transparent} .slide-tikva{background:#EAF2FA} .slide-leads{color:#FFFFFF} .slide-leads .slide-line{color:#D9E5F3} .stmt-bg{color:#FFFFFF} .stmt-bg .stmt-line{color:#D9E5F3} .stmt-bg .stmt-line b{color:#FFFFFF} .stmt-bg .eyebrow{color:#9CC2EC} .stmt-bg .btn.b-line{border-color:#FFFFFF;color:#FFFFFF} .stmt-bg .btn.b-line:hover{background:#FFFFFF;color:#06204A} .stmt-bg .btn.b-band{color:#A9CBF0;border-top-color:#A9CBF0;border-bottom-color:#A9CBF0} .stmt-bg .btn.b-band:hover{background:rgba(255,255,255,.10)} .slide-qr{background:#EAF2FA;color:#06204A} .slide-qr>.ph-shade{background:linear-gradient(100deg, rgba(234,242,250,.93) 30%, rgba(234,242,250,.68))} .slide-qr .slide-line{color:#42536C} .qr-card{ background:#FFFFFF;border:1px solid #D8E2EF;border-radius:18px; padding:28px 24px 22px;text-align:center;max-width:420px;margin:0 auto; box-shadow:0 18px 44px rgba(6,32,74,.14); } .qr-media .qr-card img{width:auto} .qr-card .qr-logo{height:54px;width:auto;margin:0 auto} .qr-card .qr-img{width:min(230px,68%);height:auto;margin:16px auto 12px} .qr-card .qr-scan{ font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px; letter-spacing:.2em;text-transform:uppercase;color:#0059B1;margin:0; } .qr-card .qr-phone{font-weight:700;font-size:22px;color:#06204A;margin:8px 0 0} .qr-card .qr-url{color:#42536C;font-size:15px;margin:4px 0 0} .prof-copy{color:#FFFFFF} .prof-copy p{color:#E3ECF7} .prof-badge{color:#FFFFFF} .prof-role{color:#C9D8EC} .prof-arrow{background:#06204A} .reel-dur{color:#FFFFFF} .reel-play::after{border-left-color:#06204A} footer.site .foot-toggle{color:#06204A} footer.site .foot-links a:hover{color:#06204A} footer.site .foot-legal a:hover{color:#06204A} footer.site .foot-chev{border-right-color:#0059B1;border-bottom-color:#0059B1} /* ---------- service-area towns (E.L addition, house list grammar) ---------- */ .towns{ display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(26px,3.6vw,48px); list-style:none;margin:36px 0 0;padding:0; } .towns li{ padding:14px 0;border-bottom:1px solid var(--line);font-size:18px;color:var(--ink); display:flex;justify-content:space-between;gap:10px;align-items:baseline; } .towns li span{ font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:#0059B1;flex:none; } @media (max-width:900px){.towns{grid-template-columns:repeat(2,1fr)}} /* ---------- sticky call/book bar (mobile, mirrors the live E.L site) ---------- */ .sticky-bar{display:none} @media (max-width:900px){ .sticky-bar{ display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97);border-top:1px solid var(--line); } .sticky-bar a{flex:1} body{padding-bottom:80px} } /* ---------- hero: the Idan poster is the first visual — full display width, uncropped, headline and CTA directly underneath (founder's direction). Slide 1 stacks; the other slides stretch to its height and keep their viewport minimum. ---------- */ .slide{height:auto;min-height:calc(100svh - var(--hh))} .slide-poster{display:flex;flex-direction:column;align-items:stretch} .poster-media{position:relative;flex:none} .poster-media img{position:static;width:100%;height:auto} .poster-in{flex:none;align-self:center;width:100%} @media (min-width:901px){ .poster-h{font-size:clamp(58px,6.9vw,118px)} /* Desktop: the complete portrait poster inside the first screen — height-bound, natural aspect, centered on the white ground, headline and CTA directly below it (the mobile proportion). */ .poster-media{display:flex;justify-content:center} .poster-media img{width:auto;height:calc(100svh - 152px);max-width:100%} } @media (min-width:901px) and (max-height:820px){ .poster-h{font-size:clamp(50px,5.8vw,96px)} .poster-line{font-size:19px;margin-bottom:22px} } /* ---------- slider dots clear the sticky bar on phones ---------- */ @media (max-width:900px){ :root{--dots-safe:132px} .dots{bottom:118px} .slide-bright{grid-template-rows:40% 60%} } /* ============================================================ E.L TEMPLATE REV — legacy content layer (appended to the mock's house stylesheet to form assets/site-5.css). The sub-page content classes from site-3.css / house-3.css, restyled into the TPL-054 frame: white ground, navy #06204A, brand blue #0059B1, IBM Plex, template spacing rhythm. Layout grammar is carried over; only the skin changes. ============================================================ */ /* site-3 token aliases (leftover inline