/* Theme Name: Irational Theme URI: https://leonardodestro.com Author: Leonardo Destro Description: A raw early-web portfolio theme inspired by irational.org. Fixed left sidebar navigation, content-first layout. For visual artists. Version: 1.24 License: GNU General Public License v2 or later Text Domain: irational */ /* ───────────────────────────────────────── RESET & BASE ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #d4d0c8; --text: #000000; --link: #0000cc; --link-vis: #551a8b; --link-hover: #cc0000; --border: #808080; --sidebar-w: 190px; --font-mono: 'Courier Prime', 'Courier New', Courier, monospace; } /* ───────────────────────────────────────── DARK MODE — OS level (automatic) ───────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --text: #d4d0c8; --link: #7799ff; --link-vis: #bb99ff; --link-hover: #ff6655; --border: #555555; } } /* ───────────────────────────────────────── DARK MODE — manual toggle (class on ) ───────────────────────────────────────── */ html.dark-mode { --bg: #1a1a1a; --text: #d4d0c8; --link: #7799ff; --link-vis: #bb99ff; --link-hover: #ff6655; --border: #555555; } html.light-mode { --bg: #d4d0c8; --text: #000000; --link: #0000cc; --link-vis: #551a8b; --link-hover: #cc0000; --border: #808080; } /* ───────────────────────────────────────── DARK MODE TOGGLE BUTTON ───────────────────────────────────────── */ #dark-mode-toggle { background: none; border: none; font-family: var(--font-mono); font-size: 10px; color: var(--border); cursor: pointer; padding: 0; margin-top: 10px; margin-bottom: 10px; text-align: left; display: block; letter-spacing: 0.03em; } #dark-mode-toggle:hover { color: var(--link-hover); } html { scroll-behavior: auto; } body { background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 13px; line-height: 1.55; min-height: 100vh; } img { max-width: 100%; height: auto; display: block; } a { color: var(--link); text-decoration: underline; } a:visited { color: var(--link-vis); } a:hover, a:focus { color: var(--link-hover); outline: none; } /* ───────────────────────────────────────── LAYOUT ───────────────────────────────────────── */ #page-wrapper { display: flex; min-height: 100vh; align-items: stretch; } /* ───────────────────────────────────────── SIDEBAR ───────────────────────────────────────── */ #sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); border-right: 2px solid var(--border); padding: 18px 12px 24px; position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0; background: var(--bg); z-index: 10; } .site-branding a { display: block; font-size: 11px; font-weight: bold; text-transform: lowercase; letter-spacing: 0.04em; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 14px; } .site-branding a:hover { color: var(--link-hover); } .site-description { font-size: 10px; color: #555; margin-bottom: 14px; } /* nav menu */ #sidebar-nav ul { list-style: none; } #sidebar-nav ul li { margin-bottom: 1px; } #sidebar-nav ul li a { display: block; font-size: 12px; text-decoration: none; color: var(--link); padding: 2px 0; } #sidebar-nav ul li a:hover { text-decoration: underline; color: var(--link-hover); } #sidebar-nav ul li.current-menu-item > a, #sidebar-nav ul li.current_page_item > a, #sidebar-nav ul li.current-page-ancestor > a { color: var(--text); font-weight: bold; text-decoration: none; } /* sub-menus */ #sidebar-nav ul ul { padding-left: 12px; margin-top: 2px; } #sidebar-nav ul ul li a { font-size: 11px; } .sidebar-separator { border: none; border-top: 1px solid var(--border); margin: 10px 0; } .sidebar-meta { font-size: 10px; color: #555; margin-top: 20px; line-height: 1.7; } /* scrollbar */ #sidebar::-webkit-scrollbar { width: 5px; } #sidebar::-webkit-scrollbar-track { background: var(--bg); } #sidebar::-webkit-scrollbar-thumb { background: var(--border); } /* ───────────────────────────────────────── MAIN CONTENT ───────────────────────────────────────── */ #main-content { flex: 1; padding: 22px 28px 40px; min-width: 0; } /* page title */ .page-header { border-bottom: 1px solid var(--border); padding-bottom: 5px; margin-bottom: 20px; } .page-header h1, .page-header h2 { font-size: 13px; font-weight: bold; text-transform: lowercase; letter-spacing: 0.02em; } /* entry content (classic editor / blocks) */ .entry-content { max-width: 100%; } .entry-content p { margin-bottom: 10px; } .entry-content h2 { font-size: 13px; font-weight: bold; margin: 16px 0 6px; text-transform: lowercase; } .entry-content h3 { font-size: 12px; font-weight: bold; margin: 12px 0 4px; } .entry-content ul { padding-left: 18px; margin-bottom: 10px; } .entry-content li { margin-bottom: 3px; } .entry-content blockquote { border-left: 3px solid var(--border); padding-left: 12px; color: #444; margin: 12px 0; } /* ───────────────────────────────────────── PHOTOGRAPHY — grid ───────────────────────────────────────── */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 3px; margin-top: 10px; } .photo-grid-item { position: relative; overflow: hidden; aspect-ratio: 4/3; background: #aaa; cursor: pointer; } .photo-grid-item img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.1s; } .photo-grid-item:hover img { filter: brightness(0.8); } .photo-grid-item figcaption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.65); color: #fff; font-size: 10px; padding: 4px 6px; opacity: 0; transition: opacity 0.15s; } .photo-grid-item:hover figcaption { opacity: 1; } /* Gutenberg gallery override */ .wp-block-gallery { gap: 3px !important; } .wp-block-gallery .wp-block-image { margin: 0 !important; } /* ───────────────────────────────────────── LIGHTBOX ───────────────────────────────────────── */ #lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 999; align-items: center; justify-content: center; flex-direction: column; cursor: zoom-out; } #lightbox.open { display: flex; } #lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; cursor: default; } #lightbox-caption { color: #ccc; font-family: var(--font-mono); font-size: 11px; margin-top: 9px; text-align: center; max-width: 80vw; } #lightbox-close { position: absolute; top: 14px; right: 20px; color: #fff; font-family: var(--font-mono); font-size: 22px; cursor: pointer; background: none; border: none; line-height: 1; padding: 4px; } #lightbox-close:hover { color: #f55; } /* ───────────────────────────────────────── VIDEO — list ───────────────────────────────────────── */ .video-list { list-style: none; margin-top: 6px; } .video-list li { border-bottom: 1px solid var(--border); padding: 12px 0; display: flex; gap: 14px; align-items: flex-start; } .video-embed-wrapper { width: 220px; min-width: 220px; aspect-ratio: 16/9; background: #222; flex-shrink: 0; overflow: hidden; } .video-embed-wrapper iframe { width: 100%; height: 100%; border: none; display: block; } .video-info .video-title { font-weight: bold; font-size: 12px; margin-bottom: 4px; } .video-info .video-desc { font-size: 11px; color: #333; margin-bottom: 6px; max-width: 460px; } .video-info .video-meta { font-size: 10px; color: #666; } /* standalone embed in page content */ .wp-block-embed { margin: 14px 0; max-width: 640px; } .wp-block-embed__wrapper iframe { max-width: 100%; border: none; display: block; } /* ───────────────────────────────────────── MUSIC — track list ───────────────────────────────────────── */ .audio-list { list-style: none; margin-top: 6px; } .audio-list li { border-bottom: 1px dotted var(--border); padding: 7px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; } .audio-track-name { font-weight: bold; font-size: 12px; } .audio-track-meta { font-size: 11px; color: #555; } .audio-track-meta a { font-size: 11px; } /* Bandcamp embed */ .bandcamp-embed { margin: 16px 0; max-width: 400px; } .bandcamp-embed iframe { border: none; display: block; } /* ───────────────────────────────────────── BIO PAGE ───────────────────────────────────────── */ .bio-content p { margin-bottom: 12px; } /* ───────────────────────────────────────── CONTACT PAGE ───────────────────────────────────────── */ .contact-email { font-size: 14px; font-weight: bold; margin-bottom: 10px; } .contact-links { margin-top: 14px; line-height: 2; } .contact-links a { font-size: 12px; display: block; } /* ── Contact form styles (WPForms + CF7) ── */ /* shared field styles */ .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea, .wpforms-form input[type="text"], .wpforms-form input[type="email"], .wpforms-form input[type="tel"], .wpforms-form input[type="url"], .wpforms-form select, .wpforms-form textarea { background: #c8c4bc !important; border: 1px solid var(--border) !important; border-radius: 0 !important; box-shadow: none !important; font-family: var(--font-mono) !important; font-size: 12px !important; padding: 4px 6px !important; width: 100% !important; max-width: 400px !important; outline: none !important; color: var(--text) !important; } .wpcf7-form textarea, .wpforms-form textarea { resize: vertical; min-height: 100px; } /* labels */ .wpforms-form label, .wpforms-field-label { font-family: var(--font-mono) !important; font-size: 11px !important; font-weight: bold !important; color: var(--text) !important; margin-bottom: 3px !important; display: block; } /* field container spacing */ .wpforms-field { margin-bottom: 12px !important; padding: 0 !important; } /* submit button */ .wpcf7-form input[type="submit"], .wpforms-form .wpforms-submit, .wpforms-form button[type="submit"] { background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 0 !important; box-shadow: none !important; font-family: var(--font-mono) !important; font-size: 12px !important; padding: 4px 14px !important; cursor: pointer !important; margin-top: 6px !important; color: var(--text) !important; text-transform: lowercase !important; letter-spacing: 0.02em !important; } .wpcf7-form input[type="submit"]:hover, .wpforms-form .wpforms-submit:hover, .wpforms-form button[type="submit"]:hover { background: var(--text) !important; color: var(--bg) !important; } /* remove WPForms default container padding/background */ .wpforms-container, .wpforms-container-full, .wpforms-form, .wpforms-field-container, .wpforms-form .wpforms-field { background: transparent !important; padding-left: 0 !important; margin-left: 0 !important; } .wpforms-container, .wpforms-form { padding: 0 !important; max-width: 420px; } /* error / success messages */ .wpforms-error-container, .wpforms-confirmation-container-full { font-family: var(--font-mono) !important; font-size: 12px !important; border: 1px solid var(--border) !important; background: transparent !important; padding: 8px 10px !important; border-radius: 0 !important; margin-top: 10px !important; } .wpforms-field-error { font-family: var(--font-mono) !important; font-size: 10px !important; color: var(--link-hover) !important; } /* ───────────────────────────────────────── HOME / FRONT PAGE ───────────────────────────────────────── */ .home-index { list-style: none; margin-top: 10px; max-width: 560px; } .home-index li { border-bottom: 1px dotted var(--border); padding: 4px 0; font-size: 12px; } .home-index li a { font-weight: bold; text-decoration: none; } .home-index li a:hover { text-decoration: underline; } /* ───────────────────────────────────────── FOOTER ───────────────────────────────────────── */ #colophon { padding: 10px 28px; font-size: 10px; color: #666; border-top: 1px solid var(--border); } /* ───────────────────────────────────────── RESPONSIVE ───────────────────────────────────────── */ @media (max-width: 640px) { :root { --sidebar-w: 100%; } #page-wrapper { flex-direction: column; } #sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 2px solid var(--border); padding: 12px 14px; } #sidebar-nav ul { display: flex; flex-wrap: wrap; gap: 0 16px; } #main-content { padding: 16px 14px 30px; } .video-list li { flex-direction: column; } .video-embed-wrapper { width: 100%; min-width: unset; } } /* ───────────────────────────────────────── SINGLE POST PAGE ───────────────────────────────────────── */ .single-post-meta { font-size: 10px; color: #666; margin-bottom: 16px; text-transform: lowercase; } .single-post-meta .post-category-link { color: #666; text-decoration: none; font-size: 10px; } .single-post-meta .post-category-link:hover { color: var(--link-hover); } /* Single post content — full width for galleries */ .single-entry-content { max-width: 100%; } .single-entry-content p, .single-entry-content h2, .single-entry-content h3, .single-entry-content blockquote { max-width: 640px; } /* Gutenberg gallery inside post — override defaults */ .single-entry-content .wp-block-gallery { margin: 16px 0; } .single-entry-content .wp-block-gallery .wp-block-image img { cursor: zoom-in; } /* Video / audio meta on single page */ .single-video-meta, .single-audio-meta { font-size: 11px; color: #555; margin: 10px 0 16px; } .single-exhibitions { margin-top: 20px; max-width: 560px; font-size: 12px; } .single-exhibitions h2 { font-size: 11px; font-weight: bold; text-transform: lowercase; border-bottom: 1px solid var(--border); padding-bottom: 3px; margin-bottom: 8px; } /* Video embed on single page */ .video-embed-single { width: 100%; max-width: 640px; aspect-ratio: 16/9; background: #222; margin-bottom: 14px; } .video-embed-single iframe { width: 100%; height: 100%; border: none; display: block; } /* Back link */ .single-post-nav { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 10px; } .back-link { font-size: 11px; text-decoration: none; color: var(--link); } .back-link:hover { color: var(--link-hover); text-decoration: underline; } /* ───────────────────────────────────────── PHOTO GRID — link variant (grid items are now tags, not
) ───────────────────────────────────────── */ a.photo-grid-item { display: block; text-decoration: none; } a.photo-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.1s; } a.photo-grid-item:hover img { filter: brightness(0.8); } a.photo-grid-item figcaption { opacity: 0; } a.photo-grid-item:hover figcaption { opacity: 1; } .photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #555; background: #b8b4aa; text-align: center; padding: 8px; min-height: 140px; } /* ───────────────────────────────────────── POST INDEX LIST (photography, etc.) ───────────────────────────────────────── */ .post-index-list { list-style: none; margin-top: 6px; max-width: 560px; } .post-index-list li { border-bottom: 1px dotted var(--border); padding: 5px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .post-index-list li a { font-size: 12px; font-weight: bold; text-decoration: none; } .post-index-list li a:hover { text-decoration: underline; } .post-index-year { font-size: 10px; color: #666; white-space: nowrap; } /* ───────────────────────────────────────── HOME PAGE — video full width (uploaded file + embeds) ───────────────────────────────────────── */ /* ── content area: remove padding so video can go edge to edge ── */ .home #main-content { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; } .home .entry-content { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } /* ── video block: full width, natural height ── */ .home .entry-content .wp-block-video, .home .entry-content figure.wp-block-video { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; } .home .entry-content .wp-block-video video, .home .entry-content figure.wp-block-video video { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; object-fit: unset !important; } /* external embeds (Vimeo / YouTube) */ .home .entry-content .wp-block-embed__wrapper { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; } .home .entry-content .wp-block-embed__wrapper iframe { position: absolute; top: 50%; left: 50%; width: 100% !important; height: 100% !important; transform: translate(-50%, -50%) scale(1.01); border: none; display: block; } /* ───────────────────────────────────────── GALLERY inside posts Layout (columns, gap, ratio) is controlled entirely via the Gutenberg block editor. Only non-layout rules go here. ───────────────────────────────────────── */ .single-entry-content .wp-block-gallery .wp-block-image img { cursor: zoom-in; transition: filter 0.1s; } .single-entry-content .wp-block-gallery .wp-block-image img:hover { filter: brightness(0.85); } /* ───────────────────────────────────────── DARK MODE — component overrides ───────────────────────────────────────── */ /* slightly dim images in dark mode so they don't blast */ html.dark-mode img, @media (prefers-color-scheme: dark) { img } { filter: brightness(0.92); } /* form fields */ html.dark-mode .wpforms-form input[type="text"], html.dark-mode .wpforms-form input[type="email"], html.dark-mode .wpforms-form textarea, html.dark-mode .wpcf7-form input[type="text"], html.dark-mode .wpcf7-form input[type="email"], html.dark-mode .wpcf7-form textarea { background: #2a2a2a !important; color: var(--text) !important; border-color: var(--border) !important; } /* ACF field placeholder text in dark mode */ html.dark-mode ::placeholder { color: #666; } /* installation meta on single page */ .single-installation-meta { font-size: 13px; color: #555; margin: 10px 0 16px; }