/* ============================================================ ILLUCRUM — Tag-only stylesheet ──────────────────────────────────────────────────────────── Visual language : Illucrum brand (green #00c96b · Dubai font · light-default / dark-toggle). 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: #00c96b; --green-dim: #00a356; --green-glow: rgba(0, 201, 107, 0.15); /* Light (default) */ --bg: #f5f5f0; --bg-alt: #efefea; --bg-nav: rgba(245, 245, 240, 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 rgba(0, 201, 107, 0.3); 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; max-width: 65ch; 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 { margin-bottom: 1rem; } /* ─── 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 ───────────────────────────────────────────── */ /*