/* ============================================================ SIMON BEANS — main stylesheet ============================================================ TABLE OF CONTENTS 1. Palette & base variables 2. Reset-ish basics 3. Section background colors 4. Header & footer 5. Page Titles 6. Text boxes 7. Site navigation 8. Writing Content (the drop-folder systems) 9. Art Gallery 10. CTA Button(s) + Modal 11. Responsive tweaks ============================================================ */ /* ---- 1. Palette & base variables --------------------------- Change a color here and it changes everywhere. */ :root { --green: #094B38; /* Donate */ --pink: #DC476D; /* Writing */ --blue: #025593; /* Hire Me */ --orange: #F66D5D; /* Default / Home (also header + footer) */ --plum: #8E2973; /* Trans Advocacy */ --red: #A72639; /* Art */ --cream: #FEF6E4; /* text boxes + text on colored backgrounds */ --graphite: #373234; /* text inside text boxes */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Karla', Arial, sans-serif; --content-width: 46rem; /* max width of page content */ --nav-width: 300px; /* sidebar menu width */ --header-height: 68px; /* one number controls both header bars */ } /* ---- 2. Reset-ish basics ---------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.65; color: var(--cream); /* default text color on colored bg */ min-height: 100vh; display: flex; flex-direction: column; } img { max-width: 100%; height: auto; } .profile-photo { display: block; max-width: 260px; /* cap the size; tune to taste */ width: 100%; /* but shrink on narrow screens */ height: auto; /* keep proportions — never squish */ border-radius: 12px; /* soft corners, or 50% for a circle */ box-shadow: 0 3px 0 rgba(55, 50, 52, 0.25); /* matches your card shadows */ margin-left: auto; margin-right: auto; margin-bottom: 1rem; /* a little breathing room before the text below */ } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: var(--cream); } h1 { font-size: clamp(2.1rem, 5vw, 3rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); } /* Links that sit directly on a colored background */ .site-main a { color: var(--cream); } .site-main { flex: 1; /* pushes the footer to the bottom on short pages */ width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; } /* Accessibility: hidden link that appears when keyboard users hit Tab */ .skip-link { position: absolute; left: -9999px; background: var(--cream); color: var(--graphite); padding: 0.5rem 1rem; z-index: 100; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } /* ---- 3. Section background colors -------------------------- The body class comes from $section in header.php */ .section-home { background-color: var(--orange); } .section-writing { background-color: var(--pink); } .section-art { background-color: var(--red); } .section-advocacy { background-color: var(--plum); } .section-hire { background-color: var(--blue); } .section-donate { background-color: var(--green); } /* ---- 4. Header & footer ------------------------------------ Always Home-orange, regardless of section. */ .site-header { background-color: var(--orange); display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem; height: var(--header-height); padding-top: 0; padding-bottom: 0; } .site-top { position: sticky; top: 0; z-index: 30; } .site-title { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--cream); text-decoration: none; letter-spacing: 0.02em; } .site-footer { background-color: var(--orange); color: var(--cream); text-align: center; padding: 1.25rem; font-size: 0.95rem; } /* Cream wave dividers between header/footer and the page color. HOW THIS WORKS: the background image is a tiny SVG tile, repeated horizontally. The SVG is cream from its top edge down to a wavy line, and transparent below it - so the page's section color shows through under the wave. The .flip version mirrors it vertically for the footer, so its wavy edge points up instead of down. */ .wave-divider { height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16' viewBox='0 0 40 16'%3E%3Cpath d='M0 12 Q 5 9 10 12 T 20 12 T 30 12 T 40 12 L 40 0 L 0 0 Z' fill='%23FEF6E4'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 40px 16px; position: sticky; } .wave-divider.flip { transform: scaleY(-1); } /* The hamburger button, drawn with three bars */ .nav-toggle { background: none; border: none; cursor: pointer; padding: 0.5rem; display: flex; flex-direction: column; gap: 5px; } .nav-toggle-bar { display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--cream); } .nav-toggle:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; } /* ---- 5. Page Titles ------------------------------- */ /* Eyebrow: the small section label that sits above a subpage title Links back to the section's landing page */ .eyebrow { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; /* spreads the letters out a bit */ text-transform: uppercase; display: block; /* overridde inline-block from .wavy */ width: fit-content; /* still hug the text width */ margin-left: auto; /* equal auto margins = centered text */ margin-right: auto; margin-bottom: 0.15rem; } .eyebrow a { color: var(--cream); text-decoration: none; opacity: 0.84; /* slightly quieter than the title */ } .eyebrow a:hover { opacity: 1; text-decoration: underline; } /* Wavy Underline on page titles HOW THIS WORKS: instead of a colored wave image, we use a tiny SVG wave as a *mask*. The ::after element is a bar of `currentColor` (whatever color the title text is), and the mask punches the wave shape out of it. Result: the wave always matches the title color automatically, on any background. Apply with class="wavy" on any heading. */ .wavy { display: inline-block; /* so the underline matches the text width */ } .wavy::after { content: ""; display: block; height: 7px; margin-top: 0.35rem; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='7' viewBox='0 0 40 7'%3E%3Cpath d='M0 3.5 Q 5 1 10 3.5 T 20 3.5 T 30 3.5 T 40 3.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='7' viewBox='0 0 40 7'%3E%3Cpath d='M0 3.5 Q 5 1 10 3.5 T 20 3.5 T 30 3.5 T 40 3.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: 40px 7px; mask-size: 40px 7px; } /* Centering Page Titles */ .page-title { display: block; /* overridde inline-block from .wavy */ width: fit-content; /* still hug the text width */ margin-left: auto; /* equal auto margins = centered text */ margin-right: auto; margin-top: 0; } /* ---- 6. Text boxes ----------------------------------------- Cream boxes with graphite text. The slightly uneven border-radius gives them a gentle hand-drawn wobble that echoes the wavy underlines. */ .text-box { background-color: var(--cream); color: var(--graphite); padding: 1.5rem 1.75rem; margin: 1.5rem 0; border-radius: 18px 6px 16px 8px / 8px 16px 6px 18px; box-shadow: 0 3px 0 rgba(55, 50, 52, 0.25); } .text-box h2, .text-box h3 { color: var(--graphite); } .text-box a { color: var(--graphite); font-weight: 700; } .text-box > :first-child { margin-top: 0; } .text-box > :last-child { margin-bottom: 0; } /* ---- 7. Site navigation --------------------------------- */ /* Sidebar Navigation */ .nav-backdrop { position: fixed; inset: 0; background: rgba(55, 50, 52, 0.55); z-index: 40; } .site-nav { position: fixed; top: 0; left: 0; bottom: 0; width: var(--nav-width); max-width: 85vw; background: var(--cream); color: var(--graphite); z-index: 50; overflow-y: auto; transform: translateX(-100%); /* hidden off-screen by default */ transition: transform 0.25s ease; box-shadow: 3px 0 12px rgba(0, 0, 0, 0.2); overflow-x: hidden; } .site-nav.open { transform: translateX(0); } /* Respect users who turn off animations in their OS settings */ @media (prefers-reduced-motion: reduce) { .site-nav, .submenu-arrow { transition: none; } } .site-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: var(--orange); height: var(--header-height); padding-top: 0; padding-bottom: 0; position: sticky; top: 0; z-index: 1; } .site-nav-title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--cream); } .nav-close { background: none; border: none; color: var(--cream); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; } .nav-collapse { background: none; border: none; color: var(--cream); cursor: pointer; padding: 0.25rem; display: none; /* hidden on mobile; desktop shows it below */ } .nav-collapse svg { transition: transform 0.2s ease; } /* When collapsed, the < arrow flips to point > (meaning "expand") */ body.nav-collapsed .nav-collapse svg { transform: scaleX(-1); } .nav-list { list-style: none; margin: 0; padding: 0.5rem 0; } .nav-row { display: flex; align-items: stretch; } .site-nav .nav-link { flex: 1; padding: 0.8rem 1.25rem; color: var(--graphite); text-decoration: none; font-weight: 500; } .site-nav .nav-link:hover { background: rgba(246, 109, 93, 0.15); } .site-nav .nav-link.active { font-weight: 700; background: rgba(246, 109, 93, 0.25); } /* Icon bubbles: small colored circles matching each section. The SVG inside uses stroke="currentColor", so setting 'color' here is what makes the icon lines cream. */ .nav-bubble { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; /* don't let long labels squish the circle */ color: var(--cream); } .bubble-home { background: var(--orange); } .bubble-writing { background: var(--pink); } .bubble-art { background: var(--red); } .bubble-advocacy { background: var(--plum); } .bubble-hire { background: var(--blue); } .bubble-donate { background: var(--green);} /* Lay the bubble and label out side by side inside the linke */ .site-nav .nav-link { display: flex; align-items: center; gap: 0.75rem; } /* The arrow button that expands a submenu */ .submenu-toggle { background: none; border: none; cursor: pointer; color: var(--graphite); padding: 0 1.1rem; display: flex; align-items: center; } .submenu-arrow { transition: transform 0.2s ease; } .nav-item.open .submenu-arrow { transform: rotate(90deg); } /* Submenus are hidden until their .nav-item gets the .open class */ .submenu { list-style: none; margin: 0; padding: 0; display: none; background: rgba(55, 50, 52, 0.05); } .nav-item.open > .submenu { display: block; } .site-nav .nav-link.sub { padding-left: 2.4rem; font-size: 0.97rem; } /* ---- Desktop: the drawer becomes a permanent sidebar ---------- Below 900px nothing here applies, so phones keep the hamburger drawer behavior untouched. */ @media (min-width: 900px) { /* No hamburger, no X, no dark backdrop on desktop */ .nav-toggle, .nav-close, .nav-backdrop {display: none} .nav-collapse { display: block; } /* The sidebar is simply always on screen */ .site-nav { transform: none; transition: width 0.25s ease; } /* Push the whole page (header, content, footer) right to make room. Padding on body, not margin on main, so the header and footer shift too instead of sliding under. */ body { padding-left: var(--nav-width); } /* Collapsed = icon rail. The body class comes from nav.js. */ body.nav-collapsed { padding-left: 72px; } body.nav-collapsed .site-nav { width: 72px; } /* In the rail, hide everything except the bubbles */ body.nav-collapsed .nav-label, body.nav-collapsed .site-nav-title, body.nav-collapsed .submenu-toggle, body.nav-collapsed .site-nav .submenu { display: none; } body.nav-collapsed .site-nav .nav-link { justify-content: center; padding-left: 0; padding-right: 0; } } /* Section mini-nav: big tappable card links on the landing pages (Writing, Advocacy, Hire Me), so subpages are findable even when the sidebar is collapsed to icons. */ .section-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem; margin: 1.75rem 0; } .section-nav a { display: flex; align-items: center; justify-content: center; /* horizontal centering */ text-align: center; white-space: nowrap; /* forbid wrapping - combine with JS */ background: var(--cream); color: var(--graphite); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; padding: 1rem 1.2rem; /* smaller cousin of the text-box wobble */ border-radius: 14px 5px 12px 6px / 6px 12px 5px 14px; box-shadow: 0 3px 0 rgba(55, 50, 52, 0.25); position: relative; /* anchors the ::before strip to this card */ overflow: hidden; /* clips the strip to the wobbly corners */ } .section-nav a:hover { transform: translateY(-2px); /* lifts slightly */ box-shadow: 0 5px 0 rgba(55, 50, 52, 0.25); /* shadow grows to match */ } /* Colored wave dipping into the top and bottom of each card. Same mask trick as the title underlines: the strip is a bar of var(--card-accent), and the wave SVG punches its shape out. */ .section-nav a::before, .section-nav a::after { content: ""; position: absolute; top: 2px; left: 0; right: 0; height: 14px; background-color: var(--orange); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'%3E%3Cpath d='M0 10 Q 5 7 10 10 T 20 10 T 30 10 T 40 10 L 40 0 L 0 0 Z' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'%3E%3Cpath d='M0 10 Q 5 7 10 10 T 20 10 T 30 10 T 40 10 L 40 0 L 0 0 Z' fill='%23000'/%3E%3C/svg%3E"); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: 40px 14px; mask-size: 40px 14px; } /* The ::after copy sits at the bottom, mirrored. */ .section-nav a::after { top: auto; bottom: 2px; transform: scaleY(-1); } /* ---- 8. Writing Content (drop-folder system) ----------------- */ .piece-list { list-style: none; margin: 0; padding: 0; } .piece-list li { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.55rem 0; border-bottom: 1px dashed rgba(55, 50, 52, 0.3); } .piece-list li:last-child { border-bottom: none; } .piece-date { font-size: 0.88rem; opacity: 0.75; white-space: nowrap; } /* The rendered piece itself, on read.php */ .piece-body p { margin: 0 0 1em; } /* ---- 9. Art Gallery ---------------------------------------- */ /* ---- Thumbnail grid ---------------------------------------- */ .art-grid { list-style: none; margin: 1.75rem 0; padding: 0; display: grid; /* Smaller minimum than the nav cards = more per row. ~160px thumbs fit 4-6 across a normal page. */ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } /* Each thumb is a button styled to look like a card */ .art-thumb { display: block; width: 100%; padding: 0; border: none; cursor: pointer; background: var(--cream); color: var(--graphite); border-radius: 14px 5px 12px 6px / 6px 12px 5px 14px; box-shadow: 0 3px 0 rgba(55, 50, 52, 0.25); overflow: hidden; font-family: inherit; /* buttons don't inherit fonts by default */ } .art-thumb:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(55, 50, 52, 0.25); } .art-thumb:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; } /* Square crop: aspect-ratio forces the box square, object-fit cover scales+crops the image to fill it without distortion. */ .art-thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; } .art-thumb-title { display: block; padding: 0.6rem 0.75rem; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; text-align: center; } /* ---- Lightbox ---------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 60; /* above the sidebar (50) */ display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .lightbox[hidden] { display: none; } /* beat the flex display */ .lightbox-backdrop { position: absolute; inset: 0; background: rgba(55, 50, 52, 0.8); } /* The panel sits above the backdrop */ .lightbox-panel { position: relative; z-index: 1; background: var(--cream); color: var(--graphite); border-radius: 18px 6px 16px 8px / 8px 16px 6px 18px; max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; /* long captions scroll inside the panel */ padding: 1.5rem; } .lightbox-figure { margin: 0; } .lightbox-figure img { display: block; width: 100%; max-height: 60vh; object-fit: contain; /* contain, not cover — show the WHOLE artwork */ margin: 0 auto 1rem; border-radius: 8px; } .lightbox .art-title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 0 0 0.5rem; } /* Close + nav buttons */ .lightbox-close { position: absolute; top: 0.5rem; right: 0.75rem; background: none; border: none; color: var(--graphite); font-size: 2rem; line-height: 1; cursor: pointer; z-index: 2; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: var(--cream); color: var(--graphite); border: 2px solid var(--graphite); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .lightbox-prev { left: 0.5rem; } .lightbox-next { right: 0.5rem; } .lightbox-nav:hover { background: var(--orange); color: var(--cream); border-color: var(--orange); } /* On narrow screens, tuck the arrows inside the panel edges */ @media (max-width: 600px) { .lightbox-prev { left: 0.25rem; } .lightbox-next { right: 0.25rem; } } @media (prefers-reduced-motion: reduce) { .art-thumb { transition: none; } } /* ---- 10. CTA Button(s) + Modal --------------------------- Change a color here and it changes everywhere. */ /* Chunky in-text call-to-action button. Works on both