/* ============================================================ SP VIRGO HOLDINGS — Design System v3 Dark SPVirgo Blue / classical ============================================================ */ /* Fonts loaded via in (see build.py head()) for parallel fetch — not @import, which serializes the request. */ :root{ --blue:#1B6FC9; /* SPVirgo Blue — bright accent */ --blue-deep:#0A2E57; /* base dark blue */ --blue-deeper:#071F3D; /* darkest / body background */ --blue-panel:#0E3663; /* panel tint, one step up from body */ --gold:#C7A65B; /* heritage accent, used sparingly */ --paper:#F3F6FA; /* primary light text on dark */ --paper-dim:#B9C6D8; /* secondary text on dark */ --steel:#7E93B3; /* muted / captions on dark */ --line: rgba(243,246,250,0.10); --line-strong: rgba(243,246,250,0.20); --white:#FFFFFF; --display: 'Playfair Display', Georgia, serif; --body: 'Inter', sans-serif; --mono: 'IBM Plex Mono', monospace; --container: 1280px; --gutter: clamp(20px, 5vw, 64px); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } body{ margin:0; background:var(--blue-deeper); color:var(--paper); font-family:var(--body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font-family:inherit; cursor:pointer; } h1,h2,h3,h4{ font-family:var(--display); font-weight:600; margin:0; color:var(--paper); letter-spacing:-0.01em; } .mono{ font-family:var(--mono); } .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; } .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:10px; } .eyebrow::before{ content:''; width:26px; height:1px; background:var(--gold); display:inline-block; } .wrap{ max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); } /* ---------- Blueprint grid backdrop (kept, tuned for dark blue) ---------- */ .blueprint-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:64px 64px; opacity:0.6; } /* ---------- Scroll progress rail ---------- */ .scroll-rail{ position:fixed; top:0; left:0; height:3px; width:0%; background:var(--gold); z-index:9998; } /* ---------- Logo badge (white chip so the JPG's white bg reads as intentional) ---------- */ .logo-badge{ display:inline-flex; align-items:center; justify-content:center; background:var(--white); border-radius:6px; padding:6px 10px; line-height:0; } /* ============ HEADER / NAV ============ */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:1000; padding:16px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:24px; background:rgba(7,31,61,0.88); backdrop-filter:blur(8px); border-bottom:1px solid transparent; transition:padding .3s ease, background .3s ease, border-color .3s ease; } .site-header.is-scrolled{ padding-top:10px; padding-bottom:10px; background:rgba(7,31,61,0.97); border-bottom:1px solid var(--line); } .brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto; } .brand img{ height:64px; width:auto; object-fit:contain; transition:height .3s ease; filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px rgba(255,255,255,0.9)) drop-shadow(0 0 10px rgba(255,255,255,0.5)) drop-shadow(0 2px 8px rgba(0,0,0,0.3)); } .site-header.is-scrolled .brand img{ height:52px; } .header-nav{ display:flex; align-items:center; gap:34px; flex:1 1 auto; justify-content:center; } .header-nav a{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim); position:relative; padding:4px 0; transition:color .3s; white-space:nowrap; } .header-nav a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold); transition:width .3s ease; } .header-nav a:hover{ color:var(--paper); } .header-nav a:hover::after{ width:100%; } .header-actions{ display:flex; align-items:center; gap:14px; flex:0 0 auto; } .nav-toggle{ width:44px; height:44px; border:1px solid var(--line-strong); background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; z-index:1001; border-radius:2px; } .nav-toggle span{ width:16px; height:1px; background:var(--paper); transition:transform .3s ease, opacity .3s ease; } .nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2){ opacity:0; } .nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } .mega-nav{ position:fixed; inset:0; background:var(--blue-deeper); z-index:999; display:block; padding:calc(var(--gutter) + 90px) var(--gutter) 40px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; visibility:hidden; opacity:0; pointer-events:none; } .mega-nav.is-open{ visibility:visible; opacity:1; pointer-events:auto; } .mega-nav-inner{ max-width:840px; margin:0 auto; width:100%; } .mega-nav-label{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin-bottom:22px; text-align:center; } .mega-nav-list a{ display:flex; align-items:center; gap:18px; padding:16px 6px; border-bottom:1px solid var(--line); color:var(--paper); transition:padding-left .3s ease, color .3s ease; } .mega-nav-list a:hover{ padding-left:12px; color:var(--gold); } .mega-nav-list a .mn-logo{ width:38px; height:38px; border-radius:6px; background:#fff; display:flex; align-items:center; justify-content:center; padding:5px; flex:0 0 auto; } .mega-nav-list a .mn-logo-home{ font-size:20px; color:var(--blue-deep); padding:0; } .mega-nav-list a .mn-logo img{ max-width:100%; max-height:100%; object-fit:contain; } .mega-nav-list a .mn-name{ font-family:var(--display); font-size:clamp(19px,2.4vw,26px); flex:1 1 auto; } .mega-nav-list a .mn-arrow{ font-family:var(--mono); font-size:12px; color:var(--steel); } .mega-nav-contact{ margin-top:36px; text-align:center; font-family:var(--mono); font-size:13px; color:var(--paper-dim); line-height:2; } .mega-nav-contact a:hover{ color:var(--gold); } /* ============ BUTTONS ============ */ .btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border:1px solid var(--line-strong); font-family:var(--mono); font-size:12px; letter-spacing:0.09em; text-transform:uppercase; color:var(--paper); position:relative; overflow:hidden; transition:border-color .3s, color .3s; border-radius:2px; } .btn::before{ content:''; position:absolute; inset:0; background:var(--gold); transform:translateX(-101%); transition:transform .35s cubic-bezier(.2,.8,.2,1); z-index:0; } .btn span{ position:relative; z-index:1; transition:color .35s; } .btn:hover{ border-color:var(--gold); } .btn:hover::before{ transform:translateX(0); } .btn:hover span{ color:var(--blue-deeper); } .btn-solid{ background:var(--blue); border-color:var(--blue); } .btn-solid span{ color:#fff; } .btn-solid::before{ background:var(--gold); } .btn-solid:hover span{ color:var(--blue-deeper); } /* ============ HERO ============ */ .hero{ position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:140px var(--gutter) 80px; overflow:hidden; text-align:center; } .hero-schematic{ position:absolute; right:-4%; top:52%; transform:translateY(-50%); width:min(64vw, 900px); opacity:0.6; z-index:0; pointer-events:none; } .hero-schematic svg{ width:100%; height:auto; } .hero-schematic path,.hero-schematic line,.hero-schematic circle,.hero-schematic rect{ fill:none; stroke:rgba(243,246,250,0.5); stroke-width:1.1; vector-effect:non-scaling-stroke; } .hero-schematic .accent{ stroke:var(--gold); } .hero-content{ position:relative; z-index:2; max-width:720px; display:flex; flex-direction:column; align-items:center; } .hero-tag{ margin-bottom:34px; } .hero-logo-badge{ display:inline-flex; align-items:center; justify-content:center; position:relative; padding:12px; } .hero-logo-badge img{ position:relative; z-index:1; height:clamp(128px,20vw,240px); width:auto; object-fit:contain; filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px rgba(255,255,255,0.95)) drop-shadow(0 0 20px rgba(255,255,255,0.6)) drop-shadow(0 0 44px rgba(255,255,255,0.35)) drop-shadow(0 18px 30px rgba(2,10,22,0.4)); } .hero-slogan{ margin-top:28px; font-family:var(--display); font-style:italic; font-size:clamp(20px,3vw,30px); color:var(--gold); } .hero-sub{ margin-top:22px; max-width:560px; font-size:17px; color:var(--paper-dim); } .hero-cta{ margin-top:44px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; } .hero-coords{ position:absolute; top:140px; right:var(--gutter); font-family:var(--mono); font-size:11px; color:rgba(243,246,250,0.35); text-align:right; line-height:1.8; z-index:2; } /* ---------- Left decorative schematic + rotating company ticker ---------- */ .hero-schematic-left{ position:absolute; left:-6%; top:50%; transform:translateY(-50%); width:min(34vw, 440px); opacity:0.55; z-index:0; pointer-events:none; } .hero-schematic-left svg{ width:100%; height:auto; } .hero-schematic-left line,.hero-schematic-left circle{ fill:none; stroke:rgba(243,246,250,0.5); stroke-width:1.1; vector-effect:non-scaling-stroke; } .hero-schematic-left .accent{ stroke:var(--gold); } .hero-ticker{ position:absolute; left:var(--gutter); top:50%; transform:translateY(-50%); z-index:2; text-align:left; max-width:220px; } .hero-ticker .tk-label{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin-bottom:10px; } .hero-ticker .tk-name{ font-family:var(--display); font-size:clamp(16px,1.6vw,22px); color:var(--paper); line-height:1.3; min-height:2.6em; } @media (max-width:1000px){ .hero-schematic-left, .hero-ticker{ display:none; } } /* ============ SECTION SHELL ============ */ section{ position:relative; z-index:1; } section[id]{ scroll-margin-top:100px; } .panel{ padding:120px var(--gutter); border-top:1px solid var(--line); } .panel-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:64px; flex-wrap:wrap; } .panel-head h2{ font-size:clamp(30px,4vw,52px); max-width:680px; } .panel-head .meta{ font-family:var(--mono); font-size:12px; color:var(--steel); text-align:right; } .section-sheet{ font-family:var(--mono); font-size:11px; color:var(--steel); letter-spacing:.1em; margin-bottom:16px; } /* ============ ABOUT ============ */ .about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px; } .about-copy p{ color:var(--paper-dim); font-size:17px; margin:0 0 22px; max-width:52ch; } .about-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); } .stat{ background:var(--blue-panel); padding:26px 24px; display:flex; flex-direction:column; min-height:168px; min-width:0; } .stat .num{ font-family:var(--display); font-size:clamp(22px,2.6vw,40px); color:var(--gold); line-height:1.1; white-space:nowrap; overflow:hidden; } .stat .lbl{ font-family:var(--mono); font-size:11px; color:var(--steel); text-transform:uppercase; letter-spacing:.08em; margin-top:10px; } .stat .desc{ font-family:var(--body); font-size:13px; color:var(--paper-dim); line-height:1.5; margin-top:12px; } /* ============ SECTOR MARQUEE ============ */ .marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; overflow:hidden; white-space:nowrap; background:var(--blue-panel); } .marquee-track{ display:inline-flex; gap:0; will-change:transform; } .marquee-track span{ font-family:var(--display); font-style:italic; font-size:clamp(20px,2.6vw,32px); color:var(--paper-dim); padding:0 30px; display:inline-flex; align-items:center; gap:30px; } .marquee-track span::after{ content:'·'; color:var(--gold); font-style:normal; } /* ============ PRELOADER ============ */ #preloader{ position:fixed; inset:0; z-index:99999; background:var(--blue-deeper); display:flex; align-items:center; justify-content:center; transition:opacity .6s ease, visibility .6s ease; } #preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; } #preloader .pl-logo{ position:relative; display:flex; align-items:center; justify-content:center; } #preloader .pl-logo img{ height:clamp(70px,10vw,110px); width:auto; object-fit:contain; filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px rgba(255,255,255,0.9)) drop-shadow(0 0 20px rgba(255,255,255,0.55)); animation:pl-pulse 1.6s ease-in-out infinite; } #preloader .pl-bar{ position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); width:120px; height:2px; background:rgba(243,246,250,0.15); overflow:hidden; } #preloader .pl-bar::after{ content:''; position:absolute; top:0; left:-40%; width:40%; height:100%; background:var(--gold); animation:pl-sweep 1.3s ease-in-out infinite; } @keyframes pl-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } } @keyframes pl-sweep{ 0%{ left:-40%; } 100%{ left:100%; } } @media (prefers-reduced-motion: reduce){ #preloader .pl-logo img{ animation:none; } #preloader .pl-bar::after{ animation:none; } } /* ============ ORG CHART (Group hierarchy) ============ */ .org-chart{ display:flex; flex-direction:column; align-items:center; padding-top:10px; } .org-parent{ background:#fff; border-radius:10px; padding:16px 28px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(2,10,22,0.25); } .org-parent img{ height:44px; width:auto; object-fit:contain; } .org-drop{ width:1px; height:36px; background:var(--line-strong); } .org-children{ display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-start; border-top:1px solid var(--line-strong); margin-top:0; padding-top:0; max-width:100%; width:100%; gap:4px; } .org-child{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 6px 0; position:relative; flex:1 1 0; min-width:0; max-width:150px; transition:transform .3s ease; } .org-child .org-logo{ flex-shrink:0; } .org-child .org-name{ word-break:break-word; } .org-child::before{ content:''; position:absolute; top:-1px; left:50%; width:1px; height:28px; background:var(--line-strong); transform:translateX(-50%); } .org-child:hover{ transform:translateY(-4px); } .org-child .org-logo{ width:52px; height:52px; border-radius:9px; background:#fff; display:flex; align-items:center; justify-content:center; padding:8px; box-shadow:0 8px 20px rgba(2,10,22,0.2); margin-bottom:12px; transition:box-shadow .3s ease; flex:0 0 auto; } .org-child:hover .org-logo{ box-shadow:0 12px 28px rgba(199,166,91,0.3); } .org-child .org-logo img{ max-width:100%; max-height:100%; object-fit:contain; } .org-child .org-name{ font-family:var(--display); font-size:12.5px; color:var(--paper); line-height:1.25; transition:color .3s; } .org-child:hover .org-name{ color:var(--gold); } /* ============ LOGO STRIP (legacy, still used elsewhere) ============ */ .logo-strip{ display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line); } .logo-strip-item{ flex:1 1 150px; background:var(--white); padding:24px 20px; display:flex; align-items:center; justify-content:center; min-height:94px; } .logo-strip-item img{ max-height:40px; width:auto; max-width:80%; object-fit:contain; } /* ============ ASSOCIATES LIST (equal rows, no preview, no numbers) ============ */ .assoc-list{ border-top:1px solid var(--line); } .assoc-row{ display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:26px; padding:26px; border-bottom:1px solid var(--line); transition:background .3s ease, padding-left .3s ease; } .assoc-row:hover{ background:var(--blue-panel); padding-left:34px; } .assoc-row .assoc-logo{ width:64px; height:64px; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; padding:8px; flex:0 0 auto; } .assoc-row .assoc-logo img{ max-width:100%; max-height:100%; object-fit:contain; } .assoc-row .assoc-text .assoc-name{ font-family:var(--display); font-size:clamp(19px,2vw,25px); color:var(--paper); margin-bottom:6px; transition:color .3s; } .assoc-row:hover .assoc-name{ color:var(--gold); } .assoc-row .assoc-text .assoc-desc{ color:var(--paper-dim); font-size:14px; max-width:64ch; } .assoc-row .assoc-arrow{ font-family:var(--mono); font-size:20px; color:var(--steel); transition:transform .3s ease, color .3s ease; } .assoc-row:hover .assoc-arrow{ transform:translateX(6px); color:var(--gold); } /* ============ GALLERY ============ */ .gallery-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:2px; background:var(--line); } .gallery-grid figure{ margin:0; position:relative; width:calc(25% - 2px); min-width:220px; flex:1 1 220px; max-width:320px; aspect-ratio:4/3; overflow:hidden; background:var(--blue-panel); cursor:pointer; } .gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1); } .gallery-grid figure:hover img{ transform:scale(1.07); } .gallery-grid figcaption{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px; font-family:var(--mono); font-size:11px; color:#fff; background:linear-gradient(to top, rgba(7,31,61,0.94), transparent); transform:translateY(100%); transition:transform .35s ease; } .gallery-grid figure:hover figcaption{ transform:translateY(0); } /* ============ CERTIFICATIONS — one uniform style used everywhere ============ */ .cert-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:1px; background:var(--line); border:1px solid var(--line); } .cert-item{ background:var(--blue-panel); padding:24px 20px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:14px; text-align:center; flex:1 1 170px; min-width:150px; max-width:220px; min-height:186px; } .cert-item .cert-frame{ width:100%; height:80px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:4px; padding:10px; } .cert-item img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; } .cert-item .cert-name{ font-family:var(--mono); font-size:10.5px; color:var(--paper-dim); letter-spacing:.05em; text-transform:uppercase; } /* lightbox */ .lightbox{ position:fixed; inset:0; background:rgba(2,10,22,0.94); z-index:2000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s ease; } .lightbox.is-open{ opacity:1; pointer-events:auto; } .lightbox-frame{ background:#fff; padding:16px; max-width:min(90vw,1100px); max-height:86vh; } .lightbox img{ max-width:min(88vw,1060px); max-height:74vh; object-fit:contain; } .lightbox-close{ position:absolute; top:26px; right:var(--gutter); width:46px; height:46px; border:1px solid rgba(255,255,255,0.3); border-radius:2px; display:flex; align-items:center; justify-content:center; background:transparent; color:#fff; font-size:20px; } .lightbox-cap{ position:absolute; bottom:30px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:12px; color:rgba(255,255,255,0.7); } /* ============ CTA / FOOTER ============ */ .cta-band{ padding:140px var(--gutter); text-align:center; position:relative; background:var(--blue-panel); } .cta-band .eyebrow{ justify-content:center; } .cta-band h2{ font-size:clamp(32px,5.4vw,72px); line-height:1.08; } .cta-band .btn{ margin-top:40px; } .cta-contact{ margin-top:40px; display:flex; gap:36px; flex-wrap:wrap; justify-content:center; align-items:center; } .cta-contact a{ font-family:var(--mono); font-size:15px; color:var(--paper); display:flex; align-items:center; gap:10px; transition:color .3s; } .cta-contact a:hover{ color:var(--gold); } .cta-contact a .ico{ color:var(--gold); font-size:16px; } .cta-map{ margin-top:70px; max-width:1000px; margin-left:auto; margin-right:auto; } .cta-map iframe{ width:100%; height:380px; border:1px solid var(--line); filter:grayscale(1) invert(0.9) contrast(0.9) brightness(0.9); } .site-footer{ border-top:1px solid var(--line); padding:80px var(--gutter) 30px; background:var(--blue-deeper); } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:60px; } .footer-col h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--steel); margin-bottom:20px; text-transform:uppercase; } .footer-col a,.footer-col p{ display:block; color:var(--paper-dim); font-size:14px; margin-bottom:10px; } .footer-col a:hover{ color:var(--gold); } .footer-bottom{ display:flex; justify-content:center; align-items:center; padding-top:24px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--steel); flex-wrap:wrap; gap:10px; } /* ============ SUBSIDIARY PAGE PARTS ============ */ .sub-hero{ min-height:70vh; display:flex; flex-direction:column; justify-content:flex-end; padding:150px var(--gutter) 70px; border-bottom:1px solid var(--line); position:relative; background:var(--blue-panel); } .sub-hero-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:auto; padding-top:20px; gap:20px; flex-wrap:wrap; } .sub-hero-back{ font-family:var(--mono); font-size:12px; color:var(--paper-dim); display:flex; align-items:center; gap:10px; } .sub-hero-back:hover{ color:var(--gold); } .sub-hero-loc{ font-family:var(--mono); font-size:12px; color:var(--steel); text-align:right; line-height:1.8; } .sub-hero-logo-badge{ background:#fff; border-radius:8px; padding:8px 14px; display:inline-flex; align-items:center; margin-bottom:26px; width:fit-content; } .sub-hero-logo-badge img{ height:58px; width:auto; max-width:240px; object-fit:contain; display:block; } .sub-hero h1{ font-size:clamp(32px,5.4vw,68px); max-width:900px; } .sub-hero h1 .line{ display:block; overflow:hidden; } .sub-hero .sector-tag{ margin-top:20px; } .sub-hero-desc{ margin-top:24px; max-width:640px; color:var(--paper-dim); font-size:17px; } .capability-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .capability-item{ background:var(--blue-panel); padding:24px 26px; display:flex; align-items:center; gap:16px; } .capability-item .idx{ font-family:var(--mono); font-size:12px; color:var(--gold); } .capability-item .name{ font-family:var(--body); font-size:15px; color:var(--paper-dim); } .capgroup{ margin-bottom:56px; } .capgroup h3{ font-size:20px; color:var(--paper); margin-bottom:20px; font-family:var(--display); } .capgroup h3 .n{ color:var(--gold); font-family:var(--mono); font-size:13px; margin-right:12px; font-style:normal; } .subnav-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; overflow-x:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); scrollbar-width:none; background:var(--blue-panel); } .subnav-strip::-webkit-scrollbar{ display:none; } .subnav-strip a{ flex:0 0 auto; padding:16px 24px; font-family:var(--mono); font-size:12px; color:var(--paper-dim); border-right:1px solid var(--line); white-space:nowrap; transition:color .3s, background .3s; } .subnav-strip a:hover, .subnav-strip a.is-current{ color:var(--gold); background:rgba(243,246,250,0.04); } /* reveal utility (JS-driven) */ .reveal{ opacity:0; transform:translateY(36px); } .reveal.is-in{ opacity:1; transform:translateY(0); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); } /* ============ RESPONSIVE ============ */ @media (max-width:1000px){ .header-nav{ display:none; } .about-grid{ grid-template-columns:1fr; gap:50px; } .gallery-grid{ grid-template-columns:repeat(2,1fr); } .assoc-row{ grid-template-columns:48px 1fr; } .assoc-row .assoc-arrow{ display:none; } .capability-list{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr 1fr; } .org-children{ flex-direction:column; align-items:center; border-top:none; gap:0; width:100%; max-width:360px; margin:0 auto; } .org-child{ flex-direction:row; text-align:left; width:100%; max-width:none; padding:16px 4px; gap:16px; border-top:1px solid var(--line); justify-content:flex-start; } .org-child:first-child{ border-top:1px solid var(--line-strong); } .org-child::before{ display:none; } .org-child .org-logo{ margin-bottom:0; } .org-child .org-name{ font-size:14px; text-align:left; } .org-child:hover{ transform:none; } } @media (max-width:640px){ .hero-schematic{ opacity:.2; width:90vw; } .hero-coords{ display:none; } .footer-grid{ grid-template-columns:1fr; } .cert-strip{ grid-template-columns:repeat(2,1fr); } .stat .num{ font-size:clamp(17px,5.2vw,28px); white-space:normal; overflow:visible; line-height:1.15; } .stat{ padding:18px 14px; min-height:150px; } } @media (max-width:480px){ .about-stats{ grid-template-columns:1fr; } .stat{ min-height:0; padding:20px 18px; } .stat .num{ font-size:clamp(22px,8vw,30px); } }