:root{ --topic-red:#ce0005; --ink:#0b0d10; --bg:#ffffff; --muted:#6b7280; --line:#e5e7eb; --news:#2563eb; --sport:#ce0005; --arts:#f59e0b; --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.08); color-scheme: light dark; } @media (prefers-color-scheme: dark){ :root{ --bg:#0a0b0d; --ink:#ecf0f4; --muted:#95a0ad; --line:#1f232a; --shadow:none; } } /* Explicit dark theme variables. When the user toggles dark mode via the theme button, data-theme="dark" is set on the element. These variables mirror the system dark colours but allow manual override even if the OS preference differs. */ :root[data-theme='dark']{ --bg:#0a0b0d; --ink:#ecf0f4; --muted:#95a0ad; --line:#1f232a; --shadow:none; --topic-red:#ce0005; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial} /* Soft background glow. Two radial gradients gently float across the viewport to create a subtle, ever‑changing ambience behind the content. The animation is slow and unobtrusive, designed to complement the liquid glass surfaces. This effect is only enabled in light mode; in dark or sepia themes the glow would be distracting. */ /* Remove the animated glow effect behind the content. A neutral background improves legibility and reduces distraction. Overriding the previous rule here sets the pseudo element to do nothing. */ body::before{ content: ''; display: none; } @keyframes glow{ 0%{background-position:0% 0%, 100% 100%;} 50%{background-position:50% 50%, 50% 50%;} 100%{background-position:0% 0%, 100% 100%;} } /* ------------------------------------------------------------- */ /* New features: personalisation, comments and media enhancements */ /* Recommended section styling */ .recommended { margin-top: 1.5rem; } .recommended .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; } .recommended .grid { /* Use a responsive grid that adapts to available space. A larger minimum card width prevents awkward wrapping on medium screens. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; /* Allow rows to size themselves based on content rather than forcing equal height. This prevents truncated cards when the number of items doesn’t divide evenly into the columns. */ grid-auto-rows: auto; } /* Login button inside util bar */ .login-btn { border: none; background: none; color: var(--ink); cursor: pointer; font: inherit; padding: 0 0.5rem; } .login-btn:hover, .login-btn:focus { text-decoration: underline; } /* Comment system improvements */ .comment { margin-bottom: 1rem; } .comment p { margin: 0.25rem 0; } .comment .comment-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.875rem; color: var(--muted); } .comment .comment-meta time { margin-right: 0.5rem; } .comment .comment-meta button { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 0.875rem; padding: 0; } .comment .comment-meta button.active { color: var(--topic-red); } .comment .flagged-comment { font-style: italic; color: var(--muted); } .reply-btn, .flag-btn { color: var(--muted); border: none; background: none; cursor: pointer; font-size: 0.875rem; } .reply-form { margin-top: 0.5rem; } .reply-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem; font: inherit; color: var(--ink); background: var(--bg); resize: vertical; } .reply-form button { margin-top: 0.25rem; padding: 0.25rem 0.5rem; background: var(--topic-red); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.875rem; } .reply-form button:hover, .reply-form button:focus { background: #b30005; } /* Data tools section on profile */ .data-tools { margin-top: 2rem; padding: 1rem; border-top: 1px solid var(--line); } .data-tools h2 { font-size: 1.25rem; margin-bottom: 0.5rem; } .data-tools p { font-size: 0.875rem; color: var(--muted); margin-bottom: 0.75rem; } .data-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .data-actions .btn { display: inline-block; padding: 0.5rem 0.75rem; border: none; border-radius: 4px; background: var(--topic-red); color: #fff; font-size: 0.875rem; cursor: pointer; text-decoration: none; } .data-actions .btn:hover, .data-actions .btn:focus { background: #b30005; } /* Remove button for moderators */ .remove-btn { background: var(--topic-red); color: #fff; border: none; border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.75rem; margin-top: 0.25rem; cursor: pointer; } .remove-btn:hover, .remove-btn:focus { background: #b30005; } /* Media wrapper styling for videos and audio */ .media-wrapper { margin: 1rem 0; text-align: center; } .media-wrapper video, .media-wrapper audio { max-width: 100%; } .media-wrapper details { margin-top: 0.5rem; text-align: left; font-size: 0.875rem; color: var(--ink); } .media-wrapper details summary { cursor: pointer; font-weight: 600; margin-bottom: 0.25rem; } /* Ensure keyboard users can see focus outlines on interactive elements */ :focus-visible { outline: 2px dashed var(--topic-red); outline-offset: 2px; } a{color:inherit;text-decoration:none} .wrap{max-width:1100px;margin:0 auto;padding:0 16px} /* Header */ /* The header is divided into three rows: a top bar with the brand and date, a menu bar with site utilities (ePaper, Saved, theme toggle, search), and a category bar with primary navigation and an “Other” dropdown. Each bar uses a subtle glassmorphism effect and sticks to the top of the viewport. */ /* The header uses a refined liquid glass effect inspired by Apple’s Vision Pro design language. We lower the base opacity and add multiple shadows to create depth and subtle specular highlights. The effect is tuned separately for light, dark and sepia themes via CSS variables. */ /* Header Replace the liquid glass effect with a crisp frosted glass. Use a higher opacity and gentle blur to improve legibility and remove ornate highlights. Theme variants adjust the tint based on the current colour scheme. */ .site-head{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.5); box-shadow:0 2px 8px rgba(0,0,0,0.05); } /* Dark mode frosted glass: use a darker tint for contrast. */ :root[data-theme='dark'] .site-head{ background:rgba(20,22,26,0.8); border:1px solid rgba(255,255,255,0.1); box-shadow:0 2px 8px rgba(0,0,0,0.5); } /* Sepia mode frosted glass: warm tint to complement the sepia palette. */ :root[data-theme='sepia'] .site-head{ background:rgba(244,240,231,0.8); border:1px solid rgba(179,170,155,0.3); box-shadow:0 2px 8px rgba(0,0,0,0.05); } /* Top bar: brand and date */ .top-bar{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; } .top-bar .brand-text{ font-weight:800; font-size:1.25rem; letter-spacing:0.5px; } .top-bar .nav-date{ font-size:0.875rem; color:var(--muted); white-space:nowrap; } /* Menu bar: ePaper, Saved, theme toggle, search */ /* The merged top bar (super-bar) combines the brand/date and utility links into a single row. It spans the full width of the header and aligns content on the left (logo and date) and right (utilities). */ .super-bar{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); } .super-bar .brand-left{ display:flex; align-items:center; gap:8px; } .super-bar .util-bar{ display:flex; align-items:center; /* Reduce the gap between utility items to make room for the theme toggle on smaller viewports. */ gap:8px; flex-wrap:nowrap; } .super-bar .util-bar .search{ flex:1; /* Narrow the search box slightly so additional controls fit within the header. */ min-width:160px; max-width:200px; } /* Menu bar styles remain for backwards compatibility but are no longer used */ .menu-bar{display:none;} /* Category bar: primary navigation */ .category-bar{ display:flex; align-items:center; gap:20px; padding:6px 0; overflow-x:auto; white-space:nowrap; } .category-bar .tab{ font-weight:600; padding:6px 8px; } /* Highlight hover and active state on navigation tabs. A colour change on hover provides feedback, and the active tab uses the accent colour and a small underline to indicate the current page. */ .category-bar .tab:hover{ color: var(--topic-red); } .category-bar .tab.active, .category-bar .tab[data-current="true"]{ color: var(--topic-red); border-bottom: 2px solid var(--topic-red); } .other-dropdown{ position:relative; } .other-dropdown button{ background:none; border:0; font:inherit; padding:6px 8px; cursor:pointer; } .dropdown-menu{ position:absolute; top:100%; left:0; min-width:180px; background:var(--bg); border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,0.05); padding:8px 0; display:flex; flex-direction:column; gap:2px; z-index:100; } .dropdown-menu a{ padding:6px 16px; text-decoration:none; color:var(--ink); font-weight:500; display:block; } .dropdown-menu a:hover{ background:color-mix(in srgb, var(--ink), var(--bg) 90%); color:var(--bg); } /* Three‑dot button used to open the secondary navigation menu. It appears in the category bar and replaces the text “Other”. The circular shape and border keep it consistent with other icon buttons. */ .other-dropdown button.three-dot{ /* Style the three‑dot button to blend with the navigation bar. Use a subtle border and background, with a round shape for consistency. */ background:var(--bg); border:1px solid var(--line); border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; line-height:1; cursor:pointer; transition:background-color 0.2s ease; } .other-dropdown button.three-dot:hover, .other-dropdown button.three-dot:focus{ background:color-mix(in srgb, var(--ink), var(--bg) 92%); color:var(--bg); } .other-dropdown button.three-dot:hover{ background:color-mix(in srgb, var(--topic-red) 10%, var(--bg)); } /* Glass menu used for the “Other” dropdown. It uses the same glassmorphism effect as the header: semi‑transparent surface, blur and subtle border. A small animation makes it float into view. */ .glass-menu{ position:absolute; top:100%; left:0; min-width:180px; /* Simple dropdown menu: use a solid background and subtle border instead of glass effects. List items stack vertically and the container casts a small shadow for depth. */ background:var(--bg); border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.08); padding:4px 0; display:flex; flex-direction:column; gap:0; transition:opacity 0.2s ease, transform 0.2s ease; opacity:1; transform:translateY(0); z-index:100; } .glass-menu[hidden]{ opacity:0; pointer-events:none; transform:translateY(-6px); } /* Dark mode variant for the dropdown menu */ :root[data-theme='dark'] .glass-menu{ background:var(--bg); border:1px solid var(--line); box-shadow:0 4px 12px rgba(0,0,0,0.6); } /* Sepia mode variant for the dropdown menu */ :root[data-theme='sepia'] .glass-menu{ background:var(--bg); border:1px solid var(--line); box-shadow:0 4px 12px rgba(0,0,0,0.1); } /* When dark mode is toggled manually via data-theme="dark", adjust the header’s glass effect to suit the darker palette. */ :root[data-theme='dark'] .site-head{ background:rgba(12,14,18,0.75); border-bottom:1px solid rgba(255,255,255,0.1); box-shadow:0 2px 4px rgba(0,0,0,0.5); } .nav-row{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:4px 0} /* Align the brand and date horizontally within the left portion of the header */ .nav-left{display:flex;align-items:center;gap:8px} .brand{display:flex;align-items:center;gap:10px} .brand-text{font-weight:900;letter-spacing:.5px} .nav-date{ font-size:0.875rem; color:var(--muted); white-space:nowrap; } .primary{ display:flex; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; gap:16px; /* Hide scrollbars on nav items */ -ms-overflow-style:none; scrollbar-width:none; } .primary::-webkit-scrollbar{display:none} /* Navigation items are separated by a thin vertical divider. On larger screens the divider becomes visible; on small screens the items wrap with equal padding. */ .primary .tab{ padding:10px 12px; font-weight:600; text-transform:capitalize; display:inline-flex; align-items:center; justify-content:center; } .primary .tab:not(:last-child)::after{ content:none; } .primary .tab[data-core]{font-weight:700} .util{display:flex;align-items:center;gap:8px} .icon-btn{border:1px solid var(--line);background:transparent;border-radius:10px;padding:7px 9px;cursor:pointer} /* Theme toggle styling. Use a circular button to house the icon, matching the design of other utility buttons. */ #themeBtn{ border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; padding:0; } .badge{background:var(--ink);color:var(--bg);padding:2px 6px;border-radius:999px;font-size:12px;margin-left:6px} .search{position:relative} .search input{ border:1px solid var(--line); border-radius:12px; padding:6px 8px; min-width:180px; background:transparent; color:inherit; } .typeahead{position:absolute;left:0;right:0;top:110%;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px} .mobile-menu{ /* Stack links vertically for a simple dropdown feel. Use flexbox to layout items in a column with subtle spacing. */ display:flex; flex-direction:column; gap:4px; padding:8px; border-top:1px solid var(--line); background:var(--bg); box-shadow:0 4px 12px rgba(0,0,0,0.05); } .mobile-menu[hidden]{display:none} /* Style links inside the mobile menu */ .mobile-menu a{ padding:6px 12px; border-radius:8px; color:var(--ink); font-weight:500; text-decoration:none; display:block; } .mobile-menu a:hover{ background:color-mix(in srgb, var(--ink), var(--bg) 90%); color:var(--bg); } /* Mobile navigation toggle. Hidden by default and only appears on smaller screens. When shown, it acts as a circular icon button consistent with other utility icons. */ .mobile-toggle{ display:none; border:1px solid var(--line); border-radius:50%; background:var(--bg); font-size:1.4rem; line-height:1; width:32px; height:32px; cursor:pointer; align-items:center; justify-content:center; } @media (max-width: 720px) { /* Hide the desktop category bar and show the hamburger toggle on mobile. */ .category-bar{ display:none; } .mobile-toggle{ display:flex; } .mobile-menu{ grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; } } /* Subnav */ .subnav{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 16px} .chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 10px;cursor:pointer} .chip.active{background:var(--ink);color:var(--bg)} /* Trending bar */ /* Trending bar This component highlights the most talked about stories on the site. The bar sits directly below the navigation and uses a very subtle tint of the accent colour to set it apart from the rest of the page. To avoid overwhelming the user, the tint is kept extremely light. */ /* Trending bar The bar now contains a wrapped inner container to align with the page layout. The outer bar simply provides borders and a sticky position; the inner container handles horizontal scrolling and spacing. */ .trending{ position: sticky; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); margin: 0; margin-bottom: 32px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } /* Hide scrollbars on the trending list for WebKit */ .trending-inner{ display: flex; align-items: center; gap: 20px; overflow-x: auto; white-space: nowrap; padding: 4px 0; } .trending-inner::-webkit-scrollbar{ display: none; } /* Trending label Use a pill shaped badge with the site accent colour as the background and dark text for contrast. The fire icon is prepended via a pseudo‑element below. A slightly smaller font size keeps the pill compact. */ /* Trend label Use a subtle pill with the accent colour. Reduce the font size and remove the emoji; the label sits inline with the list and doesn’t dominate the bar. */ .trend-label{ font-size:0.75rem; font-weight:600; text-transform:uppercase; display:inline-flex; align-items:center; background: var(--topic-red); color: var(--bg); border-radius:999px; padding:3px 10px; margin-right:8px; } /* Prepend a fire emoji to the trending label */ /* Prepend a fire emoji to the trending label. Use a smaller emoji so it doesn’t overpower the text. */ .trend-label::before{ /* Remove the fire emoji from the “Hot” pill. A simple text label communicates the purpose without relying on an emoji. */ content: ''; display: none; } /* Badge used to indicate an author’s designation (e.g. Editor, Co‑Founder). Display a pill shaped label with the site’s accent colour and white text. */ .designation{ display:inline-block; margin-left:6px; padding:2px 6px; border-radius:999px; font-size:0.625rem; font-weight:600; text-transform:uppercase; background:var(--topic-red); color:var(--bg); } /* Trending list items. Increase the gap slightly and reduce font size for a more compact appearance. The separators are drawn as small dots between items. */ .trending-list{ display: flex; gap: 24px; flex: 1; min-width: 0; } .trending-list a{ color: var(--ink); font-weight:600; font-size: 0.8125rem; text-decoration: none; position: relative; padding-right: 12px; white-space: nowrap; } .trending-list a:not(:last-child)::after{ content: ''; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background: var(--muted); } /* Cards & grids */ .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;grid-auto-rows:1fr} .grid--mosaic{grid-template-columns:2fr 1fr 1fr} .card{ /* Card container with subtle border, rounded corners and a light shadow. The flex column layout ensures the call‑to‑action buttons stay pinned to the bottom even if the excerpt grows in height. */ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:color-mix(in srgb, var(--bg), white 4%); display:flex; flex-direction:column; height:100%; box-shadow:var(--shadow); transition:transform 0.15s ease, box-shadow 0.15s ease; } /* Elevate cards slightly on hover to create a sense of depth. A subtle translation and stronger shadow emphasise interactivity without being distracting. */ .card:hover{ transform:translateY(-3px); box-shadow:0 8px 16px rgba(0,0,0,0.08); } .card__img{ position:relative; line-height:0; } .card__img img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; } /* Overlay tag on top of card image */ .card__img .tag{ position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.6) !important; color:#fff !important; border:0 !important; border-radius:999px; padding:3px 8px; font-size:12px; text-transform:capitalize; } /* Exclusive badge on cards. Appears at the top left of the image when the article is flagged as exclusive or randomly selected. Uses the accent colour for the background with white text. */ /* Exclusive badge on cards. Move the label to the top right to avoid overlapping with the category tag on the left. Use a smaller border radius and increased letter spacing for a premium look. */ .exclusive-label{ position:absolute; top:8px; right:8px; left:auto; background:var(--topic-red); color:var(--bg); padding:3px 8px; border-radius:6px; font-size:0.7rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; pointer-events:none; } .card__body{ display:flex; flex-direction:column; flex:1; padding:12px; } .card__body .title{ margin:0; font-size:1rem; font-weight:600; } /* Call‑to‑action buttons inside cards */ .card .acts{ display:flex; gap:8px; margin-top:auto; } .card .acts .save{ /* Simplified save button. Remove the pill styling and use a plain text label. The colour indicates whether the article has been saved. Padding is removed so the button sits naturally at the bottom of the card. */ border: none; background: transparent; color: var(--topic-red); font-size: 0.875rem; font-weight: 600; cursor: pointer; padding: 0; transition: color 0.2s; } .card .acts .save.active{ color: var(--topic-red); } .card .acts .read{ padding:6px 12px; border-radius:999px; background:var(--ink); color:var(--bg); font-size:0.875rem; text-decoration:none; transition:background 0.2s; } .card .acts .read:hover{background:color-mix(in srgb, var(--ink), white 10%);} .card__body .excerpt{ margin:6px 0 12px 0; font-size:0.875rem; color:var(--muted); line-height:1.4; } /* * Article actions (Save and Share) * On article pages the save button allows the reader to bookmark the story * and the share button copies a link to the clipboard. Buttons are styled * similarly to the call‑to‑action buttons on cards but sized for the * wider article layout. A small gap separates them and margin above * ensures breathing room below the gallery. */ .article-actions{ display:flex; gap:12px; margin-top:16px; } .article-actions .save{ padding:8px 16px; border-radius:999px; border:1px solid var(--topic-red); background:transparent; color:var(--topic-red); font-size:1rem; cursor:pointer; transition:background 0.2s,color 0.2s; } .article-actions .save.active{ background:var(--topic-red); color:var(--bg); } .article-actions .share{ padding:8px 16px; border-radius:999px; border:1px solid var(--ink); background:var(--ink); color:var(--bg); font-size:1rem; cursor:pointer; transition:background 0.2s; } .article-actions .share:hover{ background:color-mix(in srgb, var(--ink), white 10%); } /* Comments section styling */ .comments{ margin-top:32px; padding-top:16px; border-top:1px solid var(--line); } .comments h3{ font-size:1.25rem; font-weight:700; margin:0 0 12px 0; } .comment-form{ display:flex; flex-direction:column; gap:8px; } .comment-form textarea{ width:100%; border:1px solid var(--line); border-radius:8px; padding:8px; font:inherit; resize:vertical; min-height:80px; background:color-mix(in srgb, var(--bg), white 3%); color:inherit; } .comment-form button{ align-self:flex-start; padding:6px 14px; border-radius:999px; border:1px solid var(--topic-red); background:var(--topic-red); color:var(--bg); font-size:0.875rem; font-weight:600; cursor:pointer; transition:background 0.2s; } .comment-form button:hover{ background:color-mix(in srgb, var(--topic-red), white 10%); } .comment-list{ margin-top:24px; display:flex; flex-direction:column; gap:16px; } .comment{ border:1px solid var(--line); border-radius:var(--radius); padding:12px; background:color-mix(in srgb, var(--bg), white 2%); } .comment p{ margin:0 0 8px 0; line-height:1.5; } .comment .comment-meta{ display:flex; align-items:center; gap:12px; font-size:0.8125rem; color:var(--muted); } .comment .comment-meta time{ white-space:nowrap; } .comment .vote{ background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:4px; font-size:0.875rem; color:var(--muted); } .comment .vote .count{ font-weight:600; font-size:0.75rem; margin-left:2px; } .comment .vote.active{ color:var(--topic-red); } /* Sepia theme. A warm reading mode that uses muted browns and creams. Users can toggle to sepia via the theme button. */ :root[data-theme='sepia']{ --bg:#f4f0e7; --ink:#3f372a; --muted:#7a6f60; --line:#d8d2c8; --topic-red:#b54648; --shadow:0 10px 30px rgba(0,0,0,0.05); } .card__body .acts{ margin-top:auto; display:flex; gap:8px; } .card--hero{display:grid;grid-template-columns:1.6fr 1fr;gap:12px} .card--hero .card__img img{aspect-ratio:16/9} .card--hero .title{font-size:1.5rem;line-height:1.3;margin:0 0 8px 0} /* Section headings on the home page (Latest stories, Sport, Arts & Culture) should stand out more with larger, bolder typography. */ /* Section headings should command attention and clearly delineate content areas. Increase the font size, add a bottom border and uppercase the text for stronger hierarchy. A slight letter spacing improves readability at larger sizes. */ /* Refined section headings. Large uppercase text was too playful for a serious news site. Reduce the size slightly, adjust weight and letter spacing, and add a striking accent underline using the site’s red. Keep the headings uppercase for hierarchy but avoid cartoonish proportions. */ /* Section headings. Use a refined style with a modest font size and weight. Headings no longer force uppercase; instead they rely on capitalised words. An accent bar appears below the heading via a pseudo element. The default accent colour is the site red, but category‑specific classes can override it (see below). */ .section-head h3{ font-size: 1.625rem; font-weight: 700; margin: 0; line-height: 1.2; color: var(--ink); position: relative; display: inline-block; padding-bottom: 0.5rem; } .section-head a{ margin-left: 1rem; font-size: 0.875rem; color: var(--muted); font-weight: 500; } .section-head a:hover{ text-decoration: underline; color: var(--topic-red); } .section-head h3::after{ content: ''; display: block; width: 40px; height: 3px; background: var(--topic-red); margin-top: 6px; border-radius: 2px; } /* Category‑specific accent colours for section headings */ .sport-head h3::after{ background: var(--sport); } .arts-head h3::after{ background: var(--arts); } .latest-head h3::after{ background: var(--topic-red); } .card--hero .dek{font-size:1rem;margin:0 0 16px 0;color:var(--muted)} .card--hero .card__body{padding:20px} /* Hero save button. Increase size slightly for prominence on the hero card and adjust colour contrast. */ .card--hero .acts .save{ font-size: 1rem; color: var(--topic-red); border: none; background: transparent; padding: 0; line-height: 1; cursor: pointer; } .card--hero .acts .save.active{ color: var(--topic-red); } .meta{color:var(--muted);font-size:13px;display:flex;gap:8px;align-items:center} .tag{border:1px solid var(--line);padding:2px 6px;border-radius:999px;font-weight:700} .tag.news{border-color:var(--news);color:var(--news)} .tag.sport{border-color:var(--sport);color:var(--sport)} .tag.arts{border-color:var(--arts);color:var(--arts)} /* Tags displayed inside meta rows (above card titles) should appear as plain coloured labels without a border. */ .meta .tag{border:none;padding:0;font-weight:700} .read{border:1px solid var(--line);border-radius:10px;padding:6px 10px} /* Additional spacing beneath the navigation on the home page. The hero section should breathe and not appear cramped against the header. */ .home .hero{ margin-top:24px; } /* Provide generous spacing between sections on the home page so that content areas do not feel cramped. The first section (hero) uses a slightly smaller margin for visual cohesion with the header. */ .home section{ margin-top:40px; } .home section:first-of-type{ margin-top:24px; } /* BlueSky widget — custom component to display social mentions. Each widget contains a series of posts, each with an avatar, username, handle, timestamp and the post text. */ .bluesky-widget{ margin-top:32px; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:color-mix(in srgb, var(--bg), white 2%); box-shadow:0 4px 12px rgba(0,0,0,0.05); display:flex; flex-direction:column; gap:20px; } .bluesky-widget h4{ margin:0 0 8px 0; font-size:1.5rem; font-weight:800; text-transform:uppercase; color:var(--topic-red); } .bluesky-post{ display:flex; gap:12px; align-items:flex-start; } .bluesky-post .avatar{ width:40px; height:40px; border-radius:50%; flex-shrink:0; background:var(--muted); } .bluesky-post .content{ flex:1; } .bluesky-post .content .username{ font-weight:700; } .bluesky-post .content .handle{ color:var(--muted); font-size:0.8125rem; margin-left:4px; } .bluesky-post .content .text{ margin:4px 0 0 0; line-height:1.5; } .bluesky-post .content .time{ color:var(--muted); font-size:0.75rem; margin-top:2px; } /* Article body typography — use a serif font for body text and ensure comfortable line height. Headings inside articles remain sans‑serif to provide contrast. */ .article-content{ font-family: Georgia, "Times New Roman", serif; font-size:1.05rem; line-height:1.65; } .article-content h2, .article-content h3, .article-content h4{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; font-weight:700; line-height:1.3; } /* Search results filters */ .search-filters{ display:flex; gap:16px; flex-wrap:wrap; margin:16px 0; align-items:center; } .search-filters label{ font-size:0.875rem; color:var(--muted); display:flex; align-items:center; gap:6px; } .search-filters select{ padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font-size:0.875rem; } .read{background:var(--ink);color:var(--bg)} /* When an article is saved, highlight the save button. */ .save.active{ /* When an article is saved, emphasise the label with a bolder weight. Remove the pill background so the button remains unobtrusive. */ background: transparent; color: var(--topic-red); font-weight: 700; } /* Provide additional variables for manual dark mode toggling. When the document has a data-theme attribute set to "dark", override the colours defined on the root element. This replicates the behaviour of the `prefers-color-scheme` media query but allows users to toggle themes manually. */ :root[data-theme='dark']{ --bg:#0a0b0d; --ink:#ecf0f4; --muted:#95a0ad; --line:#1f232a; --shadow:none; } /* Games row */ .games-row{display:flex;gap:8px;flex-wrap:wrap} .game{border:1px dashed var(--line);border-radius:12px;padding:10px 12px} /* Author pages */ .author-head{display:flex;gap:16px;align-items:center;margin-top:24px} .author-head .avatar{ width:64px;height:64px;border-radius:50%;display:flex; align-items:center;justify-content:center;font-size:2rem; font-weight:700; } .author-bio{color:var(--muted);margin-top:4px;font-size:0.9rem;line-height:1.4;} .author-articles h2{margin-top:32px;margin-bottom:12px;font-size:1.25rem;font-weight:700;} /* Article */ .article-wrap{max-width:820px} .article-body img#hero{width:100%;height:auto;border:1px solid var(--line);border-radius:12px} .mini-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px;position:relative} .mini-gallery[data-collapsed] img:nth-of-type(n+3){display:none} .mini-gallery .gallery-toggle{position:absolute;right:6px;bottom:6px;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 10px} #storyProgress{position:sticky;top:0;width:100%;height:4px;border:0;appearance:none} #storyProgress::-webkit-progress-bar{background:transparent} #storyProgress::-webkit-progress-value{background:var(--topic-red)} progress[value]{accent-color:var(--topic-red)} /* Footer */ .site-foot{border-top:1px solid var(--line);padding:18px 0;margin-top:24px} @media (max-width:900px){ .grid,.grid--mosaic{grid-template-columns:1fr 1fr} .card--hero{grid-template-columns:1fr} .search input{min-width:160px} } @media (max-width:600px){ .grid,.grid--mosaic{grid-template-columns:1fr} .brand-text{display:none} }