/* * MGK Premium Detailing — scoped V2 design layer. * * Contract: * - load after premium-polish.css; * - opt in per page with ; * - keep CRM and other standalone products outside this scope. */ body.site-v2 { /* Canonical palette */ --v2-color-bg-deep: #07090b; --v2-color-bg: #0a0d10; --v2-color-surface: #11151a; --v2-color-surface-raised: #181d23; --v2-color-text: #f4efe4; --v2-color-text-muted: #b7b1a7; --v2-color-text-subtle: #8f9298; --v2-color-platinum: #d9d8d2; --v2-color-accent: #9c7a3a; --v2-color-accent-light: #d3bf88; --v2-color-accent-soft: rgba(211, 191, 136, 0.1); --v2-color-border: rgba(217, 216, 210, 0.14); --v2-color-border-accent: rgba(211, 191, 136, 0.24); --v2-color-focus: #e7d9b6; /* Shape, space and depth */ --v2-radius-sm: 12px; --v2-radius-md: 16px; --v2-radius-lg: 20px; --v2-radius-xl: 24px; --v2-radius-pill: 999px; --v2-space-1: 0.5rem; --v2-space-2: 0.75rem; --v2-space-3: 1rem; --v2-space-4: 1.5rem; --v2-space-5: 2rem; --v2-space-6: 3rem; --v2-space-7: 4rem; --v2-space-8: 6rem; --v2-container: 1180px; --v2-shadow-soft: 0 18px 54px rgba(0, 0, 0, 0.28); --v2-shadow-card: 0 24px 72px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04); --v2-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Compatibility aliases for legacy page rules during migration */ --bg: var(--v2-color-bg); --bg2: var(--v2-color-surface); --bg3: var(--v2-color-surface-raised); --txt: var(--v2-color-text); --mut: var(--v2-color-text-muted); --mut2: var(--v2-color-text-subtle); --gold: var(--v2-color-accent); --gold2: var(--v2-color-accent-light); --platinum: var(--v2-color-platinum); --line: var(--v2-color-border); --line-strong: var(--v2-color-border-accent); --surface: rgba(255, 255, 255, 0.026); --surface2: rgba(255, 255, 255, 0.045); --surface3: rgba(255, 255, 255, 0.07); --premium-panel: linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012) 58%, rgba(211, 191, 136, 0.022)); --premium-panel-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)); --premium-border: var(--v2-color-border); --premium-shadow: var(--v2-shadow-soft); --premium-shadow-strong: var(--v2-shadow-card); --shadow-soft: var(--v2-shadow-soft); --shadow: var(--v2-shadow-card); --maxw: var(--v2-container); --r: 14px; --ease: var(--v2-ease); } /* A clear keyboard state that remains legible on every dark surface. */ body.site-v2 :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--v2-color-focus) !important; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(231, 217, 182, 0.16); } body.site-v2 :where(.content-proof, .process-v2, .case-detail, .service-links-v2, .site-footer-v2) { color: var(--v2-color-text); } body.site-v2 :where(.content-proof, .process-v2) { position: relative; padding-block: clamp(4rem, 7vw, 6rem); } body.site-v2 :where(.content-proof, .process-v2) > .wrap, body.site-v2 .site-footer-v2 > .wrap { width: min(100%, var(--v2-container)); } /* Compact shell refinements. These depend on the existing shared markup. */ body.site-v2 .topbar-row { min-height: 34px; } body.site-v2 header .bar { min-height: 70px; } body.site-v2 header .logo, body.site-v2 header .nav, body.site-v2 header .hactions { min-width: 0; } /* Proof and evidence cards */ body.site-v2 .content-proof { border-block: 1px solid var(--v2-color-border); background: radial-gradient(700px 320px at 82% 4%, rgba(211, 191, 136, 0.045), transparent 66%), linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0.004)); } body.site-v2 .content-proof__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.875rem, 1.5vw, 1.25rem); } body.site-v2 .content-proof__card { position: relative; min-width: 0; min-height: 210px; overflow: hidden; border: 1px solid var(--v2-color-border); border-radius: var(--v2-radius-lg); background: linear-gradient(145deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.01)), var(--v2-color-surface); box-shadow: var(--v2-shadow-soft); padding: clamp(1.25rem, 2.2vw, 1.75rem); transition: transform 220ms var(--v2-ease), border-color 220ms var(--v2-ease), background-color 220ms var(--v2-ease); } body.site-v2 .content-proof__card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(180deg, transparent, rgba(211, 191, 136, 0.62), transparent); opacity: 0.72; } body.site-v2 .content-proof__card:hover { transform: translateY(-2px); border-color: var(--v2-color-border-accent); } body.site-v2 .content-proof__card :where(h2, h3) { margin: 0; color: var(--v2-color-text); font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.2; } body.site-v2 .content-proof__card p { margin: 0.75rem 0 0; color: var(--v2-color-text-muted); font-size: 0.94rem; line-height: 1.65; } body.site-v2 .content-proof__card :where(.eyebrow, small, time) { display: block; margin-bottom: 0.75rem; color: var(--v2-color-accent-light); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; } /* Process */ body.site-v2 .process-v2 { background: linear-gradient(180deg, var(--v2-color-bg-deep), var(--v2-color-bg)); } body.site-v2 .process-v2__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); counter-reset: process-v2; } body.site-v2 .process-v2__step { min-width: 0; min-height: 230px; border-top: 1px solid var(--v2-color-border-accent); padding: 1.25rem 0.25rem 0; counter-increment: process-v2; } body.site-v2 .process-v2__step::before { content: counter(process-v2, decimal-leading-zero); display: inline-flex; align-items: center; min-height: 32px; margin-bottom: 2rem; color: var(--v2-color-accent-light); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.7rem; font-variant-numeric: tabular-nums; line-height: 1; } body.site-v2 .process-v2__step :where(h2, h3) { margin: 0; color: var(--v2-color-text); font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.25; } body.site-v2 .process-v2__step p { margin: 0.75rem 0 0; color: var(--v2-color-text-muted); font-size: 0.92rem; line-height: 1.65; } /* Detailed case: media and factual metadata, without decorative noise. */ body.site-v2 .case-detail { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr); gap: clamp(1.25rem, 3.5vw, 3rem); align-items: stretch; min-width: 0; overflow: hidden; border: 1px solid var(--v2-color-border); border-radius: var(--v2-radius-xl); background: radial-gradient(520px 260px at 96% 0, rgba(211, 191, 136, 0.055), transparent 64%), var(--v2-color-surface); box-shadow: var(--v2-shadow-card); padding: clamp(1rem, 2vw, 1.5rem); } body.site-v2 .case-detail > * { min-width: 0; } body.site-v2 .case-detail > :where(picture, figure), body.site-v2 .case-detail > img { overflow: hidden; border-radius: var(--v2-radius-md); background: var(--v2-color-bg-deep); } body.site-v2 .case-detail :where(picture, figure) { margin: 0; } body.site-v2 .case-detail img { display: block; width: 100%; height: 100%; min-height: 340px; object-fit: cover; filter: saturate(0.94) contrast(1.06) brightness(0.94); } body.site-v2 .case-detail__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; align-content: start; } body.site-v2 .case-detail__meta > * { min-width: 0; border: 1px solid var(--v2-color-border); border-radius: var(--v2-radius-sm); background: rgba(255, 255, 255, 0.018); padding: 0.875rem; color: var(--v2-color-text-muted); font-size: 0.84rem; line-height: 1.45; } body.site-v2 .case-detail__meta :where(b, strong) { display: block; margin-bottom: 0.25rem; color: var(--v2-color-text); font-size: 0.9rem; } /* Cross-links to commercial service pages */ body.site-v2 .service-links-v2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; } body.site-v2 .service-links-v2 > a { position: relative; display: grid; align-content: center; min-width: 0; min-height: 112px; border: 1px solid var(--v2-color-border); border-radius: var(--v2-radius-md); background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)); padding: 1rem 3rem 1rem 1.125rem; color: var(--v2-color-text); font-weight: 750; line-height: 1.35; transition: transform 220ms var(--v2-ease), border-color 220ms var(--v2-ease), background-color 220ms var(--v2-ease); } body.site-v2 .service-links-v2 > a::after { content: "→"; position: absolute; right: 1.125rem; top: 50%; translate: 0 -50%; color: var(--v2-color-accent-light); font-size: 1.15rem; } body.site-v2 .service-links-v2 > a:hover { transform: translateY(-2px); border-color: var(--v2-color-border-accent); background-color: var(--v2-color-accent-soft); } body.site-v2 .service-links-v2 > a small { display: block; margin-top: 0.35rem; color: var(--v2-color-text-subtle); font-size: 0.78rem; font-weight: 500; } body.site-v2 .trust-date { display: inline-flex; align-items: center; gap: 0.55rem; width: fit-content; min-height: 34px; border: 1px solid var(--v2-color-border); border-radius: var(--v2-radius-pill); background: rgba(255, 255, 255, 0.018); padding: 0.4rem 0.75rem; color: var(--v2-color-text-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; line-height: 1.35; } body.site-v2 .trust-date::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--v2-color-accent-light); box-shadow: 0 0 0 3px rgba(211, 191, 136, 0.09); } body.site-v2 .trust-date :where(time, b, strong) { color: var(--v2-color-platinum); font-weight: 750; } /* Footer V2 */ body.site-v2 .site-footer-v2 { position: relative; overflow: hidden; margin-top: clamp(4rem, 7vw, 7rem); border-top: 1px solid var(--v2-color-border-accent); background: radial-gradient(720px 300px at 12% 0, rgba(211, 191, 136, 0.045), transparent 64%), linear-gradient(180deg, #0c0f12, var(--v2-color-bg-deep)); padding: clamp(3rem, 6vw, 5rem) 0 calc(1.5rem + env(safe-area-inset-bottom)); color: var(--v2-color-text-muted); } body.site-v2 .site-footer-v2__grid { display: grid; grid-template-columns: minmax(250px, 1.25fr) repeat(3, minmax(140px, 0.7fr)); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } body.site-v2 .site-footer-v2__brand { max-width: 430px; } body.site-v2 .site-footer-v2__brand :where(h2, strong) { display: block; margin: 0; color: var(--v2-color-text); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.7rem, 2.6vw, 2.35rem); font-weight: 500; line-height: 1.05; } body.site-v2 .site-footer-v2__brand p { max-width: 390px; margin: 1rem 0 0; color: var(--v2-color-text-muted); font-size: 0.92rem; line-height: 1.7; } body.site-v2 .site-footer-v2__column, body.site-v2 .site-footer-v2__nav, body.site-v2 .site-footer-v2__contact { display: grid; align-content: start; gap: 0.75rem; min-width: 0; } body.site-v2 .site-footer-v2__title { margin: 0 0 0.35rem; color: var(--v2-color-accent-light); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; line-height: 1.4; text-transform: uppercase; } /* Some legacy pages use the title utility on the brand heading itself. */ body.site-v2 .site-footer-v2__brand .site-footer-v2__title { margin: 0; color: var(--v2-color-text); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.7rem, 2.6vw, 2.35rem); font-weight: 500; letter-spacing: 0; line-height: 1.05; text-transform: none; } body.site-v2 .site-footer-v2__links { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } body.site-v2 :where(.site-footer-v2__links, .site-footer-v2__nav, .site-footer-v2__contact) a { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; min-height: 44px; color: var(--v2-color-text-muted); font-size: 0.9rem; line-height: 1.4; transition: color 180ms var(--v2-ease); } body.site-v2 :where(.site-footer-v2__links, .site-footer-v2__nav, .site-footer-v2__contact) a:hover { color: var(--v2-color-text); } body.site-v2 .site-footer-v2__contact a[href^="tel:"] { color: var(--v2-color-platinum); font-variant-numeric: tabular-nums; font-weight: 750; } body.site-v2 .site-footer-v2__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--v2-color-border); padding-top: 1.25rem; color: var(--v2-color-text-subtle); font-size: 0.76rem; line-height: 1.55; } body.site-v2 .site-footer-v2__bottom a { display: inline-flex; align-items: center; min-height: 44px; color: var(--v2-color-text-muted); } /* Form safety and recovery states shared by the inline and generated lead modals. */ body.site-v2 .lead-form__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } body.site-v2 .lead-form__fallback { display: flex; flex-wrap: wrap; gap: 0.625rem; } body.site-v2 .lead-form__fallback[hidden] { display: none; } body.site-v2 .lead-form__fallback .btn { flex: 1 1 150px; } body.site-v2 .home-faq-v2 { margin-top: 0; border-top: 1px solid var(--v2-color-border); padding-block: clamp(4rem, 7vw, 6rem); } @media (min-width: 1440px) { body.site-v2 { --v2-container: 1240px; } body.site-v2 .content-proof__grid { gap: 1.5rem; } body.site-v2 .content-proof__card { min-height: 224px; } body.site-v2 .case-detail { grid-template-columns: minmax(0, 1.24fr) minmax(320px, 0.76fr); } } @media (max-width: 768px) { body.site-v2 { --v2-space-7: 3.25rem; --v2-space-8: 4.5rem; } body.site-v2 .topbar-row { min-height: 32px; gap: 0.625rem; padding-block: 0.3rem; font-size: 0.72rem; } body.site-v2 header .bar { min-height: 60px; gap: 0.5rem; padding-block: 0.4rem; } body.site-v2 header .logo { min-height: 44px; gap: 0.5rem; padding: 0.3rem 0.55rem 0.3rem 0.35rem; } body.site-v2 header .logo img { width: 32px; height: 32px; } body.site-v2 header .nav { padding-block: 0.3rem 0.5rem; } body.site-v2 header .nav a, body.site-v2 header .hmessenger, body.site-v2 header .btn, body.site-v2 .btn, body.site-v2 :where(button, [role="button"], summary), body.site-v2 :where(input, select, textarea), body.site-v2 :where(.mobile-sticky-cta, .sticky-cta) a, body.site-v2 :where(.mobile-sticky-cta, .sticky-cta) button, body.site-v2 .service-links-v2 > a { min-height: 44px; } body.site-v2 .content-proof__grid, body.site-v2 .process-v2__grid, body.site-v2 .service-links-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.site-v2 .process-v2__step { min-height: 200px; } body.site-v2 .case-detail { grid-template-columns: minmax(0, 1fr); border-radius: var(--v2-radius-lg); } body.site-v2 .case-detail img { min-height: 300px; aspect-ratio: 4 / 3; } body.site-v2 .site-footer-v2__grid { grid-template-columns: minmax(0, 1.2fr) minmax(160px, 0.8fr); } body.site-v2 .site-footer-v2__brand { grid-column: 1 / -1; } } @media (max-width: 430px) { body.site-v2 .topbar-row { min-height: 30px; gap: 0.5rem; padding-block: 0.25rem; font-size: 0.68rem; } body.site-v2 header .bar { min-height: 54px; padding-block: 0.3rem; } body.site-v2 header .logo { min-height: 44px; padding-inline: 0.3rem 0.5rem; } body.site-v2 header .logo img { width: 29px; height: 29px; } body.site-v2 header .logo-copy b { font-size: 0.76rem; } body.site-v2 header .nav { gap: 0.3rem; padding-block: 0.2rem 0.45rem; } body.site-v2 header .nav a { padding-inline: 0.65rem; font-size: 0.78rem; } body.site-v2 :where(.content-proof, .process-v2) { padding-block: 3.5rem; } body.site-v2 .content-proof__grid, body.site-v2 .process-v2__grid, body.site-v2 .service-links-v2, body.site-v2 .case-detail__meta, body.site-v2 .site-footer-v2__grid { grid-template-columns: minmax(0, 1fr); } body.site-v2 .content-proof__card { min-height: 0; border-radius: var(--v2-radius-md); padding: 1.125rem; } body.site-v2 .process-v2__step { min-height: 0; padding-top: 1rem; } body.site-v2 .process-v2__step::before { margin-bottom: 1.1rem; } body.site-v2 .case-detail { gap: 1rem; padding: 0.75rem; } body.site-v2 .case-detail img { min-height: 240px; } body.site-v2 .service-links-v2 > a { min-height: 88px; } body.site-v2 .trust-date { min-height: 44px; } body.site-v2 .site-footer-v2 { padding-top: 3.25rem; } body.site-v2 .site-footer-v2__brand { grid-column: auto; } body.site-v2 .site-footer-v2__bottom { align-items: flex-start; flex-direction: column; } } @media (max-width: 390px) { body.site-v2 .topbar-row { gap: 0.4rem; font-size: 0.65rem; } body.site-v2 header .bar { gap: 0.35rem; } body.site-v2 header .logo-copy b { font-size: 0.71rem; } body.site-v2 header .nav a { padding-inline: 0.58rem; font-size: 0.75rem; } body.site-v2 .case-detail img { min-height: 220px; } } @media (max-width: 360px) { body.site-v2 .topbar-row { gap: 0.3rem; font-size: 0.62rem; } body.site-v2 header .logo { gap: 0.35rem; } body.site-v2 header .logo img { width: 27px; height: 27px; } body.site-v2 header .logo-copy b { font-size: 0.68rem; } body.site-v2 header .nav a { padding-inline: 0.52rem; font-size: 0.72rem; } body.site-v2 .content-proof__card, body.site-v2 .case-detail__meta > * { padding: 1rem; } } @media (prefers-reduced-motion: reduce) { body.site-v2, body.site-v2 *, body.site-v2 *::before, body.site-v2 *::after { scroll-behavior: auto; animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; } body.site-v2 :where(.content-proof__card, .service-links-v2 > a):hover { transform: none; } }