/* The Cosmic Nest styles Change the color variables below to quickly repaint the whole website. */ :root { --color-ink: #2b1f1f; --color-muted: #7e5e63; --color-background: #ffe6cf; --color-surface: #fff7f6; --color-surface-soft: #ffd7c6; --color-lavender: #ffc1e6; --color-sky: #ffd8f0; --color-moss: #6d7d4f; --color-berry: #ff4da6; --color-clay: #ff7a3a; --color-gold: #ffd36b; --color-border: #ff5a1f; /* RGB variants (used where alpha is required) */ --color-berry-rgb: 255,77,166; --color-clay-rgb: 255,122,58; --color-gold-rgb: 255,211,107; --color-lavender-rgb: 255,193,230; --color-sky-rgb: 255,216,240; --color-border-rgb: 255,90,31; --color-surface-rgb: 255,253,246; --accent-rgb: 123,95,82; --shadow-soft-rgb: 72,48,42; --shadow-soft: 0 16px 40px rgba(var(--shadow-soft-rgb), 0.14); --shadow-sticker: 5px 5px 0 rgba(var(--accent-rgb), 0.55); --font-body: Verdana, Geneva, Tahoma, sans-serif; --font-display: Georgia, "Times New Roman", serif; --radius-large: 26px; --radius-medium: 16px; --page-width: 1120px; } /* Quick-cleanup overrides (final): hide page texture and hero blob */ body::before, .hero-graphic::before { display: none !important; } /* Alternate palettes: add one of these classes to the to override the root palette. */ .theme-sunrise { --color-berry: #ff5a8f; --color-clay: #ff7a3a; --color-gold: #ffd36b; --color-lavender: #ffd1e8; --color-background: #fff0e6; --color-berry-rgb: 255,90,143; --color-clay-rgb: 255,122,58; --color-gold-rgb: 255,211,107; --color-lavender-rgb: 255,209,232; --color-surface-rgb: 255,253,246; } .theme-candy { --color-berry: #ff3f6e; --color-clay: #ff8a5b; --color-gold: #ffe08a; --color-lavender: #ffd4f0; --color-background: #fff2f8; --color-berry-rgb: 255,63,110; --color-clay-rgb: 255,138,91; --color-gold-rgb: 255,224,138; --color-lavender-rgb: 255,212,240; --color-surface-rgb: 255,253,246; } /* More alternate options */ .theme-spark { --color-berry: #ff4da6; --color-clay: #ff7a3a; --color-gold: #ffd36b; --color-lavender: #ffc1e6; --color-background: #ffe6cf; --color-berry-rgb: 255,77,166; --color-clay-rgb: 255,122,58; --color-gold-rgb: 255,211,107; --color-lavender-rgb: 255,193,230; --color-surface-rgb: 255,253,246; } .theme-retro { --color-berry: #ff6a00; --color-clay: #c94a2e; --color-gold: #f2c86b; --color-lavender: #ffd8d1; --color-background: #fff0e6; --color-berry-rgb: 255,106,0; --color-clay-rgb: 201,74,46; --color-gold-rgb: 242,200,107; --color-lavender-rgb: 255,216,209; --color-surface-rgb: 255,253,246; } .theme-muted { --color-berry: #8b5e66; --color-clay: #b97a63; --color-gold: #e8c27a; --color-lavender: #e9dfe8; --color-background: #fff9f6; --color-berry-rgb: 139,94,102; --color-clay-rgb: 185,122,99; --color-gold-rgb: 232,194,122; --color-lavender-rgb: 233,223,232; --color-surface-rgb: 255,253,246; } /* Extra palettes added per request */ .theme-sienna { --color-berry: #a83f2b; --color-clay: #c96a3f; --color-gold: #f4b35d; --color-lavender: #f6d7d0; --color-background: #fff3ec; --color-berry-rgb: 168,63,43; --color-clay-rgb: 201,106,63; --color-gold-rgb: 244,179,93; --color-lavender-rgb: 246,215,208; --color-surface-rgb: 255,253,246; } .theme-meadow { --color-berry: #2e8b57; --color-clay: #3a6b4f; --color-gold: #c7e89a; --color-lavender: #dff3e6; --color-background: #f3fff2; --color-berry-rgb: 46,139,87; --color-clay-rgb: 58,107,79; --color-gold-rgb: 199,232,154; --color-lavender-rgb: 223,243,230; --color-surface-rgb: 255,253,246; } .theme-ocean { --color-berry: #006d77; --color-clay: #2a9d8f; --color-gold: #83c5be; --color-lavender: #d3f3f2; --color-background: #eefaf9; --color-berry-rgb: 0,109,119; --color-clay-rgb: 42,157,143; --color-gold-rgb: 131,197,190; --color-lavender-rgb: 211,243,242; --color-surface-rgb: 255,253,246; } .theme-neon { --color-berry: #ff00a6; --color-clay: #ff7a00; --color-gold: #fff44f; --color-lavender: #ffd1ff; --color-background: #fff8ff; --color-berry-rgb: 255,0,166; --color-clay-rgb: 255,122,0; --color-gold-rgb: 255,244,79; --color-lavender-rgb: 255,209,255; --color-surface-rgb: 255,253,246; } .theme-cocoa { --color-berry: #6b3e26; --color-clay: #8b5a3c; --color-gold: #d9b38c; --color-lavender: #f1e6df; --color-background: #fffaf7; --color-berry-rgb: 107,62,38; --color-clay-rgb: 139,90,60; --color-gold-rgb: 217,179,140; --color-lavender-rgb: 241,230,223; --color-surface-rgb: 255,253,246; } .theme-lavender { --color-berry: #7b59c5; --color-clay: #9b7fd6; --color-gold: #f3d7ff; --color-lavender: #e8dfff; --color-background: #fbf7ff; --color-berry-rgb: 123,89,197; --color-clay-rgb: 155,127,214; --color-gold-rgb: 243,215,255; --color-lavender-rgb: 232,223,255; --color-surface-rgb: 255,253,246; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--color-ink); background: radial-gradient(circle at 10% 15%, rgba(var(--color-gold-rgb), 0.28) 0 80px, transparent 82px), radial-gradient(circle at 85% 8%, rgba(var(--color-lavender-rgb), 0.45) 0 120px, transparent 122px), radial-gradient(circle at 70% 82%, rgba(var(--color-sky-rgb), 0.5) 0 150px, transparent 152px), var(--color-background); font-family: var(--font-body); font-size: 0.95rem; line-height: 1.6; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(var(--accent-rgb), 0.22) 1px, transparent 1.5px), radial-gradient(circle, rgba(var(--color-berry-rgb), 0.18) 1px, transparent 1.5px); background-position: 0 0, 18px 18px; background-size: 36px 36px; opacity: 0.28; } a { color: var(--color-berry); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } a:hover { color: var(--color-clay); } a:focus-visible, button:focus-visible { outline: 3px solid var(--color-berry); outline-offset: 4px; } h1, h2, h3 { margin: 0 0 0.6rem; font-family: var(--font-display); line-height: 1.08; } h1 { max-width: 12ch; color: var(--color-berry); font-size: clamp(2.4rem, 6.5vw, 4.8rem); } h2 { color: var(--color-moss); font-size: clamp(1.6rem, 3.6vw, 2.8rem); } h3 { color: var(--color-berry); font-size: 1.15rem; } p { margin: 0 0 1rem; } ul { padding-left: 1.3rem; } li + li { margin-top: 0.55rem; } .skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 100; padding: 0.7rem 1rem; border: 2px solid var(--color-border); border-radius: 999px; background: var(--color-surface); transform: translateY(-160%); } .skip-link:focus { transform: translateY(0); } /* Shared header and navigation. */ .site-header { position: relative; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(var(--page-width), calc(100% - 2rem)); margin: 0 auto; padding: 1rem 0; } .site-logo { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--color-berry); font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; text-decoration: none; } /* Hide only the circular mark (CN) in the shell preview; keep the textual site name visible */ .site-mark { display: none !important; } .site-mark { display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid var(--color-border); border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--color-gold) 0 11px, transparent 12px), radial-gradient(circle at 65% 68%, var(--color-lavender) 0 15px, transparent 16px), var(--color-sky); color: var(--color-berry); box-shadow: var(--shadow-sticker); font-size: 1.2rem; line-height: 1; /* Enforce hiding the circular site mark in shell styles as final override */ .site-mark { display: none !important; } } .main-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem; } .main-nav a { display: inline-flex; min-height: 42px; align-items: center; padding: 0.45rem 0.75rem; border: 2px solid transparent; border-radius: 999px; color: var(--color-ink); font-size: 0.95rem; font-weight: 700; text-decoration: none; } .main-nav a:hover, .main-nav a[aria-current="page"] { border-color: var(--color-border); background: var(--color-surface); color: var(--color-berry); } main { position: relative; z-index: 1; } /* Main page sections and reusable layout helpers. */ .hero, .page-hero, .page-section, .site-footer { width: min(var(--page-width), calc(100% - 2rem)); margin-right: auto; margin-left: auto; } .hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; min-height: 70vh; margin-top: 1rem; padding: clamp(2rem, 6vw, 5rem); background: linear-gradient(135deg, rgba(var(--color-surface-rgb), 0.96), rgba(var(--color-lavender-rgb), 0.72)); box-shadow: var(--shadow-soft); } .page-hero { margin-top: 1rem; padding: clamp(2rem, 5vw, 4rem); background: rgba(var(--color-surface-rgb), 0.88); box-shadow: var(--shadow-soft); } .page-section { margin-top: 1.25rem; padding: clamp(1.5rem, 4vw, 3rem); border: 2px solid rgba(var(--accent-rgb), 0.35); border-radius: var(--radius-large); background: rgba(var(--color-surface-rgb), 0.82); } .cozy-border { border: 3px solid var(--color-border); border-radius: var(--radius-large); }