/* CAP Middle East — services page Design tokens live on :root (dark) and are overridden by [data-theme="light"]. Theme is applied by the bootstrap script in before first paint. */ :root { color-scheme: dark; --page-solid: #050b16; --page-grad: radial-gradient(circle at 12% 4%, rgba(18,158,232,.18), transparent 30rem), radial-gradient(circle at 82% 8%, rgba(110,234,255,.10), transparent 28rem), linear-gradient(180deg, #050b16 0%, #07111f 44%, #081624 100%); --surface: linear-gradient(180deg, rgba(12,34,56,.92), rgba(7,20,34,.86)); --panel: linear-gradient(180deg, rgba(10,27,45,.94), rgba(7,20,34,.84)); --panel-2: linear-gradient(180deg, rgba(10,27,45,.90), rgba(7,20,34,.76)); --ink: #f7fbff; --text: #d9e8f7; --muted: #94a9bd; --body-copy: #aec3d8; --line: rgba(143,198,232,.18); --line-strong: rgba(117,217,255,.34); --acc: #6eeaff; --btn-grad: linear-gradient(135deg, #6eeaff, #4cb6ff); --btn-fg: #02111d; --acc-solid-bg: rgba(110,234,255,.94); --acc-solid-fg: #061523; --ghost-bg: rgba(255,255,255,.05); --input-bg: rgba(255,255,255,.055); --select-bg: #0a1b2d; --logo-plate: rgba(246,251,255,.94); --hero-bg: #020617; --hero-scrim: radial-gradient(circle at 50% 28%, rgba(15,23,42,.08), rgba(2,6,23,.42) 58%, rgba(2,6,23,.80) 100%), linear-gradient(180deg, rgba(2,6,23,.10), rgba(2,6,23,.52) 78%, rgba(2,6,23,.90)); --hero-ink: #f7fbff; --hero-lead: #c7d8e8; --shadow-lg: 0 30px 90px rgba(0,0,0,.26); --shadow-md: 0 18px 46px rgba(0,0,0,.22); --urgent-card: linear-gradient(180deg, rgba(46,28,10,.72), rgba(20,14,10,.78)); --urgent-line: rgba(255,171,74,.42); --urgent-copy: #e8d3b8; --warn: #ffab4a; --warn-ink: #ffd49a; --warn-bg: rgba(255,171,74,.09); --warn-line: rgba(255,196,120,.30); --warn-btn-fg: #241505; --plan-card: linear-gradient(180deg, rgba(8,42,70,.86), rgba(7,20,34,.90)); --enquiry-panel: radial-gradient(circle at 18% 10%, rgba(110,234,255,.16), transparent 24rem), linear-gradient(135deg, rgba(8,42,70,.96), rgba(7,20,34,.98)); --also-panel: radial-gradient(circle at 16% 12%, rgba(110,234,255,.10), transparent 26rem), linear-gradient(180deg, rgba(12,34,56,.94), rgba(7,20,34,.82)); --vendor-band: radial-gradient(circle at 24% 10%, rgba(110,234,255,.07), transparent 28rem), linear-gradient(180deg, rgba(7,20,34,.86), rgba(5,14,28,.94)); --ai-panel: linear-gradient(180deg, rgba(7,20,34,.82), rgba(5,14,28,.94)); --ai-card: linear-gradient(180deg, rgba(9,29,48,.88), rgba(7,20,34,.66)); --fab-bg: rgba(5,13,26,.92); --mono-note: #ffd49a; --footer-legal: #7d90a4; --img-frame: #071727; --acc-maintenance: #6eeaff; --acc-infrastructure: #4cb6ff; --acc-repairs: #ffab4a; --acc-data: #6af3bd; --acc-security: #7f93ff; --radius-xl: 32px; --radius-lg: 26px; --radius-md: 16px; } [data-theme="light"] { color-scheme: light; --page-solid: #f2f6fa; --page-grad: radial-gradient(circle at 12% 4%, rgba(18,158,232,.10), transparent 30rem), radial-gradient(circle at 82% 8%, rgba(18,158,232,.05), transparent 28rem), linear-gradient(180deg, #f3f7fb 0%, #eef4f9 44%, #f5f9fc 100%); --surface: linear-gradient(180deg, #fff, #fbfdff); --panel: linear-gradient(180deg, #fff, #f7fbfe); --panel-2: linear-gradient(180deg, #fff, #f8fbfe); --ink: #08202f; --text: #2b4256; --muted: #5b7488; --body-copy: #41586c; --line: rgba(8,32,46,.13); --line-strong: rgba(15,134,196,.32); --acc: #0a6c96; --btn-grad: linear-gradient(135deg, #129ee8, #0d6cbe); --btn-fg: #fff; --acc-solid-bg: #0f86c4; --acc-solid-fg: #fff; --ghost-bg: rgba(8,32,46,.045); --input-bg: #fff; --select-bg: #fff; --logo-plate: #fff; --hero-bg: #e9f1f8; --hero-scrim: linear-gradient(180deg, rgba(243,247,251,.90), rgba(240,246,251,.94) 60%, rgba(243,247,251,.97)); --hero-ink: #08202f; --hero-lead: #3c5670; --shadow-lg: 0 24px 60px rgba(8,32,46,.10); --shadow-md: 0 14px 34px rgba(8,32,46,.08); --urgent-card: linear-gradient(180deg, #fff5e6, #fffaf3); --urgent-line: rgba(168,98,16,.34); --urgent-copy: #6b4a1e; --warn: #b76b12; --warn-ink: #7d4a0d; --warn-bg: rgba(255,171,74,.14); --warn-line: rgba(168,98,16,.26); --warn-btn-fg: #fff; --plan-card: linear-gradient(180deg, #eaf6fd, #f7fbfe); --enquiry-panel: radial-gradient(circle at 18% 10%, rgba(18,158,232,.10), transparent 24rem), linear-gradient(135deg, #fff, #f1f8fd); --also-panel: radial-gradient(circle at 16% 12%, rgba(18,158,232,.08), transparent 26rem), linear-gradient(180deg, #fff, #f6fafd); --vendor-band: linear-gradient(180deg, #fff, #f6fafd); --ai-panel: linear-gradient(180deg, #fff, #f6fafd); --ai-card: linear-gradient(180deg, #fff, #f4f9fd); --fab-bg: rgba(255,255,255,.94); --mono-note: #a2560b; --footer-legal: #55697b; --img-frame: #e6eef5; /* Accents are darkened well past their dark-mode values: these carry 11px/850 chip labels, which need 4.5:1 under WCAG AA. Do not lighten without re-measuring. */ --acc-maintenance: #0a6183; --acc-infrastructure: #1a539d; --acc-repairs: #8a4c07; --acc-data: #0a6a4f; --acc-security: #3b47ad; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { max-width: 100%; overflow-x: clip; } body { margin: 0; min-width: 320px; background: var(--page-solid); color: var(--text); font-family: "SF Pro Display", "Aptos", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--acc); text-decoration: none; } a:hover { color: var(--ink); } img { max-width: 100%; display: block; } input, textarea, select, button { font: inherit; } :focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; } h1, h2, h3, p { margin-top: 0; } .page { background: var(--page-grad); min-height: 100vh; } .wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; } .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; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font-weight: 900; cursor: pointer; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--btn-grad); color: var(--btn-fg); } .btn--ghost { border-color: var(--line-strong); background: var(--ghost-bg); color: var(--ink); font-weight: 850; } .btn--solid { background: var(--acc-solid-bg); color: var(--acc-solid-fg); min-height: 48px; padding: 0 20px; font-size: 14.5px; } .btn--warn { background: var(--warn); color: var(--warn-btn-fg); } .btn--warn-ghost { border-color: var(--urgent-line); background: var(--warn-bg); color: var(--warn-ink); font-weight: 850; } .btn--sm { min-height: 46px; padding: 0 18px; font-size: 14px; } /* ---------- header + hero ---------- */ .hero { position: relative; isolation: isolate; overflow: hidden; background: var(--hero-bg); } .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 56% 30%, rgba(25,209,255,.16), transparent 30rem), radial-gradient(circle at 18% 74%, rgba(22,131,255,.18), transparent 34rem), linear-gradient(rgba(145,241,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(145,241,255,.055) 1px, transparent 1px), #020617; background-size: auto, auto, 64px 64px, 64px 64px, auto; } .hero__bg canvas { display: block; width: 100%; height: 100%; } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: var(--hero-scrim); pointer-events: none; } .hero__inner { position: relative; z-index: 2; } .nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 0; } .brand { display: flex; align-items: center; gap: 13px; min-width: 0; color: inherit; } .brand img { width: 62px; height: 62px; object-fit: contain; } .brand__copy { display: grid; gap: 4px; line-height: 1; } .brand__copy strong { color: var(--hero-ink); font-size: 16px; letter-spacing: -.02em; } .brand__copy span { color: var(--acc); font-size: 11px; font-weight: 850; letter-spacing: .2em; text-transform: uppercase; } .nav__links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; color: var(--hero-lead); font-weight: 700; } .nav__link:hover { border-color: var(--line); background: var(--ghost-bg); } .nav__link[aria-current="page"] { color: var(--hero-ink); border-color: var(--line-strong); background: var(--ghost-bg); font-weight: 800; } .nav__phone { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--btn-grad); color: var(--btn-fg); font-weight: 850; } .theme-toggle { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--ghost-bg); color: var(--hero-ink); font-size: 17px; line-height: 1; cursor: pointer; } .hero__body { padding: clamp(32px, 5vw, 64px) 0 clamp(44px, 6vw, 76px); } .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var(--acc); font-weight: 850; letter-spacing: .13em; text-transform: uppercase; font-size: 11px; } .eyebrow::before { content: ""; width: 10px; height: 10px; border: 3px solid var(--acc); border-radius: 50%; } .hero h1 { max-width: 20ch; margin-bottom: 20px; color: var(--hero-ink); font-size: clamp(2.4rem, 6.2vw, 5rem); line-height: .94; letter-spacing: -.058em; text-wrap: balance; } .hero__lead { max-width: 58ch; margin-bottom: 36px; color: var(--hero-lead); font-size: clamp(1.02rem, 1.6vw, 1.3rem); line-height: 1.55; text-wrap: pretty; } .triage { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .triage__card { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--shadow-md); border: 1px solid var(--line-strong); } .triage__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--acc); } .triage__card--urgent { border-color: var(--urgent-line); background: var(--urgent-card); } .triage__card--urgent::before { background: var(--warn); } .triage__card--plan { background: var(--plan-card); } .triage__tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); } .triage__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .triage__card--urgent .triage__tag { color: var(--warn); } .triage__card--urgent .triage__tag::before { animation: capPulse 1.8s ease-in-out infinite; } .triage__card h2 { margin-bottom: 10px; color: var(--ink); font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.08; letter-spacing: -.035em; } .triage__card p { max-width: 42ch; margin-bottom: 20px; line-height: 1.55; font-size: 15px; color: var(--text); text-wrap: pretty; } .triage__card--urgent p { color: var(--urgent-copy); } .triage__actions { display: flex; flex-wrap: wrap; gap: 10px; } @keyframes capPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* ---------- vendor band ---------- */ .vendors { border-block: 1px solid var(--line); background: var(--vendor-band); --vendor-neutral: #d3e3f2; } [data-theme="light"] .vendors { --vendor-neutral: #21354f; } .vendors__row { padding: 56px 0; display: flex; flex-direction: column; gap: 28px; } .vendors__title { color: var(--ink); font-size: 22px; font-weight: 900; line-height: 1.3; } .vendors__note { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; } .vendors__marquee { position: relative; overflow: hidden; padding: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .vendors__track { display: flex; align-items: center; gap: 56px; width: max-content; animation: vendors-scroll 46s linear infinite; } .vendors__marquee:hover .vendors__track { animation-play-state: paused; } .vendors__track svg { height: 58px; width: auto; flex: none; display: block; overflow: visible; color: var(--vendor-neutral); } @keyframes vendors-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 28px)); } } @media (prefers-reduced-motion: reduce) { .vendors__track { animation: none; } } /* ---------- finder ---------- */ .section { padding: clamp(46px, 6vw, 76px) 0 0; } .finder { padding: clamp(56px, 7vw, 92px) 0 20px; } .panel { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--panel); box-shadow: var(--shadow-lg); padding: clamp(22px, 3vw, 32px); } .section-label { display: inline-flex; margin-bottom: 12px; color: var(--acc); font-weight: 850; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; } .finder__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; align-items: end; margin-bottom: 22px; } .finder__head h2 { margin: 0; color: var(--ink); font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.045em; text-wrap: balance; } .finder__count { margin: 12px 0 0; color: var(--muted); font-weight: 700; font-size: 14.5px; } .field-label { display: block; font-size: 12px; font-weight: 850; color: var(--acc); margin-bottom: 8px; letter-spacing: .06em; text-transform: uppercase; } .search { width: 100%; height: 52px; border-radius: 999px; border: 1px solid var(--line-strong); padding: 0 20px; color: var(--ink); background: var(--input-bg); font-size: 15px; outline: none; } .search:focus { border-color: var(--acc); } /* Without this the UA default grey fails AA on the dark card (and looks wrong). --muted clears 4.5:1 in both themes. */ .search::placeholder { color: var(--muted); opacity: 1; } .tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; } .tab { min-height: 44px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--ghost-bg); color: var(--text); font-weight: 850; font-size: 13.5px; line-height: 1; cursor: pointer; } .tab:hover { border-color: var(--line-strong); } .tab[aria-selected="true"] { background: var(--acc); border-color: var(--acc); color: var(--btn-fg); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; align-items: stretch; } .card { --a: var(--acc); position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-md); color: inherit; transition: transform 180ms cubic-bezier(.22,1,.36,1), border-color 180ms ease; } .card:hover { transform: translateY(-3px); border-color: var(--line-strong); } .card[hidden] { display: none; } .card[data-cat="maintenance"] { --a: var(--acc-maintenance); } .card[data-cat="infrastructure"] { --a: var(--acc-infrastructure); } .card[data-cat="repairs"] { --a: var(--acc-repairs); } .card[data-cat="data"] { --a: var(--acc-data); } .card[data-cat="security"] { --a: var(--acc-security); } .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--a); z-index: 1; } .card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 88% -6%, color-mix(in oklab, var(--a) 16%, transparent), transparent 14rem); } .card__body { position: relative; display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 20px 18px 18px; } .chip { width: fit-content; border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--a); border: 1px solid color-mix(in oklab, var(--a) 42%, transparent); background: color-mix(in oklab, var(--a) 15%, transparent); } .card__body h3 { margin: 0; color: var(--ink); font-size: 18.5px; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; } .card__body p { margin: 0; color: var(--body-copy); line-height: 1.5; font-size: 14px; text-wrap: pretty; } .card__more { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 7px; color: var(--a); font-size: 13.5px; font-weight: 900; } .empty { margin-top: 18px; padding: 22px; border-radius: 18px; background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); font-weight: 750; line-height: 1.5; } .empty[hidden] { display: none; } .strip { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: center; } .strip p { margin: 0; max-width: 48ch; color: var(--muted); line-height: 1.55; font-size: 15px; text-wrap: pretty; } .strip__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .strip__actions .btn { min-height: 48px; padding: 0 20px; font-size: 14.5px; } /* ---------- detail ---------- */ .details__head { max-width: 760px; margin-bottom: 40px; } .details__head h2 { margin-bottom: 14px; color: var(--ink); font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: .98; letter-spacing: -.05em; text-wrap: balance; } .details__head p { margin: 0; max-width: 62ch; color: var(--muted); line-height: 1.65; font-size: 16.5px; text-wrap: pretty; } .details { display: grid; gap: clamp(20px, 3vw, 34px); } .detail { --a: var(--acc); scroll-margin-top: 20px; border: 1px solid var(--line); border-radius: 30px; background: var(--panel-2); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-md); } .detail[data-cat="maintenance"] { --a: var(--acc-maintenance); } .detail[data-cat="infrastructure"] { --a: var(--acc-infrastructure); } .detail[data-cat="repairs"] { --a: var(--acc-repairs); border-color: color-mix(in oklab, var(--a) 30%, transparent); } .detail[data-cat="data"] { --a: var(--acc-data); border-color: color-mix(in oklab, var(--a) 30%, transparent); } .detail[data-cat="security"] { --a: var(--acc-security); } .detail--split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px, 3vw, 38px); align-items: center; } .detail--split.detail--media-first > .detail__media { order: -1; } .detail__chip { display: inline-flex; margin-bottom: 12px; border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--a); border: 1px solid color-mix(in oklab, var(--a) 42%, transparent); background: color-mix(in oklab, var(--a) 16%, transparent); } .detail h3 { margin-bottom: 12px; color: var(--ink); font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -.04em; line-height: 1.06; } .detail--compact h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); letter-spacing: -.03em; line-height: 1.1; } .detail__intro { margin-bottom: 20px; color: var(--text); line-height: 1.6; font-size: 16px; text-wrap: pretty; } .kv { display: grid; gap: 15px; } .kv p { margin: 0; color: var(--body-copy); line-height: 1.6; font-size: 14.5px; } /* Authored as

, so this must out-specify `.kv p` above. */ .kv .kv__label { color: var(--a); font-size: 11.5px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px; } .warn-box { border-radius: var(--radius-md); border: 1px solid var(--warn-line); background: var(--warn-bg); padding: 15px 16px; } .kv .warn-box .kv__label, .warn-box .kv__label { color: var(--warn-ink); font-weight: 900; } .warn-box p { color: var(--warn-ink); } .detail .btn { margin-top: 22px; } .detail__media { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--img-frame); } .detail__media img { width: 100%; height: 100%; object-fit: cover; } /* Placeholder until real photography is supplied — replace the with an . */ .photo-todo { width: 100%; height: 100%; display: grid; place-content: center; gap: 6px; padding: 20px; text-align: center; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background-image: repeating-linear-gradient(135deg, color-mix(in oklab, var(--muted) 12%, transparent) 0 8px, transparent 8px 16px); } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 22px); } /* ---------- portfolio ---------- */ .portfolio__head { max-width: 760px; margin-bottom: 28px; } .portfolio__head h2 { margin-bottom: 14px; color: var(--ink); font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: .98; letter-spacing: -.05em; text-wrap: balance; } .portfolio__head p { margin: 0; max-width: 62ch; color: var(--muted); line-height: 1.65; font-size: 16.5px; text-wrap: pretty; } .portfolio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .portfolio__card { display: flex; flex-direction: column; overflow: hidden; text-align: left; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-md); color: inherit; cursor: pointer; transition: transform 180ms cubic-bezier(.22,1,.36,1), border-color 180ms ease; } .portfolio__card:hover { transform: translateY(-3px); border-color: var(--line-strong); } .portfolio__card:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; } .portfolio__media { aspect-ratio: 4 / 3; background: var(--img-frame); } .portfolio__body { position: relative; display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 20px 18px 18px; } .portfolio__loc { margin: 0; color: var(--muted); font-size: 13.5px; font-weight: 650; } .portfolio__desc { margin: 0; color: var(--body-copy); line-height: 1.5; font-size: 14px; text-wrap: pretty; } .portfolio__body .card__more { margin-top: auto; padding-top: 12px; } .portfolio__cta { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 24px; background: var(--ghost-bg); padding: clamp(20px, 2.6vw, 28px); } .portfolio__cta h3 { margin: 0 0 6px; color: var(--ink); font-size: 19px; letter-spacing: -.02em; } .portfolio__cta p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; } .portfolio__cta .btn { flex-shrink: 0; } /* ---------- project modal ---------- */ .pmodal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; } .pmodal[hidden] { display: none; } .pmodal__backdrop { position: absolute; inset: 0; background: rgba(2,6,23,.72); backdrop-filter: blur(4px); } [data-theme="light"] .pmodal__backdrop { background: rgba(8,32,46,.45); } .pmodal__dialog { position: relative; z-index: 1; width: min(980px, 100%); max-height: min(720px, 92vh); overflow: auto; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.3fr); border-radius: var(--radius-xl); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .pmodal__close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--fab-bg); color: var(--ink); font-size: 18px; line-height: 1; display: grid; place-items: center; cursor: pointer; } .pmodal__info { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; } .pmodal__info h3 { margin: 0 0 10px; color: var(--ink); font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; } .pmodal__loc { margin: 0 0 16px; color: var(--muted); font-size: 14px; font-weight: 650; } .pmodal__desc { margin: 0 0 20px; color: var(--body-copy); line-height: 1.55; font-size: 14.5px; text-wrap: pretty; } .pmodal__deliv-label { margin: 0 0 10px; color: var(--acc); font-weight: 850; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } .pmodal__checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .pmodal__checklist li { display: flex; align-items: flex-start; gap: 9px; color: var(--text); font-size: 14px; line-height: 1.4; } .pmodal__checklist li::before { content: "\2713"; flex-shrink: 0; color: var(--acc); font-weight: 900; } .pmodal__media { position: relative; background: var(--img-frame); display: flex; flex-direction: column; padding: 14px; gap: 10px; } .pmodal__stage { position: relative; flex: 1; border-radius: 16px; overflow: hidden; background: var(--img-frame); min-height: 280px; } .pmodal__stage .photo-todo { font-size: 11px; } .pmodal__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--fab-bg); color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 18px; } .pmodal__nav--prev { left: 10px; } .pmodal__nav--next { right: 10px; } .pmodal__thumbs { display: flex; gap: 8px; overflow-x: auto; } .pmodal__thumb { flex-shrink: 0; width: 76px; height: 56px; border-radius: 10px; overflow: hidden; padding: 0; border: 2px solid transparent; cursor: pointer; background: var(--img-frame); } .pmodal__thumb[aria-current="true"] { border-color: var(--acc); } .pmodal__thumb .photo-todo { font-size: 8px; padding: 4px; } @media (max-width: 900px) { .portfolio__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .pmodal__dialog { grid-template-columns: 1fr; } .pmodal__close { background: var(--panel); } } @media (max-width: 620px) { .portfolio__grid { grid-template-columns: 1fr; } .portfolio__cta { flex-direction: column; align-items: flex-start; } } /* ---------- also covered ---------- */ .also { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--also-panel); padding: clamp(24px, 3.4vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; align-items: start; } .also h2 { margin-bottom: 12px; color: var(--ink); font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; } .also p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15.5px; text-wrap: pretty; } .also__chips { display: flex; flex-wrap: wrap; gap: 9px; } .also__chips li { list-style: none; border-radius: 999px; padding: 10px 13px; color: var(--text); font-weight: 750; font-size: 13.5px; background: color-mix(in oklab, var(--acc) 10%, transparent); border: 1px solid color-mix(in oklab, var(--acc) 26%, transparent); } .also__chips { margin: 0; padding: 0; } /* ---------- enquiry ---------- */ .enquiry { border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--enquiry-panel); padding: clamp(24px, 3.6vw, 44px); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; align-items: start; } .enquiry h2 { margin-bottom: 14px; color: var(--ink); font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; } .enquiry__lead { max-width: 46ch; margin-bottom: 24px; color: var(--text); line-height: 1.6; font-size: 16px; text-wrap: pretty; } .contact-list { display: grid; gap: 10px; } .contact-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-radius: var(--radius-md); padding: 15px 17px; background: var(--input-bg); border: 1px solid var(--line); color: inherit; } .contact-row:hover { border-color: var(--line-strong); } .contact-row small { display: block; color: var(--acc); font-weight: 850; margin-bottom: 3px; font-size: 12px; } .contact-row b { color: var(--ink); font-size: 15.5px; } .contact-row span:last-child { color: var(--acc); font-weight: 900; font-size: 13px; } .locality { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; } .locality__label { color: var(--acc); font-size: 11.5px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; } .locality p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14.5px; } .todo { color: var(--mono-note); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .form { display: grid; gap: 13px; } .form label { display: grid; gap: 7px; font-size: 12px; color: var(--acc); font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } .form input, .form select, .form textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 14px; padding: 13px 14px; background: var(--input-bg); color: var(--ink); font-size: 15px; font-weight: 400; letter-spacing: normal; text-transform: none; } .form select { background: var(--select-bg); } .form textarea { min-height: 116px; resize: vertical; line-height: 1.5; } .form input::placeholder, .form textarea::placeholder { color: var(--muted); opacity: 1; } .form button { min-height: 52px; border: 0; border-radius: 999px; background: var(--btn-grad); color: var(--btn-fg); font-weight: 900; font-size: 15px; cursor: pointer; } .form__note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; } /* ---------- ai + footer ---------- */ .ai { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ai-panel); padding: clamp(22px, 3vw, 32px); display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; align-items: center; } .ai h2 { margin-bottom: 10px; color: var(--ink); font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1.1; letter-spacing: -.035em; } .ai p { margin: 0; max-width: 52ch; color: var(--muted); line-height: 1.6; font-size: 14.5px; text-wrap: pretty; } .ai__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; } .ai__option { min-height: 84px; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--ai-card); color: inherit; } .ai__option img { width: 48px; height: 48px; object-fit: contain; border-radius: 13px; padding: 7px; background: var(--logo-plate); } .ai__option img.is-pixel { image-rendering: pixelated; } .ai__option img.is-cover { padding: 0; object-fit: cover; background: #fff; } .ai__option strong { display: block; color: var(--ink); font-size: 15px; line-height: 1.15; } .ai__option small { display: block; margin-top: 5px; color: var(--muted); font-size: 12.5px; line-height: 1.35; } .footer { margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); padding: 28px 0 40px; } .footer .wrap { display: grid; gap: 14px; color: var(--muted); font-size: 14px; } .footer__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer__links { display: flex; gap: 18px; flex-wrap: wrap; } .footer__legal { color: var(--footer-legal); font-size: 12.5px; line-height: 1.6; } .fab { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 10px; } .fab__call { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--fab-bg); color: var(--acc); font-size: 19px; font-weight: 900; backdrop-filter: blur(14px); } .fab__wa { display: inline-flex; align-items: center; min-height: 54px; padding: 0 20px; border-radius: 999px; background: var(--btn-grad); color: var(--btn-fg); font-weight: 900; font-size: 14.5px; } /* ---------- responsive ---------- */ @media (max-width: 860px) { .detail--split.detail--media-first > .detail__media { order: 0; } .strip__actions { justify-content: flex-start; } } @media (max-width: 620px) { .wrap { width: min(100% - 28px, 1180px); } .brand img { width: 52px; height: 52px; } .nav { padding: 14px 0; } .nav__link { min-height: 42px; padding: 0 11px; font-size: 14px; } .nav__phone { order: 3; } .btn { width: 100%; } .triage__actions .btn { width: 100%; } .panel, .also, .enquiry { padding: 20px; border-radius: 22px; } .detail { padding: 20px; border-radius: 22px; } .footer { padding-bottom: 104px; } .fab { right: 12px; bottom: 12px; left: 12px; flex-direction: row; } .fab__wa { flex: 1; justify-content: center; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }