/* ZULFAA — official site stylesheet. Palette and typefaces are the app's own tokens (src/index.css). No third-party requests: the fonts are served from this repository. */ @font-face { font-family: "Fredoka"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/fredoka-latin.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2"); } @font-face { font-family: "Cairo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/cairo-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC; } :root { --cream: #fef9f0; --cream-deep: #f8efe0; --teal: #2a8a80; --teal-deep: #1a5a52; --teal-soft: #d0ebe8; --gold: #e6b84c; --gold-soft: #f7e6bd; --gold-ink: #9a6c10; --ink: #33423d; --ink-soft: #5c6964; --radius: 1.5rem; --shell: 62rem; --shell-head: 74rem; /* the header row may run wider than the reading column */ /* The deep band — shared by the screenshot showcase and the footer, so the two dark surfaces are one material and cannot drift apart. */ --band-top: #1c5f56; --band-mid: #164b45; --band-deep: #0e332e; --band-edge: rgba(230, 184, 76, 0.28); --on-band: rgba(254, 249, 240, 0.78); --on-band-strong: var(--cream); /* 0.62 is the floor: below it the quiet line drops under 4.5:1 against the lightest part of the band, and it is small text. */ --on-band-soft: rgba(254, 249, 240, 0.62); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* The eight-point star lattice, at a whisper — the app's own geometry. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55; background-color: var(--cream); background-image: radial-gradient(60rem 32rem at 50% -10rem, rgba(42, 138, 128, 0.12), transparent 70%), url("star.svg"); background-repeat: no-repeat, repeat; } h1, h2, h3 { font-family: "Fredoka", ui-sans-serif, system-ui, sans-serif; color: var(--teal-deep); line-height: 1.25; font-weight: 600; margin: 0; } a { color: var(--teal-deep); text-underline-offset: 0.2em; } a:hover { color: var(--teal); } img { max-width: 100%; height: auto; } .shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 1.25rem; } /* ── header ───────────────────────────────────────────────────────────── One row: [menu button] brand … primary nav … language menu. Above the breakpoint the primary nav is inline. At and below it (68.75rem = 1100px: tablets, phones, and the narrowest laptops, where the five Dutch labels no longer fit beside the brand) the nav folds into a panel under a menu button. The button's aria-expanded is the only state: the stylesheet reads it, and so does nav.js. Everything collapsed is gated on `html.js`, which the one-line script in sets before the body is parsed. With scripting off the class is absent, the buttons stay hidden, and the links simply wrap onto a second row - the page is fully navigable without a single script. */ .site-head { position: relative; z-index: 30; /* the open panels sit over the hero; the lightbox (100) stays above */ padding: 1.25rem 0 0.5rem; } .site-head .shell { --head-pad: 1.25rem; /* the shell padding, shared with the menu panel below */ position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; max-width: var(--shell-head); padding-inline: var(--head-pad); } .brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--teal-deep); margin-inline-end: auto; } .brand img { width: 2.75rem; height: 2.75rem; } .brand-name { font-family: "Fredoka", ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.14em; text-transform: uppercase; } .brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 0.5rem; } /* visually hidden, still read out - the "Language:" prefix on the menu button */ .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* the round header controls share one material */ .nav-toggle, .lang-btn { display: none; /* enhanced in; see html.js below */ align-items: center; justify-content: center; /* 2.25rem = 36px. The controls sit beside a 44px brand mark and a 0.88rem nav row; at 2.75rem they out-weighed both and the header read as three competing blocks instead of a brand with two quiet controls. */ min-height: 2.25rem; margin: 0; border: 1px solid rgba(42, 138, 128, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: var(--teal-deep); font: inherit; font-weight: 600; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .nav-toggle:hover, .lang-btn:hover { background: var(--cream-deep); border-color: rgba(42, 138, 128, 0.32); } .nav-toggle:focus-visible, .lang-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .nav-toggle[aria-expanded="true"], .lang-btn[aria-expanded="true"] { background: var(--teal-soft); border-color: rgba(42, 138, 128, 0.32); } /* ── the drawer wrapper ── Above the collapsed breakpoint it is not a box at all: `display: contents` hands `.site-nav` and `.lang-switch` straight to `.shell`, so the desktop header is laid out exactly as it was before the drawer existed. Its own furniture — the title row, the close button, the backdrop — is rendered on every page and shown only inside the drawer. */ .drawer { display: contents; } .drawer-top, .drawer-close, .scrim { display: none; } /* ── primary nav ── */ .site-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 0.3rem; font-size: 0.88rem; } .site-nav a { text-decoration: none; color: var(--ink-soft); padding: 0.35rem 0.75rem; border-radius: 999px; font-weight: 600; white-space: nowrap; } .site-nav a:hover { background: var(--cream-deep); color: var(--teal-deep); } .site-nav a[aria-current="page"] { background: var(--teal-soft); color: var(--teal-deep); } .site-nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ── the menu button ── Three bars that fold into a cross. Symmetric, so it needs no mirroring. */ .nav-toggle { width: 2.25rem; padding: 0; flex: none; } .nav-toggle .bars { position: relative; display: block; width: 1rem; height: 0.7rem; } .nav-toggle .bar { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: top 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .nav-toggle .bar:nth-child(1) { top: 0; } .nav-toggle .bar:nth-child(2) { top: calc(50% - 1px); } .nav-toggle .bar:nth-child(3) { top: calc(100% - 2px); } /* The bars deliberately DO NOT fold into a cross while the drawer is open. The drawer opens against the opposite edge and carries its own close button; morphing the header button as well put a second, detached X on the far side of a dimmed page, which read as debris rather than as a control. The button sits behind the backdrop while the drawer is open and is not the way back out — the close button, the backdrop, Escape and a link are. */ /* ── language menu ── Without script: a pill row of three plain links, as before. With script: a button showing the current language, and the same three links as a drop-down menu beneath it. Same anchors either way, so a search engine and a reader with scripting off both get every alternate. */ .lang-switch { position: relative; display: flex; align-items: center; flex: none; } .lang-list { display: flex; align-items: center; gap: 0.15rem; margin: 0; padding: 0.2rem; list-style: none; border-radius: 999px; border: 1px solid rgba(42, 138, 128, 0.18); background: rgba(255, 255, 255, 0.7); font-size: 0.78rem; } .lang-list a { display: inline-flex; align-items: center; padding: 0.3rem 0.7rem; border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--ink-soft); white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; } .lang-list a:hover { background: var(--cream-deep); color: var(--teal-deep); } .lang-list a[aria-current="true"] { background: var(--teal-deep); color: var(--cream); } .lang-list a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Arabic in its own face wherever it appears in the switcher, on every page */ .lang-list a[lang="ar"], .lang-btn [lang="ar"] { font-family: "Cairo", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; } .lang-check { display: none; } .lang-btn { gap: 0.3rem; padding-block: 0.25rem; padding-inline: 0.6rem 0.45rem; font-size: 0.78rem; white-space: nowrap; } /* the globe reads as a mark beside the label, not as an illustration */ .lang-btn svg { flex: none; width: 0.9rem; height: 0.9rem; } .lang-btn .chev { width: 0.6rem; height: 0.6rem; opacity: 0.65; transition: transform 0.2s ease; } .lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); } .lang-code { display: none; } /* ── enhanced (html.js) ── */ html.js .lang-btn { display: inline-flex; } html.js .lang-list { position: absolute; top: calc(100% + 0.45rem); inset-inline-end: 0; z-index: 5; /* wide enough for "Nederlands" at 0.84rem and no wider; the old 11.5rem left a band of empty panel beside every label */ min-width: 9.5rem; flex-direction: column; align-items: stretch; gap: 0.05rem; padding: 0.3rem; border: 1px solid rgba(42, 138, 128, 0.14); border-radius: 0.85rem; background: rgba(255, 255, 255, 0.98); box-shadow: 0 1px 2px rgba(26, 90, 82, 0.06), 0 14px 32px -16px rgba(26, 90, 82, 0.32); font-size: 0.84rem; visibility: hidden; opacity: 0; transform: translateY(-0.35rem); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; } html.js .lang-btn[aria-expanded="true"] + .lang-list { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } html.js .lang-list a { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 0.5rem; color: var(--ink); } /* inside a panel the ring must hug the row: at a positive offset it crossed the panel's padding and broke its rounded edge */ html.js .lang-list a:focus-visible { outline-offset: -2px; } html.js .lang-list a:hover { background: var(--cream-deep); color: var(--teal-deep); } html.js .lang-list a[aria-current="true"] { background: var(--teal-soft); color: var(--teal-deep); } html.js .lang-list a[aria-current="true"] .lang-check { display: block; flex: none; width: 0.8rem; height: 0.8rem; } /* ── collapsed: tablets and phones — the side drawer ── The primary nav and the language switcher move into a panel that slides in from the READING END: the right in English and Dutch, the left in Arabic. `--drawer-out` is the only physical value in here; everything else is a logical property, so the mirroring is one line rather than a second set of rules. Above this breakpoint `.drawer` is `display: contents` and the shell lays its children out exactly as it did before the drawer existed. */ @media (max-width: 68.75rem) { html.js .nav-toggle { display: inline-flex; } html.js .drawer { --drawer-out: 100%; position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 60; display: flex; width: min(80vw, 18.5rem); flex-direction: column; gap: 0.15rem; padding: 0.8rem; background: var(--cream); border-inline-start: 1px solid rgba(42, 138, 128, 0.16); box-shadow: -18px 0 44px -24px rgba(26, 90, 82, 0.45); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transform: translateX(var(--drawer-out)); transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.26s; } /* `html.js` is where the 100% above is set, so the mirror has to out-specify it on the same element — `[dir="rtl"] .drawer` alone loses and the panel slides in from the wrong side in Arabic while still landing correctly, which is invisible in a screenshot of the OPEN state. */ html.js[dir="rtl"] .drawer { --drawer-out: -100%; } html.js .nav-toggle[aria-expanded="true"] ~ .drawer { visibility: visible; transform: none; transition-delay: 0s; } /* the backdrop; `hidden` is removed by nav.js, so with scripting off there is no scrim and no drawer — the links simply render inline */ html.js .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(20, 62, 57, 0.32); opacity: 0; visibility: hidden; transition: opacity 0.26s ease, visibility 0s linear 0.26s; } html.js .nav-toggle[aria-expanded="true"] ~ .scrim { opacity: 1; visibility: visible; transition-delay: 0s; } /* Just the close button, at the drawer's own reading end - nearest the edge the panel came from. No "Menu" caption: the panel is plainly a menu, and the word was the thing that leaked into the header when the stylesheet was a version behind the markup. */ html.js .drawer-top { display: flex; align-items: center; justify-content: flex-end; padding-block-end: 0.35rem; } html.js .drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid rgba(42, 138, 128, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: var(--teal-deep); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } html.js .drawer-close svg { width: 0.85rem; height: 0.85rem; } html.js .drawer-close:hover { background: var(--cream-deep); border-color: rgba(42, 138, 128, 0.32); } html.js .drawer-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } html.js .drawer .site-nav { flex-direction: column; gap: 0.1rem; font-size: 0.9rem; } html.js .drawer .site-nav a { display: flex; padding: 0.6rem 0.7rem; border-radius: 0.6rem; color: var(--ink); white-space: nowrap; } html.js .drawer .site-nav a:hover { background: var(--cream-deep); color: var(--teal-deep); } html.js .drawer .site-nav a[aria-current="page"] { background: var(--teal-soft); color: var(--teal-deep); } /* inside a panel the ring hugs the row rather than crossing its edge */ html.js .drawer .site-nav a:focus-visible, html.js .drawer .lang-list a:focus-visible { outline-offset: -2px; } /* ── the language selector inside the drawer ── Not a dropdown within a drawer, which would be a menu inside a menu: the three languages become one compact segmented row, always visible. The button that opens the desktop menu is not rendered here at all, and nav.js drops the menu semantics with it (see applyLangMode). */ html.js .drawer .lang-switch { margin-block-start: auto; padding-block-start: 0.7rem; } html.js .drawer .lang-switch::before { content: ""; display: block; height: 1px; margin-block-end: 0.6rem; background: rgba(42, 138, 128, 0.14); } html.js .drawer .lang-btn { display: none; } html.js .drawer .lang-list { position: static; display: flex; flex-direction: row; gap: 0.25rem; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 0.72rem; visibility: visible; opacity: 1; transform: none; transition: none; } /* content-sized, not three equal thirds: "Nederlands" is half again as wide as "English" and an equal third clipped it */ html.js .drawer .lang-list li { flex: 0 1 auto; min-width: 0; } html.js .drawer .lang-list a { justify-content: center; gap: 0.2rem; padding: 0.4rem 0.45rem; border: 1px solid rgba(42, 138, 128, 0.16); border-radius: 0.55rem; text-align: center; white-space: nowrap; } html.js .drawer .lang-list a[aria-current="true"] { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--cream); } /* The tick is the desktop menu's affordance; here the filled pill already says which language is current, so the check is redundant. It needs the full `a[aria-current="true"]` to out-specify the rule that shows it. */ html.js .drawer .lang-list a[aria-current="true"] .lang-check { display: none; } /* scripting off: the links wrap onto their own row beneath the brand */ html:not(.js) .site-nav { order: 3; flex-basis: 100%; } } /* Phones up to 420px: the language button shows the short form, the brand and the menu button tighten a little, so [menu] [brand] [language] stays on one row down to 320px in every language ("Nederlands" is the long one). */ @media (max-width: 26.25rem) { html.js .lang-btn .lang-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } html.js .lang-code { display: inline; } html.js .lang-btn { gap: 0.25rem; padding-inline: 0.5rem 0.4rem; } .site-head .shell { --head-pad: 1rem; gap: 0.5rem; } .brand { gap: 0.5rem; } .brand img { width: 2.4rem; height: 2.4rem; } .brand-name { font-size: 1.02rem; letter-spacing: 0.1em; } .nav-toggle { width: 2.5rem; min-height: 2.5rem; } } @media (prefers-reduced-motion: reduce) { .nav-toggle .bar, .lang-btn .chev, html.js .lang-list, html.js .site-nav { transition: none; } } /* ── Arabic ───────────────────────────────────────────────────────────── Cairo carries the Arabic; the Latin faces have no Arabic glyphs and Fredoka none at all, so Arabic pages lead with Cairo and let Latin words inside them fall through to the usual stack. The unicode-range on the Cairo @font-face means the Latin subset is never downloaded for it. */ html[lang="ar"] body, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .brand-name { font-family: "Cairo", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; } html[lang="ar"] body { line-height: 1.9; /* Arabic sits taller; give the diacritics room */ } html[lang="ar"] .showcase-eyebrow, html[lang="ar"] .car-status, html[lang="ar"] .lb-cap, html[lang="ar"] .brand-name { letter-spacing: normal; /* tracking breaks Arabic joining */ } /* the hero wordmark is already Arabic and already sized for it */ html[lang="ar"] .hero h1 { letter-spacing: 0.06em; } /* ── RTL ──────────────────────────────────────────────────────────────── The layout is built on logical properties, so most of it mirrors itself. These are the handful of physical offsets that cannot. */ [dir="rtl"] .car-prev { left: auto; right: clamp(0.35rem, 2vw, 1.75rem); } [dir="rtl"] .car-next { right: auto; left: clamp(0.35rem, 2vw, 1.75rem); } /* the chevrons point the way the reader travels */ [dir="rtl"] .car-arrow svg, [dir="rtl"] .lb-prev svg, [dir="rtl"] .lb-next svg { transform: scaleX(-1); } [dir="rtl"] .lb-close { right: auto; left: clamp(0.75rem, 3vw, 1.75rem); } /* The lightbox is a three-column grid, so RTL mirrors it on its own and "previous" lands on the reader's right, which is where it belongs. Nothing to override — only the absolutely positioned pieces above needed help. */ /* ── hero ───────────────────────────────────────────────────────────── */ .hero { text-align: center; padding: 2.5rem 0 1rem; } .hero-emblem { width: 9.5rem; height: 9.5rem; filter: drop-shadow(0 14px 30px rgba(26, 90, 82, 0.22)); } .wordmark-ar { font-family: "Cairo", serif; font-size: 2rem; color: var(--gold-ink); margin: 0.85rem 0 0; line-height: 1.5; } .hero h1 { font-size: clamp(2.4rem, 9vw, 3.6rem); letter-spacing: 0.1em; text-transform: uppercase; margin: 0.15rem 0 0; } .hero .tagline { font-size: clamp(1rem, 3.4vw, 1.2rem); color: var(--ink-soft); margin: 0.6rem auto 0; max-width: 34rem; } .rule { width: 8rem; height: 1px; margin: 1.75rem auto; border: 0; background: linear-gradient(to right, transparent, rgba(230, 184, 76, 0.75), transparent); } .lede { max-width: 44rem; margin: 0 auto; font-size: 1.05rem; color: var(--ink-soft); } .pill { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid rgba(230, 184, 76, 0.45); background: var(--gold-soft); color: var(--gold-ink); font-size: 0.85rem; font-weight: 700; } .pill::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--gold); } /* ── cards ──────────────────────────────────────────────────────────── */ section.band { padding: 2.5rem 0; } .section-title { font-size: 1.5rem; text-align: center; margin-bottom: 0.4rem; } .section-note { text-align: center; color: var(--ink-soft); font-size: 0.95rem; margin: 0 auto 2rem; max-width: 38rem; } .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .card { background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(42, 138, 128, 0.16); border-radius: var(--radius); padding: 1.4rem 1.35rem; box-shadow: 0 10px 28px -18px rgba(26, 90, 82, 0.45); } .card h3 { font-size: 1.05rem; margin-bottom: 0.35rem; } .card p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); } .card .glyph { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: 0.85rem; border-radius: 0.9rem; background: var(--teal-soft); color: var(--teal-deep); } .card .glyph svg { width: 1.3rem; height: 1.3rem; } .card.gold { border-color: rgba(230, 184, 76, 0.35); background: linear-gradient(to bottom right, #fdf7e8, var(--cream), #f6efdd); } .card.gold .glyph { background: var(--gold-soft); color: var(--gold-ink); } /* ── link row ───────────────────────────────────────────────────────── */ .linkrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.35rem; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.92rem; border: 1px solid rgba(42, 138, 128, 0.28); background: rgba(255, 255, 255, 0.8); color: var(--teal-deep); } .btn:hover { background: var(--teal-soft); } .btn.primary { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; } .btn.primary:hover { background: var(--teal); color: #fff; } /* ── documents (privacy / terms / support) ──────────────────────────── */ .doc-head { text-align: center; padding: 1.5rem 0 0.5rem; } .doc-head img { width: 4.5rem; height: 4.5rem; } .doc-head h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); margin-top: 0.75rem; } .doc-head .sub { color: var(--ink-soft); margin: 0.4rem 0 0; } .meta { display: inline-block; margin-top: 1rem; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--cream-deep); color: var(--ink-soft); font-size: 0.82rem; font-weight: 600; } .summary { max-width: 46rem; margin: 1.75rem auto 0; padding: 1.15rem 1.35rem; border-radius: var(--radius); border: 1px solid rgba(230, 184, 76, 0.35); background: linear-gradient(to bottom right, #fdf7e8, var(--cream)); font-size: 0.95rem; } .summary strong { color: var(--gold-ink); } .doc-body { max-width: 46rem; margin: 0 auto; padding: 2rem 0 1rem; } .doc-body p.intro { font-size: 1.02rem; color: var(--ink-soft); } .doc-body section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--cream-deep); } .doc-body section:first-of-type { border-top: 0; padding-top: 0; } .doc-body h2 { font-size: 1.2rem; margin-bottom: 0.5rem; } .doc-body h3 { font-size: 1rem; color: var(--ink); margin: 1.5rem 0 0.35rem; } .doc-body p { margin: 0 0 0.9rem; } .doc-body ul { margin: 0 0 0.9rem; padding-inline-start: 1.15rem; } .doc-body li { margin-bottom: 0.5rem; } .doc-body li strong { color: var(--teal-deep); } /* numbered instructions — the one place on the site with a real sequence */ .doc-body ol.steps { margin: 0 0 1.1rem; padding: 0; list-style: none; counter-reset: step; } .doc-body ol.steps li { position: relative; counter-increment: step; padding-inline-start: 2.35rem; margin-bottom: 0.7rem; } .doc-body ol.steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: -0.05rem; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--teal-soft); color: var(--teal-deep); font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; } .toc { margin: 2rem auto 0; max-width: 46rem; padding: 1.15rem 1.35rem; border-radius: var(--radius); background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(42, 138, 128, 0.16); } .toc h2 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.75rem; } .toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 1.5rem; font-size: 0.9rem; } .toc li { margin-bottom: 0.3rem; break-inside: avoid; } .contact-box { margin-top: 1.5rem; padding: 1.35rem; border-radius: var(--radius); background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(42, 138, 128, 0.2); } .contact-box .addr { font-weight: 700; font-size: 1.02rem; word-break: break-word; } .contact-box p:last-child { margin-bottom: 0; } /* ── footer ─────────────────────────────────────────────────────────── */ /* The same deep band as the screenshot showcase, so the page closes on the material it opened the showcase with. It is its own dark surface on every page, not only the homepage. */ .site-foot { position: relative; isolation: isolate; margin-top: 3rem; padding: 2.75rem 0 3rem; border-top: 1px solid var(--band-edge); text-align: center; font-size: 0.85rem; background-color: var(--band-mid); background-image: radial-gradient(38rem 18rem at 50% 0%, rgba(230, 184, 76, 0.12), transparent 70%), linear-gradient(168deg, var(--band-mid) 0%, var(--band-deep) 100%); color: var(--on-band); } .site-foot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("star-gold.svg"); background-repeat: repeat; opacity: 0.5; } .site-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.1rem; margin-bottom: 1.15rem; } .site-foot nav a { text-decoration: none; font-weight: 600; color: var(--on-band-strong); transition: color 0.25s ease; } .site-foot nav a:hover { color: var(--gold); } .site-foot nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 0.4rem; } .site-foot p { color: var(--on-band); } .site-foot .dev { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-band-strong); } /* the copyright line is the quietest thing on the page */ .site-foot p:last-child { margin-bottom: 0; color: var(--on-band-soft); } @media (max-width: 34rem) { .toc ol { columns: 1; } .hero { padding-top: 1.5rem; } .hero-emblem { width: 8rem; height: 8rem; } } /* ── screenshot showcase ──────────────────────────────────────────────── A deep-teal band, deliberately darker than the rest of the page: the screenshots are themselves cream-heavy, and on cream they would dissolve into the page. Full-bleed, so it reads as its own room. */ .showcase { position: relative; isolation: isolate; margin-top: 3.5rem; padding: 3.5rem 0 3rem; border-block: 1px solid var(--band-edge); background-color: var(--band-mid); background-image: radial-gradient(44rem 24rem at 50% -4rem, rgba(230, 184, 76, 0.16), transparent 68%), linear-gradient(168deg, var(--band-top) 0%, var(--band-mid) 46%, var(--band-deep) 100%); color: var(--cream); } /* the khatim lattice again, struck in gold — the same motif as the page ground */ .showcase::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("star-gold.svg"); background-repeat: repeat; opacity: 0.6; } .showcase-eyebrow { margin: 0; text-align: center; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .showcase h2 { margin: 0.6rem 0 0; text-align: center; font-size: clamp(1.5rem, 4.5vw, 2rem); color: var(--cream); } .showcase-note { max-width: 34rem; margin: 0.7rem auto 0; text-align: center; font-size: 0.95rem; color: rgba(254, 249, 240, 0.72); } /* ── the carousel ───────────────────────────────────────────────────── */ .carousel { --shot-w: clamp(10.5rem, 44vw, 14rem); position: relative; margin-top: 2rem; } .car-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .car-viewport::-webkit-scrollbar { display: none; } .car-viewport:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 1rem; } .car-track { display: flex; align-items: flex-start; gap: clamp(0.85rem, 2.5vw, 1.5rem); /* the side padding is what lets the first and last slide reach the centre */ padding: 2.5rem calc(50% - var(--shot-w) / 2); margin: 0; list-style: none; } .shot { flex: 0 0 var(--shot-w); scroll-snap-align: center; scroll-snap-stop: always; transition: opacity 0.45s ease; } /* Dimming only makes sense once the script knows which slide is centred, and it has to stay gentle: these screenshots are cream, the band is teal, and too much transparency lets a neighbour dissolve into the background rather than read as the next screen. The centre leads on scale and shadow instead. */ .carousel.is-enhanced .shot { opacity: 0.78; } .carousel.is-enhanced .shot.is-active { opacity: 1; } .shot-frame { overflow: hidden; border-radius: 1.35rem; border: 1px solid rgba(230, 184, 76, 0.26); /* a lit placeholder, not a void: a lazy slide that has not arrived yet should read as a screen about to appear, not as a hole in the row */ background: rgba(254, 249, 240, 0.07); box-shadow: 0 20px 42px -20px rgba(0, 0, 0, 0.7), 0 3px 10px -5px rgba(0, 0, 0, 0.55); /* transform only — it never reflows, so nothing on the row can jump */ transform: translateZ(0); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease; } .shot img { display: block; width: 100%; height: auto; } .carousel.is-enhanced .shot.is-active .shot-frame { transform: scale(1.035); border-color: rgba(230, 184, 76, 0.5); box-shadow: 0 26px 52px -20px rgba(0, 0, 0, 0.78), 0 4px 12px -5px rgba(0, 0, 0, 0.6); } .shot-cap { margin: 1rem 0 0; text-align: center; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(254, 249, 240, 0.6); transition: color 0.45s ease; } .carousel.is-enhanced .shot.is-active .shot-cap { color: var(--gold); } /* Hover lift — pointer devices only, so a tap on a phone never leaves a slide stuck in a hovered state. :hover alone gives the whole behaviour: the pointer leaving one slide restores it as the next one grows. */ @media (hover: hover) and (pointer: fine) { .carousel.is-enhanced .shot:hover { opacity: 1; } .shot:hover .shot-frame { transform: scale(1.06); border-color: rgba(230, 184, 76, 0.55); box-shadow: 0 30px 58px -20px rgba(0, 0, 0, 0.8), 0 5px 14px -6px rgba(0, 0, 0, 0.62); } .carousel.is-enhanced .shot.is-active:hover .shot-frame { transform: scale(1.085); } .carousel.is-enhanced .shot:hover .shot-cap { color: var(--gold-soft); } } /* ── arrows ─────────────────────────────────────────────────────────── */ .car-arrow { position: absolute; top: 50%; /* the caption sits below the image, so the row's optical centre is higher */ transform: translateY(-50%); margin-top: -1.1rem; z-index: 3; display: none; width: 2.9rem; height: 2.9rem; align-items: center; justify-content: center; padding: 0; border-radius: 999px; border: 1px solid rgba(230, 184, 76, 0.45); background: rgba(11, 38, 34, 0.74); color: var(--gold-soft); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease; } .carousel.is-enhanced .car-arrow { display: inline-flex; } .car-arrow svg { width: 1.15rem; height: 1.15rem; } .car-prev { left: clamp(0.35rem, 2vw, 1.75rem); } .car-next { right: clamp(0.35rem, 2vw, 1.75rem); } .car-arrow:hover { background: rgba(230, 184, 76, 0.92); border-color: var(--gold); color: #0e332e; } .car-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .car-arrow[disabled] { opacity: 0.28; cursor: default; } .car-arrow[disabled]:hover { background: rgba(11, 38, 34, 0.74); border-color: rgba(230, 184, 76, 0.45); color: var(--gold-soft); } /* ── position readout ───────────────────────────────────────────────── */ .car-status { display: none; margin: 1.4rem 0 0; text-align: center; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(254, 249, 240, 0.5); font-variant-numeric: tabular-nums; } .carousel.is-enhanced .car-status { display: block; } .car-status b { color: var(--gold); font-weight: 700; } .car-hint { margin: 0.5rem 0 0; text-align: center; font-size: 0.76rem; color: rgba(254, 249, 240, 0.4); } @media (prefers-reduced-motion: reduce) { .car-viewport { scroll-behavior: auto; } .shot, .shot-frame, .shot-cap { transition: none; } .shot:hover .shot-frame, .carousel.is-enhanced .shot.is-active .shot-frame, .carousel.is-enhanced .shot.is-active:hover .shot-frame { transform: none; } } /* ── the zoom affordance on a slide ───────────────────────────────────── It lives inside .shot-frame, so it inherits the frame's hover scale and its overflow clip. Only opacity animates, so it can never move anything. */ .shot-zoom { position: absolute; top: 50%; left: 50%; margin: -1.55rem 0 0 -1.55rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem; padding: 0; border-radius: 999px; border: 1px solid rgba(230, 184, 76, 0.55); background: rgba(11, 38, 34, 0.72); color: var(--gold-soft); cursor: pointer; opacity: 0; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.8); transition: opacity 0.28s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* the frame is the positioning context for it */ .shot-frame { position: relative; } .shot-zoom svg { width: 1.35rem; height: 1.35rem; } .shot-zoom:hover, .shot-zoom:focus-visible { background: rgba(230, 184, 76, 0.94); border-color: var(--gold); color: #0e332e; } .shot-zoom:focus-visible { opacity: 1; outline: 2px solid var(--gold); outline-offset: 3px; } /* Pointer devices: only the hovered slide shows it, which is exactly what :hover already scopes for us. */ @media (hover: hover) and (pointer: fine) { .shot:hover .shot-zoom { opacity: 1; } } /* Touch: there is no hover, so the centred slide carries the affordance permanently and quietly. Tapping the slide itself opens it too. */ @media (hover: none), (pointer: coarse) { .carousel.is-enhanced .shot.is-active .shot-zoom { opacity: 0.92; } } /* ── lightbox ───────────────────────────────────────────────────────────── */ .lb[hidden] { display: none; } .lb { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; } .lb-backdrop { position: absolute; inset: 0; background: rgba(8, 28, 25, 0.9); -webkit-backdrop-filter: blur(10px) saturate(0.9); backdrop-filter: blur(10px) saturate(0.9); animation: lb-fade 0.24s ease both; } .lb-dialog { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(0.25rem, 2vw, 1.25rem); width: 100%; height: 100%; padding: clamp(0.75rem, 3vw, 2rem); animation: lb-rise 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; } .lb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .lb-stage { display: grid; place-items: center; min-width: 0; height: 100%; } .lb-figure { margin: 0; display: grid; justify-items: center; gap: 0.9rem; } /* width/height auto against a max on each axis is what preserves the ratio - the browser does the fitting, so nothing is ever stretched or cropped. The 62rem ceiling stops the image being scaled past its own pixels and going soft on a very tall display. */ .lb-img { display: block; width: auto; height: auto; max-width: min(92vw, 30rem); max-height: min(calc(100vh - 8.5rem), 62rem); border-radius: 1.35rem; border: 1px solid rgba(230, 184, 76, 0.42); background: rgba(254, 249, 240, 0.07); box-shadow: 0 32px 70px -24px rgba(0, 0, 0, 0.9), 0 6px 18px -8px rgba(0, 0, 0, 0.7); } @supports (height: 100dvh) { .lb-img { max-height: min(calc(100dvh - 8.5rem), 62rem); } } .lb-cap { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(254, 249, 240, 0.62); font-variant-numeric: tabular-nums; text-align: center; } .lb-cap b { color: var(--gold); font-weight: 700; } .lb-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; padding: 0; border-radius: 999px; border: 1px solid rgba(230, 184, 76, 0.45); background: rgba(11, 38, 34, 0.74); color: var(--gold-soft); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .lb-btn svg { width: 1.15rem; height: 1.15rem; } .lb-btn:hover { background: rgba(230, 184, 76, 0.94); border-color: var(--gold); color: #0e332e; } .lb-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .lb-close { position: absolute; top: clamp(0.75rem, 3vw, 1.75rem); right: clamp(0.75rem, 3vw, 1.75rem); z-index: 2; } @keyframes lb-fade { from { opacity: 0; } } @keyframes lb-rise { from { opacity: 0; transform: translateY(1.25rem) scale(0.985); } } @media (max-width: 34rem) { .lb-dialog { grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 0.75rem; } .lb-stage { grid-row: 1; } /* on a narrow screen the arrows sit under the image rather than crowding it */ .lb-prev { grid-row: 2; justify-self: start; } .lb-next { grid-row: 2; justify-self: end; } .lb-img { max-height: calc(100vh - 11rem); } @supports (height: 100dvh) { .lb-img { max-height: calc(100dvh - 11rem); } } } @media (prefers-reduced-motion: reduce) { .shot-zoom { transition: none; } .lb-backdrop, .lb-dialog { animation: none; } .lb-btn { transition: none; } } @media print { .lb, .shot-zoom { display: none !important; } } @media print { body::before { display: none; } .site-nav, .nav-toggle, .lang-switch, .linkrow { display: none; } .showcase { background: none; color: var(--ink); border-block: 0; } /* a printed policy should not carry a slab of dark ink at the end of it */ .site-foot { background: none; color: var(--ink-soft); border-top: 1px solid var(--cream-deep); } .site-foot::before { display: none; } .site-foot nav a, .site-foot .dev, .site-foot p { color: var(--ink); } .car-viewport { overflow: visible; } .car-track { flex-wrap: wrap; justify-content: center; padding: 0; } .car-arrow, .car-status, .car-hint { display: none; } }