/* ============================================================ CABINET BAZAAR | HOMEPAGE: the pre-10-11 look for TWO parts, 2026-10-29 ------------------------------------------------------------ Owner, 10-28: "old version for these 2 parts had better look". The hero (with the navy trustbar strip right under it) and "What you can buy here" (#services) go back to the look they had until 2026-10-11 13:26 (styles.css ?v=20260928s1): full-bleed photo hero, centred headline with the pink gradient accent, glowing red button, trust row, navy trustbar, white icon cards that lift on hover. Copy, facts, the H1 words, links and alt text are today's. Loaded after styles.css and home-v2.css on index.html and es.html only. Every rule is scoped to .hos-hero / .hos-trust / .hos-services (classes that exist only in those three blocks), so no other section and no other page changes. The values are copied from the 09-28 styles.css; the comments say where a rule undoes a 10-12 de-template change or a home-v2.css rule. ============================================================ */ /* old tokens, re-declared on the three blocks only (10-12 set the radii to 6/4/10 and retired --grad/--sh-glow) */ .hos-hero,.hos-trust,.hos-services{--radius:16px;--radius-sm:12px;--radius-lg:26px; --grad:linear-gradient(125deg,#1d2f66 0%,#2c4488 42%,#a81b29 100%); --sh-glow:0 12px 30px -8px rgba(196,32,47,.42)} /* =========================== HERO =========================== */ /* the red radial glow on top of the dark scrim (the scrim itself is unchanged in styles.css) */ .hos-hero .hero__overlay{ background:linear-gradient(180deg,rgba(11,18,40,.66) 0%,rgba(11,18,40,.52) 40%,rgba(11,18,40,.78) 100%), radial-gradient(120% 85% at 84% 12%,rgba(196,32,47,.30),transparent 56%)} /* eyebrow dash (pink on the photo) */ .hos-hero .eyebrow::before,.hos-services .eyebrow::before{content:"";width:26px;height:2px;background:var(--red-500);border-radius:2px} .hos-hero .eyebrow::before{background:#ff8a93} /* gradient accent on the second half of the H1 (the words are today's; only the span is new) */ .hv2 .hos-hero h1 .grad{background:linear-gradient(115deg,#ffe2e5 0%,#ff8a93 55%,#ffd0a8 100%); -webkit-background-clip:text;background-clip:text;color:transparent} /* the Google reviews link in the trust row (was an inline style) */ .hos-hero .hero__trust a,.hos-hero .hero__trust a:hover{color:inherit;text-decoration:underline;text-underline-offset:3px} /* today's longer lead ends with the phone number: keep "(210) 378-8009" on one line (new, not in the 09-28 file) */ .hos-hero .hero__lead a[href^="tel:"]{white-space:nowrap} /* white focus ring on the dark photo and the navy strip */ .hos-hero :focus-visible,.hos-trust :focus-visible{outline-color:#fff} /* buttons: rounded 12px, gradient red with a glow, lift on hover (home-v2.css flattens every button in
) */ .hv2 main .hos-hero .btn{border-radius:var(--radius-sm); transition:transform .2s var(--ease-spring),box-shadow .25s ease,background .2s ease,color .15s ease,border-color .15s ease} .hv2 main .hos-hero .btn:active{transform:translateY(0) scale(.97)} .hv2 main .hos-hero .btn--primary, .hv2 main .hos-hero .btn--primary:focus-visible{background:linear-gradient(135deg,#d4283a 0%,#a81b29 100%);color:#fff;box-shadow:var(--sh-glow)} .hv2 main .hos-hero .btn--primary:hover{background:linear-gradient(135deg,#d4283a 0%,#a81b29 100%);color:#fff; transform:translateY(-3px);box-shadow:0 18px 38px -8px rgba(196,32,47,.52)} .hv2 main .hos-hero .btn--outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} .hv2 main .hos-hero .btn--outline-white:hover{background:#fff;color:var(--navy-700);border-color:rgba(255,255,255,.5);transform:translateY(-2px)} /* =========================== WHAT YOU CAN BUY HERE =========================== */ /* headings: the old size and tracking (home-v2.css sets every section h2/h3 smaller and looser) */ .hv2 #services.hos-services h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:700;letter-spacing:-.035em;line-height:1.08} .hv2 #services.hos-services h3{letter-spacing:-.03em;line-height:1.08} .hos-services .sec-head .lead{margin-inline:auto} .hos-services .hos-also{margin-top:28px} /* cards: 16px corners, a gradient bar that draws in on hover, -6px lift, gradient icon tile */ .hos-services .card{transition:transform .22s var(--ease-spring),box-shadow .24s ease,border-color .22s ease} .hos-services .card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad); transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)} .hos-services .card:hover{transform:translateY(-6px);box-shadow:var(--sh-card);border-color:var(--navy-300)} .hos-services .card:hover::before{transform:scaleX(1)} .hos-services .card__icon{border-radius:14px;background:linear-gradient(135deg,var(--navy-tint),#e7ecf8); transition:transform .25s var(--ease-spring),background .25s ease,color .25s ease} .hos-services .card:hover .card__icon{transform:scale(1.06) rotate(-3deg);background:var(--grad);color:#fff} .hos-services .card__link:hover,.hos-services .card__link:focus-visible{color:var(--red-500);text-decoration:none} .hos-services .card__link svg{transition:transform .15s ease} .hos-services .card:hover .card__link svg{transform:translateX(3px)} /* touch screens: no hover lift left "stuck" after a tap; reduced motion: nothing moves */ @media (hover:none){ .hos-services .card:hover,.hv2 main .hos-hero .btn:hover,.hv2 main .hos-hero .btn--primary:hover, .hv2 main .hos-hero .btn--outline-white:hover{transform:none} } @media (prefers-reduced-motion:reduce){ .hos-services .card:hover,.hos-services .card:hover .card__icon,.hos-services .card:hover .card__link svg, .hv2 main .hos-hero .btn:hover,.hv2 main .hos-hero .btn--primary:hover, .hv2 main .hos-hero .btn--outline-white:hover{transform:none !important} }