/* ===================================================================== PMS Tech World — website Colours come from CSS variables set in includes/header.php from the theme the admin chooses, so rebranding needs no CSS edit. ===================================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --text: #1D2A44; --text-light: #4C5872; --text-lighter: #8C97AF; --bg: #F4F6F8; --bg-card: #ffffff; --border: #E1E6EE; --success: #15803d; --success-bg: #dcfce7; --danger: #b91c1c; --danger-bg: #fee2e2; --warning: #92400e; --warning-bg: #fef3c7; --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; --shadow-sm: 0 1px 3px rgba(29,42,68,.06); --shadow: 0 4px 16px rgba(29,42,68,.07); --shadow-lg: 0 16px 44px rgba(29,42,68,.13); --container: 1200px; } html { scroll-behavior: smooth; } /* The mobile menu is a fixed drawer parked off-screen to the right; without this it widens the page on phones and everything gets cut off. `clip` rather than `hidden` because hidden would create a scroll container and break the sticky navbar. */ html, body { overflow-x: clip; max-width: 100%; } body { font-family: var(--font, 'Inter', system-ui, sans-serif); font-size: 15px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; transition: color .18s; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } button { font: inherit; cursor: pointer; border: none; background: none; } input, select, textarea { font: inherit; } .container { max-width: var(--container); margin: 0 auto; padding: 0 20px; } /* Breathing room between page content and the footer. A full-bleed band as the last element should meet the footer directly, so it cancels the padding — otherwise a strip of page background shows through beneath it. */ .site-main { min-height: 60vh; padding-bottom: var(--main-pad-bottom, 60px); } .site-main > .account-band:last-child, .site-main > .cta-band:last-child, .site-main > .howto:last-child { margin-bottom: calc(-1 * var(--main-pad-bottom, 60px)); } /* --- Buttons ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; white-space: nowrap; transition: all .18s; cursor: pointer; border: 1px solid transparent; } /* The brand sheet reserves Tech Blue for navigation and headings and names Solar Gold as the primary call-to-action colour, so a filled button carries the accent rather than the nav colour. Gold is a light colour: its label must be Charcoal (8.2:1). White on gold is 1.7:1 and effectively unreadable. Hover darkens with a filter instead of a second hex, so a different accent set in Admin → Theme still gets a sensible hover state. */ .btn-primary { background: var(--accent); color: var(--text); } .btn-primary:hover { filter: brightness(.93); transform: translateY(-1px); box-shadow: var(--shadow); } .btn-outline { border-color: var(--primary); color: var(--primary); background: #fff; } .btn-outline:hover { background: var(--primary); color: #fff; } .btn-light { background: #fff; color: var(--text); border-color: var(--border); } .btn-light:hover { background: var(--bg); } .btn-white { background: #fff; color: var(--primary); } .btn-white:hover { background: rgba(255,255,255,.9); } .btn-ghost { color: var(--text-light); } .btn-ghost:hover { background: var(--bg); color: var(--text); } .btn-sm { padding: 8px 15px; font-size: 13px; } .btn-lg { padding: 15px 30px; font-size: 15px; } .btn-block { width: 100%; } .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } /* --- Top strip --------------------------------------------------------- A deep gradient rather than flat black, with the phone number pulled out as the one thing worth tapping. */ .topstrip { background: linear-gradient(90deg, #0b1420 0%, #122237 55%, #0d1a2a 100%); color: rgba(255,255,255,.72); font-size: 12.5px; padding: 0; border-bottom: 1px solid rgba(255,255,255,.06); } .topstrip-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 38px; } .ts-item { display: inline-flex; align-items: center; gap: 7px; } .ts-item i { font-size: 13px; color: var(--accent); opacity: .9; } .topstrip-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } /* Divider dots between the right-hand items. */ .topstrip-links > * + *::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.28); margin-right: 15px; display: inline-block; vertical-align: middle; } .ts-promise { color: rgba(255,255,255,.9); font-weight: 600; } .ts-phone { color: #fff; font-weight: 700; letter-spacing: .01em; } .ts-phone:hover { color: var(--accent); } .ts-phone i { color: var(--accent); } /* --- Navbar ------------------------------------------------------------ */ .navbar { background: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 var(--border), 0 6px 24px rgba(15,23,42,.05); } .navbar-inner { display: flex; align-items: center; gap: 26px; padding-top: 15px; padding-bottom: 15px; } .brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } /* The logo is a wide lockup (2.7:1) whose "WORLD" line is small, so it needs more height than a square mark would to stay readable. */ .brand img { height: 52px; width: auto; display: block; } /* On the navy footer the logo's dark blue all but disappears, so it sits on a white chip rather than being recoloured — the artwork keeps its own colours. */ .brand-light img { height: 42px; background: #fff; padding: 7px 11px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.18); } .brand-mark { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(140deg, var(--primary), var(--secondary)); color: #fff; display: grid; place-items: center; font-size: 21px; box-shadow: 0 6px 16px rgba(0, 82, 204,.28); } .brand-text { font-size: 20px; font-weight: 800; letter-spacing: -.025em; color: var(--primary); } .brand-light .brand-text { color: #fff; } /* Search: pill with the submit arrow tucked inside on the right. */ .nav-search { flex: 1; max-width: 480px; position: relative; } .nav-search > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-lighter); pointer-events: none; font-size: 17px; } .nav-search input { width: 100%; padding: 12px 52px 12px 44px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); font-size: 14px; transition: all .2s; } .nav-search input:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(0, 82, 204,.10); } /* Submitting a search is an action, so it takes the accent like every other filled button. The arrow is charcoal — a white arrow on gold is 1.75:1. */ .nav-search-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--text); display: grid; place-items: center; font-size: 17px; transition: all .18s; } .nav-search-btn:hover { filter: brightness(.93); transform: translateY(-50%) scale(1.06); } .search-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 340px; overflow-y: auto; display: none; z-index: 60; } .search-suggest.open { display: block; } .suggest-item { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); } .suggest-item:last-child { border-bottom: none; } .suggest-item:hover { background: var(--bg); } .suggest-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; } .suggest-item strong { display: block; font-size: 13px; font-weight: 500; } .suggest-item small { font-size: 12px; color: var(--text-light); } .suggest-empty { padding: 16px; text-align: center; color: var(--text-lighter); font-size: 13px; } .nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; } .nav-links > a { font-size: 14px; font-weight: 500; color: var(--text-light); } .nav-links > a:hover, .nav-links > a.active { color: var(--primary); } /* Sign in: hovering turns the label white, so the fill has to move to Tech Blue with it — white on gold is 1.75:1 and would disappear. filter is cancelled because the shared .btn-primary hover darkens, which a blue fill does not need. */ .nav-links .btn-primary:hover { background: var(--primary); color: #fff; filter: none; } .nav-links .btn { color: #fff; } .nav-icon { position: relative; font-size: 20px; color: var(--text-light); } .nav-dot { position: absolute; top: -5px; right: -7px; background: var(--danger); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; font-weight: 600; } .nav-user { position: relative; } .nav-user-btn { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 999px; border: 1px solid var(--border); } .nav-user-btn:hover { border-color: var(--primary); } .nav-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; } .nav-user-name { font-size: 13px; font-weight: 500; } .nav-user-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 7px; display: none; z-index: 60; } .nav-user-menu.open { display: block; } .nav-user-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text-light); } .nav-user-menu a:hover { background: var(--bg); color: var(--primary); } .menu-divider { height: 1px; background: var(--border); margin: 5px 0; } .nav-toggle { display: none; font-size: 24px; color: var(--text); } /* --- Category menu ------------------------------------------------------ Pills on a tinted rail. The active/hovered one lifts to white so the row reads as navigation rather than a line of plain links. */ .nav-cats { position: relative; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* The strip scrolls sideways whenever the categories outrun the width. Cut hard at the edge that reads as a broken pill rather than "there is more", so it fades out. Over empty space the gradient is invisible — it ends in the strip's own background — so it costs nothing when everything already fits. */ .nav-cats::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; background: linear-gradient(90deg, rgba(244,246,248,0), var(--bg) 72%); pointer-events: none; } /* padding-top/bottom is 10px so the active pill's shadow has room — a scroll container cannot have overflow-y: visible, so anything the shadow needs has to fit inside the padding or it is sliced off. */ .nav-cats-inner { display: flex; gap: 5px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; } .nav-cats-inner::-webkit-scrollbar { display: none; } /* A scroll container's padding-right is left out of its scrollable width, so the last category — Cameras — was cut off by exactly the 20px of container padding, which showed badly once it was the selected, filled pill. A flex spacer is part of the content, so it does count. 14px + the 6px gap restores the 20px. */ .nav-cats-inner::after { content: ''; flex: 0 0 14px; } .nav-cat { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; font-size: 13.5px; font-weight: 500; color: var(--text-light); white-space: nowrap; border-radius: 999px; border: 1px solid transparent; transition: all .18s; } .nav-cat i { font-size: 16px; color: var(--text-lighter); transition: color .18s; } .nav-cat:hover { background: #fff; color: var(--primary); border-color: var(--border); box-shadow: var(--shadow-sm); } .nav-cat:hover i { color: var(--primary); } /* Shadow kept inside the strip's 10px padding: 0 4px 12px reached 16px below the pill and the scroll container sliced it flat across the bottom. */ .nav-cat.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 2px 6px rgba(0, 82, 204,.32); } .nav-cat.active i { color: #fff; } /* "All products" leads the row, so it carries a tint even at rest. */ .nav-cat-all { background: rgba(0, 82, 204,.07); color: var(--primary); font-weight: 600; } .nav-cat-all i { color: var(--primary); } /* --- Due strip (signed-in customers with money owed) ------------------- */ .due-strip { background: var(--primary); color: #fff; } .due-strip-late { background: var(--danger); } .due-strip-inner { display: flex; align-items: center; gap: 14px; padding: 11px 20px; flex-wrap: wrap; } .due-strip i { font-size: 19px; flex-shrink: 0; } .due-strip span { flex: 1; font-size: 13.5px; min-width: 200px; } .due-strip strong { font-weight: 700; } /* --- Flash messages ---------------------------------------------------- */ .flash { display: flex; align-items: center; gap: 11px; padding: 13px 17px; border-radius: var(--radius); margin: 20px 0; font-size: 14px; } .flash i { font-size: 19px; flex-shrink: 0; } .flash span { flex: 1; } .flash-close { color: inherit; opacity: .6; font-size: 17px; } .flash-success { background: var(--success-bg); color: var(--success); } .flash-error { background: var(--danger-bg); color: var(--danger); } .flash-info { background: #e0f2fe; color: #075985; } /* --- Sections ---------------------------------------------------------- */ .section { padding: 48px 0; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; } .section-head h2 { font-size: 25px; font-weight: 700; letter-spacing: -.02em; } .section-head p { color: var(--text-light); font-size: 14px; margin-top: 4px; } /* "See all products →" and the cards' "View details →" are the same control at two sizes: a tinted pill that fills with the brand colour on hover, so the way out of a section and the way into a product read alike. The flat colours are fallbacks for browsers without color-mix; both declarations stay so the tint follows a primary changed in Admin → Theme wherever support exists. */ .section-link, .pcard-link { display: inline-flex; align-items: center; flex-shrink: 0; font-weight: 600; color: var(--primary); border-radius: 999px; background: #EDF3FD; background: color-mix(in srgb, var(--primary) 8%, #fff); border: 1px solid #D9E5FA; border-color: color-mix(in srgb, var(--primary) 18%, #fff); transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s; } .section-link i, .pcard-link i { transition: transform .2s; } .section-link:hover, .pcard-link:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(0, 82, 204, .26); } .section-link:hover i, .pcard-link:hover i { transform: translateX(3px); } .section-link { gap: 7px; font-size: 13.5px; padding: 9px 15px 9px 17px; } .section-link i { font-size: 15px; } /* --- Hero slider — copy on the left half, picture on the right ---------- Layered rather than flat: two soft radial lights bloom behind the copy, a fine dot grid gives the dark panel some texture, and the photo is cut on a diagonal so the two halves interlock instead of meeting on a straight seam. */ /* One soft bloom, high and left. A second one low behind the buttons made the panel look banded, so the lower half is kept flat. */ .slider { position: relative; overflow: hidden; background: radial-gradient(820px 500px at 8% 12%, rgba(37,104,168,.42), transparent 64%), linear-gradient(120deg, #08131f 0%, #0e2135 52%, #122b45 100%); } /* Dot grid, faded out before it reaches the photo. */ .slider::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 68%); mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 68%); } .slider-track { position: relative; } .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease; } .slide:first-child { position: relative; } .slide.is-active { opacity: 1; visibility: visible; z-index: 2; } /* The picture fills the right half, bleeding to the edge of the viewport. A diagonal cut was tried here and removed: the feather runs horizontally, so near the bottom-left the photo appeared above the cut un-darkened and threw a lit wedge across the buttons. A straight edge feathers predictably. */ .slide-media { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; overflow: hidden; } .slide-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 9s ease-out; } .slide.is-active .slide-media img { transform: scale(1); } /* Wide feather so the photo melts into the panel with no visible seam. */ .slide-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0e2135 0%, rgba(14,33,53,.86) 12%, rgba(14,33,53,.42) 30%, rgba(14,33,53,0) 52%); } /* Extra bottom room: the trust cards overlap the last ~46px of the slider. */ .slide-inner { position: relative; z-index: 3; min-height: 560px; display: flex; align-items: center; padding-top: 56px; padding-bottom: 104px; } .slide-copy { width: 52%; padding-right: 46px; color: #fff; } .slide-kicker { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); padding: 8px 16px 8px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 22px; } /* Small live dot — a quiet cue that the slider is moving. */ .slide-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255,183,3,.6); animation: kickerPulse 2.4s ease-out infinite; } @keyframes kickerPulse { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.55); } 70% { box-shadow: 0 0 0 7px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } } /* Colour set first as the fallback, then overlaid with a faint top-to-bottom sheen via background-clip so the headline catches the light. */ .slide-title { font-size: clamp(30px, 5vw, 54px); line-height: 1.06; font-weight: 800; letter-spacing: -.035em; margin-bottom: 18px; text-wrap: balance; color: #fff; background: linear-gradient(175deg, #ffffff 42%, #c2d8ec 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .slide-text { font-size: clamp(14px, 1.5vw, 17px); line-height: 1.65; color: rgba(255,255,255,.84); margin-bottom: 30px; max-width: 520px; } .slide-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* Slides animate in only when they become active. */ .slide.is-active .slide-kicker { animation: slideUp .6s .05s both; } .slide.is-active .slide-title { animation: slideUp .6s .15s both; } .slide.is-active .slide-text { animation: slideUp .6s .25s both; } .slide.is-active .slide-actions{ animation: slideUp .6s .35s both; } @keyframes slideUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 24px; display: grid; place-items: center; backdrop-filter: blur(6px); transition: all .2s; } .slider-arrow:hover { background: #fff; color: var(--primary); border-color: #fff; transform: translateY(-50%) scale(1.08); } .slider-prev { left: 22px; } .slider-next { right: 22px; } /* Dots sit under the copy, not centred across the photo, and the active one fills as a progress bar so the autoplay timing is visible rather than the slide just jumping. */ /* Sits above the overlapping trust cards. */ .slider-dots { position: absolute; bottom: 86px; z-index: 5; left: max(20px, calc(50vw - var(--container) / 2 + 20px)); display: flex; gap: 10px; } .slider-dot { position: relative; width: 34px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.26); transition: width .3s, background .3s; overflow: hidden; } .slider-dot:hover { background: rgba(255,255,255,.5); } .slider-dot.is-active { width: 62px; background: rgba(255,255,255,.3); } .slider-dot.is-active::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform-origin: left; animation: dotFill var(--slide-ms, 8000ms) linear forwards; } .slider.is-paused .slider-dot.is-active::after { animation-play-state: paused; } @keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .slider-dot.is-active::after { animation: none; transform: scaleX(1); } .slide-kicker::before { animation: none; } } .btn-glass { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.34); backdrop-filter: blur(6px); } .btn-glass:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.5); } /* --- Trust bar ---------------------------------------------------------- Four promise cards that overlap the bottom of the slider, so the band reads as part of the hero rather than a plain strip bolted underneath. */ .trustbar { background: transparent; padding: 0 0 6px; margin-top: -46px; position: relative; z-index: 6; } .trustbar-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .trust { display: flex; align-items: center; gap: 14px; padding: 20px 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(15,23,42,.08); transition: all .22s; } .trust:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(15,23,42,.12); border-color: rgba(0, 82, 204,.28); } .trust-icon { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; font-size: 24px; color: #fff; background: linear-gradient(140deg, var(--primary), var(--secondary)); box-shadow: 0 6px 14px rgba(0, 82, 204,.28); transition: all .22s; } .trust:hover .trust-icon { transform: scale(1.06) rotate(-4deg); } .trust strong { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.25; } /* Scoped to the text column: a bare `.trust span` also matched .trust-icon (itself a span) and greyed the white glyph out. */ .trust > div span { font-size: 12.5px; color: var(--text-light); } /* --- Section furniture -------------------------------------------------- */ .section-alt { background: #fff; } .section-tight { padding: 30px 0; } .eyebrow { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; } .eyebrow-light { color: rgba(255,255,255,.75); } /* --- Category bento ----------------------------------------------------- */ /* Four columns, two rows. The first and last tiles span both rows, so six categories fill the grid exactly with no empty cell. */ .cat-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 16px; } .cat-tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); background: var(--text); box-shadow: var(--shadow-sm); } /* The two tall tiles are pinned to the outer columns so the four small ones fill the middle exactly. Left to auto-placement the trailing tall tile cannot fit beside a full row and spills into a third row. */ .cat-bento > .cat-tile-tall:first-child { grid-column: 1; grid-row: 1 / span 2; } .cat-bento > .cat-tile-tall:last-child { grid-column: 4; grid-row: 1 / span 2; } .cat-tile-tall { grid-row: span 2; } .cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.25,1,.5,1); } .cat-tile:hover img { transform: scale(1.07); } .cat-tile-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 46px; color: #fff; background: linear-gradient(140deg, var(--primary), var(--secondary)); } /* Strong enough to keep white text legible over a bright photo (the laptop and laundry-room shots are nearly white where the caption sits). */ .cat-tile-ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; padding: 22px; background: linear-gradient(180deg, rgba(9,17,28,.10) 0%, rgba(9,17,28,.34) 42%, rgba(9,17,28,.74) 72%, rgba(9,17,28,.95) 100%); } .cat-tile-ov h3 { color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0,0,0,.45); } .cat-tile-ov small { color: rgba(255,255,255,.75); font-size: 12.5px; } .cat-tile-tall .cat-tile-ov h3 { font-size: 25px; } .cat-tile-btn { margin-top: 12px; background: #fff; color: var(--primary); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: 10px 20px; border-radius: 999px; transition: all .22s; } .cat-tile:hover .cat-tile-btn { background: var(--primary); color: #fff; } /* --- How it works ------------------------------------------------------- */ .howto { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; } .howto-head { text-align: center; max-width: 620px; margin: 0 auto 40px; } .howto-head h2 { font-size: clamp(24px, 3vw, 31px); font-weight: 700; letter-spacing: -.02em; } .howto-head p { color: rgba(255,255,255,.8); margin-top: 8px; } .howto-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; } .howto-step { position: relative; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-lg); padding: 28px 22px 24px; backdrop-filter: blur(6px); transition: all .22s; } .howto-step:hover { background: rgba(255,255,255,.16); transform: translateY(-4px); } .howto-num { position: absolute; top: -14px; left: 22px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--text); display: grid; place-items: center; font-size: 13px; font-weight: 800; box-shadow: 0 4px 12px rgba(0,0,0,.2); } .howto-step i { font-size: 30px; display: block; margin-bottom: 13px; color: rgba(255,255,255,.9); } .howto-step strong { display: block; font-size: 16px; margin-bottom: 6px; } .howto-step p { font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.6; } .howto-note { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; padding: 20px 24px; border-radius: var(--radius-lg); background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.14); } .howto-note > i { font-size: 24px; flex-shrink: 0; } .howto-note p { flex: 1; min-width: 260px; font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.88); } /* --- Account CTA band --------------------------------------------------- */ /* Light on purpose. It sits between the blue "how it works" band and the dark footer — dark here would merge straight into the footer, and brand blue would merge into the band above. Light separates it cleanly from both. */ .account-band { background: linear-gradient(135deg, var(--primary-light, #e8f0f8) 0%, #fbfcfe 62%); color: var(--text); padding: 52px 0; position: relative; overflow: hidden; border-top: 1px solid var(--border); } .account-band::before, .account-band::after { content: ''; position: absolute; border-radius: 50%; background: rgba(0, 82, 204,.06); pointer-events: none; } .account-band::before { width: 340px; height: 340px; right: -80px; top: -140px; } .account-band::after { width: 240px; height: 240px; left: -90px; bottom: -130px; } .account-band-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: center; } .account-band-copy { max-width: 560px; } .account-band-copy h2 { font-size: clamp(24px, 3.2vw, 33px); font-weight: 800; letter-spacing: -.025em; margin-bottom: 10px; color: var(--text); } .account-band-copy p { color: var(--text-light); font-size: 15px; line-height: 1.7; } .account-perks { display: flex; flex-direction: column; gap: 11px; margin: 22px 0 26px; } .account-perks li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--text); } /* Solid tile with a white glyph, matching the trust cards — a thin line icon tinted on a pale tile all but disappears at this size. */ .account-perks i { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-size: 16px; color: #fff; background: linear-gradient(140deg, var(--primary), var(--secondary)); box-shadow: 0 4px 10px rgba(0, 82, 204,.24); } .account-band-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* --- Loan-screen preview ------------------------------------------------ */ .account-preview { position: relative; } /* Replaced a tilted mock loan card. This one states how signing in works, which is true whether or not the visitor has ever bought anything. */ .signin-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 26px 24px; box-shadow: var(--shadow-lg); } .signin-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 20px; letter-spacing: -.01em; } .signin-steps { display: flex; flex-direction: column; gap: 18px; counter-reset: step; } .signin-steps li { display: flex; gap: 14px; align-items: flex-start; } .signin-steps span { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; margin-top: 1px; } .signin-steps div { font-size: 13px; line-height: 1.6; color: var(--text-light); } .signin-steps strong { display: block; font-size: 14.5px; color: var(--text); margin-bottom: 2px; } .signin-note { display: flex; align-items: center; gap: 9px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-light); } .signin-note i { color: var(--secondary); font-size: 16px; flex-shrink: 0; } /* --- CTA band ----------------------------------------------------------- */ .cta-band { background: var(--text); color: #fff; padding: 44px 0; } .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; } .cta-inner h2 { font-size: clamp(21px, 2.6vw, 27px); font-weight: 700; letter-spacing: -.02em; } .cta-inner p { color: rgba(255,255,255,.7); margin-top: 6px; font-size: 14.5px; } .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* --- Category tiles ---------------------------------------------------- */ /* Round icon badge, used on the categories listing page. The old .cat-grid / .cat-tile rules that sat here were replaced by the bento grid above; they were overriding it because they came later in the file. */ .cat-icon { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px; background: rgba(0, 82, 204,.08); color: var(--primary); display: grid; place-items: center; font-size: 25px; } /* --- Product cards ----------------------------------------------------- */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; } .pcard { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all .2s; display: flex; flex-direction: column; } .pcard:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow); } /* The photo is absolutely positioned inside a square box. A plain height:100% would resolve to auto against an aspect-ratio parent, letting a portrait photo stretch its card taller than its neighbours and break the row. */ .pcard-img { position: relative; display: block; aspect-ratio: 1; background: var(--bg); overflow: hidden; } .pcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .pcard:hover .pcard-img img { transform: scale(1.06); } .pcard-tag { position: absolute; top: 10px; left: 10px; background: var(--accent); color: var(--text); font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; } .pcard-body { padding: 15px; display: flex; flex-direction: column; flex: 1; } .pcard-cat { font-size: 11px; color: var(--text-lighter); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .pcard-title { font-size: 14.5px; font-weight: 600; line-height: 1.4; margin: 5px 0 3px; } .pcard-title a:hover { color: var(--primary); } .pcard-meta { font-size: 12px; color: var(--text-lighter); } .pcard-price { margin: 11px 0 13px; } .pcard-price strong { font-size: 19px; font-weight: 700; color: var(--primary); } .pcard-price small { display: block; font-size: 11.5px; color: var(--text-light); margin-top: 1px; } /* Wraps because the pill cannot shrink: in a two-column grid on a phone the card is ~170px, and holding the note and the pill on one line pushed the pill past the card edge. Given room they share a line; without it the pill drops below. */ .pcard-foot { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pcard-store { font-size: 11px; color: var(--text-lighter); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; } /* Same pill as .section-link, one size down — see that rule for the shared part. */ .pcard-link { gap: 5px; font-size: 12px; padding: 7px 12px 7px 14px; margin-left: auto; } .pcard-link i { font-size: 13px; } /* --- Shop: category banner ---------------------------------------------- */ .shop-hero { position: relative; overflow: hidden; padding: 34px 0 38px; margin-bottom: 28px; background: linear-gradient(120deg, #0d1a2b 0%, #16304b 100%); color: #fff; } .shop-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; } /* Keeps the headline readable over any category photo. */ .shop-hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(9,17,28,.94) 0%, rgba(9,17,28,.72) 46%, rgba(9,17,28,.42) 100%); } .shop-hero-inner { position: relative; z-index: 2; } .shop-hero h1 { font-size: clamp(25px, 3.6vw, 36px); font-weight: 800; letter-spacing: -.025em; margin-bottom: 8px; } .shop-hero p { color: rgba(255,255,255,.8); font-size: 14.5px; max-width: 640px; } .breadcrumb-light { color: rgba(255,255,255,.6); padding: 0 0 14px; } .breadcrumb-light a:hover { color: #fff; } /* --- Shop layout ------------------------------------------------------- */ .shop-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 26px; align-items: start; } .shop-filters { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); position: sticky; top: 96px; overflow: hidden; box-shadow: var(--shadow-sm); } .filters-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg); } .filters-head h2 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .filters-head h2 i { color: var(--primary); font-size: 17px; } .filters-clear { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--primary); } .filters-clear:hover { text-decoration: underline; } .filters-close { display: none; font-size: 22px; color: var(--text-light); margin-left: auto; } .filters-body { padding: 20px; } .filter-block { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border); } .filter-block h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-lighter); margin-bottom: 12px; font-weight: 700; display: flex; align-items: center; gap: 7px; } .filter-block h4 i { font-size: 14px; color: var(--primary); } .filter-list li a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 11px; margin: 0 -11px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text-light); transition: all .16s; } .filter-list li a span { display: flex; align-items: center; gap: 9px; min-width: 0; } .filter-list li a span i { font-size: 15px; color: var(--text-lighter); flex-shrink: 0; } .filter-list li a em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text-lighter); background: var(--bg); padding: 2px 8px; border-radius: 999px; flex-shrink: 0; } .filter-list li a:hover { background: var(--bg); color: var(--text); } .filter-list li a.active { background: var(--primary); color: #fff; font-weight: 600; } .filter-list li a.active i { color: rgba(255,255,255,.85); } .filter-list li a.active em { background: rgba(255,255,255,.2); color: #fff; } /* The "All products" / "All brands" rows are the reset state, not a chosen filter — a lighter treatment stops two solid blue bars competing. */ .filter-list li:first-child a.active { background: var(--primary-soft, rgba(0, 82, 204,.09)); color: var(--primary); } .filter-list li:first-child a.active i { color: var(--primary); } /* A long brand list shouldn't push the price filter off the screen. overflow-x must be stated explicitly: setting only overflow-y promotes the other axis from `visible` to `auto`, and the rows' negative side margins then draw a stray horizontal scrollbar under the list. The container takes those margins instead, so the rows sit flush inside it. */ .filter-list-scroll { max-height: 232px; overflow-y: auto; overflow-x: hidden; margin: 0 -11px; padding: 0; } .filter-list-scroll li a { margin: 0; } .filter-list-scroll::-webkit-scrollbar { width: 5px; } .filter-list-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } .filter-list-scroll::-webkit-scrollbar-track { background: transparent; } .price-bands { display: grid; gap: 7px; margin-bottom: 14px; } .price-band { padding: 9px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-light); transition: all .16s; text-align: center; } .price-band:hover { border-color: var(--primary); color: var(--primary); } .price-band.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; } .price-inputs { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .price-inputs input { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; } .price-inputs input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 82, 204,.1); } .price-inputs span { color: var(--text-lighter); } .filter-help { background: linear-gradient(140deg, var(--primary), var(--secondary)); color: #fff; border-radius: var(--radius); padding: 18px; } .filter-help > i { font-size: 22px; display: block; margin-bottom: 8px; } .filter-help strong { display: block; font-size: 14px; margin-bottom: 5px; } .filter-help p { font-size: 12.5px; color: rgba(255,255,255,.85); line-height: 1.6; margin-bottom: 12px; } .filter-help-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #fff; } .filter-help-link:hover { gap: 8px; } /* --- Shop toolbar ------------------------------------------------------- */ .shop-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; } .shop-count { font-size: 13.5px; color: var(--text-light); } .shop-count strong { color: var(--text); font-size: 15px; font-weight: 700; } .shop-count small { color: var(--text-lighter); } .sort-form { display: flex; align-items: center; gap: 9px; margin-left: auto; } .sort-form label { font-size: 12.5px; color: var(--text-lighter); display: flex; align-items: center; gap: 5px; white-space: nowrap; } .sort-form select { padding: 9px 32px 9px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font-size: 13.5px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; } .sort-form select:focus { outline: none; border-color: var(--primary); } .filters-toggle { display: none; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font-size: 13.5px; font-weight: 600; } .filters-toggle em { font-style: normal; background: var(--primary); color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 5px; } /* --- Active filter chips ------------------------------------------------ */ .active-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .active-chips-label { font-size: 12px; color: var(--text-lighter); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .chip-active { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; background: var(--primary); color: #fff; border-radius: 999px; font-size: 12.5px; font-weight: 600; } .chip-active i { font-size: 14px; opacity: .8; } .chip-active:hover { background: var(--secondary); } .chip-active:hover i { opacity: 1; } .chip-clear { font-size: 12.5px; color: var(--text-light); text-decoration: underline; } .chip-clear:hover { color: var(--danger); } .filters-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 110; } .filters-backdrop.open { display: block; } /* --- Product detail ---------------------------------------------------- */ .pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; } .pd-gallery { position: sticky; top: 96px; } .pd-main-img { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; aspect-ratio: 1; } .pd-main-img img { width: 100%; height: 100%; object-fit: contain; } .pd-thumbs { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; } .pd-thumb { width: 66px; height: 66px; border: 2px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: #fff; } .pd-thumb.on { border-color: var(--primary); } .pd-thumb img { width: 100%; height: 100%; object-fit: cover; } .pd-cat { font-size: 12px; color: var(--text-lighter); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .pd-title { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 7px 0 10px; line-height: 1.25; } .pd-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-light); margin-bottom: 20px; } .pd-price { font-size: 34px; font-weight: 800; color: var(--primary); letter-spacing: -.02em; } .pd-price-note { font-size: 13px; color: var(--text-light); margin-top: 3px; } /* The in-store notice is the whole point of the product page (spec §4.2). */ .instore-box { background: linear-gradient(135deg, rgba(0, 82, 204,.06), rgba(0, 82, 204,.02)); border: 1px solid rgba(0, 82, 204,.18); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 20px; margin: 24px 0; } .instore-box h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; margin-bottom: 9px; } .instore-box h3 i { color: var(--primary); font-size: 19px; } .instore-box p { font-size: 13.5px; color: var(--text-light); margin-bottom: 14px; } .instore-shop { display: flex; gap: 12px; align-items: flex-start; padding-top: 14px; border-top: 1px dashed rgba(0, 82, 204,.25); } .instore-shop i { color: var(--primary); font-size: 17px; margin-top: 2px; } .instore-shop strong { display: block; font-size: 13.5px; } .instore-shop small { font-size: 12.5px; color: var(--text-light); line-height: 1.6; } /* Call, WhatsApp and Directions on one row. Equal columns rather than a wrapping flex row: the panel is ~515px on a wide screen but narrows to ~410px between 1000 and 1100px, and three natural-width buttons need 530px — so wrapping was not a rare edge, Directions fell to a second line at every desktop width. minmax(0, 1fr) is what keeps the row inside the panel; with max-content columns it overflows and scrolls the page sideways instead. The narrow padding buys the room the columns need. Implicit columns rather than repeat(3, …) because each button only appears if the setting behind it is filled in — a shop with no map URL has two buttons, and a fixed three-column track would leave a hole beside them. */ .instore-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 15px; } .instore-actions .btn { padding: 12px 10px; } .explainer { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin: 24px 0; } .explainer h3 { font-size: 15px; margin-bottom: 4px; } .explainer > p { font-size: 13px; color: var(--text-light); margin-bottom: 16px; } .explainer-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; } .explainer-step { text-align: center; } .explainer-step .num { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; margin: 0 auto 9px; font-weight: 700; font-size: 14px; } .explainer-step strong { display: block; font-size: 13px; margin-bottom: 3px; } .explainer-step small { font-size: 12px; color: var(--text-light); line-height: 1.55; } .explainer-note { margin-top: 16px; padding: 11px 14px; background: var(--success-bg); color: var(--success); border-radius: var(--radius-sm); font-size: 12.5px; } .spec-table { width: 100%; border-collapse: collapse; } .spec-table td { padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .spec-table td:first-child { color: var(--text-light); width: 40%; } .spec-table td:last-child { font-weight: 500; } .spec-table tr:last-child td { border-bottom: none; } .pd-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; } .pd-tab { padding: 11px 18px; font-size: 14px; font-weight: 600; color: var(--text-light); border-bottom: 2px solid transparent; margin-bottom: -1px; } .pd-tab.on { color: var(--primary); border-bottom-color: var(--primary); } .pd-panel { display: none; } .pd-panel.on { display: block; } /* --- Plans (customer) -------------------------------------------------- */ .plan-list { display: grid; gap: 18px; } .plan-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all .2s; } .plan-card:hover { box-shadow: var(--shadow); } .plan-card.is-late { border-color: rgba(185,28,28,.35); } .plan-card-top { display: flex; gap: 16px; padding: 18px; align-items: flex-start; } .plan-card-img { width: 74px; height: 74px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--border); background: var(--bg); flex-shrink: 0; } .plan-card-info { flex: 1; min-width: 0; } .plan-card-info h3 { font-size: 16px; font-weight: 600; margin-bottom: 3px; } .plan-card-code { font-size: 12px; color: var(--text-lighter); } /* A grid rather than a flex row: with up to six figures they stay aligned in columns when they wrap instead of straggling. */ .plan-card-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px 18px; margin-top: 14px; } .plan-card-figs div span { display: block; font-size: 11px; color: var(--text-lighter); } .plan-card-figs div strong { font-size: 15px; font-weight: 600; } .bar { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; margin-top: 14px; } .bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 999px; transition: width .5s; } .bar-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--text-light); } .plan-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; background: var(--bg); border-top: 1px solid var(--border); flex-wrap: wrap; } .plan-next { font-size: 13px; color: var(--text-light); } .plan-next strong { color: var(--text); font-weight: 600; } /* The next-payment card is pinned at the top of the plan page (spec §4.4). */ .next-due-card { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border-radius: var(--radius-lg); padding: 26px; margin-bottom: 22px; } .next-due-card.is-late { background: linear-gradient(135deg, #b91c1c, #dc2626); } .next-due-label { font-size: 12.5px; opacity: .88; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .next-due-amount { font-size: 40px; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 3px; } .next-due-meta { font-size: 13.5px; opacity: .92; } .next-due-break { display: flex; gap: 20px; margin: 16px 0; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); flex-wrap: wrap; } .next-due-break div span { display: block; font-size: 11px; opacity: .82; } .next-due-break div strong { font-size: 15px; } /* --- Schedule table ---------------------------------------------------- */ .schedule { width: 100%; border-collapse: collapse; } .schedule th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-lighter); padding: 11px 12px; border-bottom: 2px solid var(--border); font-weight: 700; } .schedule td { padding: 13px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; } .schedule tr:last-child td { border-bottom: none; } .schedule .r { text-align: right; } .schedule tr.paid { background: rgba(21,128,61,.035); } .schedule tr.late { background: rgba(185,28,28,.04); } .sched-seq { width: 36px; height: 36px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--text-light); } tr.paid .sched-seq { background: var(--success-bg); color: var(--success); } tr.late .sched-seq { background: var(--danger-bg); color: var(--danger); } .pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; } .pill-paid { background: var(--success-bg); color: var(--success); } .pill-due { background: var(--warning-bg); color: var(--warning); } .pill-overdue { background: var(--danger-bg); color: var(--danger); } .pill-upcoming { background: var(--bg); color: var(--text-lighter); } /* --- Cards / panels ---------------------------------------------------- */ .panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; } .panel-head { padding: 17px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .panel-head h2 { font-size: 15.5px; font-weight: 600; } .panel-head .panel-link { margin-left: auto; font-size: 13px; color: var(--primary); font-weight: 500; } .panel-body { padding: 20px; } .panel-body.tight { padding: 0; } .page-title { margin: 28px 0 22px; } .page-title h1 { font-size: 27px; font-weight: 700; letter-spacing: -.02em; } .page-title p { color: var(--text-light); font-size: 14px; margin-top: 5px; } /* --- Long-form documents (about / terms / privacy) ---------------------- These pages are the only place the site renders admin-authored HTML, so the rules are scoped to .page-doc and target bare tags — the editor produces

/

/