/* * One stylesheet, no JavaScript, Arabic first. * * Direction is a property of `` and nothing else: every rule below * uses logical properties (`inline-start`, `margin-inline`, `text-align: * start`), so the English build is the same CSS with the direction reversed * and there is no second stylesheet to keep in step. * * The palette is the product's, so the site and the till look like one company. * It is duplicated rather than imported (ADR-0012: no runtime dependency * between the web apps); `packages/brand/` is where these become shared tokens * if a third consumer earns it. * * There are no web fonts. A system stack renders Arabic well on every target * platform, costs nothing, and cannot become a third-party request on a page * whose whole selling point is that it does not need one. */ :root { --forest-950: #123126; --forest-800: #1f4c3b; --forest-700: #2b624d; --mint-100: #e9f4ed; --mint-200: #d7eadf; --amber-100: #faf1de; --amber-600: #8a6320; --surface: #ffffff; --ground: #f6f8f5; --line: #dde5df; --ink: #17201b; --muted: #5d6b63; --measure: 68ch; --shell: 1120px; } * { box-sizing: border-box; } html { /* The one place a physical direction is unavoidable, and it is not one: smooth scrolling is a behaviour, not a layout. */ scroll-behavior: smooth; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", Arial, sans-serif; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } h1, h2, h3 { color: var(--forest-950); line-height: 1.3; text-wrap: balance; } h1 { margin: 0 0 12px; font-size: clamp(1.8rem, 4.2vw, 2.9rem); } h2 { margin: 0 0 12px; font-size: clamp(1.3rem, 2.6vw, 1.85rem); } h3 { margin: 0 0 8px; font-size: 1.1rem; } p { margin: 0 0 14px; max-width: var(--measure); } a { color: var(--forest-800); text-underline-offset: 3px; } a:hover { color: var(--forest-950); } /* Never removed, only replaced. A focus ring is how a keyboard user knows where they are. */ :focus-visible { outline: 3px solid var(--forest-700); outline-offset: 3px; border-radius: 4px; } .shell { width: min(var(--shell), 100% - 2rem); margin-inline: auto; } .skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: 12px; z-index: 10; padding: 10px 16px; border-radius: 0 0 10px 10px; background: var(--forest-800); color: #fff; text-decoration: none; } .skip-link:focus { inset-block-start: 0; } /* ------------------------------------------------------------- header */ .site-header { position: sticky; inset-block-start: 0; z-index: 5; border-block-end: 1px solid var(--line); background: var(--surface); } .site-header .shell { display: flex; flex-wrap: wrap; gap: 12px; /* Top-aligned on a phone, where an open `
` is tall and a vertically centred wordmark would float beside a list. The desktop rule below re-centres it once the menu is a single row. */ align-items: flex-start; justify-content: space-between; padding-block: 12px; } .wordmark { color: var(--forest-950); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; } /* `
` is the mobile menu. No script decides whether it is open. */ .nav > summary { display: inline-block; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--forest-800); font-size: 0.92rem; font-weight: 600; cursor: pointer; list-style: none; } .nav > summary::-webkit-details-marker { display: none; } .nav ul { margin: 10px 0 0; padding: 0; list-style: none; } .nav li { padding-block: 5px; } /* Navigation is a landmark, not prose: underlining every item makes a header look like a paragraph. The underline returns on hover and the focus ring is untouched, so neither pointer nor keyboard loses the affordance. */ .nav a { text-decoration: none; } .nav a:hover { text-decoration: underline; } .nav-child a { padding-inline-start: 14px; font-size: 0.93rem; color: var(--muted); } .header-actions { display: flex; gap: 8px; align-items: center; } .locale-switch, .login { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9rem; font-weight: 600; text-decoration: none; } .login { border-color: var(--forest-800); background: var(--forest-800); color: #fff; } /* From the tablet breakpoint up the menu is always open and the disclosure control disappears. One markup tree, two presentations. Hiding the `` is not enough on its own: a closed `
` hides its own content, and browsers do that two different ways -- older ones with `display: none` on the non-summary children, newer Chromium with `content-visibility: hidden` on `::details-content`. Both are overridden, so the navigation is visible at desktop widths whether or not anybody has clicked anything. */ @media (min-width: 820px) { .site-header .shell { align-items: center; } .nav { flex: 1; } .nav > summary { display: none; } .nav > nav { display: block; } .nav::details-content { content-visibility: visible; block-size: auto; } .nav ul { display: flex; gap: 6px 20px; align-items: center; margin: 0; margin-inline-start: 24px; } .nav li { padding-block: 0; } .nav-child a { padding-inline-start: 0; } } /* ---------------------------------------------------------------- bands */ .hero { padding-block: clamp(36px, 7vw, 76px); background: radial-gradient(circle at 15% 0%, var(--mint-200), transparent 42%), var(--ground); } .lead { font-size: clamp(1.02rem, 1.9vw, 1.22rem); color: var(--muted); } .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; max-width: none; margin-block-start: 22px; } .band { padding-block: clamp(30px, 5vw, 58px); } .band--tinted { background: var(--surface); border-block: 1px solid var(--line); } .button { display: inline-block; padding: 11px 22px; border: 1px solid var(--forest-800); border-radius: 999px; color: var(--forest-800); font-weight: 600; text-decoration: none; } .button--primary { background: var(--forest-800); color: #fff; } .button:hover { border-color: var(--forest-950); } .button--primary:hover { background: var(--forest-950); color: #fff; } /* ---------------------------------------------------------------- cards */ .cards, .product-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .card { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .band--tinted .card { background: var(--ground); } .card p:last-child { margin-block-end: 0; } /* A card's heading is a card's heading whatever its level. The document outline is decided by the page structure (a screen reader's concern) and the size by the design (a reader's) -- they are different questions. */ .card h2 { font-size: 1.1rem; } .meta { color: var(--muted); font-size: 0.9rem; } .flagship-name { margin-block: 18px 14px; font-size: clamp(1.15rem, 2.4vw, 1.5rem); } .note { max-width: var(--measure); margin-block-start: 22px; color: var(--muted); font-size: 0.92rem; } .checklist { max-width: var(--measure); margin: 0; padding-inline-start: 22px; } .checklist li { padding-block: 5px; } .details { margin: 0 0 18px; } .details > div { padding-block: 9px; border-block-end: 1px solid var(--line); } .details dt { color: var(--muted); font-size: 0.85rem; } .details dd { margin: 2px 0 0; font-weight: 600; } /* An LTR value inside an RTL row. `text-align: start` on the cell keeps it on the page's reading edge; the inline `dir` on the value keeps its own words in order. */ .details dd > [dir="ltr"] { display: inline-block; text-align: start; } .notice { max-width: var(--measure); padding: 14px 16px; border: 1px solid var(--line); border-inline-start: 5px solid var(--forest-700); border-radius: 12px; background: var(--mint-100); } .notice--draft { border-inline-start-color: var(--amber-600); background: var(--amber-100); color: var(--amber-600); font-weight: 600; } /* --------------------------------------------------------------- footer */ .site-footer { padding-block: 34px 22px; border-block-start: 1px solid var(--line); background: var(--surface); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; } .footer-heading { margin: 0 0 8px; color: var(--forest-950); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em; } .site-footer ul { margin: 0; padding: 0; list-style: none; } .site-footer li { padding-block: 3px; } .site-footer a { font-size: 0.94rem; text-decoration: none; } .site-footer a:hover { text-decoration: underline; } .footer-legal { margin-block-start: 26px; padding-block-start: 16px; border-block-start: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; } .footer-legal p { margin: 0; max-width: none; } /* ------------------------------------------------- the product surface */ /* The product's own section navigation. It sits under the company header and is never merged into it: ADR-0012 keeps global navigation company-level, and "Hardware" is a question about a till rather than about Dalamin. */ .product-nav { border-block-end: 1px solid var(--line); background: var(--mint-100); } .product-nav ul { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; padding-block: 10px; list-style: none; } .product-nav a { font-size: 0.92rem; font-weight: 600; text-decoration: none; } /* The current section, marked with weight and an underline rather than colour alone -- `aria-current` carries it for a screen reader either way. */ .product-nav a[aria-current="page"] { color: var(--forest-950); text-decoration: underline; text-underline-offset: 6px; } .shot { max-width: 900px; margin: 22px 0 0; } .shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .shot figcaption { margin-block-start: 8px; color: var(--muted); font-size: 0.85rem; } .faq details { max-width: var(--measure); padding-block: 12px; border-block-end: 1px solid var(--line); } .faq summary { font-weight: 600; color: var(--forest-950); cursor: pointer; } .faq details p { margin-block: 10px 0; } /* ------------------------------------------------------------- the form */ .lead-form { max-width: 560px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); } .lead-form h2 { margin-block-start: 0; } .lead-form .field { display: block; margin-block-end: 14px; } .lead-form .field > span { display: block; margin-block-end: 6px; font-size: 0.88rem; font-weight: 600; } .lead-form input, .lead-form select, .lead-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfb; font: inherit; color: inherit; } .lead-form textarea { resize: vertical; } .field-hint { margin-block: -6px 16px; color: var(--muted); font-size: 0.82rem; } .consent { display: flex; gap: 10px; align-items: flex-start; margin-block-end: 6px; font-size: 0.9rem; } .consent input { width: auto; margin-block-start: 5px; } .lead-form button { width: auto; margin-block-start: 8px; border: 0; cursor: pointer; } /* Off-screen rather than `display: none`. A `display: none` field is one a bot can also see is hidden, and a `hidden` attribute is one a screen reader skips silently. This keeps the field in the accessibility tree with a label that tells a person using one to leave it alone, while a sighted visitor never encounters it. */ .honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* A section whose wording is still a legal determination. Marked in the heading rather than hidden, so a reader can see which parts of a policy are final and TASK-026C's launch checklist can read the same list. */ .pending { color: var(--amber-600); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }