/* nourkaram.co - coming soon Tokens are defined for dark first (the default document theme) and overridden for light, so a theme switch is one attribute on . */ :root { --bg: #0a0b0e; --bg-soft: #121419; --fg: #f4f5f7; --muted: #8b93a3; --line: #1e222b; --accent: #c9a227; --glow: rgba(201, 162, 39, 0.16); --ring: rgba(244, 245, 247, 0.10); } :root[data-theme="light"] { --bg: #fcfcfd; --bg-soft: #f3f4f7; --fg: #14161b; --muted: #666e7d; --line: #e4e7ee; --accent: #9a7b12; --glow: rgba(154, 123, 18, 0.06); --ring: rgba(20, 22, 27, 0.18); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px 0; overflow-x: hidden; transition: background-color 0.4s ease, color 0.4s ease; } /* Soft light that follows the pointer. app.js sets --x/--y; without script it simply rests in the centre, which still looks intentional. */ .glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( 520px circle at var(--x, 50%) var(--y, 50%), var(--glow), transparent 70% ); transition: background 0.45s ease; } .theme { position: fixed; top: 16px; right: 16px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--muted); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .theme:hover { color: var(--fg); border-color: var(--ring); } .theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .theme:active { transform: scale(0.94); } .theme-icon { width: 20px; height: 20px; } .theme-icon--sun { display: none; } :root[data-theme="light"] .theme-icon--moon { display: none; } :root[data-theme="light"] .theme-icon--sun { display: block; } main { position: relative; z-index: 1; flex: 1; display: grid; place-items: center; width: 100%; } .view { width: 100%; max-width: 560px; text-align: center; } /* --- mark ---------------------------------------------------------------- */ .mark { width: 68px; height: 68px; margin: 0 auto 28px; display: block; overflow: visible; } .mark-ring, .mark-stroke { fill: none; stroke-linecap: round; } .mark-ring { stroke: var(--ring); stroke-width: 1.5; } .mark-stroke { stroke: var(--accent); stroke-width: 2.6; } .mark-dot { fill: var(--accent); } /* Draw-on, once, on load. */ .mark-ring { stroke-dasharray: 158; stroke-dashoffset: 158; animation: draw 1.5s 0.15s ease forwards; } .mark-stroke{ stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw 0.8s 0.9s ease forwards; } .mark-dot { opacity: 0; animation: fade 0.5s 1.5s ease forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fade { to { opacity: 1; } } /* --- type ---------------------------------------------------------------- */ .wordmark { margin: 0 0 14px; font-size: clamp(30px, 8vw, 46px); font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.15; } .tagline { margin: 0 0 26px; font-size: 13px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted); } /* Slow sheen across the two words - subtle, never a strobe. */ .tagline-text { background: linear-gradient( 100deg, var(--muted) 30%, var(--fg) 50%, var(--muted) 70% ); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 6s linear infinite; } @keyframes sheen { from { background-position: 180% 0; } to { background-position: -80% 0; } } .rule { position: relative; height: 1px; max-width: 260px; margin: 0 auto 24px; background: var(--line); overflow: hidden; } .rule-run { position: absolute; inset: 0 auto 0 0; width: 42%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: run 4.5s ease-in-out infinite; } @keyframes run { 0%, 100% { transform: translateX(-110%); } 50% { transform: translateX(240%); } } .note { margin: 0; color: var(--muted); font-size: 15px; } .foot { position: relative; z-index: 1; padding: 28px 16px calc(20px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; } /* --- view transitions (driven by app.js) --------------------------------- */ .view { opacity: 1; transform: translateY(0); transition: opacity 0.35s ease, transform 0.35s ease; } .view[data-leaving="true"] { opacity: 0; transform: translateY(8px); } @media (max-width: 420px) { .wordmark { letter-spacing: 0.1em; } .tagline { letter-spacing: 0.26em; } } @media (prefers-reduced-motion: reduce) { .mark-ring, .mark-stroke { stroke-dashoffset: 0; animation: none; } .mark-dot { opacity: 1; animation: none; } .tagline-text { animation: none; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--muted); } .rule-run { animation: none; opacity: 0; } .glow, .view, body, .theme { transition: none; } }