/* SITE ETHOS: retro but polished, editorial, fun, edgy, and always very legible. Serif + mono type, paper/collage textures, bright palette, big contrast. */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --black:#000;--white:#fff; /* the 28cylinders.com brand palette, kept as-is... */ --mint:#5EEAD4;--sky:#7DD3FC;--lavender:#A78BFA; --teal:#0D9488;--cobalt:#1D4ED8;--purple:#5B21B6; --pink:#F43F5E;--orange:#F97316;--yellow:#FDE047; /* ...expanded with bright complementary hues, for the extra colors this site needs (10 planets + 12 houses + categories) that the brand's original 9-color services grid never had to cover. Same energy — saturated, eclectic, fun — not muted or antique. */ --coral:#FF6B6B; /* complements mint/teal */ --amber:#FBBF24; /* complements cobalt/purple */ --fuchsia:#EC4899; /* complements yellow/lime */ --lime:#A3E635; /* complements purple/lavender */ --violet:#8B5CF6; /* sits between lavender and purple */ --nav-h:60px; /* ink tokens for text on WHITE cards — solid colors, not opacity fades, so contrast is fixed and predictable (all verified ≥4.5:1 on white, per WCAG AA for normal text). Shared by every page with white cards. */ --ink-1:#1a1a1a; --ink-2:#454545; --ink-3:#666; } html{scroll-behavior:smooth} body{font-family:'Space Mono',monospace;background:var(--black);color:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased} .serif{font-family:'Playfair Display',serif} .hand{font-family:'Short Stack',cursive} /* ── NAV (same mechanics as main site, relabeled) ── */ nav{ position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:500; display:flex;align-items:center;justify-content:space-between;padding:0 40px; background:rgba(0,0,0,0);border-bottom:1px solid transparent; transition:background .3s,border-color .3s; } nav.solid{background:rgba(0,0,0,.96);backdrop-filter:blur(16px);border-bottom-color:rgba(255,255,255,.08)} .nav-logo{font-family:'Playfair Display',serif;font-style:italic;font-size:18px;color:var(--white);text-decoration:none;letter-spacing:.01em} .nav-links{display:flex;gap:26px;list-style:none;align-items:center} .nav-links a{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--white);text-decoration:none;opacity:.55;transition:opacity .2s} .nav-links a:hover{opacity:1} .nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px} .nav-hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px} .nav-drawer{display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:rgba(0,0,0,.97);z-index:499;flex-direction:column;align-items:center;justify-content:center;gap:30px} .nav-drawer.open{display:flex} .nav-drawer a{font-family:'Playfair Display',serif;font-size:26px;color:var(--white);text-decoration:none;opacity:.8} .page-offset{padding-top:var(--nav-h)} /* ── HERO / COLLAGE ── */ .hero{position:relative;min-height:92vh;background:var(--black);overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)} .hero-title-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;pointer-events:none;text-align:center} .hero-title{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(46px,8vw,108px);line-height:.95;color:var(--white)} .hero-title em{font-style:italic;font-weight:400} .hero-sub{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--white);opacity:.7;margin-top:18px} /* scattered placeholder "ephemera" — swap these for real photographed assets later */ .scrap{position:absolute;border:1.5px dashed rgba(255,255,255,.35);background:rgba(255,255,255,.03);color:rgba(255,255,255,.4); display:flex;align-items:center;justify-content:center;text-align:center;padding:10px; font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;z-index:2} /* real photographed ephemera — replaces a .scrap placeholder one at a time as actual photos get added; just a drop shadow, no dashed border/label */ .scrap-photo{position:absolute;z-index:2;width:auto;height:auto;display:block;transition:scale .3s cubic-bezier(.34,1.56,.64,1),filter .3s;will-change:transform; filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))} .scrap-photo:hover{scale:1.14;filter:drop-shadow(0 18px 26px rgba(0,0,0,.6))} .scrap-label{position:absolute;font-family:'Short Stack',cursive;font-size:22px;color:var(--white);opacity:.85;z-index:6;pointer-events:none} /* ── FILTER BAR ── */ .filters{max-width:1100px;margin:0 auto;padding:56px 32px 0;display:flex;gap:10px;flex-wrap:wrap} .filter-pill{font-family:'Space Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:var(--white); cursor:pointer;opacity:.75;transition:opacity .2s,background .2s,color .2s} .filter-pill:hover{opacity:1} .filter-pill.active{opacity:1;background:var(--white);color:var(--black)} /* ── ARCHIVE GRID ── */ .archive{max-width:1100px;margin:0 auto;padding:32px 32px 120px} .archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:20px} .card{ background:var(--white);color:#1a1a1a;border-radius:3px;padding:0;overflow:hidden; position:relative;box-shadow:0 10px 24px rgba(0,0,0,.35); transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease; text-decoration:none;display:flex;flex-direction:column;cursor:pointer; } .card:nth-child(3n+1){transform:rotate(-1.1deg)} .card:nth-child(3n+2){transform:rotate(.8deg)} .card:nth-child(3n+3){transform:rotate(-.5deg)} .card:hover{transform:rotate(0deg) scale(1.045) translateY(-6px);box-shadow:0 20px 36px rgba(0,0,0,.5);z-index:3} .card-visual{height:190px;display:flex;align-items:center;justify-content:center;border-bottom:3px solid #111;padding:16px} .card-visual svg{height:100%;width:auto;max-width:100%} .card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} .card-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px} .card-tag{display:inline-block;font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:4px 10px;border-radius:999px} .card-kind{font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#444} .card-title{font-family:'Playfair Display',serif;font-size:24px;font-weight:600;line-height:1.15;margin-bottom:12px;color:#111} .card-excerpt{font-family:'Space Mono',monospace;font-size:13px;line-height:1.65;color:#2a2a2a;margin-bottom:20px;flex:1} .card-cta{display:block;text-align:center;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; background:#111;color:#fff;padding:12px 14px;border-radius:999px;transition:background .2s,transform .2s} .card:hover .card-cta{background:var(--c-hover,#F43F5E);transform:scale(1.03)} /* honest-labeling for posts that don't have real copy yet — visible on the archive card itself, not just after clicking through. The excerpt text itself stays fully readable — the "Coming Soon" tag already does the job of signaling status, no need to also fade the teaser copy. */ .coming-soon-tag{position:absolute;top:14px;right:14px;background:var(--black);color:var(--white); font-family:'Space Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:4px 9px;border-radius:999px;z-index:2} .empty-state{font-family:'Space Mono',monospace;font-size:13px;opacity:.55;padding:40px 0;text-align:center} /* ── SYMBOL BADGE + HIGHLIGHT CARDS — shared by the calculator's "big six" and the homepage's "right now" transit snapshot: a small filled circle in a planet's color holding its real glyph (never bare colored text), a serif headline for the sign, mono data for the degree. One card language, used everywhere a planet gets featured. ── */ .symbol-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; width:28px;height:28px;border-radius:50%;font-size:16px;font-weight:700;line-height:1} .symbol-badge.small{width:22px;height:22px;font-size:12px} .highlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .hl-card{background:var(--white);color:var(--ink-1);border-radius:2px;padding:18px 14px;text-align:center;box-shadow:0 8px 18px rgba(0,0,0,.35); transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease} .hl-card:hover{transform:scale(1.06) translateY(-5px);box-shadow:0 18px 30px rgba(0,0,0,.5);z-index:3} .hl-label{display:flex;align-items:center;justify-content:center;gap:7px;font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px} .hl-sign{font-family:'Playfair Display',serif;font-size:24px;font-weight:600;margin-bottom:4px;color:var(--ink-1)} .hl-deg{font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-2)} @media(max-width:700px){ .highlight-grid{grid-template-columns:repeat(2,1fr)} } /* ── SHARED TOOL/CALCULATOR CHROME — birth-data form + intro header, used by every "put your birth info in, get something out" page (chart.html was the only one until humor.html made it the second; two consumers with byte-identical markup is the line, same call chrome.js already made for nav/footer — extracted here instead of copy-pasted a second time). Page-specific results (the chart's placements/houses grids, the humor page's score meter, etc.) still live in each page's own inline