/* =============================== 2024-style.css (site-wide) =============================== */ /* Global design tokens */ :root { --artwork-gold: #d4af37; } /* -------------------------------- Base (keep your normal site font) -------------------------------- */ body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* -------------------------------- Artwork pages ONLY (scoped) Titles + Captions use Fredericka -------------------------------- */ /* Captions under artwork figures */ html body.artwork-page figure .paragraph-price-desc { font-family: "Fredericka the Great", cursive !important; color: var(--artwork-gold) !important; letter-spacing: 0.2px; text-rendering: optimizeLegibility; } /* Primary artwork title. Works whether you keep just .heading-2 or add .artwork-title in the markup. */ html body.artwork-page h1.heading-2, html body.artwork-page .artwork-title { font-family: "Fredericka the Great", cursive !important; font-weight: 400 !important; /* avoid bold fallback */ color: var(--artwork-gold) !important; letter-spacing: 0.2px; text-rendering: optimizeLegibility; /* optional spacing tweaks */ margin-block: 0.5rem 1rem; } /* Ensure links inside captions inherit the gold */ html body.artwork-page figure .paragraph-price-desc a { color: inherit; text-decoration-color: currentColor; } /* Small screens: keep titles readable */ @media (max-width: 640px) { html body.artwork-page h1.heading-2, html body.artwork-page .artwork-title { letter-spacing: 0.1px; } } /* Artwork watermark overlay */ .artwork-page .artwork-image-wrap { position: relative; display: inline-block; } .artwork-page .artwork-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; /* adjust size as needed */ font-weight: bold; color: rgba(255, 255, 255, 0.1); /* faint white */ text-transform: uppercase; transform: rotate(-30deg); /* diagonal watermark */ user-select: none; pointer-events: none; /* don’t block clicks */ white-space: nowrap; text-align: center; line-height: 1.2; transition: color 0.3s ease; } /* Darker / more visible on hover */ .artwork-page .artwork-image-wrap:hover .artwork-overlay { color: rgba(255, 255, 0, 0.6); /* gold-ish, more opaque */ } /* =============================== BODY LINKS — GOLD + TAPERED UNDERLINE (single source of truth) =============================== */ :where(main, article, .container, .content, .intro-text, .featured-artwork, .featured-item, footer, .site-footer) a { font-family: 'Pristina', 'Fredericka the Great', 'Open Sans', 'Roboto', cursive, sans-serif; font-size: 1.4rem; line-height: 1.4; color: #FFD700 !important; text-decoration: none !important; position: relative; transition: color .2s ease; } /* tapered underline: bright center, faded ends, very thin, close to text */ :where(main, article, .container, .content, .intro-text, .featured-artwork, .featured-item, footer, .site-footer) a::after { content: ''; position: absolute; left: 50%; bottom: -0.05em; /* sits close under text */ width: 0; height: 1px; background: linear-gradient( to right, rgba(255,215,0,0) 0%, rgba(255,215,0,.45) 18%, #FFD700 50%, rgba(255,215,0,.45) 82%, rgba(255,215,0,0) 100% ); box-shadow: 0 0 3px rgba(255, 215, 0, 0.45); transform: translateX(-50%); opacity: 0; transition: width .25s ease, opacity .25s ease; pointer-events: none; } :where(main, article, .container, .content, .intro-text, .featured-artwork, .featured-item, footer, .site-footer) a:hover, :where(main, article, .container, .content, .intro-text, .featured-artwork, .featured-item, footer, .site-footer) a:focus { color: #FFD700 !important; background: transparent !important; text-decoration: none !important; } :where(main, article, .container, .content, .intro-text, .featured-artwork, .featured-item, footer, .site-footer) a:hover::after, :where(main, article, .container, .content, .intro-text, .featured-artwork, .featured-item, footer, .site-footer) a:focus::after { width: 58%; opacity: 1; } /* Exclude button-like links from the underline */ :where(main, article, .container, .content, .intro-text, .featured-artwork, .featured-item, footer, .site-footer) a.btn, a.button, a.goback-outline, a.no-underline { text-decoration: none !important; } :where(main, article, .container, .content, .intro-text, .featured-artwork, .featured-item, footer, .site-footer) a.btn::after, a.button::after, a.goback-outline::after, a.no-underline::after { display: none !important; } /* Container for protected, watermarked artwork */ .g73-protect.g73-watermarked { position: relative; overflow: hidden; } /* Subtle diagonal watermark overlay */ /* Container for protected, watermarked artwork */ .g73-protect.g73-watermarked { position: relative; overflow: hidden; } /* Bold diagonal watermark overlay — Broadway Regular */ .g73-protect.g73-watermarked::after { content: "© Dennis R. Ling"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; /* FONT & WEIGHT */ font-family: "Broadway Regular", "Broadway", "Impact", system-ui, sans-serif; font-weight: 700; letter-spacing: 0.18em; /* SIZE — larger and more visible */ font-size: clamp(2rem, 6vw, 4.5rem); /* VISIBILITY / STYLE */ color: rgba(255, 255, 255, 0.08); /*text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 0 0 14px rgba(0, 0, 0, 0.65), 0 0 24px rgba(0, 0, 0, 0.45);*/ transform: rotate(-22deg); pointer-events: none; } /* Softer watermark on very small screens */ @media (max-width: 600px) { .g73-protect.g73-watermarked::after { font-size: clamp(1.2rem, 8vw, 2.5rem); color: rgba(255, 255, 255, 0.16); } } /* =============================== NAVBAR LINKS — MATCH BODY STYLE (slimmer, same taper) =============================== */ .g73-nav a, .g73-nav__dd-toggle, .g73-nav__dd-menu a { position: relative; color: #FFD700 !important; text-decoration: none !important; border-bottom: none !important; /* kill legacy underline/border */ background: transparent !important; /* kill legacy hover backgrounds */ } .g73-nav a::after, .g73-nav__dd-toggle::after, .g73-nav__dd-menu a::after { content: ''; position: absolute; left: 50%; bottom: -0.12em; /* close under nav text; tweak -0.08em to -0.12em to taste */ width: 0; height: 1px; background: linear-gradient( to right, rgba(255,215,0,0) 0%, rgba(255,215,0,.45) 18%, #FFD700 50%, rgba(255,215,0,.45) 82%, rgba(255,215,0,0) 100% ); box-shadow: 0 0 3px rgba(255, 215, 0, 0.45); transform: translateX(-50%); opacity: 0; transition: width .25s ease, opacity .25s ease; } /* hover: same taper, just shorter so the nav stays tidy */ .g73-nav a:hover::after, .g73-nav__dd-toggle:hover::after, .g73-nav__dd-menu a:hover::after { width: 42%; opacity: 1; } /* defensive — block any old hover style that may still leak in */ .g73-nav a:hover, .g73-nav__dd-toggle:hover, .g73-nav__dd-menu a:hover { color: #FFD700 !important; background: transparent !important; border-bottom: none !important; } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ :where(main, article, .container, .content, .intro-text, .featured-artwork, .featured-item, footer, .site-footer) a::after, .g73-nav a::after, .g73-nav__dd-toggle::after, .g73-nav__dd-menu a::after { transition: none !important; } } /* =============================== TAPERED UNDERLINES (with mask) — FINAL OVERRIDE =============================== */ /* Universal: keep gold on hover/focus; kill old white hover/bg/borders */ :where(main, article, .container, .content, .intro-text, .featured-artwork, .featured-item, footer, .site-footer) a, .g73-nav a, .g73-nav__dd-toggle, .g73-nav__dd-menu a { color: #FFD700 !important; text-decoration: none !important; background: transparent !important; border-bottom: none !important; position: relative; } /* ===== BODY LINKS ===== */ :where(main, article, .container, .content, .intro-text, .featured-artwork, .featured-item, footer, .site-footer) a::after { content: ''; position: absolute; left: 50%; bottom: -0.06em; /* sits very close under text */ width: 0; height: 2px; /* thin but visible */ background: currentColor; /* gold */ border-radius: 999px; /* rounded ends (pill) */ box-shadow: 0 0 3px rgba(255,215,0,.45); /* soft glow */ transform: translateX(-50%); opacity: 0; transition: width .22s ease, opacity .22s ease; /* FADED (TAPERED) ENDS via mask; with webkit fallback */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); } :where(main, article, .container, .content, .intro-text, .featured-artwork, .featured-item, footer, .site-footer) a:hover::after, :where(main, article, .container, .content, .intro-text, .featured-artwork, .featured-item, footer, .site-footer) a:focus::after { width: 58% !important; /* length of the underline */ opacity: 1 !important; } /* ===== NAVBAR LINKS (match body, slightly shorter) ===== */ .g73-nav a::after, .g73-nav__dd-toggle::after, .g73-nav__dd-menu a::after { content: ''; position: absolute; left: 50%; bottom: -0.10em; /* tune: -0.08em .. -0.12em for your font */ width: .1rem; height: 2px; background: currentColor; /* gold */ border-radius: 999px; /* rounded ends */ box-shadow: 0 0 4px rgba(255,215,0,.4); transform: translateX(-50%); opacity: 0; transition: width .22s ease, opacity .22s ease; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); } .g73-nav a:hover::after, .g73-nav__dd-toggle:hover::after, .g73-nav__dd-menu a:hover::after { width: 80% !important; /* a bit shorter in the nav so it stays tidy */ opacity: 1 !important; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { :where(main, article, .container, .content, .intro-text, .featured-artwork, .featured-item, footer, .site-footer) a::after, .g73-nav a::after, .g73-nav__dd-toggle::after, .g73-nav__dd-menu a::after { transition: none !important; } } /* Hide any hardcoded DIGITAL COPYRIGHT text */ .artwork-frame [title*="DIGITAL COPYRIGHT"] { position: relative; } /* Remove tooltip effect */ .artwork-frame [title*="DIGITAL COPYRIGHT"]::before { content: none !important; } /* Diagonal overlay watermark */ .artwork-frame::after { content: "ARTWORK COPYRIGHT © ENFORCED"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); /* bottom-left → top-right */ font-family: "Fredericka the Great", cursive; font-weight: 700; font-size: 2rem; /* bigger text */ letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.2); /* lighter opacity white */ /*text-shadow: 0 2px 4px rgba(0,0,0,.5);*/ pointer-events: none; white-space: nowrap; transition: color 0.3s ease, opacity 0.3s ease; } /* Gold highlight on hover */ .artwork-frame:hover::after { color: rgba(212,175,55,0.9); /* gold, stronger opacity */ }