/* ============================================================ styles.css — shared design system for spinfinity.in Type: Bricolage Grotesque (--display, headings) · Nunito (--hand, everything else) Themes: .theme-light · .theme-dusk · .theme-studio · .theme-paper (set on ) Edit tokens below to restyle the whole site from one place. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap'); *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* ---- theme-independent tokens ---- */ :root{ --display:'Bricolage Grotesque',sans-serif; --hand:'Nunito',sans-serif; --nav-h:56px; --radius:11px; --fg:var(--text); /* alias: pages still reference --fg */ /* default palette = dusk (so a page with no theme class still renders) */ --bg:#123f4a; --text:#f0f6f5; --muted:#9fc4c6; --accent1:#ff8a5c; --accent2:#38e6df; --accent3:#b388ff; --accent4:#ffd24a; --card-bg:rgba(255,255,255,0.05); --border:rgba(180,235,240,0.14); --nav-bg:rgba(18,63,74,0.9); /* form-feedback colours (theme-independent) */ --error:#ff6b6b; --success:#6bff6b; } /* ===== THEMES ===== */ /* light · educator + light project pages — brand paper (matches the hub) */ .theme-light{ --fg:var(--text); --bg:#FBFBF8; --text:#232730; --muted:#5d616b; --accent1:#3FA796; --accent1-text:#2E7A6E; --accent2:#502064; --accent3:#FFBD35; --accent4:#8267BE; --card-bg:#ffffff; --border:#e5e3db; --nav-bg:rgba(251,251,248,0.92); } body.theme-light{background:var(--bg)} /* dusk · neutral hub (home, blog, projects) — teal twilight nebula */ .theme-dusk{ --fg:var(--text); /* re-alias per theme: fixes washed-out text (e.g. About name) */ --bg:#123f4a; --text:#f0f6f5; --muted:#9fc4c6; --accent1:#ff8a5c; --accent2:#38e6df; --accent3:#b388ff; --accent4:#ffd24a; --card-bg:rgba(255,255,255,0.05); --border:rgba(180,235,240,0.14); --nav-bg:rgba(18,63,74,0.9); } body.theme-dusk{background:radial-gradient(circle at 22% 14%,rgba(47,212,224,0.15),transparent 55%),radial-gradient(circle at 86% 90%,rgba(160,110,230,0.16),transparent 55%),var(--bg);background-attachment:fixed;} /* studio · dark project pages (art × data × tech) — brand dark Accents are tuned for legibility on dark: teal + lilac lead, deep purple is too dark for text here so --accent2 is a lifted purple. */ .theme-studio{ --fg:var(--text); --bg:#181320; --text:#f2eef8; --muted:#a99fb8; --accent1:#3FA796; --accent1-text:#54c7ba; --accent2:#a582e6; --accent3:#FFBD35; --accent4:#8267BE; --card-bg:rgba(255,255,255,0.05); --border:rgba(255,255,255,0.14); --nav-bg:rgba(24,19,32,0.92); } body.theme-studio{background:var(--bg)} /* ===== BASE ===== */ html{scroll-behavior:smooth} body{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--hand);overflow-x:hidden;padding-top:var(--nav-h)} /* faint paper/star grain — sits BEHIND content (readability fix) */ 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.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");background-size:220px;pointer-events:none;z-index:0;opacity:.35} #spiral-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.5} .vignette{position:fixed;inset:0;background:radial-gradient(ellipse at 65% 50%,transparent 12%,rgba(7,10,18,.55) 70%,rgba(7,10,18,.85) 100%);pointer-events:none;z-index:2} .theme-light .vignette{display:none} .page{position:relative;z-index:10;min-height:calc(100vh - var(--nav-h))} .container{max-width:1000px;margin:0 auto;padding:clamp(2rem,5vw,5rem) clamp(1.2rem,5vw,3.5rem)} /* ---- type roles (override page-specific font choices in one place) ---- */ .logo,.sf-logo,.blog-title,.blog-card-title,.about-name,.proj-name{font-family:var(--display)!important;font-weight:400} .tagline,p.body,.blog-intro,.blog-card-sub,.blog-card-blurb,.manifesto p,.proj-desc{font-family:var(--hand)!important} /* ---- shared components (all token-driven, so they recolour per theme) ---- */ /* standard project-page header — use on every project sub-page (esp. dark/theme-studio):

Project Title

one-line subtitle

Title = the one brand teal for text (--accent1-text); subtitle = muted small caps. */ .proj-header{text-align:center;padding:40px 20px 0;margin-bottom:30px} .proj-header h1{font-family:var(--display);font-weight:normal;font-size:clamp(2em,5vw,3em);color:var(--accent1-text,var(--accent1));margin-bottom:10px;letter-spacing:1px} .proj-header .proj-sub{font-family:var(--hand);color:var(--muted);font-size:.9em;letter-spacing:3px;text-transform:uppercase} .tag{display:inline-block;font-family:var(--hand);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .7rem;border-radius:30px;border:1px solid currentColor;opacity:.85} .section-label{font-family:var(--hand);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.8rem;margin-bottom:2rem} .section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--muted),transparent)} .social-btn{font-family:var(--hand);font-size:1.1rem;font-weight:700;text-decoration:none;padding:.45rem 1.2rem;border-radius:30px;transition:all .2s ease;letter-spacing:.03em} .social-btn.insta{color:var(--accent3);border:2px solid var(--accent3)} .social-btn.insta:hover{background:var(--accent3);color:var(--bg);transform:rotate(-1deg) scale(1.04)} .social-btn.sub{color:var(--accent2);border:2px solid var(--accent2)} .social-btn.sub:hover{background:var(--accent2);color:var(--bg);transform:rotate(1deg) scale(1.04)} .site-footer{position:relative;z-index:10;border-top:1px solid var(--border);padding:2rem clamp(1.2rem,5vw,3.5rem);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem} .footer-note{font-family:var(--hand);font-size:.95rem;color:var(--muted);font-style:italic} @keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes underline-draw{to{transform:rotate(-1.2deg) scaleX(1)}} .anim-0{opacity:0;animation:fade-up .7s ease .1s forwards} .anim-1{opacity:0;animation:fade-up .7s ease .3s forwards} .anim-2{opacity:0;animation:fade-up .7s ease .55s forwards} .anim-3{opacity:0;animation:fade-up .7s ease .75s forwards} .anim-4{opacity:0;animation:fade-up .7s ease .95s forwards} .anim-5{opacity:0;animation:fade-up .7s ease 1.1s forwards} /* ================================================================ theme-paper — the redesigned hub theme (replaces theme-dusk on index/blog/projects/about). Palette: Color Hunt FFBD35-3FA796-8267BE-502064. Leads: deep purple primary, teal secondary. Yellow = accent only, never text. Lilac = supporting accent (pills/borders/decoration), avoid as body text. ================================================================ */ .theme-paper{ --fg:var(--text); --bg:#FBFBF8; --text:#232730; --muted:#5d616b; --accent1:#3FA796; /* teal — secondary (graphics/fills) */ --accent1-text:#2E7A6E; /* teal, darkened to pass AA as text */ --accent2:#502064; /* deep purple — PRIMARY */ --accent3:#FFBD35; /* yellow — ACCENT ONLY, never on text */ --accent4:#8267BE; /* lilac — supporting accent */ --card-bg:#ffffff; --border:#e5e3db; --nav-bg:rgba(251,251,248,0.92); --mk-main:var(--accent2); /* inspin-knot main strokes — deep purple */ --mk-shadow:var(--accent1); /* inspin-knot drop shadow — teal */ } body.theme-paper{background:var(--bg);font-family:var(--hand)} body.theme-paper .vignette{display:none} body.theme-paper .logo{color:var(--accent2);text-shadow:none;font-family:var(--display)!important;font-weight:700} body.theme-paper .logo .inf{color:var(--accent1-text);text-shadow:none} body.theme-paper .logo-area::after{box-shadow:none;height:4px;background:var(--accent3)} body.theme-paper .hoop{color:var(--accent2)} body.theme-paper .math{color:var(--accent1-text)} body.theme-paper ::selection{background:rgba(255,189,53,.35)} body.theme-paper .cta-primary{color:#fff} body.theme-paper .cta-ghost{border-color:var(--border);color:var(--text)} body.theme-paper .cta-ghost:hover{border-color:var(--accent2);color:var(--accent2)} body.theme-paper .social-btn.insta{color:var(--accent1-text);border-color:var(--accent1-text)} body.theme-paper .social-btn.insta:hover{background:var(--accent1);color:#fff} /* inspin-knot mark + i-dot tittles (homepage hero) */ .sf-mark{width:clamp(56px,8vw,84px);flex:0 0 auto;display:block;margin-bottom:.8rem} .logo .it{position:relative;display:inline-block} .logo .tit{position:absolute;left:50%;transform:translateX(-50%);top:-.13em;width:.30em;height:.30em} .logo .tit path{stroke:var(--tit,var(--accent4))} /* knot-tittles: lilac (override per-tittle with --tit on the .it span) */ /* ================================================================ nav bar — one gradient bar, theme-independent (identical on light + dark pages). Edit these tokens to restyle the nav across the whole site from here. ================================================================ */ .sf-nav{ --nav-bg:linear-gradient(90deg,#502064 0%,#2E7A6E 100%); /* plum -> deep teal */ --nav-drop:#502064; /* mobile dropdown fill */ --nav-spin:#FFBD35; /* wordmark "spin" — yellow */ --nav-finity:#c9adf5; /* wordmark "finity" — lifted lilac (legible on plum) */ --nav-link:rgba(255,255,255,.82); --nav-link-on:#ffffff; --border:rgba(255,255,255,0.22); }