*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ───────────────────────────────────────────────────────────────── STATIC DEFAULTS — all overridden by :root block in ───────────────────────────────────────────────────────────────── */ :root { /* Global palette */ --primary: #0a1628; --gold: #D4A940; --gold2: #b88c28; --header-bg: #0a1628; --nav-bg: #162240; --body-bg: #f4f5f7; --section-head: #0d1e3a; --link-color: #1a4a8a; --util-bg: #06101f; --font-body: 'Open Sans', sans-serif; --font-heading: 'Oswald', sans-serif; --font-size-base: 15px; --navy: var(--primary); --navy2: var(--nav-bg); --navy3: var(--util-bg); --white: #ffffff; --offwhite: #f5f5f0; --border: #ccccbb; --text: #222222; --muted: #555555; --link: var(--link-color); --red: #B22222; --green: #1a6b1a; /* ── Body & Global ───────────────────────────── */ --te-body-font: var(--font-body); --te-body-size: var(--font-size-base); --te-body-weight: 400; --te-body-color: #222222; --te-body-lineheight: 1.6; --te-link-color: var(--link-color); --te-link-hover: var(--gold); --te-link-decoration: none; --te-muted-color: #555555; /* ── Headings H1–H4 ──────────────────────────── */ --te-h1-font: var(--font-heading); --te-h1-size: 2rem; --te-h1-weight: 600; --te-h1-color: var(--primary); --te-h1-lineheight: 1.3; --te-h1-spacing: 0; --te-h1-transform: none; --te-h2-font: var(--font-heading); --te-h2-size: 1.5rem; --te-h2-weight: 600; --te-h2-color: var(--primary); --te-h2-lineheight: 1.3; --te-h2-spacing: 0; --te-h2-transform: none; --te-h3-font: var(--font-heading); --te-h3-size: 1.25rem; --te-h3-weight: 600; --te-h3-color: var(--primary); --te-h3-lineheight: 1.3; --te-h3-spacing: 0; --te-h3-transform: none; --te-h4-font: inherit; --te-h4-size: 1rem; --te-h4-weight: 600; --te-h4-color: var(--primary); --te-h4-lineheight: 1.4; --te-h4-spacing: 0; --te-h4-transform: none; /* ── Utility Bar ─────────────────────────────── */ --te-util-size: 11px; --te-util-weight: 400; --te-util-color: #aabbcc; --te-util-link-color: #aabbcc; --te-util-link-hover: var(--gold2); --te-util-badge-size: 10px; --te-util-badge-color: rgba(255,255,255,0.5); --te-util-badge-spacing:0.05em; /* ── Header ──────────────────────────────────── */ --te-hdr-title-font: var(--font-heading); --te-hdr-title-size: 21px; --te-hdr-title-weight: 600; --te-hdr-title-color: #ffffff; --te-hdr-title-spacing: 0.04em; --te-hdr-title-transform: uppercase; --te-hdr-sub-size: 11px; --te-hdr-sub-weight: 400; --te-hdr-sub-color: var(--gold2); --te-hdr-sub-spacing: 0.12em; --te-hdr-sub-transform: uppercase; --te-hdr-tagline-size: 12px; --te-hdr-tagline-color: rgba(255,255,255,0.45); --te-hdr-tagline-style: italic; --te-hdr-border-color: var(--gold); --te-hdr-border-width: 3px; /* ── Navigation ──────────────────────────────── */ --te-nav-font: var(--font-body); --te-nav-size: 12px; --te-nav-weight: 600; --te-nav-color: #ccccdd; --te-nav-hover: #ffffff; --te-nav-active: #ffffff; --te-nav-active-border: var(--gold2); --te-nav-spacing: 0.04em; --te-nav-transform: uppercase; --te-nav-border-width: 2px; --te-nav-border-color: var(--gold); --te-nav-padding-v: 11px; --te-nav-padding-h: 14px; /* ── Hero ────────────────────────────────────── */ --te-hero-h1-font: var(--font-heading); --te-hero-h1-size: clamp(1.5rem,4vw,2.4rem); --te-hero-h1-weight: 500; --te-hero-h1-color: #ffffff; --te-hero-h1-lineheight: 1.3; --te-hero-p-size: 14px; --te-hero-p-weight: 300; --te-hero-p-color: rgba(255,255,255,0.7); --te-hero-padding-v: 56px; /* ── Section Heads (title bars) ──────────────── */ --te-sechead-font: var(--font-heading); --te-sechead-size: 16px; --te-sechead-weight: 500; --te-sechead-color: #ffffff; --te-sechead-spacing: 0.04em; --te-sechead-transform: uppercase; --te-sechead-border-color: var(--gold); --te-sechead-border-width: 4px; --te-sechead-padding-v: 10px; --te-sechead-padding-h: 16px; /* ── Quick Links Bar ─────────────────────────── */ --te-ql-size: 12px; --te-ql-weight: 600; --te-ql-color: var(--nav-bg); --te-ql-hover: var(--primary); --te-ql-bg: var(--offwhite); --te-ql-hover-bg: #e0e0d5; /* ── News Items ──────────────────────────────── */ --te-news-bg: #ffffff; --te-news-border: var(--border); --te-news-title-font: inherit; --te-news-title-size: 13px; --te-news-title-weight: 600; --te-news-title-color: var(--nav-bg); --te-news-excerpt-size: 12px; --te-news-excerpt-color:var(--muted); --te-news-date-size: 11px; --te-news-date-color: var(--muted); --te-news-datenum-font: var(--font-heading); --te-news-datenum-size: 20px; --te-news-datenum-weight:600; --te-news-datenum-color:var(--primary); --te-news-tag-size: 10px; --te-news-tag-bg: #e8f0f8; --te-news-tag-color: var(--nav-bg); --te-news-viewall-size: 12px; --te-news-viewall-weight:700; --te-news-viewall-color:var(--nav-bg); --te-news-viewall-bg: var(--offwhite); /* ── Events ──────────────────────────────────── */ --te-event-title-size: 13px; --te-event-title-weight: 600; --te-event-title-color: var(--nav-bg); --te-event-excerpt-size: 12px; --te-event-excerpt-color: var(--muted); --te-event-cal-month-bg: var(--header-bg); --te-event-cal-month-color: #ffffff; --te-event-cal-month-size: 9px; --te-event-cal-day-font: var(--font-heading); --te-event-cal-day-size: 20px; --te-event-cal-day-weight: 600; --te-event-cal-day-color: var(--primary); /* ── Buttons ─────────────────────────────────── */ --te-btn-font: var(--font-body); --te-btn-size: 12px; --te-btn-weight: 700; --te-btn-spacing: 0.06em; --te-btn-transform: uppercase; --te-btn-radius: 2px; --te-btn-pad-v: 10px; --te-btn-pad-h: 24px; --te-btn-gold-bg: var(--gold); --te-btn-gold-hover: var(--gold2); --te-btn-gold-color: #ffffff; --te-btn-disc-bg: #5865F2; --te-btn-disc-hover: #4752c4; --te-btn-disc-color: #ffffff; --te-btn-outline-border: rgba(255,255,255,0.4); --te-btn-outline-color: #ffffff; --te-btn-outline-hover-bg: rgba(255,255,255,0.1); --te-btn-navy-bg: var(--header-bg); --te-btn-navy-hover: var(--util-bg); --te-btn-navy-color: #ffffff; /* ── Alert Banner ────────────────────────────── */ --te-alert-size: 13px; --te-alert-label-size: 11px; --te-alert-label-weight: 700; --te-alert-label-spacing: 0.08em; /* ── Cards / Containers ──────────────────────── */ --te-card-bg: #ffffff; --te-card-border: var(--border); --te-card-radius: 0px; /* ── Apply CTA Box ───────────────────────────── */ --te-cta-bg: var(--header-bg); --te-cta-heading-font: var(--font-heading); --te-cta-heading-size: 18px; --te-cta-heading-weight: 600; --te-cta-heading-color: var(--gold2); --te-cta-text-size: 12px; --te-cta-text-color: rgba(255,255,255,0.65); /* ── Sidebar ─────────────────────────────────── */ --te-sidebar-link-size: 12px; --te-sidebar-link-weight: 600; --te-sidebar-link-color: var(--nav-bg); --te-sidebar-link-hover-bg: var(--offwhite); /* ── Page Content ────────────────────────────── */ --te-page-h-font: var(--font-heading); --te-page-h-color: var(--primary); --te-page-h2-size: 1.3rem; --te-page-h3-size: 1.1rem; --te-page-p-size: 14px; --te-page-p-color: var(--muted); --te-page-p-lineheight:1.7; --te-page-a-color: var(--nav-bg); /* ── Footer ──────────────────────────────────── */ --te-footer-bg: var(--util-bg); --te-footer-border-color: var(--gold); --te-footer-border-width: 3px; --te-footer-title-font: var(--font-heading); --te-footer-title-size: 16px; --te-footer-title-weight: 600; --te-footer-title-color: #ffffff; --te-footer-title-spacing: 0.05em; --te-footer-title-transform: uppercase; --te-footer-sub-size: 11px; --te-footer-sub-color: #6677aa; --te-footer-linkshead-size: 11px; --te-footer-linkshead-weight:700; --te-footer-linkshead-spacing:0.1em; --te-footer-linkshead-color: var(--gold); --te-footer-linkshead-transform:uppercase; --te-footer-link-size: 13px; --te-footer-link-color: #aabbcc; --te-footer-link-hover: var(--gold); --te-footer-social-color: #6677aa; --te-footer-disc-size: 10px; --te-footer-disc-color: #667788; } /* ───────────────────────────────────────────────────────────────── BASE ───────────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { font-family: var(--te-body-font); font-size: var(--te-body-size); font-weight: var(--te-body-weight); color: var(--te-body-color); background: var(--body-bg); line-height: var(--te-body-lineheight); } a { color: var(--te-link-color); text-decoration: var(--te-link-decoration); } a:hover { text-decoration: underline; color: var(--te-link-hover); } h1 { font-family:var(--te-h1-font);font-size:var(--te-h1-size);font-weight:var(--te-h1-weight);color:var(--te-h1-color);line-height:var(--te-h1-lineheight);letter-spacing:var(--te-h1-spacing);text-transform:var(--te-h1-transform); } h2 { font-family:var(--te-h2-font);font-size:var(--te-h2-size);font-weight:var(--te-h2-weight);color:var(--te-h2-color);line-height:var(--te-h2-lineheight);letter-spacing:var(--te-h2-spacing);text-transform:var(--te-h2-transform); } h3 { font-family:var(--te-h3-font);font-size:var(--te-h3-size);font-weight:var(--te-h3-weight);color:var(--te-h3-color);line-height:var(--te-h3-lineheight);letter-spacing:var(--te-h3-spacing);text-transform:var(--te-h3-transform); } h4 { font-family:var(--te-h4-font);font-size:var(--te-h4-size);font-weight:var(--te-h4-weight);color:var(--te-h4-color);line-height:var(--te-h4-lineheight);letter-spacing:var(--te-h4-spacing);text-transform:var(--te-h4-transform); } /* ───────────────────────────────────────────────────────────────── UTILITY BAR ───────────────────────────────────────────────────────────────── */ .utility-bar { background: var(--util-bg); padding: 6px 20px; display: flex; align-items: center; justify-content: space-between; font-size: var(--te-util-size); font-weight: var(--te-util-weight); color: var(--te-util-color); } .util-left, .util-right { display: flex; gap: 16px; align-items: center; } .util-right a { color: var(--te-util-link-color); font-size: var(--te-util-size); } .util-right a:hover { color: var(--te-util-link-hover); text-decoration: none; } .util-badge { border: 1px solid rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 2px; font-size: var(--te-util-badge-size); letter-spacing: var(--te-util-badge-spacing); color: var(--te-util-badge-color); } /* ───────────────────────────────────────────────────────────────── STICKY HEADER+NAV ───────────────────────────────────────────────────────────────── */ .site-sticky { position: sticky; top: 0; z-index: 200; } /* ───────────────────────────────────────────────────────────────── HEADER ───────────────────────────────────────────────────────────────── */ header { background: var(--header-bg); padding: 14px 20px; display: flex; align-items: center; gap: 20px; border-bottom: var(--te-hdr-border-width) solid var(--te-hdr-border-color); } .header-logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; text-decoration: none; } .header-logo:hover { text-decoration: none; } .badge-svg { height: 46px; width: auto; max-width: 128px; display: block; } .header-dept { font-family: var(--te-hdr-title-font); font-size: var(--te-hdr-title-size); font-weight: var(--te-hdr-title-weight); color: var(--te-hdr-title-color); letter-spacing: var(--te-hdr-title-spacing); text-transform: var(--te-hdr-title-transform); } .header-sub { font-size: var(--te-hdr-sub-size); font-weight: var(--te-hdr-sub-weight); color: var(--te-hdr-sub-color); letter-spacing: var(--te-hdr-sub-spacing); text-transform: var(--te-hdr-sub-transform); margin-top: 2px; } .header-mission { flex: 1; font-size: var(--te-hdr-tagline-size); color: var(--te-hdr-tagline-color); font-style: var(--te-hdr-tagline-style); text-align: right; } /* ───────────────────────────────────────────────────────────────── NAVIGATION ───────────────────────────────────────────────────────────────── */ nav.main-nav { background: var(--nav-bg); border-bottom: var(--te-nav-border-width) solid var(--te-nav-border-color); } .main-nav ul { list-style: none; display: flex; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .main-nav li a { display: block; padding: var(--te-nav-padding-v) var(--te-nav-padding-h); color: var(--te-nav-color); font-family: var(--te-nav-font); font-size: var(--te-nav-size); font-weight: var(--te-nav-weight); letter-spacing: var(--te-nav-spacing); text-transform: var(--te-nav-transform); border-bottom: 3px solid transparent; transition: all 0.15s; } .main-nav li a:hover, .main-nav li a.active { color: var(--te-nav-active); border-bottom-color: var(--te-nav-active-border); text-decoration: none; } /* ───────────────────────────────────────────────────────────────── ALERT BANNER ───────────────────────────────────────────────────────────────── */ .alert-banner { background: var(--red); color: #fff; padding: 8px 20px; font-size: var(--te-alert-size); display: flex; align-items: center; gap: 12px; } .alert-label { background: rgba(255,255,255,0.2); padding: 2px 10px; border-radius: 2px; font-weight: var(--te-alert-label-weight); font-size: var(--te-alert-label-size); letter-spacing: var(--te-alert-label-spacing); flex-shrink: 0; } /* ───────────────────────────────────────────────────────────────── HERO ───────────────────────────────────────────────────────────────── */ .hero { background: linear-gradient(135deg, var(--util-bg) 0%, var(--nav-bg) 60%, #003366 100%); padding: var(--te-hero-padding-v) 20px; text-align: center; } .hero-inner { max-width: 700px; margin: 0 auto; } .hero h1 { font-family: var(--te-hero-h1-font); font-size: var(--te-hero-h1-size); font-weight: var(--te-hero-h1-weight); color: var(--te-hero-h1-color); line-height: var(--te-hero-h1-lineheight); margin-bottom: 1.1rem; } .hero p { color: var(--te-hero-p-color); font-size: var(--te-hero-p-size); font-weight: var(--te-hero-p-weight); margin-bottom: 1.8rem; } .hero-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ───────────────────────────────────────────────────────────────── BUTTONS ───────────────────────────────────────────────────────────────── */ .btn { display: inline-block; padding: var(--te-btn-pad-v) var(--te-btn-pad-h); font-family: var(--te-btn-font); font-size: var(--te-btn-size); font-weight: var(--te-btn-weight); letter-spacing: var(--te-btn-spacing); text-transform: var(--te-btn-transform); text-decoration: none; border-radius: var(--te-btn-radius); transition: all 0.15s; border: none; cursor: pointer; } .btn-gold { background: var(--te-btn-gold-bg); color: var(--te-btn-gold-color); } .btn-gold:hover { background: var(--te-btn-gold-hover); text-decoration: none; color: var(--te-btn-gold-color); } .btn-discord { background: var(--te-btn-disc-bg); color: var(--te-btn-disc-color); } .btn-discord:hover{ background: var(--te-btn-disc-hover); text-decoration: none; color: var(--te-btn-disc-color); } .btn-outline-white{ background: transparent; color: var(--te-btn-outline-color); border: 2px solid var(--te-btn-outline-border); } .btn-outline-white:hover{ background: var(--te-btn-outline-hover-bg); text-decoration: none; color: var(--te-btn-outline-color); } .btn-navy { background: var(--te-btn-navy-bg); color: var(--te-btn-navy-color); } .btn-navy:hover { background: var(--te-btn-navy-hover); text-decoration: none; color: var(--te-btn-navy-color); } /* ───────────────────────────────────────────────────────────────── QUICK LINKS ───────────────────────────────────────────────────────────────── */ .quick-links { background: var(--te-ql-bg); border-bottom: 1px solid var(--border); padding: 0 20px; } .quick-links-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; } .quick-links a { display: flex; align-items: center; gap: 7px; padding: 13px 16px; font-size: var(--te-ql-size); font-weight: var(--te-ql-weight); color: var(--te-ql-color); border-right: 1px solid var(--border); transition: background 0.15s; } .quick-links a:hover { background: var(--te-ql-hover-bg); color: var(--te-ql-hover); text-decoration: none; } /* ───────────────────────────────────────────────────────────────── LAYOUT ───────────────────────────────────────────────────────────────── */ .main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 28px; padding: 28px 20px; max-width: 1200px; margin: 0 auto; } /* ───────────────────────────────────────────────────────────────── SECTION HEAD ───────────────────────────────────────────────────────────────── */ .section-head { background: var(--section-head); color: var(--te-sechead-color); padding: var(--te-sechead-padding-v) var(--te-sechead-padding-h); font-family: var(--te-sechead-font); font-size: var(--te-sechead-size); font-weight: var(--te-sechead-weight); letter-spacing: var(--te-sechead-spacing); text-transform: var(--te-sechead-transform); border-left: var(--te-sechead-border-width) solid var(--te-sechead-border-color); } /* ───────────────────────────────────────────────────────────────── NEWS ───────────────────────────────────────────────────────────────── */ .news-list { border: 1px solid var(--te-news-border); border-top: none; background: var(--te-news-bg); } .news-item { padding: 13px 16px; border-bottom: 1px solid var(--te-news-border); display: flex; gap: 14px; align-items: flex-start; } .news-item:last-child { border-bottom: none; } .news-date { flex-shrink: 0; width: 64px; font-size: var(--te-news-date-size); color: var(--te-news-date-color); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; } .news-date-num { font-family: var(--te-news-datenum-font); font-size: var(--te-news-datenum-size); font-weight: var(--te-news-datenum-weight); color: var(--te-news-datenum-color); display: block; line-height: 1; } .news-content h4 { font-family: var(--te-news-title-font); font-size: var(--te-news-title-size); font-weight: var(--te-news-title-weight); color: var(--te-news-title-color); margin-bottom: 3px; line-height: 1.4; } .news-content h4 a { color: var(--te-news-title-color); } .news-content h4 a:hover { color: var(--te-link-hover); } .news-content p { font-size: var(--te-news-excerpt-size); color: var(--te-news-excerpt-color); } .news-tag { display: inline-block; font-size: var(--te-news-tag-size); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; margin-bottom: 4px; } .tag-announce { background: var(--te-news-tag-bg); color: var(--te-news-tag-color); } .tag-ops { background: #f8e8e0; color: #8B2200; } .tag-recruit { background: #e8f8e8; color: #1a6b1a; } .view-all { display: block; text-align: right; padding: 9px 16px; font-size: var(--te-news-viewall-size); font-weight: var(--te-news-viewall-weight); text-transform: uppercase; letter-spacing: 0.04em; background: var(--te-news-viewall-bg); border: 1px solid var(--te-news-border); border-top: none; color: var(--te-news-viewall-color); } .view-all:hover { text-decoration: none; background: #e0e0d5; } /* ───────────────────────────────────────────────────────────────── EVENTS ───────────────────────────────────────────────────────────────── */ .event-item { padding: 13px 16px; border-bottom: 1px solid var(--te-news-border); display: flex; gap: 14px; align-items: flex-start; background: var(--te-news-bg); } .event-item:last-child { border-bottom: none; } .event-cal { flex-shrink: 0; width: 48px; text-align: center; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; } .event-cal-month { background: var(--te-event-cal-month-bg); color: var(--te-event-cal-month-color); font-size: var(--te-event-cal-month-size); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 0; } .event-cal-day { font-family: var(--te-event-cal-day-font); font-size: var(--te-event-cal-day-size); font-weight: var(--te-event-cal-day-weight); color: var(--te-event-cal-day-color); padding: 3px 0; line-height: 1; } .event-content h4 { font-size: var(--te-event-title-size); font-weight: var(--te-event-title-weight); color: var(--te-event-title-color); margin-bottom: 3px; } .event-content p { font-size: var(--te-event-excerpt-size); color: var(--te-event-excerpt-color); } /* ───────────────────────────────────────────────────────────────── SIDEBAR ───────────────────────────────────────────────────────────────── */ .sidebar { display: flex; flex-direction: column; gap: 18px; } .apply-cta { background: var(--te-cta-bg); color: #fff; padding: 20px; text-align: center; border-radius: var(--te-card-radius); } .apply-cta h3 { font-family: var(--te-cta-heading-font); font-size: var(--te-cta-heading-size); font-weight: var(--te-cta-heading-weight); margin-bottom: 8px; color: var(--te-cta-heading-color); } .apply-cta p { font-size: var(--te-cta-text-size); color: var(--te-cta-text-color); margin-bottom: 14px; line-height: 1.5; } .sidebar-list { border: 1px solid var(--te-card-border); border-top: none; background: var(--te-card-bg); border-radius: 0 0 var(--te-card-radius) var(--te-card-radius); } .sidebar-list a { display: flex; align-items: center; gap: 9px; padding: 11px 13px; font-size: var(--te-sidebar-link-size); color: var(--te-sidebar-link-color); border-bottom: 1px solid var(--te-card-border); transition: background 0.1s; font-weight: var(--te-sidebar-link-weight); } .sidebar-list a:hover { background: var(--te-sidebar-link-hover-bg); text-decoration: none; } .sidebar-list a:last-child { border-bottom: none; } /* ───────────────────────────────────────────────────────────────── PAGE CONTENT ───────────────────────────────────────────────────────────────── */ .page-content h2 { font-family: var(--te-page-h-font); color: var(--te-page-h-color); font-size: var(--te-page-h2-size); margin: 1.2rem 0 0.6rem; } .page-content h3 { font-family: var(--te-page-h-font); color: var(--te-page-h-color); font-size: var(--te-page-h3-size); margin: 1rem 0 0.5rem; } .page-content p { margin-bottom: 0.8rem; color: var(--te-page-p-color); font-size: var(--te-page-p-size); line-height: var(--te-page-p-lineheight); } .page-content ul, .page-content ol { padding-left: 1.4rem; margin-bottom: 0.8rem; } .page-content li { font-size: var(--te-page-p-size); color: var(--te-page-p-color); margin-bottom: 4px; } .page-content strong { color: var(--te-body-color); } .page-content a { color: var(--te-page-a-color); } /* ───────────────────────────────────────────────────────────────── FOOTER ───────────────────────────────────────────────────────────────── */ footer { background: var(--te-footer-bg); border-top: var(--te-footer-border-width) solid var(--te-footer-border-color); padding: 28px 20px 18px; } .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; margin-bottom: 18px; } .footer-logo-text { font-family: var(--te-footer-title-font); font-size: var(--te-footer-title-size); font-weight: var(--te-footer-title-weight); color: var(--te-footer-title-color); text-transform: var(--te-footer-title-transform); letter-spacing: var(--te-footer-title-spacing); } .footer-sub { font-size: var(--te-footer-sub-size); color: var(--te-footer-sub-color); margin-top: 3px; } .footer-social { display: flex; gap: 12px; margin-top: 10px; } .footer-social a { color: var(--te-footer-social-color); transition: color .15s; } .footer-social a:hover { color: var(--te-footer-link-hover); } .footer-links { display: flex; flex-direction: column; gap: 6px; } .footer-links-head { font-size: var(--te-footer-linkshead-size); font-weight: var(--te-footer-linkshead-weight); letter-spacing: var(--te-footer-linkshead-spacing); text-transform: var(--te-footer-linkshead-transform); color: var(--te-footer-linkshead-color); margin-bottom: 6px; } .footer-links a { color: var(--te-footer-link-color); font-size: var(--te-footer-link-size); text-decoration: none; } .footer-links a:hover { color: var(--te-footer-link-hover); } .footer-disclaimer { max-width: 1200px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 14px; } .footer-disclaimer p { font-size: var(--te-footer-disc-size); color: var(--te-footer-disc-color); line-height: 1.6; margin-bottom: 4px; } /* ───────────────────────────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────────────────────────── */ @media (max-width: 860px) { .main-grid { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; } .header-mission { display: none; } }