/* ========================================================================== Kinetix EV Charging — Global stylesheet Design tokens → base → layout → components → pages → responsive ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ :root { /* ---- Dark "energy tech" surfaces -------------------------------------- */ --navy-950: #04080e; /* page-dark, deepest */ --navy-900: #071019; --navy-850: #0a1622; --navy-800: #0e1c2a; --navy-700: #16283a; /* ---- Accents ---------------------------------------------------------- */ /* Electric green is the primary action colour — used for CTAs, numerals and the glow on hover. Cyan is the secondary technical accent. */ --green-700: #00b463; --green-600: #00c96e; --green-500: #00e27a; --green-400: #4dffa4; --green-glow: 0 0 0 1px rgba(0, 226, 122, .35), 0 8px 30px -6px rgba(0, 226, 122, .45); /* The accent has two jobs and they need different greens. `--accent` is the green used as TEXT or a hairline sitting on the page background. On the dark theme the brightest green is legible and on-brand; on white it drops to about 1.4:1 and vanishes, so the light theme swaps in a much deeper one. `--accent-hover` is its pressed/hover partner. Fills are deliberately NOT part of this: a button painted --green-500 keeps its dark label and stays legible on either background, so the fill greens are identical in both themes. */ --accent: var(--green-400); --accent-hover: var(--green-500); /* The same accent as it must appear on a permanently-dark surface — the header, hero, page-head, navy bands and footer all stay dark in both themes, so their green must stay bright in both. Anything painting inside one of those bands reads these instead of --accent. */ --d-accent: #4dffa4; --d-accent-hover: #00e27a; /* The pale pill behind .eyebrow: a green wash and its edge. */ --accent-tint: rgba(0, 226, 122, .1); --accent-tint-line: rgba(0, 226, 122, .3); --cyan-500: #38d9ff; /* Kept for the ::selection highlight, which is the one place a light green fill still reads better than a translucent one. */ --green-100: #d6fbe7; /* ---- Neutrals (base surfaces) ----------------------------------------- */ /* The site is one dark theme. These base tokens are what nearly every component reads, so the page inverts here rather than rule by rule. `--ink` is the strongest text, `--muted` the weakest. */ --ink: rgba(255, 255, 255, .96); --body: rgba(255, 255, 255, .70); --muted: rgba(255, 255, 255, .52); --line: rgba(255, 255, 255, .12); --line-soft:rgba(255, 255, 255, .075); --bg: #04080e; --bg-soft: #0a1622; /* lifted band — one step up from the page */ --bg-mute: #0e1c2a; /* media wells and zebra rows */ --tint: rgba(255, 255, 255, .035); /* card fill over either band */ /* Form inputs need an opaque fill, because Chrome's autofill repaint below can only be done with a solid colour. */ --field: rgba(255, 255, 255, .05); --field-autofill: #16283a; /* The opaque twin of --field, for carries a long country list, so that column had a ~290px floor it could not shrink below: on a 320px phone the track overran the container and the whole page scrolled sideways. Let the items shrink to their share of the grid instead — the select clips its own label, which is the lesser cost. */ .two-col > * { min-width: 0; } /* -------------------------------------------------------------------------- 15. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1080px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; } .pdp { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats-band .stat + .stat { border-inline-start: 0; } .stats-band .stat { border-top: 1px solid var(--d-line-soft); padding: 16px 0; } .stats-band .stat:nth-child(-n+2) { border-top: 0; } } @media (max-width: 860px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .two-col { grid-template-columns: 1fr; } .hero__inner { max-width: none; } } @media (max-width: 640px) { :root { --gutter: 18px; --header-h: 66px; } /* The language and theme buttons each carry a word. Two words plus the wordmark and the hamburger already overflow a 390px bar, so the theme one drops to its icon. The light-theme selector is repeated because it is the rule that would otherwise win on specificity. */ .theme-toggle__to-light, .theme-toggle__to-dark, html[data-theme="light"] .theme-toggle__to-dark { display: none; } .theme-toggle { padding: 8px 11px; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; } .stats-band .stat:nth-child(-n+2) { border-top: 1px solid var(--d-line-soft); } .stats-band .stat:first-child { border-top: 0; } .footer__grid { grid-template-columns: 1fr; gap: 30px; } .btn-row .btn { width: 100%; } .spec-table th, .spec-table td { padding: 11px 14px; font-size: .88rem; } .spec-table th { width: 46%; } /* Team cards go side-by-side on a phone. Stacked at full width each card is ~780px tall, so three of them is 2300px of scrolling for three names — and a QR is unscannable on the handset already holding it, so the button, not the code, is what has to stay prominent. */ .team-card { flex-direction: row; } /* `aspect-ratio` has to go: stretched to the row's height it would resolve the width back out of the ratio (~216px) and blow the card past the viewport. Letting it stretch and cropping with object-fit keeps the width honest. */ .team-card__photo { flex: 0 0 118px; width: 118px; aspect-ratio: auto; } .team-card__body { align-items: flex-start; text-align: start; padding: 16px 16px 18px; gap: 6px; } .team-card__name { font-size: 1.05rem; } .team-card__qr { width: 100px; height: 100px; margin-top: 2px; } .team-card__qr-cap { font-size: .72rem; } /* `min-width: auto` on a flex item resolves to its min-content size, so the body would refuse to shrink below its widest child and overrun the card — which clips, so the damage only shows up as cut-off text. Let it shrink to its share of the row, and let the CTA's label wrap onto a second line instead of holding a 183px floor the phone cannot pay. */ .team-card__body { min-width: 0; } .team-card__body .btn { width: 100%; justify-content: center; margin-top: 8px; white-space: normal; } } /* Smallest phones. Three controls now share the bar with the wordmark, and at this size the flex gaps alone decide whether the page scrolls sideways. Every element gives up a little air rather than any of them being dropped — the wordmark stays, the language switch keeps its label, and the theme switch stays on screen. Between them these shave ~30px off the bar. */ @media (max-width: 380px) { .header__inner { gap: 10px; } .header__actions { gap: 5px; } .brand { gap: 8px; } .brand span { font-size: 1.26rem; } .lang-toggle { padding: 8px 9px; gap: 6px; } .theme-toggle { padding: 8px 8px; } /* The team row's fixed photo column is 118px of a 282px card, which leaves the body too narrow for the phone number on one line. */ .team-card__photo { flex: 0 0 96px; width: 96px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } @media print { .header, .footer, .wa-float, .admin-bar { display: none; } } /* ========================================================================== Right to left (Arabic) -------------------------------------------------------------------------- Most of this file needs nothing here. Flex rows, grid columns, `justify-content` and `text-align: start/end` all mirror themselves once is set, and the declarations that did not follow on their own were converted to logical properties where they appear. What is left are the cases CSS gives no logical keyword for. They cannot be stated once and mirrored, so they are restated here, together, rather than scattered as afterthoughts through the file above. ========================================================================== */ /* Arabic is a cursive script: letter-spacing prises apart the joins that carry the word, so a rule that reads as "refined" in Latin reads as "broken" here. Every letter-spacing in this file was chosen for a Latin face, so the whole group is cancelled at once rather than rule by rule. `!important` is load-bearing, not laziness: it also has to beat the inline -.04em the hero eyebrow ships with, and the rules being cancelled otherwise tie with this selector on specificity, leaving source order to decide. */ [dir="rtl"] * { letter-spacing: normal !important; } /* The hero veil exists to keep the headline legible over the photograph. It is opaque on the left and thins to the right; with the copy moved to the right it would sit on the brightest part of the image. 100deg mirrors to 260deg (a horizontal flip maps an angle t to 360-t). Scoped to html so it can be told apart from the light-theme value below, which is more specific and so wins wherever both match. */ html[dir="rtl"] { --hero-veil: linear-gradient(260deg, rgba(4, 8, 14, .97) 0%, rgba(4, 8, 14, .9) 34%, rgba(4, 8, 14, .62) 62%, rgba(4, 8, 14, .34) 100%); } html[dir="rtl"][data-theme="light"] { --hero-veil: linear-gradient(260deg, rgba(246, 249, 251, .97) 0%, rgba(246, 249, 251, .93) 34%, rgba(246, 249, 251, .72) 62%, rgba(246, 249, 251, .42) 100%); } /* Corner glow: `at 12% 0%` and `at 8% 0%` have no logical form, so the stop is mirrored by hand. The second layer of each is only a slight diagonal over two near-identical navies, but it is flipped too so the pair stays in step. */ [dir="rtl"] .section--navy { background: radial-gradient(120% 90% at 88% 0%, rgba(0, 226, 122, .07) 0%, transparent 55%), linear-gradient(195deg, var(--navy-900) 0%, var(--navy-950) 100%); } /* Restated in full rather than partly, for the reason given at the .pagehead rule: a shorthand background cannot be overridden one layer at a time, so the photo has to be named again here. The scrim flips to 255deg (105 mirrored) so it is still the copy's side that stays opaque; the photograph's own position is `center`, which needs no mirroring. */ [dir="rtl"] .pagehead { background: radial-gradient(90% 120% at 92% 0%, rgba(0, 226, 122, .1) 0%, transparent 58%), linear-gradient(255deg, rgba(4, 8, 14, .94) 12%, rgba(4, 8, 14, .78) 44%, rgba(4, 8, 14, .42) 100%), url("../img/pagehead.jpg") center 42% / cover no-repeat, linear-gradient(200deg, var(--navy-900) 0%, var(--navy-950) 100%); } /* The band overrides the surface `section--navy` gives it, and the RTL navy rule just above outranks the band's own — so the override is re-applied here, after it. Nothing about the value changes: its scrim runs vertically, so unlike .pagehead there is no direction in it to flip. */ [dir="rtl"] .range-band { background: var(--band-surface); } /* transform-origin has no logical equivalent, so the green rule has to be told which edge to grow from: inline-start, which is the right-hand edge in RTL. */ [dir="rtl"] .app-card::before { transform-origin: right; } /* A background-image cannot be positioned logically either - `right 14px` is the select caret, which belongs on the inline-end edge. Its matching `padding-inline-end: 42px` above already mirrors; only the caret needs this. */ html[dir="rtl"] .field select { background-position: left 14px center; } /* Bidi: an Arabic paragraph that embeds a Latin run - an address, a phone number, a model code like BHDC-BH-10B-120KW - can have that run's punctuation reordered by the bidi algorithm. Isolating the element and pinning it to LTR keeps such values reading left to right, as they are written everywhere else on the site. */ [dir="rtl"] .footer__contact a, [dir="rtl"] .product-card__model, [dir="rtl"] .pdp__model, [dir="rtl"] a[href^="mailto:"] { unicode-bidi: isolate; direction: ltr; } /* Directional icons cannot mirror themselves. The arrow is drawn pointing right for "forward"; in RTL forward is to the left. The same rule serves the back arrow, which is drawn pointing left: flipping it puts "back" on the right, which is where it belongs in RTL. */ [dir="rtl"] .icon-arrow { transform: scaleX(-1); } /* The language caret is two borders rotated 45deg, so mirroring it means swapping which borders are drawn and negating the angle - neither has a logical keyword. The list itself already hangs off `inset-inline-end`, which mirrors on its own; only the caret needs telling. */ [dir="rtl"] .lang-menu__summary::after { border-right: 0; border-left: 1.6px solid currentColor; transform: rotate(-45deg) translate(1px, -1px); } [dir="rtl"] .lang-menu[open] .lang-menu__summary::after { transform: rotate(135deg) translate(1px, -1px); }