:root { /* Restrained navy-led palette — confident and professional, not candy-bright. */ --brand: #1e3a8a; --brand-700: #1b3270; --blue: #1e40af; --sky: #2563eb; --ink: #0f172a; --muted: #56607a; --bg: #ffffff; --soft: #f5f7fb; --card: #ffffff; --line: #e6e9f0; --nav-bg: rgba(255, 255, 255, 0.88); --tile: linear-gradient(135deg, #eef2fb, #e6ecf9); --accent: #1e40af; /* readable accent for links/prices/eyebrows */ --radius: 16px; --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06); --shadow: 0 14px 36px rgba(15, 23, 42, 0.10); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Dark theme — toggled by data-theme="dark" on */ :root[data-theme="dark"] { --ink: #e9eefb; --muted: #99a3bd; --bg: #0a0f1c; --soft: #111a2e; --card: #141d30; --line: #232d45; --nav-bg: rgba(10, 15, 28, 0.88); --tile: linear-gradient(135deg, #18223c, #141d33); --accent: #6f9bff; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow: 0 14px 36px rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } /* Header */ .nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--nav-bg); backdrop-filter: saturate(1.5) blur(10px); border-bottom: 1px solid var(--line); } .nav-brand img { height: 30px; } :root[data-theme="dark"] .nav-brand img { filter: brightness(0) invert(1); } .nav-right { display: flex; align-items: center; gap: 10px; } .theme-btn { width: 38px; height: 38px; border-radius: 50%; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 17px; line-height: 1; display: grid; place-items: center; transition: transform 0.15s, background 0.15s; } .theme-btn:hover { transform: scale(1.08); } .nav-cta { text-decoration: none; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--brand)); padding: 9px 15px; border-radius: 999px; box-shadow: 0 6px 16px rgba(29, 78, 216, 0.3); } /* Hero */ .hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(150deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 58, 138, 0.88) 55%, rgba(30, 64, 175, 0.72) 130%), url("/assets/hero-bg.jpg") center 30% / cover no-repeat; padding: 56px 20px 64px; } .hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.12); border-radius: 50%; } .hero::before { content: ""; position: absolute; left: -60px; bottom: -90px; width: 220px; height: 220px; background: rgba(255, 255, 255, 0.09); border-radius: 50%; } .hero-inner { position: relative; max-width: 720px; margin: 0 auto; } .badge { display: inline-block; font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, 0.18); padding: 6px 13px; border-radius: 999px; margin-bottom: 16px; } .hero h1 { font-size: 46px; line-height: 1.02; font-weight: 900; letter-spacing: -0.03em; margin: 0 0 14px; } .hero h1 span { color: #d6e6ff; } .lede { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); max-width: 560px; margin: 0 0 24px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 15px; padding: 13px 20px; border-radius: 14px; cursor: pointer; border: none; } .btn-wa { background: #25d366; color: #fff; box-shadow: 0 8px 20px rgba(18, 140, 75, 0.35); } .btn-light { background: #fff; color: var(--brand); } .btn-ghost { background: rgba(255, 255, 255, 0.16); color: #fff; } .btn-primary { background: linear-gradient(135deg, var(--blue), var(--brand)); color: #fff; box-shadow: 0 8px 20px rgba(29, 78, 216, 0.3); } /* Trust strip */ .strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 720px; margin: -28px auto 0; position: relative; z-index: 5; padding: 0 16px; } .strip div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 6px; text-align: center; box-shadow: var(--shadow-sm); } .strip .strip-ic { font-size: 20px; display: block; margin-bottom: 5px; } .strip b { display: block; color: var(--ink); font-size: 12.5px; line-height: 1.3; } /* Sections */ .section { max-width: 860px; margin: 0 auto; padding: 46px 18px; } .section h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; text-align: center; } .section-sub { text-align: center; color: var(--muted); margin: 0 0 26px; } .eyebrow { display: block; text-align: center; font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in { opacity: 1; transform: none; } /* Why us — dark feature + stats band */ .why { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 120% at 80% -10%, #15346e 0%, #0c1f48 55%, #081632 100%); padding: 56px 18px; } .why::before { content: ""; position: absolute; left: -80px; top: -60px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(56, 189, 248, 0.18), transparent 70%); } .why-inner { max-width: 900px; margin: 0 auto; position: relative; } .eyebrow.light { color: var(--sky); } .why-inner h2 { color: #fff; } .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 30px 0 8px; } .why-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); padding: 22px 18px; transition: transform 0.15s, background 0.15s; } .why-item:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.09); } .why-ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(135deg, var(--blue), var(--sky)); box-shadow: 0 8px 20px rgba(56, 189, 248, 0.3); margin-bottom: 14px; } .why-item h3 { margin: 0 0 6px; font-size: 16px; } .why-item p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.78); } .why-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: center; } .why-stats b { display: block; font-size: 30px; font-weight: 900; letter-spacing: -0.02em; background: linear-gradient(135deg, #fff, var(--sky)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .why-stats span { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); } /* Reviews proof */ .reviews-sec { padding-bottom: 0; } .reviews-card { max-width: 620px; margin: 0 auto; text-align: center; background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 24px; box-shadow: var(--shadow-sm); } .reviews-card .stars { color: #fbbf24; font-size: 26px; letter-spacing: 3px; margin-bottom: 10px; } .reviews-card p { color: var(--muted); line-height: 1.6; margin: 0 0 18px; } /* Closing CTA band */ .cta-final { position: relative; overflow: hidden; color: #fff; text-align: center; background: linear-gradient(135deg, var(--brand) 0%, var(--blue) 50%, var(--sky) 130%); padding: 54px 20px; margin-top: 40px; } .cta-final::after { content: ""; position: absolute; right: -60px; top: -70px; width: 240px; height: 240px; background: rgba(255, 255, 255, 0.12); border-radius: 50%; } .cta-inner { max-width: 620px; margin: 0 auto; position: relative; } .cta-inner h2 { color: #fff; font-size: 30px; margin: 0 0 10px; } .cta-inner p { color: rgba(255, 255, 255, 0.92); line-height: 1.6; margin: 0 0 22px; } .cta-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* Services grid */ .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .svc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); transition: transform 0.1s, box-shadow 0.15s; } .svc:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .svc-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 26px; background: var(--tile); margin-bottom: 12px; } .svc h3 { margin: 0 0 4px; font-size: 16px; } .svc p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; } /* Services CTA */ .svc-cta { margin-top: 18px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-align: center; } .svc-cta p { margin: 0 0 14px; color: var(--ink); font-size: 15px; } /* Business / bulk band */ .biz { position: relative; overflow: hidden; color: #fff; background: linear-gradient(140deg, #1a3fb0 0%, #1d4ed8 55%, #2f6bff 120%); padding: 46px 18px; } .biz::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 260px; height: 260px; background: rgba(255, 255, 255, 0.08); border-radius: 50%; } .biz-inner { max-width: 760px; margin: 0 auto; position: relative; } .biz-inner h2 { color: #fff; text-align: left; font-size: 28px; margin: 12px 0 8px; } .biz-inner > p { color: rgba(255, 255, 255, 0.92); line-height: 1.6; margin: 0 0 16px; } .biz-badge { display: inline-block; font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, 0.18); padding: 6px 13px; border-radius: 999px; } .biz-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; } .biz-list li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.4; } .biz-list li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: #bfe0ff; } .fr { font-size: 14px; color: #eaf3ff; font-style: italic; margin: 0 0 18px; } .biz-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* About */ .about { background: var(--soft); max-width: none; } .about-card { max-width: 860px; margin: 0 auto; display: flex; gap: 26px; align-items: center; flex-wrap: wrap; } .about-logo { width: 150px; height: auto; } .about-photo { width: 300px; max-width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 18px; box-shadow: var(--shadow); } .about-card h2 { text-align: left; } .about-card p { color: var(--muted); line-height: 1.65; margin: 0 0 18px; } .about-card > div { flex: 1; min-width: 260px; } /* Gallery slideshow */ .slider { position: relative; max-width: 760px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--soft); } .slides { display: flex; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .slide { flex: 0 0 100%; margin: 0; } .slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: none; cursor: pointer; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--brand); font-size: 26px; line-height: 1; display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: background 0.15s, transform 0.15s; } .slider-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); } .slider-nav.prev { left: 12px; } .slider-nav.next { right: 12px; } .dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 7px; justify-content: center; } .dot { width: 8px; height: 8px; padding: 0; border: none; cursor: pointer; border-radius: 999px; background: rgba(255, 255, 255, 0.55); transition: width 0.25s, background 0.25s; } .dot.active { width: 22px; background: #fff; } /* Products & prices */ .cat-tools { max-width: 760px; margin: 0 auto 18px; } .cat-search { width: 100%; padding: 13px 16px; font-size: 15px; font-family: inherit; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); } .cat-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } .cat-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .cat-chip { border: 1px solid var(--line); background: var(--card); color: var(--muted); font-weight: 600; font-size: 13px; font-family: inherit; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: 0.15s; } .cat-chip:hover { border-color: var(--blue); color: var(--accent); } .cat-chip.on { background: linear-gradient(135deg, var(--blue), var(--brand)); color: #fff; border-color: transparent; } .cat-grid { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cat-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-sm); transition: transform 0.1s, box-shadow 0.15s; } .cat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .cat-info { min-width: 0; } .cat-name { font-weight: 700; font-size: 14.5px; line-height: 1.25; } .cat-tag { font-size: 12px; color: var(--muted); margin-top: 3px; } .cat-right { text-align: right; flex-shrink: 0; } .cat-price { font-weight: 800; color: var(--accent); font-size: 15px; } .cat-buy { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; text-decoration: none; color: #fff; background: #25d366; padding: 5px 13px; border-radius: 999px; } .cat-more { grid-column: 1 / -1; justify-self: center; margin-top: 6px; padding: 12px 26px; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--accent); cursor: pointer; background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); transition: transform 0.1s, box-shadow 0.15s; } .cat-more:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .cat-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 30px 12px; line-height: 1.7; } .cat-empty a { color: var(--accent); font-weight: 600; text-decoration: none; } .cat-meta { max-width: 760px; margin: 16px auto 0; text-align: center; color: var(--muted); font-size: 12.5px; } /* Source on request */ .source-card { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); } .source-ic { width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0; display: grid; place-items: center; font-size: 32px; background: linear-gradient(135deg, var(--blue), var(--sky)); box-shadow: 0 8px 20px rgba(56, 189, 248, 0.3); } .source-card > div { flex: 1; min-width: 240px; } .source-card h2 { text-align: left; margin: 0 0 6px; font-size: 22px; } .source-card p { color: var(--muted); margin: 0 0 16px; line-height: 1.6; } /* Visit */ .visit { background: var(--soft); max-width: none; } .visit > h2 { max-width: 860px; margin: 0 auto 26px; } .visit-grid { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .visit-info { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); } .vrow { display: flex; gap: 12px; margin-bottom: 16px; } .vic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--tile); } .vrow b { font-size: 14px; } .vrow p { margin: 3px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; } .vrow a { color: var(--accent); text-decoration: none; font-weight: 600; } .visit-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .visit-actions .btn { font-size: 14px; padding: 11px 16px; } .map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); min-height: 280px; border: 1px solid var(--line); } .map iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; } .map-link { display: inline-block; margin-top: 10px; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; } /* Socials */ .socials-sec { text-align: center; } .socials { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .soc { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 999px; box-shadow: var(--shadow-sm); } .soc span { font-size: 16px; width: 18px; text-align: center; } .soc svg { width: 18px; height: 18px; flex-shrink: 0; } .soc.yt { background: #ff0000; } .soc.ig { background: linear-gradient(135deg, #feda75, #d62976 45%, #962fbf 80%, #4f5bd5); } .soc.tt { background: #010101; } .soc.fb { background: #1877f2; } .soc.sc { background: #fffc00; color: #1a1a1a; } .soc.sc span { filter: none; } /* Footer */ .footer { text-align: center; padding: 40px 18px 70px; } .footer img { height: 30px; margin: 0 auto 12px; } :root[data-theme="dark"] .footer img { filter: brightness(0) invert(1); } .footer p { margin: 4px 0; color: var(--muted); font-size: 13.5px; } .footer .copy { font-size: 12px; margin-top: 12px; } /* Floating WhatsApp */ .fab { position: fixed; right: 18px; bottom: 18px; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 28px; text-decoration: none; box-shadow: 0 10px 26px rgba(18, 140, 75, 0.45); z-index: 40; } /* ============================================================ Premium polish layer — cohesive micro-interactions & finish. Purely additive; overrides earlier rules where needed. ============================================================ */ /* Branded text selection + tidy scrollbar */ ::selection { background: rgba(37, 99, 235, 0.20); color: inherit; } * { scrollbar-color: var(--line) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: #c5cde0; } /* Clear, consistent keyboard focus rings (accessibility + polish) */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 12px; } /* Unified button motion: gentle lift on hover, tactile press */ .btn { transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .btn:hover { transform: translateY(-2px); filter: brightness(1.04); } .btn:active { transform: translateY(0); filter: brightness(0.97); } /* Nav: hairline depth + livelier CTA */ .nav { transition: box-shadow 0.2s ease; } .nav-cta { transition: transform 0.15s ease, box-shadow 0.15s ease; } .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(29, 78, 216, 0.42); } .badge { border: 1px solid rgba(255, 255, 255, 0.22); } /* Quick-facts strip reacts to touch like the cards do */ .strip div { transition: transform 0.15s ease, box-shadow 0.15s ease; } .strip div:hover { transform: translateY(-2px); box-shadow: var(--shadow); } /* Cards: consistent lift + brand-tinted edge + icon flourish on hover */ .svc, .cat-card, .source-card, .reviews-card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .svc:hover, .cat-card:hover { border-color: rgba(37, 99, 235, 0.35); } .svc-ic { transition: transform 0.2s ease; } .svc:hover .svc-ic { transform: scale(1.07) rotate(-3deg); } /* Socials lift on hover */ .soc { transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .soc:hover { transform: translateY(-2px); box-shadow: var(--shadow); filter: brightness(1.05); } /* Floating WhatsApp: hover grow + a gentle "live" pulse ring */ .fab { transition: transform 0.2s ease, box-shadow 0.2s ease; } .fab:hover { transform: scale(1.09); } @media (prefers-reduced-motion: no-preference) { /* Drifting hero accents add depth without distraction */ .hero::after { animation: floatA 10s ease-in-out infinite; } .hero::before { animation: floatB 12s ease-in-out infinite; } /* Pulse ring telegraphs that WhatsApp is live & one tap away */ .fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: fabPulse 2.6s ease-out infinite; } } @keyframes floatA { 50% { transform: translate(-14px, 18px); } } @keyframes floatB { 50% { transform: translate(16px, -14px); } } @keyframes fabPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); } 70%, 100% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } } /* Gradient headline word — adds richness without new colour */ .hero h1 span { background: linear-gradient(120deg, #9fc8ff 0%, #d6e6ff 55%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* "Live" dot in the hero badge */ .badge .dot-live { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #34d399; vertical-align: middle; } @media (prefers-reduced-motion: no-preference) { .badge .dot-live { animation: liveDot 1.8s ease-out infinite; } } @keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } } /* Star-rating social proof under the hero buttons */ .hero-proof { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 13.5px; color: rgba(255, 255, 255, 0.9); } .hero-proof .hp-stars { color: #fbbf24; letter-spacing: 2px; font-size: 15px; } /* Designed accent rule under centred section headings */ .section h2 { position: relative; } .section h2::after { content: ""; display: block; width: 46px; height: 3px; margin: 12px auto 0; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--sky)); } /* keep the rule left-aligned where the heading itself is left-aligned */ .about-card h2::after, .source-card h2::after { margin-left: 0; margin-right: auto; } /* Staggered cascade for the services grid (static content — safe to animate) */ @media (prefers-reduced-motion: no-preference) { .reveal .svc { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal.in .svc { opacity: 1; transform: none; } .grid .svc:nth-child(1) { transition-delay: 0.03s; } .grid .svc:nth-child(2) { transition-delay: 0.08s; } .grid .svc:nth-child(3) { transition-delay: 0.13s; } .grid .svc:nth-child(4) { transition-delay: 0.18s; } .grid .svc:nth-child(5) { transition-delay: 0.23s; } .grid .svc:nth-child(6) { transition-delay: 0.28s; } .grid .svc:nth-child(7) { transition-delay: 0.33s; } .grid .svc:nth-child(8) { transition-delay: 0.38s; } .grid .svc:nth-child(9) { transition-delay: 0.43s; } .grid .svc:nth-child(10) { transition-delay: 0.48s; } .grid .svc:nth-child(11) { transition-delay: 0.53s; } } /* ---- Line-icons in place of emoji (matches the store app) ---- */ .svc-ic svg, .why-ic svg, .source-ic svg { width: 26px; height: 26px; } .vic svg { width: 22px; height: 22px; } .strip-ic { display: flex; justify-content: center; } .strip-ic svg { width: 22px; height: 22px; } /* light chips → brand-tinted icon (auto-adapts in dark mode via --accent) */ .svc-ic, .vic, .strip-ic { color: var(--accent); } /* coloured gradient chips → white icon */ .why-ic, .source-ic { color: #fff; } /* button + floating-button icons */ .btn .bic { width: 18px; height: 18px; flex-shrink: 0; } .fab svg { width: 26px; height: 26px; } .theme-btn svg { width: 18px; height: 18px; } /* ============================================================ Art-direction v3 — distinctive display type, generous rhythm, deeper hero and richer surfaces. This is the "premium" layer. ============================================================ */ :root { --display: "Sora", "Inter", system-ui, sans-serif; } html, body { overflow-x: hidden; } h1, h2 { font-family: var(--display); } .hero h1, .section h2, .why-inner h2, .biz-inner h2, .cta-inner h2, .source-card h2 { text-wrap: balance; } .lede, .section-sub, .hero-proof span { text-wrap: pretty; } /* Hero — bigger, more confident, layered depth */ .hero { padding: 74px 20px 86px; background: linear-gradient(165deg, rgba(10, 15, 28, 0.94) 0%, rgba(19, 38, 96, 0.85) 46%, rgba(30, 64, 175, 0.52) 100%), radial-gradient(120% 90% at 100% 100%, rgba(56, 189, 248, 0.24), transparent 60%), url("/assets/hero-bg.jpg") center 30% / cover no-repeat; } .hero h1 { font-size: 54px; line-height: 0.97; letter-spacing: -0.035em; } .lede { font-size: 17px; max-width: 540px; } /* Generous section rhythm + larger headings */ .section { padding: 66px 18px; max-width: 880px; } .section h2 { font-size: 32px; letter-spacing: -0.025em; } .section-sub { font-size: 15.5px; margin-bottom: 34px; } .eyebrow { letter-spacing: 0.16em; font-size: 12px; } .why { padding: 74px 18px; } .why-inner h2, .biz-inner h2 { font-size: 31px; letter-spacing: -0.025em; } .cta-inner h2 { font-size: 33px; letter-spacing: -0.02em; } /* Richer card surfaces — soft top-down sheen + layered shadow */ .svc, .cat-card, .source-card, .visit-info, .reviews-card { background: linear-gradient(180deg, #ffffff, #fafbfe); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 30px rgba(15, 23, 42, 0.06); } :root[data-theme="dark"] .svc, :root[data-theme="dark"] .cat-card, :root[data-theme="dark"] .source-card, :root[data-theme="dark"] .visit-info, :root[data-theme="dark"] .reviews-card { background: linear-gradient(180deg, #161f35, #121a2c); } .svc { padding: 22px 20px; } .svc-ic { width: 54px; height: 54px; border-radius: 16px; } .svc h3 { font-size: 16.5px; } @media (max-width: 640px) { .strip { grid-template-columns: 1fr 1fr; gap: 10px; } .section { padding: 52px 16px; } .section h2, .why-inner h2, .biz-inner h2 { font-size: 27px; } .cta-inner h2 { font-size: 27px; } .hero { padding: 56px 18px 72px; } .hero h1 { font-size: 41px; } .grid { gap: 12px; } .visit-grid { grid-template-columns: 1fr; } .about-card { flex-direction: column; text-align: center; } .about-card h2 { text-align: center; } .biz-list { grid-template-columns: 1fr; } .cat-grid { grid-template-columns: 1fr; } .why-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .why-item { padding: 18px 14px; } .why-stats { grid-template-columns: 1fr 1fr; gap: 18px 12px; } .why-stats b { font-size: 26px; } .cta-inner h2 { font-size: 25px; } .source-card { flex-direction: column; text-align: center; } .source-card h2 { text-align: center; } }