/* ========================================================= Prime Barrier — design system Themes: data-theme="gold" | "brown" | "navy" on Change colours ONLY in the theme blocks below. ========================================================= */ :root { --font-en: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font-ta: "Noto Sans Tamil", "Latha", "Nirmala UI", "Manrope", system-ui, sans-serif; --container: 1200px; --gutter: clamp(1.1rem, 4vw, 2rem); --section: clamp(4rem, 8vw, 7rem); --header-h: 84px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --danger: #B42318; --danger-soft: #FEF3F2; --success: #1E6B45; --success-soft: #EEF7F1; --ease: cubic-bezier(.2, .7, .2, 1); } /* ---------- Theme 1: White + Gold (default, matches the logo) ---------- */ :root, [data-theme="gold"] { --primary-color: #B38A3F; /* buttons, key accents */ --accent-strong: #8F6C2C; /* hover */ --accent-text: #86652A; /* accent used as text on white (AA contrast) */ --accent-soft: #F6EFE1; --on-accent: #1A1712; /* text on accent buttons */ --background-color: #FFFFFF; --surface: #FAF8F4; --surface-2: #ECE7DD; --text-color: #1D1C1A; --muted-color: #625E57; --border-color: #E6E1D8; --border-strong: #C9C2B6; --dark: #1C1D20; --dark-ink: #F1EDE6; --dark-muted: #B3ADA3; --dark-accent: #D2AE6A; --water: #5E97C2; } /* ---------- Theme 2: White + Brown ---------- */ [data-theme="brown"] { --primary-color: #6B4A33; --accent-strong: #523826; --accent-text: #6B4A33; --accent-soft: #F3ECE6; --on-accent: #FFFFFF; --background-color: #FFFFFF; --surface: #FAF7F4; --surface-2: #EAE2DA; --text-color: #221C18; --muted-color: #6A5F58; --border-color: #E6DED7; --border-strong: #C8BBB0; --dark: #261E19; --dark-ink: #F4EDE7; --dark-muted: #BDAFA4; --dark-accent: #D8B08C; --water: #5F93B8; } /* ---------- Theme 3: White + Navy (designer's choice: engineering / water) ---------- */ [data-theme="navy"] { --primary-color: #1F3D63; --accent-strong: #152C49; --accent-text: #1F3D63; --accent-soft: #E8EEF5; --on-accent: #FFFFFF; --background-color: #FFFFFF; --surface: #F6F8FA; --surface-2: #E1E7EE; --text-color: #16202C; --muted-color: #56616E; --border-color: #DEE4EB; --border-strong: #B9C3CE; --dark: #111D2B; --dark-ink: #EEF2F6; --dark-muted: #A8B4C1; --dark-accent: #C9A460; --water: #3C85BA; } /* aliases used throughout */ :root, [data-theme] { --accent: var(--primary-color); --bg: var(--background-color); --ink: var(--text-color); --muted: var(--muted-color); --line: var(--border-color); --button-color: var(--primary-color); --secondary-color: var(--dark); --accent-color: var(--primary-color); --grid: color-mix(in srgb, var(--ink) 5%, transparent); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); } body { margin: 0; font-family: var(--font-en); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .3s, color .3s; } html[lang="ta"] body { font-family: var(--font-ta); font-size: 1rem; line-height: 1.75; } .ta-pending body { opacity: 0; } img, svg { max-width: 100%; display: block; } a { color: var(--accent-text); text-underline-offset: 3px; } a:hover { color: var(--accent-strong); } p { margin: 0 0 1rem; } ul, ol { margin: 0; padding: 0; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0 0 .75rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } h1 { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -0.03em; line-height: 1.04; } h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); } h3 { font-size: 1.3rem; letter-spacing: -0.01em; } h4 { font-size: 1.12rem; letter-spacing: -0.005em; } html[lang="ta"] h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.3; letter-spacing: 0; } html[lang="ta"] h2 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); line-height: 1.35; letter-spacing: 0; } html[lang="ta"] h3 { font-size: 1.15rem; line-height: 1.45; letter-spacing: 0; } html[lang="ta"] h4 { font-size: 1.02rem; line-height: 1.5; letter-spacing: 0; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -60px; z-index: 200; background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: var(--r-sm); } .skip-link:focus { top: 1rem; color: var(--bg); } .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--section) 0; } .section--surface { background: var(--surface); } .section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); } .section-head p { color: var(--muted); font-size: 1.125rem; margin: 0; } html[lang="ta"] .section-head p { font-size: 1.02rem; } .lead { font-size: 1.2rem; color: var(--muted); } html[lang="ta"] .lead { font-size: 1.06rem; } /* ---------- Icons ---------- */ .icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .icon--fill { fill: currentColor; stroke: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .75rem 1.35rem; border-radius: var(--r-sm); border: 1.5px solid transparent; font-weight: 650; font-size: .98rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--button-color); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-strong); color: var(--on-accent); } [data-theme="gold"] .btn--primary:hover, :root:not([data-theme]) .btn--primary:hover { color: #fff; } .btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; } .btn--outline:hover { background: var(--ink); color: var(--bg); } .btn--light { background: var(--dark-accent); color: #16130E; } .btn--light:hover { background: var(--dark-ink); color: #16130E; } .btn--ghost-light { border-color: color-mix(in srgb, var(--dark-ink) 45%, transparent); color: var(--dark-ink); } .btn--ghost-light:hover { border-color: var(--dark-ink); color: var(--dark-ink); background: color-mix(in srgb, var(--dark-ink) 8%, transparent); } .btn--sm { min-height: 42px; padding: .55rem 1rem; font-size: .92rem; } .btn[disabled] { opacity: .6; cursor: progress; } .text-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; text-decoration: none; color: var(--accent-text); } .text-link:hover { text-decoration: underline; } .text-link .icon { width: 1em; height: 1em; transition: transform .2s var(--ease); } .text-link:hover .icon { transform: translateX(3px); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; } .site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(0,0,0,.35); } .header-inner { display: flex; align-items: center; gap: 1.5rem; height: var(--header-h); } .brand { display: flex; align-items: center; flex: none; padding: 6px 0; } .brand img { height: 62px; width: auto; aspect-ratio: 663 / 470; } .main-nav { margin-left: auto; } .main-nav ul { display: flex; list-style: none; gap: clamp(1rem, 2vw, 1.9rem); } .main-nav a { position: relative; display: block; padding: .5rem 0; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .96rem; } .main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); } .main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); } .main-nav a[aria-current="page"] { color: var(--accent-text); } .header-tools { display: flex; align-items: center; gap: .6rem; } .hdr-phone { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--ink); text-decoration: none; font-size: .95rem; white-space: nowrap; padding: 0 .3rem; font-variant-numeric: tabular-nums; } .hdr-phone .icon { color: var(--accent-text); } .lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--bg); } .lang-switch button { border: 0; background: transparent; padding: .3rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 700; cursor: pointer; color: var(--muted); min-height: 32px; } .lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); } .lang-switch button:lang(ta) { font-family: var(--font-ta); } .theme-picker { position: relative; } .icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; color: var(--ink); } .icon-btn:hover { border-color: var(--border-strong); } .theme-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; padding: .5rem; margin: 0; list-style: none; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 20px 40px -24px rgba(0,0,0,.35); opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; } .theme-picker.is-open .theme-menu { opacity: 1; transform: none; visibility: visible; } .theme-menu p { font-size: .8rem; color: var(--muted); margin: .25rem .5rem .4rem; font-weight: 600; } .theme-option { display: flex; width: 100%; align-items: center; gap: .7rem; padding: .55rem .5rem; border: 0; background: transparent; border-radius: var(--r-sm); cursor: pointer; text-align: left; font-size: .93rem; } .theme-option:hover { background: var(--surface); } .theme-option[aria-checked="true"] { font-weight: 700; } .theme-option[aria-checked="true"]::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: linear-gradient(135deg, #fff 50%, var(--sw) 50%); flex: none; } .menu-toggle, .hdr-call { display: none; } /* Mobile panel */ .mobile-panel { display: none; } @media (max-width: 1120px) { .hdr-phone { display: none; } } @media (max-width: 1023px) { :root { --header-h: 72px; } .brand img { height: 50px; } .main-nav, .header-tools .lang-switch, .header-tools .theme-picker, .header-tools .btn--primary { display: none; } .header-tools { margin-left: auto; } .menu-toggle, .hdr-call { display: inline-grid; } .mobile-panel { display: block; position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; background: var(--bg); padding: 1.5rem var(--gutter) 6rem; overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; } .mobile-panel.is-open { opacity: 1; transform: none; visibility: visible; } .mobile-panel nav ul { list-style: none; } .mobile-panel nav a { display: block; padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: 1.2rem; font-weight: 650; color: var(--ink); text-decoration: none; } .mobile-panel nav a[aria-current="page"] { color: var(--accent-text); } .mobile-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); font-weight: 600; } .mobile-themes { display: flex; gap: .6rem; } .mobile-themes .theme-option { width: auto; padding: .35rem; border: 1px solid var(--line); border-radius: 999px; } .mobile-themes .theme-option::after { display: none; } .mobile-themes .theme-option[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } .mobile-panel .btn { width: 100%; margin-top: 1.4rem; } body.menu-open { overflow: hidden; } } @media (max-width: 380px) { .brand img { height: 44px; } } /* ---------- Hero ---------- */ .hero { position: relative; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem); overflow: hidden; } .blueprint::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(100deg, transparent 5%, #000 55%); mask-image: linear-gradient(100deg, transparent 5%, #000 55%); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hero h1 { max-width: 12ch; } html[lang="ta"] .hero h1 { max-width: 18ch; } .hero .lead { max-width: 34rem; margin: 1.25rem 0 2rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; } .hero-area { display: flex; align-items: center; gap: .5rem; margin-top: 1.75rem; color: var(--muted); font-size: .95rem; } .hero-area .icon { color: var(--accent-text); } .hero-fig { margin: 0; } .hero-fig svg { width: 100%; height: auto; overflow: visible; } .hero-fig figcaption { margin-top: .9rem; font-size: .88rem; color: var(--muted); padding-left: .9rem; border-left: 2px solid var(--accent); } .hero-legend { display: none; } /* SVG drawing classes (hero + illustrations) */ .i-ln { stroke: var(--ink); stroke-width: 1.5; } .i-thin { stroke: var(--muted); stroke-width: 1; opacity: .7; fill: none; } .i-hatch { stroke: var(--muted); stroke-width: 1; opacity: .35; } .i-conc { fill: var(--surface-2); } .i-soil { fill: color-mix(in srgb, var(--surface-2) 55%, var(--bg)); } .i-tile { fill: var(--bg); } .i-soft { fill: var(--accent-soft); } .i-mem { fill: var(--accent); } .i-accent-fill { fill: var(--accent); } .i-accent-stroke { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .i-accent-line { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; } .i-rebar { fill: var(--ink); opacity: .7; } .i-water { fill: var(--water); } .i-water-body { fill: var(--water); opacity: .22; } .i-waterline { fill: none; stroke: var(--water); stroke-width: 2; } .i-rain { stroke: var(--water); stroke-width: 2.2; stroke-linecap: round; } .i-film { fill: none; stroke: var(--water); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 8; } .i-pipeline { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; } .i-pipeline-wide { fill: none; stroke: var(--ink); stroke-width: 14; stroke-linejoin: round; opacity: .85; } .i-flow-line { fill: none; stroke: var(--water); stroke-width: 4; stroke-dasharray: 10 10; stroke-linejoin: round; } .i-lining { fill: none; stroke: var(--accent); stroke-width: 5; } .i-seal { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; } .i-deflect { fill: none; stroke: var(--water); stroke-width: 2; stroke-linecap: round; } .i-arrow { fill: none; stroke: var(--water); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .i-dash { stroke: var(--ink); stroke-width: 1.25; stroke-dasharray: 5 4; } .i-scan { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 5; } .i-ok { fill: var(--bg); stroke: var(--accent); stroke-width: 2; } .i-okmark { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .lbl { font-size: 15px; fill: var(--ink); font-weight: 600; font-family: inherit; } .lbl--accent { fill: var(--accent-text); font-weight: 800; } .lbl-dot { fill: var(--ink); } .leader { fill: none; stroke: var(--muted); stroke-width: 1; } /* Hero load sequence: layers settle into place, then rain starts */ @media (prefers-reduced-motion: no-preference) { .hero-fig .ly { animation: layerIn .7s var(--ease) both; animation-delay: calc(var(--i) * 120ms + 150ms); } .hero-fig .lbls { animation: fadeIn .6s ease both; animation-delay: 1.05s; } .hero-fig .rain line { animation: rainfall 1.25s linear infinite; animation-delay: calc(1.2s + var(--d)); opacity: 0; } .hero-fig .i-film { animation: flow 1.2s linear infinite; } .hero-fig .pipe-flow { animation: flowDown .9s linear infinite; } .illus .i-film, .illus .i-flow-line { animation: flow 1.4s linear infinite; } } @keyframes layerIn { from { opacity: 0; transform: translateY(-16px); } } @keyframes fadeIn { from { opacity: 0; } } @keyframes rainfall { 0% { transform: translateY(-30px); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .9; } 100% { transform: translateY(95px); opacity: 0; } } @keyframes flow { to { stroke-dashoffset: -36; } } @keyframes flowDown { to { stroke-dashoffset: -28; } } /* ---------- Trust strip ---------- */ .trust { border-block: 1px solid var(--line); background: var(--surface); padding: clamp(2rem, 4vw, 2.75rem) 0; } .trust-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; list-style: none; } .trust-list li { display: flex; gap: .85rem; align-items: flex-start; } .trust-list .icon { width: 28px; height: 28px; color: var(--accent-text); stroke-width: 1.5; margin-top: 2px; } .trust-list strong { display: block; font-size: 1rem; line-height: 1.35; margin-bottom: .25rem; } .trust-list span { color: var(--muted); font-size: .92rem; line-height: 1.5; } /* ---------- Illustration frames ---------- */ .illus { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); aspect-ratio: 400 / 260; display: grid; place-items: center; overflow: hidden; padding: 4%; } .illus svg { width: 100%; height: 100%; } /* ---------- Home services ---------- */ .svc-group + .svc-group { margin-top: clamp(3rem, 6vw, 4.5rem); } .group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; margin-bottom: 2rem; border-bottom: 2px solid var(--ink); } .group-head h3 { margin: 0; font-size: 1.5rem; } .group-head p { margin: 0; color: var(--muted); } .svc-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-bottom: 2.5rem; } .svc-feature h4 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -0.02em; } html[lang="ta"] .svc-feature h4 { font-size: 1.3rem; } .svc-feature p { color: var(--muted); } .svc-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); list-style: none; } .svc-trio li { display: flex; flex-direction: column; } .svc-trio .illus { margin-bottom: 1.1rem; } .svc-trio p { color: var(--muted); font-size: .98rem; flex: 1; } .svc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); list-style: none; } .svc-list li { display: grid; grid-template-columns: 176px 1fr; gap: 1.25rem; align-items: start; padding: 1.4rem 0; border-top: 1px solid var(--line); } .svc-list li:nth-child(-n+2) { border-top: 0; padding-top: 0; } .svc-list .illus { padding: 2%; } .svc-list h4 { margin-bottom: .35rem; } .svc-list p { color: var(--muted); font-size: .96rem; margin-bottom: .5rem; } .center-link { margin-top: 2.5rem; } /* ---------- Pricing teaser ---------- */ .price-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .price-teaser .lead { margin-bottom: 1.75rem; } .mini-table { width: 100%; border-collapse: collapse; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; font-size: .97rem; } .mini-table th, .mini-table td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line); } .mini-table tr:last-child td { border-bottom: 0; } .mini-table td.num { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .mini-table td small { display: block; color: var(--muted); font-weight: 500; font-size: .8rem; } .fine { font-size: .85rem; color: var(--muted); margin-top: .9rem; } /* ---------- Why ---------- */ .why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); } .why-intro { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } .why-intro p { color: var(--muted); font-size: 1.15rem; } .why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 2.5rem; list-style: none; } .why-grid li { border-top: 1px solid var(--border-strong); padding-top: 1.1rem; } .why-grid h3 { font-size: 1.1rem; margin-bottom: .4rem; } .why-grid p { color: var(--muted); font-size: .97rem; margin: 0; } /* ---------- Process timeline ---------- */ .process { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; list-style: none; counter-reset: step; } .process::before, .process::after { content: ""; position: absolute; top: 23px; left: 24px; right: 24px; height: 2px; background: var(--line); } .process::after { background: var(--accent); transform-origin: left; transform: scaleX(var(--progress, 1)); transition: transform 1.4s var(--ease); } .process li { position: relative; z-index: 1; counter-increment: step; } .process li::before { content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); color: var(--accent-text); font-weight: 800; margin-bottom: 1.1rem; font-variant-numeric: tabular-nums; transition: background-color .3s, color .3s; } .process li.is-on::before { background: var(--accent); color: var(--on-accent); } .process h3 { font-size: 1.08rem; margin-bottom: .35rem; } .process p { color: var(--muted); font-size: .95rem; margin: 0; } /* ---------- CTA band (dark) ---------- */ .cta-band { background: var(--dark); color: var(--dark-ink); padding: clamp(3.5rem, 7vw, 5.5rem) 0; position: relative; overflow: hidden; } .cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: repeating-linear-gradient(0deg, transparent 0 13px, color-mix(in srgb, var(--dark-ink) 6%, transparent) 13px 14px); -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); } .cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .cta-inner img { height: 96px; width: auto; } .cta-band h2 { color: var(--dark-ink); margin-bottom: .5rem; font-size: clamp(1.6rem, 2.8vw, 2.25rem); } .cta-band p { color: var(--dark-muted); margin: 0; max-width: 40rem; } .cta-actions { display: flex; flex-direction: column; gap: .7rem; } /* ---------- FAQ accordion ---------- */ .faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 4rem); } .faq-intro p { color: var(--muted); } .acc { border-top: 1px solid var(--border-strong); } .acc-item { border-bottom: 1px solid var(--line); } .acc-item h3 { margin: 0; font-size: 1.06rem; } .acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; background: none; border: 0; text-align: left; cursor: pointer; font-weight: 650; line-height: 1.4; } .acc-btn:hover { color: var(--accent-text); } .acc-btn .pm { position: relative; width: 18px; height: 18px; flex: none; } .acc-btn .pm::before, .acc-btn .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transition: transform .25s var(--ease); } .acc-btn .pm::after { transform: rotate(90deg); } .acc-btn[aria-expanded="true"] .pm::after { transform: rotate(0); } .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease), visibility .3s; visibility: hidden; } .acc-panel > div { overflow: hidden; } .acc-panel p { color: var(--muted); padding-bottom: 1.25rem; margin: 0; max-width: 62ch; } .acc-item.is-open .acc-panel { grid-template-rows: 1fr; visibility: visible; } /* ---------- Page hero (inner pages) ---------- */ .page-hero { position: relative; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--line); padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem); } .page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); max-width: 20ch; } html[lang="ta"] .page-hero h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); } .page-hero .lead { max-width: 44rem; margin: 0; } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; font-size: .88rem; color: var(--muted); margin-bottom: 1.2rem; } .breadcrumb li + li::before { content: "/"; margin-right: .4rem; opacity: .6; } .breadcrumb a { color: var(--muted); text-decoration: none; } .breadcrumb a:hover { color: var(--accent-text); } /* ---------- About ---------- */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; } .split p { color: var(--muted); } .prose { max-width: 40rem; } .prose p { font-size: 1.08rem; } .pull { font-size: clamp(1.35rem, 2.3vw, 1.75rem); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); border-left: 3px solid var(--accent); padding-left: 1.25rem; margin: 0; } html[lang="ta"] .pull { font-size: 1.25rem; line-height: 1.6; } .phil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; list-style: none; margin-top: 2rem; } .phil li { padding-top: 1.1rem; border-top: 2px solid var(--accent); } .phil h3 { font-size: 1.12rem; margin-bottom: .4rem; } .phil p { color: var(--muted); margin: 0; } .dual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; } .dual > div { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.6rem; } .dual h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; } .dual .icon { color: var(--accent-text); width: 24px; height: 24px; } .dual p { margin: 0; color: var(--muted); } /* ---------- Services page ---------- */ .jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; list-style: none; } .jump a { display: inline-block; padding: .45rem .9rem; border: 1px solid var(--border-strong); border-radius: 999px; text-decoration: none; color: var(--ink); font-size: .9rem; font-weight: 600; background: var(--bg); } .jump a:hover { border-color: var(--accent); color: var(--accent-text); } .svc-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; padding: clamp(2.5rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--line); } .svc-detail:first-of-type { border-top: 0; } .svc-detail.is-reverse .illus { order: 2; } .svc-detail .illus { position: sticky; top: calc(var(--header-h) + 1.5rem); } .svc-detail h3 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); letter-spacing: -0.02em; } html[lang="ta"] .svc-detail h3 { font-size: 1.3rem; } .svc-detail > div > p { color: var(--muted); } .two-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 1.5rem 0 1.75rem; } .two-lists h4 { font-size: .95rem; margin-bottom: .6rem; color: var(--ink); } .check-list { list-style: none; display: grid; gap: .5rem; } .check-list li { position: relative; padding-left: 1.6rem; font-size: .96rem; color: var(--muted); line-height: 1.5; } .check-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .dot-list li::before { width: 7px; height: 7px; border: 0; border-radius: 50%; background: var(--border-strong); transform: none; top: .6em; left: 2px; } .group-title { font-size: clamp(1.5rem, 2.6vw, 2rem); padding-bottom: 1rem; border-bottom: 2px solid var(--ink); margin: 0; } .group-block + .group-block { margin-top: clamp(3rem, 6vw, 5rem); } /* Estimator */ .estimator { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); } .est-form { padding: clamp(1.4rem, 3vw, 2.25rem); display: grid; gap: 1.2rem; } .est-form h3 { margin: 0; } .est-result { background: var(--dark); color: var(--dark-ink); padding: clamp(1.4rem, 3vw, 2.25rem); display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; } .est-result h3 { color: var(--dark-muted); font-size: .95rem; font-weight: 600; margin: 0 0 .5rem; letter-spacing: 0; } .est-amount { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--dark-ink); } .est-amount.is-text { font-size: 1.5rem; } .est-basis { color: var(--dark-muted); font-size: .92rem; margin-top: .6rem; } .est-note { font-size: .82rem; color: var(--dark-muted); margin: 0; } .range-row { display: grid; grid-template-columns: 1fr 120px; gap: 1rem; align-items: center; } input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; } .check-row { display: flex; align-items: flex-start; gap: .65rem; font-size: .97rem; cursor: pointer; } .check-row input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; } .est-form [hidden] { display: none !important; } .rate-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); } .rate-tables .full { grid-column: 1 / -1; } .rate-tables h3 { font-size: 1.15rem; } .table-wrap { overflow-x: auto; } .rate-table { width: 100%; border-collapse: collapse; font-size: .95rem; } .rate-table th { text-align: left; font-size: .82rem; font-weight: 700; color: var(--muted); padding: .6rem .75rem; border-bottom: 2px solid var(--ink); } .rate-table td { padding: .85rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; } .rate-table td.num { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .rate-table td.unit { color: var(--muted); white-space: nowrap; } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.25rem); position: sticky; top: calc(var(--header-h) + 1.5rem); } .contact-card h2 { font-size: 1.4rem; } .contact-list { list-style: none; display: grid; gap: 1.25rem; margin: 1.5rem 0; } .contact-list li { display: grid; grid-template-columns: 40px 1fr; gap: .9rem; align-items: start; } .contact-list .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); color: var(--accent-text); } .contact-list small { display: block; color: var(--muted); font-size: .82rem; font-weight: 600; } .contact-list a, .contact-list address { font-style: normal; font-weight: 650; color: var(--ink); text-decoration: none; line-height: 1.5; } .contact-list a:hover { color: var(--accent-text); } .contact-card .btn-row { display: flex; flex-wrap: wrap; gap: .6rem; } .contact-card .fine { margin-top: 1.25rem; } /* Form */ .form-card { background: var(--bg); } .form-card h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.25rem; margin-top: 1.75rem; } .field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; } .field--full { grid-column: 1 / -1; } .field label, .field legend { font-weight: 650; font-size: .94rem; } .field label .req, .field legend .req { color: var(--danger); margin-left: 2px; } .field label .opt { color: var(--muted); font-weight: 500; font-size: .85rem; } .input, select.input, textarea.input { width: 100%; min-height: 50px; padding: .75rem .9rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg); font-size: 1rem; line-height: 1.4; transition: border-color .2s, box-shadow .2s; } select.input { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; } textarea.input { min-height: 132px; resize: vertical; } .input:hover { border-color: var(--muted); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); } .field-error { display: none; align-items: center; gap: .35rem; color: var(--danger); font-size: .86rem; font-weight: 600; } .field-error.is-shown { display: flex; } .field-error::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 800; flex: none; } fieldset.field { border: 0; padding: 0; margin: 0; } .radio-row { display: flex; flex-wrap: wrap; gap: .6rem; } .radio-pill { position: relative; } .radio-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .radio-pill span { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--border-strong); border-radius: 999px; font-size: .94rem; font-weight: 600; cursor: pointer; transition: all .15s; } .radio-pill input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); } .radio-pill input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; } .consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; cursor: pointer; } .consent input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); flex: none; } .hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .form-summary { display: none; margin-top: 1.25rem; padding: .85rem 1rem; border-radius: var(--r-sm); background: var(--danger-soft); color: var(--danger); font-weight: 600; font-size: .94rem; border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); } .form-summary.is-shown { display: block; } .form-actions { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .form-status { padding: 1.5rem; border-radius: var(--r-md); margin-top: 1.5rem; } .form-status--ok { background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); } .form-status--ok h3 { color: var(--success); } .form-status--err { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); font-weight: 600; } .form-status[hidden] { display: none; } /* Map */ .map-block { position: relative; } .map-frame { position: relative; aspect-ratio: 16 / 7; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); } .map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85); } .map-card { position: absolute; left: calc(var(--gutter) + clamp(1rem, 2.5vw, 1.75rem)); top: clamp(1rem, 3vw, 1.75rem); z-index: 2; max-width: 340px; background: var(--bg); border-radius: var(--r-md); padding: 1.25rem 1.4rem; box-shadow: 0 18px 40px -22px rgba(0,0,0,.45); border: 1px solid var(--line); } .map-card h2 { font-size: 1.15rem; margin-bottom: .35rem; } .map-card address { font-style: normal; color: var(--muted); font-size: .94rem; line-height: 1.55; margin-bottom: 1rem; } /* ---------- Legal ---------- */ .legal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(2rem, 5vw, 4.5rem); } .toc { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; } .toc h2 { font-size: .95rem; color: var(--muted); letter-spacing: 0; } .toc ol { list-style: none; display: grid; gap: .1rem; border-left: 1px solid var(--line); } .toc a { display: block; padding: .35rem .9rem; font-size: .9rem; color: var(--muted); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent; } .toc a:hover { color: var(--accent-text); border-left-color: var(--accent); } .legal-body section { padding: 1.6rem 0; border-bottom: 1px solid var(--line); max-width: 70ch; } .legal-body section:first-child { padding-top: 0; } .legal-body h2 { font-size: 1.3rem; display: flex; gap: .75rem; align-items: baseline; } .legal-body h2 .n { color: var(--accent-text); font-variant-numeric: tabular-nums; font-size: .95rem; font-weight: 800; min-width: 1.6rem; } .legal-body p { color: var(--muted); margin: 0; } .legal-meta { color: var(--muted); font-size: .92rem; margin-top: 1rem; } /* ---------- Footer ---------- */ .site-footer { background: var(--dark); color: var(--dark-muted); padding: clamp(3.5rem, 7vw, 5rem) 0 0; font-size: .95rem; } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.3fr); gap: 2.5rem; padding-bottom: 3rem; } .footer-brand img { height: 104px; width: auto; margin-bottom: 1.1rem; } .footer-brand p { max-width: 20rem; } .site-footer h2 { font-size: .95rem; color: var(--dark-ink); letter-spacing: 0; margin-bottom: 1rem; } .site-footer ul { list-style: none; display: grid; gap: .55rem; } .site-footer a { color: var(--dark-muted); text-decoration: none; } .site-footer a:hover { color: var(--dark-accent); } .site-footer .btn--light, .site-footer .btn--light:hover { color: #16130E; } .site-footer address { font-style: normal; line-height: 1.7; } .footer-contact li { display: flex; gap: .6rem; align-items: center; } .footer-contact .icon { color: var(--dark-accent); } .footer-cta p { margin-bottom: 1rem; } .footer-bottom { border-top: 1px solid color-mix(in srgb, var(--dark-ink) 14%, transparent); padding: 1.4rem 0; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: .86rem; } .footer-bottom .lang-switch { background: transparent; border-color: color-mix(in srgb, var(--dark-ink) 22%, transparent); } .footer-bottom .lang-switch button { color: var(--dark-muted); } .footer-bottom .lang-switch button[aria-pressed="true"] { background: var(--dark-ink); color: var(--dark); } /* ---------- Mobile action bar ---------- */ .action-bar { display: none; } @media (max-width: 767px) { .action-bar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--bg); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 6px; box-shadow: 0 -8px 24px -18px rgba(0,0,0,.35); } .action-bar a { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; border-radius: var(--r-sm); text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--ink); border: 1px solid var(--line); } .action-bar a.primary { background: var(--button-color); color: var(--on-accent); border-color: transparent; } .action-bar .icon { width: 1.15em; height: 1.15em; } body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); } } /* ---------- Responsive ---------- */ @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } .hero h1 { max-width: 14ch; } .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-feature, .price-teaser, .why, .faq, .split, .contact-grid, .legal { grid-template-columns: 1fr; } .why-intro, .contact-card, .toc { position: static; } .svc-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-trio li:last-child { grid-column: 1 / -1; } .svc-list { grid-template-columns: 1fr; } .svc-list li:nth-child(2) { border-top: 1px solid var(--line); padding-top: 1.4rem; } .process { grid-template-columns: 1fr; gap: 0; } .process::before, .process::after { top: 24px; bottom: 24px; left: 23px; right: auto; width: 2px; height: auto; transform-origin: top; transform: scaleY(var(--progress, 1)); } .process li { display: grid; grid-template-columns: 48px 1fr; column-gap: 1.1rem; padding-bottom: 1.75rem; } .process li::before { grid-row: span 2; margin: 0; } .cta-inner { grid-template-columns: 1fr; } .cta-inner img { height: 76px; } .cta-actions { flex-direction: row; flex-wrap: wrap; } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-detail, .svc-detail.is-reverse { grid-template-columns: 1fr; } .svc-detail.is-reverse .illus { order: 0; } .svc-detail .illus { position: static; } .estimator { grid-template-columns: 1fr; } .rate-tables { grid-template-columns: 1fr; } .map-frame { aspect-ratio: 4 / 3; } .map-card { position: static; max-width: none; box-shadow: none; margin-bottom: 1rem; } .toc { display: none; } } @media (max-width: 640px) { .hero-fig .lbls { display: none; } .hero-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; list-style: none; margin-top: 1rem; font-size: .86rem; color: var(--muted); } .hero-legend li { display: flex; align-items: center; gap: .5rem; } .hero-legend i { width: 14px; height: 10px; border: 1px solid var(--ink); flex: none; } .trust-list, .svc-trio, .why-grid, .phil, .dual, .two-lists, .form-grid, .footer-grid { grid-template-columns: 1fr; } .svc-trio li:last-child { grid-column: auto; } .svc-list li { grid-template-columns: 110px 1fr; gap: 1rem; } .hero-actions .btn { flex: 1 1 auto; } .range-row { grid-template-columns: 1fr 100px; } .map-frame { aspect-ratio: 1 / 1; } .mini-table th, .mini-table td { padding: .85rem .9rem; } } /* ---------- Motion preferences ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .hero-fig .rain { display: none; } } @media print { .site-header, .action-bar, .cta-band, .site-footer .footer-cta, .map-block { display: none !important; } body { padding: 0; } } .rate-table small, .mini-table small { color: var(--muted); font-weight: 500; } .contact-card .btn-row .btn { flex: 1 1 auto; } /* Mobile: crop the hero drawing to the construction itself (labels move to the legend) */ @media (max-width: 640px) { .hero-fig { overflow: hidden; } .hero-fig svg { width: 150%; max-width: none; margin-left: -6%; } html[lang="ta"] .action-bar a { font-size: .78rem; gap: .3rem; padding: 0 .2rem; } }