/* Arqaan, arqaan.app * * Palette and type are lifted from the app itself so the site and the product * read as one thing. The daylight set is ArkaanTokens.light() as it stood at * launch; the night set is the app's dark palette as handed over on * 5 September 2026 (true black, cards at #0e0e0e, purple for controls, green * for done). Nothing here invents a brand colour. * * The page has no light/dark toggle in the usual sense. Which theme you get is * decided by the prayer window you are actually in, computed in arqaan.js from * your clock (or your real coordinates, if you offer them), the same rule the * app's Home hero follows. `data-theme` on overrides it when a visitor * asks for one explicitly, and that choice is remembered. */ /* ---------------------------------------------------------------- tokens -- */ :root { /* Brand constants, ArkaanTokens, verbatim. */ --cream: #f7f4ee; --white: #ffffff; --deep: #234a3f; /* deepMyrtle, headings */ --myrtle: #2f5d50; /* buttons and fills */ --leaf: #5e8c7a; /* eyebrows, live values */ --leaf-lift: #85ae9b; /* leaf-on-dark */ --mint: #eaf2ec; --mint-deep: #dce9e0; --hair: #e8dfd3; --gold-ink: #b87d22; /* the warning/accent ink role, amber, never red */ --gold: #c98b2d; --apricot: #de9f55; --rose: #b2596b; --ink-day: #33323a; --muted: #7a7365; --night: #1e1b30; --slate: #2e3a44; --lilac: #5b4c82; --lilac-lift: #c6b6e6; /* The app's dark set, as handed over on 5 September 2026. True black grounds, cards at off-white 6% over black baked opaque, translucent mint tints inside cards, purple for anything you can press, green for anything done, gold as ink only. */ --black: #000000; --card: #0e0e0e; --card-border: rgba(240, 235, 242, 0.16); --tint-low: rgba(220, 233, 224, 0.05); --tint-mid: rgba(220, 233, 224, 0.12); --tint-high: rgba(220, 233, 224, 0.14); --ink: #f7f4ee; --ink-mint: #dce9e0; --ink-muted: rgba(247, 244, 238, 0.62); --purple: #6b5a96; --purple-press: rgba(74, 60, 110, 0.55); --lilac-ink: #c6b6e6; --myrtle-done: #2f5d50; --leaf-text: #85ae9b; --gold-chip: #c98b2d; --gold-ink-dark: #de9f55; --warning-fill: rgba(222, 159, 85, 0.16); /* Roles, daylight. */ --bg: var(--cream); --panel: var(--white); --panel-soft: var(--mint); --text: var(--ink-day); --text-soft: var(--muted); --heading: var(--deep); --rule: var(--hair); --accent: var(--deep); --accent-ink: #ffffff; --eyebrow: var(--leaf); --warm: var(--gold-ink); --shadow: rgba(35, 74, 63, 0.5); /* The two rules of the app's palette, as roles. Anything you can press wears --control; anything done wears --done. In daylight both are the brand greens the site always used; the night set below separates them into purple and green, which is where the rules come from. */ --control: var(--deep); --control-ink: #ffffff; --control-press: var(--myrtle); --link: var(--deep); --done: var(--myrtle); --done-ink: #ffffff; --brand: var(--deep); --value: var(--leaf); --arch-line: var(--gold); /* Sky, the arch. Overwritten per prayer phase below. */ --sky-top: #cfe2d6; --sky-bot: #f4efe6; --orb: #e0a95e; --orb-glow: rgba(243, 217, 168, 0.8); --orb-x: 150px; --orb-y: 40px; --ground: #c3d6c9; --soil: #a8bfae; --star: rgba(255, 255, 255, 0); --leaf-a: var(--leaf); --leaf-b: var(--myrtle); --trunk: #7a5a3c; --measure: 1120px; --gap: clamp(20px, 4vw, 40px); } /* Night Garden. Maghrib, Isha and Fajr sit in the dark theme, the same three windows the app calls night, unless the visitor has asked for light. */ :root[data-sky="maghrib"]:not([data-theme="light"]), :root[data-sky="night"]:not([data-theme="light"]), :root[data-sky="fajr"]:not([data-theme="light"]), :root[data-theme="night"] { --bg: var(--black); --panel: var(--card); --panel-soft: var(--tint-mid); --text: var(--ink); --text-soft: var(--ink-muted); --heading: var(--ink); --rule: var(--card-border); --accent: var(--lilac-ink); --accent-ink: var(--ink); --eyebrow: var(--leaf-text); --warm: var(--gold-ink-dark); --shadow: rgba(0, 0, 0, 0.9); --control: var(--purple); --control-ink: var(--ink); --control-press: var(--purple-press); --link: var(--lilac-ink); --done: var(--myrtle-done); --done-ink: var(--ink); --brand: var(--leaf-text); --value: var(--ink-mint); --arch-line: var(--gold-ink-dark); } /* ------------------------------------------------------ sky, by prayer -- */ /* These match on any element carrying data-sky, not just the root: the prayer clock sets it on and paints the page, and the hero arch sets its own as it steps through scenes, so the island can be under a night sky while the page is in daylight. Custom properties inherit from the nearest ancestor that sets them, which is all the scoping this needs. */ [data-sky="fajr"] { --sky-top: #221f38; --sky-bot: #6b5a7a; --orb: #e9e2f4; --orb-glow: rgba(198, 182, 230, 0.42); --orb-x: 62px; --orb-y: 60px; --ground: #3b3556; --soil: #2c2743; --star: rgba(247, 244, 238, 0.72); --leaf-a: #7c8f88; --leaf-b: #566b63; --trunk: #4a4363; } [data-sky="sunrise"] { --sky-top: #e7d9c4; --sky-bot: #f6efe4; --orb: #de9f55; --orb-glow: rgba(243, 217, 168, 0.75); --orb-x: 58px; --orb-y: 130px; --ground: #cbdccf; --soil: #b0c5b5; --star: rgba(255, 255, 255, 0); } [data-sky="day"] { --sky-top: #cfe2d6; --sky-bot: #f4efe6; --orb: #e0a95e; --orb-glow: rgba(243, 217, 168, 0.8); --orb-x: 150px; --orb-y: 44px; --ground: #c3d6c9; --soil: #a8bfae; --star: rgba(255, 255, 255, 0); } [data-sky="asr"] { --sky-top: #d9dfd0; --sky-bot: #f7ecdc; --orb: #d9913f; --orb-glow: rgba(240, 205, 152, 0.8); --orb-x: 238px; --orb-y: 92px; --ground: #c9d6c3; --soil: #adbca7; --star: rgba(255, 255, 255, 0); } [data-sky="maghrib"] { --sky-top: #3a3155; --sky-bot: #c9825e; --orb: #f0c88f; --orb-glow: rgba(240, 176, 118, 0.55); --orb-x: 262px; --orb-y: 158px; --ground: #4a4162; --soil: #39314d; --star: rgba(247, 244, 238, 0.35); --leaf-a: #7c8f88; --leaf-b: #566b63; --trunk: #4a4363; } [data-sky="night"] { --sky-top: #17142a; --sky-bot: #3b3159; --orb: #e9e2f4; --orb-glow: rgba(198, 182, 230, 0.5); --orb-x: 96px; --orb-y: 54px; --ground: #322c4d; --soil: #26213c; --star: rgba(247, 244, 238, 0.85); --leaf-a: #7c8f88; --leaf-b: #566b63; --trunk: #4a4363; } /* ----------------------------------------------------------------- base -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 0.8s ease, color 0.8s ease; } img, svg, video { max-width: 100%; } img { height: auto; display: block; } a { color: var(--link); text-underline-offset: 3px; } :focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding-inline: clamp(20px, 5vw, 44px); } .skip-link { position: absolute; left: -9999px; top: 8px; background: var(--control); color: var(--control-ink); padding: 10px 16px; border-radius: 10px; z-index: 99; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 12px; } /* ----------------------------------------------------------- typography -- */ .display, .section-title { font-family: Amiri, "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 700; color: var(--heading); letter-spacing: -0.005em; margin: 0; } .display { font-size: clamp(40px, 7vw, 68px); line-height: 1.04; } .section-title { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.12; } .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.38em; text-indent: 0.38em; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 14px; } .lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: var(--text-soft); max-width: 46ch; margin: 18px 0 0; } .ar { font-family: "Noto Naskh Arabic", serif; font-weight: 700; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* -------------------------------------------------------------- header --- */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--rule); } .site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 62px; } .wordmark { min-width: 0; display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--heading); margin-inline-end: auto; } .wordmark .mark { width: 30px; height: 30px; border-radius: 8px; align-self: center; flex: none; } .wordmark .ar { font-size: 22px; line-height: 1; color: var(--brand); } .wordmark .latin { font-size: 11.5px; font-weight: 800; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; color: var(--text-soft); } /* The live prayer readout in the header. Doubles as the theme control: pressing it steps the override light → night → back to the real clock. */ .clock { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; min-height: 40px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel-soft); color: var(--text-soft); font: inherit; font-size: 13px; cursor: pointer; } .clock:hover { color: var(--link); } .clock .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orb); box-shadow: 0 0 0 4px var(--orb-glow); flex: none; } .clock .phase { font-weight: 700; color: var(--text); } .clock .at { font-variant-numeric: tabular-nums; } .header-cta, .header-theme { min-height: 40px; padding: 0 16px; font-size: 13.5px; flex: none; } /* The header holds four things and a phone is not wide enough for all of them. The prayer clock is the one that has to survive, it is the reason the page looks the way it does, so the next-prayer time drops first, then the call to action, which the hero repeats a screen further down anyway. */ @media (max-width: 720px) { .clock .at { display: none; } .site-header .header-cta { display: none; } } @media (max-width: 430px) { .site-header .header-theme { display: none; } .wordmark .latin { display: none; } } /* --------------------------------------------------------------- button -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border: none; border-radius: 15px; background: var(--control); color: var(--control-ink); font: inherit; font-weight: 700; font-size: 15.5px; text-decoration: none; cursor: pointer; box-shadow: 0 10px 26px -14px var(--shadow); transition: transform 0.12s ease, box-shadow 0.2s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); background: var(--control-press); } .btn:focus-visible { border-radius: 15px; } .btn-quiet { background: transparent; color: var(--link); border: 1px solid var(--rule); box-shadow: none; } .btn-quiet:active { background: var(--panel-soft); } /* ----------------------------------------------------------------- hero -- */ .hero { padding: clamp(30px, 5vw, 56px) 0 clamp(40px, 6vw, 68px); } /* The garden is the product, so it is the first thing on the page and the biggest: a centred column, headline above, island in the middle, the mission and the call to action beneath. */ .hero .wrap { display: grid; gap: clamp(22px, 3vw, 32px); justify-items: center; text-align: center; } .hero-head { max-width: 62ch; } .hero-head .lede { margin-inline: auto; max-width: 58ch; } .hero-copy { max-width: 60ch; } .hero-copy .hero-actions { justify-content: center; } .hero-copy .hero-note { margin-inline: auto; } .hero-mission { margin: 0; font-family: Amiri, "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.35; color: var(--heading); } /* The arch: the app's island, under a mihrab. This is the one loud thing on the page, everything else stays quiet on purpose. */ .hero-arch { position: relative; width: 100%; max-width: 640px; margin-inline: auto; } /* Under the arch, the scene stepper. It only appears once the real island is running, because the drawn fallback has one scene. */ .scene-bar { display: none; align-items: center; justify-content: center; gap: 14px; margin: 14px auto 0; max-width: 460px; } .hero-arch.scenes-live .scene-bar { display: flex; } .scene-bar button { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rule); background: var(--panel); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .scene-bar button { color: var(--link); } .scene-bar button:hover { border-color: var(--link); } .scene-bar button:active { background: var(--control-press); } .scene-bar .scene-text { min-width: 0; text-align: center; } .scene-bar .scene-caption { display: block; margin: 0; font-weight: 700; color: var(--text); font-size: 14.5px; } .scene-bar .scene-count { display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-soft); font-variant-numeric: tabular-nums; } .hero-arch svg { display: block; width: 100%; height: auto; } /* The stage holds the painted sky and the WebGL island in the same box, so the canvas can take the arch's exact shape at any width. The sky stays in the SVG underneath: the prayer clock owns the light, this canvas only owns what grows. */ .arch-stage { position: relative; } #garden-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; clip-path: url(#arch-box); cursor: grab; /* Horizontal drags turn the island, vertical ones still scroll the page. Trapping the scroll on a phone to gain a tilt axis is a bad trade. */ touch-action: pan-y; } #garden-canvas.dragging { cursor: grabbing; } #garden-canvas:focus-visible { outline-offset: -4px; } .arch-hint { display: none; margin: 12px 0 0; text-align: center; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--text-soft); opacity: 0.75; } /* The drawn island is only there for browsers that cannot run the real one. */ .arch-stage.garden-live #svg-garden { display: none; } .sky-top-stop { stop-color: var(--sky-top); } .sky-bot-stop { stop-color: var(--sky-bot); } .orb { fill: var(--orb); transform: translate(var(--orb-x), var(--orb-y)); transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1), fill 1s ease; } .orb-glow { fill: var(--orb-glow); opacity: 0.6; transform: translate(var(--orb-x), var(--orb-y)); transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1), fill 1s ease; } .stars circle { fill: var(--star); transition: fill 1s ease; } .ground { fill: var(--ground); transition: fill 1s ease; } .soil { fill: var(--soil); transition: fill 1s ease; } .tree-trunk { fill: var(--trunk); transition: fill 1s ease; } .tree-leaf { fill: var(--leaf-a); transition: fill 1s ease; } .tree-leaf-2 { fill: var(--leaf-b); transition: fill 1s ease; } .arch-rule { fill: none; stroke: var(--arch-line); stroke-width: 1.6; opacity: 0.55; } .arch-caption { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--text-soft); } .arch-caption b { color: var(--text); font-weight: 700; } .arch-caption button { background: none; border: none; padding: 0; font: inherit; font-size: 13px; color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .hero-note { margin: 16px 0 0; font-size: 13.5px; color: var(--text-soft); max-width: 42ch; } /* -------------------------------------------------------------- section -- */ .section { padding: clamp(44px, 6vw, 76px) 0; border-top: 1px solid var(--rule); } .section-head { max-width: 56ch; margin-bottom: clamp(22px, 3vw, 36px); } .section-head p { color: var(--text-soft); margin: 16px 0 0; } /* ---------------------------------------------------------- the struggle -- */ /* Each section opens with the problem it exists for and what Arqaan does about it, side by side. The two halves share one rule and one voice; the tag is the only thing that tells them apart. */ .pain { display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); background: var(--rule); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; margin-bottom: clamp(22px, 3vw, 36px); } @media (min-width: 760px) { .pain { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pain > div { background: var(--panel); padding: clamp(20px, 2.6vw, 30px); } .pain .tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 10px; } .pain .problem .tag { color: var(--warm); } .pain .answer .tag { color: var(--eyebrow); } .pain p { margin: 0; font-size: 16px; line-height: 1.6; } .pain .problem p { color: var(--text-soft); } .pain .answer p { color: var(--text); } .pain .answer { background: var(--panel-soft); } /* --------------------------------------------------------------- the flow -- */ /* Deeds become Noor, Noor becomes a place among friends. Three cards drawn in the app's own idiom, with the real deed names and the real Noor values from deeds_state.dart, joined by arrows that turn downward on a phone. */ .flow { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: stretch; } @media (min-width: 900px) { .flow { grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr) minmax(0, 1fr); gap: 34px; } .deeds { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; row-gap: 0; } .deeds li:nth-last-child(-n + 2) { border-bottom: none; } } /* The three cards stretch to the tallest, so each one fills the height it is given: deed rows share the space evenly, and the tree track sits at the foot of the Noor card. */ .flow-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); padding: 20px 20px 22px; box-shadow: 0 30px 60px -50px var(--shadow); } .flow-card:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 12px; height: 12px; border-right: 2px solid var(--eyebrow); border-bottom: 2px solid var(--eyebrow); transform: translateX(-50%) rotate(45deg); } @media (min-width: 900px) { .flow-card:not(:last-child)::after { left: auto; right: -24px; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); } } .flow-card .flow-eyebrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; } .flow-card .flow-eyebrow .eyebrow { margin: 0; } .flow-card .flow-eyebrow .num { font-size: 13px; color: var(--text-soft); font-weight: 700; } .flow-card h3 { margin: 0 0 12px; font-size: 20px; font-weight: 800; color: var(--heading); } .deeds { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; flex: 1; grid-auto-rows: 1fr; } .deeds li { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--rule); color: var(--text-soft); } .deeds li:last-child { border-bottom: none; } .deeds li .tick { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; } .deeds li.done { color: var(--text); } .deeds li.done .tick { background: var(--done); border-color: var(--done); color: var(--done-ink); } .deeds li .noor { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--value); } .deeds li:not(.done) .noor { color: var(--text-soft); font-weight: 500; } .noor-total { font-family: Amiri, Georgia, serif; font-size: clamp(44px, 6vw, 64px); line-height: 1; color: var(--heading); margin: 6px 0 2px; } .noor-total small { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--eyebrow); display: block; margin-top: 8px; } .noor-meta { margin: 14px 0 0; font-size: 14px; color: var(--text-soft); } .tree-track { margin-top: auto; padding-top: 18px; } .tree-track .bar { height: 8px; border-radius: 999px; background: var(--panel-soft); overflow: hidden; border: 1px solid var(--rule); } .tree-track .bar span { display: block; height: 100%; width: 62%; background: var(--done); border-radius: 999px; } .tree-track .stages { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--text-soft); letter-spacing: 0.04em; } .tree-track .stages b { color: var(--text); } .league { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .league li { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 14px; } .league li:last-child { border-bottom: none; } .league .rank { font-weight: 800; color: var(--text-soft); font-variant-numeric: tabular-nums; } .league .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-soft); color: var(--value); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; } .league .name { color: var(--text); font-weight: 600; } .league .name small { display: block; font-weight: 500; color: var(--text-soft); font-size: 12px; } .league .pts { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--heading); } .league li.you { background: var(--panel-soft); margin-inline: -10px; padding-inline: 10px; border-radius: 10px; } .league-tiers { display: flex; gap: 6px; margin-bottom: 12px; } .league-tiers span { font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--rule); color: var(--text-soft); } .league-tiers span.on { background: var(--control); color: var(--control-ink); border-color: var(--control); } /* --------------------------------------------------------------- people -- */ .people { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: minmax(0, 1fr); } @media (min-width: 760px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .people figure { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--rule); background: var(--panel); box-shadow: 0 30px 60px -50px var(--shadow); } .people img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .people figcaption { padding: 12px 16px 14px; font-size: 13.5px; color: var(--text-soft); } /* ---------------------------------------------------------------- strip -- */ /* The ten essentials, as one ruled row: what they are on the left, the ten of them filling the rest of the measure. They are all still here, they just no longer need a card each. */ .toolbox { display: grid; gap: 16px clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--rule); } @media (min-width: 860px) { .toolbox { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); } } .toolbox h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 800; color: var(--heading); } .toolbox p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-soft); max-width: 34ch; } .strip { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; } .strip li { font-size: 13.5px; font-weight: 700; padding: 7px 13px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); color: var(--text); } /* -------------------------------------------------------------- pillars -- */ /* Five columns, because the content is five pillars. On a wide screen they stand as an arcade; on a narrow one they fall back to rows. */ .arcade { display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); background: var(--rule); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; } @media (min-width: 860px) { .arcade { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .pillar { background: var(--panel); padding: clamp(20px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 10px; } .pillar .ordinal { font-size: 11px; font-weight: 800; letter-spacing: 0.24em; color: var(--warm); padding-bottom: 12px; border-bottom: 1px solid var(--rule); } .pillar h3 { margin: 0; font-size: 19px; line-height: 1.25; color: var(--heading); font-weight: 800; } .pillar h3 .ar { display: block; font-size: 22px; font-weight: 700; color: var(--brand); margin-bottom: 4px; text-align: left; unicode-bidi: isolate; } .pillar p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-soft); } /* ---------------------------------------------------------- split media -- */ .split { display: grid; gap: clamp(26px, 5vw, 56px); align-items: center; grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .split.flip .split-media { order: -1; } } .split-copy h2 { margin-bottom: 0; } .split-copy p { color: var(--text-soft); } /* A phone-shaped slot for a real screenshot. Until one is dropped in it states plainly that it is empty rather than pretending to be a render. */ .shot { position: relative; margin-inline: auto; width: min(300px, 100%); aspect-ratio: 9 / 19.5; border-radius: 34px; border: 1px solid var(--rule); background: var(--panel); overflow: hidden; box-shadow: 0 30px 60px -40px var(--shadow); } .shot:not(:has(img)) { border-style: dashed; background: transparent; box-shadow: none; } .shot img { width: 100%; height: 100%; object-fit: cover; } .shot-row { display: flex; gap: clamp(12px, 2vw, 22px); justify-content: center; flex-wrap: wrap; } .shot-row .shot { width: min(230px, 44vw); } /* ---------------------------------------------------------------- facts -- */ .facts { display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); background: var(--rule); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; margin-top: clamp(26px, 4vw, 44px); } @media (min-width: 720px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .fact { background: var(--panel); padding: clamp(20px, 2.4vw, 26px); } /* A plain variant for the second triplet on the page, same information, told as ruled columns rather than a second run of identical cards. */ .facts.plain { background: transparent; border: none; border-top: 1px solid var(--rule); border-radius: 0; gap: clamp(20px, 3vw, 40px); padding-top: clamp(24px, 3vw, 36px); } .facts.plain .fact { background: transparent; padding: 0; } @media (min-width: 720px) { .facts.plain .fact { padding-inline-start: 22px; border-inline-start: 1px solid var(--rule); } .facts.plain .fact:first-child { padding-inline-start: 0; border-inline-start: none; } } .fact h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 800; color: var(--heading); } .fact p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-soft); } /* ---------------------------------------------------------------- tools -- */ /* Ten tools, so the grid is five or two across and never anything else: an auto-fill track left a half-empty last row at most widths. `grid-auto-rows` squares the rows off so every card is the same height as the rest. */ .tools { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } @media (min-width: 1000px) { .tools { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 520px) { .tools { grid-template-columns: minmax(0, 1fr); } } .tool { border: 1px solid var(--rule); border-radius: 16px; background: var(--panel); padding: 20px 19px 22px; } .tool b { display: block; font-size: 16.5px; line-height: 1.25; color: var(--heading); font-weight: 800; margin-bottom: 7px; } .tool span { font-size: 14px; line-height: 1.5; color: var(--text-soft); } /* --------------------------------------------------------- early access -- */ .access { border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); padding: clamp(26px, 4vw, 48px); box-shadow: 0 30px 60px -50px var(--shadow); } .form-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .form-row input[type="email"] { flex: 1 1 260px; min-height: 52px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 15px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; } .form-row input[type="email"]::placeholder { color: var(--text-soft); } .consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13.5px; color: var(--text-soft); max-width: 62ch; } .consent input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--control); } .form-status { margin: 14px 0 0; font-size: 14px; min-height: 1.4em; color: var(--text-soft); } .form-status[data-state="error"] { color: var(--warm); } .form-status[data-state="ok"] { color: var(--eyebrow); font-weight: 700; } /* --------------------------------------------------------------- footer -- */ .site-footer { border-top: 1px solid var(--rule); padding: clamp(36px, 5vw, 60px) 0 44px; font-size: 13.5px; color: var(--text-soft); } .footer-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } } .site-footer h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eyebrow); font-weight: 800; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .site-footer a { color: var(--text-soft); text-decoration: none; } .site-footer a:hover { color: var(--link); text-decoration: underline; } .legal-line { margin: 30px 0 0; font-size: 12px; line-height: 1.6; max-width: 76ch; } /* -------------------------------------------------------------- motion --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } .btn:hover { transform: none; } }