/* ════════════════════════════════════════════════════════════ arbkan.dev — stylesheet 1 · Design tokens 7 · Profile links 2 · Reset & base 8 · Visitor badge 3 · Background layers 9 · Status line (5 variants) 4 · Frame & layout 10 · Tech stack 5 · Brand & controls 11 · Entrance animations 6 · Main content 12 · Media queries Theme and the visible variants are all driven by data-* attributes on , stamped before first paint by boot.js. Bare :root repeats the dark tokens so the page survives boot.js not running at all. ════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────── 0 · FONTS — self-hosted, same-origin Both are variable builds (verified: fvar/gvar/avar/STAT), so one file per family covers every weight the site uses. Latin subset only, which is all this page's copy needs. Licence and provenance in fonts/LICENSE.txt. Self-hosted to kill the render-blocking chain these used to create: HTML → fonts.googleapis.com CSS → fonts.gstatic.com woff2, two cross-origin hops before any text could paint. ──────────────────────────────────────────────────────────── */ @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/space-grotesk-latin.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); } /* ──────────────────────────────────────────────────────────── 1 · DESIGN TOKENS — font stacks, light/dark theme variables ──────────────────────────────────────────────────────────── */ /* Two faces, both load-bearing: Space Grotesk for everything, JetBrains Mono for the machine-voice bits (git line, stack line, icon labels). */ :root { --font: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace; } /* Bare :root carries the dark tokens too, so the page still renders correctly if boot.js never runs (JS disabled, blocked, or 404). Specificity keeps the light theme working: :root is (0,1,0), :root[data-theme="light"] is (0,2,0). */ :root, :root[data-theme="dark"] { --bg: #0a0f1c; --text: #edf1f8; --muted: #94a3bf; --border: #2a3650; --accent: #7ea6f0; --on-accent: #0a0f1c; /* label colour for filled accent surfaces — the accent is light in dark mode and mid-blue in light mode, so this flips with the theme. White on both would measure 2.4:1 here, a contrast failure. */ --panel: #101828; --blob1: rgba(59, 91, 204, 0.40); --blob2: rgba(109, 90, 224, 0.30); --blob3: rgba(42, 168, 184, 0.22); --glowc: rgba(90, 130, 220, 0.17); --shadow: rgba(0, 0, 0, 0.35); --wip: #e0a935; color-scheme: dark; } :root[data-theme="light"] { --bg: #f7f8fa; --text: #17202e; /* Was #5a6a85 = 5.15:1 on flat --bg, but the background gradient darkens the backdrop under the intro to #cdd4e1 in places, dropping it to 3.68:1 there. #4e5c73 clears 4.5:1 against that worst pixel, not just against flat bg. */ --muted: #4e5c73; --border: #d8deea; --accent: #2f6bde; --on-accent: #ffffff; --panel: #ffffff; --blob1: rgba(47, 107, 222, 0.16); --blob2: rgba(124, 96, 235, 0.13); --blob3: rgba(28, 156, 172, 0.11); --glowc: rgba(47, 107, 222, 0.10); --shadow: rgba(23, 32, 46, 0.16); --wip: #946916; color-scheme: light; } /* ──────────────────────────────────────────────────────────── 2 · RESET & BASE ──────────────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; transition: background-color 0.35s ease, color 0.35s ease; overflow-x: hidden; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* ──────────────────────────────────────────────────────────── 3 · BACKGROUND LAYERS — blobs, cursor glow, drift keyframes Layers can stack: "nebula" is blobs + the 2D canvas together. The layers themselves are painted by main.js. ──────────────────────────────────────────────────────────── */ .bg-layer { position: fixed; z-index: 0; pointer-events: none; display: none; } .bg-layer.active { display: block; } #gl, #cv2 { inset: 0; width: 100%; height: 100%; } #blobs { inset: -25%; } .blob { position: absolute; width: 58vmax; height: 58vmax; border-radius: 50%; filter: blur(70px); will-change: transform; } .b1 { background: radial-gradient(circle at 35% 35%, var(--blob1), transparent 70%); top: -8%; left: -6%; animation: driftA 13s ease-in-out infinite alternate; } .b2 { background: radial-gradient(circle at 60% 40%, var(--blob2), transparent 70%); top: 18%; right: -12%; animation: driftB 16s ease-in-out infinite alternate; } .b3 { background: radial-gradient(circle at 50% 60%, var(--blob3), transparent 70%); bottom: -14%; left: 16%; animation: driftC 19s ease-in-out infinite alternate; } @keyframes driftA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(18vw, 14vh, 0) scale(1.22); } } @keyframes driftB { from { transform: translate3d(0, 0, 0) scale(1.12); } to { transform: translate3d(-17vw, 15vh, 0) scale(0.9); } } @keyframes driftC { from { transform: translate3d(0, 0, 0) scale(0.92); } to { transform: translate3d(15vw, -14vh, 0) scale(1.18); } } #glow { top: 0; left: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; background: radial-gradient(circle, var(--glowc) 0%, transparent 62%); will-change: transform; } @keyframes gdrift { 0% { transform: translate3d(22vw, 28vh, 0); } 33% { transform: translate3d(68vw, 38vh, 0); } 66% { transform: translate3d(42vw, 72vh, 0); } 100% { transform: translate3d(22vw, 28vh, 0); } } #glow.drift { animation: gdrift 26s ease-in-out infinite; } /* ──────────────────────────────────────────────────────────── 4 · FRAME & LAYOUT — hairline frame, header, footer, crosses Toggled off wholesale by :root[data-frame="off"]. ──────────────────────────────────────────────────────────── */ .wrap { position: relative; z-index: 2; min-height: 100%; max-width: 680px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; border-left: 1px solid var(--border); border-right: 1px solid var(--border); } header { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 24px 0 18px; } header::before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: var(--border); } footer { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 20px 0 28px; font-size: 0.82rem; color: var(--muted); } footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: var(--border); } .cross { position: absolute; width: 9px; height: 9px; color: var(--muted); opacity: 0.9; z-index: 3; } .cross::before, .cross::after { content: ""; position: absolute; background: currentColor; } .cross::before { left: 4px; top: 0; width: 1px; height: 9px; } .cross::after { top: 4px; left: 0; width: 9px; height: 1px; } header .cross.l { left: -29px; bottom: -4.5px; } header .cross.r { right: -29px; bottom: -4.5px; } footer .cross.l { left: -29px; top: -4.5px; } footer .cross.r { right: -29px; top: -4.5px; } /* frame toggle: off reverts to the simple column look */ :root[data-frame="off"] .wrap { border-left: 0; border-right: 0; } :root[data-frame="off"] header::before { display: none; } :root[data-frame="off"] .cross { display: none; } :root[data-frame="off"] footer::before { display: none; } /* ──────────────────────────────────────────────────────────── 5 · BRAND & CONTROLS — icon buttons, tooltips, dropdown menus The three design-tool buttons are display:none until gets data-tools="1" (long-press the wordmark, or ?ishown=1). ──────────────────────────────────────────────────────────── */ .brand { font-size: 0.9rem; font-weight: 500; color: var(--muted); text-decoration: none; /* 18px tall on its own, under the 24px WCAG 2.2 AA target minimum (2.5.8). Padding rather than height so the flex row keeps centring it unmoved. */ display: inline-block; padding-block: 3px; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .controls { position: relative; display: flex; gap: 8px; } #bgBtn, #wipBtn, #stackBtn { display: none; } :root[data-tools="1"] #bgBtn, :root[data-tools="1"] #wipBtn, :root[data-tools="1"] #stackBtn { display: grid; } .icon-btn { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--text); cursor: pointer; font-family: var(--font); transition: border-color 0.2s ease, transform 0.2s ease; } .icon-btn:hover { border-color: var(--accent); transform: translateY(-1px); } .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .icon-btn svg { width: 17px; height: 17px; } :root[data-theme="dark"] .icon-moon { display: none; } :root[data-theme="light"] .icon-sun { display: none; } .icon-btn[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 9px); right: 0; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 7px; box-shadow: 0 8px 24px var(--shadow); padding: 5px 10px; font-size: 0.76rem; font-weight: 400; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.15s ease; pointer-events: none; z-index: 24; } .icon-btn[data-tip]:hover::after, .icon-btn[data-tip]:focus-visible::after { opacity: 1; visibility: visible; } .icon-btn[aria-expanded="true"]::after { display: none; } .menu { position: absolute; top: 46px; right: 0; min-width: 176px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 8px 28px var(--shadow); display: none; z-index: 25; } .menu.open { display: block; } .menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 7px; background: none; color: var(--text); font-size: 0.92rem; font-family: var(--font); cursor: pointer; text-align: left; } .menu button:hover, .menu button:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; } .menu .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0; flex: none; } .menu button[aria-checked="true"] .dot { opacity: 1; } /* ──────────────────────────────────────────────────────────── 6 · MAIN CONTENT — headline, intro copy, .term glossary tips ──────────────────────────────────────────────────────────── */ main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; } h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 10px; } .role { font-size: clamp(1.05rem, 2.8vw, 1.25rem); font-weight: 500; margin-bottom: 22px; } .intro { color: var(--muted); line-height: 1.7; max-width: 58ch; margin-bottom: 40px; transition: color 0.35s ease; } .now { color: var(--text); font-weight: 500; } .term { position: relative; border-bottom: 1px dotted var(--muted); cursor: help; outline: none; } .term .tip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(250px, 78vw); background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow); padding: 8px 11px; font-size: 0.8rem; line-height: 1.5; font-weight: 400; opacity: 0; visibility: hidden; transition: opacity 0.15s ease; pointer-events: none; z-index: 20; } .term:hover .tip, .term:focus-visible .tip { opacity: 1; visibility: visible; } .term:hover, .term:focus-visible { color: var(--accent); border-bottom: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 3px; } /* ──────────────────────────────────────────────────────────── 7 · PROFILE LINKS ──────────────────────────────────────────────────────────── */ .links { display: flex; flex-wrap: wrap; gap: 12px; } .links a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 500; background-color: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(6px); transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .links a svg { width: 15px; height: 15px; color: var(--muted); transition: color 0.2s ease; flex: none; } .links a:hover, .links a:focus-visible { border-color: var(--accent); transform: translateY(-1px); background-color: color-mix(in srgb, var(--accent) 8%, var(--bg)); } .links a:hover svg, .links a:focus-visible svg { color: var(--accent); } .links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .links a .ext { width: 0; opacity: 0; transform: translate(-3px, 3px); transition: width 0.2s ease, opacity 0.2s ease, transform 0.2s ease, color 0.2s ease; } .links a:hover .ext, .links a:focus-visible .ext { width: 14px; opacity: 1; transform: translate(0, 0); } /* Primary link — filled accent. Must come after the :hover/:focus-visible rules above: those match at the same specificity, so source order decides. The :hover/:focus-visible overrides below are specificity-safe regardless. */ /* Weight stays at the inherited 500 so both buttons keep identical text metrics — the fill is already the emphasis, and bolding on top of it only made this one measurably wider than its neighbour. */ .links a.primary { background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); } .links a.primary svg { color: var(--on-accent); } .links a.primary:hover, .links a.primary:focus-visible { background-color: color-mix(in srgb, var(--accent) 86%, var(--text)); border-color: color-mix(in srgb, var(--accent) 86%, var(--text)); } .links a.primary:hover svg, .links a.primary:focus-visible svg { color: var(--on-accent); } /* ──────────────────────────────────────────────────────────── 8 · VISITOR BADGE — the pass that slides in on arrival Badge number and issue time are filled in by main.js. ──────────────────────────────────────────────────────────── */ .badge { position: fixed; right: 16px; bottom: 16px; width: min(260px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 36px var(--shadow); z-index: 30; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.35s ease, transform 0.35s ease; } .badge.show { opacity: 1; visibility: visible; transform: translateY(0); } .badge-hole { width: 26px; height: 7px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); margin: 10px auto 0; } .badge-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px 6px; } .badge-head .label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.26em; color: var(--accent); text-transform: uppercase; } .badge-close { border: 0; background: none; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 4px; border-radius: 5px; /* 21px wide otherwise — just under the 24px WCAG 2.2 AA target minimum. */ min-width: 24px; min-height: 24px; } .badge-close:hover, .badge-close:focus-visible { color: var(--text); outline: none; background: color-mix(in srgb, var(--accent) 10%, transparent); } .badge-body { padding: 4px 14px 12px; font-size: 0.82rem; } .badge-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; } .badge-row .k { color: var(--muted); } .badge-row .v { font-weight: 500; text-align: right; } .barcode { margin: 10px 14px 14px; height: 30px; border-radius: 3px; opacity: 0.8; background: repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 5px, var(--text) 5px 6px, transparent 6px 11px, var(--text) 11px 14px, transparent 14px 17px); } /* footer status line */ /* ──────────────────────────────────────────────────────────── 9 · STATUS LINE — five variants of the same "work in progress" All five live in the markup at once; :root[data-wip="..."] reveals exactly one. Shared bits (dot, caret) come first. line · footer text git · commit line ptw · permit card pill · header pill badge· row on the visitor badge ──────────────────────────────────────────────────────────── */ .wip { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; color: var(--muted); cursor: pointer; transition: color 0.2s ease; } .wip:hover, .wip:focus-visible { color: var(--text); } .wip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; } .wip-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--wip); box-shadow: 0 0 8px var(--wip); animation: wipPulse 2.2s ease-in-out infinite; } .wip-caret { display: inline-block; animation: wipBlink 1.1s steps(1) infinite; } @keyframes wipPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } } @keyframes wipBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } } /* status style variants (data-wip) */ .wip-git, .wip-ptw, .wip-pill, .wip-badge-row { display: none; } :root[data-wip="git"] #wip, :root[data-wip="ptw"] #wip, :root[data-wip="pill"] #wip, :root[data-wip="badge"] #wip { display: none; } :root[data-wip="git"] .wip-git { display: inline-flex; } :root[data-wip="ptw"] .wip-ptw { display: inline-flex; } :root[data-wip="pill"] .wip-pill { display: inline-flex; } :root[data-wip="badge"] .wip-badge-row { display: flex; } .wip-git { align-items: center; gap: 10px; border: 0; background: none; padding: 0; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); } .wip-git-hash { color: var(--wip); font-weight: 500; } main .wip-git { margin-bottom: 20px; align-self: flex-start; } .wip-ptw { flex-direction: column; align-items: flex-start; gap: 4px; border: 1px solid var(--border); border-left: 3px solid var(--wip); border-radius: 10px; background: color-mix(in srgb, var(--panel) 72%, transparent); padding: 10px 14px; font: inherit; color: var(--muted); text-align: left; cursor: pointer; transition: border-color 0.2s ease; } .wip-ptw:hover { border-color: var(--wip); } .wip-ptw:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .wip-ptw-head { display: inline-flex; align-items: center; gap: 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wip); } .wip-ptw-no { color: var(--muted); font-weight: 500; letter-spacing: 0.06em; } .wip-ptw-row { color: var(--text); font-size: 0.8rem; } .wip-ptw-open { color: var(--wip); font-weight: 700; } .wip-ptw-msg { font-size: 0.78rem; } .wip-pill { align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--muted); font-family: var(--font); font-size: 0.78rem; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .wip-pill:hover, .wip-pill:focus-visible { border-color: var(--wip); color: var(--text); } .wip-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .wip-pill-text { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wip-badge-btn { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 0; font: inherit; font-weight: 500; color: var(--text); cursor: pointer; } .wip-badge-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .wip-badge-btn .wip-dot { width: 6px; height: 6px; } .wip-badge-btn [data-wip-text] { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ──────────────────────────────────────────────────────────── 10 · TECH STACK — text line by default, icon row optional The text line is the most keyword-dense content on the page, so it ships visible: no data-stack attribute = text line. ──────────────────────────────────────────────────────────── */ .stack-line, .stack-icons { margin: -24px 0 40px; } /* default (no attribute): text line */ .stack-line { display: block; } .stack-icons { display: none; } :root[data-stack="hidden"] .stack-line, :root[data-stack="icons"] .stack-line { display: none; } :root[data-stack="icons"] .stack-icons { display: flex; } .stack-line { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; } .stack-icons { flex-wrap: wrap; gap: 14px; color: var(--muted); } .stack-icons span { display: grid; place-items: center; } .stack-icons svg { width: 26px; height: 26px; transition: color 0.2s ease, transform 0.2s ease; } .stack-icons span:hover svg { color: var(--accent); transform: translateY(-1px); } .stack-icons text { fill: currentColor; stroke: none; font-family: var(--mono); font-weight: 600; } /* ──────────────────────────────────────────────────────────── 11 · ENTRANCE ANIMATIONS — .rise plus .d1–.d5 stagger delays ──────────────────────────────────────────────────────────── */ @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .rise { animation: rise 0.55s ease both; } .d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.13s; } .d3 { animation-delay: 0.21s; } .d4 { animation-delay: 0.29s; } .d5 { animation-delay: 0.37s; } /* ──────────────────────────────────────────────────────────── 12 · MEDIA QUERIES — narrow viewport, reduced motion ──────────────────────────────────────────────────────────── */ @media (max-width: 739px) { .cross { display: none; } /* Tooltips are 250px wide and centred on their term, so a term near either edge of the column pushed the tip off-screen — measured 65px past the left edge on "UAE Pass" at 320px, which body{overflow-x:hidden} then clipped into unreadability. Anchor to the paragraph instead of the word: the tip spans the text column and is always in bounds. Only one is ever visible, so dropping the per-word horizontal offset costs no clarity. */ .intro { position: relative; } .term { position: static; } .term .tip { left: 0; right: 0; width: auto; max-width: none; transform: none; } } @media (prefers-reduced-motion: reduce) { .rise, .blob, #glow.drift, .wip-dot, .wip-caret { animation: none; } .links a, .icon-btn, .links a svg, .badge, .stack-icons svg { transition: none; } .links a:hover, .icon-btn:hover, .stack-icons span:hover svg { transform: none; } .links a .ext { transition: none; } body, .intro, footer { transition: none; } }