/* ============================================================ Shampooch — Premium Dog Care, Dubai Design tokens + base styles ============================================================ */ :root { /* Palette — sourced from official logo + signature pink/yellow van. Refined to feel premium-playful, not childish. */ --ink: #1B1A24; --ink-2: #2C2A3A; --slate: #6E6A7C; --muted: #9E99AB; --pooch-pink: #E91885; /* van magenta */ --pooch-pink-deep: #C30B6E; --pooch-pink-soft: #FDE7F1; --pooch-yellow: #FFD23F; /* van yellow */ --pooch-yellow-soft: #FFF3C6; --sky: #79C7E3; --sky-soft: #E4F4FB; --moss: #2E8B6F; /* safety / verified */ --cream: #FBF5EC; --cream-2: #F4ECDD; --paper: #FFFFFF; --line: #ECE3D2; --line-2: #E5DCC8; --shadow-card: 0 1px 0 rgba(27, 26, 36, 0.04), 0 12px 32px -16px rgba(27, 26, 36, 0.18); --shadow-hover: 0 1px 0 rgba(27, 26, 36, 0.04), 0 28px 56px -24px rgba(27, 26, 36, 0.28); --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-xl: 36px; --max: 1280px; --gutter: clamp(20px, 4vw, 56px); --font-display: "Bricolage Grotesque", "Quicksand", system-ui, sans-serif; --font-body: "Manrope", "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } /* Theme variants triggered by data-theme on via Tweaks */ body[data-theme="hot"] { --cream: #FFF1F6; --cream-2: #FBDDE9; --line: #F4CADD; } body[data-theme="sunny"] { --cream: #FFFBE9; --cream-2: #FFF3C6; --line: #F3E6A6; } body[data-theme="ink"] { --cream: #1B1A24; --cream-2: #2C2A3A; --paper: #2C2A3A; --ink: #FBF5EC; --ink-2: #FFFFFF; --slate: #C9C3D6; --muted: #8B86A0; --line: #3A3849; --line-2: #4A485B; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ::selection { background: var(--pooch-yellow); color: var(--ink); } /* ----- Typography ----- */ .display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; color: var(--ink); } .h-eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; font-weight: 700; color: var(--pooch-pink-deep); } body[data-theme="ink"] .h-eyebrow { color: var(--pooch-yellow); } .lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--slate); max-width: 60ch; text-wrap: pretty; } /* ----- Layout ----- */ .shell { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(64px, 9vw, 120px); } .section-tight { padding-block: clamp(48px, 7vw, 88px); } /* ----- Buttons ----- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-pink { background: var(--pooch-pink); color: white; box-shadow: 0 8px 20px -8px rgba(233, 24, 133, 0.55); } .btn-pink:hover { background: var(--pooch-pink-deep); } .btn-ink { background: var(--ink); color: var(--cream); } .btn-ink:hover { background: var(--ink-2); } .btn-ghost { background: transparent; border-color: var(--ink); color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--cream); } .btn-yellow { background: var(--pooch-yellow); color: var(--ink); } .btn-yellow:hover { background: #ffc414; } .btn-sm { padding: 10px 16px; font-size: 14px; } .btn-lg { padding: 18px 28px; font-size: 17px; } /* ----- Chips / tags ----- */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); } .chip .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--moss); } .chip-pink { background: var(--pooch-pink-soft); border-color: transparent; color: var(--pooch-pink-deep); } .chip-yellow { background: var(--pooch-yellow-soft); border-color: transparent; color: #6B4D00; } .chip-sky { background: var(--sky-soft); border-color: transparent; color: #144A66; } /* ----- Cards ----- */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease; } .card:hover { box-shadow: var(--shadow-hover); } body[data-theme="ink"] .card { background: var(--cream-2); } /* ----- Forms ----- */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 13px; font-weight: 600; color: var(--ink-2); } .field input, .field select, .field textarea { font: inherit; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pooch-pink); box-shadow: 0 0 0 4px rgba(233, 24, 133, 0.12); } .field textarea { resize: vertical; min-height: 110px; } /* ----- Marquee ----- */ @keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .marquee { overflow: hidden; white-space: nowrap; position: relative; } .marquee-track { display: inline-flex; align-items: center; animation: marquee 36s linear infinite; } .marquee-track > * { padding-inline: 28px; } /* ----- Sticky page nav for service pages ----- */ .sub-nav { position: sticky; top: 70px; z-index: 30; background: color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: blur(10px); border-block: 1px solid var(--line); } /* ----- Hero swipe ribbons ----- */ .ribbon { position: absolute; height: 36px; background: var(--pooch-yellow); transform: rotate(-2deg); pointer-events: none; } /* ----- Photo frame variants ----- */ .photo { border-radius: var(--radius-lg); overflow: hidden; background: var(--cream-2); position: relative; } .photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo.tall { aspect-ratio: 3/4; } .photo.wide { aspect-ratio: 16/9; } .photo.square { aspect-ratio: 1/1; } /* tilt variants for editorial rhythm */ .tilt-l { transform: rotate(-1.5deg); } .tilt-r { transform: rotate(1.5deg); } /* ----- Underline link ----- */ .link { position: relative; font-weight: 600; color: var(--ink); padding-bottom: 2px; } .link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pooch-pink); transform-origin: left; transition: transform 220ms ease; } .link:hover::after { transform: scaleX(0.4); } /* ----- WhatsApp floating FAB ----- */ .whatsapp-fab { position: fixed; right: 18px; bottom: 96px; z-index: 60; width: 56px; height: 56px; border-radius: 999px; background: #25D366; color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 32px -10px rgba(37,211,102,0.55); transition: transform 180ms ease; border: none; } .whatsapp-fab:hover { transform: scale(1.06); } @media (min-width: 900px) { .whatsapp-fab { bottom: 24px; } } /* ----- Mobile bottom bar ----- */ .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--paper); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px); } .mobile-bar a { display: flex; align-items: center; justify-content: center; padding: 12px 6px; border-radius: 12px; font-weight: 600; font-size: 13px; gap: 6px; } .mobile-bar .call { background: var(--cream); color: var(--ink); } .mobile-bar .wa { background: #25D366; color: white; } .mobile-bar .book { background: var(--pooch-pink); color: white; } @media (min-width: 900px) { .mobile-bar { display: none; } } /* hide FAB on small screens (the bottom bar covers it) */ @media (max-width: 899px) { .whatsapp-fab { display: none; } } /* ----- Nav ----- */ .nav-wrap { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; gap: 24px; padding-block: 14px; } .nav-links { display: none; gap: 26px; flex: 1; justify-content: center; } .nav-links a { font-weight: 600; font-size: 14px; color: var(--ink-2); position: relative; padding: 6px 2px; } .nav-links a.active { color: var(--pooch-pink-deep); } .nav-links a:hover { color: var(--pooch-pink-deep); } .nav-links .has-menu { position: relative; } .nav-links .menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-width: 420px; opacity: 0; pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; } .nav-links .has-menu:hover .menu, .nav-links .has-menu:focus-within .menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-links .menu a { padding: 10px 12px; border-radius: 10px; display: flex; flex-direction: column; gap: 2px; } .nav-links .menu a:hover { background: var(--cream); } .nav-links .menu a small { color: var(--slate); font-weight: 500; font-size: 12px; } @media (min-width: 960px) { .nav-links { display: flex; } } .logo-mark { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); } .logo-mark .dot-pink { width: 10px; height: 10px; border-radius: 999px; background: var(--pooch-pink); } .logo-mark .dot-yellow { width: 10px; height: 10px; border-radius: 999px; background: var(--pooch-yellow); } /* hamburger */ .hamburger { width: 40px; height: 40px; background: transparent; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; } @media (min-width: 960px) { .hamburger { display: none; } } .mobile-drawer { position: fixed; inset: 0; background: var(--cream); z-index: 80; padding: 24px; display: flex; flex-direction: column; gap: 6px; transform: translateY(-100%); transition: transform 260ms ease; } .mobile-drawer.open { transform: translateY(0); } .mobile-drawer a { font-family: var(--font-display); font-size: 28px; font-weight: 600; padding: 12px 0; border-bottom: 1px solid var(--line); } /* ----- Trust strip ----- */ .trust-strip { background: var(--ink); color: var(--cream); overflow: hidden; } .trust-strip .row { display: flex; align-items: center; gap: 32px; padding-block: 18px; font-size: 14px; font-weight: 600; flex-wrap: wrap; justify-content: center; } .trust-strip .row span { display: inline-flex; align-items: center; gap: 8px; } .trust-strip svg { color: var(--pooch-yellow); } /* ----- Service tile ----- */ .svc-tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; background: var(--ink); cursor: pointer; isolation: isolate; } .svc-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; } .svc-tile:hover img { transform: scale(1.06); } .svc-tile .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.72) 100%); pointer-events: none; } .svc-tile .meta { position: absolute; left: 22px; right: 22px; bottom: 22px; color: white; } .svc-tile .meta h3 { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); margin: 0 0 4px; font-weight: 700; } .svc-tile .meta p { margin: 0; font-size: 14px; opacity: 0.85; } .svc-tile .num { position: absolute; top: 18px; left: 22px; font-family: var(--font-mono); color: white; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.9; } .svc-tile .badge { position: absolute; top: 18px; right: 18px; background: var(--pooch-yellow); color: var(--ink); font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; } /* ----- Gallery grid ----- */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 720px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } } @media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } } /* ----- Sticker labels (handwritten-ish) ----- */ .sticker { display: inline-block; background: var(--pooch-yellow); color: var(--ink); padding: 3px 10px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 14px; transform: rotate(-3deg); } .sticker-pink { background: var(--pooch-pink); color: white; } /* ----- Section header ----- */ .sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; } .sec-head .left { max-width: 60ch; } .sec-head h2.display { font-size: clamp(34px, 4.6vw, 64px); margin: 8px 0 0; } /* ----- Footer ----- */ .footer { background: var(--ink); color: var(--cream); padding: 80px 0 60px; } .footer a { color: var(--cream); } .footer .grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; } @media (max-width: 800px) { .footer .grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer .grid { grid-template-columns: 1fr; } } .footer h5 { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; font-weight: 700; color: var(--pooch-yellow); margin: 0 0 16px; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .footer .bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(251, 245, 236, 0.12); display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 13px; color: rgba(251, 245, 236, 0.6); gap: 12px; } /* ----- Accordion (FAQ) ----- */ .acc-item { border-bottom: 1px solid var(--line); } .acc-trigger { width: 100%; background: transparent; border: none; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2vw, 24px); color: var(--ink); cursor: pointer; gap: 24px; } .acc-trigger .plus { width: 36px; height: 36px; border-radius: 999px; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; transition: background 140ms ease, transform 200ms ease, color 140ms ease; color: var(--ink); } .acc-item.open .acc-trigger .plus { background: var(--pooch-pink); color: white; transform: rotate(45deg); } .acc-body { max-height: 0; overflow: hidden; transition: max-height 320ms ease; color: var(--slate); line-height: 1.65; } .acc-item.open .acc-body { max-height: 800px; padding-bottom: 24px; } /* ----- Hero ----- */ .hero { position: relative; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); } .hero .grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } @media (min-width: 980px) { .hero .grid { grid-template-columns: 1.05fr 1fr; gap: 64px; } } .hero h1.display { font-size: clamp(44px, 7vw, 96px); margin: 18px 0 22px; } .hero h1 .pink { color: var(--pooch-pink-deep); font-style: italic; } .hero h1 .underline { display: inline-block; position: relative; } .hero h1 .underline::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -6px; height: 18px; background: var(--pooch-yellow); z-index: -1; border-radius: 6px; transform: rotate(-1deg); } .hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; } .hero .meta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; } /* hero stacked photo collage */ .hero-collage { position: relative; aspect-ratio: 1/1; width: 100%; max-width: 560px; margin-inline: auto; } .hero-collage .a { position: absolute; inset: 0 22% 14% 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); } .hero-collage .b { position: absolute; inset: 35% 0 0 28%; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); border: 6px solid var(--paper); } .hero-collage .sticker-float { position: absolute; top: -8px; left: -8px; z-index: 3; } .hero-collage img { width: 100%; height: 100%; object-fit: cover; } /* van band */ .van-band { background: var(--pooch-pink); color: white; overflow: hidden; position: relative; } .van-band .inner { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; padding-block: clamp(64px, 8vw, 110px); } @media (min-width: 880px) { .van-band .inner { grid-template-columns: 1.1fr 1fr; gap: 48px; } } .van-band h2.display { color: white; font-size: clamp(36px, 4.5vw, 60px); } .van-band .photo { background: rgba(255,255,255,0.08); border: 6px solid var(--pooch-yellow); } .van-band .bubble { position: absolute; border-radius: 999px; background: rgba(255,255,255,0.12); pointer-events: none; } /* small util */ .stack-sm { display: grid; gap: 8px; } .stack { display: grid; gap: 16px; } .stack-lg { display: grid; gap: 28px; } .row { display: flex; align-items: center; gap: 12px; } .row-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* big pretty UL */ .pretty-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .pretty-list li { display: flex; gap: 12px; align-items: flex-start; } .pretty-list li .check { flex-shrink: 0; margin-top: 3px; width: 22px; height: 22px; border-radius: 999px; background: var(--pooch-yellow); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; } /* Verified badge */ .verified-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--moss); background: #E8F4EE; padding: 4px 10px; border-radius: 999px; } /* page-top hero for inner pages */ .page-hero { padding-block: clamp(60px, 9vw, 120px); border-bottom: 1px solid var(--line); } .page-hero h1.display { font-size: clamp(40px, 6vw, 84px); margin: 12px 0 18px; } /* breadcrumbs */ .crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--slate); } .crumbs span { color: var(--muted); } .crumbs a:hover { color: var(--pooch-pink-deep); } /* package toggle */ .pkg-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 760px) { .pkg-grid { grid-template-columns: 1fr 1fr; } } .pkg-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; background: var(--paper); display: flex; flex-direction: column; gap: 18px; } .pkg-card.featured { background: var(--ink); color: var(--cream); border-color: var(--ink); } .pkg-card.featured h3, .pkg-card.featured h4 { color: var(--cream); } .pkg-card .quote-cta { margin-top: auto; } /* Safety standards icon row */ .safety-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (min-width: 880px) { .safety-grid { grid-template-columns: repeat(3, 1fr); } } .safety-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .safety-card .icon-circle { width: 44px; height: 44px; border-radius: 999px; background: var(--pooch-yellow-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--pooch-pink-deep); margin-bottom: 12px; } .safety-card h4 { font-family: var(--font-display); font-size: 18px; margin: 0 0 6px; } .safety-card p { font-size: 14px; color: var(--slate); margin: 0; line-height: 1.55; } /* Big quote */ .big-quote { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; } .big-quote::before { content: "“"; color: var(--pooch-pink); font-size: 1.4em; line-height: 0; vertical-align: -0.2em; margin-right: 4px; } .big-quote::after { content: "”"; color: var(--pooch-pink); font-size: 1.4em; line-height: 0; vertical-align: -0.2em; margin-left: 4px; } /* Toast / form success */ .toast { position: fixed; bottom: 100px; right: 20px; background: var(--moss); color: white; padding: 14px 18px; border-radius: 12px; font-weight: 600; z-index: 90; box-shadow: 0 14px 32px -10px rgba(0,0,0,0.3); animation: toastIn 240ms ease; } @keyframes toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }