/* ------------------------------
Tero‑Tech — styles.css
Aurora gradient + glassmorphism + watermark
------------------------------ */
/* 1) Design Tokens */
:root{
--brand: #6ee7f3;
--brand-strong: #22d3ee;
--ink: #e5e7eb;
--ink-muted: #cbd5e1;
--bg: #0b1220; /* Base canvas */
--panel: 24, 32, 56; /* RGB for translucent panels */
--accent: #a78bfa; /* Secondary accent */
--radius: 16px;
--radius-sm: 10px;
--shadow-1: 0 10px 30px rgba(0,0,0,0.25);
--shadow-2: 0 20px 60px rgba(0,0,0,0.35);
--container: 1120px;
--space-1: .5rem;
--space-2: .75rem;
--space-3: 1rem;
--space-4: 1.5rem;
--space-5: 2rem;
--space-6: 3rem;
--space-7: clamp(3rem, 6vw, 6rem);
--font-sans: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
--fs-xs: clamp(0.82rem, 0.75rem + .2vw, .95rem);
--fs-sm: clamp(.95rem, .9rem + .2vw, 1.05rem);
--fs-md: clamp(1.05rem, 1rem + .3vw, 1.2rem);
--fs-lg: clamp(1.25rem, 1.1rem + .8vw, 1.6rem);
--fs-xl: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
--fs-xxl: clamp(2.3rem, 1.8rem + 3vw, 3.5rem);
}
/* Prefer light/dark by OS setting (no JS) */
@media (prefers-color-scheme: light) {
:root{
--bg: #f8fafc;
--ink: #0f172a;
--ink-muted: #334155;
--panel: 255,255,255;
--shadow-1: 0 10px 30px rgba(2,6,23,.08);
--shadow-2: 0 20px 60px rgba(2,6,23,.10);
}
}
/* 2) Reset / Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
color: var(--ink);
background:
radial-gradient(1200px 800px at 10% -10%, rgba(34,211,238,.25), transparent 50%),
radial-gradient(1200px 800px at 110% 10%, rgba(167,139,250,.25), transparent 50%),
conic-gradient(from 220deg at 60% 120%, #0ea5e9, #7c3aed, #0ea5e9);
background-color: var(--bg);
line-height: 1.6;
}
/* Subtle glass noise overlay */
body::before{
content:"";
position: fixed; inset: 0;
background: radial-gradient(1800px 900px at 40% 10%, rgba(255,255,255,.06), transparent 50%);
pointer-events: none;
mix-blend-mode: screen;
}
/* Motion safety */
@media (prefers-reduced-motion: reduce){
* { animation: none !important; transition: none !important; }
}
/* Typography */
h1,h2,h3 { line-height: 1.2; margin: 0 0 var(--space-3); }
h1 { font-size: var(--fs-xxl); letter-spacing: -.02em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { font-size: var(--fs-md); margin: 0 0 var(--space-3); color: var(--ink-muted); }
/* Links / Buttons */
a { color: var(--brand-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
.btn{
display:inline-flex; align-items:center; justify-content:center;
gap:.6rem; padding:.8rem 1.1rem; font-weight:600; border-radius: calc(var(--radius-sm) + 4px);
border:1px solid rgba(var(--panel),.25);
background: rgba(var(--panel), .15);
color: var(--ink); text-decoration:none; backdrop-filter: blur(6px);
box-shadow: var(--shadow-1);
transition: transform .12s ease;
}
.btn:hover{ transform: translateY(-1px); text-decoration:none; }
.btn--primary{
background: linear-gradient(135deg, var(--brand), var(--accent));
color:#0b1220; border: none;
}
.btn--ghost{
background: transparent; color: var(--ink); border:1px solid rgba(var(--panel), .35);
}
/* Layout helpers */
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.section { padding: var(--space-7) 0; }
.section-header { text-align: center; margin-bottom: var(--space-6); }
/* Cards */
.card{
background: rgba(var(--panel), .18);
border: 1px solid rgba(var(--panel), .35);
border-radius: var(--radius);
padding: var(--space-5);
backdrop-filter: blur(8px);
box-shadow: var(--shadow-1);
transition: transform .12s ease;
}
.card:hover{ transform: translateY(-2px); }
/* Grid */
.grid{ display: grid; gap: var(--space-4); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px){ .grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .grid-3{ grid-template-columns: 1fr; } }
/* Skip link */
.skip-link{
position: absolute; left: -9999px; top: auto;
background: #fff; color: #000; padding:.5rem 1rem; border-radius: 6px; z-index: 1000;
}
.skip-link:focus{ left: 1rem; top: 1rem; }
/* Header */
.site-header{
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(8px);
background: linear-gradient(to bottom, rgba(10,16,30,.75), rgba(10,16,30,.35));
border-bottom: 1px solid rgba(var(--panel), .35);
}
.header-inner{
display: flex; align-items: center; justify-content: space-between;
padding: .9rem 0;
}
.brand{ display:flex; align-items:center; gap:.75rem; color:var(--ink); font-weight:700; letter-spacing:.2px;}
.brand-logo{ width: 28px; height: 28px; }
.brand-name{ font-size: var(--fs-md); }
/* Nav */
.site-nav ul{ display:flex; align-items:center; gap: 1rem; list-style:none; margin:0; padding:0; }
.site-nav a{ padding:.5rem .7rem; border-radius: 8px; }
.site-nav a:hover{ background: rgba(var(--panel), .2); text-decoration:none; }
/* Mobile nav (CSS-only) */
.nav-toggle{ display:none; }
.nav-burger{
display:none; width: 42px; height: 36px; border-radius:10px;
border:1px solid rgba(var(--panel), .35); align-items:center; justify-content:center; cursor:pointer;
background: rgba(var(--panel), .15); backdrop-filter: blur(6px);
}
.nav-burger span{ display:block; width:20px; height:2px; background:var(--ink); margin:3px 0; border-radius:2px; }
@media (max-width: 900px){
.nav-burger{ display:flex; }
.site-nav{ position: absolute; top:100%; right: 1rem; left:1rem; display:none; }
.site-nav ul{
flex-direction: column; align-items: stretch; gap:.5rem; padding: .75rem;
background: rgba(var(--panel), .2); backdrop-filter: blur(10px);
border:1px solid rgba(var(--panel), .35); border-radius: var(--radius);
box-shadow: var(--shadow-2);
}
.nav-toggle:checked ~ .site-nav{ display:block; }
}
/* Hero */
.hero{ position: relative; padding: clamp(4rem, 6vw, 7rem) 0 var(--space-7); overflow:hidden; }
.hero-inner{
display:grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-6); align-items: center;
}
@media (max-width: 900px){ .hero-inner{ grid-template-columns: 1fr; } }
.hero-copy h1{ font-size: var(--fs-xxl); }
.hero-copy p{ max-width: 58ch; }
.cta-group{ display:flex; gap:.75rem; margin-top: var(--space-3); flex-wrap: wrap; }
.trust-badges{ display:flex; gap:1rem; list-style:none; padding:0; margin: var(--space-3) 0 0; color: var(--ink-muted); }
.hero-visual{
min-height: 280px; border-radius: calc(var(--radius) + 8px);
background:
radial-gradient(480px 280px at 30% 20%, rgba(34,211,238,.4), transparent 40%),
radial-gradient(500px 260px at 70% 60%, rgba(167,139,250,.45), transparent 45%),
linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
border: 1px solid rgba(var(--panel), .35);
box-shadow: var(--shadow-2);
backdrop-filter: blur(16px) saturate(120%);
}
.hero-wave{
position:absolute; left:0; right:0; bottom:-1px; height: 120px;
background:
radial-gradient(60px 60px at 20% 30%, rgba(255,255,255,.15), transparent 60%),
radial-gradient(80px 80px at 70% 60%, rgba(255,255,255,.1), transparent 60%),
linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,0));
}
/* Features */
.feature .icon{
width: 48px; height: 48px; display:grid; place-items:center; border-radius: 12px;
color:#0b1220; background: linear-gradient(135deg, var(--brand), var(--accent));
box-shadow: 0 8px 20px rgba(34,211,238,.25);
margin-bottom: .75rem;
}
/* Showcase Cards */
.card--media{ padding:0; overflow:hidden; }
.card-media{
min-height: 160px; background:
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.01));
}
.card-body{ padding: var(--space-5); }
/* Quotes */
.quote blockquote{ font-size: var(--fs-lg); color: var(--ink); margin:0 0 .5rem; }
.quote figcaption{ font-size: var(--fs-sm); color: var(--ink-muted); }
/* Pricing */
.price{ text-align:center; }
.price-tag{ font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); font-weight:800; color: var(--ink); }
.price-tag span{ font-size: var(--fs-sm); color: var(--ink-muted); }
.price--highlight{
outline: 2px solid transparent;
background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
box-shadow: 0 20px 60px rgba(167,139,250,.25), var(--shadow-1);
}
/* FAQ */
.faq-list details summary{
cursor:pointer; list-style:none; font-weight:700; font-size: var(--fs-md);
}
.faq-list details summary::-webkit-details-marker{ display:none; }
.faq-list details p{ margin-top: .5rem; }
/* Contact */
.contact-form .form-grid{
display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
}
.contact-form .form-grid .full{ grid-column: 1 / -1; }
.contact-form label span{ display:block; font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom:.4rem; }
input, textarea{
width:100%; padding:.85rem 1rem; border-radius: 12px; border:1px solid rgba(var(--panel), .35);
background: rgba(var(--panel), .15); color: var(--ink); font-size: var(--fs-md);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
input:focus, textarea:focus{ outline: 2px solid var(--brand-strong); outline-offset: 2px; }
input::placeholder, textarea::placeholder{ color: rgba(203,213,225,.7); }
/* Footer */
.site-footer{
padding: var(--space-5) 0; border-top: 1px solid rgba(var(--panel), .35);
background: linear-gradient(to top, rgba(10,16,30,.5), transparent);
}
.footer-inner{
display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.site-footer nav a{ color: var(--ink-muted); margin-right: 1rem; }
.site-footer nav a:hover{ color: var(--ink); }
/* Utility */
.link{ color: var(--brand-strong); font-weight:600; }
.link:hover{ text-decoration: underline; }
/* -----------------------------------------
Watermark layer (Option 1 — repeating tile)
Using a data URI (no external asset needed)
----------------------------------------- */
/* Default: dark theme watermark (light text) */
body.watermarked{
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(1200px 800px at 10% -10%, rgba(34,211,238,.25), transparent 50%),
radial-gradient(1200px 800px at 110% 10%, rgba(167,139,250,.25), transparent 50%),
conic-gradient(from 220deg at 60% 120%, #0ea5e9, #7c3aed, #0ea5e9);
background-size:
320px 320px,
auto,
auto,
auto;
background-repeat:
repeat,
no-repeat,
no-repeat,
no-repeat;
background-color: var(--bg);
}
/* Light mode: use darker watermark text for contrast */
@media (prefers-color-scheme: light){
body.watermarked{
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(1200px 800px at 10% -10%, rgba(34,211,238,.25), transparent 50%),
radial-gradient(1200px 800px at 110% 10%, rgba(167,139,250,.25), transparent 50%),
conic-gradient(from 220deg at 60% 120%, #0ea5e9, #7c3aed, #0ea5e9);
}
}
/* Print: soft diagonal watermark on PDFs/printouts */
@media print{
body{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body::after{
content: "TERO‑TECH";
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
font-size: 96pt;
font-weight: 800;
color: #000;
opacity: 0.06;
z-index: 0;
pointer-events: none;
white-space: nowrap;
}
}