/* Theme Name: JamOnline Theme URI: https://jamonline.ph Author: JamOnline Editorial Author URI: https://jamonline.ph Description: A Swiss Editorial Brutalist full-site-editing WordPress theme for JamOnline.ph — the Philippines' tech, gadget, and internet-culture dispatch. Stark hairline grids, uppercase display type, and a dark-first reading surface built for reviews, breaking news, and long-form dispatches. Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 7.4 Version: 1.4.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: jam-online Tags: full-site-editing, block-patterns, news, blog, one-column, two-columns, four-columns, dark, custom-colors, custom-menu, editor-style, featured-images, full-width-template, sticky-post, threaded-comments, translation-ready */ /* ============================================================================= JAMONLINE — CORE SWISS RESET & DESIGN TOKENS Dark is the default surface. Add `.light` to to flip to light mode. ========================================================================== */ :root { color-scheme: dark; /* Type families. Display is a condensed grotesque with a width axis; text is a neutral companion. The contrast between the two is what gives headlines their force — a single family set large is just big text. */ --font-display: "Archivo", "Helvetica Neue", Arial Narrow, Arial, sans-serif; --font-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* Width axis for display type. 100% is normal; the headline cut is much narrower so more words fit per line at the same size. */ --display-width: 78%; /* Color tokens — dark (default) */ --jam-page: #090909; --jam-panel: #111111; --jam-raise: #1c1c1c; --jam-line: #292929; --jam-ink: #ececea; --jam-ink-2: #c9c9c5; --jam-ink-3: #969692; /* --jam-accent is a FILL. It carries white text at 6.1:1 and is safe for buttons, badges and score chips. It is NOT safe as small text on the dark page (3.3:1, below WCAG AA), so every accent-coloured label uses --jam-accent-text instead. Keep that split when adding components. */ --jam-accent: #bc243c; --jam-accent-dark: #941c30; --jam-accent-ink: #ffffff; --jam-accent-text: #ff5068; /* 6.0:1 on --jam-page */ /* Layout */ --jam-measure: 1280px; --jam-gutter: max(1.25rem, calc((100% - var(--jam-measure)) / 2)); /* Shape, motion, focus */ --radius: 2px; --dur: 120ms; --ease: ease; --focus-ring: 2px solid var(--jam-accent-text); } html.light { color-scheme: light; --jam-page: #f7f8fa; --jam-panel: #ffffff; --jam-raise: #eef1f5; --jam-line: #d9dee5; --jam-ink: #1f2933; --jam-ink-2: #3f4a56; --jam-ink-3: #5c6875; /* darkened from #667085 to clear 4.5:1 on --jam-page */ --jam-accent-text: #a81b31; /* 7.1:1 on --jam-page */ --focus-ring: 2px solid var(--jam-accent); } /* ----------------------------------------------------------------------- Reset -------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background-color: var(--jam-page); /* Keeps the sticky header from covering an anchor target. */ scroll-padding-top: 6rem; } body { background-color: var(--jam-page); color: var(--jam-ink); font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Reserving the scrollbar stops the 15px horizontal jump when a short page is replaced by a long one, and when the search overlay opens. */ scrollbar-gutter: stable; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; border-radius: var(--radius); } input, button, textarea, select { font: inherit; color: inherit; background: none; border: none; border-radius: var(--radius); } button { cursor: pointer; } a { color: inherit; text-decoration: none; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } /* Scoped list reset. A blanket `ul, ol { list-style: none }` also strips the list role in Safari/VoiceOver, so screen readers stop announcing "list, 5 items" for article bullets. Only chrome lists lose their markers. */ .wp-block-navigation ul, .wp-block-page-list, .wp-block-post-template, .wp-block-query-pagination, .wp-block-comment-template, .jam-site-header ul, .jam-site-footer ul, .jam-breadcrumbs ol, .jam-review__pros ul, .jam-review__cons ul { list-style: none; } table { border-collapse: collapse; width: 100%; } hr { border: none; border-top: 1px solid var(--jam-line); margin: 0; } /* ----------------------------------------------------------------------- Base typography — Swiss Editorial Brutalist scale -------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-stretch: var(--display-width); font-weight: 800; text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.9; color: var(--jam-ink); text-wrap: balance; } p { font-family: var(--font-sans); font-weight: 400; line-height: 1.6; color: var(--jam-ink-2); text-wrap: pretty; } strong, b { font-weight: 700; color: var(--jam-ink); } em, i { font-style: italic; } code, pre, kbd, samp { font-family: var(--font-mono); } /* ----------------------------------------------------------------------- Accessibility helpers -------------------------------------------------------------------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link:focus, .screen-reader-text:focus { position: fixed !important; top: 0.75rem; left: 0.75rem; z-index: 999; width: auto; height: auto; clip: auto; clip-path: none; background: var(--jam-accent); color: var(--jam-accent-ink); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.85rem 1.25rem; border-radius: var(--radius); } /* ----------------------------------------------------------------------- Selection, focus, scrollbar -------------------------------------------------------------------- */ ::selection { background-color: var(--jam-accent); color: var(--jam-accent-ink); } :focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius); } * { scrollbar-width: thin; scrollbar-color: var(--jam-line) var(--jam-page); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--jam-page); } ::-webkit-scrollbar-thumb { background-color: var(--jam-line); border-radius: var(--radius); border: 2px solid var(--jam-page); } /* ----------------------------------------------------------------------- Reduced motion -------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ----------------------------------------------------------------------- Global radius / shadow language — 2px everywhere, never rounded-full. Scoped to content blocks so it can no longer strip focus rings from the admin bar or the block editor's own UI chrome. -------------------------------------------------------------------- */ .wp-block-image img, .wp-block-cover, .wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-button__link, .wp-block-search__input, .wp-block-search__button, .wp-block-table, .wp-block-table td, .wp-block-table th, .wp-block-quote, .wp-block-pullquote, .wp-block-post-featured-image img, .wp-block-query, .wp-block-post-template, fieldset, input[type="text"], input[type="search"], input[type="email"], input[type="url"], textarea { border-radius: var(--radius); box-shadow: none; }