/* ==========================================================================
GÜROL KUYUMCULUK — MONOGRAM COMPONENT
Reusable, self-contained. Not part of style.css on purpose: this file
(and its one in index.html's ) can be deleted to fully
revert the nav wordmark preview without touching any other stylesheet.
The base shape lives in assets/brand/gurol-monogram.svg and is applied
here as a CSS mask, so color/gradient/animation stay entirely in CSS —
the SVG itself never hardcodes an appearance.
========================================================================== */
.gurol-monogram {
position: relative;
display: inline-block;
width: var(--monogram-size, 48px);
height: var(--monogram-size, 48px);
overflow: hidden;
-webkit-mask-image: url("../brand/gurol-monogram.svg");
mask-image: url("../brand/gurol-monogram.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Flat single-color rendering — reference/preview state, and the base
the metallic variant sits on top of. */
.gurol-monogram--flat {
background: currentColor;
}
/* --------------------------------------------------------------------------
METALLIC GOLD TREATMENT
A restrained multi-stop gradient built from the site's own established
gold tokens (--color-gold, --color-gold-muted and their darker/lighter
neighbours already used elsewhere on the site) — deep antique gold,
warm mid-gold, a narrow pale highlight, bronze shadow and a soft
champagne reflection. A subtle drop-shadow only, for separation from
the Obsidian background — no glow, no blur.
-------------------------------------------------------------------------- */
.gurol-monogram--gold {
background: linear-gradient(
125deg,
#5c4a20 0%,
#7a6329 14%,
#8d7535 28%,
#c6a447 42%,
#f2e4bc 50%,
#c6a447 58%,
#e8d6a0 70%,
#8d7535 84%,
#5c4a20 100%
);
filter: drop-shadow(0 1px 2px rgba(7, 7, 7, 0.5));
}
/* One-time metallic reflection — a separate pseudo-element, masked to the
same G shape, that sweeps across once and stops. Never loops. */
.gurol-monogram--gold::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
transparent 40%,
rgba(255, 248, 224, 0.85) 50%,
transparent 60%
);
/* Pseudo-elements don't inherit mask-image from their host element —
it has to be repeated here, or the highlight would spill outside
the G shape instead of staying confined to it. */
-webkit-mask-image: url("../brand/gurol-monogram.svg");
mask-image: url("../brand/gurol-monogram.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transform: translateX(-130%);
animation: gurolMonogramSweep 0.95s ease-in-out 0.3s 1 both;
pointer-events: none;
}
@keyframes gurolMonogramSweep {
from {
transform: translateX(-130%);
}
to {
transform: translateX(130%);
}
}
@media (prefers-reduced-motion: reduce) {
.gurol-monogram--gold::after {
animation: none;
content: none;
}
}
/* --------------------------------------------------------------------------
SIZE SYSTEM
-------------------------------------------------------------------------- */
.gurol-monogram--24 {
--monogram-size: 24px;
}
.gurol-monogram--32 {
--monogram-size: 32px;
}
.gurol-monogram--48 {
--monogram-size: 48px;
}
.gurol-monogram--72 {
--monogram-size: 72px;
}
.gurol-monogram--96 {
--monogram-size: 96px;
}
/* --------------------------------------------------------------------------
TEMPORARY: NAV WORDMARK → MONOGRAM PREVIEW
Swaps the visible content of the existing .site-nav__wordmark link —
the link, its href, its aria-label and its position in
.site-nav__inner are all untouched. To restore the original text
wordmark: delete this rule block and remove
.is-monogram-preview from the in index.html (or delete the
sibling .gurol-monogram--nav entirely) — nothing else changes.
-------------------------------------------------------------------------- */
.is-monogram-preview {
display: none;
}
.gurol-monogram--nav {
--monogram-size: 32px;
position: relative;
z-index: 1;
}
@media (min-width: 768px) {
.gurol-monogram--nav {
--monogram-size: 38px;
}
}
@media (min-width: 1024px) {
.gurol-monogram--nav {
--monogram-size: 42px;
}
}
@media (min-width: 1440px) {
.gurol-monogram--nav {
--monogram-size: 48px;
}
}