/* ================================================ PREMIUM v1 — Dark Gold & Silver Theme ================================================ Gold-dominant by default (nav, links, headings, borders). Silver override via .silver-accent on
for Homepage and Stock Checker pages. To revert to basic: remove this stylesheet link from base.html and remove data-theme="dark" from . ================================================ */ /* Google Fonts — Cormorant Garamond (display) + DM Sans (body) */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); /* ============================================ 1. COLOR PALETTE — Dark + Gold primary / Silver secondary ============================================ */ :root, [data-theme="dark"] { /* Background hierarchy */ --premium-bg-deepest: #08080a; --premium-bg-deep: #0d0d10; --premium-bg-base: #111114; --premium-bg-surface: #18181c; --premium-bg-elevated: #1e1e23; /* Gold accent family (PRIMARY — default across site) */ --premium-gold: #C9A84C; --premium-gold-light: #E2C97E; --premium-gold-dim: #8B7535; --premium-gold-glow: rgba(201, 168, 76, 0.15); --premium-gold-glow-strong: rgba(201, 168, 76, 0.3); /* Silver accent family (used on silver-accent pages) */ --premium-silver: #C8CDD3; --premium-silver-light: #E4E8EC; --premium-silver-bright: #F0F2F4; --premium-silver-dim: #8A9099; --premium-silver-glow: rgba(200, 205, 211, 0.12); --premium-silver-glow-strong: rgba(200, 205, 211, 0.25); /* Text hierarchy */ --premium-text-primary: #E8E6E1; --premium-text-secondary: #A09D95; --premium-text-muted: #6B6860; /* Override Pico variables — gold primary */ --pico-background-color: var(--premium-bg-base); --pico-color: var(--premium-text-primary); --pico-muted-color: var(--premium-text-secondary); --pico-primary: var(--premium-gold); --pico-primary-hover: var(--premium-gold-light); --pico-primary-focus: var(--premium-gold-glow); --pico-primary-inverse: #0d0d10; --pico-card-background-color: var(--premium-bg-surface); --pico-card-border-color: rgba(201, 168, 76, 0.08); --pico-card-sectioning-background-color: var(--premium-bg-elevated); /* Override custom.css semantic colors */ --silver-green: #4CAF82; --silver-green-bg: rgba(76, 175, 130, 0.12); --silver-red: #B44646; --silver-red-bg: rgba(180, 70, 70, 0.10); --silver-amber: #E2A14C; --silver-amber-bg: rgba(226, 161, 76, 0.10); --silver-gray: var(--premium-silver-dim); --silver-gray-bg: rgba(192, 192, 192, 0.08); --silver-hero-bg: var(--premium-bg-deep); --silver-section-border: rgba(201, 168, 76, 0.10); /* Composition bar — metallic tones */ --comp-stocks: var(--premium-gold); --comp-etfs: var(--premium-silver); --comp-structured: var(--premium-gold-dim); --comp-cash: var(--premium-silver-dim); } /* ============================================ 2. GLOBAL — Typography & Atmosphere ============================================ */ html[data-theme="dark"] body, body { font-family: 'DM Sans', system-ui, sans-serif; background-color: var(--premium-bg-deepest); background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 168, 76, 0.03) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 50% 100%, rgba(192, 192, 192, 0.02) 0%, transparent 70%); background-attachment: fixed; color: var(--premium-text-primary); min-height: 100vh; } /* Noise texture overlay */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.025; pointer-events: none; z-index: 9998; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; } h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--premium-text-primary); letter-spacing: 0.01em; } h1 { font-weight: 700; } h2 { font-weight: 600; color: var(--premium-gold-light); } h3 { font-weight: 600; color: var(--premium-gold); } a { color: var(--premium-gold); transition: color 0.2s ease, text-shadow 0.2s ease; } a:hover { color: var(--premium-gold-light); text-shadow: 0 0 12px var(--premium-gold-glow); } strong { color: var(--premium-text-primary); } small { color: var(--premium-text-muted); } hr { border-color: var(--silver-section-border); } /* Scrollbar (Webkit) */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--premium-bg-deepest); } ::-webkit-scrollbar-thumb { background: var(--premium-gold-dim); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--premium-gold); } /* ============================================ 3. NAVIGATION — Gold accent (default) ============================================ */ nav.container { border-bottom: 1px solid rgba(201, 168, 76, 0.12); padding-bottom: 0.75rem; margin-bottom: 0; } nav a { color: var(--premium-text-secondary) !important; text-decoration: none !important; transition: color 0.2s ease; position: relative; } nav a:hover { color: var(--premium-gold-light) !important; text-shadow: none; } nav [aria-current="page"] { color: var(--premium-gold) !important; } nav [aria-current="page"]::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--premium-gold), transparent); border-radius: 1px; } nav li:first-child strong a { color: var(--premium-gold) !important; } /* ============================================ 4. HERO — Gold metallic glow (default) ============================================ */ .hero { background: radial-gradient(ellipse 70% 50% at 50% 60%, var(--premium-gold-glow) 0%, transparent 70%), var(--premium-bg-deep); border-bottom: 1px solid rgba(201, 168, 76, 0.1); padding: 4rem 1rem 3.5rem; position: relative; overflow: hidden; } .hero::after { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--premium-gold-dim), var(--premium-gold), var(--premium-gold-dim), transparent); } .hero h1 { font-size: 2.8rem; background: linear-gradient(135deg, var(--premium-gold-light) 0%, var(--premium-gold) 40%, var(--premium-silver-light) 70%, var(--premium-gold-light) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 6s ease-in-out infinite; margin-bottom: 1rem; } @keyframes shimmer { 0%, 100% { background-position: 0% center; } 50% { background-position: 200% center; } } .hero p { color: var(--premium-text-secondary); font-size: 1.2rem; } .hero [role="button"], .hero a[role="button"] { background: linear-gradient(135deg, var(--premium-gold-dim), var(--premium-gold)); color: #0d0d10; border: 1px solid var(--premium-gold); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.85rem; padding: 0.75rem 2rem; transition: all 0.3s ease; box-shadow: 0 2px 12px var(--premium-gold-glow); } .hero [role="button"]:hover, .hero a[role="button"]:hover { background: linear-gradient(135deg, var(--premium-gold), var(--premium-gold-light)); box-shadow: 0 4px 24px var(--premium-gold-glow-strong); transform: translateY(-1px); } /* ============================================ 5. ENTRANCE ANIMATIONS ============================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .hero h1 { animation: fadeInUp 0.8s ease-out, shimmer 6s ease-in-out infinite; } .hero p { animation: fadeInUp 0.8s ease-out 0.15s both; } .hero [role="button"] { animation: fadeInUp 0.8s ease-out 0.3s both; } article.aggregate-stats { animation: fadeIn 0.6s ease-out 0.4s both; } article.product-card:nth-child(1) { animation: fadeInUp 0.5s ease-out 0.1s both; } article.product-card:nth-child(2) { animation: fadeInUp 0.5s ease-out 0.2s both; } article.product-card:nth-child(3) { animation: fadeInUp 0.5s ease-out 0.3s both; } article.product-card:nth-child(4) { animation: fadeInUp 0.5s ease-out 0.4s both; } article.product-card:nth-child(5) { animation: fadeInUp 0.5s ease-out 0.5s both; } article.product-card:nth-child(6) { animation: fadeInUp 0.5s ease-out 0.6s both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================ 6. AGGREGATE STATS — Gold glow (default) ============================================ */ article.aggregate-stats { background: var(--premium-bg-surface); border: 1px solid rgba(201, 168, 76, 0.1); position: relative; overflow: hidden; } article.aggregate-stats::before { content: ''; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background: radial-gradient(circle, var(--premium-gold-glow) 0%, transparent 70%); pointer-events: none; } .aggregate-percentage { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 4.5rem; font-weight: 700; color: var(--premium-gold); position: relative; text-shadow: 0 0 40px var(--premium-gold-glow); } /* ============================================ 7. PRODUCT CARDS — Gold edge (default) ============================================ */ article.product-card { background: var(--premium-bg-surface); border: 1px solid rgba(201, 168, 76, 0.06); border-left: 3px solid var(--premium-gold-dim); border-radius: 6px; transition: all 0.3s ease; position: relative; overflow: hidden; } article.product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(201, 168, 76, 0.02) 0%, transparent 60%); pointer-events: none; } article.product-card:hover { border-color: rgba(201, 168, 76, 0.2); border-left-color: var(--premium-gold); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 30px var(--premium-gold-glow); transform: translateY(-2px); } .product-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; color: var(--premium-text-primary); } /* ============================================ 8. BADGES — Premium tint ============================================ */ .badge { border-radius: 3px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.8rem; letter-spacing: 0.04em; } .badge-green { background-color: rgba(76, 175, 130, 0.12); color: #4CAF82; border-color: rgba(76, 175, 130, 0.3); } .badge-amber { background-color: rgba(226, 161, 76, 0.10); color: #E2A14C; border-color: rgba(226, 161, 76, 0.3); } .badge-red { background-color: rgba(180, 70, 70, 0.10); color: #B44646; border-color: rgba(180, 70, 70, 0.25); } .badge-gray { background-color: rgba(192, 192, 192, 0.08); color: var(--premium-silver-dim); border-color: rgba(192, 192, 192, 0.2); } /* ============================================ 9. AVAILABILITY BARS — Polished ============================================ */ .availability-bar { gap: 3px; height: 1.6rem; background: var(--premium-bg-elevated); border-radius: 4px; padding: 3px; } .bar-segment { border-radius: 3px; transition: all 0.4s ease; } .bar-filled { background: linear-gradient(180deg, #5DBF8A, #4CAF82); box-shadow: 0 0 6px rgba(76, 175, 130, 0.2); } .bar-preorder { background: linear-gradient(180deg, #F0B86E, #E2A14C); } .bar-empty { background-color: rgba(192, 192, 192, 0.06); } @keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .bar-segment { animation: barGrow 0.6s ease-out both; transform-origin: left; } .bar-segment:nth-child(1) { animation-delay: 0.05s; } .bar-segment:nth-child(2) { animation-delay: 0.08s; } .bar-segment:nth-child(3) { animation-delay: 0.11s; } .bar-segment:nth-child(4) { animation-delay: 0.14s; } .bar-segment:nth-child(5) { animation-delay: 0.17s; } .bar-segment:nth-child(6) { animation-delay: 0.20s; } .bar-segment:nth-child(7) { animation-delay: 0.23s; } .bar-segment:nth-child(8) { animation-delay: 0.26s; } .bar-segment:nth-child(9) { animation-delay: 0.29s; } .bar-segment:nth-child(10) { animation-delay: 0.32s; } .bar-segment:nth-child(11) { animation-delay: 0.35s; } .bar-segment:nth-child(12) { animation-delay: 0.38s; } .bar-segment:nth-child(13) { animation-delay: 0.41s; } .bar-segment:nth-child(14) { animation-delay: 0.44s; } /* ============================================ 10. DETAILS / DEALER LIST ============================================ */ details.dealer-details summary { color: var(--premium-text-secondary); font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.9rem; } details.dealer-details summary:hover { color: var(--premium-gold); } .dealer-list { border-left: 1px solid rgba(201, 168, 76, 0.1); padding-left: 1.25rem; } .dealer-name { color: var(--premium-text-primary); } .dealer-link { color: var(--premium-gold-dim); } .dealer-link:hover { color: var(--premium-gold); } /* ============================================ 11. STALENESS WARNING ============================================ */ .staleness-warning { background-color: rgba(226, 161, 76, 0.08); color: var(--silver-amber); border: 1px solid rgba(226, 161, 76, 0.2); border-radius: 6px; } /* ============================================ 12. SECTION BORDERS ============================================ */ main > section + section { border-top: 1px solid rgba(201, 168, 76, 0.08); } /* ============================================ 13. SECTION CTA BUTTON ============================================ */ .section-cta [role="button"], .section-cta a[role="button"] { background: linear-gradient(135deg, var(--premium-gold-dim), var(--premium-gold)); color: #0d0d10; border: 1px solid var(--premium-gold); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.85rem; padding: 0.75rem 2rem; transition: all 0.3s ease; box-shadow: 0 2px 12px var(--premium-gold-glow); } .section-cta [role="button"]:hover, .section-cta a[role="button"]:hover { background: linear-gradient(135deg, var(--premium-gold), var(--premium-gold-light)); box-shadow: 0 4px 24px var(--premium-gold-glow-strong); transform: translateY(-1px); } /* ============================================ 14. FOOTER — Gold links (default) ============================================ */ footer { color: var(--premium-text-muted); border-top: 1px solid rgba(201, 168, 76, 0.06); } footer a { color: var(--premium-gold-dim); } footer a:hover { color: var(--premium-gold); } footer hr { border-color: rgba(201, 168, 76, 0.06); } footer small { color: var(--premium-text-muted); } /* ============================================ 15. NO-COOKIE BANNER — Dark glass ============================================ */ .no-cookie-banner { background: linear-gradient(135deg, rgba(13, 13, 16, 0.95) 0%, rgba(24, 24, 28, 0.95) 50%, rgba(13, 13, 16, 0.95) 100%); color: var(--premium-text-primary); border-top: 1px solid rgba(201, 168, 76, 0.15); box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .no-cookie-content p { color: var(--premium-text-secondary); } .no-cookie-content strong { color: var(--premium-gold); } .no-cookie-btn { background: linear-gradient(135deg, var(--premium-gold-dim), var(--premium-gold)); color: #0d0d10; border: 1px solid var(--premium-gold); font-weight: 600; letter-spacing: 0.02em; } .no-cookie-btn:hover { background: linear-gradient(135deg, var(--premium-gold), var(--premium-gold-light)); box-shadow: 0 2px 16px var(--premium-gold-glow-strong); } /* ============================================ 16. WIKIFOLIO BADGES ============================================ */ .wf-badge-outline { border-color: var(--premium-silver-dim); color: var(--premium-text-secondary); } .wf-badge-highlight { border-color: var(--premium-gold); color: var(--premium-gold); } /* ============================================ 17. PORTFOLIO — Certificate grid ============================================ */ .cert-price-value { color: var(--premium-gold); font-family: 'Cormorant Garamond', Georgia, serif; } .cert-price-label { color: var(--premium-text-muted); } /* ============================================ 18. COMPOSITION BAR — Metallic ============================================ */ .composition-bar { background: var(--premium-bg-elevated); border-radius: 4px; } .comp-stocks { background: linear-gradient(180deg, var(--premium-gold-light), var(--premium-gold)); } .comp-etfs { background: linear-gradient(180deg, var(--premium-silver-light), var(--premium-silver)); } .comp-structured { background: linear-gradient(180deg, #A07D3A, var(--premium-gold-dim)); } .comp-cash { background: linear-gradient(180deg, #9A9A9A, var(--premium-silver-dim)); } /* ============================================ 19. LISTS & CONTENT ============================================ */ ul, ol { color: var(--premium-text-secondary); } li strong { color: var(--premium-text-primary); } /* ============================================ 20. IMAGES ============================================ */ .content-img, .portfolio-performance-img { border: 1px solid rgba(201, 168, 76, 0.08); border-radius: 6px; } /* ============================================ 21. TABLES — Gold themed (default) ============================================ */ table { border-color: rgba(201, 168, 76, 0.1); } th { color: var(--premium-gold); font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; border-color: rgba(201, 168, 76, 0.12); } td { border-color: rgba(201, 168, 76, 0.06); color: var(--premium-text-secondary); } /* ============================================ 22. RESPONSIVE ============================================ */ @media (max-width: 768px) { .hero { padding: 3rem 1rem 2.5rem; } .hero h1 { font-size: 2rem; } .aggregate-percentage { font-size: 3.5rem; } article.product-card:hover { transform: none; } } /* ============================================ 23. SILVER ACCENT — Homepage & Stock Checker ============================================ Add class="silver-accent" to
on pages where silver is the appropriate accent (silver bullion content, stock checker). ============================================ */ /* Hero — silver glow & shimmer */ .silver-accent .hero { background: radial-gradient(ellipse 70% 50% at 50% 60%, var(--premium-silver-glow) 0%, transparent 70%), var(--premium-bg-deep); border-bottom: 1px solid rgba(200, 205, 211, 0.08); } .silver-accent .hero::after { background: linear-gradient(90deg, transparent, var(--premium-silver-dim), var(--premium-silver), var(--premium-silver-dim), transparent); } .silver-accent .hero h1 { background: linear-gradient(135deg, var(--premium-silver-bright) 0%, var(--premium-silver) 35%, var(--premium-silver-light) 55%, var(--premium-silver-bright) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Headings — silver hierarchy */ .silver-accent h2 { color: var(--premium-silver-bright) !important; } .silver-accent h3 { color: var(--premium-silver-light) !important; } /* Links */ .silver-accent a:not([role="button"]) { color: var(--premium-silver); } .silver-accent a:not([role="button"]):hover { color: var(--premium-silver-light); text-shadow: 0 0 12px var(--premium-silver-glow); } /* Aggregate stats — silver glow */ .silver-accent article.aggregate-stats { border-color: rgba(200, 205, 211, 0.08); } .silver-accent article.aggregate-stats::before { background: radial-gradient(circle, var(--premium-silver-glow) 0%, transparent 70%); } .silver-accent .aggregate-percentage { color: var(--premium-silver-light); text-shadow: 0 0 40px var(--premium-silver-glow-strong); } /* Product cards — silver edge */ .silver-accent article.product-card { border-color: rgba(200, 205, 211, 0.06); border-left: 3px solid var(--premium-silver) !important; } .silver-accent article.product-card::before { background: linear-gradient(135deg, rgba(200, 205, 211, 0.02) 0%, transparent 60%); } .silver-accent article.product-card:hover { border-color: rgba(200, 205, 211, 0.15); border-left-color: var(--premium-silver-bright) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 30px var(--premium-silver-glow); } /* Dealer details */ .silver-accent details.dealer-details summary:hover { color: var(--premium-silver-light); } .silver-accent .dealer-list { border-left-color: rgba(200, 205, 211, 0.1); } .silver-accent .dealer-link { color: var(--premium-silver-dim); } .silver-accent .dealer-link:hover { color: var(--premium-silver-light); } /* Section borders */ .silver-accent section + section { border-top-color: rgba(200, 205, 211, 0.06); }