SIQ PLATFORM — Shared Styles
Design language: Editorial serif · Gaussian mesh · Monograph-inspired
═══════════════════════════════════════════════════════════ */
:root {
--serif: 'Cormorant Garamond', Georgia, serif;
--sans:  'DM Sans', system-ui, sans-serif;
--ink:     #0d0d0d;
--ink-60:  rgba(13,13,13,.60);
--ink-35:  rgba(13,13,13,.35);
--ink-15:  rgba(13,13,13,.15);
--white:   #ffffff;
--v:    #8B5CF6; --vd: #7C3AED; --plum: #6D28D9;
--rose: #EC4899; --gold: #F59E0B;
--green: #10b981; --greend: #059669; --f43f: #f43f5e;
--bg: transparent; --card: rgba(255,255,255,.55);
--border: rgba(13,13,13,.14);
--sh: rgba(0,0,0,.07);
--mid: rgba(13,13,13,.60); --light: rgba(13,13,13,.35);
--dark: #0d0d0d; --tint: rgba(255,255,255,.45);
--tint2: rgba(255,255,255,.35); --lavender: rgba(255,255,255,.5);
}
html { scroll-behavior: smooth; }
body {
font-family: var(--sans);
font-weight: 400;
color: var(--ink);
min-height: 100vh;
background-color: #f5dde8;
background-image:
radial-gradient(ellipse 80% 55% at 5%  0%,   #f9a8d4cc 0%, transparent 55%),
radial-gradient(ellipse 55% 65% at 92% 8%,   #c084fcaa 0%, transparent 50%),
radial-gradient(ellipse 65% 45% at 50% 50%,  #818cf844 0%, transparent 60%),
radial-gradient(ellipse 45% 55% at 82% 85%,  #fda4af77 0%, transparent 55%),
radial-gradient(ellipse 38% 38% at 18% 92%,  #e879f955 0%, transparent 50%);
background-attachment: fixed;
}
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
background-size: 180px 180px;
pointer-events: none;
z-index: -1;
}
body > * { position: relative; z-index: 1; }
h1, h2, h3, h4 {
font-family: var(--serif);
font-weight: 700;
line-height: 1.05;
letter-spacing: -.01em;
color: var(--ink);
}
h1 { font-size: clamp(3rem, 8vw, 6.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.8rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.9rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }
p  { font-family: var(--sans); line-height: 1.75; color: var(--ink-60); }
.container        { max-width: 1100px; margin: 0 auto; padding: 0 48px; }
.container--wide  { max-width: 1300px; margin: 0 auto; padding: 0 48px; }
.container--narrow{ max-width: 760px;  margin: 0 auto; padding: 0 48px; }
@media(max-width:680px){ .container,.container--wide,.container--narrow{ padding:0 24px; } }
.topbar {
position: sticky; top: 0; z-index: 200;
display: flex; align-items: center; justify-content: space-between;
padding: 20px 48px;
border-bottom: 1px solid var(--border);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
background: rgba(255,255,255,.3);
}
.topbar-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.topbar-logo {
width:36px; height:36px; border-radius:6px;
background: var(--ink);
display:flex; align-items:center; justify-content:center;
color:var(--white); font-size:1rem;
font-family:var(--serif); font-weight:700;
}
.topbar-brand strong { font-family:var(--serif); font-size:1.1rem; font-weight:700; letter-spacing:-.01em; }
.topbar-nav { display:flex; align-items:center; }
.topbar-nav a {
padding:8px 20px; text-decoration:none;
font-size:.85rem; font-weight:500; color:var(--ink-60);
border-left:1px solid var(--border); transition:color .2s;
}
.topbar-nav a:last-child { border-right:1px solid var(--border); }
.topbar-nav a:hover, .topbar-nav a.active { color:var(--ink); }
@media(max-width:680px){ .topbar{ padding:16px 24px; } .topbar-nav{ display:none; } }
.btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:.9rem; font-weight:500; text-decoration:none; cursor:pointer; border:none; transition:all .22s; letter-spacing:.02em; }
.btn-primary {
background:var(--ink); color:var(--white) !important;
padding:14px 32px; font-size:.9rem; font-weight:500;
}
.btn-primary:hover { opacity:.82; }
.btn-arrow {
background:var(--ink); color:var(--white);
padding:14px 28px; font-size:.88rem;
}
.btn-arrow::after { content:'→'; margin-left:4px; transition:transform .2s; }
.btn-arrow:hover::after { transform:translateX(4px); }
.btn-ghost {
background:transparent; color:var(--ink);
padding:10px 0; border-bottom:1px solid var(--ink);
font-size:.88rem;
}
.btn-ghost::after { content:'→'; transition:transform .2s; }
.btn-ghost:hover::after { transform:translateX(4px); }
.btn-cta {
display:flex; align-items:center; justify-content:space-between;
width:100%; background:var(--ink); color:var(--white);
padding:18px 28px; font-family:var(--sans); font-size:1rem; font-weight:500;
text-decoration:none; cursor:pointer; border:none; transition:opacity .2s;
}
.btn-cta::after { content:'→'; font-size:1.1rem; }
.btn-cta:hover { opacity:.82; }
.btn-white {
display:inline-flex; align-items:center; gap:10px;
background:var(--white); color:var(--ink);
padding:14px 28px; font-size:.88rem; font-weight:500;
text-decoration:none; transition:opacity .2s;
}
.btn-white::after { content:'→'; }
.btn-white:hover { opacity:.85; }
.btn-secondary {
background:transparent; color:var(--ink); border:1px solid var(--border);
padding:12px 24px; font-size:.88rem;
}
.btn-secondary:hover { background:rgba(0,0,0,.05); }
.card {
background:rgba(255,255,255,.52);
backdrop-filter:blur(20px) saturate(160%);
-webkit-backdrop-filter:blur(20px) saturate(160%);
border:1px solid rgba(255,255,255,.8);
position:relative;
}
.badge {
display:inline-flex; align-items:center; gap:5px;
padding:4px 12px; font-size:.7rem; font-weight:600;
text-transform:uppercase; letter-spacing:.1em;
color:var(--ink-60); border:1px solid var(--border);
font-family:var(--sans);
}
.badge-violet { border-color:rgba(139,92,246,.3); color:#5b21b6; background:rgba(139,92,246,.08); }
.badge-gold   { border-color:rgba(245,158,11,.3);  color:#78350f; background:rgba(245,158,11,.08); }
.badge-green  { border-color:rgba(16,185,129,.3);  color:#064e3b; background:rgba(16,185,129,.08); }
.badge-rose   { border-color:rgba(236,72,153,.3);  color:#831843; background:rgba(236,72,153,.08); }
.divider { width:100%; height:1px; background:var(--border); margin:48px 0; }
.rule    { width:100%; height:1px; background:var(--border); }
.section { padding:80px 0; border-top:1px solid var(--border); }
.section-label { font-family:var(--sans); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-35); margin-bottom:18px; display:block; }
.section-title { font-family:var(--serif); font-size:clamp(1.8rem,4vw,3rem); margin-bottom:24px; text-align:left; }
.editorial-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--border); }
.editorial-col { padding:48px; border-right:1px solid var(--border); }
.editorial-col:last-child { border-right:none; }
@media(max-width:768px){ .editorial-grid{grid-template-columns:1fr;} .editorial-col{padding:32px 24px; border-right:none; border-bottom:1px solid var(--border);} }
.grad      { background:linear-gradient(135deg,#5b21b6,#be185d); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grad-rose { background:linear-gradient(135deg,#7c3aed,#be185d); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grad-gold { background:linear-gradient(135deg,#92400e,#b45309); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grad-green{ background:linear-gradient(135deg,#065f46,#059669); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cta-band {
padding:80px 48px; background:var(--ink); color:var(--white);
position:relative; overflow:hidden;
}
.cta-band::before {
content:''; position:absolute; inset:0;
background:radial-gradient(ellipse 60% 80% at 20% 50%,rgba(192,132,252,.2) 0%,transparent 60%),
radial-gradient(ellipse 50% 60% at 80% 50%,rgba(244,114,182,.15) 0%,transparent 60%);
pointer-events:none;
}
.cta-band h2 { color:var(--white); margin-bottom:16px; }
.cta-band p  { color:rgba(255,255,255,.65); margin-bottom:36px; max-width:480px; }
footer {
border-top:1px solid var(--border);
padding:36px 48px;
display:flex; align-items:center; justify-content:space-between;
font-size:.82rem; color:var(--ink-60); gap:20px; flex-wrap:wrap;
}
footer a { color:var(--ink); text-decoration:none; }
footer a:hover { opacity:.6; }
@media(max-width:680px){ footer{ padding:28px 24px; flex-direction:column; align-items:flex-start; } }
.info-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); margin-top:32px; }
.info-cell { padding:24px; border-right:1px solid var(--border); }
.info-cell:last-child { border-right:none; }
.info-cell .ic { font-size:1.2rem; margin-bottom:8px; display:block; color:var(--ink-60); }
.info-cell strong { display:block; font-family:var(--serif); font-size:1.05rem; color:var(--ink); margin-bottom:3px; }
.info-cell span   { font-size:.78rem; color:var(--ink-35); }
@media(max-width:600px){ .info-grid{ grid-template-columns:1fr 1fr; } }
.landing-links { margin-top:60px; border-top:1px solid var(--border); padding-top:32px; }
.landing-links p { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-35); margin-bottom:14px; }
.landing-pills { display:flex; gap:0; flex-wrap:wrap; border:1px solid var(--border); width:fit-content; }
.landing-pills a { padding:10px 20px; text-decoration:none; font-size:.83rem; font-weight:500; color:var(--ink-60); border-right:1px solid var(--border); transition:all .2s; display:flex; align-items:center; gap:6px; }
.landing-pills a:last-child { border-right:none; }
.landing-pills a:hover { background:var(--ink); color:var(--white); }
.modal-overlay { display:none; position:fixed; inset:0; z-index:1000; background:rgba(13,13,13,.55); backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:24px; }
.modal-overlay.open { display:flex; }
.modal { background:var(--white); padding:48px 44px; max-width:420px; width:100%; position:relative; animation:fadeUp .3s ease; }
.modal .m-icon { font-size:1.8rem; margin-bottom:16px; display:block; }
.modal h3 { font-family:var(--serif); font-size:2rem; margin-bottom:12px; }
.modal p  { color:var(--ink-60); line-height:1.7; margin-bottom:28px; }
.modal-close { position:absolute; top:20px; right:24px; background:none; border:none; font-size:1.1rem; cursor:pointer; color:var(--ink-35); }
.hero { padding:100px 0 80px; }
.hero-sub { font-size:1.05rem; color:var(--ink-60); max-width:420px; line-height:1.75; margin-top:24px; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; margin-top:36px; }
@keyframes fadeUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulse    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes pulseGlow{ 0%,100%{opacity:1} 50%{opacity:.82} }
.hidden    { display:none !important; }
.text-mid  { color:var(--ink-60); }
.text-light{ color:var(--ink-35); }
.w100 { width:100%; }
.site-title-link { text-decoration:none; }
a, button, [onclick], .hero-cta-btn, .quiz-btn, .course-cell, .nav-list a, .btn {
position: relative;
z-index: 2;
}
.hero-ctas, .quiz-btns, .nav-list, .foundation-strip a, .about-strip a {
position: relative;
z-index: 2;
}
@media (max-width: 680px) {
.hero-cta-btn, .quiz-btn, .nav-list a { min-height: 48px; }
}