/* ========================================================================== Real Weird World — CREATE Shared site shell: header, footer, background, typography, buttons. Colours below were sampled from the live realweirdworld.com home page, not eyeballed. Card colours are the exact flat fills used there. ========================================================================== */ :root { /* Brand — sampled from www.realweirdworld.com */ --ink: #050505; /* header + footer bar */ --ink-soft: #0d0d0d; --blue: #4682b4; --green: #8cc185; --red: #ce2a55; --amber: #d99133; /* fourth card; the home page only needed three */ --text: #ffffff; --text-dim: rgba(255,255,255,.72); --text-faint: rgba(255,255,255,.46); --line: rgba(255,255,255,.14); --bar-h: 72px; --wrap: 1320px; --font-ui: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Display face — the big uppercase headings and card names. 'lulo-clean' is FIRST on purpose. The live home page sets its headings in Lulo Clean One Bold, but that font is licensed to Wix for that site and its free release is desktop-only, so it cannot simply be copied here. Add an Adobe Fonts web project (Lulo Clean is on Adobe Fonts and web projects are licensed for this) and the in each page's is the only change needed — the stack picks it up on its own. Until then it falls back to League Spartan, the closest free geometric caps face: same circular O and the same compact, heavy proportions. */ --font-display: 'lulo-clean', 'Lulo Clean', 'League Spartan', 'Sora', system-ui, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); color: var(--text); background: #1a0b18; -webkit-font-smoothing: antialiased; } /* --- Background: maroon→purple→navy with a red glow top-left and a blue one bottom-right, matching the home page's hero. The starfield canvas sits on top of this, both behind all content. ------------------------------ */ .bg-wrap { position: fixed; inset: 0; z-index: -2; background: radial-gradient(900px 700px at 12% 8%, rgba(190,32,60,.42), transparent 62%), radial-gradient(1000px 800px at 88% 82%, rgba(28,52,140,.46), transparent 64%), linear-gradient(180deg, #2d0c1a 0%, #4a132b 32%, #2c1027 66%, #131831 100%); } #starfield { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } /* ========================== HEADER ====================================== */ .site-nav { position: sticky; top: 0; z-index: 50; background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.06); } /* Grid, not flex: the 1fr either side centres the nav in the bar no matter how wide the logo is, instead of it trailing off to the left. */ .nav-inner { height: var(--bar-h); max-width: var(--wrap); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .nav-logo { justify-self: start; } /* stretch so a nav item is the full height of the bar — the menus then hang off the bar's bottom edge with no dead gap for the pointer to fall into */ .nav-links { justify-self: center; align-self: stretch; } .nav-logo { display: flex; flex: 0 0 auto; } .nav-logo img { width: 44px; height: 44px; display: block; } .nav-links { display: flex; align-items: center; gap: 0; } .nav-item { position: relative; display: flex; align-items: center; height: 100%; } /* Matches the live home page's redesigned nav: bold geometric caps, muted grey at rest, hairline dividers between items. Sampled from a render — the live colour is #4a4a4a, which is about 2.3:1 on black; this uses a brighter grey so it still passes AA, and goes white on hover and for the page you are on. */ .nav-item > a { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: #8f8f8f; text-decoration: none; white-space: nowrap; padding: 7px clamp(13px, 2.1vw, 26px); border-bottom: 2px solid transparent; transition: color .18s ease, border-color .18s ease; } .nav-item:hover > a, .nav-item:focus-within > a { color: var(--text); } .nav-item > a[aria-current="page"] { color: var(--text); border-bottom-color: var(--red); } /* The hairline between items. A border-left ran the full height of the bar and read like a table cell — on the live site it is a short rule about as tall as the letters, so it is a centred pseudo-element instead. */ .nav-item + .nav-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 17px; background: rgba(255,255,255,.22); } /* Hover on a pointer, focus-within for the keyboard — no JS needed. On a phone the whole nav becomes a list and the children are simply always shown, which avoids the "first tap opens, second tap follows" trap. */ .nav-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 196px; background: var(--ink); border: 1px solid rgba(255,255,255,.14); border-radius: 0 0 3px 3px; padding: 6px 0; display: none; z-index: 60; box-shadow: 0 18px 40px rgba(0,0,0,.55); } .nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { display: block; } .nav-menu a { display: block; font-family: var(--font-ui); font-weight: 400; font-size: 13.5px; letter-spacing: .07em; color: var(--text-dim); text-decoration: none; padding: 10px 20px; white-space: nowrap; text-align: center; transition: background .14s ease, color .14s ease; } .nav-menu a:hover { background: rgba(255,255,255,.1); color: var(--text); } .nav-menu a[aria-current="page"] { color: var(--text); background: rgba(255,255,255,.07); } /* Burger — only below 720px */ .nav-toggle { display: none; justify-self: end; grid-column: 3; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; color: var(--text); } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ''; display: block; position: relative; width: 22px; height: 2px; background: currentColor; margin: 0 auto; transition: transform .2s ease, opacity .2s ease; } .nav-toggle span::before { position: absolute; top: -7px; } .nav-toggle span::after { position: absolute; top: 7px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); } /* ========================== SOCIAL RAIL ================================= */ .social-rail { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 14px; } .social-rail a { display: block; opacity: .58; transition: opacity .18s ease, transform .18s ease; } .social-rail a:hover { opacity: 1; transform: scale(1.09); } .social-rail img { width: 30px; height: 30px; display: block; } /* ========================== TYPE ======================================== */ .display { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; line-height: 1.04; margin: 0; } .eyebrow { font-family: var(--font-ui); font-weight: 400; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 18px; } .lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.62; color: var(--text-dim); max-width: 62ch; margin: 0; } /* ========================== BUTTONS ===================================== */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 13px 24px; border: 1px solid var(--line); border-radius: 2px; color: var(--text); background: rgba(255,255,255,.05); cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .12s ease; } .btn:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.34); } .btn:active { transform: translateY(1px); } .btn-solid { background: var(--red); border-color: var(--red); } .btn-solid:hover { background: #e03a63; border-color: #e03a63; } /* ========================== FOOTER ====================================== */ .site-footer { background: var(--ink); border-top: 1px solid rgba(255,255,255,.07); margin-top: 96px; } .footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 30px 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } .footer-mark img { width: 96px; display: block; } .footer-copy { font-family: var(--font-ui); /* Same fix as the nav — Sora Light under heavy tracking reads wispy. */ font-weight: 400; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); text-align: center; white-space: nowrap; } .footer-links { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .footer-links a { font-family: var(--font-body); font-size: 11px; color: var(--text-faint); text-decoration: none; transition: color .18s ease; } .footer-links a:hover { color: var(--text); } /* ========================== RESPONSIVE ================================== */ @media (max-width: 1180px) { .social-rail { display: none; } } @media (max-width: 720px) { :root { --bar-h: 62px; } .nav-inner { grid-template-columns: auto 1fr auto; } .nav-toggle { display: block; } .nav-logo img { width: 36px; height: 36px; } .nav-links { /* An absolutely-positioned grid item resolves left/right against its GRID AREA, so the panel came out as narrow as the centre column. Spanning every column gives it the full width of the bar back. */ grid-column: 1 / -1; justify-self: stretch; align-self: start; position: absolute; top: var(--bar-h); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.08); padding: 8px 24px 18px; display: none; } .nav-links.open { display: flex; } .nav-item { display: block; width: 100%; height: auto; } .nav-item::before { display: none !important; } .nav-item > a { width: 100%; padding: 13px 0; font-size: 15px; } /* No hovering on a phone — the children just sit under their parent. */ .nav-menu { position: static; transform: none; left: auto; display: block; min-width: 0; border: 0; box-shadow: none; background: none; /* top padding matters: the current parent draws a full-width red underline, and without a gap the first child sat right on top of it */ padding: 9px 0 8px 14px; } .nav-menu a { padding: 9px 0; font-size: 13.5px; text-align: left; } .nav-menu a[aria-current="page"] { background: none; color: var(--text); } .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; } .footer-links { align-items: center; } .footer-copy { white-space: normal; } } /* Respect reduced-motion for every decorative animation on the site. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }