/* Theme Name: QatarGoldLive Theme URI: https://qatargoldlive.com Author: QatarGoldLive Description: Custom bilingual gold price theme for Qatar — English + Arabic, dark/light mode, RTL support. Version: 1.0.0 License: GNU General Public License v2 or later Text Domain: qatargoldlive Tags: custom, bilingual, rtl, dark-mode, responsive */ /* ============================================================ CSS DESIGN SYSTEM — VARIABLES ============================================================ */ :root { /* Brand Colors */ --color-gold: #D4AF37; --color-gold-light: #F0D060; --color-gold-dark: #A8880A; --color-navy: #1B1B2F; --color-navy-light: #2A2A4A; /* Background / Surface */ --bg-dark: #0D0D1A; --bg-dark-2: #13131F; --bg-dark-3: #1A1A2E; --bg-light: #FAFAF5; --bg-light-2: #F0F0E8; --bg-light-3: #E8E8DC; /* Text */ --text-primary: #1A1A1A; --text-secondary: #555555; --text-muted: #888888; --text-on-dark: #F0F0E8; --text-on-dark-muted:#A0A0B0; /* Status */ --color-up: #22C55E; --color-down: #EF4444; --color-neutral: #94A3B8; /* Active scheme defaults (light) */ --bg: var(--bg-light); --bg-2: var(--bg-light-2); --bg-3: var(--bg-light-3); --text: var(--text-primary); --text-2: var(--text-secondary); --text-3: var(--text-muted); --border: #D8D8CC; --shadow: rgba(0,0,0,0.08); --card-bg: #FFFFFF; --card-border: #E0E0D4; /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-arabic: "Segoe UI", Tahoma, "Arabic Typesetting", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Font Sizes */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; /* Spacing Scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* Layout */ --container-max: 1280px; --container-md: 1024px; --container-sm: 768px; --header-height: 64px; --sticky-bar-height: 44px; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Transitions */ --transition: 0.2s ease; --transition-slow: 0.4s ease; } /* ============================================================ DARK MODE — via class on or prefers-color-scheme ============================================================ */ .dark-mode, [data-theme="dark"] { --bg: var(--bg-dark); --bg-2: var(--bg-dark-2); --bg-3: var(--bg-dark-3); --text: var(--text-on-dark); --text-2: var(--text-on-dark-muted); --text-3: #6070A0; --border: #2A2A4A; --shadow: rgba(0,0,0,0.4); --card-bg: var(--bg-dark-3); --card-border: #252540; } @media (prefers-color-scheme: dark) { :root:not(.light-mode):not([data-theme="light"]) { --bg: var(--bg-dark); --bg-2: var(--bg-dark-2); --bg-3: var(--bg-dark-3); --text: var(--text-on-dark); --text-2: var(--text-on-dark-muted); --text-3: #6070A0; --border: #2A2A4A; --shadow: rgba(0,0,0,0.4); --card-bg: var(--bg-dark-3); --card-border: #252540; } } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.7; color: var(--text); background-color: var(--bg); transition: background-color var(--transition-slow), color var(--transition-slow); min-height: 100vh; } /* RTL override */ .rtl body, [dir="rtl"] { font-family: var(--font-arabic); direction: rtl; text-align: right; } a { color: var(--color-gold); text-decoration: none; transition: color var(--transition), opacity var(--transition); } a:hover { opacity: 0.85; } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; } /* ============================================================ LAYOUT UTILITIES ============================================================ */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--sp-4); } @media (min-width: 480px) { .container { padding-inline: var(--sp-6); } } @media (min-width: 768px) { .container { padding-inline: var(--sp-8); } } @media (min-width: 1280px) { .container { padding-inline: var(--sp-10); } } .container-md { max-width: var(--container-md); margin-inline: auto; padding-inline: var(--sp-4); } @media (min-width: 768px) { .container-md { padding-inline: var(--sp-8); } } .section { padding-block: var(--sp-12); } @media (min-width: 768px) { .section { padding-block: var(--sp-16); } } .grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); } .grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); } .grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } @media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } /* ============================================================ STICKY PRICE BAR (top of page) ============================================================ */ #sticky-price-bar { position: sticky; top: 0; z-index: 100; height: var(--sticky-bar-height); background: var(--color-navy); border-bottom: 1px solid var(--color-gold-dark); display: flex; align-items: center; overflow: hidden; } .dark-mode #sticky-price-bar, [data-theme="dark"] #sticky-price-bar { background: #0A0A15; } .sticky-bar-inner { display: flex; align-items: center; gap: var(--sp-6); padding-inline: var(--sp-4); width: 100%; overflow-x: auto; scrollbar-width: none; } .sticky-bar-inner::-webkit-scrollbar { display: none; } .sticky-price-item { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; font-size: var(--text-sm); color: var(--text-on-dark-muted); flex-shrink: 0; } .sticky-price-item .karat-label { font-weight: 600; color: var(--color-gold); } .sticky-price-item .price-value { font-weight: 700; color: #FFFFFF; font-size: var(--text-base); font-variant-numeric: tabular-nums; } .sticky-price-item .price-change { font-size: var(--text-xs); padding: 1px 6px; border-radius: var(--radius-full); font-weight: 600; } .price-change.up { background: rgba(34,197,94,0.2); color: var(--color-up); } .price-change.down { background: rgba(239,68,68,0.2); color: var(--color-down); } .price-change.flat { background: rgba(148,163,184,0.15); color: var(--color-neutral); } .sticky-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.15); flex-shrink: 0; } .sticky-update-time { font-size: var(--text-xs); color: var(--text-on-dark-muted); opacity: 0.7; margin-inline-start: auto; flex-shrink: 0; padding-inline-end: var(--sp-4); } /* ============================================================ HEADER ============================================================ */ #site-header { background: var(--card-bg); border-bottom: 1px solid var(--border); height: var(--header-height); display: flex; align-items: center; position: relative; z-index: 90; box-shadow: 0 1px 8px var(--shadow); } .header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--sp-4); gap: var(--sp-4); } @media (min-width: 768px) { .header-inner { padding-inline: var(--sp-8); } } /* Logo */ .site-logo { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; flex-shrink: 0; } .site-logo .logo-mark { width: 36px; height: 36px; background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: var(--text-lg); color: var(--color-navy); line-height: 1; } .site-logo .logo-text { display: flex; flex-direction: column; line-height: 1.1; } .site-logo .logo-name { font-weight: 800; font-size: var(--text-base); color: var(--text); letter-spacing: -0.01em; } .site-logo .logo-tagline { font-size: var(--text-xs); color: var(--color-gold); font-weight: 500; } /* Main Navigation */ #main-nav { display: none; } @media (min-width: 1024px) { #main-nav { display: flex; align-items: center; gap: var(--sp-1); flex: 1; justify-content: center; } } .nav-link { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--text-2); transition: color var(--transition), background var(--transition); white-space: nowrap; } .nav-link:hover, .nav-link.current { color: var(--color-gold); background: rgba(212,175,55,0.08); opacity: 1; } /* Header Controls */ .header-controls { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; } /* Language Switcher */ .lang-switcher { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; color: var(--text-2); transition: border-color var(--transition), color var(--transition); text-decoration: none; } .lang-switcher:hover { border-color: var(--color-gold); color: var(--color-gold); opacity: 1; } .lang-switcher .flag { font-size: 1rem; line-height: 1; } /* Dark Mode Toggle */ #dark-mode-toggle { width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-2); transition: border-color var(--transition), color var(--transition), background var(--transition); font-size: 1.1rem; } #dark-mode-toggle:hover { border-color: var(--color-gold); color: var(--color-gold); background: rgba(212,175,55,0.08); } /* Mobile Menu Button */ #mobile-menu-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); border: 1px solid var(--border); color: var(--text-2); } @media (min-width: 1024px) { #mobile-menu-btn { display: none; } } /* Mobile Navigation */ #mobile-nav { display: none; background: var(--card-bg); border-bottom: 1px solid var(--border); padding: var(--sp-4); box-shadow: 0 4px 12px var(--shadow); } #mobile-nav.open { display: block; } #mobile-nav .nav-link { display: block; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-1); font-size: var(--text-base); } /* ============================================================ FOOTER ============================================================ */ #site-footer { background: var(--color-navy); color: var(--text-on-dark-muted); margin-top: var(--sp-20); } .dark-mode #site-footer, [data-theme="dark"] #site-footer { background: #08080F; border-top: 1px solid #1A1A2E; } .footer-top { padding: var(--sp-12) 0 var(--sp-8); border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-brand { margin-bottom: var(--sp-8); } .footer-logo { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } .footer-logo .logo-mark { width: 40px; height: 40px; background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: var(--text-xl); color: var(--color-navy); } .footer-logo .logo-name { font-weight: 800; font-size: var(--text-xl); color: #FFFFFF; } .footer-tagline { font-size: var(--text-sm); line-height: 1.6; max-width: 320px; color: var(--text-on-dark-muted); } /* Footer Link Grid */ .footer-link-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); } @media (min-width: 768px) { .footer-link-grid { grid-template-columns: repeat(4, 1fr); } } .footer-col h4 { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-gold); margin-bottom: var(--sp-4); } .footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); } .footer-col a { font-size: var(--text-sm); color: var(--text-on-dark-muted); transition: color var(--transition); } .footer-col a:hover { color: var(--color-gold); opacity: 1; } /* Footer Bottom */ .footer-bottom { padding: var(--sp-6) 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); font-size: var(--text-xs); color: rgba(255,255,255,0.35); } .footer-disclaimer { font-size: var(--text-xs); color: rgba(255,255,255,0.3); max-width: 600px; line-height: 1.5; margin-top: var(--sp-4); } .footer-social { display: flex; gap: var(--sp-3); } .footer-social a { width: 32px; height: 32px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); font-size: var(--text-sm); transition: border-color var(--transition), color var(--transition); } .footer-social a:hover { border-color: var(--color-gold); color: var(--color-gold); opacity: 1; } /* ============================================================ CARD COMPONENT ============================================================ */ .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: 0 2px 8px var(--shadow); transition: box-shadow var(--transition); } .card:hover { box-shadow: 0 4px 16px var(--shadow); } .card-gold { background: linear-gradient(135deg, #1B1B2F 0%, #252540 100%); border-color: var(--color-gold-dark); color: var(--text-on-dark); } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.25; color: var(--text); letter-spacing: -0.01em; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } h5 { font-size: var(--text-base); } @media (min-width: 768px) { h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } } p { margin-bottom: var(--sp-4); } p:last-child { margin-bottom: 0; } .lead { font-size: var(--text-lg); color: var(--text-2); line-height: 1.7; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-sm); transition: all var(--transition); cursor: pointer; border: 2px solid transparent; text-decoration: none; white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark)); color: var(--color-navy); border-color: transparent; } .btn-primary:hover { background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold)); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(212,175,55,0.35); color: var(--color-navy); opacity: 1; } .btn-secondary { background: transparent; border-color: var(--color-gold); color: var(--color-gold); } .btn-secondary:hover { background: rgba(212,175,55,0.1); transform: translateY(-1px); opacity: 1; } .btn-sm { padding: var(--sp-2) var(--sp-4); font-size: var(--text-xs); } .btn-lg { padding: var(--sp-4) var(--sp-8); font-size: var(--text-base); border-radius: var(--radius-lg); } /* ============================================================ BADGE / PILL ============================================================ */ .badge { display: inline-flex; align-items: center; padding: 2px var(--sp-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; gap: 4px; } .badge-gold { background: rgba(212,175,55,0.15); color: var(--color-gold); border: 1px solid rgba(212,175,55,0.3); } .badge-up { background: rgba(34,197,94,0.15); color: var(--color-up); border: 1px solid rgba(34,197,94,0.3); } .badge-down { background: rgba(239,68,68,0.15); color: var(--color-down); border: 1px solid rgba(239,68,68,0.3); } .badge-navy { background: var(--color-navy); color: #FFF; border: 1px solid var(--color-navy-light); } /* ============================================================ PRICE DISPLAY ============================================================ */ .price-hero { font-size: var(--text-4xl); font-weight: 900; color: var(--color-gold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } @media (min-width: 768px) { .price-hero { font-size: var(--text-5xl); } } .price-unit { font-size: var(--text-sm); color: var(--text-3); font-weight: 400; margin-top: var(--sp-1); } .price-change-badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 700; } .price-change-badge.up { background: rgba(34,197,94,0.15); color: var(--color-up); } .price-change-badge.down { background: rgba(239,68,68,0.15); color: var(--color-down); } /* Pulse animation for live price */ @keyframes pricePulse { 0% { box-shadow: 0 0 0 0 rgba(212,175,55,0.4); } 70% { box-shadow: 0 0 0 10px rgba(212,175,55,0); } 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); } } .price-live-indicator { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--color-up); font-weight: 600; } .price-live-dot { width: 8px; height: 8px; background: var(--color-up); border-radius: 50%; animation: pricePulse 2s infinite; } /* Number animation */ @keyframes numberIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .price-animated { animation: numberIn 0.4s ease; } /* ============================================================ TABLES ============================================================ */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: 0 2px 8px var(--shadow); } .price-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .price-table th { background: var(--bg-2); padding: var(--sp-3) var(--sp-4); text-align: left; font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; } [dir="rtl"] .price-table th { text-align: right; } .price-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; } .price-table tr:last-child td { border-bottom: none; } .price-table tr:hover td { background: rgba(212,175,55,0.04); } .price-table td:first-child { font-weight: 700; color: var(--color-gold); } .price-table .td-up { color: var(--color-up); font-weight: 600; } .price-table .td-down { color: var(--color-down); font-weight: 600; } /* Sticky first column on mobile */ @media (max-width: 767px) { .price-table th:first-child, .price-table td:first-child { position: sticky; left: 0; background: var(--card-bg); z-index: 1; box-shadow: 2px 0 4px var(--shadow); } .price-table th:first-child { background: var(--bg-2); } } /* ============================================================ BREADCRUMB ============================================================ */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); font-size: var(--text-sm); color: var(--text-3); padding: var(--sp-3) 0; } .breadcrumb a { color: var(--text-3); } .breadcrumb a:hover { color: var(--color-gold); opacity: 1; } .breadcrumb .sep { color: var(--text-3); opacity: 0.5; } .breadcrumb .current { color: var(--text-2); font-weight: 500; } /* ============================================================ SECTION HEADINGS ============================================================ */ .section-header { text-align: center; margin-bottom: var(--sp-10); } .section-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-gold); margin-bottom: var(--sp-2); } .section-title { font-size: var(--text-3xl); font-weight: 800; margin-bottom: var(--sp-4); } .section-desc { font-size: var(--text-lg); color: var(--text-2); max-width: 600px; margin-inline: auto; line-height: 1.7; } /* ============================================================ FAQ COMPONENT ============================================================ */ .faq-list { display: flex; flex-direction: column; gap: var(--sp-3); } .faq-item { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card-bg); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-6); font-weight: 600; font-size: var(--text-base); color: var(--text); cursor: pointer; text-align: left; gap: var(--sp-4); transition: color var(--transition), background var(--transition); } [dir="rtl"] .faq-question { text-align: right; } .faq-question:hover { color: var(--color-gold); } .faq-question.open { color: var(--color-gold); border-bottom: 1px solid var(--border); } .faq-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--color-gold); display: flex; align-items: center; justify-content: center; color: var(--color-gold); font-size: 1rem; font-weight: 700; transition: transform var(--transition); } .faq-question.open .faq-icon { transform: rotate(45deg); } .faq-answer { display: none; padding: var(--sp-5) var(--sp-6); color: var(--text-2); line-height: 1.7; font-size: var(--text-sm); } .faq-answer.open { display: block; } /* ============================================================ INTERNAL LINK GRID ============================================================ */ .link-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } @media (min-width: 480px) { .link-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .link-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .link-grid { grid-template-columns: repeat(4, 1fr); } } .link-grid a { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--text); transition: all var(--transition); } .link-grid a:hover { border-color: var(--color-gold); color: var(--color-gold); background: rgba(212,175,55,0.04); transform: translateY(-1px); box-shadow: 0 4px 8px var(--shadow); opacity: 1; } .link-grid a .icon { font-size: var(--text-base); flex-shrink: 0; } /* ============================================================ CHART CONTAINER ============================================================ */ .chart-container { position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: 0 2px 8px var(--shadow); } .chart-controls { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); } .chart-btn { padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); border: 1px solid var(--border); font-size: var(--text-xs); font-weight: 600; color: var(--text-2); background: transparent; transition: all var(--transition); cursor: pointer; } .chart-btn.active, .chart-btn:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-navy); } .chart-canvas-wrap { position: relative; width: 100%; height: 280px; } @media (min-width: 768px) { .chart-canvas-wrap { height: 360px; } } .chart-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-3); font-size: var(--text-sm); } /* ============================================================ CALCULATOR COMPONENT ============================================================ */ .calc-form { display: flex; flex-direction: column; gap: var(--sp-4); } .form-group { display: flex; flex-direction: column; gap: var(--sp-2); } .form-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-2); } .form-control { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); color: var(--text); font-size: var(--text-base); transition: border-color var(--transition), box-shadow var(--transition); width: 100%; } .form-control:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.15); } .calc-result { background: linear-gradient(135deg, #1B1B2F, #252540); border: 1px solid var(--color-gold-dark); border-radius: var(--radius-lg); padding: var(--sp-6); text-align: center; } .calc-result .result-label { font-size: var(--text-sm); color: var(--text-on-dark-muted); margin-bottom: var(--sp-2); } .calc-result .result-value { font-size: var(--text-3xl); font-weight: 900; color: var(--color-gold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .calc-result .result-sub { font-size: var(--text-sm); color: var(--text-on-dark-muted); margin-top: var(--sp-1); } /* ============================================================ ALERTS / NOTICES ============================================================ */ .alert { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-md); display: flex; gap: var(--sp-3); font-size: var(--text-sm); line-height: 1.6; } .alert-info { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2); color: #3B82F6; } .alert-warning { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2); color: #F59E0B; } .alert-gold { background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.2); color: var(--color-gold); } /* ============================================================ WHATSAPP SHARE + PRINT BUTTONS ============================================================ */ .share-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); } .btn-whatsapp { background: #25D366; color: #FFFFFF; border-color: #25D366; } .btn-whatsapp:hover { background: #20B054; border-color: #20B054; color: #FFFFFF; opacity: 1; } .btn-print { background: transparent; border: 2px solid var(--border); color: var(--text-2); } .btn-print:hover { border-color: var(--text-2); background: var(--bg-2); opacity: 1; } /* ============================================================ ARTICLE / CONTENT PAGES ============================================================ */ .article-header { padding: var(--sp-12) 0 var(--sp-8); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-8); } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-4); } .article-content { max-width: 780px; } .article-content h2 { margin-top: var(--sp-10); margin-bottom: var(--sp-4); padding-top: var(--sp-4); } .article-content h3 { margin-top: var(--sp-8); margin-bottom: var(--sp-3); } .article-content ul, .article-content ol { margin-bottom: var(--sp-4); padding-inline-start: var(--sp-6); } .article-content ul { list-style: disc; } .article-content ol { list-style: decimal; } .article-content li { margin-bottom: var(--sp-2); } .article-content blockquote { border-inline-start: 3px solid var(--color-gold); padding: var(--sp-4) var(--sp-6); background: var(--bg-2); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: var(--sp-6) 0; font-style: italic; color: var(--text-2); } /* Table of Contents */ .toc-box { background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--color-gold); border-radius: var(--radius-lg); padding: var(--sp-6); margin-bottom: var(--sp-8); } [dir="rtl"] .toc-box { border-left: none; border-right: 3px solid var(--color-gold); } .toc-box h3 { font-size: var(--text-base); margin-bottom: var(--sp-3); } .toc-box ol { padding-inline-start: var(--sp-5); list-style: decimal; } .toc-box li { margin-bottom: var(--sp-2); font-size: var(--text-sm); } .toc-box a { color: var(--text-2); } .toc-box a:hover { color: var(--color-gold); opacity: 1; } /* ============================================================ HOMEPAGE HERO ============================================================ */ .hero-section { background: linear-gradient(160deg, var(--color-navy) 0%, var(--bg-dark) 100%); color: var(--text-on-dark); padding: var(--sp-12) 0 var(--sp-16); position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 70%); pointer-events: none; } .hero-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); align-items: start; } @media (min-width: 1024px) { .hero-inner { grid-template-columns: 1fr 1fr; } } .hero-text .eyebrow { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-gold); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); } .hero-text h1 { font-size: var(--text-3xl); font-weight: 900; color: #FFFFFF; line-height: 1.15; margin-bottom: var(--sp-4); letter-spacing: -0.02em; } @media (min-width: 768px) { .hero-text h1 { font-size: var(--text-4xl); } } .hero-text .hero-desc { font-size: var(--text-lg); color: var(--text-on-dark-muted); line-height: 1.7; margin-bottom: var(--sp-6); max-width: 500px; } /* ============================================================ PRINT STYLES ============================================================ */ @media print { #sticky-price-bar, #site-header, #site-footer, .no-print { display: none !important; } body { background: #FFF; color: #000; font-size: 11pt; } .price-hero { color: #000; font-size: 20pt; } .price-table { font-size: 9pt; } .price-table th { background: #F0F0F0; } a::after { content: none; } } /* ============================================================ UTILITIES ============================================================ */ .text-gold { color: var(--color-gold); } .text-up { color: var(--color-up); } .text-down { color: var(--color-down); } .text-center { text-align: center; } .text-sm { font-size: var(--text-sm); } .font-bold { font-weight: 700; } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); } .hidden { display: none !important; } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }