/*! * Runfoo x Grateful Dead Base Stylesheet * Version: 1.0.0 * Author: Runfoo * Notes: Drop-in CSS for projects and WordPress themes (frontend + editor). * Fonts: Dela Gothic New/One, Oranienbaum, JetBrains Mono, Playfair Display, Bebas Neue * Palette: Grateful Red (#E01B24), Stealie Blue (#0067B3) + accents. */ /* ------------------------------ 0) CSS Reset (modern, minimal) -------------------------------*/ *, *::before, *::after { box-sizing: border-box; } html:focus-within { scroll-behavior: smooth; } html, body { height: 100%; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } img, picture { max-width: 100%; display: block; } input, button, textarea, select { font: inherit; } :root { color-scheme: light dark; } /* ------------------------------ 1) Font Loading (Google Fonts) - If self-hosting, replace with @wordpress/wp-includes/fonts/class-wp-font-face-resolver.php. -------------------------------*/ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dela+Gothic+One&family=JetBrains+Mono:wght@400;600&family=Oranienbaum&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap'); /* Aliases: user requested "Dela Gothic New"; Google provides "Dela Gothic One". */ :root { /* 2) Color System (Runfoo x GD) */ --rf-red: #E01B24; /* Grateful Red */ --rf-blue: #0067B3; /* Stealie Blue */ --rf-red-acc: #F36C5F; /* Scarlet Begonia */ --rf-red-muted: #C94A4A; /* Terrapin Clay */ --rf-blue-acc: #6EB5FF; /* Ripple Sky */ --rf-blue-muted: #3C84C3; /* Morning Dew */ --rf-black: #0B0B0B; /* Runfoo Black */ --rf-white: #FFFFFF; /* Runfoo White */ --rf-bone: #F8F6F0; /* Warm off-white */ --rf-shadow: 0 6px 18px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.08); /* 3) Typography Scale */ --rf-font-display: "Dela Gothic New","Dela Gothic One", "Bebas Neue", system-ui, sans-serif; --rf-font-sans: "Bebas Neue", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --rf-font-serif: "Playfair Display", "Oranienbaum", Georgia, "Times New Roman", serif; --rf-font-accent: "Oranienbaum", "Playfair Display", Georgia, serif; --rf-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --rf-step-xxl: clamp(2.75rem, 2.1rem + 2vw, 4rem); --rf-step-xl: clamp(2rem, 1.6rem + 1.2vw, 3rem); --rf-step-lg: clamp(1.5rem, 1.2rem + .8vw, 2.125rem); --rf-step-md: clamp(1.125rem, 1rem + .3vw, 1.25rem); --rf-step-sm: 1rem; --rf-step-xs: .875rem; /* 4) Layout & Radius */ --rf-maxw: 1200px; --rf-radius: 16px; --rf-gap: 1rem; } /* 5) Light / Dark themes */ :root { --rf-bg: var(--rf-bone); --rf-text: #121212; --rf-muted: #2b2b2b; --rf-border: rgba(0,0,0,.12); } @media (prefers-color-scheme: dark) { :root { --rf-bg: #0b0b0b; --rf-text: #f2f2f2; --rf-muted: #cfcfcf; --rf-border: rgba(255,255,255,.12); } } /* Optional manual theme switch via .theme-dark / .theme-light on or */ .theme-dark { --rf-bg: #0b0b0b; --rf-text:#f2f2f2; --rf-muted:#cfcfcf; --rf-border:rgba(255,255,255,.12); } .theme-light { --rf-bg: var(--rf-bone); --rf-text:#121212; --rf-muted:#2b2b2b; --rf-border:rgba(0,0,0,.12); } /* 6) Base elements */ body { background: var(--rf-bg); color: var(--rf-text); font-family: var(--rf-font-serif); font-size: var(--rf-step-sm); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { max-width: var(--rf-maxw); margin-inline: auto; padding: 2rem 1rem; } /* Headings */ h1,h2,h3 { font-family: var(--rf-font-display); letter-spacing: .02em; line-height: 1.1; } h1 { font-size: var(--rf-step-xxl); } h2 { font-size: var(--rf-step-xl); } h3 { font-size: var(--rf-step-lg); } h4,h5,h6 { font-family: var(--rf-font-accent); margin-top: 1.5rem; font-size: var(--rf-step-md); } /* Paragraphs & small */ p + p { margin-top: 1rem; } small, .caption { font-size: var(--rf-step-xs); color: var(--rf-muted); } /* Links */ a { color: var(--rf-blue); text-decoration-thickness: .1em; text-underline-offset: .18em; } a:hover { color: var(--rf-blue-acc); } /* Code & pre */ code, kbd, samp { font-family: var(--rf-font-mono); background: color-mix(in oklab, var(--rf-blue) 10%, transparent); padding: .15em .35em; border-radius: .35em; } pre { padding: 1rem; border: 1px solid var(--rf-border); border-radius: var(--rf-radius); overflow: auto; background: color-mix(in oklab, var(--rf-black) 6%, transparent); } pre code { background: transparent; padding: 0; } /* 7) Components */ /* Cards */ .card { background: var(--rf-white); color: #111; border: 1px solid var(--rf-border); border-radius: var(--rf-radius); box-shadow: var(--rf-shadow); overflow: clip; } @media (prefers-color-scheme: dark) { .card { background: #121212; color: #f2f2f2; } } /* Badges */ .badge { display: inline-flex; align-items: center; gap: .35em; padding: .25rem .6rem; font-size: .8rem; line-height: 1; border-radius: 999px; border: 1px solid var(--rf-border); background: var(--rf-bone); } .badge.red { background: color-mix(in oklab, var(--rf-red) 15%, white); } .badge.blue{ background: color-mix(in oklab, var(--rf-blue) 15%, white); } .badge .dot { width:.5em; height:.5em; border-radius:999px; background: currentColor; } /* Buttons */ .btn { --bg: var(--rf-black); --fg: var(--rf-white); display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1rem; border-radius: 999px; border:1px solid transparent; font-family: var(--rf-font-display); letter-spacing: .02em; text-decoration:none; cursor:pointer; transition: transform .06s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; background: var(--bg); color: var(--fg); } .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); } .btn:active { transform: translateY(0); } .btn.red { --bg: var(--rf-red); } .btn.blue { --bg: var(--rf-blue); } .btn.outline { background: transparent; color: var(--rf-text); border-color: var(--rf-border); } .btn.outline.red { color: var(--rf-red); border-color: color-mix(in oklab, var(--rf-red) 35%, var(--rf-border)); } .btn.outline.blue{ color: var(--rf-blue); border-color: color-mix(in oklab, var(--rf-blue) 35%, var(--rf-border)); } .btn.ghost { background: color-mix(in oklab, var(--rf-blue) 12%, transparent); color: var(--rf-text); } /* Forms */ .input, .select, .textarea { width: 100%; padding: .75rem .9rem; border-radius: 12px; background: var(--rf-white); border: 1px solid var(--rf-border); color: inherit; } .input:focus, .select:focus, .textarea:focus { outline: 2px solid color-mix(in oklab, var(--rf-blue) 45%, transparent); outline-offset: 2px; } /* Header Bar */ .header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; border-bottom: 1px solid var(--rf-border); background: linear-gradient(90deg, color-mix(in oklab, var(--rf-red) 20%, transparent), color-mix(in oklab, var(--rf-blue) 20%, transparent)); } /* Footer */ .footer { padding:2rem 1rem; border-top:1px solid var(--rf-border); color: var(--rf-muted); } /* Utilities */ .mt-0{margin-top:0} .mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem} .mb-0{margin-bottom:0} .mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:1.5rem} .p-0{padding:0} .p-1{padding:.5rem} .p-2{padding:1rem} .p-3{padding:1.5rem} .grid { display:grid; gap: var(--rf-gap); } .grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); } .grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); } .center { display:grid; place-items:center; } /* 8) Decorative helpers */ .gradient-dead { background: linear-gradient(90deg, var(--rf-red), var(--rf-blue)); } .gradient-soft { background: linear-gradient(180deg, var(--rf-blue), var(--rf-bone)); } .border-ring { border: 2px solid color-mix(in oklab, var(--rf-blue) 30%, var(--rf-border)); } .shadow { box-shadow: var(--rf-shadow); } /* 9) WordPress-specific adjustments */ /* Frontend wrappers */ .wp-site-blocks { background: var(--rf-bg); color: var(--rf-text); } .wp-block { max-width: var(--rf-maxw); margin-inline: auto; } /* Core blocks */ .wp-block-heading h1, .wp-block-heading h2, .wp-block-heading h3 { font-family: var(--rf-font-display); } .wp-block-paragraph { font-family: var(--rf-font-serif); font-size: var(--rf-step-sm); } /* Buttons block */ .wp-block-button .wp-block-button__link { @media (prefers-color-scheme: dark) { color: var(--rf-white); } font-family: var(--rf-font-display); background: var(--rf-red); color: var(--rf-white); border-radius: 999px; padding: .75rem 1.1rem; border: 1px solid transparent; } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--rf-blue); border-color: color-mix(in oklab, var(--rf-blue) 40%, var(--rf-border)); } /* Links & nav in menus */ .wp-block-navigation a { color: var(--rf-text); } .wp-block-navigation a:hover { color: var(--rf-blue); } /* Editor styles (Gutenberg) */ .editor-styles-wrapper { background: var(--rf-bg); color: var(--rf-text); font-family: var(--rf-font-serif); } .editor-styles-wrapper .wp-block-button .wp-block-button__link { font-family: var(--rf-font-display); } /* 10) Example color helper classes */ .text-red{ color: var(--rf-red); } .bg-red{ background: var(--rf-red); } .text-blue{ color: var(--rf-blue);} .bg-blue{ background: var(--rf-blue);} .text-black{ color: var(--rf-black);} .bg-black{ background: var(--rf-black);} .text-white{ color: var(--rf-white);} .bg-white{ background: var(--rf-white);} .text-bone{ color: var(--rf-bone);} .bg-bone{ background: var(--rf-bone);} /* Accents */ .text-red-acc{ color: var(--rf-red-acc); } .bg-red-acc{ background: var(--rf-red-acc); } .text-blue-acc{ color: var(--rf-blue-acc);} .bg-blue-acc{ background: var(--rf-blue-acc); } .text-blue-muted{ color: var(--rf-blue-muted);} .bg-blue-muted{ background: var(--rf-blue-muted); } .text-red-muted{ color: var(--rf-red-muted);} .bg-red-muted{ background: var(--rf-red-muted); } /* 11) Accessibility tweaks */ :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--rf-blue-acc); outline-offset: 2px; } .sr-only { position:absolute !important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* 12) Example header lockups */ .brand-lockup { display:flex; gap:.75rem; align-items: baseline; flex-wrap: wrap; } .brand-lockup .brand-title { font-family: var(--rf-font-display); font-size: var(--rf-step-xl); color: var(--rf-red); } .brand-lockup .brand-subtitle { font-family: var(--rf-font-accent); color: var(--rf-blue); font-size: var(--rf-step-md); } /* 13) Tables */ table { width:100%; border-collapse: collapse; border: 1px solid var(--rf-border); } th, td { padding:.75rem; border-bottom:1px solid var(--rf-border); } thead th { background: color-mix(in oklab, var(--rf-blue) 12%, var(--rf-bg)); text-align:left; } tbody tr:hover { background: color-mix(in oklab, var(--rf-blue) 6%, var(--rf-bg)); } /* End of stylesheet */