/* ============================================================================ AWAQN — BASE / RESET + BRAND ATMOSPHERE UTILITIES Ships the signature "Void + ambient glow" surface and the locked brand text treatments as ready utilities so every consumer surface starts correct. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- The signature surface: true-black void + diffuse cyan+magenta glow ---- Add class "void" to (or any full-bleed section) to get the atmosphere. The glow is blurred radial light, NOT a hard gradient band. */ .void { position: relative; background: var(--color-bg); color: var(--color-ink); } .void::before { content: ""; position: fixed; inset: -20%; background: var(--color-ambient); filter: blur(60px); z-index: 0; pointer-events: none; } .void > * { position: relative; z-index: 1; } /* section-scoped ambient (not fixed) — for a hero/anchor block inside a page */ .ambient { position: relative; overflow: hidden; } .ambient::before { content: ""; position: absolute; inset: -40%; background: var(--color-ambient); filter: blur(40px); z-index: 0; pointer-events: none; } .ambient > * { position: relative; z-index: 1; } /* ---- Locked brand text treatments ---- */ /* Eyebrow / micro label */ .eyebrow { color: var(--eyebrow-color); font-family: var(--font-body); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; } /* Accent word = GEORGIA ITALIC in the TONAL CYAN gradient, bold (never rainbow, never thin). background-clip:text clips italic overhang + descenders → pad the inline box and pull the margin back so layout flow is unchanged. */ .accent-word { font-family: var(--font-accent); font-style: italic; background: var(--color-gradient-word); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: var(--weight-medium); display: inline-block; padding: 0.08em 0.24em 0.18em 0.04em; margin: -0.08em -0.24em -0.18em -0.04em; line-height: var(--leading-snug); } /* Plain cyan accent / inline link — also always bold */ .accent-text { color: var(--color-accent); font-weight: var(--color-accent-weight); } /* Fine spectral rule (cyan→magenta). Rainbow is for rules + the ring ONLY. */ .accent-rule { height: 3px; width: 64px; border-radius: 2px; border: none; background: var(--color-gradient-accent); margin: var(--space-4) 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }