/* ============================================================ ILAEQUOR — Tag-only stylesheet ──────────────────────────────────────────────────────────── Visual language : Ilaequor brand (blue · Dubai font · light-default). Structural approach : Tag-only selectors. No classes on page elements. Only the cookie-consent banner uses classes (scoped under .ic-consent). Theme switching : A attribute (set by a small JS toggle) flips the CSS custom properties for the dark palette. HTML CONVENTIONS THIS STYLESHEET ASSUMES ────────────────────────────────────────── ← toggle class added by JS
HERO (centered) eyebrow

Headline accent

Lede copy...

section eyebrow + heading Services

Heading accent

Lede...

PROCESS
...

  1. ...

    ...

STATS / FIGURES
FAQ (no JS, native details)
...
Q

A

PRICING TABLE
...
......
...
...
Buy Basic Buy Full
============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Dubai:wght@300;400;500;700&display=swap"); /* ─── 1. CUSTOM PROPERTIES ────────────────────────────────── */ :root { --green: #006bc9; --green-dim: #0056a3; --green-glow: rgba(0, 107, 201, 0.15); --green-glow-2: rgba(0, 107, 201, 0.3); --green-glow-3: rgba(0, 107, 201, 0.05); /* Light (default) */ --bg: #f5f0f5; --bg-alt: #efeaef; --bg-nav: rgba(245, 240, 245, 0.92); --surface: #ffffff; --surface2: #f0f0eb; --border: rgba(0, 0, 0, 0.08); --text: #111111; --text-muted: #555555; --text-dim: #999999; --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.08); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.1); --font: "Dubai", "Inter", system-ui, sans-serif; --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; --trans: 0.25s ease; --gutter: clamp(1.25rem, 4vw, 1.5rem); --maxw: 1100px; --maxw-mid: 900px; --maxw-narrow: 680px; --section: clamp(3rem, 8vw, 5rem); } [data-theme="dark"] { --bg: #0a0a0a; --bg-alt: #111111; --bg-nav: rgba(10, 10, 10, 0.88); --surface: #111111; --surface2: #161616; --border: rgba(255, 255, 255, 0.07); --text: #e8e8e8; --text-muted: #888888; --text-dim: #555555; --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5); } /* ─── 2. RESET ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* ─── 3. BODY ───────────────────────────────────────────────── */ body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background var(--trans), color var(--trans); } /* ─── 4. MEDIA ──────────────────────────────────────────────── */ img, svg, video { display: block; max-width: 100%; height: auto; } /* ─── 5. LINKS ──────────────────────────────────────────────── */ a { color: var(--green); text-decoration: none; transition: opacity var(--trans), color var(--trans); } a:hover { opacity: 0.8; } /* Inline anchors in body copy get a soft underline. */ p a, li p a, dd a, td a { border-bottom: 1px solid var(--green-glow-2); padding-bottom: 1px; color: var(--green); } p a:hover, li p a:hover, dd a:hover, td a:hover { opacity: 1; border-bottom-color: var(--green); } /* ─── 6. TYPOGRAPHY ─────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); transition: color var(--trans); } h1 { font-size: clamp(2.2rem, 6vw, 4rem); } h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); } h3 { font-size: clamp(1.05rem, 2.5vw, 1.35rem); font-weight: 600; } h4 { font-size: 0.95rem; } h5 { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.85rem; } h6 { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); } /* inside headings = green accent. */ h1 em, h2 em, h3 em { font-style: normal; color: var(--green); } /* Body paragraphs. */ p { color: var(--text-muted); font-size: 1rem; line-height: 1.65; transition: color var(--trans); } /* Lede (first

after H1 / H2). */ h1 + p, h2 + p { font-size: clamp(1.05rem, 1.6vw, 1.15rem); max-width: 42rem; margin-top: 1rem; } /* = eyebrow label: uppercase, green, tracked. */ small { display: inline-block; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--green); margin-bottom: 0.6rem; } strong { font-weight: 700; color: var(--text); } em { font-style: italic; } /* = recommended pill badge. */ mark { background: var(--green); color: #000; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; } code, kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; background: var(--surface2); padding: 0.1em 0.4em; border: 1px solid var(--border); border-radius: 0.35rem; } hr { border: 0; height: 1px; background: var(--border); margin: 2rem 0; } ul + p, ol + p { margin-top: 2rem; } /* ─── 7. LISTS ──────────────────────────────────────────────── */ ul, ol { list-style: none; } /* ─── 8. DEFINITION LISTS ───────────────────────────────────── */ dl { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5rem; row-gap: 0; } dt, dd { padding: 0.6rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; transition: border-color var(--trans); } dt { color: var(--text-muted); } dd { color: var(--text); text-align: right; font-weight: 500; } dl > dt:last-of-type, dl > dd:last-of-type { border-bottom: 0; } /* ─── 9. TABLES ─────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; margin-top: 2rem; margin-bottom: 2rem; font-size: 0.92rem; } thead th { font-weight: 700; text-align: left; padding: 0.85rem 1rem; border-bottom: 2px solid var(--green); color: var(--text); background: var(--surface); vertical-align: bottom; } thead th:nth-child(n + 2) { text-align: center; } tbody td, tfoot td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-muted); transition: background var(--trans), border-color var(--trans); } tbody td:first-child { color: var(--text); font-weight: 600; } tbody td:nth-child(n + 2), tfoot td:nth-child(n + 2) { text-align: center; } tbody tr:hover td { background: var(--surface2); } tfoot td { border-bottom: 0; border-top: 2px solid var(--border); padding-top: 1.25rem; padding-bottom: 1.25rem; } /* Check / dash marks inside table cells. */ tbody td:not(:first-child) { /* ✓ and — are placed directly as text in the HTML */ } /* ─── 10. DETAILS / SUMMARY (FAQ accordion, no JS) ──────────── */ details { max-width: var(--maxw-narrow); margin: 0 auto 0.65rem; border-bottom: 1px solid var(--border); transition: border-color var(--trans); } summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; font-family: var(--font); font-size: 1rem; font-weight: 600; color: var(--text); transition: color var(--trans); } summary::-webkit-details-marker { display: none; } /* Green chevron. */ summary::after { content: ""; width: 0.5rem; height: 0.5rem; flex-shrink: 0; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: translateY(-2px) rotate(45deg); transition: transform 0.3s ease; } summary:hover { color: var(--green); } details[open] summary { color: var(--text); } details[open] summary::after { transform: translateY(2px) rotate(225deg); } details > p, details > div, details > ul { padding: 0 0 1.25rem; max-width: none; color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; } /* ─── 11. BUTTONS ───────────────────────────────────────────── */ /*

privacy / reassurance line

Two forms exist on the home page (hero + final CTA) sharing this markup. */ header > form, section > form { width: 100%; max-width: 30rem; margin: 1.75rem auto 0; display: flex; flex-direction: column; gap: 0.75rem; animation: fadeUp 0.5s 0.3s ease both; } header > form > div, section > form > div { display: flex; flex-direction: column; gap: 0.6rem; } @media (min-width: 480px) { header > form > div, section > form > div { flex-direction: row; align-items: flex-start; } } header > form label, section > form label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } header > form input[type="email"], section > form input[type="email"] { flex: 1; width: 100%; min-height: 48px; padding: 0.85rem 1.1rem; font: inherit; font-size: 0.95rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--trans), box-shadow var(--trans), background var(--trans); } header > form input[type="email"]::placeholder, section > form input[type="email"]::placeholder { color: var(--text-dim); } header > form input[type="email"]:focus-visible, section > form input[type="email"]:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-glow); } header > form input[type="email"]:invalid[aria-invalid="true"], section > form input[type="email"]:invalid[aria-invalid="true"] { border-color: #d64545; } header > form button[type="submit"], section > form button[type="submit"] { min-height: 48px; white-space: nowrap; flex-shrink: 0; } /* Honeypot field: hidden from real visitors, still reachable by bots. */ header > form input[name="website"], section > form input[name="website"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Consent checkbox: a real field, so (unlike the visually-hidden email label above) its label must stay visible and readable. */ header > form div:has(input[type="checkbox"]), section > form div:has(input[type="checkbox"]) { flex-direction: row; align-items: flex-start; gap: 0.6rem; } header > form input[type="checkbox"], section > form input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.15rem; accent-color: var(--green); } header > form div:has(input[type="checkbox"]) label, section > form div:has(input[type="checkbox"]) label { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; font-size: 0.82rem; line-height: 1.4; color: var(--text-dim); } header > form div:has(input[type="checkbox"]) label a, section > form div:has(input[type="checkbox"]) label a { color: var(--text-dim); text-decoration: underline; } /* Inline error message, shown beside/below the field. */ header > form div > p, section > form div > p { margin-top: 0.35rem; font-size: 0.82rem; color: #d64545; } /* Privacy / reassurance line under the whole form. */ header > form > p, section > form > p { font-size: 0.8rem; color: var(--text-dim); max-width: none; } /* Success state: form replaced by a single confirmation message. */ header > form p[role="status"], section > form p[role="status"] { font-size: 0.95rem; font-weight: 600; color: var(--green); } /* ============================================================ COOKIE CONSENT BANNER (class-scoped, from consent.css) Only this component uses classes. All tokens match :root above. ============================================================ */ .ic-consent[hidden] { display: none !important; } .ic-consent { position: fixed; inset: auto 0 0 0; z-index: 1000; display: flex; justify-content: center; padding: var(--gutter, 1rem); pointer-events: none; } .ic-consent__panel { pointer-events: auto; width: 100%; max-width: 720px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.4rem); font-family: var(--font); color: var(--text); } .ic-consent__eyebrow { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); margin-bottom: 0.5rem; } .ic-consent__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; color: var(--text); } .ic-consent__body { font-size: 0.85rem; line-height: 1.55; color: var(--text-muted); margin: 0 0 1rem; max-width: 62ch; } .ic-consent__body a { color: var(--green); border-bottom: 1px solid var(--green-glow-2); padding-bottom: 1px; text-decoration: none; } .ic-consent__body a:hover { opacity: 0.8; } .ic-consent__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .ic-consent__btn, .ic-consent__btn-ghost { font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; cursor: pointer; border-radius: 8px; border: 1px solid var(--green); background: var(--green); color: #000; transition: background var(--trans), color var(--trans), border-color var(--trans); } .ic-consent__btn:hover { background: var(--green-dim); border-color: var(--green-dim); } .ic-consent__btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .ic-consent__btn-ghost:hover { border-color: var(--green-glow-2); color: var(--text); } .ic-consent__btn:focus-visible, .ic-consent__btn-ghost:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .ic-consent__prefs { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.85rem; display: grid; gap: 0.65rem; } .ic-consent__prefs[hidden] { display: none; } .ic-consent__pref { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: start; padding: 0.55rem 0; border-bottom: 1px solid var(--border); } .ic-consent__pref:last-of-type { border-bottom: 0; } .ic-consent__pref-label { font-size: 0.82rem; font-weight: 600; color: var(--text); } .ic-consent__pref-desc { grid-column: 1 / -1; font-size: 0.75rem; line-height: 1.5; color: var(--text-muted); margin: 0; } .ic-consent__toggle { width: 36px; height: 20px; appearance: none; -webkit-appearance: none; background: var(--border); border: 1px solid var(--border); border-radius: 999px; position: relative; cursor: pointer; transition: background var(--trans); flex-shrink: 0; } .ic-consent__toggle::after { content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; background: var(--bg); border-radius: 50%; transition: transform var(--trans); } .ic-consent__toggle:checked { background: var(--green); border-color: var(--green); } .ic-consent__toggle:checked::after { transform: translateX(16px); } .ic-consent__toggle:disabled { opacity: 0.6; cursor: not-allowed; } .ic-consent__toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } @media (max-width: 540px) { .ic-consent { padding: 0.75rem; } .ic-consent__panel { padding: 1rem; } .ic-consent__actions { display: grid; grid-template-columns: 1fr; } .ic-consent__btn, .ic-consent__btn-ghost { width: 100%; } }