/* * The platform's own template. * * Deliberately plain: this is what a section falls back to when no template has * been chosen, and what a site looks like before anything is bought. Plain is * not the same as unstyled, though — until now it declared no stylesheet at * all, so a real site with real articles rendered as bare browser defaults: * bulleted lists, underlined blue links, images at their full pixel width. * * Everything is written in logical properties — inline-start, inline-end, * margin-inline — so the one file serves both directions. Direction comes from * the page's language and is set on ; there is no second stylesheet to * fall out of step with this one, which is the mistake the old system made with * its -ltr and -rtl layout pairs. */ :root { --uc-ink: #1f2430; --uc-ink-soft: #6b7280; --uc-line: #e4e6ec; --uc-accent: #2563eb; --uc-bg: #ffffff; --uc-bg-soft: #f7f8fa; --uc-width: 1140px; --uc-gap: 28px; --uc-radius: 8px; } /* ---------------------------------------------------------------- the page */ body { margin: 0; background: var(--uc-bg); color: var(--uc-ink); /* Cairo first, then the system's own. Naming Cairo ahead of the Latin faces costs Latin text nothing: the @font-face declares an Arabic unicode-range, so a Latin glyph is never looked for in it and falls straight through. Through a variable WITH THE STACK AS ITS FALLBACK, so this file still reads as the answer on its own and a section's own choice can still reach it — the template's editable list declares `--uc-font` and the composed head writes it where a section has set one. A bare `var(--uc-font)` would leave the page unstyled for every section that has not. */ font-family: var(--uc-font, 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif); font-size: var(--uc-font-size, 16px); line-height: 1.7; } img { max-width: 100%; height: auto; } a { color: var(--uc-accent); text-decoration: none; } a:hover { text-decoration: underline; } .uc-container { max-width: var(--uc-width); margin-inline: auto; padding-inline: 20px; } .uc-main { padding-block: 32px 56px; } /* -------------------------------------------------------------- the header */ .uc-header { border-bottom: 1px solid var(--uc-line); background: var(--uc-bg); padding-block: 18px; } .uc-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; } .uc-brand:hover { text-decoration: none; } .uc-brand img { max-height: 48px; width: auto; } .uc-brand-text { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; } .uc-slogan { margin: 2px 0 0; color: var(--uc-ink-soft); font-size: 0.9rem; } /* A centred header variant is a different arrangement of the same pieces. */ .uc-header-centred { text-align: center; } .uc-header-centred .uc-brand { justify-content: center; } /* ------------------------------------------------------------ the menu --- Written as a list because that is what a menu is; the bullets and the stacking are the browser's opinion, not ours. THE WHOLE MENU IS HERE, and until 11 August 2026 half of it was also in the engine's own site.css — two complete implementations, on every page. What the owner reported as «أبناء داخل أبناء» was the two of them together: measured in a real browser, on the dev server AND on the built site, the submenu computed `display: flex` at rest, so a parent's children stood permanently open on top of the menu. Neither `display: none` was losing to the other. Both lost to a third rule — `.uc-nav ul { display: flex }` — which also matches `ul.uc-nav-sub`, a submenu being a `ul` inside `.uc-nav`. (0,1,1) beats (0,1,0) whichever file loads first, which is why swapping the order would have proved nothing. So the flex row is `> ul` below: the top level lies across the page and a dropdown stacks, and those are two different lists. */ .uc-nav ul { list-style: none; margin: 0; padding: 0; } /* The CHILD combinator carries the whole fix. With a descendant selector this rule reaches the dropdown as well and forces it open for ever. */ .uc-nav > ul { display: flex; flex-wrap: wrap; gap: 4px 22px; } .uc-header .uc-nav { margin-top: 10px; } .uc-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; color: var(--uc-ink); font-weight: 500; border-bottom: 2px solid transparent; } .uc-nav a:hover { color: var(--uc-accent); text-decoration: none; } /* Both, because the two are set together and either alone reads as a fault: `is-current` is the class Nav.tsx puts on, `aria-current` is what a screen reader is told. */ .uc-nav a.is-current, .uc-nav a[aria-current] { color: var(--uc-accent); border-bottom-color: var(--uc-accent); } /* One level down, and one only: MenuService refuses a third — "A menu goes two levels deep. Put deeper structure on a page." So there is deliberately no rule here for a grandchild panel; if that limit is ever lifted, the level below this one goes BESIDE its parent (`top: 0; inset-inline-start: 100%`) and not under it. */ .uc-nav-parent { position: relative; } .uc-nav-sub { display: none; position: absolute; inset-inline-start: 0; top: 100%; z-index: 50; min-width: 190px; flex-direction: column; gap: 0; padding: 6px 0; background: var(--uc-bg); border: 1px solid var(--uc-line); border-radius: var(--uc-radius); box-shadow: 0 8px 24px rgba(31, 36, 48, 0.08); } .uc-nav-parent:hover > .uc-nav-sub, .uc-nav-parent:focus-within > .uc-nav-sub { display: flex; } .uc-nav-sub a { display: block; width: 100%; padding: 6px 16px; border-bottom: 0; white-space: nowrap; } /* A footer stands at the bottom of the page, so its dropdown opens UPWARDS. Under it the panel is drawn past the last thing in the document and a reader has to scroll into empty space to reach it. */ .uc-footer .uc-nav-sub { top: auto; bottom: 100%; } .uc-footer .uc-nav { margin-top: 8px; } .uc-footer .uc-nav a { color: var(--uc-ink-soft); font-size: 0.9rem; } /* Something to say there is more. A parent that looks exactly like a leaf is a link nobody presses, so its children may as well not be there. */ .uc-nav-parent > a::after { content: ''; display: inline-block; width: 0.36em; height: 0.36em; margin-inline-start: 0.1em; vertical-align: 0.15em; opacity: 0.6; /* PHYSICAL borders, deliberately, where everything else in this file is logical: the glyph is two sides of a square rotated into a chevron, and the logical pair resolves to the LEFT and bottom sides in Arabic — a mark pointing down in English and down-left in Arabic. Which way it points is said once, in the transform, where it can be read. */ border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); } /* ------------------------------------------------------------ the layouts */ .uc-layout { display: grid; gap: var(--uc-gap); } .uc-layout-sidebar { grid-template-columns: minmax(0, 1fr); } .uc-layout-three { grid-template-columns: minmax(0, 1fr); } /* The sidebar first, which is `content-sidebar` mirrored. Its own rule and not `direction`, because the ORDER is the arrangement and must not flip with the language — on an Arabic site «sidebar, then content» still means the sidebar comes first, which puts it on the right. */ .uc-layout-side-first { grid-template-columns: minmax(0, 1fr); } /* Two halves, neither subordinate. */ .uc-layout-two { grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .uc-layout-sidebar { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); } .uc-layout-side-first { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); } .uc-layout-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .uc-layout-three { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr); } } /* A narrower measure for a page that is mostly words. Not a fixed width: it narrows the container it is ALREADY in, so it can never be wider than the page's own gutters allow on a small screen. */ .uc-narrow { max-width: 780px; } .uc-col-side > * + * { margin-top: var(--uc-gap); } /* -------------------------------------------------------------- the lists */ .uc-articles-heading { margin: 0 0 18px; font-size: 1.3rem; font-weight: 700; } /* A list of articles, again as a real list without the browser's bullets. The column count the placement asked for comes through as a data attribute, so one rule serves every choice. */ .uc-article-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--uc-gap); grid-template-columns: minmax(0, 1fr); } @media (min-width: 620px) { .uc-article-list[data-columns='2'], .uc-article-list[data-columns='3'], .uc-article-list[data-columns='4'] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 940px) { .uc-article-list[data-columns='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .uc-article-list[data-columns='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .uc-article { min-width: 0; } .uc-article-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--uc-radius); display: block; } .uc-article-title { margin: 12px 0 6px; font-size: 1.05rem; line-height: 1.45; font-weight: 600; } .uc-article-title a { color: inherit; } .uc-article-title a:hover { color: var(--uc-accent); text-decoration: none; } /* The line under the headline: date, category, how many have read it. */ .uc-article-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: var(--uc-ink-soft); font-size: 0.82rem; } .uc-article-category { color: var(--uc-accent); font-weight: 600; } .uc-article-summary { margin: 8px 0 0; color: var(--uc-ink-soft); font-size: 0.94rem; } /* ------------------------------------------------------------- one article */ .uc-article-detail { max-width: 760px; } /* Full width when it is the only thing on the page and nothing sits beside it. */ .uc-layout > .uc-col-main > .uc-article-detail { margin-inline: auto; } .uc-article-detail h1 { margin: 0 0 10px; font-size: 2rem; line-height: 1.3; font-weight: 700; } .uc-article-detail .uc-article-image { aspect-ratio: auto; margin-block: 20px; } .uc-article-detail h2, .uc-article-detail h3 { margin: 32px 0 10px; line-height: 1.35; } .uc-article-detail p { margin: 0 0 18px; } .uc-article-detail figure { margin: 24px 0; } .uc-article-detail figure img { border-radius: var(--uc-radius); } .uc-article-detail figcaption { margin-top: 8px; color: var(--uc-ink-soft); font-size: 0.85rem; } .uc-article-detail blockquote { margin: 24px 0; padding: 4px 20px; border-inline-start: 3px solid var(--uc-accent); color: var(--uc-ink); font-size: 1.08rem; } .uc-article-more { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--uc-line); } /* ---------------------------------------------------------------- the tags */ .uc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .uc-tag { display: inline-block; padding: 4px 12px; border: 1px solid var(--uc-line); border-radius: 999px; background: var(--uc-bg-soft); color: var(--uc-ink-soft); font-size: 0.82rem; } .uc-tag:hover { border-color: var(--uc-accent); color: var(--uc-accent); text-decoration: none; } /* ---------------------------------------------------------------- the text */ .uc-html > *:first-child { margin-top: 0; } .uc-html > *:last-child { margin-bottom: 0; } .uc-html img { border-radius: var(--uc-radius); } .uc-html table { width: 100%; border-collapse: collapse; } .uc-html th, .uc-html td { padding: 8px 10px; border: 1px solid var(--uc-line); text-align: start; } /* The card variant of the same block. */ .uc-html-card { padding: 22px; background: var(--uc-bg-soft); border: 1px solid var(--uc-line); border-radius: var(--uc-radius); } /* ------------------------------------------------------------ the pagination */ .pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 36px 0 0; padding: 0; } .page-link { display: inline-block; min-width: 38px; padding: 6px 12px; border: 1px solid var(--uc-line); border-radius: var(--uc-radius); color: var(--uc-ink); text-align: center; } .page-link:hover { border-color: var(--uc-accent); color: var(--uc-accent); text-decoration: none; } .pagination .active > .page-link, .page-link[aria-current] { background: var(--uc-accent); border-color: var(--uc-accent); color: #fff; } .pagination .disabled > .page-link { opacity: 0.45; pointer-events: none; } /* ------------------------------------------------------------- the footer */ .uc-footer { margin-top: 64px; padding-block: 28px; border-top: 1px solid var(--uc-line); background: var(--uc-bg-soft); color: var(--uc-ink-soft); font-size: 0.9rem; } .uc-footer nav ul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 10px; } .uc-footer a { color: inherit; } .uc-footer a:hover { color: var(--uc-accent); } /* ------------------------------------------------------- small conveniences A handful of Bootstrap-shaped names appear in the shared partials. They are defined here so those partials render the same in this template as they do in one that ships Bootstrap. */ .text-center { text-align: center; } .text-muted { color: var(--uc-ink-soft); } .small { font-size: 0.85rem; } .mt-2 { margin-top: 0.5rem; } .my-3 { margin-block: 1rem; } .my-4 { margin-block: 1.5rem; } .mt-5 { margin-top: 3rem; } .justify-content-center { justify-content: center; } .ratio { position: relative; width: 100%; } .ratio::before { content: ''; display: block; padding-top: var(--uc-ratio, 56.25%); } .ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ratio-16x9 { --uc-ratio: 56.25%; } /* --- Banners ------------------------------------------------------------- */ /* One at a time, in flow. No stacking and no fading: this template draws the caption under the picture, so the box changes height between banners and an absolute layout would clip whichever caption is longest. */ .uc-banner { margin: 1.5rem 0; } .uc-banner-slide { margin: 0; } .uc-banner-slide img { display: block; width: 100%; height: auto; border-radius: 0.35rem; } .uc-banner-slide figcaption { padding-block-start: 0.6rem; } .uc-banner-slide figcaption p { margin: 0.25rem 0 0; } .uc-banner-caption { opacity: 0.7; } /* --- Advertisements ------------------------------------------------------ */ .uc-ads { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; } /* The network decides the size of what it draws; this only keeps it from pushing the page sideways on a narrow screen. */ /* Which screens a unit is for, decided by the width of the window. Never by reading the user agent: that string is a museum of other browsers' names, and a site that reads it gets narrower every year with nobody touching it. */ /* What the composer shows instead of running the code. */ .uc-ad-placeholder { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem; border: 1px dashed rgba(128, 128, 128, 0.6); border-radius: 0.35rem; text-align: center; font-size: 0.85rem; opacity: 0.75; } /* --- One member ---------------------------------------------------------- */ .uc-member-head { display: flex; align-items: center; gap: 1rem; margin-block-end: 1.5rem; } .uc-member-avatar { width: 96px; height: 96px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; } /* The first letter where there is no picture. A grey circle says nothing; a letter says which of the two people with the same first name this is. */ .uc-member-initial { display: flex; align-items: center; justify-content: center; background: rgba(128, 128, 128, 0.18); font-size: 2.25rem; font-weight: 600; line-height: 1; } .uc-member-title { opacity: 0.75; } /* The member's own prose, with the line breaks they typed. */ .uc-member-about p { white-space: pre-wrap; } .uc-member-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; } .uc-member-links li { display: flex; align-items: center; gap: 0.4rem; } .uc-member-signin { opacity: 0.75; margin-block-start: 0.5rem; } /* A tag with nowhere to lead. Same shape, no hand cursor, no hover — it has to read as a label rather than a link somebody failed to style. */ .uc-tags .uc-tag.is-plain { opacity: 0.65; cursor: default; } .uc-tags .uc-tag.is-plain:hover { border-color: rgba(128, 128, 128, 0.35); } /* Several banners, stacked. This template never positioned them absolutely, so a still banner only needs air between the pictures. */ .uc-banner.still { display: grid; gap: 1.25rem; } /* The slider: the one that moves. Flat like everything else here — the picture, the words under it, the controls under those. */ .uc-slider { margin: 1.5rem 0; } .uc-slider-slide { margin: 0; } .uc-slider-slide img, .uc-slider-slide video { display: block; width: 100%; height: auto; border-radius: 0.35rem; } .uc-slider-slide figcaption { padding-block-start: 0.6rem; } .uc-slider-slide figcaption p { margin: 0.25rem 0 0; } /* A real link here, not a span: this caption sits outside the picture's link, so there is no link to nest it inside. */ .uc-slider-button { display: inline-block; margin-block-start: 0.6rem; padding: 0.35rem 1rem; border: 1px solid currentColor; border-radius: 2rem; text-decoration: none; color: inherit; } .uc-slider-controls { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding-block-start: 0.6rem; } .uc-slider-controls > button { border: 1px solid currentColor; border-radius: 50%; width: 1.9rem; height: 1.9rem; background: none; color: inherit; line-height: 1; } .uc-slider-dots { display: flex; gap: 0.4rem; } .uc-slider-dots button { width: 0.6rem; height: 0.6rem; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: none; } .uc-slider-dots button.on { background: currentColor; } /* The news slider, flat like everything else here: the words under the picture, the category and date above the headline. */ .uc-news-slider-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.35rem; font-size: 0.85rem; opacity: 0.75; } .uc-news-slider-category { font-weight: 600; text-decoration: none; color: inherit; } /* =========================================================================== THE LAYER THE PORTED COMPONENTS STAND ON. Added 11 August 2026, when this template took on every addon so that one section could carry all of them at once. Thirty-nine components came from the other four designs, and they arrange themselves with the vocabulary THOSE designs ship — a twelve-column grid, a handful of utilities, a table, a card, an icon font. This template ships none of it and must not: it is the one that has to reach 100% on Lighthouse, and the smallest framework here is 227 KB against the four hundred lines below. Every class in it was DERIVED FROM THE MARKUP rather than written from memory — 119 names read out of the forty-three files that came across — so nothing is here that nothing uses, and nothing that is used is missing. ======================================================================== */ /* --- A grid, ours, and not Bootstrap --------------------------------------- Every component ported into this template from another one arranges itself with `container`, `row` and `col-*`, because the templates they came from ship a framework. This template does not, and must not: it is the one that has to reach 100% on Lighthouse, and the smallest framework here is 227 KB against the hundred lines below. Twelve columns because that is what the ported markup counts in. Written in LOGICAL properties, so the one file serves both directions — a physical `padding-left` would need a mirror rule, and the mirror is what falls out of step. */ .container { width: 100%; max-width: var(--uc-width); margin-inline: auto; padding-inline: 20px; } .row { display: flex; flex-wrap: wrap; margin-inline: -12px; } /* Every child of a row is a column, so a col with no width still sits in the gutter rather than against its neighbour. */ .row > * { flex: 1 0 0%; max-width: 100%; padding-inline: 12px; } .col-1 { flex: 0 0 auto; width: 8.333333%; } .col-2 { flex: 0 0 auto; width: 16.666667%; } .col-3 { flex: 0 0 auto; width: 25%; } .col-4 { flex: 0 0 auto; width: 33.333333%; } .col-5 { flex: 0 0 auto; width: 41.666667%; } .col-6 { flex: 0 0 auto; width: 50%; } .col-7 { flex: 0 0 auto; width: 58.333333%; } .col-8 { flex: 0 0 auto; width: 66.666667%; } .col-9 { flex: 0 0 auto; width: 75%; } .col-10 { flex: 0 0 auto; width: 83.333333%; } .col-11 { flex: 0 0 auto; width: 91.666667%; } .col-12 { flex: 0 0 auto; width: 100%; } @media (min-width: 576px) { .col-sm-1 { flex: 0 0 auto; width: 8.333333%; } .col-sm-2 { flex: 0 0 auto; width: 16.666667%; } .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-4 { flex: 0 0 auto; width: 33.333333%; } .col-sm-5 { flex: 0 0 auto; width: 41.666667%; } .col-sm-6 { flex: 0 0 auto; width: 50%; } .col-sm-7 { flex: 0 0 auto; width: 58.333333%; } .col-sm-8 { flex: 0 0 auto; width: 66.666667%; } .col-sm-9 { flex: 0 0 auto; width: 75%; } .col-sm-10 { flex: 0 0 auto; width: 83.333333%; } .col-sm-11 { flex: 0 0 auto; width: 91.666667%; } .col-sm-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 768px) { .col-md-1 { flex: 0 0 auto; width: 8.333333%; } .col-md-2 { flex: 0 0 auto; width: 16.666667%; } .col-md-3 { flex: 0 0 auto; width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.333333%; } .col-md-5 { flex: 0 0 auto; width: 41.666667%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.333333%; } .col-md-8 { flex: 0 0 auto; width: 66.666667%; } .col-md-9 { flex: 0 0 auto; width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.333333%; } .col-md-11 { flex: 0 0 auto; width: 91.666667%; } .col-md-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 992px) { .col-lg-1 { flex: 0 0 auto; width: 8.333333%; } .col-lg-2 { flex: 0 0 auto; width: 16.666667%; } .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.333333%; } .col-lg-5 { flex: 0 0 auto; width: 41.666667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; } .col-lg-7 { flex: 0 0 auto; width: 58.333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.666667%; } .col-lg-9 { flex: 0 0 auto; width: 75%; } .col-lg-10 { flex: 0 0 auto; width: 83.333333%; } .col-lg-11 { flex: 0 0 auto; width: 91.666667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 1200px) { .col-xl-1 { flex: 0 0 auto; width: 8.333333%; } .col-xl-2 { flex: 0 0 auto; width: 16.666667%; } .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-4 { flex: 0 0 auto; width: 33.333333%; } .col-xl-5 { flex: 0 0 auto; width: 41.666667%; } .col-xl-6 { flex: 0 0 auto; width: 50%; } .col-xl-7 { flex: 0 0 auto; width: 58.333333%; } .col-xl-8 { flex: 0 0 auto; width: 66.666667%; } .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-10 { flex: 0 0 auto; width: 83.333333%; } .col-xl-11 { flex: 0 0 auto; width: 91.666667%; } .col-xl-12 { flex: 0 0 auto; width: 100%; } } /* --- Spacing, text and flex ------------------------------------------------- Exactly the utilities the ported components ask for and no more. Derived from the markup rather than written from memory: a list of names somebody types out always misses the one nobody thinks of, and always carries a dozen nothing ever uses. */ .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; } .mb-5 { margin-bottom: 40px; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } /* Logical, so they fall on the correct side in Arabic without a second rule. */ .ms-1 { margin-inline-start: 4px; } .ms-2 { margin-inline-start: 8px; } /* The source themes' own vertical rhythm classes. Kept under their own names rather than edited out of forty files: they are ordinary spacing, they read as spacing, and a port that has to rewrite every wrapper is a port nobody finishes. */ .pb-40 { padding-bottom: 32px; } .gutter-30 > * { margin-bottom: 24px; } .gutter-40 > * { margin-bottom: 32px; } .col-mb-30 > * { margin-bottom: 24px; } .gap { gap: 12px; } .gap-2 { gap: 8px; } .d-flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .align-items-center { align-items: center; } .align-middle { vertical-align: middle; } .h-100 { height: 100%; } .w-100 { width: 100%; } .text-muted { color: var(--uc-ink-soft); } .text-danger { color: #b02a37; } .text-success { color: #146c43; } .text-nowrap { white-space: nowrap; } .text-end { text-align: end; } .fw-bold { font-weight: 700; } .small { font-size: 0.85em; } .h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 10px; } /* --- Icons, WITHOUT AN ICON FONT -------------------------------------------- The ported components carry Font Awesome names, and this template loads no icon font. It must not: it is the one that has to reach 100 on Lighthouse, and a font is a render-blocking request and eighty kilobytes for eight glyphs. So each mark is a Unicode character in `content`. No file, no request, and it inherits the colour and the size of the text beside it. The characters are the ones every system font already carries — deliberately not emoji, which arrive in colour and at the wrong weight. Marked `aria-hidden` at every call site, and every one of them sits beside real words, so nothing is lost to a reader who sees no glyph at all. */ .fa { font-style: normal; font-variant: normal; line-height: 1; display: inline-block; } .fa-phone::before { content: '\260E'; } .fa-map-marker::before, .fa-map-o::before { content: '\1F5FA'; } .fa-location-arrow::before { content: '\27A4'; } .fa-globe::before { content: '\1F310'; } .fa-envelope-o::before { content: '\2709'; } .fa-check-circle::before { content: '\2714'; } /* The captcha's 'try another' button. */ .fa-refresh::before { content: '\21BB'; } /* WhatsApp has no character of its own — nothing in Unicode names a company. A telephone is what the button actually offers, and the word beside it says which one. */ .fa-whatsapp::before { content: '\260E'; } /* --- The few framework components the ported markup uses -------------------- */ .table { width: 100%; border-collapse: collapse; margin-bottom: 16px; } .table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--uc-line); text-align: start; } .table th { font-weight: 600; } .table-sm th, .table-sm td { padding: 6px 8px; } /* A wide table on a narrow screen scrolls INSIDE its own box. The page body must never scroll sideways — that is the one thing a reader cannot undo. */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .card { background: var(--uc-bg); border: 1px solid var(--uc-line); border-radius: var(--uc-radius); } .card-body { padding: 16px 18px; } .badge { display: inline-block; padding: 2px 8px; font-size: 0.78em; font-weight: 600; border-radius: 999px; background: var(--uc-bg-soft); color: var(--uc-ink); } .bg-danger { background: #b02a37; color: #fff; } .button, .button-large, .button-rounded, .button-3d, .button-border { display: inline-block; padding: 9px 18px; border: 1px solid var(--uc-accent); border-radius: var(--uc-radius); background: var(--uc-accent); color: #fff; font-weight: 600; line-height: 1.4; cursor: pointer; text-decoration: none; } .button:hover { text-decoration: none; filter: brightness(0.94); } .button-large { padding: 12px 26px; font-size: 1.05rem; } .button-rounded { border-radius: 999px; } /* The outlined one, which is a second button beside a first and must not read as the same press. */ .button-border { background: transparent; color: var(--uc-accent); } .submit, .form-submit button { cursor: pointer; } .nav { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .nav-tabs { border-bottom: 1px solid var(--uc-line); gap: 2px; } .nav-item > a, .nav-tabs a { display: inline-block; padding: 8px 14px; color: var(--uc-ink); border: 1px solid transparent; border-bottom: 0; border-radius: var(--uc-radius) var(--uc-radius) 0 0; } .nav-tabs a.active { background: var(--uc-bg); border-color: var(--uc-line); color: var(--uc-accent); } .tab-content { padding-top: 16px; } /* A whole card made pressable without wrapping it in an anchor — a button inside a link fires the link too, and a link inside a link is not valid markup. The sheet covers only what it is placed over. */ .link-overlay { position: absolute; inset: 0; z-index: 1; } .avatar { border-radius: 50%; object-fit: cover; } /* --- The blocks the ported components name ----------------------------------- Comments, an author's box, a sidebar widget, a tag cloud, a grid of cards. These names are the source themes' — `comment-body`, `author-info`, `widget-title`, `post-grid` — and they are kept rather than edited out of forty files, because each of them says plainly what it is and a port that has to rewrite every wrapper is a port nobody finishes. Drawn plainly, which is this template's whole character: it is what a section falls back to when no design has been chosen, and what a site looks like before anything is bought. Plain is not the same as unstyled. */ .post-grid, .grid-inner { display: grid; gap: var(--uc-gap); grid-template-columns: minmax(0, 1fr); } @media (min-width: 620px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 940px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .single-default-news, .news-content { min-width: 0; } .post-meta-info { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; padding: 0; list-style: none; color: var(--uc-ink-soft); font-size: 0.85rem; } /* --- A sidebar widget -------------------------------------------------------- */ .widget { margin-bottom: var(--uc-gap); padding: 18px 20px; background: var(--uc-bg-soft); border-radius: var(--uc-radius); } .widget-title { margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; } .widget ul { margin: 0; padding: 0; list-style: none; } .widget li + li { margin-top: 6px; } .tagcloud { display: flex; flex-wrap: wrap; gap: 6px; } .tagcloud a { display: inline-block; padding: 3px 10px; border: 1px solid var(--uc-line); border-radius: 999px; font-size: 0.85rem; color: var(--uc-ink); } .tagcloud a:hover { border-color: var(--uc-accent); color: var(--uc-accent); text-decoration: none; } .tag-link-count { color: var(--uc-ink-soft); } /* --- Who wrote it ------------------------------------------------------------ */ .author-area, .author-box { display: flex; gap: 16px; padding: 18px 20px; background: var(--uc-bg-soft); border-radius: var(--uc-radius); margin-bottom: var(--uc-gap); } .author-box .avatar, .author-area .avatar { width: 76px; height: 76px; flex: 0 0 auto; } .author-info { min-width: 0; } .author-title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; } /* --- What readers said ------------------------------------------------------- The names are WordPress's, which is what every one of these themes derives its comment markup from — so they are the same in all four and a reader of any of them recognises them. */ .comments-area { margin-top: var(--uc-gap); } .comments-title, .comment-reply-title { margin: 0 0 16px; font-size: 1.15rem; font-weight: 700; } .comment-list, .comment-list ul { margin: 0; padding: 0; list-style: none; } /* A reply sits under what it answers, indented from the reading edge. */ .comment-list .children { margin-inline-start: 26px; padding-inline-start: 14px; border-inline-start: 2px solid var(--uc-line); } .comment-body { padding: 14px 0; border-bottom: 1px solid var(--uc-line); } .comment-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .comment-author, .comment-author-link, .vcard .fn { font-weight: 600; font-style: normal; } .comment-metadata, .comment-metadata a { color: var(--uc-ink-soft); font-size: 0.82rem; } .comment-content p:last-child { margin-bottom: 0; } .comment-reply-link { font-size: 0.85rem; font-weight: 600; } .comment-respond { margin-top: var(--uc-gap); } .comment-form-comment { margin-bottom: 12px; } .comment .avatar { width: 44px; height: 44px; } /* --- Signing in, and the register form's own two labels ---------------------- */ .account-desc { margin-top: 14px; font-size: 0.9rem; } .forget { font-size: 0.85rem; } .agree-label { font-weight: 400; } .comment-form { margin-top: 12px; } /* --- The menu on a narrow screen ------------------------------------------- His word, after the mobile sweep found this design was the only one of the five with no way into its menu at 375px. It did not break the page — the items wrapped — but six of them became four lines of links standing above the content, and a section with a real menu pushed the page itself off the first screen. WRAPPING IS NOT THE SAME AS FITTING. The button is drawn at every width and hidden above the fold-point here, so the menu is one component and nothing re-renders when a window crosses the breakpoint. 992px is the same line canvas and porto fold at. */ .uc-nav-toggle { display: none; width: 42px; height: 38px; padding: 9px 10px; border: 1px solid var(--uc-line); border-radius: var(--uc-radius); background: var(--uc-bg); cursor: pointer; } .uc-nav-toggle span { display: block; height: 2px; background: var(--uc-ink); border-radius: 2px; } .uc-nav-toggle span + span { margin-top: 4px; } @media (max-width: 991px) { .uc-nav-toggle { display: block; } /* Shut by default, which is the only honest starting state: a menu that opens itself has taken the choice away. */ .uc-nav > ul { display: none; width: 100%; } .uc-nav.is-open > ul { display: block; } /* Stacked rather than floating. A panel positioned over a phone's menu covers the items under it and has nowhere to go. */ .uc-nav-sub { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 0; padding-inline-start: 14px; min-width: 0; } /* Open already, because the panel is inline: hiding it would need the press the floating one needs, and there is no room won by hiding it here. */ .uc-nav-parent > a::after { display: none; } .uc-nav a { padding: 8px 0; } }