/* ============================================================ 505 GET FREE — Vigil Redraft · Shared Base The whole site keeps the same hours as the hotline. A tiny head script (phase-boot.js) reads the clock in New Mexico and stamps before paint; these tokens do the rest. Inner pages shift quietly — palette deepens at dusk, the number glows at night. Turquoise (lifted from the "505" logomark) is the accent. ============================================================ */ :root{ --navy: #1D2A8A; --ink: #0E1A66; --sky: #8FC4DE; --sky-soft: #B9D7E6; --turq: #1FC3E2; --turq-bright: #38D2EE; --turq-deep: #0E8FAE; --turq-soft: #BDEEF6; --turq-mist: #E4F7FB; --porcelain: #EAF2F6; --mist: #DCE4E9; --veil: #F4F2ED; --linen: #ECE7DD; --paper: #FBFAF6; --ink-text: #111734; --ink-muted: #5A6180; --red: #B24840; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif; --radius-sm: 4px; --radius: 16px; --radius-lg: 30px; --ease: cubic-bezier(.2,.7,.2,1); --fade: 1.4s; /* ── phase-able page tokens (day) ── */ --pg-bg: #F4F2ED; --pg-bg2: #FBFAF6; --pg-head: #0E1A66; --pg-text: #111734; --pg-muted: #5A6180; --pg-line: rgba(29,42,138,.10); --pg-card: #FBFAF6; --pg-accent: #0E8FAE; --pg-accent-2: #1FC3E2; --pg-glow: rgba(31,195,226,0); --pg-tint: #EAF2F6; /* alternate section wash */ --pg-shadow: rgba(14,26,102,.45); } html[data-phase="dawn"]{ --pg-bg:#F6EDE6; --pg-bg2:#FBF5EE; --pg-head:#1A2470; --pg-text:#1B2148; --pg-muted:#6A6680; --pg-line:rgba(29,42,138,.10); --pg-card:#FBF5EE; --pg-accent:#0E8FAE; --pg-accent-2:#1FC3E2; --pg-glow:rgba(31,195,226,0); --pg-tint:#F3E3DA; --pg-shadow:rgba(102,52,38,.35); } html[data-phase="dusk"]{ --pg-bg:#F2E6D7; --pg-bg2:#F8EFE2; --pg-head:#28225F; --pg-text:#2A2750; --pg-muted:#524A60; --pg-line:rgba(80,50,90,.13); --pg-card:#F8EFE2; --pg-accent:#0E8FAE; --pg-accent-2:#1FC3E2; --pg-glow:rgba(31,195,226,0); --pg-tint:#EFDCC4; --pg-shadow:rgba(110,55,30,.4); } html[data-phase="night"]{ --pg-bg:#080D33; --pg-bg2:#0C1240; --pg-head:#EEF2FB; --pg-text:#DDE4F4; --pg-muted:#94A0C6; --pg-line:rgba(170,190,235,.13); --pg-card:#101748; --pg-accent:#5FD8EE; --pg-accent-2:#38D2EE; --pg-glow:rgba(56,210,238,.45); --pg-tint:#070B2D; --pg-shadow:rgba(0,0,0,.7); } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family:var(--sans); background:var(--pg-bg); color:var(--pg-text); font-size:16px; line-height:1.7; font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background-color var(--fade) ease, color var(--fade) ease; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; } ul{ list-style:none; } ::selection{ background:var(--turq); color:#fff; } /* ── Type tokens ── */ .eyebrow{ font-family:var(--sans); font-size:11px; font-weight:400; letter-spacing:.32em; text-transform:uppercase; color:var(--pg-accent); display:inline-flex; align-items:center; gap:14px; transition:color var(--fade) ease; } .eyebrow::before{ content:""; width:28px; height:2px; background:var(--pg-accent-2); border-radius:2px; transition:background-color var(--fade) ease; } .eyebrow.center{ justify-content:center; } .eyebrow.center::before{ display:none; } h1,h2,h3,h4{ font-family:var(--serif); font-weight:300; color:var(--pg-head); letter-spacing:-0.005em; transition:color var(--fade) ease; } h1 em, h2 em, h3 em{ font-style:italic; color:var(--pg-accent); transition:color var(--fade) ease; } p{ color:var(--pg-muted); font-weight:300; transition:color var(--fade) ease; } /* ────────────────────────────────────────────────────────── TOPBAR — carries the clock everywhere ────────────────────────────────────────────────────────── */ .topbar{ background:linear-gradient(180deg,var(--ink) 0%,var(--navy) 100%); color:rgba(255,255,255,.82); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:300; display:flex; justify-content:center; gap:36px; padding:10px 32px; transition:background var(--fade) ease; } html[data-dark="1"] .topbar{ background:linear-gradient(180deg,#05081F 0%,#0A0F38 100%); } .topbar span{ display:inline-flex; align-items:center; gap:8px; } .topbar .dot{ width:7px; height:7px; border-radius:50%; background:var(--turq-bright); box-shadow:0 0 0 4px rgba(56,210,238,.22); animation:pulse 2.4s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(56,210,238,.22); } 50% { box-shadow:0 0 0 11px rgba(56,210,238,0); } } .topbar a{ color:#fff; border-bottom:1px solid rgba(56,210,238,.6); } .topbar .nm-clock{ color:rgba(255,255,255,.6); } /* ────────────────────────────────────────────────────────── NAV ────────────────────────────────────────────────────────── */ nav.primary{ background:rgba(251,250,246,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(29,42,138,.08); height:92px; display:flex; align-items:center; justify-content:space-between; padding:0 48px; position:sticky; top:0; z-index:500; transition:background-color var(--fade) ease, border-color var(--fade) ease; } .nav-logo img{ height:62px; width:auto; } .nav-links{ display:flex; align-items:center; gap:2px; } .nav-links > li{ position:relative; } .nav-links > li > a, .nav-links > li > span{ display:inline-block; font-size:11px; font-weight:400; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-text); padding:10px 14px; cursor:pointer; transition:color .25s var(--ease); white-space:nowrap; } .nav-links > li > a:hover, .nav-links > li > span:hover{ color:var(--turq-deep); } .nav-links > li > a::after, .nav-links > li > span::after{ content:""; display:block; height:2px; width:0; margin:4px auto 0; background:var(--turq); border-radius:2px; transition:width .3s var(--ease); } .nav-links > li > a:hover::after, .nav-links > li > span:hover::after{ width:18px; } .nav-dropdown{ position:absolute; top:calc(100% + 2px); left:50%; transform:translate(-50%,-6px); background:var(--paper); border:1px solid rgba(29,42,138,.08); box-shadow:0 20px 48px -24px rgba(14,26,102,.25); min-width:240px; padding:10px 0; border-radius:6px; opacity:0; visibility:hidden; transition:opacity .25s var(--ease),visibility .25s var(--ease),transform .25s var(--ease); z-index:600; } .nav-links > li:hover .nav-dropdown, .nav-links > li:focus-within .nav-dropdown{ opacity:1; visibility:visible; transform:translate(-50%,0); } .nav-dropdown li a{ display:block; padding:10px 22px; font-size:12px; letter-spacing:.08em; color:var(--ink-text); font-weight:300; transition:background .2s,color .2s,padding-left .2s var(--ease); } .nav-dropdown li a:hover{ background:var(--turq-mist); color:var(--turq-deep); padding-left:28px; } .nav-cta{ margin-left:14px; padding:12px 22px !important; border:1px solid var(--turq-deep); color:var(--turq-deep) !important; border-radius:100px; letter-spacing:.2em !important; transition:background .25s var(--ease),color .25s var(--ease) !important; } .nav-cta:hover{ background:var(--turq-deep); color:#fff !important; } .nav-cta::after{ display:none !important; } .nav-right{ display:flex; align-items:center; gap:14px; } .nav-exit-btn,.footer-exit-btn{ background:var(--red); color:#fff; font-size:9px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1.15; width:58px; height:58px; display:inline-flex; align-items:center; justify-content:center; clip-path:polygon(29% 0%,71% 0%,100% 29%,100% 71%,71% 100%,29% 100%,0% 71%,0% 29%); position:relative; transition:filter .2s,transform .3s var(--ease); flex-shrink:0; } .nav-exit-btn::before,.footer-exit-btn::before{ content:''; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.75); clip-path:polygon(29% 0%,71% 0%,100% 29%,100% 71%,71% 100%,29% 100%,0% 71%,0% 29%); pointer-events:none; } .nav-exit-btn:hover,.footer-exit-btn:hover{ filter:brightness(.88); transform:rotate(-6deg); } .hamburger{ display:none; flex-direction:column; gap:5px; padding:8px; } .hamburger span{ display:block; width:22px; height:1.5px; background:var(--ink); transition:all .3s var(--ease); } .hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2){ opacity:0; } .hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .mobile-nav{ display:none; position:fixed; top:92px; left:0; right:0; background:var(--paper); border-bottom:1px solid rgba(29,42,138,.08); z-index:490; padding:14px 0 24px; max-height:calc(100vh - 92px); overflow-y:auto; transition:background-color var(--fade) ease, border-color var(--fade) ease; } .mobile-nav.open{ display:block; } .mobile-nav a,.mobile-nav > span{ display:block; padding:13px 30px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-text); border-bottom:1px solid rgba(29,42,138,.06); } .mobile-nav .mobile-sub a{ padding-left:48px; letter-spacing:.04em; text-transform:none; background:var(--veil); } .mobile-nav .mobile-cta a{ margin:18px 24px 0; background:var(--turq-deep); color:#fff; border-radius:100px; text-align:center; } /* ── chrome adapts to darkness ── */ html[data-dark="1"] nav.primary{ background:rgba(9,14,54,.78); border-bottom-color:rgba(170,190,235,.12); } html[data-dark="1"] .nav-links > li > a, html[data-dark="1"] .nav-links > li > span{ color:#D9E1F2; } html[data-dark="1"] .nav-links > li > a:hover, html[data-dark="1"] .nav-links > li > span:hover{ color:var(--turq-bright); } html[data-dark="1"] .nav-cta{ border-color:var(--turq-bright); color:var(--turq-bright) !important; } html[data-dark="1"] .nav-cta:hover{ background:var(--turq-bright); color:#081033 !important; } html[data-dark="1"] .nav-dropdown{ background:#10174A; border-color:rgba(170,190,235,.14); } html[data-dark="1"] .nav-dropdown li a{ color:#D9E1F2; } html[data-dark="1"] .nav-dropdown li a:hover{ background:rgba(56,210,238,.1); color:var(--turq-bright); } html[data-dark="1"] .hamburger span{ background:#E8EDF8; } html[data-dark="1"] .mobile-nav{ background:#0C1240; border-color:rgba(170,190,235,.14); } html[data-dark="1"] .mobile-nav a, html[data-dark="1"] .mobile-nav > span{ color:#D9E1F2; border-color:rgba(170,190,235,.08); } html[data-dark="1"] .mobile-nav .mobile-sub a{ background:#080D33; } /* ────────────────────────────────────────────────────────── BUTTONS ────────────────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:12px; font-weight:400; letter-spacing:.22em; text-transform:uppercase; padding:16px 30px; border-radius:100px; transition:all .3s var(--ease); white-space:nowrap; border:none; } .btn-primary{ background:var(--navy); color:#fff; } .btn-primary:hover{ background:var(--ink); transform:translateY(-2px); box-shadow:0 14px 30px -16px rgba(14,26,102,.55); } html[data-dark="1"] .btn-primary{ background:var(--turq); color:#081033; font-weight:500; } html[data-dark="1"] .btn-primary:hover{ background:var(--turq-bright); box-shadow:0 0 40px -6px var(--pg-glow); } .btn-turq{ background:var(--turq-deep); color:#fff; } .btn-turq:hover{ background:var(--turq); transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(31,195,226,.6); } html[data-dark="1"] .btn-turq{ background:var(--turq); color:#081033; font-weight:500; } html[data-dark="1"] .btn-turq:hover{ background:var(--turq-bright); } .btn-ghost{ color:var(--pg-accent); padding:4px 0; border-radius:0; border-bottom:1px solid var(--pg-accent-2); transition:all .3s var(--ease), color var(--fade) ease, border-color var(--fade) ease; } .btn-ghost:hover{ letter-spacing:.28em; } .btn-outline-light{ color:#fff; border:1px solid rgba(255,255,255,.5); } .btn-outline-light:hover{ background:rgba(255,255,255,.1); border-color:#fff; } .btn-quiet{ border:1px solid var(--pg-line); color:var(--pg-text); transition:all .3s var(--ease), color var(--fade) ease, border-color var(--fade) ease; } .btn-quiet:hover{ border-color:var(--pg-accent); color:var(--pg-accent); } .btn .arrow{ display:inline-block; transition:transform .3s var(--ease); } .btn:hover .arrow{ transform:translateX(4px); } /* ────────────────────────────────────────────────────────── LAYOUT HELPERS ────────────────────────────────────────────────────────── */ section{ position:relative; } .inner{ max-width:1240px; margin:0 auto; padding:0 48px; } .pad-xl{ padding:140px 0; } .pad-lg{ padding:120px 0; } .pad-md{ padding:96px 0; } .tinted{ background:var(--pg-bg2); border-top:1px solid var(--pg-line); transition:background-color var(--fade) ease, border-color var(--fade) ease; } /* generic card surface that keeps the hours */ .surface{ background:var(--pg-card); border:1px solid var(--pg-line); transition:background-color var(--fade) ease, border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } /* ────────────────────────────────────────────────────────── PAGE HEADER (inner pages) ────────────────────────────────────────────────────────── */ .page-head{ padding:96px 48px 72px; text-align:center; background:radial-gradient(110% 90% at 50% -20%, var(--pg-tint) 0%, var(--pg-bg) 64%); transition:background var(--fade) ease; } .page-head h1{ font-size:clamp(44px,5.6vw,80px); font-weight:300; line-height:1.02; letter-spacing:-0.02em; margin-top:22px; } .page-head .lede{ font-size:17px; line-height:1.85; max-width:560px; margin:24px auto 0; } /* ────────────────────────────────────────────────────────── FOOTER ────────────────────────────────────────────────────────── */ footer{ background:var(--pg-bg2); color:var(--pg-muted); padding:90px 48px 40px; border-top:1px solid var(--pg-line); transition:background-color var(--fade) ease, border-color var(--fade) ease, color var(--fade) ease; } html[data-dark="1"] footer{ background:#070B2D; } .footer-inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:56px; max-width:1240px; margin:0 auto 56px; } .footer-logo{ height:80px; width:auto; margin-bottom:24px; } html[data-dark="1"] .footer-logo{ filter:drop-shadow(0 0 18px rgba(56,210,238,.25)); } .footer-tagline{ font-size:14px; line-height:1.7; max-width:320px; margin-bottom:22px; } .footer-hotline{ font-family:var(--serif); font-size:32px; color:var(--pg-accent); font-weight:400; display:block; margin-bottom:4px; letter-spacing:.01em; transition:color var(--fade) ease, text-shadow var(--fade) ease; } html[data-dark="1"] .footer-hotline{ color:var(--turq-bright); text-shadow:0 0 28px var(--pg-glow); } .footer-hotline-label{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--pg-muted); transition:color var(--fade) ease; } .footer-col h4{ font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--pg-accent); margin-bottom:22px; transition:color var(--fade) ease; } .footer-col ul li{ margin-bottom:10px; } .footer-col ul li a{ font-size:14px; color:var(--pg-text); opacity:.7; transition:all .25s var(--ease), color var(--fade) ease; } .footer-col ul li a:hover{ color:var(--pg-accent); opacity:1; padding-left:4px; } .footer-bottom{ max-width:1240px; margin:0 auto; border-top:1px solid var(--pg-line); padding-top:28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; transition:border-color var(--fade) ease; } .footer-bottom p{ font-size:12px; letter-spacing:.04em; } .footer-bottom a{ color:var(--pg-accent); } .footer-danger-note{ font-size:13px; font-weight:500; color:#fff; letter-spacing:.04em; display:inline-flex; align-items:center; gap:9px; background:var(--red); border:1px solid var(--red); border-radius:100px; padding:8px 16px; } .footer-danger-note a{ color:#fff; font-weight:700; border-bottom:1px solid rgba(255,255,255,.6); } /* ────────────────────────────────────────────────────────── REVEAL ────────────────────────────────────────────────────────── */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease),transform .9s var(--ease); } .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } *{ animation:none !important; } } /* ────────────────────────────────────────────────────────── RESPONSIVE (shared chrome) ────────────────────────────────────────────────────────── */ @media (max-width:1100px){ nav.primary{ padding:0 32px; } .inner{ padding:0 32px; } .pad-xl{ padding:110px 0; } .pad-lg{ padding:96px 0; } .pad-md{ padding:80px 0; } footer{ padding:72px 32px 36px; } .footer-inner{ grid-template-columns:1fr 1fr; gap:40px; } } @media (max-width:760px){ nav.primary{ height:72px; padding:0 22px; } .nav-logo img{ height:50px; } .nav-links{ display:none; } .hamburger{ display:flex; } .mobile-nav{ top:72px; } .topbar{ padding:0; gap:0; justify-content:stretch; } .topbar > span:first-child{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:9px 16px; font-size:11px; letter-spacing:.12em; } .topbar > span:last-child{ display:none; } .inner{ padding:0 22px; } .pad-xl{ padding:80px 0; } .pad-lg{ padding:72px 0; } .pad-md{ padding:60px 0; } footer{ padding:64px 22px 32px; } .footer-inner{ grid-template-columns:1fr; gap:36px; } .footer-bottom{ flex-direction:column; align-items:flex-start; } .page-head{ padding:64px 22px 52px; } }