/* ============================================================================= AURORA -- the bundled default theme (slug: `default`) ============================================================================= A dark, editorial personal site: an aurora gradient canvas, glass panels, oversized display type with a gradient headline, and hairline detailing. SCOPING RULE -- read before editing anything here. This file is loaded on EVERY page of the install, public and internal alike (public-header.php, admin-header.php, user-header.php and portfolio_pdf.php all link `themes-installed//theme.css`), because `data-theme` sits on . So it is split in two deliberately: 1. TOKENS -- `[data-theme="default"] { ... }` sets brand colors and fonts only. These reach the admin/user control panels too, which is intended: the panels pick up Aurora's violet/cyan accent while staying on their own light, dense, high-legibility chrome. Never put a dark background or a text color here. 2. CANVAS -- every structural/dark rule is scoped to something that exists on PUBLIC pages only: `main` (emitted by public-header.php and by nothing else), `.site-header`, `.site-footer`, `.bg-animated`. That is what keeps the control panels and the printable CV (portfolio_pdf.php has no
) untouched. Adding a rule here? Put it under §2's scopes unless you genuinely want it inside the admin panel as well. ============================================================================= */ /* ============================================================================= 1. TOKENS -- shared with the control panels ============================================================================= */ [data-theme="default"] { --color-primary: #7c5cff; --color-primary-dark: #5b3df0; --color-accent: #22d3ee; --font-heading: "Segoe UI Variable Display", "SF Pro Display", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; /* Canvas palette -- consumed only by the public-scoped rules in §2 onward. */ --au-void: #05060e; --au-deep: #0a0c1a; --au-panel: rgba(255, 255, 255, 0.045); --au-panel-strong: rgba(255, 255, 255, 0.07); --au-line: rgba(255, 255, 255, 0.10); --au-line-soft: rgba(255, 255, 255, 0.06); --au-text: #edeffa; --au-muted: #9aa1c4; --au-faint: #6d739a; --au-violet: #7c5cff; --au-cyan: #22d3ee; --au-rose: #ff6ec7; --au-glow: 0 24px 70px -28px rgba(124, 92, 255, 0.75); --au-radius: 18px; /* style.css paints .bg-animated with this; the element is public-only. */ --bg-gradient: radial-gradient(120% 90% at 50% 0%, #12162c 0%, #0a0c1a 45%, #05060e 100%); } /* ============================================================================= 2. THE CANVAS -- aurora field, grain, and the page ground ============================================================================= */ /* The animated background element only ever renders on public pages, so it is safe to hand the whole viewport over to the aurora here. Three drifting light fields plus a fine grain layer; the SVG noise is an inline data URI, so this stays true to the project's no-external-assets rule. */ [data-theme="default"] .bg-animated { background: var(--bg-gradient); } [data-theme="default"] .bg-animated::before, [data-theme="default"] .bg-animated::after { content: ""; position: absolute; inset: -25%; pointer-events: none; } [data-theme="default"] .bg-animated::before { background: radial-gradient(38% 30% at 18% 12%, rgba(124, 92, 255, 0.55), transparent 70%), radial-gradient(34% 26% at 82% 8%, rgba(34, 211, 238, 0.38), transparent 72%), radial-gradient(46% 34% at 62% 88%, rgba(255, 110, 199, 0.30), transparent 74%), radial-gradient(40% 30% at 8% 82%, rgba(91, 61, 240, 0.40), transparent 72%); filter: blur(30px); animation: auroraDrift 34s ease-in-out infinite alternate; } [data-theme="default"] .bg-animated::after { /* Film grain -- keeps large flat gradients from banding on wide displays. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); opacity: 0.05; mix-blend-mode: overlay; } @keyframes auroraDrift { 0% { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(0deg); } 50% { transform: translate3d(4%, 3%, 0) scale(1.12) rotate(4deg); } 100% { transform: translate3d(-2%, 4%, 0) scale(1.04) rotate(-3deg); } } /* The grid overlay from bg-svg.php reads as dirt on a dark ground -- dim it right down. */ [data-theme="default"] .bg-grid-line { stroke: rgba(255, 255, 255, 0.7); opacity: 0.045; } [data-theme="default"] .bg-blob { opacity: 0.20; filter: blur(38px); } /* Progressive enhancement: paints the overscroll gutter behind the fixed canvas the same near-black, so a rubber-band scroll on macOS/iOS doesn't flash the light app background through. Guarded because :has() is the only way to say "a page that has a
" from the root element; browsers without it simply keep the old gutter. */ @supports selector(:has(*)) { [data-theme="default"]:has(main) { background: var(--au-void); } [data-theme="default"]:has(main) body { background: transparent; } } /* ============================================================================= 3. PUBLIC CHROME -- header, footer, base typography ============================================================================= */ [data-theme="default"] .site-header { background: rgba(8, 10, 22, 0.55); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--au-line-soft); } [data-theme="default"] .site-header .brand { color: var(--au-text); letter-spacing: -0.01em; } [data-theme="default"] .site-header .brand img { box-shadow: 0 0 0 1px var(--au-line); } [data-theme="default"] .site-nav a { color: var(--au-muted); font-size: 0.92rem; position: relative; padding-bottom: 3px; transition: color .18s ease; } [data-theme="default"] .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--au-violet), var(--au-cyan)); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } [data-theme="default"] .site-nav a:hover { color: var(--au-text); } [data-theme="default"] .site-nav a:hover::after { transform: scaleX(1); } [data-theme="default"] .nav-toggle { color: var(--au-text); } /* Remapping the shared tokens *inside main* is the single most important rule in this file. The public pages (blog, shop, product, customer account) are full of markup that reads `var(--color-text)` / `var(--color-text-muted)` / `var(--color-surface)` -- some of it in inline style attributes, which no class-based override could ever win against. Custom properties inherit, so redefining them here re-points that entire existing vocabulary at the dark palette without touching a single one of those pages, and without leaking outside `main` into the control panels. Anything that must stay light (the .cv sheet) sets its own literal colors. */ [data-theme="default"] main { --color-text: var(--au-text); --color-text-muted: var(--au-muted); --color-surface: rgba(255, 255, 255, 0.05); --color-border: var(--au-line); color: var(--au-text); display: block; } [data-theme="default"] main h1, [data-theme="default"] main h2, [data-theme="default"] main h3, [data-theme="default"] main h4 { color: var(--au-text); letter-spacing: -0.02em; } [data-theme="default"] main a { color: var(--au-cyan); } [data-theme="default"] .site-footer { background: rgba(6, 8, 18, 0.7); border-top: 1px solid var(--au-line-soft); color: var(--au-faint); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Buttons, public side only. The primary button carries the theme's gradient and a soft violet bloom; the outline button is a hairline glass chip. */ [data-theme="default"] main .btn, [data-theme="default"] .site-header .btn { border-radius: 999px; padding: 11px 22px; letter-spacing: 0.01em; background: linear-gradient(120deg, var(--au-violet), #6d6bff 45%, var(--au-cyan) 140%); box-shadow: 0 14px 34px -18px rgba(124, 92, 255, 0.95); transition: transform .18s ease, box-shadow .22s ease, background .22s ease; } [data-theme="default"] main .btn:hover, [data-theme="default"] .site-header .btn:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -18px rgba(124, 92, 255, 1); } [data-theme="default"] main .btn.btn-outline, [data-theme="default"] .site-header .btn.btn-outline { background: var(--au-panel); border: 1px solid var(--au-line); color: var(--au-text); box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="default"] main .btn.btn-outline:hover, [data-theme="default"] .site-header .btn.btn-outline:hover { background: var(--au-panel-strong); border-color: rgba(124, 92, 255, 0.55); color: #fff; } /* ============================================================================= 4. HERO ============================================================================= */ [data-theme="default"] .hp-hero { padding: 96px 0 56px; } [data-theme="default"] .hp-hero-grid { gap: 56px; } [data-theme="default"] .hp-eyebrow { background: var(--au-panel); border: 1px solid var(--au-line); color: var(--au-muted); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.14em; font-size: 0.7rem; } /* A live dot in the pill -- small signal that the site is a maintained, current thing. */ [data-theme="default"] .hp-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--au-cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18); animation: auroraBeacon 2.8s ease-in-out infinite; } @keyframes auroraBeacon { 0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18); } 50% { opacity: .55; box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.04); } } [data-theme="default"] .hp-headline { font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; background: linear-gradient(112deg, #ffffff 6%, #cfd2ff 38%, var(--au-violet) 66%, var(--au-cyan) 96%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 220% 100%; animation: auroraSheen 14s ease-in-out infinite alternate; } @keyframes auroraSheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } [data-theme="default"] .hp-subheadline { color: var(--au-muted); font-size: 1.14rem; line-height: 1.65; max-width: 33em; } [data-theme="default"] .hp-hero-actions { margin-top: 4px; } /* The hero photo sits in a gradient-lit frame rather than a plain rounded box. */ [data-theme="default"] .hp-hero-visual { position: relative; } [data-theme="default"] .hp-hero-photo { border-radius: 26px; border: 1px solid var(--au-line); box-shadow: var(--au-glow), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; filter: saturate(108%) contrast(102%); } [data-theme="default"] .hp-hero-visual::after { /* Soft violet bloom behind whatever the hero shows (photo or SVG art). */ content: ""; position: absolute; inset: 12% 8%; z-index: -1; background: radial-gradient(closest-side, rgba(124, 92, 255, 0.5), transparent 78%); filter: blur(46px); } /* ============================================================================= 5. SECTION FURNITURE ============================================================================= */ [data-theme="default"] .hp-section { padding: 74px 24px; } [data-theme="default"] .hp-section-head { margin-bottom: 46px; text-align: left; max-width: 760px; } [data-theme="default"] .hp-section-title { font-size: clamp(1.7rem, 3.2vw, 2.35rem); letter-spacing: -0.03em; position: relative; padding-left: 18px; } /* Hairline gradient tick instead of a heavy underline -- quieter, more editorial. */ [data-theme="default"] .hp-section-title::before { content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--au-violet), var(--au-cyan)); } [data-theme="default"] .hp-section-subtitle { color: var(--au-muted); padding-left: 18px; } [data-theme="default"] .hp-section-more { margin-top: 30px; padding-left: 18px; } [data-theme="default"] .hp-arrow-link { display: inline-flex; align-items: center; gap: 9px; color: var(--au-text); font-weight: 600; font-size: 0.94rem; text-decoration: none; } [data-theme="default"] .hp-arrow-link svg { transition: transform .22s ease; } [data-theme="default"] .hp-arrow-link:hover { color: var(--au-cyan); text-decoration: none; } [data-theme="default"] .hp-arrow-link:hover svg { transform: translateX(5px); } /* Shared glass-panel treatment for every card type on the page. */ [data-theme="default"] .hp-grid-card, [data-theme="default"] .hp-testimonial, [data-theme="default"] .hp-work-card, [data-theme="default"] .hp-post-card, [data-theme="default"] .hp-product-card, [data-theme="default"] main .surface { background: linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.022)); border: 1px solid var(--au-line); border-radius: var(--au-radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 18px 44px -34px rgba(0, 0, 0, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--au-text); } /* ---------- Stats ---------- */ [data-theme="default"] .hp-stats { border-top: 1px solid var(--au-line-soft); border-bottom: 1px solid var(--au-line-soft); gap: 0; max-width: 1180px; } [data-theme="default"] .hp-stat { padding: 30px 18px; border-left: 1px solid var(--au-line-soft); } [data-theme="default"] .hp-stat:first-child { border-left: 0; } [data-theme="default"] .hp-stat-value { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.035em; background: linear-gradient(120deg, #ffffff, var(--au-violet) 78%, var(--au-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="default"] .hp-stat-label { color: var(--au-faint); text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.7rem; } @media (max-width: 760px) { [data-theme="default"] .hp-stat:nth-child(odd) { border-left: 0; } } /* ---------- "How I work" grid ---------- */ [data-theme="default"] .hp-grid-card { padding: 28px 26px; } [data-theme="default"] .hp-grid-card:hover { transform: translateY(-5px); border-color: rgba(124, 92, 255, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--au-glow); } [data-theme="default"] .hp-grid-icon { background: linear-gradient(140deg, rgba(124, 92, 255, 0.22), rgba(34, 211, 238, 0.14)); border: 1px solid var(--au-line); color: #cdc6ff; border-radius: 14px; } [data-theme="default"] .hp-grid-card h3 { font-size: 1.06rem; letter-spacing: -0.015em; } [data-theme="default"] .hp-grid-card p { color: var(--au-muted); } /* ---------- Selected work (live portfolio projects) ---------- */ [data-theme="default"] .hp-work-card { position: relative; display: block; padding: 30px 28px 26px; color: inherit; text-decoration: none; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease; } [data-theme="default"] a.hp-work-card:hover { transform: translateY(-5px); border-color: rgba(34, 211, 238, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 26px 60px -30px rgba(34, 211, 238, 0.7); text-decoration: none; } /* A gradient wash that wakes up on hover, sitting under the card's own content. */ [data-theme="default"] .hp-work-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(124, 92, 255, 0.22), transparent 62%); opacity: 0; transition: opacity .25s ease; } [data-theme="default"] a.hp-work-card:hover::before { opacity: 1; } [data-theme="default"] .hp-work-card > * { position: relative; } [data-theme="default"] .hp-work-index { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; color: var(--au-faint); margin-bottom: 14px; } [data-theme="default"] .hp-work-title { font-size: 1.22rem; margin: 0 0 10px; letter-spacing: -0.02em; } [data-theme="default"] .hp-work-text { color: var(--au-muted); font-size: 0.93rem; margin: 0 0 16px; line-height: 1.6; } [data-theme="default"] .hp-work-cue { position: absolute; top: 24px; right: 26px; color: var(--au-faint); font-size: 1.05rem; transition: transform .22s ease, color .22s ease; } [data-theme="default"] a.hp-work-card:hover .hp-work-cue { transform: translate(3px, -3px); color: var(--au-cyan); } /* ---------- Chips (tech stack, post category) ---------- */ [data-theme="default"] .hp-chip-row { display: flex; flex-wrap: wrap; gap: 7px; } [data-theme="default"] .hp-chip { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 0.73rem; font-weight: 600; letter-spacing: 0.02em; color: #c9c3ff; background: rgba(124, 92, 255, 0.13); border: 1px solid rgba(124, 92, 255, 0.26); } /* ---------- Capabilities (live portfolio skills) ---------- */ [data-theme="default"] .hp-skill-cloud { display: flex; flex-wrap: wrap; gap: 10px; } [data-theme="default"] .hp-skill-chip { padding: 10px 20px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--au-text); background: var(--au-panel); border: 1px solid var(--au-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .16s ease, border-color .16s ease, color .16s ease; } [data-theme="default"] .hp-skill-chip:hover { transform: translateY(-3px); border-color: rgba(34, 211, 238, 0.5); color: #fff; } /* ---------- Timeline (live portfolio experience) ---------- */ [data-theme="default"] .hp-timeline { border-left: 1px solid var(--au-line); } [data-theme="default"] .hp-timeline-item::before { background: var(--au-void); border: 2px solid var(--au-violet); box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.14); } [data-theme="default"] .hp-timeline-period { color: var(--au-faint); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.71rem; font-weight: 700; } [data-theme="default"] .hp-timeline-title { font-size: 1.1rem; margin: 6px 0 2px; letter-spacing: -0.02em; } [data-theme="default"] .hp-timeline-org { color: #b6bce0; font-size: 0.92rem; } [data-theme="default"] .hp-timeline-body { color: var(--au-muted); font-size: 0.92rem; margin: 8px 0 0; line-height: 1.6; } /* ---------- Journal (live blog posts) ---------- */ [data-theme="default"] .hp-post-card { color: inherit; text-decoration: none; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease; } [data-theme="default"] .hp-post-card:hover { transform: translateY(-5px); border-color: rgba(124, 92, 255, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--au-glow); text-decoration: none; } [data-theme="default"] .hp-post-cover img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); } [data-theme="default"] .hp-post-card:hover .hp-post-cover img { transform: scale(1.05); } [data-theme="default"] .hp-post-meta { color: var(--au-faint); font-size: 0.76rem; } [data-theme="default"] .hp-post-title { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.02em; } [data-theme="default"] .hp-post-excerpt { color: var(--au-muted); font-size: 0.9rem; line-height: 1.6; } /* ---------- Store strip (live products) ---------- */ [data-theme="default"] .hp-product-card { color: inherit; text-decoration: none; overflow: hidden; transition: transform .2s ease, border-color .2s ease; } [data-theme="default"] .hp-product-card:hover { transform: translateY(-5px); border-color: rgba(34, 211, 238, 0.45); text-decoration: none; } [data-theme="default"] .hp-product-image-empty { background: linear-gradient(140deg, rgba(124, 92, 255, 0.16), rgba(34, 211, 238, 0.10)); } [data-theme="default"] .hp-product-name { font-weight: 650; letter-spacing: -0.01em; } [data-theme="default"] .hp-product-price { color: var(--au-cyan); font-weight: 700; } /* ---------- Testimonials ---------- */ [data-theme="default"] .hp-testimonial { padding: 30px 28px; } [data-theme="default"] .hp-testimonial-quote-icon { color: var(--au-violet); opacity: .5; } [data-theme="default"] .hp-testimonial p.hp-quote { color: #dfe2f6; font-style: normal; font-size: 1.01rem; line-height: 1.65; } [data-theme="default"] .hp-testimonial-avatar-fallback { background: linear-gradient(140deg, var(--au-violet), var(--au-cyan)); } [data-theme="default"] .hp-testimonial-name { color: var(--au-text); } [data-theme="default"] .hp-testimonial-role { color: var(--au-faint); } /* ---------- Closing invitation ---------- */ [data-theme="default"] .hp-cta { position: relative; overflow: hidden; border: 1px solid var(--au-line); border-radius: 28px; padding: 66px 34px; background: radial-gradient(90% 140% at 12% 0%, rgba(124, 92, 255, 0.5), transparent 62%), radial-gradient(80% 130% at 92% 100%, rgba(34, 211, 238, 0.36), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 40px 90px -50px rgba(124, 92, 255, 0.9); } [data-theme="default"] .hp-cta h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.03em; } [data-theme="default"] .hp-cta p { color: #cdd2ee; } [data-theme="default"] .hp-cta .btn { background: #ffffff; color: #14162b; box-shadow: 0 18px 40px -20px rgba(255, 255, 255, 0.6); } [data-theme="default"] .hp-cta .btn:hover { background: #ffffff; color: #14162b; opacity: 1; } [data-theme="default"] .hp-explore-more { padding-bottom: 84px; } /* ============================================================================= 6. THE REST OF THE PUBLIC SITE -- blog, shop, customer pages These pages reuse generic .surface/.stat-card/.badge/form markup, so they only need the dark treatment; their structure is left exactly as it is. ============================================================================= */ [data-theme="default"] main .stat-card { transition: transform .2s ease, border-color .2s ease; } [data-theme="default"] main a.stat-card:hover { transform: translateY(-4px); border-color: rgba(124, 92, 255, 0.45); text-decoration: none; } /* Only the neutral badge is restyled. The green/red/amber ones carry meaning on order and status pages -- recoloring those to fit the palette would cost more than it gains. */ [data-theme="default"] main .badge-gray { background: rgba(124, 92, 255, 0.16); color: #cbc5ff; border: 1px solid rgba(124, 92, 255, 0.28); } [data-theme="default"] main input, [data-theme="default"] main select, [data-theme="default"] main textarea { background: rgba(255, 255, 255, 0.05); border-color: var(--au-line); color: var(--au-text); } [data-theme="default"] main input::placeholder, [data-theme="default"] main textarea::placeholder { color: var(--au-faint); } [data-theme="default"] main input:focus, [data-theme="default"] main select:focus, [data-theme="default"] main textarea:focus { border-color: rgba(124, 92, 255, 0.7); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18); } [data-theme="default"] main select option { background: #0d1020; color: var(--au-text); } [data-theme="default"] main label { color: #c6cbe8; } [data-theme="default"] main .pagination a { background: var(--au-panel); border: 1px solid var(--au-line); color: var(--au-muted); } [data-theme="default"] main .pagination a.active, [data-theme="default"] main .pagination a:hover { background: rgba(124, 92, 255, 0.28); color: #fff; } [data-theme="default"] main table { color: var(--au-text); } [data-theme="default"] main th { color: var(--au-muted); background: rgba(255, 255, 255, 0.04); border-color: var(--au-line-soft); } [data-theme="default"] main td { border-color: var(--au-line-soft); } [data-theme="default"] main tbody tr:hover { background: rgba(255, 255, 255, 0.035); } /* ============================================================================= 7. THE PORTFOLIO PAGE -- a white sheet floating on the dark canvas The .cv block is deliberately left light: it is the same markup the PDF export renders (portfolio_pdf.php), and a printable CV must stay ink-on-paper. Aurora frames it instead of recoloring it. ============================================================================= */ [data-theme="default"] main .surface:has(.cv) { background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 50px 110px -50px rgba(0, 0, 0, 0.95), 0 0 90px -40px rgba(124, 92, 255, 0.5); border-radius: 22px; } [data-theme="default"] .cv-layout-aurora .cv-header { border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--au-violet), var(--au-cyan)) 1; } [data-theme="default"] .cv-layout-aurora .cv-name { font-size: 2.1rem; letter-spacing: -0.03em; } [data-theme="default"] .cv-layout-aurora .cv-headline { background: linear-gradient(100deg, var(--au-violet), var(--au-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="default"] .cv-layout-aurora .cv-section-title { border-bottom: none; color: #4b3fb8; letter-spacing: 0.14em; } [data-theme="default"] .cv-layout-aurora .cv-sidebar { background: #f7f7fd; border: 1px solid #e6e5f6; border-radius: 14px; padding: 20px 18px; } /* ============================================================================= 8. MOTION -- scroll reveal, no JavaScript `animation-timeline: view()` drives each section's entrance from its own scroll position. Browsers without scroll-driven animations simply show the sections as normal (the rule only ever applies inside the @supports block), so this is a pure enhancement with no fallback flash of invisible content. ============================================================================= */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { [data-theme="default"] .hp-reveal { animation: auroraReveal linear both; animation-timeline: view(); animation-range: entry 5% cover 26%; } @keyframes auroraReveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } } } @media (prefers-reduced-motion: reduce) { [data-theme="default"] .bg-animated::before, [data-theme="default"] .hp-headline, [data-theme="default"] .hp-eyebrow::before { animation: none !important; } } /* ============================================================================= 9. PRINT -- the browser's "print this page" on any public page ============================================================================= */ @media print { [data-theme="default"] .bg-animated, [data-theme="default"] .site-header, [data-theme="default"] .site-footer { display: none !important; } [data-theme="default"] main { color: #1e293b; } [data-theme="default"] main .surface:has(.cv) { box-shadow: none; border: none; } }