/* ========================================================================== M/S Alok S Kumar And Company — Chartered Accountants, Rohini, Delhi Single stylesheet. Mobile-first. No external dependencies. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ :root { --navy: #0a1f44; --navy-deep: #0a1630; --gold: #c99a3b; --gold-dark: #a97e2c; --cream: #faf8f4; --surface: #ffffff; --muted: #5b6472; --border: #e7e2d8; --navy-soft: rgba(10, 31, 68, 0.06); --gold-soft: rgba(201, 154, 59, 0.12); --container: 1140px; --radius: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(10, 22, 48, 0.06); --shadow: 0 6px 20px rgba(10, 22, 48, 0.08); --shadow-lg: 0 18px 44px rgba(10, 22, 48, 0.14); --font-body: "Segoe UI", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif; --font-head: Georgia, "Times New Roman", "Segoe UI", serif; --header-h: 74px; /* Minimum comfortable touch target (WCAG 2.5.8 / platform guidance). */ --tap: 44px; /* Height of the fixed action bar shown at the bottom on phones. */ --fab-h: 60px; /* Notch / home-indicator insets. These resolve to 0px unless the page opts in with . */ --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); } /* A shorter sticky header on phones — 74px of permanently pinned chrome is too much of a small viewport. Everything keyed off --header-h (scroll padding, sticky offsets, menu height) follows automatically. */ @media (max-width: 899px) { :root { --header-h: 62px; } } /* -------------------------------------------------------------------------- 2. Reset / base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--cream); color: var(--navy); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; /* Long unbreakable strings — email addresses, GSTINs, form names — must wrap rather than push the layout sideways on a 360px screen. */ overflow-wrap: break-word; -webkit-tap-highlight-color: rgba(201, 154, 59, .28); } /* Scroll lock while the mobile menu is open (toggled by main.js). Locking on rather than position-fixing keeps the scroll position intact and leaves the sticky header in place — the usual `position: fixed` body trick breaks both. */ html.nav-open, html.nav-open body { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); line-height: 1.22; margin: 0 0 .6em; font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: clamp(1.85rem, 1.25rem + 2.4vw, 3rem); } h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.15rem); } h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); } h4 { font-size: 1.05rem; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(201, 154, 59, .7); } a:hover { color: var(--gold-dark); } ul, ol { margin: 0 0 1.15em; padding-left: 1.25rem; } li { margin-bottom: .5em; } strong { color: var(--navy); } hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* -------------------------------------------------------------------------- 3. Layout helpers -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; /* max() keeps the gutter clear of a landscape notch without shrinking it on ordinary devices, where the inset is 0px. */ padding-left: max(20px, var(--safe-l)); padding-right: max(20px, var(--safe-r)); } @media (max-width: 400px) { .container { padding-left: max(16px, var(--safe-l)); padding-right: max(16px, var(--safe-r)); } } /* Grid and flex children default to min-width:auto, which lets long words blow out the track instead of wrapping. Reset it everywhere we lay out. */ .grid > *, .hero-grid > *, .content-layout > *, .contact-grid > *, .footer-grid > *, .cta-inner > *, .form-grid > * { min-width: 0; } .section { padding: clamp(2.75rem, 1.5rem + 4vw, 4.75rem) 0; } .section--tight { padding: clamp(2rem, 1.2rem + 2.5vw, 3rem) 0; } .section--surface { background: var(--surface); border-block: 1px solid var(--border); } .section--navy { background: var(--navy); color: #eef1f6; } .section--navy h2, .section--navy h3 { color: #ffffff; } .section--navy p { color: #d6dce7; } .section-head { max-width: 760px; margin-bottom: 2.25rem; } .section-head.center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-block; font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: .55rem; } .section--navy .eyebrow { color: var(--gold); } .lead { font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem); color: var(--muted); } .section--navy .lead { color: #cfd6e3; } .muted { color: var(--muted); } .rule { width: 64px; height: 3px; background: var(--gold); border-radius: 2px; margin: 0 0 1.25rem; } .center .rule { margin-inline: auto; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--gold); color: var(--navy); padding: .75rem 1.25rem; font-weight: 700; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; outline: 3px solid var(--navy); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 4. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.5rem; min-height: var(--tap); font-family: var(--font-body); font-size: .97rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } .btn:active { transform: translateY(1px); } .btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); } .btn-gold:hover, .btn-gold:focus-visible { background: var(--navy); color: #ffffff; border-color: var(--navy); } .btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); } .btn-outline:hover, .btn-outline:focus-visible { background: var(--navy); color: #ffffff; } .btn-ghost-light { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, .55); } .btn-ghost-light:hover, .btn-ghost-light:focus-visible { background: #ffffff; color: var(--navy); border-color: #ffffff; } .btn-block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; } /* On narrow phones two side-by-side buttons squeeze to unreadable widths. Stack them full-bleed instead — easier to read and much easier to hit. */ @media (max-width: 479px) { .btn-row { gap: .6rem; } .btn-row > .btn { width: 100%; } } /* -------------------------------------------------------------------------- 5. Utility bar + header -------------------------------------------------------------------------- */ .utility-bar { background: var(--navy-deep); color: #d6dce7; font-size: .84rem; } .utility-bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1.25rem; min-height: 38px; padding-block: .35rem; } .utility-links { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; align-items: center; } .utility-bar a { color: #e9edf4; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; } .utility-bar a:hover { color: var(--gold); text-decoration: underline; } .utility-note { color: #a9b4c6; margin: 0; } /* Phones: keep the utility bar to a single line so it does not eat the fold. Nothing is lost — the hours sit in the footer, and the email is one tap away in the fixed action bar and the footer. */ @media (max-width: 767px) { .utility-bar { font-size: .8rem; } .utility-bar .container { justify-content: center; gap: .25rem 1rem; min-height: 34px; } .utility-note { display: none; } .utility-bar a { padding-block: .3rem; } } @media (max-width: 419px) { /* At this width the email alone is wider than half the screen. */ .utility-links a[href^="mailto:"] { display: none; } } .site-header { position: sticky; top: 0; z-index: 200; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); padding-block: .5rem; } .brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; } .brand img { width: 52px; height: 52px; object-fit: contain; border-radius: 6px; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--navy); letter-spacing: -0.01em; } .brand-tag { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; } .nav-toggle { display: none; align-items: center; justify-content: center; gap: .5rem; background: var(--navy); color: #fff; border: 2px solid var(--navy); border-radius: var(--radius); padding: .55rem .85rem; min-height: var(--tap); min-width: var(--tap); font-weight: 700; font-size: .9rem; font-family: var(--font-body); cursor: pointer; } .nav-toggle .bars { display: inline-block; width: 18px; height: 2px; background: currentColor; position: relative; } .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .18s ease, top .18s ease; } .nav-toggle .bars::before { top: -6px; } .nav-toggle .bars::after { top: 6px; } .nav-toggle[aria-expanded="true"] .bars { background: transparent; } .nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); } .primary-nav { display: flex; align-items: center; gap: 1.1rem; } .nav-list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; } .nav-list > li { margin: 0; position: relative; } .nav-link { display: inline-flex; align-items: center; padding: .6rem .7rem; font-size: .95rem; font-weight: 600; color: var(--navy); text-decoration: none; border-radius: 6px; border-bottom: 2px solid transparent; } .nav-link:hover { color: var(--gold-dark); background: var(--gold-soft); } .nav-link[aria-current="page"] { color: var(--gold-dark); border-bottom-color: var(--gold); } .has-dropdown > .nav-row { display: flex; align-items: center; } .dd-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 32px; margin-left: -.35rem; background: transparent; border: 0; border-radius: 6px; color: var(--navy); cursor: pointer; } .dd-toggle svg { transition: transform .18s ease; } .dd-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .dd-toggle:hover { color: var(--gold-dark); background: var(--gold-soft); } .dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); list-style: none; margin: 0; padding: .45rem; display: none; z-index: 210; } .has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown, .dropdown.is-open { display: block; } .dropdown li { margin: 0; } .dropdown a { display: block; padding: .55rem .75rem; font-size: .93rem; font-weight: 600; color: var(--navy); text-decoration: none; border-radius: 6px; } .dropdown a:hover, .dropdown a:focus-visible { background: var(--gold-soft); color: var(--gold-dark); } .dropdown a[aria-current="page"] { background: var(--navy-soft); color: var(--gold-dark); } .dropdown .dd-sep { height: 1px; background: var(--border); margin: .35rem .5rem; } .nav-cta { white-space: nowrap; padding: .7rem 1.15rem; font-size: .92rem; } /* Mobile navigation */ @media (max-width: 899px) { .nav-toggle { display: inline-flex; } /* Compact the brand so logo + name + Menu fit one line at 360px. */ .brand { gap: .55rem; } .brand img { width: 40px; height: 40px; } .brand-name { font-size: .92rem; } .brand-tag { font-size: .6rem; letter-spacing: .1em; } .primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: .35rem; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 3px solid var(--gold); box-shadow: var(--shadow-lg); padding: 1rem max(20px, var(--safe-l)) calc(1.35rem + var(--safe-b)) max(20px, var(--safe-r)); /* dvh tracks the collapsing mobile browser chrome; the svh fallback keeps older engines from overshooting the viewport. */ max-height: calc(100svh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .primary-nav.is-open { display: flex; } .nav-list { flex-direction: column; align-items: stretch; gap: .1rem; } .nav-list > li { border-bottom: 1px solid var(--border); } .nav-link { display: flex; align-items: center; padding: .8rem .25rem; min-height: var(--tap); font-size: 1rem; flex: 1; border-bottom: 0; } .nav-link[aria-current="page"] { background: var(--gold-soft); padding-inline: .6rem; } .has-dropdown > .nav-row { justify-content: space-between; } .dd-toggle { width: 44px; height: 44px; margin-left: 0; } .dropdown { position: static; display: none; min-width: 0; border: 0; box-shadow: none; background: var(--cream); border-radius: var(--radius); margin: 0 0 .6rem; padding: .35rem; } .has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown { display: none; } .dropdown.is-open { display: block; } .dropdown a { display: flex; align-items: center; min-height: var(--tap); padding: .6rem .75rem; } .nav-cta { margin-top: .85rem; width: 100%; } } /* -------------------------------------------------------------------------- 6. Breadcrumbs -------------------------------------------------------------------------- */ .breadcrumbs { background: var(--surface); border-bottom: 1px solid var(--border); font-size: .86rem; } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; list-style: none; margin: 0; padding: .75rem 0; } .breadcrumbs li { margin: 0; display: flex; align-items: center; gap: .55rem; } .breadcrumbs li + li::before { content: "›"; color: var(--gold-dark); font-weight: 700; } .breadcrumbs a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; } .breadcrumbs a:hover { color: var(--gold-dark); text-decoration: underline; } .breadcrumbs [aria-current="page"] { color: var(--navy); font-weight: 600; } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ .hero { background: radial-gradient(1000px 520px at 82% 6%, rgba(201, 154, 59, .16), transparent 62%), linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: #ffffff; padding: clamp(2.75rem, 1.5rem + 5vw, 5.25rem) 0; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); align-items: center; } .hero h1 { color: #ffffff; margin-bottom: .5em; } .hero .eyebrow { color: var(--gold); } .hero p { color: #d3dae7; font-size: clamp(1rem, .96rem + .3vw, 1.14rem); } .hero-credential { display: inline-block; margin-top: 1.4rem; padding: .45rem .95rem; border: 1px solid rgba(201, 154, 59, .55); border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--gold); background: rgba(201, 154, 59, .1); } .hero-figure { background: var(--surface); border-radius: var(--radius-lg); padding: clamp(1.1rem, .6rem + 2vw, 2rem); box-shadow: var(--shadow-lg); border-top: 5px solid var(--gold); } .hero-figure img { margin-inline: auto; width: 100%; max-width: 340px; height: auto; } /* Phones: the logo panel is decorative and sits between the H1 and the call-to-action. Shrink it so the buttons stay within reach of the fold. */ @media (max-width: 639px) { .hero-figure { padding: 1rem; } .hero-figure img { max-width: 190px; } } .hero-points { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .55rem; } .hero-points li { display: flex; gap: .6rem; align-items: flex-start; color: #d3dae7; font-size: .95rem; margin: 0; } .hero-points li::before { content: "✓"; color: var(--gold); font-weight: 700; flex-shrink: 0; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } } /* Inner page header (non-home) */ .page-hero { background: radial-gradient(760px 400px at 88% 0%, rgba(201, 154, 59, .15), transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: #ffffff; padding: clamp(2.25rem, 1.4rem + 3.5vw, 3.75rem) 0; } .page-hero h1 { color: #ffffff; } .page-hero p { color: #d3dae7; max-width: 720px; } .page-hero .eyebrow { color: var(--gold); } /* -------------------------------------------------------------------------- 8. Cards & grids -------------------------------------------------------------------------- */ .grid { display: grid; gap: 1.25rem; } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; } .card h3 { margin-bottom: .45rem; } .card p { color: var(--muted); font-size: .95rem; } .card-link { text-decoration: none; color: inherit; } .card-link:hover, .card-link:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); } .card-link:hover h3 { color: var(--gold-dark); } .card-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9px; background: var(--gold-soft); color: var(--gold-dark); font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; } .card-more { margin-top: auto; padding-top: 1rem; font-weight: 700; font-size: .9rem; color: var(--gold-dark); display: inline-flex; align-items: center; gap: .35rem; } .card-more::after { content: "→"; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 1.35rem 1.5rem; } .stat-card h3 { font-size: 1.08rem; margin-bottom: .35rem; } .stat-card p { color: var(--muted); font-size: .94rem; margin: 0; } /* -------------------------------------------------------------------------- 9. Content article styling -------------------------------------------------------------------------- */ .content-layout { display: grid; grid-template-columns: 1fr; gap: 2.25rem; align-items: start; } @media (min-width: 1000px) { .content-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; } } .prose { max-width: 74ch; } .prose h2 { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--border); } .prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .prose h3 { margin-top: 1.8rem; } .prose ul li::marker { color: var(--gold-dark); } .prose ol { counter-reset: none; } .steps { list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: step; display: grid; gap: 1rem; } .steps li { counter-increment: step; position: relative; padding: 1.1rem 1.25rem 1.1rem 3.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin: 0; } .steps li::before { content: counter(step); position: absolute; left: 1.05rem; top: 1.05rem; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--gold); font-weight: 700; font-size: .9rem; font-family: var(--font-body); } .steps strong { display: block; margin-bottom: .15rem; } /* Narrow phones: a 3.6rem gutter leaves too little room for the text. Move the number above the copy instead of beside it. */ @media (max-width: 479px) { .steps li { padding: 1rem 1.1rem; } .steps li::before { position: static; margin-bottom: .6rem; } } .checklist { list-style: none; padding: 0; margin: 1.35rem 0; display: grid; gap: .6rem; } .checklist li { position: relative; padding-left: 1.9rem; margin: 0; } .checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold-dark); font-weight: 700; } .callout { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 1.35rem 1.5rem; margin: 1.75rem 0; box-shadow: var(--shadow-sm); } .callout h3 { margin-bottom: .4rem; font-size: 1.1rem; } .callout p { margin-bottom: 0; color: var(--muted); } .table-wrap { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; /* Horizontal swipes stay in the table instead of triggering back-navigation. */ overscroll-behavior-x: contain; } .table-wrap:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .table-hint { display: none; font-size: .84rem; color: var(--muted); margin: -.6rem 0 1.5rem; } @media (max-width: 639px) { .table-hint { display: block; } } table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: .94rem; min-width: 480px; } th, td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); } th { background: var(--navy-soft); font-family: var(--font-head); } tbody tr:last-child td { border-bottom: 0; } /* -------------------------------------------------------------------------- 10. Sidebar -------------------------------------------------------------------------- */ .sidebar { display: grid; gap: 1.25rem; } @media (min-width: 1000px) { .sidebar { position: sticky; top: calc(var(--header-h) + 20px); } } .side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); } .side-card h2, .side-card h3 { font-size: 1.1rem; margin-bottom: .75rem; } .side-card p { font-size: .93rem; color: var(--muted); } .side-card--navy { background: var(--navy); border-color: var(--navy); } .side-card--navy h2, .side-card--navy h3 { color: #fff; } .side-card--navy p { color: #cfd6e3; } .side-list { list-style: none; padding: 0; margin: 0; } .side-list li { margin: 0; border-bottom: 1px solid var(--border); } .side-list li:last-child { border-bottom: 0; } .side-list a { display: flex; align-items: center; min-height: var(--tap); padding: .55rem 0; font-size: .93rem; font-weight: 600; text-decoration: none; color: var(--navy); } .side-list a:hover { color: var(--gold-dark); } .side-list a[aria-current="page"] { color: var(--gold-dark); } /* -------------------------------------------------------------------------- 11. FAQ (details/summary) -------------------------------------------------------------------------- */ .faq { display: grid; gap: .85rem; margin-top: 1.75rem; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .faq-item[open] { border-color: var(--gold); } .faq-item summary { list-style: none; cursor: pointer; padding: 1.05rem 3rem 1.05rem 1.25rem; min-height: var(--tap); font-family: var(--font-head); font-weight: 700; font-size: 1.04rem; color: var(--navy); position: relative; } @media (max-width: 479px) { .faq-item summary { font-size: .98rem; padding: .95rem 2.75rem .95rem 1rem; } .faq-answer { padding: 0 1rem 1.1rem; } } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 1.15rem; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-soft); color: var(--gold-dark); font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; line-height: 1; } .faq-item[open] summary::after { content: "–"; } .faq-item summary:hover { color: var(--gold-dark); } .faq-answer { padding: 0 1.25rem 1.25rem; color: var(--muted); } .faq-answer p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 12. CTA band -------------------------------------------------------------------------- */ .cta-band { background: radial-gradient(700px 340px at 15% 100%, rgba(201, 154, 59, .18), transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; padding: clamp(2.5rem, 1.5rem + 3.5vw, 4rem) 0; } .cta-band h2 { color: #fff; } .cta-band p { color: #d3dae7; max-width: 640px; } .cta-inner { display: grid; gap: 1.5rem; align-items: center; } @media (min-width: 900px) { .cta-inner { grid-template-columns: 1.4fr auto; } .cta-inner .btn-row { margin-top: 0; } } /* -------------------------------------------------------------------------- 13. Forms -------------------------------------------------------------------------- */ .form-card { background: var(--surface); border: 1px solid var(--border); border-top: 5px solid var(--gold); border-radius: var(--radius-lg); padding: clamp(1.35rem, 1rem + 1.5vw, 2.25rem); box-shadow: var(--shadow); } .form-grid { display: grid; gap: 1.05rem; } @media (min-width: 620px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-full { grid-column: 1 / -1; } } .field { display: flex; flex-direction: column; gap: .35rem; } .field label { font-size: .9rem; font-weight: 700; color: var(--navy); } .field .req { color: var(--gold-dark); } .field input, .field select, .field textarea { font-family: var(--font-body); /* Must stay at 16px or larger — iOS Safari auto-zooms into any smaller field on focus, which throws the whole layout off. */ font-size: 1rem; color: var(--navy); background: var(--cream); border: 1px solid var(--border); border-radius: 8px; padding: .7rem .85rem; min-height: var(--tap); width: 100%; max-width: 100%; -webkit-appearance: none; appearance: none; } /* Restore a visible dropdown affordance after removing the native styling. */ .field select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230a1f44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem; } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold); background: var(--surface); } .field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: #b3261e; } .field-error { color: #b3261e; font-size: .85rem; font-weight: 600; min-height: 0; } .form-note { font-size: .85rem; color: var(--muted); margin-top: 1rem; } .form-status { margin-top: 1rem; padding: .85rem 1rem; border-radius: 8px; font-weight: 600; font-size: .93rem; display: none; } .form-status.is-visible { display: block; } .form-status.is-error { background: #fdecea; color: #8c1d18; border: 1px solid #f3c4bf; } .form-status.is-success { background: #e9f5ec; color: #14532d; border: 1px solid #bcdcc6; } /* -------------------------------------------------------------------------- 14. Contact page pieces -------------------------------------------------------------------------- */ .contact-grid { display: grid; gap: 2rem; align-items: start; } @media (min-width: 1000px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 2.75rem; } } .nap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; } .nap-list li { margin: 0; display: flex; gap: .9rem; align-items: flex-start; } .nap-icon { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: var(--gold-soft); color: var(--gold-dark); font-weight: 700; font-size: .95rem; } .nap-label { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: .1rem; } .nap-list a { text-decoration: none; font-weight: 600; } .nap-list a:hover { text-decoration: underline; } .map-frame { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--surface); line-height: 0; } .map-frame iframe { width: 100%; height: 380px; border: 0; display: block; } @media (max-width: 639px) { .map-frame iframe { height: 260px; } } /* -------------------------------------------------------------------------- 15. Blog -------------------------------------------------------------------------- */ .post-meta { font-size: .86rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center; margin-bottom: 1.25rem; } .post-meta .tag { background: var(--gold-soft); color: var(--gold-dark); font-weight: 700; padding: .18rem .6rem; border-radius: 999px; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; } .page-hero .post-meta { color: #cfd6e3; } .page-hero .post-meta .tag { background: rgba(201, 154, 59, .2); color: var(--gold); } .post-card h3 { font-size: 1.18rem; } .post-card .post-meta { margin-bottom: .75rem; } /* -------------------------------------------------------------------------- 16. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--navy-deep); color: #c3cbd9; padding-top: clamp(2.5rem, 1.5rem + 3vw, 3.75rem); font-size: .94rem; } .footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; padding-bottom: 2.25rem; } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr 1.4fr; gap: 2.5rem; } } .site-footer h2 { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-family: var(--font-body); font-weight: 700; margin-bottom: 1.1rem; } .site-footer p { color: #b6bfcf; } .site-footer a { color: #dde3ec; text-decoration: none; } .site-footer a:hover { color: var(--gold); text-decoration: underline; } .footer-brand { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1rem; text-decoration: none; } .footer-brand img { width: 54px; height: 54px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; } .footer-brand .brand-name { color: #fff; font-size: 1rem; } .footer-brand .brand-tag { color: var(--gold); } .footer-credential { display: inline-block; margin-top: .9rem; font-size: .85rem; color: var(--gold); font-weight: 600; border-left: 3px solid var(--gold); padding-left: .7rem; } .footer-list { list-style: none; padding: 0; margin: 0; } .footer-list li { margin-bottom: .15rem; } /* Footer links were ~22px tall — below any usable touch target. */ .footer-list a { display: flex; align-items: center; min-height: var(--tap); padding-block: .2rem; } .footer-contact a { display: inline-flex; align-items: center; min-height: 34px; } .footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; } .footer-contact li { margin: 0; } .footer-contact .lbl { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #8e99ab; font-weight: 700; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); /* Clear the fixed action bar AND the iOS home indicator, derived from the real bar height rather than a guessed magic number. */ padding: 1.15rem 0 calc(var(--fab-h) + var(--safe-b) + 1rem); font-size: .85rem; color: #98a3b5; text-align: center; } @media (min-width: 700px) { /* The bar becomes a floating pill column at this width — no reserved space. */ .footer-bottom { padding-bottom: 1.15rem; } } /* -------------------------------------------------------------------------- 17. Floating action buttons -------------------------------------------------------------------------- */ .floating-actions { position: fixed; z-index: 180; left: 0; right: 0; bottom: 0; display: flex; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 18px rgba(10, 22, 48, .12); /* Sit above the iOS home indicator instead of underneath it. */ padding-bottom: var(--safe-b); padding-left: var(--safe-l); padding-right: var(--safe-r); } .fab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .5rem .35rem; min-height: var(--fab-h); font-size: .75rem; font-weight: 700; line-height: 1.25; text-decoration: none; color: var(--navy); border-right: 1px solid var(--border); } .fab:last-child { border-right: 0; } .fab:hover { background: var(--gold-soft); color: var(--gold-dark); } .fab svg { width: 20px; height: 20px; } .fab--whatsapp { color: #128c7e; } .fab--enquire { background: var(--gold); color: var(--navy); } .fab--enquire:hover { background: var(--gold-dark); color: #fff; } @media (min-width: 700px) { .floating-actions { left: auto; right: 18px; bottom: 18px; top: auto; flex-direction: column; gap: .55rem; background: transparent; border: 0; box-shadow: none; } .fab { flex: none; width: 52px; height: 52px; min-height: 0; padding: 0; border-radius: 50%; border-right: 0; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 0; gap: 0; } .fab svg { width: 22px; height: 22px; } .fab--enquire { background: var(--gold); border-color: var(--gold); } } /* -------------------------------------------------------------------------- 18. 404 -------------------------------------------------------------------------- */ .error-page { min-height: 52vh; display: grid; place-items: center; text-align: center; padding: clamp(2.5rem, 2rem + 4vw, 5rem) 0; } .error-code { font-family: var(--font-head); font-size: clamp(4rem, 3rem + 8vw, 7.5rem); line-height: 1; color: var(--gold); margin-bottom: .35rem; } .error-page .btn-row { justify-content: center; } /* -------------------------------------------------------------------------- 19. Print -------------------------------------------------------------------------- */ @media print { .utility-bar, .site-header, .floating-actions, .cta-band, .site-footer, .breadcrumbs { display: none !important; } body { background: #fff; color: #000; } a { text-decoration: underline; } }