/* ========================================================================== NO EXPECTATIONS — Core Theme Place as /styles.css and link from every page . Typography loaded via @import for speed. Replace with local @font-face if needed. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500;700&display=swap'); /* === Root tokens ========================================================= */ :root{ /* Palette */ --abyss:#050b14; /* deep ocean */ --char:#1a1a1a; /* charred bone */ --bone:#f1efe8; /* aged ivory */ --gold:#b58e52; /* oxidized gold */ --pulse:#a31d1d; /* arterial crimson */ --mist:rgba(241,239,232,.08); /* fog overlay */ /* Type */ --h-serif:'Cinzel', 'Cormorant Garamond', serif; --body-sans:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Rhythm */ --maxw:1120px; --gutter:28px; --lh-tight:1.25; --lh-body:1.55; --radius:18px; --shadow:0 8px 40px rgba(0,0,0,.45); /* Motion */ --t:180ms cubic-bezier(.2,.6,.2,1); } /* === Reset =============================================================== */ *, *::before, *::after{box-sizing:border-box} html,body{ height:100%; background:var(--abyss); color:var(--bone); margin:0; padding:0; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video,canvas{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit} /* === Typography ========================================================== */ body{font-family:var(--body-sans); font-weight:400; line-height:var(--lh-body); letter-spacing:.01em} h1,h2,h3,h4{ font-family:var(--h-serif); font-weight:700; line-height:var(--lh-tight); margin:0 0 .6em; letter-spacing:.02em; } h1{font-size:clamp(40px,6vw,72px)} h2{font-size:clamp(28px,4.2vw,44px)} h3{font-size:clamp(22px,3vw,28px)} p{margin:.9em 0} /* Quote blocks feel carved, not soft */ blockquote{ border-left:3px solid var(--gold); padding:0 0 0 16px; margin:1.2em 0; color:rgba(241,239,232,.85); font-family:var(--body-sans); letter-spacing:.005em; } /* Small caps kicker */ .kicker{ font-family:var(--h-serif); letter-spacing:.12em; text-transform:uppercase; color:rgba(241,239,232,.7); font-size:.82rem; } /* === Layout ============================================================== */ .container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)} .section{padding:84px 0} .section.tight{padding:48px 0} .section.sparse{padding:120px 0} .grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,2vw,var(--gutter)); } /* Fractured gutters to imply stress */ .grid.fracture{ grid-template-columns:1.2fr .8fr repeat(10,1fr); } /* === Navigation ========================================================== */ .nav{ position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(5,11,20,.98), rgba(5,11,20,.85) 70%, transparent); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid rgba(181,142,82,.12); } .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 0} .brand{font-family:var(--h-serif); letter-spacing:.08em; font-size:18px} .nav a{opacity:.9; transition:opacity var(--t)} .nav:hover a{opacity:.45} .nav a:hover{opacity:1} /* === Hero ================================================================ */ .hero{ position:relative; min-height:72vh; display:grid; place-items:center; overflow:hidden; } .hero::before{ /* particulate drift */ content:""; position:absolute; inset:-20% -10%; background: radial-gradient(1200px 600px at 10% 30%, rgba(255,255,255,.04), transparent 55%), radial-gradient(900px 900px at 80% 70%, rgba(181,142,82,.08), transparent 60%), radial-gradient(2px 2px at 30% 60%, rgba(241,239,232,.25), transparent 60%), radial-gradient(2px 2px at 70% 40%, rgba(241,239,232,.2), transparent 60%); filter:blur(.6px); animation:drift 38s linear infinite; pointer-events:none; } @keyframes drift{ 0%{transform:translateY(0)} 100%{transform:translateY(-6%)} } .hero-inner{position:relative; text-align:center; padding:0 var(--gutter)} .hero h1{letter-spacing:.03em} .hero p{max-width:760px; margin:0.6rem auto 0; color:rgba(241,239,232,.78)} /* Ouroboros emblem */ .ouroboros{ width:min(44vw,520px); aspect-ratio:1; margin:28px auto 18px; border-radius:50%; background: radial-gradient(circle at 50% 50%, rgba(181,142,82,.25), transparent 55%), conic-gradient(from 0deg, rgba(241,239,232,.12) 0 20%, transparent 20% 60%, rgba(241,239,232,.08) 60% 100%); box-shadow: inset 0 0 0 1px rgba(181,142,82,.25), 0 25px 100px rgba(0,0,0,.5); position:relative; animation:slowspin 48s linear infinite; } .ouroboros::after{ /* spider silhouette revealed subtly */ content:""; position:absolute; inset:12%; background: radial-gradient(closest-side, transparent 62%, rgba(181,142,82,.18) 63% 64%, transparent 66%), url('netlify/spider.svg') center/40% no-repeat; opacity:.22; mix-blend-mode:screen; } @keyframes slowspin{to{transform:rotate(360deg)}} /* CTA button */ .btn{ display:inline-flex; align-items:center; justify-content:center; min-width:160px; padding:14px 18px; border:1px solid rgba(181,142,82,.55); color:var(--bone); background:linear-gradient(180deg, rgba(26,26,26,.3), rgba(26,26,26,.08)); border-radius:999px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; font-size:.86rem; transition:transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t); } .btn:hover{ transform:translateY(-1px); box-shadow:0 8px 30px rgba(181,142,82,.18); border-color:var(--gold); } .btn.pulse{border-color:var(--pulse); box-shadow:0 0 0 0 rgba(163,29,29,.35); animation:ring 2.6s infinite} @keyframes ring{ 0%{box-shadow:0 0 0 0 rgba(163,29,29,.35)} 70%{box-shadow:0 0 0 16px rgba(163,29,29,0)} 100%{box-shadow:0 0 0 0 rgba(163,29,29,0)} } /* === Cards / Surfaces ==================================================== */ .card{ background:linear-gradient(180deg, rgba(26,26,26,.6), rgba(26,26,26,.35)); border:1px solid rgba(181,142,82,.16); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); } .card:hover{border-color:rgba(181,142,82,.3)} /* Article grid */ .posts{display:grid; gap:24px} @media(min-width:780px){.posts{grid-template-columns:repeat(3,1fr)}} /* === Links as web ======================================================== */ a.web{ position:relative; background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat; transition:background-size var(--t), color var(--t), opacity var(--t); } a.web:hover{background-size:100% 1px; color:var(--gold)} .webgroup:hover a.web:not(:hover){opacity:.45} /* === Dividers / Filaments =============================================== */ .filament{ height:1px; width:100%; background:linear-gradient(90deg, transparent, rgba(181,142,82,.45), transparent); margin:48px 0; } /* === Footer ============================================================== */ .footer{ background:linear-gradient(180deg, rgba(5,11,20,.96), #000 85%); padding:64px 0 28px; border-top:1px solid rgba(181,142,82,.14); color:rgba(241,239,232,.75); } .footer small{display:block; opacity:.7} /* === Forms ============================================================== */ input, textarea{ width:100%; background:rgba(26,26,26,.55); color:var(--bone); border:1px solid rgba(181,142,82,.22); padding:12px 14px; border-radius:12px; outline:none; transition:border-color var(--t), box-shadow var(--t); } input:focus, textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(181,142,82,.12); } label{display:block; margin:10px 0 6px; font-size:.92rem; color:rgba(241,239,232,.8)} /* === Notices ============================================================= */ .note{ padding:14px 16px; border:1px solid rgba(163,29,29,.45); border-radius:12px; background:linear-gradient(180deg, rgba(163,29,29,.15), rgba(163,29,29,.08)); color:#ffdede; } /* === Utility ============================================================= */ .center{text-align:center} .mt-0{margin-top:0} .mb-0{margin-bottom:0} .mt-2{margin-top:12px} .mb-2{margin-bottom:12px} .mt-4{margin-top:24px} .mb-4{margin-bottom:24px} .mt-6{margin-top:36px} .mb-6{margin-bottom:36px} .hide{display:none !important} /* === Media =============================================================== */ @media(max-width:860px){ .nav-inner{padding:14px 0} .section{padding:64px 0} .hero{min-height:64vh} .ouroboros{width:min(62vw,440px)} } /* === Accessibility tweaks =============================================== */ :focus-visible{outline:2px solid var(--gold); outline-offset:2px} ::selection{background:rgba(181,142,82,.35); color:var(--bone)} /* Skip link for keyboard users */ .skip-link{ position:absolute; left:12px; top:12px; z-index:999; background:var(--bone); color:var(--abyss); padding:8px 12px; border-radius:6px; transform:translateY(-120%); transition:transform .18s ease; text-decoration:none; font-weight:700;} .skip-link:focus{transform:translateY(0);} /* Utility: visually hidden but available to screen readers */ .visually-hidden{position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px} /* === Page-specific hooks ================================================= */ .header-invite{color:rgba(241,239,232,.9)} .header-invite .kicker{color:rgba(241,239,232,.6)} .intro-abyss{max-width:740px; margin:0 auto} /* === Netlify 404 basic =================================================== */ .notfound{ min-height:60vh; display:grid; place-items:center; text-align:center; } .notfound h1{font-size:clamp(48px,8vw,92px)} .notfound p{color:rgba(241,239,232,.75)} /* === Responsive Hamburger Navigation (override base) ===================== */ /* desktop defaults */ .menu { display:flex; align-items:center; gap:24px; } .menu a { opacity:.9; transition:opacity var(--t); } .menu a:hover { opacity:1; } .menu-toggle { display:none; } .menu-icon { display:none; } /* hidden on desktop */ /* mobile */ @media (max-width:860px){ .menu-icon{ display:flex; width:32px; height:24px; flex-direction:column; justify-content:space-between; cursor:pointer; z-index:101; } .menu-icon span{ height:3px; width:100%; background:var(--bone); border-radius:2px; -webkit-transition: -webkit-transform .25s ease-out, opacity .25s ease-out; transition: transform .25s ease-out, opacity .25s ease-out; } /* off-canvas menu panel */ .menu{ position:fixed; top:0; right:0; z-index:100; height:100vh; width:70%; max-width:300px; padding:104px 28px 28px; flex-direction:column; align-items:flex-start; gap:22px; background:rgba(5,11,20,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:-2px 0 25px rgba(0,0,0,.6); -webkit-transform:translateX(100%); transform:translateX(100%); -webkit-transition:-webkit-transform .3s cubic-bezier(.2,.6,.2,1); transition:transform .3s cubic-bezier(.2,.6,.2,1); } /* open state via checkbox hack */ .menu-toggle:checked ~ .menu { -webkit-transform:translateX(0); transform:translateX(0); } /* icon → X animation */ .menu-toggle:checked + .menu-icon span:nth-child(1){ -webkit-transform:translateY(10px) rotate(45deg); transform:translateY(10px) rotate(45deg); } .menu-toggle:checked + .menu-icon span:nth-child(2){ opacity:0; -webkit-transition:opacity .15s ease-out; transition:opacity .15s ease-out; } .menu-toggle:checked + .menu-icon span:nth-child(3){ -webkit-transform:translateY(-10px) rotate(-45deg); transform:translateY(-10px) rotate(-45deg); } }