:root{
--sn-blue:#0B3AA4;
--sn-orange:#FF7A00;
--sn-green:#0E8F3A;
--sn-yellow:#FFC107; /* taxi yellow */
--sn-ink:#0C1017;
--sn-border: rgba(12,16,23,.12);
--sn-shadow: 0 20px 60px rgba(12,16,23,.18);
--sn-r16:16px;
--sn-r22:22px;
--font-heading: "Source Serif 4", serif;
--font-body: "Source Sans 3", sans-serif;
}
/* Google Fonts (keep in ideally) */
/*
*/
html{ scroll-behavior:smooth; }
body{
font-family: var(--font-body);
font-weight: 500;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* HERO */
.sn-hero{
position: relative;
padding: 44px 0 36px;
color: #fff;
overflow:hidden;
}
.sn-hero-media{
position:absolute;
inset:0;
overflow:hidden;
}
.sn-hero-media img{
width:100%;
height:100%;
object-fit:cover;
transform: scale(1.04);
filter: saturate(1.06) contrast(1.08) brightness(1.02);
}
.sn-hero-shade{
position:absolute;
inset:0;
background:
linear-gradient(90deg,
rgba(12,16,23,.64) 0%,
rgba(12,16,23,.44) 45%,
rgba(12,16,23,.22) 100%
),
radial-gradient(820px 360px at 16% 10%,
rgba(11,58,164,.22),
rgba(255,255,255,0) 62%
),
radial-gradient(900px 420px at 82% 0%,
rgba(255,122,0,.18),
rgba(255,255,255,0) 62%
);
}
.sn-hero-wrap{
position:relative;
display:grid;
grid-template-columns: 1.15fr .85fr;
gap: 28px;
align-items: start;
}
.sn-hero-copy{ padding-right: 10px; }
.sn-hero-breadcrumb{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
color: rgba(255,255,255,.92);
font-weight: 800;
font-size: .95rem;
}
.sn-hero-breadcrumb i{ color: var(--sn-yellow); }
.sn-dot{ opacity:.55; }
.sn-hero-title{
margin: 12px 0 10px;
font-family: var(--font-heading);
font-size: clamp(2.1rem, 4.3vw, 3.2rem);
line-height: 1.02;
font-weight: 900;
letter-spacing: -0.03em;
background: linear-gradient(90deg, #FFE082, var(--sn-yellow), #FFB300);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.sn-hero-lead{
margin: 0 0 18px;
max-width: 68ch;
font-size: 1.06rem;
line-height: 1.6;
color: rgba(255,255,255,.95);
font-weight: 650;
}
.sn-hero-cta{
display:flex;
gap:12px;
align-items:center;
flex-wrap:wrap;
margin-bottom: 12px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,.14);
position: relative;
}
.sn-hero-cta::after{
content:"";
position:absolute;
left:0; bottom:-1px;
width: 220px; height: 2px;
background: linear-gradient(90deg, var(--sn-yellow), var(--sn-orange), var(--sn-blue));
border-radius: 999px;
opacity: .9;
}
.sn-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding: 12px 14px;
border-radius: 999px;
text-decoration:none;
font-weight: 900;
border: 1px solid rgba(255,255,255,.18);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
transform: translateZ(0);
}
.sn-btn:active{ transform: translateY(0px) scale(.99); }
.sn-btn--primary{
color:#fff;
border-color: rgba(255,122,0,.45);
background: linear-gradient(90deg, var(--sn-blue), var(--sn-orange));
box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.sn-btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 22px 44px rgba(0,0,0,.30); }
.sn-btn--ghost{
color:#fff;
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.22);
backdrop-filter: blur(10px);
}
.sn-btn--ghost:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); }
.sn-link{
color: rgba(255,255,255,.92);
font-weight: 900;
text-decoration:none;
display:inline-flex;
align-items:center;
gap:8px;
}
.sn-link i{ color: var(--sn-yellow); }
.sn-link:hover{ color:#fff; text-decoration: underline; }
/* --- Google UI Trust Strip --- */
.sn-gTrust{
margin: 14px 0 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap: 14px;
padding: 12px 12px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.08);
backdrop-filter: blur(12px);
box-shadow: 0 16px 34px rgba(0,0,0,.18);
}
.sn-gLeft{
display:flex;
align-items:center;
gap: 12px;
min-width: 0;
}
.sn-gLogo{
width: 38px;
height: 38px;
border-radius: 12px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.18);
display:grid;
place-items:center;
position: relative;
overflow:hidden;
}
.sn-gLogo .g{
position:absolute;
width: 20px;
height: 4px;
border-radius: 999px;
opacity:.95;
}
.sn-gLogo .g1{ background:#4285F4; top:10px; left:9px; }
.sn-gLogo .g2{ background:#EA4335; top:16px; left:9px; width:16px; }
.sn-gLogo .g3{ background:#FBBC05; top:22px; left:9px; width:18px; }
.sn-gLogo .g4{ background:#34A853; top:28px; left:9px; width:14px; }
.sn-gMeta{ min-width:0; }
.sn-gTop{
display:flex;
align-items:baseline;
gap: 10px;
flex-wrap:wrap;
}
.sn-gLabel{
font-weight: 900;
color: rgba(255,255,255,.95);
letter-spacing:.01em;
}
.sn-gRating{
display:inline-flex;
align-items:center;
gap: 8px;
font-weight: 850;
color: rgba(255,255,255,.92);
}
.sn-gStars{
letter-spacing: 1px;
color: var(--sn-yellow);
text-shadow: 0 10px 20px rgba(0,0,0,.25);
}
.sn-gCount{
color: rgba(255,255,255,.78);
font-weight: 750;
}
.sn-gSub{
margin-top: 2px;
color: rgba(255,255,255,.82);
font-weight: 650;
font-size: .93rem;
line-height: 1.35;
max-width: 100%;
}
.sn-gActions{
display:flex;
align-items:center;
gap: 10px;
flex-wrap:wrap;
}
.sn-gBtn{
display:inline-flex;
align-items:center;
justify-content:center;
gap: 8px;
padding: 10px 12px;
border-radius: 999px;
font-weight: 900;
border: 1px solid rgba(255,255,255,.18);
text-decoration:none;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
white-space: nowrap;
}
.sn-gBtn--primary{
background: rgba(255,255,255,.14);
border-color: rgba(255,255,255,.22);
color: #fff;
box-shadow: 0 14px 26px rgba(0,0,0,.16);
}
.sn-gBtn--primary:hover{
background: rgba(255,255,255,.18);
transform: translateY(-1px);
}
.sn-gBtn--ghost{
background: rgba(11,58,164,.10);
border-color: rgba(11,58,164,.22);
color: rgba(255,255,255,.95);
}
.sn-gBtn--ghost:hover{
background: rgba(11,58,164,.14);
transform: translateY(-1px);
}
/* Trust points */
.sn-hero-points{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 12px;
margin: 10px 0 18px;
}
.sn-point{
display:flex;
gap:10px;
padding: 12px 12px;
border-radius: var(--sn-r16);
border: 1px solid rgba(255,255,255,.20);
background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
backdrop-filter: blur(10px);
box-shadow: 0 14px 28px rgba(0,0,0,.14);
}
.sn-point:nth-child(1){ border-left: 4px solid rgba(14,143,58,.85); }
.sn-point:nth-child(2){ border-left: 4px solid rgba(11,58,164,.85); }
.sn-point:nth-child(3){ border-left: 4px solid rgba(255,122,0,.90); }
.sn-point i{
margin-top:2px;
color: var(--sn-yellow);
filter: drop-shadow(0 6px 14px rgba(0,0,0,.20));
}
.sn-point strong{ display:block; font-weight: 950; color: rgba(255,255,255,.96); }
.sn-point span{ display:block; font-weight:700; color: rgba(255,255,255,.82); font-size:.92rem; }
/* Routes */
.sn-hero-routes{
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,.14);
}
.sn-routes-title{
font-weight: 950;
letter-spacing: .01em;
margin-bottom: 10px;
color: rgba(255,255,255,.92);
}
.sn-routes-grid{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px 14px;
}
.sn-routes-grid a{
padding: 8px 10px;
border-radius: 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.90);
text-decoration:none;
font-weight: 800;
display:flex;
gap:10px;
align-items:flex-start;
}
.sn-routes-grid a i{ margin-top:3px; color: var(--sn-yellow); opacity:.95; }
.sn-routes-grid a:hover{
color:#fff;
background: rgba(255,255,255,.10);
border-color: rgba(255,193,7,.22);
text-decoration: underline;
}
/* Right card */
.sn-card{
background: rgba(255,255,255,.96);
color: var(--sn-ink);
border-radius: var(--sn-r22);
box-shadow: var(--sn-shadow);
border: 1px solid rgba(255,255,255,.18);
overflow:hidden;
}
.sn-card-head{
padding: 18px 18px 12px;
background:
radial-gradient(900px 260px at 10% 0%, rgba(11,58,164,.22), rgba(255,255,255,0) 60%),
radial-gradient(900px 260px at 90% 0%, rgba(255,122,0,.22), rgba(255,255,255,0) 60%),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
border-bottom: 1px solid rgba(12,16,23,.08);
}
.sn-badge{
display:inline-flex;
gap:8px;
align-items:center;
padding: 7px 10px;
border-radius: 999px;
background: rgba(255,122,0,.14);
border: 1px solid rgba(255,122,0,.35);
font-weight: 900;
font-size: .92rem;
color: rgba(12,16,23,.92);
}
.sn-badge i{ color: var(--sn-orange); }
.sn-card-head h2{
margin: 10px 0 4px;
font-family: var(--font-heading);
font-weight: 900;
font-size: 1.25rem;
color: rgba(12,16,23,.96);
}
.sn-card-head p{
margin: 0;
color: rgba(12,16,23,.68);
font-weight: 650;
line-height: 1.5;
}
.sn-form{ padding: 14px 18px 18px; }
.sn-field{ margin-bottom: 12px; }
.sn-field label{
display:block;
font-weight: 900;
font-size: .9rem;
color: rgba(12,16,23,.78);
margin-bottom: 6px;
}
.sn-input{
width:100%;
border-radius: 14px;
border: 1px solid rgba(12,16,23,.14);
padding: 11px 12px;
background: linear-gradient(180deg, #fff, rgba(255,255,255,.96));
font-weight: 700;
outline:none;
}
.sn-input:focus{
border-color: rgba(11,58,164,.45);
box-shadow:
0 0 0 4px rgba(11,58,164,.12),
0 0 0 8px rgba(255,122,0,.06);
}
.sn-row{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.sn-actions{
display:grid;
gap: 10px;
margin-top: 8px;
}
.sn-btn--full{
width:100%;
border-radius: 14px;
}
.sn-btn--full.sn-btn--primary{
background: linear-gradient(90deg, var(--sn-green), var(--sn-blue));
border-color: rgba(14,143,58,.40);
}
.sn-btn--full.sn-btn--ghost{
background: rgba(11,58,164,.08);
border-color: rgba(11,58,164,.22);
color: rgba(12,16,23,.92);
}
.sn-btn--full.sn-btn--ghost i{ color: var(--sn-blue); }
.sn-note{
margin-top: 12px;
gap:10px;
align-items:flex-start;
color: rgba(12,16,23,.70);
font-weight: 650;
font-size: .92rem;
line-height: 1.5;
background: rgba(255,122,0,.06);
border: 1px solid rgba(255,122,0,.16);
padding: 10px 12px;
border-radius: 14px;
}
.sn-note i{ margin-top:3px; color: var(--sn-orange); }
/* Responsive */
@media (max-width: 992px){
.sn-hero{ padding: 34px 0 26px; }
.sn-hero-wrap{ grid-template-columns: 1fr; }
.sn-hero-points{ grid-template-columns: 1fr; }
.sn-routes-grid{ grid-template-columns: 1fr; }
.sn-gTrust{
flex-direction: column;
align-items: flex-start;
}
.sn-gActions{ width:100%; }
.sn-gBtn{ width:100%; }
}
@media (max-width: 576px){
.sn-row{ grid-template-columns: 1fr; }
.sn-hero-lead{ font-size: 1rem; }
}
/* =========================================================
GOOGLE REVIEWS STRIP — TRUE GOOGLE COLORS + UI TOUCH
Paste AFTER your existing sn-gTrust CSS to override.
========================================================= */
:root{
--g-blue:#4285F4;
--g-red:#EA4335;
--g-yellow:#FBBC05;
--g-green:#34A853;
--g-ink:#202124;
--g-muted:#5f6368;
--g-card: rgba(255,255,255,.92);
--g-border: rgba(60,64,67,.18);
}
/* Main container: more “Google card” */
.sn-gTrust{
background: rgba(255,255,255,.86) !important;
border: 1px solid rgba(255,255,255,.35) !important;
color: var(--g-ink) !important;
border-radius: 22px !important;
padding: 16px 16px !important;
/* soft glass + shadow like your screenshot */
backdrop-filter: blur(14px) saturate(1.15);
box-shadow:
0 18px 45px rgba(0,0,0,.18),
0 1px 0 rgba(255,255,255,.55) inset !important;
}
/* Left area text colors */
.sn-gLabel{
color: var(--g-ink) !important;
font-weight: 900 !important;
}
.sn-gRating{
color: var(--g-ink) !important;
}
.sn-gCount{
color: rgba(32,33,36,.70) !important;
font-weight: 800 !important;
}
.sn-gSub{
color: rgba(32,33,36,.72) !important;
font-weight: 700 !important;
}
/* Stars: Google yellow */
.sn-gStars{
color: var(--g-yellow) !important;
text-shadow: none !important;
}
/* Google “G” icon: 4 color bars (keep), but make container look like Google badge */
.sn-gLogo{
background: rgba(255,255,255,.95) !important;
border: 1px solid rgba(60,64,67,.16) !important;
box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
}
/* Bars (Google colors) */
.sn-gLogo .g1{ background: var(--g-blue) !important; }
.sn-gLogo .g2{ background: var(--g-red) !important; }
.sn-gLogo .g3{ background: var(--g-yellow) !important; }
.sn-gLogo .g4{ background: var(--g-green) !important; }
/* Buttons: Google-ish pills (light gray + blue outline focus) */
.sn-gBtn{
border-radius: 999px !important;
padding: 10px 16px !important;
font-weight: 900 !important;
border: 1px solid rgba(60,64,67,.18) !important;
box-shadow: none !important;
}
/* Primary: neutral “Google button” (not gradient) */
.sn-gBtn--primary{
background: rgba(241,243,244,.95) !important; /* Google light gray */
color: var(--g-ink) !important;
}
.sn-gBtn--primary:hover{
background: rgba(232,234,237,.98) !important;
transform: translateY(-1px);
}
/* Ghost: subtle blue tint like Google CTA */
.sn-gBtn--ghost{
background: rgba(66,133,244,.10) !important;
border-color: rgba(66,133,244,.28) !important;
color: var(--g-ink) !important;
}
.sn-gBtn--ghost:hover{
background: rgba(66,133,244,.14) !important;
transform: translateY(-1px);
}
/* Icons: match Google feel */
.sn-gBtn i{
color: rgba(32,33,36,.70) !important;
}
.sn-gBtn--ghost i{
color: var(--g-blue) !important;
}
/* Layout polish like screenshot: keep actions on left on desktop when space is tight */
.sn-gTrust{
justify-content: flex-start !important;
gap: 18px !important;
}
/* Mobile: full width buttons */
@media (max-width: 992px){
.sn-gTrust{ padding: 14px 14px !important; }
.sn-gActions{ width:100% !important; margin-left:0 !important; }
.sn-gBtn{ width: 100% !important; justify-content:center !important; }
}
/* =========================================
Google Reviews Card (Isolated Component)
Namespace: .gRevCard
========================================= */
.gRevCard{
--g-ink:#202124;
--g-muted:#5f6368;
--g-border:rgba(60,64,67,.14);
--g-surface:rgba(255,255,255,.92);
--g-shadow:0 10px 28px rgba(12,16,23,.10);
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
width:100%;
max-width: 980px; /* optional */
padding:14px 16px;
border:1px solid var(--g-border);
background: var(--g-surface);
border-radius:18px;
box-shadow: var(--g-shadow);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-sizing:border-box;
}
/* Prevent foreign CSS from breaking layout */
.gRevCard, .gRevCard *{
box-sizing:border-box;
}
.gRevCard__left{
display:flex;
align-items:center;
gap:12px;
min-width:0;
flex:1 1 auto;
}
.gRevCard__gLogo{
width:44px;
height:44px;
border-radius:14px;
display:grid;
place-items:center;
background: rgba(255,255,255,.96);
border:1px solid rgba(60,64,67,.10);
box-shadow: 0 1px 0 rgba(255,255,255,.70) inset;
flex:0 0 44px;
}
.gRevCard__gLogo .gDot{
display:inline-block;
width:9px;
height:9px;
border-radius:999px;
margin:1px;
}
.gRevCard__gLogo .gDot--b{ background:#4285F4; }
.gRevCard__gLogo .gDot--r{ background:#EA4335; }
.gRevCard__gLogo .gDot--y{ background:#FBBC05; }
.gRevCard__gLogo .gDot--g{ background:#34A853; }
.gRevCard__meta{ min-width:0; }
.gRevCard__top{
display:flex;
align-items:baseline;
gap:12px;
flex-wrap:wrap;
}
.gRevCard__label{
font-weight:800;
color:var(--g-ink);
letter-spacing:-.01em;
line-height:1.1;
}
.gRevCard__rating{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--g-ink);
font-weight:700;
line-height:1.1;
}
.gRevCard__rating b{
font-size:18px;
}
.gRevCard__stars{
font-size:14px;
letter-spacing:1px;
transform: translateY(-1px);
}
.gRevCard__count{
color: rgba(32,33,36,.72);
font-weight:700;
}
.gRevCard__sub{
margin-top:4px;
color:var(--g-muted);
font-weight:600;
line-height:1.35;
/* safe truncation if container is small */
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
.gRevCard__actions{
display:flex;
align-items:center;
gap:10px;
flex:0 0 auto;
}
/* Buttons */
.gRevCard__btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
height:42px;
padding:0 14px;
border-radius:999px;
border:1px solid rgba(60,64,67,.14);
background: rgba(255,255,255,.96);
color: var(--g-ink);
font-weight:800;
text-decoration:none;
white-space:nowrap;
box-shadow: 0 1px 0 rgba(255,255,255,.70) inset;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.gRevCard__btn i{
font-size:14px;
line-height:0;
}
/* Primary: Google-ish blue tint */
.gRevCard__btn--primary{
border-color: rgba(66,133,244,.30);
background: linear-gradient(180deg, rgba(66,133,244,.14), rgba(66,133,244,.06));
}
/* Ghost button */
.gRevCard__btn--ghost{
background: rgba(255,255,255,.75);
}
.gRevCard__btn:hover{
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(12,16,23,.12);
}
/* Keyboard focus (accessibility) */
.gRevCard__btn:focus{
outline: none;
}
.gRevCard__btn:focus-visible{
outline: 3px solid rgba(66,133,244,.35);
outline-offset: 3px;
}
/* =========================
Responsive
========================= */
/* Tablet: allow wrap */
@media (max-width: 980px){
.gRevCard{
flex-wrap:wrap;
align-items:flex-start;
}
.gRevCard__actions{
width:100%;
justify-content:flex-start;
}
}
/* Mobile: stack + two equal buttons */
@media (max-width: 640px){
.gRevCard{
padding:12px 12px;
gap:12px;
border-radius:16px;
}
.gRevCard__gLogo{
width:40px;
height:40px;
border-radius:14px;
flex-basis:40px;
}
.gRevCard__actions{
width:100%;
display:grid;
grid-template-columns: 1fr 1fr;
gap:10px;
}
.gRevCard__btn{
width:100%;
height:44px;
padding:0 12px;
}
}
/* Very small screens: stack buttons vertical */
@media (max-width: 380px){
.gRevCard__actions{
grid-template-columns: 1fr;
}
}