/* ════════════════════════════════════════════════════════════════════════
* ASEM PORTFOLIO — ELEGANCE LAYER
*
* Magical, restrained polish that lives ON TOP of extras.css.
* Everything here is opt-in via class hooks the theme + plugin already emit.
* No new HTTP requests. All animations honor prefers-reduced-motion.
*
* Layers in this file:
* 1. View Transitions API for smooth route changes (single-page-app feel)
* 2. Gold reading-progress bar on blog singles (scroll-driven, no JS)
* 3. Drop-cap + pull-quote typography for blog
* 4. Author-bio E-E-A-T card (paired with class-author-bio.php)
* 5. Cursor-following gold halo on hero (CSS vars + 14-line JS)
* 6. Gold filigree ornament dividers (inline SVG via data URI)
* 7. Refined focus rings — gold halo + offset
* 8. Search results polish
* 9. 404 lost-in-gold scene
* 10. Selection + caret tint
* ════════════════════════════════════════════════════════════════════════ */
/* ─── 1) View Transitions API ────────────────────────────────────────────
* Chrome 126+ / Edge / Safari Tech Preview. The opt-in tag in
* tells WP-served navigations to cross-fade. Free perceived-performance win.
* Gracefully no-ops in unsupported browsers. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: .42s;
animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
/* Header + footer keep their identity across nav — no flicker. */
header.wp-block-group.alignfull { view-transition-name: asem-header; }
footer.wp-block-group.alignfull { view-transition-name: asem-footer; }
/* ─── 2) Reading Progress Bar ────────────────────────────────────────────
* The element lives in parts/header.html and stretches to 100% width via a
* scroll-driven animation. No JS. Cheap (single transform on a 2px element).
* Only visible on blog singles (body.single-post). */
.asem-reading-progress {
position: fixed;
inset-inline-start: 0;
top: 0;
z-index: 9999;
height: 2px;
width: 100%;
background: linear-gradient(90deg, #D4AF37 0%, #B8862E 50%, #FFD86B 100%);
transform-origin: 0 50%;
transform: scaleX(0);
pointer-events: none;
opacity: 0;
transition: opacity .25s ease;
box-shadow: 0 0 12px rgba(212, 175, 55, .55);
}
body.single-post .asem-reading-progress,
body.single-asem_project .asem-reading-progress,
body.single-asem_certification .asem-reading-progress {
opacity: 1;
}
@supports (animation-timeline: scroll(root)) {
@media (prefers-reduced-motion: no-preference) {
body.single-post .asem-reading-progress,
body.single-asem_project .asem-reading-progress,
body.single-asem_certification .asem-reading-progress {
animation: asem-progress linear;
animation-timeline: scroll(root block);
}
}
}
@keyframes asem-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
[dir="rtl"] .asem-reading-progress { transform-origin: 100% 50%; }
/* ─── 3) Drop-cap + Pull-quote ───────────────────────────────────────────
* Magazine-grade opening for blog posts. Drop-cap targets the first
* paragraph that follows our injected meta strip / TOC. */
body.single-post .wp-block-post-content > p:not(.asem-post-toc):first-of-type::first-letter,
body.single-post .wp-block-post-content > p.asem-drop:first-of-type::first-letter {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800;
font-size: 4.236rem;
line-height: .85;
float: inline-start;
margin: .35rem .618rem .12rem 0;
padding-top: .2rem;
color: var(--wp--preset--color--primary);
background: linear-gradient(135deg, #FFD86B 0%, #D4AF37 50%, #B8862E 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
[dir="rtl"] body.single-post .wp-block-post-content > p:not(.asem-post-toc):first-of-type::first-letter {
margin: .35rem 0 .12rem .618rem;
}
/* Pull-quote (core/pullquote block) */
.wp-block-pullquote {
border: 0 !important;
padding: 2.058rem 1.618rem !important;
margin: 2.618rem 0 !important;
background: var(--asem-card-bg);
border-radius: 1.272rem;
box-shadow: var(--asem-card-shadow);
position: relative;
overflow: hidden;
text-align: start;
}
.wp-block-pullquote::before {
content: "❝";
position: absolute;
top: -.382rem;
inset-inline-start: 1.272rem;
font-family: 'Playfair Display', Georgia, serif;
font-size: 4.236rem;
line-height: 1;
color: var(--wp--preset--color--primary);
opacity: .55;
}
.wp-block-pullquote p {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: clamp(1.272rem, 2.6vw, 1.618rem) !important;
font-style: italic;
font-weight: 500;
line-height: 1.382;
margin: 0;
color: var(--wp--preset--color--text);
}
.wp-block-pullquote cite {
display: block;
margin-top: 1rem;
font-family: 'Inter', sans-serif;
font-size: .85rem;
font-style: normal;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--wp--preset--color--primary);
font-weight: 600;
}
.wp-block-pullquote cite::before {
content: "— ";
color: var(--wp--preset--color--primary);
}
/* Standard blockquote — refined gold rule */
blockquote.wp-block-quote,
.wp-block-post-content blockquote {
border: 0 !important;
border-inline-start: 3px solid var(--wp--preset--color--primary) !important;
padding: .85rem 1.272rem !important;
margin: 1.618rem 0 !important;
background: linear-gradient(90deg, rgba(212, 175, 55, .08) 0%, transparent 100%);
font-style: italic;
color: var(--wp--preset--color--text);
border-radius: 0 .618rem .618rem 0;
}
[dir="rtl"] blockquote.wp-block-quote,
[dir="rtl"] .wp-block-post-content blockquote {
border-radius: .618rem 0 0 .618rem;
background: linear-gradient(-90deg, rgba(212, 175, 55, .08) 0%, transparent 100%);
}
/* ─── 4) Author Bio (E-E-A-T card) ───────────────────────────────────────
* Rendered by AsemCV\Seo\AuthorBio at the end of every blog post. */
.asem-author-bio {
position: relative;
margin: 3.236rem 0 0;
padding: 0;
background: var(--asem-card-bg);
border: 1px solid rgba(184, 134, 46, .32);
border-radius: 1.272rem;
box-shadow: var(--asem-card-shadow);
overflow: hidden;
break-inside: avoid;
}
.asem-author-bio__ribbon {
position: absolute;
inset-inline: 0;
top: 0;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .65) 20%, rgba(184, 134, 46, 1) 50%, rgba(212, 175, 55, .65) 80%, transparent);
pointer-events: none;
}
.asem-author-bio__inner {
display: grid;
grid-template-columns: 7.854rem 1fr;
gap: 1.618rem;
align-items: start;
padding: 1.618rem;
}
@media (max-width: 640px) {
.asem-author-bio__inner { grid-template-columns: 1fr; text-align: center; gap: 1rem; padding: 1.272rem; }
}
.asem-author-bio__portrait {
width: 7.854rem;
height: 7.854rem;
border-radius: 50%;
overflow: hidden;
position: relative;
background: linear-gradient(135deg, rgba(212, 175, 55, .25), rgba(184, 134, 46, .35));
padding: 3px;
box-shadow: 0 .618rem 1.618rem rgba(184, 134, 46, .25);
}
@media (max-width: 640px) { .asem-author-bio__portrait { margin: 0 auto; } }
.asem-author-bio__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.asem-author-bio__eyebrow {
margin: 0 0 .382rem;
font-size: .78rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--wp--preset--color--primary);
font-weight: 600;
}
.asem-author-bio__name {
margin: 0 0 .236rem;
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.272rem, 2.2vw, 1.618rem);
font-weight: 700;
color: var(--wp--preset--color--text);
line-height: 1.2;
}
.asem-author-bio__role {
margin: 0 0 .85rem;
font-size: .95rem;
color: var(--wp--preset--color--muted);
font-weight: 500;
}
.asem-author-bio__pills {
display: flex;
flex-wrap: wrap;
gap: .618rem;
list-style: none;
margin: 0 0 .85rem;
padding: 0;
}
@media (max-width: 640px) { .asem-author-bio__pills { justify-content: center; } }
.asem-author-bio__pill {
display: inline-flex;
align-items: baseline;
gap: .382rem;
padding: .382rem .85rem;
border-radius: 999px;
background: rgba(184, 134, 46, .10);
border: 1px solid rgba(184, 134, 46, .28);
font-size: .85rem;
}
.asem-author-bio__pill strong {
color: var(--wp--preset--color--primary);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.asem-author-bio__pill span { color: var(--wp--preset--color--muted); }
.asem-author-bio__text {
margin: 0 0 1rem;
font-size: .95rem;
line-height: 1.7;
color: var(--wp--preset--color--text);
}
.asem-author-bio__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
@media (max-width: 640px) { .asem-author-bio__foot { justify-content: center; } }
.asem-author-bio__cta {
display: inline-flex;
align-items: center;
gap: .382rem;
padding: .618rem 1.272rem;
border-radius: 999px;
background: linear-gradient(135deg, #D4AF37 0%, #B8862E 100%);
color: #1A1F2C !important;
font-weight: 600;
text-decoration: none !important;
font-size: .9rem;
letter-spacing: .04em;
border: 1px solid rgba(184, 134, 46, .55);
box-shadow: 0 .382rem 1rem rgba(184, 134, 46, .25);
transition: transform .25s ease, box-shadow .25s ease;
}
.asem-author-bio__cta:hover {
transform: translateY(-2px);
box-shadow: 0 .618rem 1.618rem rgba(184, 134, 46, .4);
}
[dir="rtl"] .asem-author-bio__cta svg { transform: scaleX(-1); }
.asem-author-bio__social {
display: flex;
gap: .618rem;
}
.asem-author-bio__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.236rem;
height: 2.236rem;
border-radius: 999px;
border: 1px solid var(--wp--preset--color--border);
color: var(--wp--preset--color--primary);
background: var(--wp--preset--color--bg-elevated);
text-decoration: none;
transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.asem-author-bio__social a:hover {
transform: translateY(-2px);
border-color: var(--wp--preset--color--primary);
background: var(--wp--preset--color--bg);
}
/* ─── 5) Cursor-following gold halo on hero ──────────────────────────────
* Pure CSS via custom properties — JS only writes --mx / --my (cheap).
* Disabled on touch + reduced-motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.asem-hero {
position: relative;
}
.asem-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 35%),
rgba(212, 175, 55, .18) 0%,
rgba(212, 175, 55, 0) 60%);
opacity: 0;
transition: opacity .35s ease;
mix-blend-mode: screen;
z-index: 0;
}
.asem-hero:hover::after { opacity: 1; }
}
/* ─── 6) Gold filigree ornament dividers ─────────────────────────────────
* The .asem-ornament element is purely decorative. It is a CSS-only
* golden flourish suitable between major sections. Add .asem-ornament
* to any block element OR use the helper class on a core/separator.
*
* SVG is inlined as a data: URI so there is no extra network request. */
.asem-ornament {
display: block;
width: 100%;
max-width: 12rem;
height: 1.272rem;
margin: 2.618rem auto;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: .85;
background-image: url("data:image/svg+xml;utf8,");
}
@media (max-width: 720px) {
.asem-ornament { margin: 1.618rem auto; max-width: 8rem; }
}
/* ─── 7) Refined gold focus rings ────────────────────────────────────────
* Better than the default 2px outline — soft halo + crisp inner ring. */
:focus-visible {
outline: 2px solid var(--wp--preset--color--primary);
outline-offset: 3px;
border-radius: inherit;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
box-shadow:
0 0 0 3px rgba(212, 175, 55, .25),
0 0 0 1px var(--wp--preset--color--primary);
outline: none;
}
/* ─── 8) Search results polish ──────────────────────────────────────────── */
body.search-results .wp-block-query .wp-block-post-template {
display: grid;
gap: 1.272rem;
margin: 2rem 0;
padding: 0;
list-style: none;
}
body.search-results .wp-block-query .wp-block-post-template > li {
background: var(--asem-card-bg);
border: 1px solid rgba(184, 134, 46, .24);
border-radius: 1rem;
padding: 1.272rem 1.618rem;
box-shadow: var(--asem-card-shadow);
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
position: relative;
}
body.search-results .wp-block-query .wp-block-post-template > li::before {
content: "";
position: absolute;
inset-inline: 0;
top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(184, 134, 46, .65), transparent);
}
body.search-results .wp-block-query .wp-block-post-template > li:hover {
border-color: rgba(184, 134, 46, .55);
transform: translateY(-2px);
box-shadow: var(--asem-card-shadow-hover);
}
body.search-results .wp-block-query h2.wp-block-post-title {
margin: 0 0 .382rem;
font-size: 1.272rem;
}
body.search-results .wp-block-query h2.wp-block-post-title a {
color: var(--wp--preset--color--text);
text-decoration: none;
}
body.search-results .wp-block-query h2.wp-block-post-title a:hover {
color: var(--wp--preset--color--primary);
}
body.search-results .wp-block-search {
max-width: 540px;
margin: 0 0 2.618rem;
}
body.search-results .wp-block-search__input {
border: 1px solid var(--wp--preset--color--border);
border-radius: 999px;
background: var(--wp--preset--color--bg-elevated);
color: var(--wp--preset--color--text);
padding: .618rem 1.272rem;
min-height: 44px;
transition: border-color .25s ease, box-shadow .25s ease;
}
body.search-results .wp-block-search__input:focus {
border-color: var(--wp--preset--color--primary);
box-shadow: 0 0 0 3px rgba(212, 175, 55, .18);
outline: none;
}
/* ─── 9) 404 — lost in gold ─────────────────────────────────────────────── */
.asem-404 {
min-height: 60vh;
display: grid;
place-items: center;
text-align: center;
padding: clamp(2.618rem, 8vw, 6.854rem) 1.272rem;
position: relative;
overflow: hidden;
}
.asem-404::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 20%, rgba(212, 175, 55, .14) 0%, transparent 55%),
radial-gradient(ellipse at 70% 80%, rgba(184, 134, 46, .10) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.asem-404__inner { position: relative; z-index: 1; max-width: 540px; margin: 0 auto; }
.asem-404__numeral {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(6rem, 18vw, 11.09rem);
line-height: .9;
font-weight: 800;
background: linear-gradient(135deg, #FFD86B 0%, #D4AF37 35%, #B8862E 70%, #8C6311 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -.04em;
margin: 0 0 .618rem;
filter: drop-shadow(0 0.618rem 1.618rem rgba(184, 134, 46, .25));
}
.asem-404__ornament {
width: 12rem;
height: 1.272rem;
margin: 1rem auto 2rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml;utf8,");
}
.asem-404__lede {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.5rem, 4vw, 2.058rem);
font-weight: 700;
color: var(--wp--preset--color--text);
margin: 0 0 .618rem;
line-height: 1.2;
}
.asem-404__sub {
color: var(--wp--preset--color--muted);
font-size: 1.05rem;
line-height: 1.7;
margin: 0 0 2.058rem;
}
.asem-404__actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.asem-404__search { margin: 2rem auto 0; max-width: 380px; }
.asem-404__search .wp-block-search__inside-wrapper {
border: 1px solid var(--wp--preset--color--border);
background: var(--wp--preset--color--bg-elevated);
border-radius: 999px;
padding: 4px;
}
.asem-404__search .wp-block-search__input {
border: 0;
background: transparent;
padding: .618rem 1rem;
color: var(--wp--preset--color--text);
}
.asem-404__search .wp-block-search__button {
background: linear-gradient(135deg, #D4AF37 0%, #B8862E 100%);
color: #1A1F2C;
border: 0;
border-radius: 999px;
padding: .618rem 1.272rem;
font-weight: 600;
}
/* ─── 10) Selection + caret + ornament text break-out ──────────────────── */
input, textarea, select, [contenteditable="true"] {
caret-color: var(--wp--preset--color--primary);
}
/* Tasteful first-line uplift on long-form prose headings */
.wp-block-post-content h2 {
margin-top: 2.618rem;
}
.wp-block-post-content h2 + p {
margin-top: 1rem;
}
/* ─── Light layer: shimmer the primary site-title on idle (1.5s every 8s) ──
* Only on hover-capable devices to avoid wasting paint on mobiles. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.wp-block-site-title a {
background-size: 200% 100%;
animation: asem-shimmer 9s ease-in-out infinite;
}
}
@keyframes asem-shimmer {
0%, 92%, 100% { background-position: 0 0; }
96% { background-position: 100% 0; }
}
/* ─── Print-only: hide pure-decoration layers ──────────────────────────── */
@media print {
.asem-reading-progress,
.asem-ornament,
.asem-404 { display: none !important; }
.asem-author-bio { break-inside: avoid; }
}