/* Asem Portfolio — Luxury Gold theme runtime + toggle overrides. * Built on the golden ratio (φ ≈ 1.618). */ :root { color-scheme: light; /* Golden-ratio constants — usable from any block style. */ --phi: 1.618; --phi-half: 1.272; /* √φ */ --phi-inv: 0.618; /* 1/φ */ --phi-inv2: 0.382; /* 1/φ² */ /* Golden modular scale — radii. */ --radius-xs: 0.236rem; --radius-sm: 0.382rem; --radius-md: 0.618rem; --radius-lg: 1rem; --radius-xl: 1.618rem; --radius-2xl: 2.618rem; /* Golden aspect ratios (width / height). */ --ratio-golden: 1.618; --ratio-golden-h: 0.618; /* Card surface — luxurious warm ivory gradient (visible against cream bg). * Top-left receives a subtle gold wash; bottom-right is paler ivory. */ --asem-card-bg: linear-gradient(155deg, #FFFBF1 0%, #FBF3DD 60%, #F5E9C9 100%); --asem-card-bg-strong: linear-gradient(155deg, #FFFCF4 0%, #FAF1D8 100%); /* Card decoration — a soft gold inner glow + warm ambient shadow. */ --asem-card-shadow: 0 1px 0 rgba(212,175,55,0.25) inset, 0 0.382rem 1rem rgba(184,134,46,0.10), 0 1.618rem 3.236rem -1rem rgba(140,99,17,0.12); --asem-card-shadow-hover: 0 1px 0 rgba(212,175,55,0.45) inset, 0 0.618rem 1.618rem rgba(184,134,46,0.18), 0 2.618rem 4.236rem -1rem rgba(140,99,17,0.22); } /* * Dark-mode runtime overrides: * Re-bind the WP preset CSS variables when [data-theme="dark"] is set on . * No FSE rebuild needed — toggling the attribute swaps the entire palette. */ html[data-theme="dark"] { color-scheme: dark; --wp--preset--color--bg: #0E0F12; --wp--preset--color--bg-elevated: #171A21; --wp--preset--color--bg-deep: #0A0B0E; --wp--preset--color--primary: #D4AF37; --wp--preset--color--primary-strong: #FFD86B; --wp--preset--color--gold-bright: #FFE08A; --wp--preset--color--accent: #F2EAD3; --wp--preset--color--text: #F2EAD3; --wp--preset--color--muted: #A89A7A; --wp--preset--color--border: #2A2620; --wp--preset--color--white: #FFFFFF; /* Cards become deep onyx in dark mode with subtle gold sheen. */ --asem-card-bg: linear-gradient(155deg, #1B1F28 0%, #14171E 60%, #0E0F12 100%); --asem-card-bg-strong: linear-gradient(155deg, #1F232C 0%, #14171E 100%); --asem-card-shadow: 0 1px 0 rgba(212,175,55,0.30) inset, 0 0.382rem 1rem rgba(0,0,0,0.45), 0 1.618rem 3.236rem -1rem rgba(0,0,0,0.6); --asem-card-shadow-hover: 0 1px 0 rgba(255,216,107,0.5) inset, 0 0.618rem 1.618rem rgba(0,0,0,0.55), 0 2.618rem 4.236rem -1rem rgba(0,0,0,0.7); } html { scroll-behavior: smooth; overflow-x: clip; /* contain stray overflow without disabling sticky/inset */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: radial-gradient(ellipse at top, rgba(212,175,55,0.10) 0%, transparent 55%), radial-gradient(ellipse at bottom right, rgba(184,134,46,0.06) 0%, transparent 50%), var(--wp--preset--color--bg); min-height: 100vh; overflow-x: clip; /* RTL safety net — kills the infinite drag */ transition: background-color .35s ease, color .35s ease; } html[data-theme="dark"] body { background: radial-gradient(ellipse at top, rgba(212,175,55,0.12) 0%, transparent 55%), radial-gradient(ellipse at bottom right, rgba(255,216,107,0.08) 0%, transparent 50%), var(--wp--preset--color--bg); } ::selection { background: rgba(212,175,55,0.35); color: var(--wp--preset--color--text); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--wp--preset--color--bg-deep); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #D4AF37, #B8862E); border-radius: 12px; border: 2px solid var(--wp--preset--color--bg-deep); } .wp-site-blocks > main { min-height: 60vh; } .wp-block-post-content > * + * { margin-top: var(--wp--preset--spacing--40); } /* Buttons — luxury rise (φ padding & radius) */ .wp-block-button__link { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; box-shadow: 0 0.382rem 1rem rgba(184,134,46,0.18); letter-spacing: 0.02em; border-radius: 999px; } .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(212,175,55,0.32); } .wp-block-button.is-style-outline .wp-block-button__link { box-shadow: none; border: 1px solid var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); background: transparent; } .wp-block-post-title a { color: inherit; text-decoration: none; } /* RTL: switch the body font to Arabic display family */ [dir="rtl"] body { font-family: var(--wp--preset--font-family--ibm-plex-arabic), var(--wp--preset--font-family--inter), system-ui, sans-serif; } [dir="rtl"] :is(h1, h2, h3, h4) { font-family: var(--wp--preset--font-family--ibm-plex-arabic), serif; } /* Skip-link uses logical inset-start so it never overflows in RTL. */ .skip-link { position: absolute; inset-inline-start: -9999px; top: 1rem; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); padding: 0.5rem 1rem; z-index: 1000; border-radius: 6px; } .skip-link:focus { inset-inline-start: 1rem; } /* ─── About / Summary card ───────────────────────────────────────────── */ .asem-summary__eyebrow { margin: 0 0 1rem; text-align: center; color: var(--wp--preset--color--primary); font-size: 0.786rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .asem-summary__text { margin: 0 auto; max-width: 660px; text-align: center; font-size: 1.05rem; line-height: 1.85; color: var(--wp--preset--color--text); } [dir="rtl"] .asem-summary__text { font-family: var(--wp--preset--font-family--ibm-plex-arabic, system-ui, sans-serif); } /* ─── Sidebar ────────────────────────────────────────────────────────── */ .asem-sidebar-title { font-family: var(--wp--preset--font-family--playfair, Georgia, serif); font-size: 1.15rem; color: var(--wp--preset--color--primary); margin: 0 0 0.6rem; } .asem-sidebar-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; color: var(--wp--preset--color--text); font-size: 0.95rem; } .asem-sidebar-list li { margin: 0; padding: 0; } .asem-sidebar-list strong { color: var(--wp--preset--color--primary); margin-inline-end: 0.35rem; } .asem-sidebar-rule { border: 0; border-top: 1px solid var(--wp--preset--color--border); margin: 1rem 0; } /* ─── Footer (bilingual) — golden-ratio layout ──────────────────────── * Brand column : Sitemap : Connect = φ : 1 : 1 */ .asem-footer-grid { display: grid; grid-template-columns: 1.618fr 1fr 1fr; column-gap: 2.618rem; row-gap: 1.618rem; max-width: 1280px; margin: 0 auto; align-items: start; } .asem-footer-col { min-width: 0; } @media (max-width: 880px) { .asem-footer-grid { grid-template-columns: 1fr 1fr; } .asem-footer-col:first-child { grid-column: 1 / -1; } } @media (max-width: 540px) { .asem-footer-grid { grid-template-columns: 1fr; row-gap: 2rem; } .asem-footer-col:first-child { grid-column: auto; } } .asem-footer-brand { color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--playfair, Georgia, serif); font-size: 1.4rem; margin: 0 0 0.6rem; } .asem-footer-tag { color: var(--wp--preset--color--muted); font-size: 0.95rem; line-height: 1.7; margin: 0; } .asem-footer-title { color: var(--wp--preset--color--primary); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 1rem; font-weight: 600; } .asem-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .asem-footer-links a { color: var(--wp--preset--color--muted); text-decoration: none; font-size: 0.95rem; transition: color .2s ease; } .asem-footer-links a:hover { color: var(--wp--preset--color--primary); } .asem-footer-social { display: flex; gap: 0.85rem; list-style: none; margin: 0; padding: 0; } .asem-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--wp--preset--color--border); color: var(--wp--preset--color--primary); transition: transform .25s ease, border-color .25s ease, background .25s ease; background: var(--wp--preset--color--bg); } .asem-footer-social a:hover { transform: translateY(-2px); border-color: var(--wp--preset--color--primary); background: var(--wp--preset--color--bg-elevated); } .asem-credit { text-align: center; font-size: 0.85rem; color: var(--wp--preset--color--muted); letter-spacing: 0.04em; margin: 1.5rem 0 0; } .asem-credit strong { color: var(--wp--preset--color--primary); } /* ─── Header right cluster ───────────────────────────────────────────── */ .asem-header-right { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } @media (max-width: 720px) { .asem-header-right { gap: 1rem; } } /* ─── Primary navigation (bilingual) ─────────────────────────────────── */ .asem-nav__list { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; align-items: center; } .asem-nav__list li { margin: 0; padding: 0; list-style: none; } .asem-nav__list a { color: var(--wp--preset--color--text); text-decoration: none; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em; padding: 0.5rem 0.2rem; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .asem-nav__list a:hover, .asem-nav__list a:focus-visible { color: var(--wp--preset--color--primary); border-bottom-color: var(--wp--preset--color--primary); outline: none; } @media (max-width: 720px) { .asem-nav__list { gap: 0.85rem; flex-wrap: wrap; justify-content: center; } .asem-nav__list a { font-size: 0.9rem; } } /* ─── Language toggle pill (gold) ───────────────────────────────────── * Matches .asem-theme-toggle styling. Click is wired in theme-toggle.js * → flips ?lang=ar|en, BilingualBridge in the plugin handles the rest. */ .asem-lang-toggle { display: inline-flex; align-items: center; gap: 0.382rem; padding: 0.382rem 0.85rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--bg-elevated); color: var(--wp--preset--color--primary); text-decoration: none; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease; } .asem-lang-toggle:hover { border-color: var(--wp--preset--color--primary); box-shadow: 0 0.382rem 1rem rgba(184,134,46,0.22); transform: translateY(-1px); } .asem-lang-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } .asem-lang-toggle__icon { width: 1rem; height: 1rem; } .asem-lang-toggle__label { display: inline-block; } /* ─── Theme toggle button (φ-square) ─────────────────────────────────── */ .asem-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.618rem; /* φ² */ height: 2.618rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--bg-elevated); color: var(--wp--preset--color--primary); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease; padding: 0; line-height: 0; } .asem-theme-toggle:hover { transform: rotate(-12deg); border-color: var(--wp--preset--color--primary); box-shadow: 0 6px 18px rgba(212,175,55,0.25); } .asem-theme-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } .asem-theme-toggle .asem-theme-toggle__sun, .asem-theme-toggle .asem-theme-toggle__moon { width: 20px; height: 20px; transition: opacity .25s ease, transform .35s ease; } .asem-theme-toggle .asem-theme-toggle__moon { display: none; } html[data-theme="dark"] .asem-theme-toggle .asem-theme-toggle__sun { display: none; } html[data-theme="dark"] .asem-theme-toggle .asem-theme-toggle__moon { display: inline-block; } /* ─── Luxury card baseline — applied to every plugin block surface ──── */ .asem-projects__card, .asem-timeline__card, .asem-certs__card, .asem-skills__group, .asem-contact__inner, .asem-ai__pane { position: relative; background: var(--asem-card-bg) !important; border: 1px solid rgba(184,134,46,0.28) !important; box-shadow: var(--asem-card-shadow); overflow: hidden; } /* Gold "ornament" line at the top of each card */ .asem-projects__card::before, .asem-timeline__card::before, .asem-certs__card::before, .asem-skills__group::before, .asem-contact__inner::before, .asem-ai__pane::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.65) 25%, rgba(184,134,46,0.95) 50%, rgba(212,175,55,0.65) 75%, transparent 100%); pointer-events: none; z-index: 1; } .asem-projects__card:hover, .asem-timeline__card:hover, .asem-certs__card:hover, .asem-skills__group:hover, .asem-ai__pane:hover { border-color: rgba(184,134,46,0.55) !important; box-shadow: var(--asem-card-shadow-hover); } /* Stronger gradient variant (projects) */ .asem-projects__card { background: var(--asem-card-bg-strong) !important; } /* ─── Blog feed cards (homepage + archive) ───────────────────────────── */ .asem-blog-feed__title { font-family: var(--wp--preset--font-family--playfair, Georgia, serif); background: linear-gradient(120deg, var(--wp--preset--color--primary), #D4AF37); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 2.618rem; position: relative; } .asem-blog-feed__title::after { content: ""; display: block; width: 4.236rem; height: 2px; margin: 0.618rem auto 0; background: linear-gradient(90deg, transparent, var(--wp--preset--color--primary), transparent); } .asem-blog-feed__card { position: relative; background: var(--asem-card-bg) !important; border: 1px solid rgba(184,134,46,0.28) !important; border-radius: 1rem !important; padding: 0 !important; box-shadow: var(--asem-card-shadow); overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .asem-blog-feed__card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(184,134,46,0.95) 50%, transparent); z-index: 2; pointer-events: none; } .asem-blog-feed__card:hover { transform: translateY(-4px); border-color: rgba(184,134,46,0.55) !important; box-shadow: var(--asem-card-shadow-hover); } .asem-blog-feed__thumb { margin: 0 !important; overflow: hidden; border-radius: 1rem 1rem 0 0; } .asem-blog-feed__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .asem-blog-feed__card:hover .asem-blog-feed__thumb img { transform: scale(1.05); } .asem-blog-feed__body { padding: 1.618rem; display: flex; flex-direction: column; gap: 0.618rem; } .asem-blog-feed__date { color: var(--wp--preset--color--primary); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin: 0; } .asem-blog-feed__title-link { font-family: var(--wp--preset--font-family--playfair, Georgia, serif); margin: 0; color: var(--wp--preset--color--text); line-height: 1.272; } .asem-blog-feed__title-link a { color: inherit; text-decoration: none; background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary)) no-repeat 0 100% / 0 1px; transition: background-size .35s ease, color .35s ease; } .asem-blog-feed__title-link a:hover { color: var(--wp--preset--color--primary); background-size: 100% 1px; } .asem-blog-feed__excerpt { color: var(--wp--preset--color--muted); line-height: 1.618; margin: 0; } .asem-blog-feed__tags { font-size: 0.786rem; color: var(--wp--preset--color--muted); display: flex; flex-wrap: wrap; gap: 0.382rem; margin: 0.382rem 0 0; } .asem-blog-feed__tags a { color: var(--wp--preset--color--primary); text-decoration: none; border: 1px solid var(--wp--preset--color--border); border-radius: 999px; padding: 0.18rem 0.618rem; transition: border-color .25s ease, background .25s ease; } .asem-blog-feed__tags a:hover { background: rgba(184,134,46,0.10); border-color: var(--wp--preset--color--primary); } /* ─── Generic SVG icon helper class (used by plugin) ─────────────────── */ .asem-icon { display: inline-block; vertical-align: -0.15em; width: 1.1em; height: 1.1em; color: currentColor; } .asem-icon--lg { width: 1.6em; height: 1.6em; } .asem-icon--xl { width: 2.4em; height: 2.4em; } /* ─── Bilingual content visibility ───────────────────────────────────── * Markup convention: put data-bilingual on the LAYOUT container (the