/** * ANDALOUSSIA — BASE & TYPOGRAPHY SYSTEM */ /* Web fonts are loaded via preconnect + in each page (see index.html). This avoids the render-blocking @import that previously lived here. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background-color: var(--color-bg-base); color: var(--color-text-primary); font-family: var(--font-sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; line-height: 1.65; background-color: var(--color-bg-base); background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(12, 47, 33, 0.45), transparent 70%), radial-gradient(ellipse 60% 40% at 50% 120%, rgba(10, 35, 25, 0.35), transparent 70%); color: var(--color-text-primary); overflow-x: hidden; position: relative; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #030d08; } ::-webkit-scrollbar-thumb { background: rgba(201, 164, 86, 0.3); border-radius: var(--radius-pill); border: 2px solid #030d08; } ::-webkit-scrollbar-thumb:hover { background: rgba(201, 164, 86, 0.6); } /* Text Selection */ ::selection { background: rgba(201, 164, 86, 0.35); color: var(--color-gold-300); } /* Base Typography */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 500; line-height: 1.18; color: var(--color-text-primary); letter-spacing: -0.01em; } h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); letter-spacing: -0.02em; } h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); } h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); } h4 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.02em; } p { color: var(--color-text-secondary); font-size: clamp(0.95rem, 1.1vw, 1.075rem); line-height: 1.7; } p.lead { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.6; color: var(--color-text-primary); font-family: var(--font-serif); font-style: italic; } a { color: var(--color-gold-400); text-decoration: none; transition: color var(--transition-fast), opacity var(--transition-fast); } a:hover { color: var(--color-gold-300); } img, video { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } /* Section Spacing & Layout */ .section { padding: clamp(4rem, 8vw, 7.5rem) 0; position: relative; overflow: hidden; } .section--sm { padding: clamp(2.5rem, 5vw, 4.5rem) 0; } .section--lg { padding: clamp(5.5rem, 11vw, 10rem) 0; } .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-pad); padding-right: var(--container-pad); } .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: var(--container-wide); } /* Eyebrow / Tag Header */ .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-gold-400); margin-bottom: 1rem; } .eyebrow::before, .eyebrow::after { content: ''; display: inline-block; width: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold-500)); } .eyebrow::after { background: linear-gradient(90deg, var(--color-gold-500), transparent); } .eyebrow--single::after { display: none; } /* Section Title Group */ .section-header { text-align: center; max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 4.5rem); } .section-header--left { text-align: left; margin-left: 0; margin-right: auto; } .section-title { margin-bottom: 1rem; } .section-title em { font-style: italic; font-weight: 300; color: var(--color-gold-300); } .section-desc { font-size: 1.05rem; color: var(--color-text-secondary); } /* Moroccan Decorative Line Separator */ .moroccan-separator { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 2rem auto; opacity: 0.75; } .moroccan-separator__line { height: 1px; width: 60px; background: linear-gradient(90deg, transparent, var(--color-gold-500)); } .moroccan-separator__line:last-child { background: linear-gradient(90deg, var(--color-gold-500), transparent); } .moroccan-separator__diamond { width: 6px; height: 6px; background-color: var(--color-gold-400); transform: rotate(45deg); box-shadow: 0 0 8px var(--color-gold-glow); }