/* ===================================================================== THEME LAYOUTS ยท each theme rebuilds the PAGE STRUCTURE, not just colour --------------------------------------------------------------------- The markup never changes โ€” only these rules, keyed off the attribute the theme engine sets. ๐ŸŒธ sakura ยท Soft Grid โ€” centred pills, 2-col cards (original) ๐ŸŒƒ neon ยท Terminal โ€” fixed LEFT SIDEBAR nav, dense rows ๐Ÿ›ผ y2k ยท Dock โ€” floating BOTTOM dock, tilted staggered cards ๐ŸŒŒ cosmos ยท Zen Column โ€” one narrow centred column, huge serif ๐ŸŒฟ ghibli ยท Masonry โ€” organic multi-column flow โ—ผ brutal ยท Magazine โ€” 3-col editorial grid, hard rules, huge type ===================================================================== */ /* ---------- shared: let fonts/serifs from the engine take effect ---------- */ body { font-family: var(--font, 'Fredoka', system-ui, sans-serif); } h1, h2, .sec, .hero h1, .jr-h { font-family: var(--display, inherit); letter-spacing: var(--ls, 0); } .nav button, .pill, .eyebrow { text-transform: var(--tt, none); } /* ===================================================================== ๐ŸŒƒ NEON ยท TERMINAL โ€” vertical sidebar navigation ===================================================================== */ @media (min-width: 900px) { [data-theme="neon"] .topbar { position: fixed; inset: 0 auto 0 0; width: 212px; height: 100vh; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 16px; border-right: 1px solid var(--card-brd); border-bottom: none; background: linear-gradient(180deg, rgba(5,10,18,.96), rgba(10,18,32,.92)); } [data-theme="neon"] .topbar .spacer { flex: 0; } [data-theme="neon"] .topbar .brand { flex-direction: column; align-items: flex-start; } [data-theme="neon"] .wrap { margin-left: 212px; max-width: none; padding-left: 34px; padding-right: 34px; } [data-theme="neon"] .nav { position: fixed; left: 0; top: 132px; width: 212px; flex-direction: column; gap: 3px; padding: 0 12px; overflow: visible; z-index: 41; } [data-theme="neon"] .nav button { width: 100%; text-align: left; border-radius: 4px; border-left: 2px solid transparent; background: transparent; border-top: none; border-right: none; border-bottom: none; } [data-theme="neon"] .nav button.active { background: rgba(0,255,229,.10); border-left-color: var(--purple); color: var(--purple); box-shadow: none; } [data-theme="neon"] .nav button::before { content: "> "; opacity: .5; } } [data-theme="neon"] .card { border-left: 2px solid var(--purple); } [data-theme="neon"] .grid.g2, [data-theme="neon"] .grid.g3 { grid-template-columns: 1fr; } [data-theme="neon"] .hero { text-align: left; } [data-theme="neon"] .hero .count, [data-theme="neon"] .hero-cta { justify-content: flex-start; } [data-theme="neon"] .sec::before { content: "// "; opacity: .45; } /* ===================================================================== ๐Ÿ›ผ Y2K ยท DOCK โ€” floating bottom navigation, tilted cards ===================================================================== */ [data-theme="y2k"] .nav { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 45; width: max-content; max-width: 94vw; padding: 8px; border-radius: 999px; background: rgba(40,6,70,.80); backdrop-filter: blur(18px); border: 1px solid var(--card-brd); box-shadow: 0 18px 50px rgba(255,43,209,.35); } [data-theme="y2k"] .nav button { border: none; background: transparent; } [data-theme="y2k"] .wrap { padding-bottom: 96px; } [data-theme="y2k"] .grid.g2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } [data-theme="y2k"] .grid > .card:nth-child(odd) { transform: rotate(-1.4deg); } [data-theme="y2k"] .grid > .card:nth-child(even) { transform: rotate(1.4deg) translateY(16px); } [data-theme="y2k"] .grid > .card:hover { transform: rotate(0) translateY(-4px) scale(1.02); } [data-theme="y2k"] .card { border-width: 2px; } [data-theme="y2k"] .hero h1 { text-shadow: 3px 3px 0 rgba(0,229,255,.55), -3px -3px 0 rgba(255,43,209,.45); } /* ===================================================================== ๐ŸŒŒ COSMOS ยท ZEN COLUMN โ€” one narrow column, editorial serif, airy ===================================================================== */ [data-theme="cosmos"] .wrap { max-width: 760px; } [data-theme="cosmos"] .grid.g2, [data-theme="cosmos"] .grid.g3 { grid-template-columns: 1fr; gap: 30px; } [data-theme="cosmos"] .card { padding: 34px 32px; text-align: center; } [data-theme="cosmos"] .sec { justify-content: center; font-size: 1.7rem; font-weight: 400; } [data-theme="cosmos"] .sub { text-align: center; font-style: italic; } [data-theme="cosmos"] .hero h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); font-weight: 400; } [data-theme="cosmos"] .nav { justify-content: center; } [data-theme="cosmos"] .nav button { background: transparent; border: none; letter-spacing: .1em; font-size: .84rem; } [data-theme="cosmos"] .nav button.active { background: transparent; color: var(--purple); border-bottom: 1px solid var(--purple); border-radius: 0; box-shadow: none; } [data-theme="cosmos"] .wstat, [data-theme="cosmos"] .note { text-align: center; } /* ===================================================================== ๐ŸŒฟ GHIBLI ยท MASONRY โ€” organic, uneven, flowing columns ===================================================================== */ @media (min-width: 760px) { [data-theme="ghibli"] .grid.g2, [data-theme="ghibli"] .grid.g3 { display: block; columns: 2; column-gap: 20px; } [data-theme="ghibli"] .grid > .card { break-inside: avoid; margin-bottom: 20px; display: inline-block; width: 100%; } [data-theme="ghibli"] .grid > .card:nth-child(3n) { margin-top: 26px; } } [data-theme="ghibli"] .card { border-radius: 30px 26px 32px 24px; } [data-theme="ghibli"] .nav button { border-radius: 999px; } [data-theme="ghibli"] .sec { font-size: 1.6rem; } [data-theme="ghibli"] .hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); } /* ===================================================================== โ—ผ BRUTAL ยท MAGAZINE โ€” 3-col editorial grid, hard rules, giant type ===================================================================== */ [data-theme="brutal"] .wrap { max-width: 1240px; } [data-theme="brutal"] .topbar { border-bottom: 3px solid var(--ink); background: var(--bg); backdrop-filter: none; padding-top: 10px; padding-bottom: 10px; } [data-theme="brutal"] .nav { gap: 0; border-bottom: 3px solid var(--ink); padding-bottom: 0; } [data-theme="brutal"] .nav button { border: none; border-right: 2px solid var(--ink); border-radius: 0; background: transparent; font-weight: 700; padding: 12px 18px; } [data-theme="brutal"] .nav button.active { background: var(--ink); color: var(--bg); box-shadow: none; } @media (min-width: 1000px) { [data-theme="brutal"] .grid.g2 { grid-template-columns: repeat(3, 1fr); } } [data-theme="brutal"] .card { border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); backdrop-filter: none; } [data-theme="brutal"] .hero { text-align: left; border-bottom: 3px solid var(--ink); } [data-theme="brutal"] .hero h1 { font-size: clamp(2.6rem, 11vw, 7rem); font-weight: 900; line-height: .88; text-transform: uppercase; letter-spacing: -.03em; } [data-theme="brutal"] .hero .count, [data-theme="brutal"] .hero-cta { justify-content: flex-start; } [data-theme="brutal"] .hero .glow, [data-theme="brutal"] .blob, [data-theme="brutal"] .liq { display: none; } [data-theme="brutal"] .sec { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; } [data-theme="brutal"] .btn { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-weight: 700; } [data-theme="brutal"] .pill { border: 2px solid var(--ink); background: transparent; color: var(--ink); } /* ===================================================================== PUBLIC PORTFOLIO โ€” the page lives in a sealed Shadow DOM, so its inner layout can't be restyled. We reframe the whole canvas instead: width, framing, and page-level chrome still change per theme. ===================================================================== */ #dc-root { transition: max-width .7s cubic-bezier(.2,1,.3,1), margin .7s, border .4s, box-shadow .4s; } [data-theme="cosmos"] #dc-root { max-width: 1000px; margin: 0 auto; } [data-theme="brutal"] #dc-root { max-width: 1180px; margin: 0 auto; border-left: 3px solid #0a0a0a; border-right: 3px solid #0a0a0a; } [data-theme="y2k"] #dc-root { max-width: 1160px; margin: 14px auto; border: 2px solid rgba(0,229,255,.6); border-radius: 20px; overflow: hidden; box-shadow: 0 0 60px rgba(255,43,209,.35); } [data-theme="neon"] #dc-root { border-left: 2px solid rgba(0,255,229,.55); } [data-theme="ghibli"] #dc-root { max-width: 1120px; margin: 0 auto; } /* ===================================================================== Motion primitives used by assets/motion.js (GSAP / SplitType) ===================================================================== */ .sp-char { display: inline-block; will-change: transform, opacity; } .gs-reveal { will-change: transform, opacity; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } @media (prefers-reduced-motion: reduce) { [data-theme] .grid > .card { transform: none !important; } #dc-root { transition: none; } }