/* ============================================================ AUREE — styles_header.css Loaded in . Covers everything needed above the fold: tokens, reset, body, typography, section wrapper, header, hero. ============================================================ */ /* Tokens */ :root { --color-bg-base: #061D33; --color-bg-surface: #072B45; --color-bg-raised: #0A3452; --color-bg-overlay: #0A2C4D; --color-text-primary: #F8F9FA; --color-text-secondary: #C9D1D9; --color-text-tertiary: #B1BEC8; --color-text-disabled: #B1BEC8; --color-text-brand: #D4AF37; --color-text-link: #579FD6; --color-border-subtle: #0D2240; --color-border-default: #0D3B66; --color-border-strong: #0B3761; --color-action-primary-bg: #D4AF37; --color-action-primary-text: #0A3D62; --color-action-primary-hover: #DEC050; --color-action-primary-active: #C9A52E; --color-action-focus-ring: rgba(212, 175, 55, 0.40); --color-input-focus-border: rgba(212, 175, 55, 0.50); --color-action-ghost-text: #D4AF37; --color-action-ghost-border: rgba(212, 175, 55, 0.40); --color-action-ghost-hover-bg: rgba(212, 175, 55, 0.08); --color-semantic-error: #FF4D4F; --color-semantic-error-bg: #2D0A0A; --color-semantic-warning: #FAAD14; --color-semantic-warning-bg: #2A1E04; --color-semantic-success: #52C41A; --color-semantic-success-bg: #0F2D06; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 9999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --max-content: 1200px; --page-margin: var(--sp-4); --section-spacer: var(--sp-8); --header-height: 72px; --gradient-gold: linear-gradient(135deg, #DDBF5F 0%, #D4AF37 100%); --gradient-deep-blue: radial-gradient(circle at 50% 100%, #1B1F3B 0%, #061D33 50%, #0A2C4D 100%); --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0.0, 1.0, 1); --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-cinematic: cubic-bezier(0.76, 0.0, 0.24, 1); --dur-fast: 150ms; --dur-standard: 250ms; --dur-emphasis: 400ms; --dur-deliberate: 600ms; /* Hex tile: 2px gold circles. Adjust --pattern-tile to resize. At 26px: center-to-center ≈ 26px, matching 1200% Figma spacing on a 2px circle. */ --pattern-tile: 26px; --pattern-color: rgba(212, 175, 55, 0.20); } @media (min-width: 768px) { :root { --page-margin: var(--sp-6); --section-spacer: var(--sp-12); } } @media (min-width: 1264px) { :root { --page-margin: var(--sp-12); --section-spacer: var(--sp-24); } } @media all and (-webkit-min-device-pixel-ratio: 0) { @supports (-webkit-appearance: none) and (not (-moz-appearance: none)) { :root { --pattern-color: rgba(212, 175, 55, 0.10); } } } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img, svg, video { display: block; max-width: 100%; } OL, UL { padding-left: 2em; } input, button, textarea, select { font: inherit; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } } /* Body & background */ html { scroll-behavior: smooth; } body { font-family: 'Lato', sans-serif; font-size: 16px; line-height: 1.5; color: var(--color-text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: var(--header-height); /* * Background: Deep Blue Gradient + hexagonal dot pattern on top. * Hex grid uses two offset radial-gradient layers: * Layer 1 — even rows at 0 0 * Layer 2 — odd rows offset by half tile width and half tile height * Tile height = tile-width × √3 for the full repeat unit (two interleaved rows). * --pattern-tile controls dot spacing. Increase to spread dots further apart. */ background-image: radial-gradient(circle, var(--pattern-color) 1px, transparent 1px), radial-gradient(circle, var(--pattern-color) 1px, transparent 1px), var(--gradient-deep-blue); background-size: var(--pattern-tile) calc(var(--pattern-tile) * 1.732), var(--pattern-tile) calc(var(--pattern-tile) * 1.732), cover; background-position: 0 0, calc(var(--pattern-tile) / 2) calc(var(--pattern-tile) * 0.866), center; /* background-attachment: fixed, fixed, fixed;*/ background-repeat: repeat, repeat, no-repeat; } /* Typography */ h1 { font-size: 38px; font-weight: 700; line-height: 1.15; } h2 { font-size: 28px; font-weight: 700; line-height: 1.20; } h3 { font-size: 21px; font-weight: 700; line-height: 1.30; } p { color: var(--color-text-primary); } a { color: var(--color-text-link); text-decoration: none; } a:hover { text-decoration: underline; } small { font-size: 12px; line-height: 1.5; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-md); padding: 0 var(--sp-5); height: 36px; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out); } .btn:focus-visible { outline: 2px solid var(--color-action-focus-ring); outline-offset: 2px; } .btn-primary { background: var(--color-action-primary-bg); color: var(--color-action-primary-text); } .btn-primary:hover { background: var(--color-action-primary-hover); } .btn-primary:active { background: var(--color-action-primary-active); } .btn-primary-lg { height: 44px; padding: 0 var(--sp-6); font-size: 16px; border-radius: var(--radius-lg); } /* Header */ #site-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); z-index: 100; padding: 0 var(--page-margin); border-bottom: 1px solid transparent; transition: background var(--dur-standard) var(--ease-out), border-color var(--dur-standard) var(--ease-out), backdrop-filter var(--dur-standard) var(--ease-out); } #site-header.scrolled { background: rgba(6, 29, 51, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--color-border-subtle); } .header-inner { height: 100%; max-width: 1200px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .header-logo img { height: 28px; width: auto; display: block; } .header-right { display: flex; align-items: center; gap: var(--sp-8); } .header-nav { display: flex; align-items: center; gap: var(--sp-8); } .nav-link { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--sp-4); border-radius: var(--radius-md); font-size: 16px; font-weight: 700; color: var(--color-text-secondary); position: relative; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), font-weight var(--dur-fast) var(--ease-out); } .nav-link::after { content: ''; display: block; position: absolute; left: 50%; bottom: 0; width: 0; transform: translateX(-50%); height: 3px; background: var(--color-action-primary-bg); border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); transition: width var(--dur-fast) var(--ease-out); } .nav-link:hover { color: var(--color-text-primary); background: rgba(248, 249, 250, 0.04); text-decoration: none; } .nav-link.active { color: var(--color-text-brand); background: rgba(212, 175, 55, 0.10); text-decoration: none; } .nav-link.active::after { width: 100%; } /* Hamburger — hidden on tablet and up */ .header-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: var(--sp-2); width: 36px; height: 36px; } .header-hamburger span { display: block; width: 22px; height: 2px; background: var(--color-text-primary); border-radius: 1px; transition: transform var(--dur-standard) var(--ease-out), opacity var(--dur-standard) var(--ease-out); } /* Animated X state */ .header-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .header-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .header-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav (< 768px) */ @media (max-width: 767px) { .header-hamburger { display: flex; } .header-right { display: none; position: fixed; top: var(--header-height); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: var(--sp-6); padding: var(--sp-6) var(--page-margin); background: rgba(6, 29, 51, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border-subtle); } .header-right.is-open { display: flex; } .header-nav { flex-direction: column; align-items: flex-start; gap: var(--sp-4); width: 100%; } .nav-link { width: 100%; } } /* Sections */ SECTION { max-width: calc(1200px + var(--page-margin) + var(--page-margin)); width: 100%; margin: 0 auto; padding: var(--section-spacer) var(--page-margin); } /* Hero */ #hero { padding-bottom: 80px; padding-bottom: 100px; } .hero-inner { max-width: var(--max-content); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); } .hero-text { flex: 0 1 auto; width: 100%; max-width: 570px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); } .hero-text h1 { font-size: 49px; color: var(--color-text-primary); } .hero-subtitle { font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--color-text-secondary); } .hero-body { font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); } .hero-diagram { flex: 0 1 auto; display: flex; align-items: center; justify-content: flex-end; min-width: 0; } .hero-diagram svg { width: 100%; max-width: 520px; height: auto; fill: currentColor; } /* Small desktop */ @media (min-width: 768px) and (max-width: 1000px) { .hero-text h1 { font-size: 38px; color: var(--color-text-primary); } } /* Tablet */ @media (min-width: 768px) and (max-width: calc(1200px + var(--page-margin) + var(--page-margin))) { .hero-text { max-width: 420px; } .hero-diagram img { max-width: 380px; } } /* Mobile */ @media (max-width: 767px) { #hero { padding-bottom: 64px; } .hero-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-10); } .hero-text { max-width: 100%; } .hero-text h1 { font-size: 33px; color: var(--color-text-primary); } .hero-diagram { justify-content: center; width: 100%; max-width: 460px; align-self: center; } .hero-diagram img { max-width: 100%; } } /* Text */ SECTION.text { .text-inner { max-width: var(--max-content); margin: 0 auto; } .text-inner > * { max-width: 800px; } H1 { color: var(--color-text-brand); margin-top: 0; margin-bottom: var(--sp-6); } H2 { color: var(--color-text-brand); margin-top: var(--sp-12); margin-bottom: var(--sp-6); } H3 { color: var(--color-text-primary); margin-top: var(--sp-8); margin-bottom: 0; } OL, UL, P, TABLE, DIV { margin-top: var(--sp-4); } P + OL, P + UL { margin-top: 0; } .info-block P { margin-top: var(--sp-1); } }