/* ============================================================ PsyCab — Theme: Amber Light ------------------------------------------------------------ Loaded AFTER style.css. Every colour, radius and shadow in the stylesheet resolves through the custom properties below, so redefining them here reskins all 81 templates without touching a single line of markup. What changed from the previous theme, and why --------------------------------------------- 1. LIGHTER SURFACES. The page moved from cream #fffaf2 to a near-white #fdfcfb, panels to #f8f6f2. Warmth now comes from a hint of tint rather than a full wash of colour. 2. SEPARATION BY LINE, NOT BY SHADOW. Shadows dropped to about a third of their old opacity and their spread halved. Hairline borders do the work instead. This is the single biggest contributor to the page feeling lighter. 3. TIGHTER GEOMETRY. Buttons were fully round pills; they are now 10px. Cards moved from 16px to 14px. Fully-round is reserved for avatars and small status pills, where it means something. 4. ONE TYPEFACE. Headings used the Fraunces serif, which reads editorial and warm rather than modern. Everything is now Figtree, with tight tracking and heavier weights carrying the hierarchy instead of a change of family. 5. BRIGHT FILLS, DARK TEXT. See the note below. On the accent, and why there are two of them -------------------------------------------- A bright yellow-orange carries WHITE text at about 2:1, far under the 4.5:1 that normal text needs — so the previous theme had to use a deep amber for buttons, which is the opposite of "lighter". The way out is to stop putting white text on the accent: --c-indigo-600 #ac6108 accent for TEXT on light surfaces (links, icons) — 4.59:1 on the page --c-indigo-400/500 bright fills for BUTTONS, which now carry ink text at 7.3:1 — better contrast than the old white-on-deep So the buttons are visibly lighter and MORE readable, not less. Note: includes/branding.php regenerates the whole --c-indigo-* scale from the "Brand Accent Color" setting and injects it into AFTER this file, so that setting wins. The 1.26.0 migration sets it to #ac6108 to match. ============================================================ */ :root { /* ── Surfaces: near-white, warm only by a hint ────────── */ --c-bg: #fdfcfb; --c-surface: #ffffff; --c-surface-2: #f8f6f2; --c-border: #ece7df; /* hairline — does the work shadows used to */ --c-border-2: #dcd4c8; /* ── Accent scale ─────────────────────────────────────── */ --c-indigo-900: #3c2203; --c-indigo-800: #5f3504; --c-indigo-700: #7c4606; --c-indigo-600: #ac6108; /* text accent — 4.59:1 on the page */ --c-indigo-500: #f49018; /* bright fill — ink on it is 7.3:1 */ --c-indigo-400: #f8b86d; --c-indigo-300: #fad09e; --c-indigo-200: #f9e2c8; --c-indigo-100: #faf1e5; --c-indigo-50: #fcf8f3; /* ── Secondary: muted olive ───────────────────────────── */ --c-mint-700: #4a5730; --c-mint-600: #63713f; --c-mint-500: #8a976a; --c-mint-100: #eaeee0; --c-mint-50: #f6f8f1; /* ── Functional — all >= 4.5:1 on white ───────────────── */ --c-success: #2f7d55; --c-success-bg: #eaf4ee; --c-warning: #9a6206; --c-warning-bg: #fdf4e3; --c-danger: #b1442f; --c-danger-bg: #fbece8; --c-info: #a06a12; --c-info-bg: #fdf6e8; /* ── Type ─────────────────────────────────────────────── */ --c-text: #1c1a17; --c-text-2: #3d3833; --c-muted: #6e675e; /* 5.4:1 — readable, not grey mush */ --c-muted-2: #8a8279; /* ── The bright end, for dark text only ───────────────── */ --c-honey: #f6a821; --c-honey-soft: #fdeccb; /* ── Shadow ink, referenced by style.css ──────────────── */ --shadow-accent: rgba(172, 97, 8, .16); --shadow-neutral: rgba(40, 33, 24, .07); /* ── Shadows: about a third of their old weight ───────── */ --shadow-xs: 0 1px 2px rgba(40, 33, 24, .04); --shadow-sm: 0 1px 3px rgba(40, 33, 24, .05); --shadow-md: 0 3px 10px rgba(40, 33, 24, .055), 0 1px 3px rgba(40, 33, 24, .035); --shadow-lg: 0 8px 24px rgba(40, 33, 24, .07), 0 2px 6px rgba(40, 33, 24, .04); --shadow-xl: 0 16px 40px rgba(40, 33, 24, .09); /* ── Radius: tighter, less bubbly ─────────────────────── */ --r-sm: 8px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-full: 9999px; /* ── Motion: quicker, more precise ────────────────────── */ --t-fast: 120ms cubic-bezier(.2, .7, .3, 1); --t-base: 200ms cubic-bezier(.2, .7, .3, 1); --t-slow: 340ms cubic-bezier(.2, .7, .3, 1); /* ── Back-compat aliases ─────────────────────────────── */ --sk-coral: #ac6108; --sk-teal: var(--c-mint-600); --sk-teal-mid: var(--c-mint-500); --role-color: var(--c-indigo-600); /* ── Fonts: one family, hierarchy by weight ───────────── */ --f-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --f-serif: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif; } /* ============================================================ Typography style.css hardcodes 'Plus Jakarta Sans' in ~40 rules, several with !important, so the family has to be overridden on the elements themselves. ============================================================ */ body, button, input, select, textarea, .btn, .form-control, .nav-link, .dropdown-item { font-family: var(--f-sans) !important; } /* Hierarchy comes from weight and tracking now, not a second family */ h1, h2, h3, h4, .sk-section-title, .sk-hero-title, .sk-card-title, .sk-article-title { font-family: var(--f-sans) !important; font-weight: 700 !important; letter-spacing: -0.022em; line-height: 1.2; } .sk-hero-title { letter-spacing: -0.032em; font-weight: 800 !important; } /* Small caps labels: wider tracking, lighter weight — modern, calm */ .sk-section-tag, .sk-sidebar-heading { font-family: var(--f-sans) !important; letter-spacing: .1em; font-weight: 600; text-transform: uppercase; font-size: .68rem; color: var(--c-muted); } .badge, .sk-role-badge { font-family: var(--f-sans) !important; font-weight: 600; } body { background: var(--c-bg); color: var(--c-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ Buttons — bright fill, ink text style.css sets `color: white !important` and a 600->500 gradient, so both need overriding here at equal specificity. ============================================================ */ .btn, .sk-btn-primary, .sk-btn-outline { border-radius: var(--r-sm); font-weight: 700; letter-spacing: -0.005em; } .sk-btn-primary { background: linear-gradient(135deg, var(--c-indigo-500) 0%, #f9a72e 100%) !important; border: none; color: var(--c-text) !important; /* 7.3:1 — was white at 4.5:1 */ box-shadow: 0 1px 2px rgba(40, 33, 24, .08); } .sk-btn-primary:hover, .sk-btn-primary:focus { background: linear-gradient(135deg, #e88510 0%, #f49a1c 100%) !important; color: var(--c-text) !important; box-shadow: 0 2px 8px var(--shadow-accent); } .sk-btn-outline { border: 1px solid var(--c-border-2); background: var(--c-surface); color: var(--c-text-2); } .sk-btn-outline:hover { border-color: var(--c-indigo-500); color: var(--c-indigo-700); background: var(--c-indigo-50); } /* ============================================================ Surfaces — line, not shadow ============================================================ */ .sk-card, .sk-sidebar-card, .sk-article-card { border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: none; } .sk-article-card:hover, .sk-card:hover { border-color: var(--c-border-2); box-shadow: var(--shadow-sm); } .form-control, .sk-input, .form-select { border-radius: var(--r-sm); border: 1px solid var(--c-border-2); background: var(--c-surface); } .form-control:focus, .sk-input:focus, .form-select:focus { border-color: var(--c-indigo-500); box-shadow: 0 0 0 3px var(--c-indigo-100); } /* Fully round stays where it carries meaning */ .sk-avatar, .sk-avatar-sm, .sk-avatar-lg { border-radius: var(--r-full); } .badge, .sk-role-badge, .sk-section-tag { border-radius: var(--r-full); } /* Navbar: flat, hairline, no blur haze */ .sk-navbar, .navbar { background: rgba(253, 252, 251, .82); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--c-border); box-shadow: none; } /* Footer: light. style.css styles footer text for a DARK background, so each of those rules is re-pointed here — otherwise the text would be white on white. */ .sk-footer { background: var(--c-surface-2); border-top: 1px solid var(--c-border); color: var(--c-muted); } .sk-footer .sk-brand { color: var(--c-text) !important; } .sk-footer .text-muted { color: var(--c-muted) !important; } .sk-footer-heading { color: var(--c-text); letter-spacing: .08em; } .sk-footer-link { color: var(--c-muted); } .sk-footer-link:hover { color: var(--c-indigo-700); } .sk-footer-divider { border-color: var(--c-border); } /* Ratings take the bright honey, always on dark text */ .sk-stars, .sk-star, .sk-rating-star, .bi-star-fill { color: var(--c-honey); } ::selection { background: var(--c-indigo-200); color: var(--c-indigo-900); } * { scrollbar-color: var(--c-border-2) transparent; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============================================================ Avatar photos (carried over unchanged) ------------------------------------------------------------ The avatar containers never set `position`, and the image is styled `position:absolute; inset:0`, so it anchored to an ancestor instead of its own circle. These rules constrain the image at the CONTAINER level instead. ============================================================ */ .sk-profile-hero-avatar, .sk-forum-item-avatar, .sk-comment-avatar, .sk-avatar, .sk-avatar-sm, .sk-avatar-lg, .sk-avatar-wrap, .sk-profile-avatar-wrap, .sk-psych-avatar { position: relative; overflow: hidden; } .sk-profile-hero-avatar > img, .sk-forum-item-avatar > img, .sk-comment-avatar > img, .sk-avatar > img, .sk-avatar-sm > img, .sk-avatar-lg > img, .sk-avatar-wrap > img, .sk-profile-avatar-wrap > img, .sk-psych-avatar > img, img.sk-avatar-img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; min-width: 0 !important; object-fit: cover !important; object-position: center 30% !important; border-radius: 50% !important; display: block !important; } .sk-profile-hero-avatar { width: 100px !important; height: 100px !important; flex: 0 0 100px !important; border-radius: 50% !important; } @media (max-width: 575.98px) { .sk-profile-hero-avatar { width: 80px !important; height: 80px !important; flex-basis: 80px !important; } } .sk-blogger-head { color: inherit; transition: opacity .15s ease; } .sk-blogger-head:hover { opacity: .75; } .sk-blogger-head .sk-blogger-name { color: var(--c-text); } /* ============================================================ The 18 classes templates reference but no stylesheet defined. They have been rendering unstyled since before this work started — see the note in README.md. ============================================================ */ .sk-stat-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 1.1rem 1.25rem; } .sk-stat-sub { font-size: .74rem; color: var(--c-muted); margin-top: .15rem; } .sk-stat-indigo { color: var(--c-indigo-600); } .sk-stat-success { color: var(--c-success); } .sk-stat-warning { color: var(--c-warning); } .sk-auth-card-header { text-align: center; } .sk-like-label { font-size: .82rem; } .sk-content-body { font-size: 1.02rem; line-height: 1.75; color: var(--c-text-2); } .sk-content-body p { margin-bottom: 1.1rem; } .sk-article-full-header { margin-bottom: 1.5rem; } .sk-article-full-meta { font-size: .82rem; color: var(--c-muted); } .sk-comment-body { font-size: .92rem; line-height: 1.65; color: var(--c-text-2); } .sk-topic-header { margin-bottom: 1.25rem; } .sk-cal-stat-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: .7rem .9rem; } .sk-shop-item-icon { font-size: 1.6rem; color: var(--c-indigo-600); } .sk-consult-type-toggle { cursor: pointer; } .sk-role-card-toggle { cursor: pointer; } .sk-settings-file-input { display: none; } .sk-settings-file-name { font-size: .8rem; color: var(--c-muted); } .sk-code-field { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }