/* ============================================================ FLORAL CRAFT, Yelahanka New Town, Bengaluru Layout modelled on the client-supplied reference: https://www.floralgallerychennai.in/ Hand-written. No Bootstrap / jQuery / owl / swiper / fancybox. ------------------------------------------------------------ ⚑ BRAND COLOURS LIVE IN ONE BLOCK BELOW. Swap those six values when the client sends the palette; nothing else needs to change anywhere in the CSS. ============================================================ */ /* ───────────────────────────────────────────── 1. TOKENS ⚑ EDIT ME Current values = the revised, lighter and warmer palette: warm mauve, soft blush, honey gold and ivory cream. ───────────────────────────────────────────── */ :root{ --brand: #A8728C; /* ⚑ Warm mauve. Headings, rules, icons, hero ground */ --brand-deep: #7A4A61; /* ⚑ the same mauve, darkened. Anything cream text sits on it: buttons, footer, the mobile menu. Small cream type on #A8728C only reaches 3.6:1, which is hard to read on a phone in daylight; on this it reaches 6.6:1. */ --brand-hover: #653B50; /* ⚑ pressed */ --accent: #DDBB85; /* ⚑ Honey gold. Hairlines and rules only, never type */ --accent-soft: #F0C2B0; /* ⚑ Soft blush. Tints, washes, focus glow */ --canvas: #FBF1E6; /* ⚑ Ivory cream. Page ground, never pure white */ --canvas-alt: #F5E5D9; /* ⚑ the alternating band, a shade deeper */ /* Derived. Normally leave these alone. */ --panel: #FFFFFF; --ink: #3B2730; --ink-soft: #6F5B62; --on-brand: #FDF6EE; --line: rgba(122,74,97,.16); --shadow-sm: 0 6px 24px rgba(59,39,48,.06); --shadow-md: 0 18px 48px rgba(59,39,48,.10); /* ⚑ BRAND FONTS. Both come from the Adobe Fonts (Typekit) embed in the of index.html. Every rule in this file reads these two tokens, so changing a typeface means changing it here and nowhere else. Georgia is the deliberate last resort: if the Adobe embed fails the page stays a serif rather than dropping to the browser's default sans. */ --display: 'ivypresto-display', Georgia, 'Times New Roman', serif; --body: 'adobe-garamond-pro', 'Sabon', Georgia, 'Times New Roman', serif; color-scheme: light; /* ⚑ the form controls below set light backgrounds, so the browser must not paint their text for a dark device theme */ --wrap: 1200px; --pad: clamp(1.25rem, 4vw, 2.5rem); --band: clamp(5.5rem, 11vw, 9.5rem); /* ── The earlier, moodier palette, if it is ever wanted back ── --brand:#53315D; --brand-deep:#53315D; --brand-hover:#3E2447; --accent:#C8A898; --accent-soft:#E3AFA8; --canvas:#FBF7F4; --canvas-alt:#F3EBE6; */ } /* ───────────────────────────────────────────── 2. RESET ───────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:hidden} body{ margin:0; background:var(--canvas); color:var(--ink-soft); font:400 1.2rem/1.7 var(--body); overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{ font-family:var(--display); text-wrap:balance; color:var(--brand); font-weight:400; /* IvyPresto Display is a display face: 400 is the elegant cut */ line-height:1.22; margin:0 0 .6em; } p{margin:0 0 1.1em} p:last-child{margin-bottom:0} ul{margin:0;padding:0;list-style:none} figure{margin:0} button,input,textarea,select{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px;border-radius:2px} .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} .skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--brand-deep);color:var(--on-brand);padding:.75rem 1.25rem} .skip-link:focus{left:0} /* ───────────────────────────────────────────── 3. LAYOUT HELPERS ───────────────────────────────────────────── */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .wrap-wide{max-width:1560px;margin-inline:auto;padding-inline:var(--pad)} .band{padding-block:var(--band)} .band--alt{background:var(--canvas-alt)} .band--tight{padding-top:0} .section-title{text-align:center;max-width:760px;margin:0 auto clamp(3rem,6vw,5rem)} .section-title .kicker{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--body);font-size:.72rem;font-weight:600; letter-spacing:.28em;text-transform:uppercase;color:var(--brand-deep); margin-bottom:1rem; } .section-title .kicker::before, .section-title .kicker::after{content:"";width:34px;height:1px;background:var(--accent)} .section-title h2{font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:.004em;margin-bottom:.7rem} .section-title p{max-width:62ch;margin-inline:auto} /* Buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--body);font-size:.82rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase; padding:1.05rem 2.2rem;border:1px solid var(--brand-deep);border-radius:999px; background:var(--brand-deep);color:var(--on-brand);cursor:pointer; transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease; } .btn:hover{background:var(--brand-hover);border-color:var(--brand-hover);transform:translateY(-2px)} .btn--ghost{background:transparent;color:var(--brand-deep)} .btn--ghost:hover{background:var(--brand-deep);color:var(--on-brand)} .btn--light{background:transparent;border-color:rgba(253,243,233,.5);color:var(--on-brand)} .btn--light:hover{background:var(--on-brand);color:var(--brand-deep);border-color:var(--on-brand)} /* Reveal on scroll, only armed when JS is running, so a failed script or a no-JS browser still shows every section. */ .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease} .js .reveal.in{opacity:1;transform:none} /* ───────────────────────────────────────────── 4. HEADER ───────────────────────────────────────────── */ .site-header{ position:fixed;inset:0 0 auto;z-index:100; padding-block:1.1rem; transition:background .35s ease,box-shadow .35s ease,padding .35s ease; } .site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem} /* Four items instead of seven, so the menu can sit centred in the header. */ @media (min-width:901px){ .site-header .wrap{position:relative} .nav{position:absolute;left:50%;transform:translateX(-50%)} .nav__list{gap:clamp(1.6rem,3.4vw,3.4rem)} } .site-header.stuck{background:var(--canvas);box-shadow:var(--shadow-sm);padding-block:.65rem} .brand{display:flex;align-items:center;gap:.7rem;line-height:1;color:var(--on-brand);transition:color .35s ease} /* The real Floral Craft orchid, traced from the client's artwork into a vector and painted with currentColor through a mask, so one file serves both the mauve header and the cream footer and the line stays clean at any size. Browsers without mask support hide the mark and keep the wordmark, rather than showing a solid block. */ .brand__mark{display:none} @supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){ .brand__mark{ display:block;flex:0 0 auto; height:2.6rem;aspect-ratio:372/528; -webkit-mask:url(../img/logo.svg) center/contain no-repeat; mask:url(../img/logo.svg) center/contain no-repeat; background-color:currentColor; } } .brand__words{display:flex;flex-direction:column} .brand__name{font-family:var(--display);font-size:1.5rem;letter-spacing:.02em} /* keep the tagline on one line; it was breaking after 'IN YOUR' once the menu grew to seven items and squeezed the header */ .brand__tag{font-size:clamp(.5rem,.62vw,.58rem);letter-spacing:clamp(.12em,.2vw,.22em); text-transform:uppercase;margin-top:.42rem;opacity:.85;white-space:nowrap} .footer .brand__mark{height:3.2rem} @media (max-width:420px){ .site-header .brand__mark{height:2.1rem} .site-header .brand__name{font-size:1.25rem} .site-header .brand__tag{font-size:.5rem;letter-spacing:.16em} } .site-header.stuck .brand{color:var(--brand)} /* Seven items now, and two-word ones like ABOUT US were breaking across two lines. nowrap keeps each label whole; the gap and tracking tighten as the window narrows so they still fit on one row down to the mobile menu. */ .nav__list{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(1rem,2.2vw,2.2rem)} .nav__list li{flex:0 0 auto} .nav__list a{ position:relative;display:inline-block;white-space:nowrap; font-family:var(--display); font-size:clamp(.72rem,.9vw,.82rem);font-weight:600; letter-spacing:clamp(.08em,.15vw,.16em); text-transform:uppercase;color:var(--on-brand);transition:color .3s ease; } .site-header.stuck .nav__list a{color:var(--ink)} .nav__list a::after{ content:"";position:absolute;left:0;right:0;bottom:-.7rem;height:3px; background:var(--accent);transform:scaleX(0);transform-origin:left; transition:transform .35s ease; } .nav__list a:hover::after,.nav__list a[aria-current="true"]::after{transform:scaleX(1)} .nav__list a:hover,.nav__list a[aria-current="true"]{color:var(--accent)} .nav-toggle{ display:none;width:44px;height:44px;border:0;background:transparent; cursor:pointer;padding:10px; } .nav-toggle span{display:block;height:2px;background:var(--on-brand);margin:5px 0;transition:.3s} .site-header.stuck .nav-toggle span{background:var(--brand)} @media (max-width:900px){ .nav-toggle{display:block} .nav{ position:fixed;inset:0 0 0 auto;width:min(320px,84vw); background:var(--brand-deep);padding:6rem 2rem 2rem; transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow-md); } .nav.open{transform:none} .nav__list{flex-direction:column;align-items:flex-start;gap:1.6rem} .nav__list a,.site-header.stuck .nav__list a{color:var(--on-brand);font-size:.95rem} .nav__close{position:absolute;top:1.4rem;right:1.4rem;background:none;border:0;color:var(--on-brand);font-size:1.7rem;cursor:pointer;line-height:1;min-width:44px;min-height:44px;display:grid;place-items:center} } @media (min-width:901px){.nav__close{display:none}} /* ───────────────────────────────────────────── 5. HERO SLIDER ───────────────────────────────────────────── */ .hero{position:relative;min-height:clamp(560px,82vh,900px);min-height:clamp(560px,82svh,900px);overflow:hidden;background:var(--brand)} .hero__slide{ position:absolute;inset:0; background-size:cover;background-position:center; opacity:0;transform:scale(1.06); transition:opacity 1.4s ease,transform 7s linear; } .hero__slide.active{opacity:1;transform:scale(1)} .hero__slide::after{ content:"";position:absolute;inset:0; background: linear-gradient(180deg,rgba(28,14,26,.58) 0%,rgba(28,14,26,.30) 9%,rgba(28,14,26,.06) 20%,rgba(28,14,26,0) 40%,rgba(28,14,26,.26) 100%), linear-gradient(100deg,rgba(28,14,26,.12) 0%,rgba(28,14,26,.04) 55%,rgba(28,14,26,0) 100%); } .hero__inner{ position:relative;z-index:2;min-height:clamp(560px,82vh,900px);min-height:clamp(560px,82svh,900px); display:flex;flex-direction:column;justify-content:center; padding-block:7.5rem 5.5rem; } .hero__copy{ position:relative;width:min(720px,100%); padding:clamp(2rem,3.6vw,3.1rem) clamp(1.6rem,3vw,2.8rem); background:rgba(253,248,243,.88); box-shadow:0 30px 80px rgba(20,10,24,.22); } .hero__kicker{ display:inline-flex;align-items:center;gap:.6rem; font-size:.74rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase; color:var(--brand-deep);margin-bottom:1.4rem; } .hero__kicker::before{content:"";width:40px;height:1px;background:var(--brand)} /* a serif body face is wider than the sans this replaced, so the locality line needs a little less tracking to hold one line on a phone. */ @media (max-width:520px){ .hero__kicker{font-size:.62rem;letter-spacing:.2em;gap:.5rem} .hero__kicker::before{width:26px} } .hero h1{ color:var(--brand-deep); /* the floor was 2.4rem, which pushed the last word off the edge of a 390px phone. Lower floor plus balanced wrapping keeps every line inside. */ font-size:clamp(1.8rem,3.9vw,2.95rem); line-height:1.16;margin-bottom:1.1rem; text-wrap:balance;overflow-wrap:break-word; } /* the headline breaks at its own colon rather than wherever the box runs out, so it is always two deliberate lines instead of a ragged three. */ .hero h1 span{display:block} .hero__copy p{color:var(--ink-soft);font-size:clamp(1rem,1.5vw,1.2rem);max-width:52ch;margin-bottom:2.4rem} .hero__cta{display:flex;flex-wrap:wrap;gap:1rem} .hero__cta .btn--light{border-color:rgba(122,74,97,.45);color:var(--brand-deep)} .hero__cta .btn--light:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:var(--on-brand)} .hero__dots{ position:absolute;left:var(--pad);bottom:2.4rem;z-index:3; display:flex;gap:.7rem; } /* The button itself is an invisible 38x26 area, big enough for a thumb, and the only thing drawn is a 3px line inside it. Padding the button directly made the outline grow with it and the markers turned into blocks. */ .hero__dots button{ width:38px;height:26px;border:0;padding:0;cursor:pointer; background:none;display:grid;place-items:center; } .hero__dots button::before{ content:"";display:block;width:38px;height:3px; background:rgba(28,14,26,.30); box-shadow:0 0 0 1px rgba(253,246,238,.32); transition:background .3s ease; } .hero__dots button[aria-selected="true"]::before{background:var(--on-brand)} @media (max-width:900px){.hero__dots{left:50%;transform:translateX(-50%)}} /* ───────────────────────────────────────────── 6. PRODUCTS (two large cards) ───────────────────────────────────────────── */ .products{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.5rem)} @media (max-width:820px){.products{grid-template-columns:1fr}} .product{ display:flex;flex-direction:column; background:var(--panel);border-radius:4px;overflow:hidden; box-shadow:var(--shadow-sm);transition:transform .4s ease,box-shadow .4s ease; } .product:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)} .product__img{aspect-ratio:4/3;overflow:hidden} .product__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease} .product:hover .product__img img{transform:scale(1.06)} .product__body{padding:clamp(1.75rem,3vw,2.6rem);text-align:center;display:flex;flex-direction:column} .product__body h3{font-size:1.5rem;margin-bottom:.7rem} .product__body p{flex:1;margin-bottom:1.6rem} /* ───────────────────────────────────────────── 7. STORY ───────────────────────────────────────────── */ .story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center} @media (max-width:900px){.story{grid-template-columns:1fr}} .story__media{position:relative} .story__media img{border-radius:4px;box-shadow:var(--shadow-md);position:relative;z-index:2} .story__media::before{ content:"";position:absolute;z-index:1; inset:-22px -22px 40px 40px;border:1px solid var(--accent);border-radius:4px; } .story__media::after{ content:"";position:absolute;z-index:0;width:180px;height:180px;border-radius:50%; background:radial-gradient(circle,var(--accent-soft) 0%,transparent 70%); opacity:.5;right:-60px;bottom:-50px; } .story .kicker{ display:inline-flex;align-items:center;gap:.6rem; font-size:.76rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase; color:var(--brand-deep);margin-bottom:1rem; } .story .kicker::before{content:"";width:34px;height:1px;background:var(--accent)} .story h2{font-size:clamp(1.8rem,3.6vw,2.75rem)} .story__essence{ margin-top:2rem;padding-top:1.8rem;border-top:1px solid var(--line); } .story__essence h3{font-size:1.25rem;margin-bottom:.6rem} /* ───────────────────────────────────────────── 8. OUR CRAFT (4 image tiles) ───────────────────────────────────────────── */ .craft{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.75rem)} @media (max-width:1000px){.craft{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.craft{grid-template-columns:1fr}} .craft__item{position:relative;overflow:hidden;border-radius:4px} .craft__item img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s ease} .craft__item:hover img{transform:scale(1.07)} .craft__item::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(20,10,24,.82) 0%,rgba(20,10,24,.25) 45%,transparent 75%); } .craft__item h3{ position:absolute;z-index:2;left:0;right:0;bottom:1.6rem; margin:0;padding-inline:1.4rem;text-align:center; color:var(--on-brand);font-size:1.15rem; } .craft__note{ text-align:center;max-width:70ch;margin:clamp(2.5rem,5vw,3.5rem) auto 0; font-family:var(--display);font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.6;color:var(--brand); } /* ───────────────────────────────────────────── 9. SIGNATURE COLLECTION (4 cards) ───────────────────────────────────────────── */ .collection{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.75rem)} @media (max-width:1050px){.collection{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.collection{grid-template-columns:1fr}} .coll{ background:var(--panel);border-radius:4px;overflow:hidden; box-shadow:var(--shadow-sm);display:flex;flex-direction:column; transition:transform .4s ease,box-shadow .4s ease; } .coll:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)} .coll__img{aspect-ratio:1/1;overflow:hidden} .coll__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease} .coll:hover .coll__img img{transform:scale(1.07)} .coll__body{padding:1.8rem 1.5rem 2rem;text-align:center;flex:1;display:flex;flex-direction:column} .coll__body h3{font-size:1.2rem;margin-bottom:.6rem} .coll__body p{font-size:.94rem;flex:1;margin-bottom:1.4rem} .coll__link{ font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--accent);transition:color .3s ease; } .coll__link:hover{color:var(--brand)} /* ───────────────────────────────────────────── TRUST STRIP + EARLY PROOF Two small sections doing the heavy lifting on comprehension and confidence. The strip sits directly under the hero because the questions a first-time visitor has are "what is this" and "can I rely on it", in that order, and both are answered before anything is sold. ───────────────────────────────────────────── */ .trust{background:var(--brand-deep);color:var(--on-brand);padding-block:clamp(1.6rem,3vw,2.4rem)} .trust__grid{ display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.5vw,2.5rem); } @media (max-width:820px){.trust__grid{grid-template-columns:repeat(2,1fr);gap:1.4rem}} @media (max-width:460px){.trust__grid{grid-template-columns:1fr;gap:1rem}} .trust__item{display:flex;flex-direction:column;gap:.25rem;position:relative} .trust__item:not(:last-child)::after{ content:"";position:absolute;right:calc(clamp(1rem,2.5vw,2.5rem) / -2); top:.15rem;bottom:.15rem;width:1px;background:rgba(253,246,238,.18); } @media (max-width:820px){.trust__item::after{display:none}} .trust__item strong{ font-family:var(--body);font-size:.76rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase; } .trust__item span{font-size:.9rem;opacity:.82;line-height:1.5} /* A single review, set large, before the visitor is asked to choose anything. */ .proof{padding-block:clamp(3.5rem,7vw,6rem);background:var(--canvas)} .proof__quote{margin:0;max-width:900px;margin-inline:auto;text-align:center} .proof__quote p{ font-family:var(--display);color:var(--brand); font-size:clamp(1.4rem,2.9vw,2.2rem);line-height:1.4; margin:0 0 1.4rem;text-wrap:balance; } .proof__quote p::before{content:"\201C"} .proof__quote p::after{content:"\201D"} .proof__quote cite{ font-family:var(--body);font-style:normal;font-size:.74rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft); } /* ───────────────────────────────────────────── NEW STRUCTURE: the offer, then the process Five picture bands became one of each. These two sections carry the whole "what is this shop and how do I buy from it" job between them. ───────────────────────────────────────────── */ /* The four things the shop sells, named on the first screen. */ .hero__offer{ display:flex;flex-wrap:wrap;gap:.45rem .85rem;margin-top:2.4rem; font-family:var(--body);font-size:clamp(.58rem,.68vw,.7rem);font-weight:600; letter-spacing:.11em;text-transform:uppercase; color:var(--ink-soft); } .hero__offer li{display:flex;align-items:center;gap:.75rem} .hero__offer li:not(:last-child)::after{ content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.9; } /* four items and a longer middle label leave one word stranded on its own line on a phone, so below this width they sit as a tidy 2x2 and the dots, which only make sense between items on one line, come off. */ @media (max-width:560px){ .hero__offer{ display:grid; /* max-content so the long middle label gets the width it needs, minmax(0,…) so it wraps rather than running past the panel on a very narrow phone */ grid-template-columns:repeat(2,minmax(0,max-content)); justify-content:start; gap:.55rem clamp(1rem,5vw,2rem); } .hero__offer li:not(:last-child)::after{display:none} } /* ───────────────────────────────────────────── OCCASIONS Set like an index rather than a row of tags: a hairline over each entry, nothing filled in. The range is easier to believe as twelve real occasions than as the words "any occasion" on their own. ───────────────────────────────────────────── */ .occasions{ display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(1.1rem,2.4vw,1.9rem) clamp(1.5rem,3vw,2.75rem); max-width:1000px;margin-inline:auto; } @media (max-width:900px){.occasions{grid-template-columns:repeat(3,1fr)}} @media (max-width:620px){.occasions{grid-template-columns:repeat(2,1fr)}} .occasions li{ border-top:1px solid var(--line);padding-top:.9rem; font-family:var(--body);font-size:.82rem;font-weight:600; letter-spacing:.13em;text-transform:uppercase; color:var(--brand-deep);line-height:1.4; } .occasions__note{ text-align:center;margin:clamp(2.2rem,4.5vw,3.2rem) auto 0; max-width:44ch;color:var(--ink-soft);text-wrap:balance; } .services{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.75rem)} @media (max-width:1000px){.services{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.services{grid-template-columns:1fr}} .svc__img{overflow:hidden;border-radius:4px;margin-bottom:1.6rem;background:var(--canvas-alt)} .svc__img img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .9s ease} .svc:hover .svc__img img{transform:scale(1.05)} .svc h3{font-size:clamp(1.25rem,1.8vw,1.55rem);margin-bottom:.55rem} .svc p{font-size:.98rem;margin-bottom:1.1rem} .svc__link{ font-family:var(--body);font-size:.74rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep); border-bottom:1px solid var(--accent);padding-bottom:.3rem; transition:border-color .3s ease; } .svc__link:hover{border-color:var(--brand-deep)} /* Three steps, no photographs on purpose. */ .steps{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(2rem,5vw,4.5rem);max-width:1080px;margin-inline:auto; /* the reset only clears markers on ul, and this is an ol */ list-style:none;margin-block:0;padding:0; } @media (max-width:860px){.steps{grid-template-columns:1fr;gap:2.75rem}} .step{position:relative;padding-top:2.6rem} .step::before{ content:"";position:absolute;top:0;left:0;width:46px;height:1px;background:var(--accent); } .step__num{ display:block;font-family:var(--display);font-size:1rem; letter-spacing:.14em;color:var(--brand);opacity:.75;margin-bottom:.7rem; } .step h3{font-size:clamp(1.2rem,1.7vw,1.45rem);margin-bottom:.6rem} .step p{font-size:.98rem;margin:0} /* ───────────────────────────────────────────── 10. OUR WORK (three auto-scrolling rows + lightbox) ───────────────────────────────────────────── */ .gallery{position:relative} .gallery__track{ display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory; padding-block:.5rem 1.5rem;scrollbar-width:none; } .gallery__track::-webkit-scrollbar{display:none} .gallery__item{ position:relative;flex:0 0 clamp(240px,26vw,340px); scroll-snap-align:center;border-radius:4px;overflow:hidden;cursor:zoom-in; border:0;padding:0;background:none; } .gallery__item img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s ease} .gallery__item:hover img{transform:scale(1.07)} .gallery__item::after{ content:"+";position:absolute;inset:0;display:grid;place-items:center; font-family:var(--body);font-size:2rem;color:var(--on-brand); background:rgba(122,74,97,.58);opacity:0;transition:opacity .35s ease; } .gallery__item:hover::after,.gallery__item:focus-visible::after{opacity:1} .gallery__nav{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem} .gallery__nav button{ width:48px;height:48px;border-radius:50%;border:1px solid var(--line); background:var(--panel);color:var(--brand);font-size:1.1rem;cursor:pointer; transition:background .3s ease,color .3s ease,border-color .3s ease; } .gallery__nav button:hover{background:var(--brand-deep);color:var(--on-brand);border-color:var(--brand-deep)} /* Three rows that travel in alternating directions. The animation is a single composited transform per row, which is why this stays smooth on a phone, and each row parks itself the moment it scrolls out of view. */ .rows{display:flex;flex-direction:column;gap:clamp(.55rem,1.1vw,.9rem)} .marquee{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .marquee::-webkit-scrollbar{display:none} .js .marquee{overflow:hidden} .marquee__track{display:flex;gap:clamp(.55rem,1.1vw,.9rem);width:max-content} .js .marquee--anim .marquee__track{ animation:marquee var(--speed,35s) linear infinite; /* deliberately no will-change. Four permanently promoted layers, the widest of them past the maximum texture size on many phones, is what stalls the lower rows. The browser composites the transform anyway. */ } /* These have to out-specify the `animation` shorthand above, or the shorthand's own defaults (direction:normal, play-state:running) quietly win. */ .js .marquee--anim.marquee--reverse .marquee__track{animation-direction:reverse} /* Only a real mouse pauses a row. A touch screen can leave :hover stuck on an element after a tap, which would freeze a row until you tapped elsewhere. */ @media (hover:hover) and (pointer:fine){ .js .marquee--anim:hover .marquee__track{animation-play-state:paused} } .js .marquee--anim:focus-within .marquee__track{animation-play-state:paused} @keyframes marquee{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } .rows .gallery__item{flex:0 0 auto;width:clamp(146px,17vw,224px);scroll-snap-align:none} .rows .gallery__item img{aspect-ratio:1/1} @media (max-width:600px){ /* two rows are plenty on a phone; the third would only cost paint */ .rows .marquee:last-child{display:none} } .lightbox{ position:fixed;inset:0;z-index:200;display:none; place-items:center;background:rgba(18,9,21,.94);padding:var(--pad); } .lightbox[open]{display:grid} .lightbox img{max-width:min(92vw,1000px);max-height:86vh;max-height:86svh;object-fit:contain;border-radius:4px} .lightbox__close,.lightbox__prev,.lightbox__next{ position:absolute;background:none;border:1px solid rgba(253,243,233,.35); color:var(--on-brand);width:52px;height:52px;border-radius:50%; cursor:pointer;font-size:1.3rem;transition:background .3s ease; } .lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover{background:rgba(253,243,233,.16)} .lightbox__close{top:1.5rem;right:1.5rem} .lightbox__prev{left:1.5rem;top:50%;transform:translateY(-50%)} .lightbox__next{right:1.5rem;top:50%;transform:translateY(-50%)} /* ───────────────────────────────────────────── 11. DISCOVER (5 cards) ───────────────────────────────────────────── */ .discover{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.9rem,1.6vw,1.4rem)} @media (max-width:1100px){.discover{grid-template-columns:repeat(3,1fr)}} @media (max-width:760px){.discover{grid-template-columns:repeat(2,1fr)}} @media (max-width:460px){.discover{grid-template-columns:1fr}} .disc{position:relative;border-radius:4px;overflow:hidden;display:block} .disc img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s ease} .disc:hover img{transform:scale(1.07)} .disc::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(20,10,24,.88) 0%,rgba(20,10,24,.3) 50%,transparent 78%); } .disc__body{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:1.4rem 1.2rem} .disc__body h3{color:var(--on-brand);font-size:1.05rem;margin-bottom:.35rem} .disc__body p{color:rgba(253,243,233,.82);font-size:.83rem;line-height:1.55;margin:0} /* ───────────────────────────────────────────── 12. INQUIRY ───────────────────────────────────────────── */ .inquiry{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,5rem);align-items:center} @media (max-width:950px){.inquiry{grid-template-columns:1fr}} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} @media (max-width:600px){.form-grid{grid-template-columns:1fr}} .field--full{grid-column:1/-1} /* Labels sit above the field and stay there. A placeholder alone disappears the moment someone types, and is easy to miss on a phone. */ .field > label{ display:block;font-size:.76rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--ink);margin-bottom:.5rem; } .field > label .opt{ text-transform:none;letter-spacing:.02em;font-size:.78rem; color:var(--ink-soft);font-weight:400; } .form-grid input,.form-grid textarea,.form-grid select{ width:100%;background:var(--panel);color:var(--ink); border:1px solid var(--line);border-radius:3px; padding:1rem 1.1rem;font-size:.95rem;transition:border-color .3s ease,box-shadow .3s ease; } .form-grid ::placeholder{color:var(--ink-soft);opacity:.62} .form-grid select option{color:var(--ink);background:var(--panel)} .form-grid textarea{min-height:140px;resize:vertical} .form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{ outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--accent-soft); } .form-note{font-size:.82rem;margin-top:1rem;color:var(--ink-soft)} .form-status{margin-top:1rem;font-size:.9rem;color:var(--brand);font-weight:600} .honeypot{position:absolute;left:-9999px} .inquiry__media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.85rem,1.8vw,1.25rem);align-items:start} .inquiry__media img{ width:100%;aspect-ratio:3/4;object-fit:cover; border-radius:4px;box-shadow:var(--shadow-sm); } /* The grid items are elements, so the stagger and the drift below must be set on the item, not on the . Targeting the made every one of them the second child of its own , so all four took the same rule and moved in lockstep with no offset between them. */ .inquiry__media > *{display:block} .inquiry__media > *:nth-child(even){margin-top:2.5rem} /* Each picture drifts a few pixels on its own timing and never travels far enough to change the layout. Different durations and negative delays keep them out of step with each other. transform only, so the whole thing stays on the compositor and costs nothing on a phone. */ @keyframes enq-drift{ from{transform:translate3d(0,-12px,0)} to {transform:translate3d(0, 12px,0)} } /* 24px of travel in three or four seconds, so the movement is actually visible. The previous 14px over seven seconds was under two pixels a second and read as a still picture. */ .inquiry__media > *{animation:enq-drift 3.6s ease-in-out infinite alternate} .inquiry__media > *:nth-child(2){animation-duration:4.4s;animation-delay:-1.5s} .inquiry__media > *:nth-child(3){animation-duration:3.1s;animation-delay:-0.7s} .inquiry__media > *:nth-child(4){animation-duration:4.9s;animation-delay:-2.3s} /* ───────────────────────────────────────────── 13. FOOTER ───────────────────────────────────────────── */ .site-footer{background:var(--brand-deep);color:rgba(253,246,238,.84);padding-block:clamp(3.5rem,7vw,5.5rem) 0} .site-footer h3{color:var(--on-brand);font-size:1.2rem;margin-bottom:1.4rem} .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:clamp(2rem,5vw,4rem)} @media (max-width:900px){.footer-grid{grid-template-columns:1fr}} .footer .brand{color:var(--on-brand);margin-bottom:1.3rem} .footer-links li{margin-bottom:.75rem} .footer-links a{font-size:.94rem;transition:color .3s ease} .footer-links a:hover{color:var(--accent-soft)} .contact-ft a,.contact-ft p{ display:flex;gap:.9rem;align-items:flex-start; margin-bottom:1.1rem;font-size:.94rem;line-height:1.65; } .contact-ft a:hover{color:var(--accent-soft)} .contact-ft .icon{ flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center; border:1px solid rgba(253,243,233,.28);font-size:.85rem; } .socials{display:flex;gap:.8rem;margin-top:1.4rem} .socials a{ width:42px;height:42px;border-radius:50%;display:grid;place-items:center; border:1px solid rgba(253,243,233,.28);transition:background .3s ease,color .3s ease; } .socials a:hover{background:var(--on-brand);color:var(--brand-deep)} .socials svg{width:18px;height:18px;fill:currentColor} .footer-lower{ margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid rgba(253,243,233,.16); padding-block:1.6rem;text-align:center;font-size:.85rem; } .footer-lower p{margin:0} /* ───────────────────────────────────────────── 14. FLOATING ACTIONS + MODAL ───────────────────────────────────────────── */ .floaters{position:fixed;right:1.2rem;bottom:1.2rem;z-index:90;display:flex;flex-direction:column;gap:.7rem;align-items:flex-end} .floater{ display:inline-flex;align-items:center;gap:.55rem; padding:.85rem 1.3rem;border-radius:999px;font-size:.78rem;font-weight:600; letter-spacing:.12em;text-transform:uppercase;border:0;cursor:pointer; box-shadow:var(--shadow-md);transition:transform .3s ease; } .floater:hover{transform:translateY(-3px)} /* On a phone the labelled pills are wide enough to hang off the right edge, so only a sliver of each one shows. Below this width they become round icon buttons instead: the label stays in the markup for screen readers and for the accessible name, it is simply not drawn. */ @media (max-width:600px){ .floaters{right:.9rem;bottom:.9rem;gap:.6rem} .floater{ font-size:0;letter-spacing:0;gap:0; width:52px;height:52px;padding:0;justify-content:center;border-radius:50%; } .floater svg{width:22px;height:22px} } .floater--wa{background:#25D366;color:#fff} .floater--enq{background:var(--brand-deep);color:var(--on-brand)} .floater--call{background:var(--panel);color:var(--brand-deep);border:1px solid rgba(122,74,97,.28)} .floater svg{width:20px;height:20px;fill:currentColor} .floater__label{white-space:nowrap} @media (max-width:520px){.floater{font-size:0;padding:1rem;letter-spacing:0}.floater svg{width:24px;height:24px}} .modal{border:0;padding:0;background:transparent;max-width:min(560px,94vw);width:100%} .modal::backdrop{background:rgba(18,9,21,.72)} .modal__inner{background:var(--canvas);color:var(--ink-soft);border-radius:6px;padding:clamp(1.75rem,4vw,2.75rem);position:relative} .modal__close{ position:absolute;top:1rem;right:1rem;width:40px;height:40px;border-radius:50%; border:1px solid var(--line);background:var(--panel);color:var(--brand); font-size:1.2rem;cursor:pointer; } .modal h2{font-size:1.65rem;margin-bottom:.4rem} .modal .form-grid{margin-top:1.4rem} .modal .form-status{grid-column:1/-1;margin:.2rem 0 0;font-size:.9rem;color:var(--ink-soft)} .modal .form-status a{color:var(--brand-deep);text-decoration:underline} /* ───────────────────────────────────────────── 15. MOTION PREFERENCES ───────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} .js .reveal{opacity:1;transform:none} .hero__slide{transform:none} /* The rows are the client's core requirement, so they keep moving here, but at a third of the speed and still swipeable by hand. */ .js .marquee--anim .marquee__track{animation-duration:calc(var(--speed,35s) * 3)!important} .js .marquee{overflow-x:auto} .inquiry__media > *{animation:none;transform:none} } /* ───────────────────────────────────────────── 16. REVIEWS (horizontal rail, real Google reviews only) ───────────────────────────────────────────── */ .reviews-head{ display:flex;justify-content:space-between;align-items:flex-end; gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3rem); } .reviews-head .section-title{text-align:left;margin:0;max-width:640px} .reviews-head .section-title .kicker{justify-content:flex-start} .reviews-head .section-title p{margin-inline:0} .reviews-head__cta{display:flex;flex-wrap:wrap;gap:.7rem} /* The reviews roll continuously, the same mechanism as the Our Work rows: one composited transform, cloned track, pauses on hover and off screen. */ .reviews-marquee{margin-top:.25rem} .reviews-marquee .marquee__track{gap:clamp(1rem,2vw,1.5rem);align-items:stretch} /* Too few cards to fill the row: centre them rather than roll a short loop. */ .marquee--static .marquee__track{width:100%;justify-content:center;flex-wrap:wrap} .review{ flex:0 0 min(400px,82vw); display:flex;flex-direction:column;gap:1rem; background:var(--panel);border:1px solid var(--line);border-radius:4px; padding:clamp(1.5rem,3vw,2.1rem); } .review__stars{color:var(--brand-deep);letter-spacing:.2em;font-size:.85rem;line-height:1} .review__quote{ font-family:var(--display);color:var(--ink); font-size:1.02rem;line-height:1.75;margin:0; } .review__foot{ margin-top:auto;display:flex;align-items:center;gap:.85rem; padding-top:1rem;border-top:1px solid var(--line); } .review__avatar{ flex:0 0 auto;width:40px;height:40px;border-radius:50%; display:grid;place-items:center; background:var(--canvas-alt);color:var(--brand-deep); font-family:var(--display);font-size:1rem; object-fit:cover; /* when it is a real photograph */ } .review__name{display:block;font-size:.92rem;color:var(--ink);font-weight:600;line-height:1.35} .review__src{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);line-height:1.6} /* ───────────────────────────────────────────── 17. VISIT US + MAP ───────────────────────────────────────────── */ .visit{ display:grid;grid-template-columns:1.05fr .95fr; gap:clamp(1.75rem,4vw,3.5rem);align-items:start; } @media (max-width:950px){.visit{grid-template-columns:1fr}} .visit__card{ background:var(--panel);border:1px solid var(--line);border-radius:4px; padding:clamp(1.6rem,3.5vw,2.4rem); } .visit__card .kicker{ display:inline-flex;align-items:center;gap:.6rem; font-size:.76rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase; color:var(--brand-deep);margin-bottom:1rem; } .visit__card .kicker::before{content:"";width:34px;height:1px;background:var(--accent)} .visit__card h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:.45rem} .visit__list{margin:1.7rem 0 0} .visit__list li{ display:flex;gap:1rem;align-items:flex-start; margin-bottom:1.3rem;font-size:.95rem;line-height:1.7; } .visit__list li:last-child{margin-bottom:0} .visit__list .icon{ flex:0 0 36px;height:36px;border-radius:50%; border:1px solid var(--line);color:var(--brand-deep); display:grid;place-items:center;font-size:.85rem; } .visit__list b{ display:block;color:var(--ink);font-weight:600; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.2rem; } .visit__list a:hover{color:var(--brand)} .visit__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem} .map{ position:relative;height:clamp(230px,26vw,320px); border:1px solid var(--line);border-radius:4px;overflow:hidden; background:var(--canvas-alt); } .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .map__facade{ position:absolute;inset:0;display:grid;place-content:center;justify-items:center; gap:.9rem;text-align:center;padding:2rem; } .map__pin{ width:52px;height:52px;border-radius:50%;display:grid;place-items:center; background:var(--panel);border:1px solid var(--line);color:var(--brand-deep);font-size:1.35rem; } .map__facade p{font-size:.9rem;max-width:34ch;margin:0}