/* ========================================================================== Young Age Clothing — stylesheet Hand-written CSS, no framework. Mobile-first: base rules target a 320px phone and larger screens are additive. THEMES Light is the default. Dark is opt-in via [data-theme="dark"] on , set by a tiny inline script in before first paint so the page never flashes the wrong theme. With JavaScript off the site stays light. The one rule to remember when editing: brand volt (#c8fa00) may be used as a BACKGROUND in both themes (black text on it scores 16.3:1), but it must NEVER be used as text colour in light mode — on white it measures 1.14:1, which is invisible. Use --accent-text for any accent *text*; it resolves to volt in dark and to a darkened brand green (5.3:1) in light. ========================================================================== */ :root { /* Brand constants — identical in both themes */ --volt: #c8fa00; --amber: #faaa1e; --red: #dc2814; /* ---- Light theme (DEFAULT) ---- */ color-scheme: light; --bg: #f7f7f4; --bg-2: #f0f0ec; --surface: #ffffff; --surface-2: #f0f0ec; --line: #e2e2dc; --heading: #0d0f10; --text: #16181a; /* 16.6:1 */ --muted: #55595e; /* 6.6:1 */ --faint: #666b70; /* 5.0:1 */ /* Darkened brand green — 5.3:1 on the light background. Volt itself is only 1.14:1 on white, so it must never be used as text here. */ --accent-text: #5c6f00; --input-bg: #ffffff; /* Deliberately strong: a form control's boundary needs real contrast. */ --input-border: #767b80; --hero-glow: rgba(200, 250, 0, 0.3); --focus-ring: #5c6f00; /* Bloom is dialled back: a wide glow over white reads as a washed-out smudge rather than neon. */ --neon-glow: 0 0 6px rgba(150, 190, 0, 0.55), 0 0 14px rgba(150, 190, 0, 0.22); --neon-glow-soft: 0 0 12px rgba(150, 190, 0, 0.18); /* The logo exists as two JPEGs — one on black, one on white. Each theme uses the matching one, and the blend mode erases that background so no square seam shows against the page. Neither file has real transparency. */ --logo-img: url("/images/logo-mark-light.jpg"); --logo-blend: multiply; /* drops pure white */ /* Frosted header opacity. Light stays nearly opaque because content ghosting behind the glass reads as a grey smudge; dark can afford to be see-through because what shows through is also dark. */ --header-alpha: 98%; /* Fluid type — scales between a 320px phone and a 1280px monitor. */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-sm: clamp(0.8125rem, 0.78rem + 0.17vw, 0.9375rem); --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --fs-xl: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); --fs-2xl: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem); --fs-3xl: clamp(1.625rem, 1.35rem + 1.4vw, 2.5rem); --fs-4xl: clamp(2rem, 1.55rem + 2.25vw, 3.5rem); --fs-5xl: clamp(2.375rem, 1.6rem + 3.9vw, 4.75rem); --gutter: 1.25rem; --maxw: 78rem; --radius: 14px; --tap: 44px; /* minimum touch target */ } /* ---- Dark theme (opt-in) ---- Applied only when the visitor has chosen it and the inline script has written data-theme="dark". With JavaScript off the site stays light, which is the intended default. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #08090a; --bg-2: #0e1011; --surface: #15181a; --surface-2: #1d2124; --line: #2a2f33; --heading: #ffffff; --text: #e8eaec; /* 16.5:1 */ --muted: #9ba1a6; /* 7.6:1 */ --faint: #767d82; /* 4.8:1 */ /* Volt is safe as text on a dark background — 16.3:1. */ --accent-text: var(--volt); --input-bg: #08090a; --input-border: #2a2f33; --hero-glow: rgba(200, 250, 0, 0.15); --focus-ring: var(--volt); --neon-glow: 0 0 7px rgba(200, 250, 0, 0.85), 0 0 20px rgba(200, 250, 0, 0.4); --neon-glow-soft: 0 0 14px rgba(200, 250, 0, 0.28); --logo-img: url("/images/logo-mark.jpg"); --logo-blend: screen; /* drops pure black */ --header-alpha: 92%; } *, *::before, *::after { box-sizing: border-box; } html { overflow-x: hidden; /* a wide child must never scroll the whole page */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif; font-size: var(--fs-base); line-height: 1.65; -webkit-font-smoothing: antialiased; } /* Hindi runs longer and sits differently on the line than Latin. */ html[lang="hi"] body { line-height: 1.8; } img, svg, picture, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; color: var(--heading); } html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3 { line-height: 1.3; letter-spacing: 0; } p { margin: 0; text-wrap: pretty; } /* Long unbroken strings (emails, registration numbers) wrap rather than widening the page. */ p, li, dd, dt, h1, h2, h3, address { overflow-wrap: break-word; } a { color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* --- layout helpers ----------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: 3.5rem; } /* Offsets in-page jumps so a heading is not hidden behind the sticky header. */ section[id] { scroll-margin-top: 76px; } .eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 0.75rem; } .section-head { max-width: 44rem; margin-bottom: 2.5rem; } /* Glowing neon rule above every section title. The glow deliberately sits on this bar and not on the heading text: a bloom behind letterforms tints them green and, on the light theme, smears into an unreadable haze. A lit bar next to clean type reads as neon signage and keeps the heading crisp in both themes. */ .section-head::before { content: ""; display: block; width: 54px; height: 3px; margin-bottom: 1.15rem; border-radius: 2px; background: var(--volt); box-shadow: var(--neon-glow); } .section-head h2 { font-size: var(--fs-3xl); } /* :not(.eyebrow) matters — a bare `.section-head p` is more specific than `.eyebrow` and would silently override the eyebrow's accent colour. */ .section-head p:not(.eyebrow) { margin-top: 0.875rem; color: var(--muted); font-size: var(--fs-lg); } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip { position: absolute; left: -9999px; } .skip:focus { left: var(--gutter); top: 0.75rem; z-index: 100; background: var(--volt); color: #08090a; padding: 0.75rem 1.25rem; border-radius: 8px; font-weight: 700; } /* --- buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--tap); padding: 0.75rem 1.5rem; border: 1px solid transparent; border-radius: 10px; font: inherit; font-weight: 700; font-size: var(--fs-sm); text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; } /* Volt background with near-black text: 16.3:1, so this is the one place the brand colour works identically in both themes. */ .btn-volt { background: var(--volt); color: #08090a; } .btn-volt:hover { background: #d8ff3a; } .btn-ghost { background: transparent; border-color: var(--line); color: var(--heading); } .btn-ghost:hover { border-color: var(--accent-text); color: var(--accent-text); } .btn-wa { background: #25d366; color: #04301c; } .btn-wa:hover { background: #3ae07a; } .btn-lg { padding: 1rem 1.75rem; font-size: var(--fs-base); } .btn-block { width: 100%; } /* --- offer bar ---------------------------------------------------------- */ /* Deliberately NOT sticky. It sits above the header and scrolls away, so once the user moves down the page only the menu stays pinned — the offer is a landing-moment message, not a permanent fixture. Neon background with near-black text measures 16.3:1, so it is the one place the brand colour can be used at full strength in both themes. */ .announce { background: var(--volt); color: #08090a; } .announce-inner { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; /* Narrower than the page container so the arrows sit beside the message rather than stranded at the far edges of a wide screen. */ max-width: 46rem; } .announce-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; } .announce-track { display: flex; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .announce-item { flex: 0 0 100%; min-width: 0; text-align: center; font-size: var(--fs-sm); font-weight: 700; padding-block: 0.6rem; /* Wraps rather than truncating. An ellipsis kept the bar to one line but hid the end of the offer on a narrow phone, which defeats the point of it. */ line-height: 1.35; text-wrap: balance; } /* The button fills a full 44px touch target while the visible circle stays 28px, drawn by ::before. Sizing the button itself to 28px met the design but failed the minimum tap size — this keeps both. */ .announce-nav { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; background: none; color: #08090a; cursor: pointer; } .announce-nav::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: rgba(8, 9, 10, 0.14); transition: background-color 0.15s; } .announce-nav:hover::before { background: rgba(8, 9, 10, 0.28); } .announce-nav svg { position: relative; width: 15px; height: 15px; } /* --- header ------------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 50; /* Opaque fallback first — a browser without color-mix() would otherwise get a transparent header and unreadable nav. */ background: var(--bg); background: color-mix(in srgb, var(--bg) var(--header-alpha), transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 64px; } /* Text wordmark rather than the logo JPEG: razor-sharp at any size, no extra image request, and no JPEG artefacts around white letterforms. The real logo appears in the hero, where it has room to be seen properly. */ .logo { display: flex; flex-direction: column; justify-content: center; min-height: var(--tap); text-decoration: none; flex-shrink: 0; line-height: 1; } .logo-type { font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.6rem); font-weight: 800; letter-spacing: -0.03em; color: var(--heading); } /* "Age" sits in a solid neon box, mirroring the real glitch logo, where YOUNG is neon and Age is dark text inside a neon block. This is what lets the exact brand neon (#c8fa00) appear in BOTH themes. As a background against near-black text it measures 16.3:1; as text on the light page it would be 1.14:1 and effectively invisible. Same colour, legible everywhere, and truer to the logo than flat coloured text was. */ .logo-type span { background: var(--volt); color: #08090a; padding: 0 0.18em 0.05em; border-radius: 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: var(--neon-glow-soft); } .logo-sub { margin-top: 3px; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--faint); } .nav-desktop { display: none; } .header-actions { display: flex; align-items: center; gap: 0.375rem; } /* Theme + language controls share the same pill styling. */ .lang, .theme-toggle { border: 1px solid var(--line); border-radius: 8px; background: transparent; } .lang { display: flex; overflow: hidden; } .lang a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: 42px; padding: 0 0.6rem; font-size: var(--fs-xs); font-weight: 700; text-decoration: none; color: var(--muted); } .lang a[aria-current="true"] { background: var(--volt); color: #08090a; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); padding: 0; color: var(--muted); cursor: pointer; } .theme-toggle:hover { color: var(--accent-text); border-color: var(--accent-text); } .theme-toggle svg { width: 19px; height: 19px; } /* Shows the theme currently in use: sun on light, moon on dark. */ .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } /* Mobile menu — a native
, so it opens and closes with no JavaScript. */ .mobile-nav { position: static; } .burger { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); margin-right: -0.5rem; color: var(--heading); cursor: pointer; list-style: none; /* hides the default disclosure triangle */ } .burger::-webkit-details-marker { display: none; } .burger svg { width: 26px; height: 26px; } .mobile-nav[open] .burger { color: var(--accent-text); } /* Drops below the sticky header, full width. */ .menu { position: absolute; left: 0; right: 0; top: 100%; border-top: 1px solid var(--line); background: var(--bg-2); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); max-height: calc(100vh - 64px); overflow-y: auto; } .menu ul { padding: 0.5rem var(--gutter) 1rem; } .menu a { display: flex; align-items: center; min-height: 48px; padding-inline: 0.25rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); } .menu li:last-child a { border-bottom: 0; } /* --- hero --------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(120% 90% at 85% 0%, var(--hero-glow), transparent 60%), var(--bg); } /* Centred stack: logo, then eyebrow, heading, description, buttons. Identical structure at every width — the phone layout IS the layout, it just gets more room. Nothing reflows into a different arrangement, so there is only one design to keep right. */ .hero-inner { padding-block: 2.75rem 3.25rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; } .hero-copy { min-width: 0; width: 100%; } /* Aspect ratio matches the generated crop (1150x820). */ .hero-mark { flex: 0 0 auto; width: min(300px, 72%); aspect-ratio: 1150 / 820; background-image: var(--logo-img); background-size: contain; background-repeat: no-repeat; background-position: center; mix-blend-mode: var(--logo-blend); } .hero h1 { font-size: var(--fs-5xl); max-width: 20ch; margin-inline: auto; } .hero-sub { margin: 1.25rem auto 0; max-width: 46ch; font-size: var(--fs-lg); color: var(--muted); } /* Grid, not flex, so both buttons are always EXACTLY the same width — sizing to content made "View Our Range" wider than "Send Enquiry". Stacked and full width on a phone, two equal columns from 480px, and the whole pair is capped and centred so neither button is ever clipped. */ .hero-actions { display: grid; gap: 0.75rem; width: 100%; max-width: 30rem; margin: 1.75rem auto 0; } /* --- stats -------------------------------------------------------------- */ /* Key numbers. Deliberately NOT in the hero: the first screen should carry the pitch alone, so these sit under the About copy instead. */ .stats-block { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); } .statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; margin: 0; } .statgrid dt { font-size: var(--fs-2xl); font-weight: 800; color: var(--accent-text); letter-spacing: -0.02em; line-height: 1.1; } .statgrid dd { margin: 0.25rem 0 0; font-size: var(--fs-sm); color: var(--muted); } /* ========================================================================== Travelling neon beam A light that runs continuously around the rectangle of every panel. How it works: a conic-gradient containing one bright arc is rotated by animating the --neon-angle custom property, then masked so only a 2px ring at the element's edge is painted. The bright arc therefore sweeps around the perimeter. The mask leaves the interior fully transparent, so this sits above the content with pointer-events:none and never affects layout or clicks. @property is required to animate an angle — without it the browser cannot interpolate the value and the beam would jump rather than travel. Supported in Chrome/Edge 85+, Safari 16.4+, Firefox 128+; older browsers simply show the static border underneath, which is a clean fallback. ========================================================================== */ @property --neon-angle { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes neon-travel { to { --neon-angle: 360deg; } } .card, .brand-card, .contact-panel { position: relative; } .card::before, .brand-card::before, .contact-panel::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 2px; /* ring thickness */ background: conic-gradient( from var(--neon-angle), transparent 0deg 232deg, color-mix(in srgb, var(--volt) 55%, transparent) 288deg, var(--volt) 330deg, color-mix(in srgb, var(--volt) 55%, transparent) 348deg, transparent 360deg ); /* Punches out the middle, leaving only the ring. */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: neon-travel 5s linear infinite; pointer-events: none; } /* Offset each panel so the beams are not locked in step, which would read as a single flashing block rather than independent lights. */ .grid > *:nth-child(2)::before { animation-delay: -0.8s; } .grid > *:nth-child(3)::before { animation-delay: -1.6s; } .grid > *:nth-child(4)::before { animation-delay: -2.4s; } .grid > *:nth-child(5)::before { animation-delay: -3.2s; } .grid > *:nth-child(6)::before { animation-delay: -4s; } .contact-split > *:nth-child(2)::before { animation-delay: -2.5s; } /* A moving light is exactly what someone enabling this setting wants stopped. They still get a static neon outline, so nothing looks broken or bare. */ @media (prefers-reduced-motion: reduce) { .card::before, .brand-card::before, .contact-panel::before { animation: none; background: var(--volt); opacity: 0.3; } } /* --- cards / range ------------------------------------------------------ */ .grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; transition: border-color 0.18s, box-shadow 0.18s; } /* Identical hover on every tile. Previously the non-featured cards faded to a grey border while the featured ones lit up, which read as two different effects on one grid. */ .card:hover, .brand-card:hover { border-color: var(--volt); box-shadow: var(--neon-glow); } /* Flagship items get a lit neon border, so the eye lands on them first. */ .card-featured { border-color: var(--volt); background: var(--surface); background: linear-gradient( 180deg, color-mix(in srgb, var(--volt) 7%, transparent), transparent 45% ), var(--surface); box-shadow: var(--neon-glow-soft); } .card-tag { display: inline-block; align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.6rem; } .card h3 { font-size: var(--fs-xl); } .card p { margin-top: 0.6rem; color: var(--muted); font-size: var(--fs-sm); } .card dl { display: grid; gap: 0.4rem; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); } .card dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; } .card dt { color: var(--faint); } .card dd { margin: 0; font-weight: 600; color: var(--text); text-align: right; } .card-cta { margin-top: 1.25rem; } .note { margin-top: 1.5rem; padding: 0.875rem 1.125rem; border-left: 3px solid var(--accent-text); background: var(--surface); border-radius: 0 8px 8px 0; font-size: var(--fs-sm); color: var(--muted); } /* --- brands ------------------------------------------------------------- */ .brands { background: var(--bg-2); border-block: 1px solid var(--line); } .brand-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; text-align: center; transition: border-color 0.18s, box-shadow 0.18s; } .brand-logo { min-height: 96px; display: grid; place-items: center; margin-bottom: 1rem; } .brand-mark { display: block; width: 150px; aspect-ratio: 1150 / 820; background-image: var(--logo-img); background-size: contain; background-repeat: no-repeat; background-position: center; mix-blend-mode: var(--logo-blend); } .brand-logo span { font-size: var(--fs-2xl); font-weight: 800; color: var(--accent-text); letter-spacing: -0.02em; } .brand-card h3 { font-size: var(--fs-lg); } .brand-card p { margin-top: 0.5rem; font-size: var(--fs-sm); color: var(--muted); } /* --- why us ------------------------------------------------------------- */ .why-item { padding: 1.375rem 0; border-top: 1px solid var(--line); } .why-item h3 { font-size: var(--fs-lg); display: flex; gap: 0.6rem; align-items: baseline; } .why-item h3::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-text); transform: translateY(-2px); } .why-item p { margin-top: 0.4rem; color: var(--muted); font-size: var(--fs-sm); padding-left: 1.4rem; } /* --- about -------------------------------------------------------------- */ .about { background: var(--bg-2); border-block: 1px solid var(--line); } .prose > p + p { margin-top: 1rem; } .prose p { color: var(--muted); font-size: var(--fs-lg); } /* --- contact + form ---------------------------------------------------- */ /* Grid from the start. Previously this only became a grid at >=900px, so on a phone the contact-details panel and the enquiry form were two plain blocks with nothing between them and their edges collided. */ /* Grid from the start. Previously this only became a grid at >=900px, so on a phone the contact-details panel and the enquiry form were two plain blocks with nothing between them and their edges collided. minmax(0, 1fr) rather than 1fr: a grid item defaults to min-width:auto, which refuses to shrink below its content's min-content width. The long email address then forced the panel wider than a 320px screen. */ .contact-split { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); } .contact-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; } /* Gives each panel its own label. On a phone the two panels stack, and the form otherwise began abruptly with an input and no heading. */ .panel-title { font-size: var(--fs-lg); margin-bottom: 1.25rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--line); } .contact-list { display: grid; gap: 1.25rem; } .contact-row { display: flex; gap: 0.875rem; min-width: 0; } /* Without this the text column inherits min-width:auto and cannot shrink. */ .contact-row > div { min-width: 0; } .contact-icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--accent-text); } .contact-icon svg { width: 19px; height: 19px; } .contact-row .label { /* Block, so the value always sits on its own line beneath the label. */ display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } .contact-row address { display: block; margin-top: 0.15rem; font-style: normal; font-weight: 600; color: var(--heading); } /* Phone, WhatsApp and email are the main conversion path on a phone, so they get the full 44px target rather than sitting at text height. `anywhere` is required for the email address: it is one long unbroken token and would otherwise widen the whole panel past a 320px viewport. */ .contact-row a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: 0; font-weight: 600; color: var(--heading); text-decoration: none; overflow-wrap: anywhere; } .contact-row a:hover { color: var(--accent-text); } /* Sits under the address; full tap height because it is a real destination. */ .maplink { display: inline-flex; align-items: center; min-height: var(--tap); margin-top: 0.15rem; font-weight: 700; font-size: var(--fs-sm); color: var(--accent-text); text-decoration: none; } .maplink:hover { text-decoration: underline; } .field { margin-bottom: 1.125rem; } .field label { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text); } .field .req { font-size: var(--fs-xs); font-weight: 500; color: var(--accent-text); } .field .opt { font-size: var(--fs-xs); font-weight: 500; color: var(--faint); } /* 16px minimum, or iOS Safari zooms the page when the field is focused. */ .field input, .field select, .field textarea { width: 100%; min-height: var(--tap); padding: 0.7rem 0.875rem; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 10px; color: var(--text); font: inherit; font-size: max(16px, var(--fs-base)); } .field textarea { min-height: 116px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--faint); } /* Only flags a field once it has actually failed — never on an untouched form. */ .field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red); } .field-error { margin-top: 0.4rem; font-size: var(--fs-sm); color: var(--red); min-height: 0; } .field-error:empty { display: none; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--hero-glow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 25%, transparent); } .field-row { display: grid; gap: 0 1rem; grid-template-columns: 1fr; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- final CTA ---------------------------------------------------------- */ /* Volt panel with near-black text — identical and accessible in both themes. */ .cta { background: var(--volt); color: #08090a; text-align: center; } .cta h2 { color: #08090a; font-size: var(--fs-3xl); } .cta p { margin: 0.875rem auto 0; max-width: 44ch; color: rgba(8, 9, 10, 0.78); font-size: var(--fs-lg); } .cta-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; } .cta .btn-dark { background: #08090a; color: var(--volt); } .cta .btn-dark:hover { background: #1b1e20; } .cta .btn-outline-dark { background: transparent; border-color: rgba(8, 9, 10, 0.4); color: #08090a; } .cta .btn-outline-dark:hover { border-color: #08090a; } /* --- footer ------------------------------------------------------------- */ /* The footer stays dark in both themes — it anchors the page and keeps the brand present. Redeclaring the tokens here means every descendant inherits dark-appropriate values without a single override, including volt-as-text, which is safe again on a dark background. */ .footer { --bg: #08090a; --bg-2: #0e1011; --surface: #15181a; --line: #2a2f33; --heading: #ffffff; --text: #e8eaec; --muted: #9ba1a6; --faint: #767d82; --accent-text: var(--volt); background: var(--bg); border-top: 1px solid var(--line); color: var(--text); /* clears the fixed mobile action bar */ padding-bottom: calc(72px + env(safe-area-inset-bottom)); } .footer-grid { display: grid; gap: 2.25rem; padding-block: 2.75rem 1.75rem; } .footer h2 { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.875rem; } .footer p, .footer li, .footer address { font-size: var(--fs-sm); color: var(--muted); font-style: normal; } .footer address { margin-top: 1rem; line-height: 1.6; } /* Company identity, tucked under the brand rather than given its own column. */ .footer-reg { margin-top: 1rem; font-size: var(--fs-xs); color: var(--faint); line-height: 1.7; } /* 44px rows are needed for thumbs, but on a mouse they open big gaps between links and made the footer look full of holes. Touch keeps the target; desktop tightens up below. */ .footer-links a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--muted); text-decoration: none; } .footer a { color: var(--muted); text-decoration: none; } .footer a:hover { color: var(--accent-text); } .footer-legal { display: flex; flex-direction: column; gap: 0.35rem; border-top: 1px solid var(--line); padding-block: 1.25rem; font-size: var(--fs-xs); color: var(--faint); } .footer-legal p { font-size: var(--fs-xs); color: var(--faint); } /* The footer is always dark, so volt is safe here. */ .footer-credit .heart { color: var(--volt); font-size: 1.05em; line-height: 1; } .footer-credit a { color: var(--faint); text-decoration: none; } .footer-credit a:hover { color: var(--accent-text); } /* --- sticky mobile action bar ------------------------------------------ */ .actionbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bg-2); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .actionbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-height: 60px; font-size: var(--fs-xs); font-weight: 700; text-decoration: none; color: var(--text); border-right: 1px solid var(--line); } .actionbar a:last-child { border-right: 0; background: var(--volt); color: #08090a; } .actionbar svg { width: 19px; height: 19px; } .actionbar .wa { color: #1da851; } /* --- thanks page -------------------------------------------------------- */ .thanks { min-height: 72vh; display: grid; place-items: center; text-align: center; padding-block: 4rem; } .thanks .tick { width: 66px; height: 66px; margin: 0 auto 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--volt); color: #08090a; } .thanks .tick svg { width: 34px; height: 34px; } .thanks h1 { font-size: var(--fs-3xl); } .thanks p { margin: 1rem auto 0; max-width: 42ch; color: var(--muted); font-size: var(--fs-lg); } .thanks .thanks-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; } /* ========================================================================== Breakpoints — everything above is the phone layout ========================================================================== */ /* Smallest phones only (320–359px). The header carries the wordmark plus three controls, and the neon "Age" box makes it ~7px wider; without this the burger is pushed past the viewport edge and the whole page scrolls sideways. Tightening the gap and the wordmark a touch buys back the space. Touch targets stay 44px tall — only horizontal padding gives way. */ /* Small phones: trim the hero's vertical rhythm so the pitch and both buttons stay as close to the first screen as the content allows. The sticky bottom bar means Call / WhatsApp / Enquire are reachable regardless. */ @media (max-width: 430px) { .hero-inner { padding-block: 1.5rem 2rem; gap: 0.9rem; } .hero-mark { width: min(196px, 55%); } .hero-sub { margin-top: 0.75rem; } .hero-actions { margin-top: 1.1rem; } .announce-item { padding-block: 0.5rem; } } @media (max-width: 359px) { .header-inner { gap: 0.25rem; } .logo-type { font-size: 1.15rem; } .logo-sub { letter-spacing: 0.18em; } .lang a { min-width: 36px; padding-inline: 0.35rem; } .burger { margin-right: -0.65rem; } } @media (min-width: 480px) { .cta-actions, .thanks .thanks-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; } .hero-actions { grid-template-columns: 1fr 1fr; } .field-row { grid-template-columns: 1fr 1fr; } } @media (min-width: 640px) { :root { --gutter: 1.75rem; } .announce-item { font-size: var(--fs-base); } .announce-nav::before { inset: 6px; } .section { padding-block: 4.5rem; } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .statgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { :root { --gutter: 2rem; } .header-inner { min-height: 76px; } /* Inline nav appears; hamburger and the sticky bottom bar retire. */ .mobile-nav, .actionbar { display: none; } .footer { padding-bottom: 0; } .nav-desktop { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; margin-right: 1rem; } .nav-desktop a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 0.8rem; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-decoration: none; border-radius: 8px; } .nav-desktop a:hover { color: var(--heading); } .section { padding-block: 5.5rem; } /* Tuned so the logo, heading, description AND both buttons clear the fold on a 1280x800 laptop — the commonest desktop size. */ .hero-inner { padding-block: 3rem 4rem; gap: 1.5rem; } .hero-mark { width: 260px; } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3.5rem; align-items: start; } .split .section-head { margin-bottom: 0; position: sticky; top: 100px; } .why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } .contact-panel { padding: 2rem; } .contact-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem; align-items: start; } .footer-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 3rem; padding-block: 3.5rem 2rem; } /* No thumbs here, so drop the 44px rows that were leaving gaps. */ .footer-links a { min-height: 0; padding-block: 0.28rem; } .footer-legal { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1.5rem; } } @media (min-width: 1200px) { .hero h1 { max-width: 22ch; } }