/* ============================================================================
TRU NETWORK — MASTER THEME
tru-theme.css · the single source of truth for the look.
HOW TO USE
1. Put this file at the site root (next to index.html).
2. In the of EVERY page, add these two lines:
3. Delete that page's old colour/font/panel CSS. Keep only CSS that is
genuinely unique to that one page.
4. To change the look anywhere, edit THIS FILE ONLY.
The class names below (.bg .grid .panel .input .button .header .sidebar
.nav-btn .footer) match what your pages already use, so adopting this is
mostly DELETING old styles, not rewriting HTML.
============================================================================ */
/* ---------------------------------------------------------------------------
1. DESIGN TOKENS — the only place colours, fonts and spacing are defined.
--------------------------------------------------------------------------- */
:root{
/* Brand */
--tru-blue:#3f97e8; /* primary brand colour */
--tru-blue-deep:#3a86d8; /* darker accent / hover */
--tru-blue-ink:#04141c; /* text colour that sits ON a blue button */
/* Surfaces */
--bg-base:#05070b; /* page background */
--bg-glow:rgba(63,151,232,.14);/* blue glow behind everything */
--panel:rgba(255,255,255,.05); /* glass fill */
--panel-2:rgba(255,255,255,.03);
--panel-solid:linear-gradient(180deg,rgba(18,18,20,.96),rgba(6,6,8,.97)); /* opaque glass, e.g. menu */
/* Lines */
--border:rgba(255,255,255,.10);
--border-soft:rgba(255,255,255,.08);
--border-strong:rgba(63,151,232,.55);
/* Text */
--text:#ffffff;
--text-dim:rgba(255,255,255,.70);
--text-faint:rgba(255,255,255,.46);
/* Feedback */
--ok:#b9ffcb;
--err:#ff9d9d;
/* Shape & depth */
--radius:20px;
--radius-sm:14px;
--radius-lg:24px;
--shadow:0 20px 50px rgba(0,0,0,.45);
/* Type */
--display:'Space Grotesk',Arial,Helvetica,sans-serif; /* headings, labels, buttons */
--body:'Inter',Arial,Helvetica,sans-serif; /* body text */
/* Layout */
--header-h:84px;
--page-max:1120px;
}
/* ---------------------------------------------------------------------------
2. RESET & BASE
--------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
min-height:100%;
background:var(--bg-base);
color:var(--text);
font-family:var(--body);
overflow-x:hidden;
}
body{position:relative}
a{color:var(--text);text-decoration:none}
img{display:block;max-width:100%}
/* ---------------------------------------------------------------------------
3. AMBIENT BACKGROUND (blue glow + faint grid) — put these two divs first
in :
--------------------------------------------------------------------------- */
.bg{
position:fixed;inset:0;z-index:0;
background:radial-gradient(circle at top, var(--bg-glow), transparent 34%), var(--bg-base);
}
.grid{
position:fixed;inset:0;z-index:1;pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size:38px 38px;
}
/* ---------------------------------------------------------------------------
4. HEADER (logo left, menu button right)
--------------------------------------------------------------------------- */
.header{
position:fixed;top:0;left:0;right:0;height:var(--header-h);
padding:16px 22px;display:flex;align-items:center;justify-content:space-between;z-index:5;
}
.logo img{height:60px;max-width:70vw;width:auto}
.menu-btn{
width:52px;height:52px;border:1px solid rgba(255,255,255,.18);
background:rgba(0,0,0,.28);border-radius:12px;display:flex;align-items:center;
justify-content:center;cursor:pointer;backdrop-filter:blur(8px);transition:border-color .2s ease;
}
.menu-btn:hover{border-color:rgba(255,255,255,.32)}
.menu-icon,.menu-icon::before,.menu-icon::after{
width:22px;height:2px;background:#fff;display:block;position:relative;content:""
}
.menu-icon::before{position:absolute;top:-7px}
.menu-icon::after{position:absolute;top:7px}
/* ---------------------------------------------------------------------------
5. SLIDE-OUT MENU (sidebar + overlay)
--------------------------------------------------------------------------- */
.overlay{
position:fixed;inset:0;background:rgba(0,0,0,.38);
opacity:0;visibility:hidden;transition:.3s;z-index:1400;
}
.overlay.show{opacity:1;visibility:visible}
.sidebar{
position:fixed;top:78px;right:16px;width:min(360px,calc(100vw - 32px));
max-height:min(calc(100vh - 120px),760px);
background:var(--panel-solid);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
transform:translateX(calc(100% + 28px));transition:transform .35s ease,opacity .25s ease;
z-index:1500;border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);
padding:18px;display:flex;flex-direction:column;gap:14px;overflow:hidden;opacity:0;
}
.sidebar.open{transform:translateX(0);opacity:1}
.nav-list{
display:grid;grid-template-columns:1fr;gap:12px;overflow-y:auto;
overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-right:2px;flex:0 1 auto;
}
.nav-list::-webkit-scrollbar{width:6px}
.nav-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
.nav-btn{
display:flex;align-items:center;min-height:72px;border:1px solid var(--border-strong);
background:var(--panel-2);color:var(--text);border-radius:18px;padding:0 18px;
font-size:18px;font-weight:500;letter-spacing:-.01em;
transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.nav-btn:hover,.nav-btn:focus-visible{
background:rgba(63,151,232,.12);border-color:rgba(90,168,239,.85);
box-shadow:0 0 0 1px rgba(63,151,232,.18) inset;outline:none;transform:translateY(-1px);
}
.sidebar-brand{
flex:0 0 auto;padding-top:15px;border-top:1px solid var(--border-soft);
font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.82;
text-align:center;color:var(--text-dim);
}
/* ---------------------------------------------------------------------------
6. PANELS & PAGE CONTAINERS (the signature glass card)
--------------------------------------------------------------------------- */
.panel{
position:relative;z-index:2;
background:linear-gradient(180deg,var(--panel),var(--panel-2));
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid var(--border);border-radius:var(--radius-lg);
box-shadow:var(--shadow);padding:34px 32px;
}
/* Centred single-panel layout (login, promo access, thank-you) */
.center-wrap{
position:relative;z-index:2;min-height:100vh;display:flex;
align-items:center;justify-content:center;padding:24px;
}
.center-wrap .panel{width:min(100%,560px)}
/* Document-style page (terms, privacy, long content) */
.page{
position:relative;z-index:20;max-width:var(--page-max);margin:88px auto 48px;padding:32px;
background:var(--panel);backdrop-filter:blur(10px);
border:1px solid var(--border-soft);border-radius:var(--radius);
}
/* Panel entrance (respect reduced motion) */
.rise{animation:tru-rise .5s ease both}
@keyframes tru-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none}}
/* ---------------------------------------------------------------------------
7. TYPOGRAPHY HELPERS
--------------------------------------------------------------------------- */
h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;line-height:1.12}
h1{font-size:clamp(28px,4vw,40px);margin-bottom:12px}
h2{font-size:22px;margin:26px 0 10px}
p,li{line-height:1.65;color:var(--text-dim)}
.lead{color:var(--text-dim);line-height:1.6}
.small{font-size:14px;color:var(--text-faint)}
/* Eyebrow — small blue label with hairline wings */
.eyebrow{
display:flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.22em;
text-transform:uppercase;color:var(--tru-blue);margin-bottom:12px;
}
.eyebrow::before,.eyebrow::after{
content:"";height:1px;width:26px;
background:linear-gradient(90deg,transparent,var(--tru-blue));opacity:.6;
}
.eyebrow::after{transform:scaleX(-1)}
/* In-content links inside .page / .panel get an underline */
.page a,.panel a.link{border-bottom:1px solid rgba(255,255,255,.25)}
.page a:hover,.panel a.link:hover{border-bottom-color:rgba(63,151,232,.6)}
/* ---------------------------------------------------------------------------
8. FORMS
--------------------------------------------------------------------------- */
.form{display:grid;gap:16px;margin-top:24px}
.field{margin-bottom:14px}
.label{
display:block;font-family:var(--display);font-size:12px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--tru-blue);margin-bottom:8px;
}
.input,input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=url],input[type=number],select,textarea{
width:100%;border-radius:var(--radius-sm);border:1px solid var(--border);
background:var(--panel);color:var(--text);padding:16px 18px;min-height:54px;
font-family:var(--body);font-size:16px;outline:none;-webkit-appearance:none;appearance:none;
transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
textarea{min-height:120px;resize:vertical}
.input::placeholder,input::placeholder,textarea::placeholder{color:var(--text-faint)}
.input:focus,input:focus,select:focus,textarea:focus{
border-color:var(--border-strong);background:rgba(63,151,232,.04);
box-shadow:0 0 0 3px rgba(63,151,232,.12);
}
/* Keep autofilled fields on-theme instead of browser yellow */
input:-webkit-autofill,textarea:-webkit-autofill{
-webkit-text-fill-color:var(--text) !important;
-webkit-box-shadow:0 0 0 1000px #11161f inset !important;
box-shadow:0 0 0 1000px #11161f inset !important;
}
/* ---------------------------------------------------------------------------
9. BUTTONS
--------------------------------------------------------------------------- */
.button,.btn{
appearance:none;border:none;border-radius:var(--radius-sm);
padding:16px 24px;min-height:54px;font-family:var(--display);font-weight:600;
font-size:16px;cursor:pointer;background:var(--tru-blue);color:var(--tru-blue-ink);
transition:filter .2s ease,transform .2s ease;
}
.button:hover,.btn:hover{filter:brightness(1.08)}
.button:active,.btn:active{transform:translateY(1px)}
.button:focus-visible,.btn:focus-visible{outline:3px solid rgba(63,151,232,.4);outline-offset:2px}
.button:disabled,.btn:disabled{opacity:.55;cursor:not-allowed}
/* Quieter, outlined variant */
.button.ghost,.btn.ghost{
background:transparent;color:var(--text);border:1px solid var(--border-strong);
}
.button.ghost:hover,.btn.ghost:hover{background:rgba(63,151,232,.10);filter:none}
.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
/* ---------------------------------------------------------------------------
10. STATUS, META, FOOTER, UTILITIES
--------------------------------------------------------------------------- */
.status{min-height:24px;font-size:14px;color:var(--text-dim)}
.status.error{color:var(--err)}
.status.success{color:var(--ok)}
.meta{
margin-top:14px;padding:14px 16px;border:1px solid var(--border);
border-radius:var(--radius-sm);background:var(--panel-2);font-size:14px;color:var(--text-dim);
}
.footer{
display:flex;justify-content:center;gap:10px;margin-top:40px;padding-top:20px;
border-top:1px solid var(--border-soft);text-align:center;font-size:14px;color:var(--text-faint);
}
.footer a{color:var(--text-faint)}
.footer a:hover{color:var(--text)}
.brandline{
margin-top:26px;padding-top:18px;border-top:1px solid var(--border-soft);
text-align:center;font-family:var(--display);font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:var(--text-faint);
}
.hidden{display:none !important}
.center{text-align:center}
/* ---------------------------------------------------------------------------
11. RESPONSIVE
--------------------------------------------------------------------------- */
@media (max-width:900px){
.sidebar{top:74px;right:12px;width:min(360px,calc(100vw - 24px));max-height:calc(100vh - 96px);padding:16px;border-radius:20px}
.nav-btn{min-height:64px;font-size:17px;border-radius:16px}
}
@media (max-width:600px){
.header{padding:16px 18px}
.logo img{height:54px}
.panel{padding:26px 20px;border-radius:20px}
.page{margin:78px 16px 24px;padding:22px}
.sidebar{top:70px;right:10px;left:10px;width:auto;max-height:calc(100vh - 86px);padding:14px;border-radius:18px}
.nav-btn{min-height:58px;font-size:16px;border-radius:15px}
}
@media (orientation:landscape) and (max-height:560px){
.sidebar{top:60px;max-height:calc(100vh - 72px);padding:12px;border-radius:16px}
.nav-btn{min-height:48px;font-size:15px;border-radius:13px}
}