/* ========================================================================== Kingdom Auto & Detail - "Colour Blocks" skin (Tines-inspired) Loaded AFTER open-garage.css. Two jobs: 1. Re-skin the shared og-* components (inner pages inherit it). 2. New homepage + shell components, prefix kt-. Palette = the brand's own: corporate blue, navy, cream. No new hues. No decorative rules, grids or dot fields: colour blocks do the work. ========================================================================== */ /* ---- Tokens ------------------------------------------------------------ */ :root { --kt-cream: #F7F4EE; --kt-paper: #FFFDF9; --kt-sand: #EFE7DA; --kt-sand-line: #DDD0BA; --kt-blue: #2E6BD6; --kt-blue-600: #2459BB; --kt-blue-700: #1D4A9E; --kt-sky: #E4EDFB; --kt-sky-line: #BCD0F3; --kt-sky-2: #CFE0FA; --kt-navy: #0F2547; --kt-navy-2: #1C3E73; --kt-ink: #2F3A4F; --kt-muted: #5F6B80; --kt-line: #E4DDD0; --kt-line-2: #D3CABA; --kt-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif; --kt-sand-2: #EEE5D6; --kt-sky-3: #C9DBF8; --kt-blue-dk: #1F53B3; --kt-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --kt-r-sm: 8px; --kt-r: 14px; --kt-r-lg: 22px; --kt-r-xl: 28px; --kt-shadow: 0 1px 0 rgba(15,37,71,.04), 0 10px 24px -14px rgba(15,37,71,.22); --kt-shadow-pop: 0 2px 0 rgba(15,37,71,.06), 0 18px 36px -18px rgba(15,37,71,.38); /* Re-point the og- tokens so every inner page picks up the new skin. */ --og-font-display: var(--kt-serif); --og-r-md: 10px; --og-r-lg: 18px; --og-border: var(--kt-line); --og-border-strong: var(--kt-line-2); --og-blue-tint: #F1F5FC; --og-header-h: 76px; --og-section-y: clamp(56px, 7vw, 104px); } /* ---- Base ------------------------------------------------------------- */ body.og-shell { background: var(--kt-cream); color: var(--kt-ink); } :where(body.og-shell) :is(h1, h2, h3) { font-family: var(--kt-serif); font-weight: 500; letter-spacing: -0.02em; color: var(--kt-navy); } :where(body.og-shell) h4 { font-family: var(--kt-sans); } :where(body.og-shell) :is(h1, h2, h3) em { font-style: italic; } .og-h1, .og-h1-sm, .og-h2 { font-weight: 400; letter-spacing: -0.022em; } .og-h1 { line-height: 1.02; } .og-h1-sm { font-size: clamp(2.4rem, 1.6rem + 2.8vw, 3.6rem); line-height: 1.04; } .og-h2 { font-size: clamp(2.1rem, 1.5rem + 2.1vw, 3.25rem); line-height: 1.06; } .og-h3 { font-weight: 500; } .og-card-title { font-family: var(--kt-serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; } .og-list-title { font-family: var(--kt-serif); font-weight: 500; font-size: 21px; } .og-eyebrow { font-family: var(--kt-sans); font-weight: 600; font-size: 15px; letter-spacing: 0; color: var(--kt-blue); text-transform: none; } .og-eyebrow::before, .og-eyebrow::after { display: none; } .og-rule { display: none; } .og-lead { color: var(--kt-muted); } .og-section--blue { background: var(--kt-blue); } /* ---- Buttons: navy is the primary ink, blue the brand moment ----------- */ .og-btn { min-height: 48px; padding: 0 22px; border-radius: 10px; font-weight: 600; font-size: 15px; border-width: 1.5px; } .og-btn-primary { background: var(--kt-blue); border-color: var(--kt-blue); color: #fff; } .og-btn-primary:hover, .og-btn-primary:focus { background: var(--kt-blue-dk); border-color: var(--kt-blue-dk); color: #fff; box-shadow: none; transform: none; } .og-btn-primary:active { background: var(--kt-blue-700); } .og-btn-navy { background: var(--kt-navy); border-color: var(--kt-navy); color: #fff; } .og-btn-navy:hover, .og-btn-navy:focus { background: var(--kt-blue); border-color: var(--kt-blue); color: #fff; } .og-btn-secondary { background: transparent; color: var(--kt-navy); border-color: var(--kt-navy); } .og-btn-secondary:hover, .og-btn-secondary:focus { background: var(--kt-navy); color: #fff; border-color: var(--kt-navy); } .og-btn-on-blue { background: #fff; color: var(--kt-navy); } .og-btn-on-blue:hover, .og-btn-on-blue:focus { background: var(--kt-cream); color: var(--kt-navy); transform: none; } .og-btn-ghost-on-blue { border-color: rgba(255,255,255,.6); color: #fff; } .og-btn-ghost-on-blue:hover, .og-btn-ghost-on-blue:focus { background: rgba(255,255,255,.14); color: #fff; } .og-btn-sm { min-height: 40px; font-size: 14px; } .og-card-link { color: var(--kt-navy); text-decoration: underline; text-decoration-color: var(--kt-sky-line); text-decoration-thickness: 2px; text-underline-offset: 5px; } .og-card-link:hover { color: var(--kt-blue); text-decoration-color: var(--kt-blue); } .og-link-phone { text-decoration-color: var(--kt-sky-line); } /* ---- Shared surfaces re-skinned --------------------------------------- */ .og-card { background: var(--kt-paper); border-color: transparent; border-radius: 22px; box-shadow: 0 1px 0 rgba(15,37,71,.05), 0 16px 32px -24px rgba(15,37,71,.35); } .og-card:has(a):hover { border-color: transparent; box-shadow: 0 1px 0 rgba(15,37,71,.06), 0 22px 40px -22px rgba(15,37,71,.45); } .og-frame { padding: 0; border: 0; border-radius: 22px; overflow: hidden; box-shadow: none; } .og-frame > picture, .og-frame > img { border-radius: 0; } .og-frame::after { display: none; } .og-frame-tag { border: 0; font-family: var(--kt-sans); font-weight: 600; border-radius: 999px; } .og-page-head { position: relative; background: var(--kt-sky); border: 0; border-radius: 32px; margin: 12px clamp(8px, 1.4vw, 20px) 0; padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 5vw, 64px); } .og-chip { background: var(--kt-paper); border: 1px solid var(--kt-line); font-family: var(--kt-sans); font-weight: 500; font-size: 14px; letter-spacing: 0; } .og-chip:hover { border-color: var(--kt-navy); color: var(--kt-navy); } .og-page-head .og-chip, .og-section--tint .og-chip { background: var(--kt-paper); border-color: var(--kt-sky-line); } .og-faq .accordion-item { background: var(--kt-paper); border-color: var(--kt-line); } .og-faq .accordion-button { background: var(--kt-paper); } .og-faq .accordion-button:not(.collapsed) { background: var(--kt-sky); color: var(--kt-navy); } .og-step-num { font-family: var(--kt-serif); font-weight: 600; background: var(--kt-blue); color: #fff; border: 0; border-radius: 12px; } .og-input { border-width: 1px; border-color: var(--kt-line-2); background: var(--kt-paper); } .og-seg-btn { border-width: 1px; } .og-seg-btn[aria-pressed="true"] { background: var(--kt-navy); border-color: var(--kt-navy); } .og-cta h2 { font-weight: 500; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.4rem); } /* ---- Shell: strip + header -------------------------------------------- */ .og-strip { background: var(--kt-navy); font-size: 13px; } .og-strip-text { font-family: var(--kt-sans); } .og-header { background: rgba(247,244,238,.9); border-bottom: 1px solid transparent; } .og-header.is-scrolled { border-bottom-color: var(--kt-line); box-shadow: none; } .og-brand-img { height: 48px; } .og-nav-link { font-weight: 500; font-size: 15px; color: var(--kt-navy); border-radius: 8px; } .og-nav-link:hover, .og-nav-link.is-active { background: rgba(15,37,71,.06); color: var(--kt-navy); } .og-nav-panel { background: var(--kt-cream); } .og-nav-toggle { border-width: 1px; } .og-nav-account { color: var(--kt-navy); font-weight: 500; } .og-nav-account:hover { background: rgba(15,37,71,.06); } @media (min-width: 992px) { .og-brand-img { height: 58px; } /* Tines-style capsule: the four links sit together in one tinted pill. */ .og-nav-panel, .og-nav-panel.is-open { justify-content: space-between; } .og-nav-list { margin-inline: auto; padding: 4px; gap: 2px; background: var(--kt-sky); border: 0; border-radius: 12px; } .og-nav-link { min-height: 38px; padding: 0 14px; font-size: 14.5px; } .og-nav-link:hover { background: rgba(255,255,255,.7); } .og-nav-link.is-active { background: var(--kt-paper); box-shadow: 0 1px 0 rgba(15,37,71,.08); } .og-nav-link.is-active::after { display: none; } .og-nav-utility { margin-left: 0; gap: 8px; } .og-nav-book { min-height: 42px; } } /* ---- Footer: light, editorial ---------------------------------------- */ .og-footer { background: var(--kt-cream); color: var(--kt-ink); border-top: 1px solid var(--kt-line); padding-top: clamp(48px, 6vw, 80px); } .og-footer-logo { height: 112px; } .og-footer-tagline { color: var(--kt-muted); } .og-footer-h { color: var(--kt-navy); font-family: var(--kt-sans); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 15px; } .og-footer-col a, .og-footer-legal a { color: var(--kt-navy); } .og-footer-col a:hover, .og-footer-legal a:hover { color: var(--kt-blue); } .og-footer-address .bi { color: var(--kt-blue); } .og-footer-address a { color: var(--kt-navy); } .og-footer-social { color: var(--kt-navy); border-color: var(--kt-line-2); } .og-footer-social:hover { background: var(--kt-navy); color: #fff; } .og-footer-bottom { border-top-color: var(--kt-line); color: var(--kt-muted); } body.og-shell .og-footer :is(a, button):focus-visible { box-shadow: var(--og-focus); } .og-mobilebar { background: rgba(247,244,238,.96); } /* ========================================================================== Homepage: Colour Blocks Rounded inset panels (blue hero, sky inspection, navy booking) with solid-colour service tiles between them. ========================================================================== */ .kt-out { padding-inline: clamp(8px, 1.2vw, 16px); } .kt-out + .kt-out, .kt-sec + .kt-out { margin-top: 0; } /* ---- 1. Hero ---------------------------------------------------------- */ .kt-hero { margin-top: 8px; background: var(--kt-blue); border-radius: 32px; color: #fff; text-align: center; padding-top: clamp(44px, 6.5vw, 92px); overflow: hidden; } .kt-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.14); color: #fff; padding: 7px 16px 7px 7px; border-radius: 999px; font-size: 14px; text-decoration: none; margin-bottom: 26px; transition: background-color .16s; } .kt-badge:hover { background: rgba(255,255,255,.22); color: #fff; } .kt-badge span { background: #fff; color: var(--kt-blue); font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; } .kt-hero h1 { margin: 0 auto; max-width: 16ch; color: #fff; font-size: clamp(2.5rem, 1.3rem + 4.4vw, 5.2rem); line-height: 1.02; font-weight: 500; letter-spacing: -0.035em; } .kt-hero h1 em { font-weight: 400; color: #FFE9B8; } .kt-hero-lead { margin: 22px auto 30px; max-width: 46ch; font-size: 1.15rem; color: rgba(255,255,255,.9); } .kt-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; } .kt-hero-call { margin: 16px 0 0; font-size: 15px; color: rgba(255,255,255,.85); } .kt-hero-call a { color: #fff; font-weight: 600; text-decoration: none; } .kt-hero-call a:hover { text-decoration: underline; } .kt-photos { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: clamp(40px, 5vw, 64px); padding-inline: clamp(16px, 3vw, 40px); } .kt-photos a { position: relative; display: block; border-radius: 22px 22px 0 0; overflow: hidden; aspect-ratio: 4 / 3; text-decoration: none; } .kt-photos picture, .kt-photos img { display: block; width: 100%; height: 100%; } .kt-photos img { object-fit: cover; transition: transform .4s ease; } .kt-photos a:hover img { transform: scale(1.04); } .kt-photos span { position: absolute; left: 14px; top: 14px; background: #fff; color: var(--kt-navy); font: 600 14px/1 var(--kt-sans); padding: 9px 14px; border-radius: 999px; } @media (min-width: 760px) { .kt-photos { grid-template-columns: 1fr 1.25fr 1fr; align-items: end; } .kt-photos a { aspect-ratio: 4 / 5; } .kt-photos a:nth-child(2) { aspect-ratio: 1 / 1.05; } } @media (max-width: 759px) { .kt-photos a:not(:nth-child(2)) { display: none; } } /* ---- Section heads ---------------------------------------------------- */ .kt-sec { padding-block: clamp(64px, 8vw, 112px); } .kt-head { text-align: center; max-width: 720px; margin: 0 auto 44px; } .kt-head h2 { margin: 0; font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.6rem); line-height: 1.04; } .kt-head h2 em, .kt-see h2 em { color: var(--kt-blue); font-weight: 400; } .kt-head p { margin: 14px 0 0; color: var(--kt-muted); font-size: 1.1rem; } /* ---- 2. Service tiles ------------------------------------------------- */ .kt-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } @media (min-width: 640px) { .kt-tiles { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .kt-tiles { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .kt-tile { border-radius: 24px; padding: 26px; display: flex; flex-direction: column; min-height: 260px; color: var(--kt-navy); } .kt-tile svg { width: 52px; height: 52px; margin-bottom: auto; flex: none; } .kt-tile h3 { margin: 28px 0 0; font-size: 1.75rem; line-height: 1.1; } .kt-tile p { margin: 6px 0 0; font-size: 15px; color: var(--kt-ink); } .kt-tile-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; } .kt-price { font-weight: 600; font-size: 15px; } .kt-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; color: var(--kt-navy); text-decoration: none; } .kt-arrow::after { content: "\2192"; transition: transform .16s; } .kt-arrow:hover { color: var(--kt-blue); } .kt-arrow:hover::after { transform: translateX(3px); } .kt-t-sky { background: var(--kt-sky); } .kt-t-sky2 { background: var(--kt-sky-3); } .kt-t-sand { background: var(--kt-sand-2); } .kt-t-paper { background: var(--kt-paper); box-shadow: inset 0 0 0 1px var(--kt-line); } .kt-t-paper p { color: var(--kt-muted); } .kt-tile.kt-t-navy { background: var(--kt-navy); } .kt-tile.kt-t-blue { background: var(--kt-blue); } .kt-tile:is(.kt-t-navy, .kt-t-blue) :is(h3, .kt-price, .kt-arrow) { color: #fff; } .kt-tile.kt-t-navy p { color: rgba(255,255,255,.82); } .kt-tile.kt-t-blue p { color: rgba(255,255,255,.88); } .kt-tile:is(.kt-t-navy, .kt-t-blue) .kt-arrow:hover { color: #FFE9B8; } .kt-help { margin: 28px 0 0; text-align: center; font: 500 1.25rem/1.4 var(--kt-serif); color: var(--kt-navy); } .kt-help a { color: var(--kt-blue); } /* ---- 3. See what we see ----------------------------------------------- */ .kt-see { background: var(--kt-sky); border-radius: 32px; padding-block: clamp(56px, 7vw, 96px); } .kt-see-grid { display: grid; gap: 40px; align-items: center; } @media (min-width: 900px) { .kt-see-grid { grid-template-columns: .95fr 1.05fr; gap: 64px; } } .kt-see h2 { margin: 0; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.05; } .kt-see-lead { margin: 14px 0 0; color: var(--kt-ink); font-size: 1.08rem; max-width: 46ch; } .kt-flow { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; } .kt-flow li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; background: var(--kt-paper); border-radius: 16px; padding: 12px 16px 12px 12px; } .kt-flow i { font-style: normal; width: 44px; height: 44px; border-radius: 12px; background: var(--kt-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 600 16px/1 var(--kt-serif); } .kt-flow b { display: block; color: var(--kt-navy); font-size: 15.5px; } .kt-flow span { font-size: 14px; color: var(--kt-muted); } .kt-see-pic { position: relative; margin: 0; } .kt-see-pic img { display: block; border-radius: 24px; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .kt-phone { position: absolute; right: -8px; bottom: -24px; width: min(260px, 70%); background: var(--kt-paper); border-radius: 20px; padding: 16px; box-shadow: 0 24px 48px -20px rgba(15,37,71,.45); } .kt-phone small { display: block; font-size: 12px; font-weight: 600; color: var(--kt-blue); } .kt-phone b { display: block; margin: 4px 0 12px; font: 500 18px/1.25 var(--kt-serif); color: var(--kt-navy); } .kt-phone div { display: flex; gap: 8px; } .kt-phone span { flex: 1; text-align: center; padding: 9px 0; border-radius: 10px; font-size: 13px; font-weight: 600; background: var(--kt-sky); color: var(--kt-navy); } .kt-phone span:last-child { background: var(--kt-navy); color: #fff; } @media (max-width: 560px) { .kt-phone { position: relative; right: auto; bottom: auto; width: auto; margin: -36px 14px 0; } } /* ---- 4. Local shop ---------------------------------------------------- */ .kt-bubbles { display: grid; gap: 22px; max-width: 1000px; margin: 0 auto 56px; } @media (min-width: 900px) { .kt-bubbles { grid-template-columns: 1fr 1fr; gap: 28px; } .kt-bubbles figure:nth-child(2) { margin-top: 64px; } } .kt-bubbles figure { margin: 0; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; } .kt-av { width: 52px; height: 52px; border-radius: 50%; background: var(--kt-sky-3); color: var(--kt-navy); display: inline-flex; align-items: center; justify-content: center; font: 600 17px/1 var(--kt-serif); } .kt-bubbles figure:nth-child(2) .kt-av { background: var(--kt-sand-2); } .kt-bubble { background: var(--kt-paper); border-radius: 6px 22px 22px 22px; padding: 20px 22px; box-shadow: 0 1px 0 rgba(15,37,71,.05), 0 16px 32px -24px rgba(15,37,71,.35); } .kt-bubble blockquote { margin: 0; font: 400 1.2rem/1.45 var(--kt-serif); color: var(--kt-navy); } .kt-bubble figcaption { margin-top: 12px; font-size: 14px; color: var(--kt-muted); } .kt-bubble figcaption strong { color: var(--kt-navy); } .kt-shop { display: grid; gap: 28px; align-items: center; } @media (min-width: 900px) { .kt-shop { grid-template-columns: 1fr 1fr; gap: 64px; } } .kt-shop-pic { background: var(--kt-sand-2); border-radius: 28px; padding: 18px; } .kt-shop-pic img { display: block; border-radius: 18px; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .kt-shop h3 { margin: 0; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); line-height: 1.12; } .kt-shop p { margin: 14px 0 24px; color: var(--kt-muted); font-size: 1.05rem; } .kt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .kt-chips span { background: var(--kt-paper); box-shadow: inset 0 0 0 1px var(--kt-line); border-radius: 999px; padding: 8px 14px; font-size: 14px; color: var(--kt-navy); } /* ---- 5. Booking ------------------------------------------------------- */ .kt-book { position: relative; overflow: hidden; background: var(--kt-navy); border-radius: 32px; padding: clamp(56px, 8vw, 104px) 20px; text-align: center; color: #fff; } .kt-book::before, .kt-book::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .kt-book::before { width: 340px; height: 340px; background: var(--kt-blue); left: -120px; top: -140px; } .kt-book::after { width: 260px; height: 260px; background: var(--kt-navy-2); right: -80px; bottom: -110px; } .kt-book > * { position: relative; z-index: 1; } .kt-book h2 { margin: 0; color: #fff; font-size: clamp(2.3rem, 1.4rem + 3vw, 3.8rem); line-height: 1.04; } .kt-book-lead { margin: 16px auto 28px; max-width: 44ch; color: rgba(255,255,255,.85); font-size: 1.12rem; } .kt-book-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin-top: 36px; font-size: 15px; color: rgba(255,255,255,.85); } .kt-book-facts strong { color: #fff; } .kt-book-facts a { color: #fff; } .kt-faq { display: grid; gap: 14px; padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 96px); } @media (min-width: 900px) { .kt-faq { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .kt-faq > div { background: var(--kt-paper); border-radius: 20px; padding: 22px; } .kt-faq h3 { margin: 0; font-size: 1.2rem; font-weight: 500; line-height: 1.3; } .kt-faq p { margin: 8px 0 0; font-size: 15px; color: var(--kt-muted); } /* ---- Motion ----------------------------------------------------------- */ .og-js .kt-hero:not(.is-in) .kt-hero-copy > * { opacity: 0; transform: translateY(10px); } .og-js .kt-hero:not(.is-in) .kt-photos a { opacity: 0; transform: translateY(28px); } .kt-hero.is-in .kt-hero-copy > * { transition: opacity 500ms var(--og-ease), transform 500ms var(--og-ease); } .kt-hero.is-in .kt-hero-copy > :nth-child(2) { transition-delay: 70ms; } .kt-hero.is-in .kt-hero-copy > :nth-child(3) { transition-delay: 140ms; } .kt-hero.is-in .kt-hero-copy > :nth-child(4) { transition-delay: 210ms; } .kt-hero.is-in .kt-hero-copy > :nth-child(5) { transition-delay: 260ms; } .kt-hero.is-in .kt-photos a { transition: opacity 600ms var(--og-ease), transform 700ms var(--og-ease); transition-delay: 220ms; } .kt-hero.is-in .kt-photos a:nth-child(2) { transition-delay: 300ms; } .kt-hero.is-in .kt-photos a:nth-child(3) { transition-delay: 380ms; } @media (prefers-reduced-motion: reduce) { .og-js .kt-hero:not(.is-in) :is(.kt-hero-copy > *, .kt-photos a) { opacity: 1; transform: none; } .kt-photos img, .kt-arrow::after { transition: none; } } /* ========================================================================== Inner pages: same Colour Blocks language as the homepage. Blue rounded page head, sky rounded panels for alternate sections, colour tiles for card grids, navy booking panel at the bottom. ========================================================================== */ /* ---- Page head = blue panel, centred, like the homepage hero ----------- */ .og-page-head { background: var(--kt-blue); color: #fff; text-align: center; margin: 8px clamp(8px, 1.2vw, 16px) 0; border-radius: 32px; padding: clamp(48px, 6.5vw, 88px) 0 clamp(44px, 6vw, 80px); } .og-page-head .og-container { max-width: 900px; } .og-page-head .og-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 14px; font-weight: 600; } .og-page-head .og-h1-sm { margin: 0 auto 18px; max-width: 18ch; color: #fff; font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.4rem); line-height: 1.03; letter-spacing: -0.03em; } .og-page-head .og-h1-sm em { color: #FFE9B8; font-weight: 400; } .og-page-head .og-lead { margin: 0 auto; max-width: 52ch; color: rgba(255,255,255,.9); font-size: 1.12rem; } .og-page-head .og-lead :is(strong, b) { color: #fff; } .og-page-head-actions { justify-content: center; margin-top: 28px; } .og-page-head .og-btn-primary { background: #fff; border-color: #fff; color: var(--kt-navy); } .og-page-head .og-btn-primary:hover, .og-page-head .og-btn-primary:focus { background: var(--kt-cream); border-color: var(--kt-cream); color: var(--kt-navy); } .og-page-head .og-btn-secondary { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; } .og-page-head .og-btn-secondary:hover, .og-page-head .og-btn-secondary:focus { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); color: #fff; } .og-page-head .og-chip { background: rgba(255,255,255,.14); border-color: transparent; color: #fff; } .og-page-head .og-chip:hover { background: #fff; color: var(--kt-navy); } body.og-shell .og-page-head :is(a, button):focus-visible { box-shadow: 0 0 0 3px #fff; } /* ---- Section rhythm: alternate sections become sky rounded panels ------ */ .og-section--tint { background: var(--kt-sky); margin-inline: clamp(8px, 1.2vw, 16px); border-radius: 32px; } .og-page-head + .og-section--tint { margin-top: 16px; } .og-section--tint > .og-container { background: transparent; border: 0; border-radius: 0; padding-inline: 16px; padding-block: 0; } @media (min-width: 768px) { .og-section--tint > .og-container { padding-inline: 24px; } } .og-section--tint .og-chip { background: var(--kt-paper); border-color: transparent; } .og-section .og-h2 em, .og-section .og-h3 em { color: var(--kt-blue); font-weight: 400; } .og-chipbar { justify-content: center; } /* ---- Cards ------------------------------------------------------------ */ .og-card { border: 0; border-radius: 24px; } .og-card-title { font-size: 1.6rem; line-height: 1.12; } .og-card-price { font-weight: 600; color: var(--kt-navy); } /* Colour cycle for card grids: add .kt-cycle to the grid. */ .kt-cycle > .og-card { box-shadow: none; padding: 26px; } .kt-cycle > .og-card:nth-child(6n+1) { background: var(--kt-sky); } .kt-cycle > .og-card:nth-child(6n+2) { background: var(--kt-navy); } .kt-cycle > .og-card:nth-child(6n+3) { background: var(--kt-sand-2); } .kt-cycle > .og-card:nth-child(6n+4) { background: var(--kt-blue); } .kt-cycle > .og-card:nth-child(6n+5) { background: var(--kt-paper); box-shadow: inset 0 0 0 1px var(--kt-line); } .kt-cycle > .og-card:nth-child(6n+6) { background: var(--kt-sky-3); } .og-section--tint .kt-cycle > .og-card:nth-child(6n+1) { background: var(--kt-paper); } .kt-cycle > .og-card:is(:nth-child(6n+2), :nth-child(6n+4)) { color: rgba(255,255,255,.86); } .kt-cycle > .og-card:is(:nth-child(6n+2), :nth-child(6n+4)) :is(h2, h3, .og-card-title, .og-card-price, .og-eyebrow, .og-card-link, strong) { color: #fff; } .kt-cycle > .og-card:is(:nth-child(6n+2), :nth-child(6n+4)) :is(p, li, .og-card-text, .og-small) { color: rgba(255,255,255,.86); } .kt-cycle > .og-card:is(:nth-child(6n+2), :nth-child(6n+4)) .og-card-link { text-decoration-color: rgba(255,255,255,.5); } .kt-cycle > .og-card:is(:nth-child(6n+2), :nth-child(6n+4)) .og-card-link:hover { color: #FFE9B8; text-decoration-color: #FFE9B8; } .kt-cycle > .og-card:is(:nth-child(6n+2), :nth-child(6n+4)) .og-btn-primary { background: #fff; border-color: #fff; color: var(--kt-navy); } .kt-cycle > .og-card:is(:nth-child(6n+2), :nth-child(6n+4)) .og-btn-primary:hover { background: var(--kt-cream); border-color: var(--kt-cream); } .kt-cycle > .og-card:is(:nth-child(6n+2), :nth-child(6n+4)) .og-chip { background: rgba(255,255,255,.16); border-color: transparent; color: #fff; } .kt-cycle > .og-card .og-card-title { margin-top: 0; } .kt-tile-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; font-size: 14.5px; } .kt-tile-list li { display: flex; gap: 8px; align-items: baseline; } .kt-tile-list li::before { content: "\2713"; font-weight: 700; color: var(--kt-blue); flex: none; } .kt-cycle > .og-card:is(:nth-child(6n+2), :nth-child(6n+4)) .kt-tile-list li::before { color: #FFE9B8; } /* Services index: one tile grid per category */ .kt-cat { padding-block: clamp(36px, 4vw, 56px) 0; } .kt-cat:last-of-type { padding-bottom: clamp(56px, 7vw, 96px); } .kt-cat-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 20px; } .kt-cat-head h2 { margin: 0; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); } .kt-cat-head span { color: var(--kt-muted); font-size: 15px; } .kt-tiles--compact .kt-tile { min-height: 210px; } .kt-tiles--compact .kt-tile h3 { margin-top: 0; font-size: 1.5rem; } .kt-tile h3 a { color: inherit; text-decoration: none; } .kt-tile h3 a:hover { text-decoration: underline; text-underline-offset: 4px; } .kt-tile .kt-tile-row { margin-top: auto; padding-top: 18px; } .kt-new { display: inline-block; align-self: flex-start; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; background: var(--kt-navy); color: #fff; font-size: 12px; font-weight: 700; } .kt-tile:is(.kt-t-navy, .kt-t-blue) .kt-new { background: #fff; color: var(--kt-navy); } /* ---- Service article + price aside ------------------------------------ */ .service-article h2 { margin: 36px 0 10px; font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem); } .service-article h2:first-child { margin-top: 0; } .service-article > ul:not(.list-unstyled) { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; } .service-article > ul:not(.list-unstyled) li { background: var(--kt-sky); border-radius: 999px; padding: 8px 16px; font-size: 15px; line-height: 1.4; color: var(--kt-navy); } .service-article > ul.list-unstyled { background: var(--kt-sand-2); border-radius: 22px; padding: 22px 24px 14px; } .og-aside-card { background: var(--kt-navy); color: rgba(255,255,255,.85); border-radius: 24px; padding: 28px; box-shadow: none; overflow: hidden; position: relative; } .og-aside-card::before { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: var(--kt-navy-2); right: -70px; top: -90px; pointer-events: none; } .og-aside-card > * { position: relative; } .og-aside-card .og-eyebrow { color: var(--kt-sky-3); } .og-aside-card .og-aside-price { color: #fff; font: 500 clamp(1.8rem, 1.5rem + .8vw, 2.2rem)/1.1 var(--kt-serif); margin: 6px 0 12px; } .og-aside-card .og-aside-note { color: rgba(255,255,255,.75); } .og-aside-card a:not(.og-btn) { color: #fff; } .og-aside-card .og-btn-primary { background: #fff; border-color: #fff; color: var(--kt-navy); } .og-aside-card .og-btn-primary:hover { background: var(--kt-cream); border-color: var(--kt-cream); } .og-aside-card .og-small { color: rgba(255,255,255,.85); } /* ---- Steps: numbered paper rows like the homepage flow ----------------- */ .og-steps { margin-top: 28px; gap: 14px; } .og-steps > * { background: var(--kt-paper); border-radius: 20px; padding: 22px; } .og-section--tint .og-steps > * { background: var(--kt-paper); } .og-step-num { width: 44px; height: 44px; font-size: 16px; margin-bottom: 14px; } /* ---- FAQ: rounded paper rows, no borders ------------------------------ */ .og-faq .accordion-item { border: 0; border-radius: 16px !important; background: var(--kt-paper); } .og-faq .accordion-button, .og-faq .accordion-button:not(.collapsed) { background: var(--kt-paper); color: var(--kt-navy); } .og-faq .accordion-button:not(.collapsed) { color: var(--kt-blue); } .og-section:not(.og-section--tint) .og-faq .accordion-item { background: var(--kt-sky); } .og-section:not(.og-section--tint) .og-faq .accordion-button { background: var(--kt-sky); } /* ---- Closing band = navy booking panel with circles ------------------- */ .og-section--blue.og-cta { position: relative; overflow: hidden; background: var(--kt-navy); margin: clamp(24px, 3vw, 40px) clamp(8px, 1.2vw, 16px) clamp(8px, 1.2vw, 16px); border-radius: 32px; padding-block: clamp(56px, 7vw, 96px); text-align: center; } .og-section--blue.og-cta::before, .og-section--blue.og-cta::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .og-section--blue.og-cta::before { width: 300px; height: 300px; background: var(--kt-blue); left: -110px; top: -130px; } .og-section--blue.og-cta::after { width: 240px; height: 240px; background: var(--kt-navy-2); right: -80px; bottom: -110px; } .og-cta .og-cta-inner { position: relative; z-index: 1; flex-direction: column; justify-content: center; gap: 28px; } .og-cta h2 { max-width: 22ch; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); line-height: 1.06; } .og-cta .og-cta-actions { justify-content: center; } /* ---- Pricing page (pr-*): same tiles, no hairlines -------------------- */ .pricing-redesign { --cream-50: var(--kt-cream); --cream-100: var(--kt-sky); --border-hairline: transparent; } .pricing-redesign .pr-section.bg-white, .pricing-redesign .pr-section.bg-cream { border-top: 0; } .pricing-redesign .pr-section.bg-white { background: var(--kt-sky) !important; margin-inline: clamp(8px, 1.2vw, 16px); border-radius: 32px; } .pricing-redesign .pr-section.bg-cream { background: transparent; } .pricing-redesign h2.pr-h2 { font-family: var(--kt-serif); font-weight: 500; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.3rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--kt-navy); } .pricing-redesign h2.pr-h2 .accent { color: var(--kt-blue); font-style: italic; font-weight: 400; } .pricing-redesign .pr-eyebrow { font-family: var(--kt-sans); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--kt-blue); } .pricing-redesign .pr-eyebrow::before, .pricing-redesign .pr-eyebrow::after { display: none; } .pricing-redesign :is(.pr-pkg, .pr-svc, .pr-detail, .pr-addon) { border: 0; border-radius: 24px; box-shadow: none; background: var(--kt-paper); } .pricing-redesign .pr-section.bg-white :is(.pr-svc, .pr-pkg, .pr-detail, .pr-addon) { background: var(--kt-paper); } .pricing-redesign .pr-svc:hover { box-shadow: 0 16px 32px -24px rgba(15,37,71,.45); } .pricing-redesign :is(.pr-pkg, .pr-detail) h3, .pricing-redesign .pr-svc h4 { font-family: var(--kt-serif); font-weight: 500; letter-spacing: -0.01em; color: var(--kt-navy); } .pricing-redesign .pr-pkg.featured { background: var(--kt-navy); } .pricing-redesign .pr-pkg.featured h3 { color: #fff; } .pricing-redesign .pr-detail.featured { background: var(--kt-sky-3); } .pricing-redesign .pr-pkg.featured::before { display: none; } .pricing-redesign .pr-rule { background: transparent; height: 0; margin: 14px 0 10px; } .pricing-redesign .pr-chip { border: 0; background: var(--kt-paper); border-radius: 999px; } .pricing-redesign .pr-chip.active { background: var(--kt-navy); color: #fff; } .pricing-redesign .pr-custom { background: var(--kt-navy); border-radius: 32px; position: relative; overflow: hidden; } .pricing-redesign .pr-custom::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: var(--kt-blue); left: -120px; top: -150px; pointer-events: none; } .pricing-redesign .pr-custom > * { position: relative; } .pricing-redesign .pr-custom h2 { font-family: var(--kt-serif); font-weight: 500; } /* ---- AC recharge comparison: sky + sand tiles ------------------------- */ .ac-compare .ac-compare-card { box-shadow: none; } .ac-compare > :nth-child(1) .ac-compare-card { background: var(--kt-sky); } .ac-compare > :nth-child(2) .ac-compare-card { background: var(--kt-sand-2); } .ac-compare-card h2 { font-size: 2rem; } .ac-compare-card .text-center[style*="border"] { background: var(--kt-paper) !important; border: 0 !important; border-radius: 18px !important; } .og-section--tint .service-article > ul:not(.list-unstyled) li { background: var(--kt-paper); } @media (max-width: 639.98px) { .kt-tiles--compact .kt-tile { min-height: 0; padding: 22px; } } /* ========================================================================== Tire shop (/tires, rl-*): Colour Blocks. The page carries its own