/* ============================================================================= Skin engine ----------------------------------------------------------------------------- Loaded ONLY when an account has chosen a skin other than "Classic". Every rule is scoped to `.sk` on , so it can never touch a site that is still on the original design. All colour comes from CSS custom properties generated per-account in PHP (inc/skins.php -> skin_css_vars), which is what makes every skin fully colour-editable. This file only describes *form*: layout, rhythm, weight. ========================================================================== */ /* --------------------------------------------------------------------------- 1. Foundations ------------------------------------------------------------------------ */ .sk { /* All four fall back to the original values, so a site that has not chosen a page background or font colour renders exactly as it did before. */ --sk-ink: var(--heading-text, #101828); --sk-ink-2: var(--body-text, #475467); --sk-ink-3: var(--muted-text, #667085); --sk-line: var(--hairline, #e4e7ec); --sk-line-soft: #f1f3f7; /* fallback for older browsers */ --sk-line-soft: color-mix(in srgb, var(--hairline, #e4e7ec) 45%, var(--page-bg, #ffffff)); --sk-page: var(--page-bg, #ffffff); --sk-panel: var(--surface-alt, #f6f7f9); --sk-focus: 0 0 0 3px rgba(var(--brand-rgb, 9 137 255), .28); background: var(--sk-page); color: var(--sk-ink-2); font-size: var(--body-size, 14px); font-family: var(--font-body, 'Jost', system-ui, -apple-system, "Segoe UI", sans-serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Base heading style. :where() strips this rule's specificity to zero, so it acts as a genuine default that any component class overrides. Written as `.sk h2 {...}` it had specificity (0,1,1) and silently beat single-class rules like `.sk-feature__title { color:#fff }` (0,1,0) - which turned every white-on-image hero title and every footer heading dark. */ .sk :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading, 'Jost', system-ui, -apple-system, "Segoe UI", sans-serif); font-weight: var(--heading-weight, 700); letter-spacing: var(--heading-spacing, -0.01em); color: var(--sk-ink); line-height: 1.22; margin: 0; } .sk a { color: inherit; text-decoration: none; } /* Nothing may scroll the page sideways. `clip` (unlike `hidden`) does not create a scroll container, so the sticky header keeps working. The overflow-x:hidden line is the fallback for browsers without `clip`. */ .sk { overflow-x: hidden; } @supports (overflow-x: clip) { .sk { overflow-x: clip; } } .sk img, .sk video, .sk iframe, .sk table { max-width: 100%; } .sk *:focus-visible { outline: none; box-shadow: var(--sk-focus); border-radius: 4px; } .sk ::selection { background: var(--brand); color: var(--on-brand); } /* Keyboard users get a real skip link; it stays out of the way otherwise. */ .sk-skiplink { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--brand); color: var(--on-brand); padding: 10px 18px; border-radius: 0 0 var(--radius, 6px) 0; font-weight: 600; } .sk-skiplink:focus { left: 0; } /* Layout scaffolding ------------------------------------------------------ */ .sk-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px; } .sk-section { padding-block: var(--section-gap, 64px); } .sk-section--tight { padding-block: calc(var(--section-gap, 64px) * .6); } .sk-section--flush-top { padding-top: 0; } .sk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 48px; align-items: start; } .sk-layout--sidebar-left { grid-template-columns: 330px minmax(0, 1fr); } .sk-layout--sidebar-left > .sk-main { order: 2; } .sk-layout--sidebar-left > .sk-aside { order: 1; } .sk-layout--no-sidebar { grid-template-columns: minmax(0, 1fr); max-width: var(--measure, 100%); margin-inline: auto; } /* Section heads ----------------------------------------------------------- */ .sk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 26px; padding-bottom: 14px; border-bottom: var(--rule-weight, 1px) solid var(--sk-line); } .sk-head__title { font-size: 1.05rem; text-transform: var(--kicker-case, none); letter-spacing: var(--kicker-spacing, .04em); position: relative; } .sk-head__link { font-size: .8rem; font-weight: 600; color: var(--brand); white-space: nowrap; } .sk-head__link:hover { color: var(--brand-hover); } /* Kickers / category chips ------------------------------------------------ */ .sk-kicker { display: inline-block; font-size: .68rem; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); margin-bottom: 10px; } .sk-chip { display: inline-flex; align-items: center; gap: 5px; /* Generous vertical padding and a real line-height: with line-height 1 the uppercase labels sat flush against the pill edges and adjacent rows read as if they were touching. */ padding: 7px 13px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; transition: background .15s ease, color .15s ease; } .sk-chip:hover { background: var(--brand); color: var(--on-brand); } /* Meta line --------------------------------------------------------------- */ .sk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .76rem; color: var(--sk-ink-3); margin-bottom: 10px; } .sk-meta > * { display: inline-flex; align-items: center; gap: 5px; } .sk-meta svg { width: 13px; height: 13px; flex: none; opacity: .7; } /* Buttons ----------------------------------------------------------------- */ .sk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border: 1px solid transparent; border-radius: var(--radius, 6px); background: var(--brand); color: var(--on-brand); font-weight: 600; font-size: .85rem; line-height: 1; cursor: pointer; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; } .sk-btn:hover { background: var(--brand-hover); color: var(--on-brand); transform: translateY(-1px); } .sk-btn:active { transform: none; } .sk-btn--ghost { background: transparent; border-color: var(--sk-line); color: var(--sk-ink); } .sk-btn--ghost:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); } .sk-btn--on-dark { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .38); color: #fff; backdrop-filter: blur(6px); } .sk-btn--on-dark:hover { background: #fff; color: var(--sk-ink); border-color: #fff; } .sk-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .82rem; color: var(--brand); } .sk-link svg { transition: transform .18s ease; } .sk-link:hover { color: var(--brand-hover); } .sk-link:hover svg { transform: translateX(3px); } /* Media ------------------------------------------------------------------- */ .sk-media { display: block; position: relative; overflow: hidden; border-radius: var(--radius, 6px); /* A tint rather than a flat grey, so the letterboxing around a "contain" image reads as part of the card instead of a gap. */ background: var(--sk-panel); aspect-ratio: var(--media-ratio, 16 / 9); } .sk-media img { width: 100%; height: 100%; /* Owner's choice: "contain" shows the whole image (nothing cropped away), "cover" fills the box. Set in Theme designer -> Images. */ object-fit: var(--media-fit, contain); object-position: center; display: block; transition: transform .5s cubic-bezier(.22, .61, .36, 1); } /* The zoom-on-hover only makes sense when the image already fills the box; on a contained image it would crop the edges the setting exists to protect. */ .sk-card:hover .sk-media img { transform: none; } .sk[data-media-fit="cover"] .sk-card:hover .sk-media img { transform: scale(1.045); } .sk-feature:hover .sk-media img { transform: scale(1.045); } /* --------------------------------------------------------------------------- 2. Header ------------------------------------------------------------------------ */ .sk-topbar { background: var(--header-bg); color: var(--on-header-muted); font-size: .78rem; border-bottom: 1px solid var(--header-border); } .sk-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; min-height: 42px; padding-block: 6px; } .sk-topbar a { color: var(--on-header-muted); } .sk-topbar a:hover { color: var(--on-header); } /* A long tagline truncates rather than pushing the contact links off-screen. */ .sk-topbar__welcome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sk-topbar__links { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; min-width: 0; } .sk-topbar__links a { white-space: nowrap; } .sk-topbar__links a { display: inline-flex; align-items: center; gap: 6px; } .sk-header { position: sticky; top: 0; z-index: 90; background: var(--sk-page); border-bottom: 1px solid var(--sk-line); transition: box-shadow .2s ease; } .sk-header.is-stuck { box-shadow: 0 6px 22px -14px rgba(16, 24, 40, .35); } .sk-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; } /* The logo and the action buttons keep their size; the nav is the part that has to cope with however many categories a site has. */ .sk-logo, .sk-header__actions { flex: 0 0 auto; } .sk-logo img { display: block; max-height: 52px; width: auto; object-fit: contain; } /* A site with a dozen categories used to push the header wider than the viewport, which scrolled the whole page sideways and clipped the logo. min-width:0 lets this flex item shrink; skin.js then moves whatever does not fit into a "More" dropdown. */ .sk-nav { flex: 1 1 auto; min-width: 0; /* Until skin.js has measured, the row is clipped rather than allowed to wrap. That keeps the header exactly one line tall from first paint, so there is no visible jump when the overflow menu appears a moment later. */ overflow: hidden; } /* Held back until the collapse has been calculated with the *final* font. visibility (not display) keeps the space reserved, so the header never changes height and nothing around it shifts. A safety timer in the inline script reveals the nav even if the webfont never arrives. */ .sk-nav { visibility: hidden; } .sk-nav.is-ready { overflow: visible; visibility: visible; } .sk-nav > ul { display: flex; align-items: center; flex-wrap: nowrap; gap: 2px 4px; list-style: none; margin: 0; padding: 0; } /* No-JS fallback: once the page is loaded without skin.js having marked the nav ready, let it wrap so every category is still reachable. */ .sk-nav:not(.is-ready) > ul { flex-wrap: nowrap; } .sk-nav li { position: relative; } .sk-nav > ul > li > a { display: inline-flex; align-items: center; gap: 5px; padding: 10px 12px; border-radius: var(--radius, 6px); font-weight: 600; font-size: .84rem; color: var(--sk-ink); text-transform: var(--kicker-case, none); letter-spacing: var(--kicker-spacing, .02em); /* A two-word category like "HestiaCP Panel" used to break onto two lines, which made the whole header taller and ragged. */ white-space: nowrap; transition: color .16s ease, background .16s ease; } .sk-nav > ul > li > a:hover, .sk-nav > ul > li.is-active > a { color: var(--brand); background: var(--brand-tint); } .sk-nav__sub { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--sk-page); border: 1px solid var(--sk-line); border-radius: var(--radius-lg, 10px); box-shadow: 0 18px 42px -22px rgba(16, 24, 40, .38); padding: 8px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 20; } .sk-nav li:hover > .sk-nav__sub { opacity: 1; visibility: visible; transform: none; } .sk-nav__sub a { display: block; padding: 9px 12px; border-radius: 6px; font-size: .82rem; color: var(--sk-ink-2); } .sk-nav__sub a:hover { background: var(--brand-tint); color: var(--brand-dark); } /* --- Overflow ("More") menu --------------------------------------------- Built by skin.js when the categories do not fit on one line. Its dropdown is a flat indented list rather than a flyout, so a category with children stays reachable without a second level of hover. */ .sk-nav__more { position: relative; } .sk-nav__more > a { white-space: nowrap; } .sk-nav__more[hidden] { display: none; } .sk-nav__more .sk-nav__sub { left: auto; right: 0; max-height: min(70vh, 520px); overflow-y: auto; min-width: 240px; } /* Nested submenus inside "More" become an indented section, not a flyout. */ .sk-nav__more .sk-nav__sub .sk-nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 4px 12px; min-width: 0; background: transparent; } .sk-nav__more .sk-nav__sub .sk-nav__sub a { font-size: .78rem; color: var(--sk-ink-3); padding: 6px 12px; } .sk-nav__more .sk-nav__sub > li > a > svg { display: none; } .sk-header__actions { display: flex; align-items: center; gap: 8px; } .sk-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--sk-line); border-radius: var(--radius, 6px); background: transparent; color: var(--sk-ink); cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease; } .sk-iconbtn:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); } .sk-burger { display: none; } /* Slide-down search ------------------------------------------------------- */ .sk-search { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; background: var(--sk-panel); border-bottom: 1px solid transparent; } .sk-search.is-open { grid-template-rows: 1fr; border-bottom-color: var(--sk-line); } .sk-search__inner { overflow: hidden; } .sk-search form { display: flex; gap: 10px; padding-block: 20px; } .sk-search input { flex: 1; height: 48px; padding: 0 16px; border: 1px solid var(--sk-line); border-radius: var(--radius, 6px); background: var(--sk-page); font-size: .95rem; color: var(--sk-ink); } .sk-search input:focus { outline: none; border-color: var(--brand); box-shadow: var(--sk-focus); } /* Mobile drawer ----------------------------------------------------------- */ .sk-drawer { position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); background: var(--sk-page); z-index: 120; transform: translateX(-102%); transition: transform .3s cubic-bezier(.22, .61, .36, 1); overflow-y: auto; padding: 22px; box-shadow: 22px 0 44px -30px rgba(16, 24, 40, .5); } .sk-drawer.is-open { transform: none; } .sk-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .sk-drawer ul { list-style: none; margin: 0; padding: 0; } .sk-drawer > ul > li > a, .sk-drawer__sub a { display: block; padding: 11px 4px; border-bottom: 1px solid var(--sk-line-soft); font-weight: 600; font-size: .9rem; color: var(--sk-ink); } .sk-drawer__sub a { padding-left: 16px; font-weight: 500; font-size: .84rem; color: var(--sk-ink-2); } .sk-scrim { position: fixed; inset: 0; background: rgba(16, 24, 40, .5); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; z-index: 110; } .sk-scrim.is-open { opacity: 1; visibility: visible; } /* --------------------------------------------------------------------------- 3. Hero variants ------------------------------------------------------------------------ */ /* -- slider -- A scroll-snap track: it works as a swipeable carousel with zero JS, and skin.js only adds the dots and autoplay on top. */ .sk-hero-slider { position: relative; overflow: hidden; } .sk-hero-slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .sk-hero-slider__track::-webkit-scrollbar { display: none; } .sk-slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; min-height: 440px; display: flex; align-items: flex-end; color: var(--hero-text, #fff); isolation: isolate; } .sk-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .sk-slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3, 8, 17, .1) 0%, rgba(3, 8, 17, .55) 55%, rgba(3, 8, 17, .88) 100%); } .sk-slide__body { padding-block: 46px; max-width: 720px; } .sk-slide__title { color: var(--hero-text, #fff); font-size: clamp(1.5rem, 3.4vw, 2.35rem); margin-bottom: 16px; text-wrap: balance; } .sk-slide .sk-meta { color: var(--hero-text-muted, rgba(255,255,255,.78)); } .sk-slide .sk-kicker { color: var(--hero-text, #fff); opacity: .9; } .sk-hero-slider__dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; } .sk-hero-slider__dots button { width: 26px; height: 4px; border: 0; padding: 0; border-radius: 2px; background: rgba(255, 255, 255, .42); cursor: pointer; transition: background .2s ease, width .2s ease; } .sk-hero-slider__dots button.is-active { background: #fff; width: 40px; } /* -- feature (one large + two stacked) -- */ .sk-hero-feature { display: grid; grid-template-columns: 1.65fr 1fr; gap: 24px; } .sk-hero-feature__side { display: grid; gap: 24px; align-content: start; } .sk-feature { position: relative; display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--radius-lg, 10px); isolation: isolate; color: #fff; min-height: 240px; } .sk-feature--tall { min-height: 480px; } .sk-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .55s cubic-bezier(.22,.61,.36,1); } .sk-feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3, 8, 17, 0) 30%, rgba(3, 8, 17, .82) 100%); } .sk-feature:hover img { transform: scale(1.05); } .sk-feature__body { padding: 26px; width: 100%; } .sk-feature__title { color: var(--hero-text, #fff); font-size: clamp(1.05rem, 1.7vw, 1.6rem); text-wrap: balance; } .sk-feature--tall .sk-feature__title { font-size: clamp(1.4rem, 2.6vw, 2.1rem); } .sk-feature .sk-meta { color: var(--hero-text-muted, rgba(255,255,255,.76)); margin-bottom: 8px; } .sk-feature .sk-chip { background: rgba(255,255,255,.16); color: var(--hero-text, #fff); backdrop-filter: blur(4px); } /* -- split (image one side, text the other) -- */ .sk-hero-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; align-items: stretch; border-radius: var(--radius-lg, 10px); overflow: hidden; background: var(--sk-panel); } .sk-hero-split__media { position: relative; min-height: 400px; } .sk-hero-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sk-hero-split__body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; } .sk-hero-split__title { font-size: clamp(1.5rem, 2.9vw, 2.3rem); margin-bottom: 14px; text-wrap: balance; } .sk-hero-split__excerpt { color: var(--sk-ink-2); margin-bottom: 22px; max-width: 46ch; } /* -- banner (brand-coloured band with the lead story) -- */ .sk-hero-banner { position: relative; background: var(--brand); color: var(--on-brand); overflow: hidden; } .sk-hero-banner::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb, 255 255 255), .5), transparent 62%); opacity: .55; pointer-events: none; } .sk-hero-banner__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding-block: clamp(40px, 6vw, 78px); } .sk-hero-banner__title { color: var(--on-brand); font-size: clamp(1.7rem, 3.6vw, 2.7rem); margin-bottom: 16px; text-wrap: balance; } .sk-hero-banner__excerpt { color: var(--on-brand); opacity: .82; margin-bottom: 26px; max-width: 48ch; } .sk-hero-banner .sk-meta { color: var(--on-brand); opacity: .74; } .sk-hero-banner__media { border-radius: var(--radius-lg, 10px); overflow: hidden; aspect-ratio: 16 / 11; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); } .sk-hero-banner__media img { width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------------------------------- 4. Post grids ------------------------------------------------------------------------ */ .sk-grid { display: grid; gap: 30px; } .sk-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-grid--magazine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; } .sk-grid--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; } .sk-grid--overlay { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .sk-grid--list { grid-template-columns: minmax(0, 1fr); gap: 0; } .sk-card { display: flex; flex-direction: column; position: relative; } .sk-card__body { padding-top: 16px; display: flex; flex-direction: column; flex: 1; } .sk-card__title { font-size: var(--title-size, 1.2rem); margin-bottom: 10px; text-wrap: balance; } .sk-card__title a { background-image: linear-gradient(var(--brand), var(--brand)); background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s ease, color .16s ease; } .sk-card:hover .sk-card__title a { color: var(--brand); background-size: 100% 1.5px; } .sk-card__excerpt { color: var(--sk-ink-3); font-size: .85rem; margin-bottom: 14px; } .sk-card__foot { margin-top: auto; padding-top: 4px; } /* card treatments (driven by the skin's `card` token) */ .sk-card--elevated { background: var(--sk-page); border: 1px solid var(--sk-line-soft); border-radius: var(--radius-lg, 10px); box-shadow: var(--card-shadow, none); overflow: hidden; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; } .sk-card--elevated:hover { box-shadow: var(--card-shadow-hover, none); transform: translateY(-3px); border-color: var(--sk-line); } .sk-card--elevated .sk-media { border-radius: 0; } .sk-card--elevated .sk-card__body { padding: 20px 20px 22px; } .sk-card--outline { border: var(--rule-weight, 1px) solid var(--sk-ink); border-radius: var(--radius-lg, 0); overflow: hidden; transition: background .2s ease, color .2s ease; } .sk-card--outline .sk-media { border-radius: 0; } .sk-card--outline .sk-card__body { padding: 18px 18px 20px; } .sk-card--outline:hover { background: var(--brand-tint); } .sk-card--underline { padding-bottom: 26px; border-bottom: var(--rule-weight, 1px) solid var(--sk-line); } .sk-card--overlay { border-radius: var(--radius-lg, 10px); overflow: hidden; isolation: isolate; min-height: 320px; display: flex; align-items: flex-end; color: #fff; box-shadow: var(--card-shadow, none); } .sk-card--overlay .sk-media { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; height: 100%; z-index: -2; } .sk-card--overlay::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3, 8, 17, 0) 34%, rgba(3, 8, 17, .85) 100%); } .sk-card--overlay .sk-card__body { padding: 22px; } .sk-card--overlay .sk-card__title { color: var(--hero-text, #fff); } .sk-card--overlay .sk-meta { color: var(--hero-text-muted, rgba(255,255,255,.76)); } .sk-card--overlay .sk-card__excerpt { display: none; } .sk-card--overlay .sk-chip { background: rgba(255,255,255,.18); color: var(--hero-text, #fff); } /* list rows --------------------------------------------------------------- */ .sk-grid--list .sk-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; padding-block: 26px; border-bottom: var(--rule-weight, 1px) solid var(--sk-line); } .sk-grid--list .sk-card:first-child { padding-top: 0; } .sk-grid--list .sk-card__body { padding-top: 0; } .sk-grid--list .sk-media { aspect-ratio: 4 / 3; } /* --------------------------------------------------------------------------- 5. Sidebar ------------------------------------------------------------------------ */ .sk-widget { margin-bottom: 34px; } .sk-widget__title { font-size: .95rem; /* Clear space between the rule under the heading and whatever follows it. */ margin-bottom: 20px; padding-bottom: 12px; border-bottom: var(--rule-weight, 1px) solid var(--sk-line); text-transform: var(--kicker-case, none); letter-spacing: var(--kicker-spacing, .04em); } .sk-widget--panel { background: var(--sk-panel); border: 1px solid var(--sk-line-soft); border-radius: var(--radius-lg, 10px); padding: 22px; } .sk-searchbox { display: flex; gap: 0; border: 1px solid var(--sk-line); border-radius: var(--radius, 6px); overflow: hidden; background: var(--sk-page); } .sk-searchbox:focus-within { border-color: var(--brand); box-shadow: var(--sk-focus); } .sk-searchbox input { flex: 1; border: 0; padding: 12px 14px; font-size: .85rem; background: transparent; color: var(--sk-ink); min-width: 0; } .sk-searchbox input:focus { outline: none; } .sk-searchbox button { border: 0; background: var(--brand); color: var(--on-brand); padding-inline: 15px; cursor: pointer; display: grid; place-items: center; } .sk-searchbox button:hover { background: var(--brand-hover); } .sk-mini { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--sk-line-soft); } .sk-mini:last-child { border-bottom: 0; padding-bottom: 0; } /* Not zero: the first row needs to clear the rule under the widget heading. */ .sk-mini:first-child { padding-top: 6px; } .sk-mini__thumb { border-radius: var(--radius, 6px); overflow: hidden; aspect-ratio: 1; background: var(--sk-line-soft); } .sk-mini__thumb img { width: 100%; height: 100%; object-fit: var(--media-fit, contain); transition: transform .4s ease; } .sk-mini:hover .sk-mini__thumb img { transform: scale(1.07); } .sk-mini__title { font-size: .85rem; line-height: 1.35; } .sk-mini__title a:hover { color: var(--brand); } .sk-mini__date { font-size: .72rem; color: var(--sk-ink-3); margin-top: 5px; display: block; } .sk-rank { counter-reset: rank; } .sk-rank .sk-mini { grid-template-columns: 34px minmax(0, 1fr); } .sk-rank .sk-mini::before { counter-increment: rank; content: counter(rank, decimal-leading-zero); font-size: 1.1rem; font-weight: 700; color: var(--brand); opacity: .45; line-height: 1; } .sk-rank .sk-mini__thumb { display: none; } /* Topic chips. The row gap is larger than the column gap so wrapped rows read as separate lines rather than one dense block, plus a little breathing room below the heading's rule. */ .sk-taglist { display: flex; flex-wrap: wrap; gap: 11px 8px; padding-top: 2px; } /* --------------------------------------------------------------------------- 6. Pagination ------------------------------------------------------------------------ */ .sk-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 44px; flex-wrap: wrap; } .sk-pagination a, .sk-pagination span { min-width: 40px; height: 40px; padding-inline: 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sk-line); border-radius: var(--radius, 6px); font-size: .84rem; font-weight: 600; color: var(--sk-ink-2); transition: all .16s ease; } .sk-pagination a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); } .sk-pagination .is-current { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } /* --------------------------------------------------------------------------- 7. Newsletter — seven distinct designs ------------------------------------------------------------------------ */ .sk-news { position: relative; } .sk-news__title { font-size: clamp(1.25rem, 2.4vw, 1.85rem); margin-bottom: 8px; text-wrap: balance; } .sk-news__text { font-size: .88rem; opacity: .82; margin: 0; } .sk-news__form { display: flex; gap: 10px; width: 100%; max-width: 480px; } .sk-news__form input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border: 1px solid var(--sk-line); border-radius: var(--radius, 6px); background: #fff; color: var(--sk-ink); font-size: .9rem; } .sk-news__form input::placeholder { color: var(--sk-ink-3); } .sk-news__form input:focus { outline: none; border-color: var(--brand); box-shadow: var(--sk-focus); } .sk-news__form button { height: 50px; white-space: nowrap; } .sk-news__done { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: var(--radius, 6px); background: rgba(255, 255, 255, .16); font-weight: 600; } /* (a) classic — brand band, content left, form right */ .sk-news--classic { background: var(--brand); color: var(--on-brand); } .sk-news--classic .sk-news__title { color: var(--on-brand); } .sk-news--classic .sk-news__inner { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding-block: 54px; } .sk-news--classic .sk-news__form button { background: var(--sk-ink); color: #fff; } .sk-news--classic .sk-news__form button:hover { background: #000; } /* (b) panel — floating card over a tinted band */ .sk-news--panel { background: var(--sk-panel); } .sk-news--panel .sk-news__inner { padding-block: 60px; } .sk-news--panel .sk-news__card { background: var(--sk-page); border: 1px solid var(--sk-line); border-radius: var(--radius-lg, 10px); box-shadow: 0 26px 56px -34px rgba(16, 24, 40, .4); padding: clamp(28px, 4vw, 46px); text-align: center; max-width: 660px; margin-inline: auto; } .sk-news--panel .sk-news__form { margin-inline: auto; margin-top: 22px; } /* (c) split — divider between copy and form */ .sk-news--split { background: var(--sk-page); border-top: 1px solid var(--sk-line); border-bottom: 1px solid var(--sk-line); } .sk-news--split .sk-news__inner { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 44px; align-items: center; padding-block: 52px; } .sk-news--split .sk-news__rule { background: var(--sk-line); align-self: stretch; } /* (d) inline — one compact row, sits flush against the footer */ .sk-news--inline { background: var(--sk-panel); border-top: 1px solid var(--sk-line); } .sk-news--inline .sk-news__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 26px; flex-wrap: wrap; } .sk-news--inline .sk-news__title { font-size: 1.05rem; margin-bottom: 2px; } .sk-news--inline .sk-news__text { font-size: .8rem; } .sk-news--inline .sk-news__form { max-width: 420px; } .sk-news--inline .sk-news__form input { height: 44px; } .sk-news--inline .sk-news__form button { height: 44px; } /* (e) gradient — brand-to-accent sweep, large type */ .sk-news--gradient { background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 45%, var(--accent) 130%); color: var(--on-brand); } .sk-news--gradient .sk-news__title { color: var(--on-brand); } .sk-news--gradient .sk-news__inner { text-align: center; padding-block: clamp(48px, 7vw, 86px); } .sk-news--gradient .sk-news__form { margin-inline: auto; margin-top: 26px; } .sk-news--gradient .sk-news__form button { background: #fff; color: var(--brand-dark); } .sk-news--gradient .sk-news__form button:hover { background: rgba(255, 255, 255, .88); } /* (f) bordered — outlined box on a plain background */ .sk-news--bordered { background: var(--sk-page); } .sk-news--bordered .sk-news__inner { padding-block: 54px; } .sk-news--bordered .sk-news__card { border: var(--rule-weight, 1px) solid var(--brand); border-radius: var(--radius-lg, 10px); padding: clamp(26px, 4vw, 44px); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; } .sk-news--bordered .sk-kicker { margin-bottom: 6px; } /* (g) dark — always dark, whatever the palette */ .sk-news--dark { background: #0d1117; color: #e6edf3; } .sk-news--dark .sk-news__title { color: #fff; } .sk-news--dark .sk-news__inner { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding-block: 56px; } .sk-news--dark .sk-news__form input { background: #161b22; border-color: #30363d; color: #e6edf3; } .sk-news--dark .sk-news__form input::placeholder { color: #7d8590; } /* Full-bleed vs boxed ----------------------------------------------------- */ .sk-news--full { width: 100%; } .sk-news--full + .sk-footer { margin-top: 0; } /* flush: no gap before the footer */ .sk-news--boxed { margin-bottom: var(--section-gap, 64px); } .sk-news--boxed > .sk-container { } .sk-news--boxed.sk-news--classic, .sk-news--boxed.sk-news--gradient, .sk-news--boxed.sk-news--dark { max-width: 1200px; margin-inline: auto; border-radius: var(--radius-lg, 10px); overflow: hidden; } /* --------------------------------------------------------------------------- 8. Footer ------------------------------------------------------------------------ */ .sk-footer { background: var(--footer-bg); color: var(--on-footer-muted); } .sk-footer a { color: var(--on-footer-muted); } .sk-footer a:hover { color: var(--footer-link); } .sk-footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; padding-block: 60px 44px; } .sk-footer__title { color: var(--footer-heading); font-size: .92rem; margin-bottom: 18px; text-transform: var(--kicker-case, none); letter-spacing: var(--kicker-spacing, .04em); } .sk-footer__logo img { max-height: 56px; width: auto; margin-bottom: 16px; } .sk-footer__desc { font-size: .85rem; max-width: 34ch; margin-bottom: 20px; } .sk-footer ul { list-style: none; margin: 0; padding: 0; } .sk-footer li { margin-bottom: 10px; font-size: .85rem; } .sk-social { display: flex; gap: 8px; flex-wrap: wrap; } .sk-social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius, 6px); background: var(--footer-icon-bg); color: var(--on-footer); transition: background .18s ease, color .18s ease, transform .18s ease; } .sk-social a:hover { background: var(--brand); color: var(--on-brand); transform: translateY(-2px); } .sk-footer__contact { display: grid; gap: 14px; font-size: .85rem; } .sk-footer__contact-row { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; } .sk-footer__contact-row svg { width: 17px; height: 17px; margin-top: 2px; opacity: .85; } .sk-footer__bottom { border-top: 1px solid var(--footer-border); padding-block: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8rem; } /* Back to top ------------------------------------------------------------- */ .sk-totop { position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--brand); color: var(--on-brand); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease, visibility .22s, background .18s ease; z-index: 80; box-shadow: 0 10px 24px -12px rgba(16, 24, 40, .6); } .sk-totop.is-visible { opacity: 1; visibility: visible; transform: none; } .sk-totop:hover { background: var(--brand-hover); } /* --------------------------------------------------------------------------- 9. Single post + breadcrumb (shared legacy pages get these too) ------------------------------------------------------------------------ */ .sk-crumb { background: var(--sk-panel); padding-block: 26px; border-bottom: 1px solid var(--sk-line); } .sk-crumb__list { display: flex; gap: 8px; flex-wrap: wrap; font-size: .78rem; color: var(--sk-ink-3); } .sk-crumb__list a:hover { color: var(--brand); } .sk-article__title { font-size: clamp(1.6rem, 3.4vw, 2.5rem); margin-bottom: 16px; text-wrap: balance; } .sk-article__body { font-size: calc(var(--body-size, 14px) + 2px); line-height: 1.78; color: var(--sk-ink-2); } .sk-article__body img { max-width: 100%; height: auto; border-radius: var(--radius, 6px); } .sk-article__body h2 { font-size: 1.5rem; margin: 34px 0 12px; } .sk-article__body h3 { font-size: 1.22rem; margin: 28px 0 10px; } .sk-article__body p { margin: 0 0 18px; } .sk-article__body a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } .sk-article__body blockquote { margin: 26px 0; padding: 18px 24px; border-left: 3px solid var(--brand); background: var(--brand-tint); border-radius: 0 var(--radius, 6px) var(--radius, 6px) 0; font-size: 1.02em; } .sk-article__body table { width: 100%; border-collapse: collapse; margin: 22px 0; display: block; overflow-x: auto; } .sk-article__body td, .sk-article__body th { border: 1px solid var(--sk-line); padding: 9px 12px; } .sk-article__body pre { background: var(--sk-panel); padding: 16px; border-radius: var(--radius, 6px); overflow-x: auto; } /* --------------------------------------------------------------------------- 10. Legacy component bridge ----------------------------------------------------------------------------- blog.php / blog-list.php / search.php still render the original `tp-` markup. These rules bring those pages in line with the active skin so the whole site feels like one design, without touching that markup. ------------------------------------------------------------------------ */ .sk .tp-blog-grid-item { border-radius: var(--radius-lg, 10px); } .sk .tp-blog-grid-thumb { border-radius: var(--radius, 6px); overflow: hidden; } .sk .tp-blog-grid-thumb img { border-radius: 0; object-fit: cover; width: 100%; } .sk .tp-blog-grid-title { font-size: var(--title-size, 1.2rem); letter-spacing: var(--heading-spacing, -0.01em); } .sk .tp-blog-grid-title a:hover { color: var(--brand); } .sk .tp-sidebar-widget-title { text-transform: var(--kicker-case, none); letter-spacing: var(--kicker-spacing, .04em); border-bottom: var(--rule-weight, 1px) solid var(--sk-line); padding-bottom: 12px; } .sk .tp-sidebar-blog-thumb img { border-radius: var(--radius, 6px); } .sk .tp-pagination ul li .current, .sk .tp-pagination ul li a:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); } .sk .breadcrumb__area { background: var(--sk-panel) !important; } .sk .tp-btn, .sk .tp-contact-btn button { background: var(--brand); color: var(--on-brand); border-radius: var(--radius, 6px); } .sk .tp-btn:hover, .sk .tp-contact-btn button:hover { background: var(--brand-hover); color: var(--on-brand); } /* --------------------------------------------------------------------------- 11. reCAPTCHA ----------------------------------------------------------------------------- Containment now lives in assets/css/base-fixes.css so Classic sites get the fix too. Only the skin-specific wrapper alias remains here. ------------------------------------------------------------------------ */ .sk-captcha { margin: 18px 0 22px; max-width: 100%; overflow: hidden; } .sk-captcha .g-recaptcha { display: inline-block; transform-origin: 0 0; max-width: 100%; } .sk-captcha iframe { max-width: 100%; } @media (max-width: 400px) { .sk-captcha .g-recaptcha { transform: scale(.86); } .sk-captcha { height: 68px; } } @media (max-width: 340px) { .sk-captcha .g-recaptcha { transform: scale(.76); } .sk-captcha { height: 62px; } } /* --------------------------------------------------------------------------- 12. Per-skin refinements ------------------------------------------------------------------------ */ /* Magazine: tighter type, red-hot kickers, ruled columns */ .sk[data-skin="magazine"] .sk-card__excerpt { display: none; } .sk[data-skin="magazine"] .sk-head__title::after { content: ""; position: absolute; left: 0; bottom: -15px; width: 56px; height: 3px; background: var(--brand); } .sk[data-skin="magazine"] .sk-grid--magazine .sk-card:nth-child(-n+3) { padding-top: 0; } /* Minimal: no chrome at all, oversized headlines */ .sk[data-skin="minimal"] .sk-media { border-radius: 0; } .sk[data-skin="minimal"] .sk-header { border-bottom-color: transparent; } .sk[data-skin="minimal"] .sk-header.is-stuck { border-bottom-color: var(--sk-line); box-shadow: none; } .sk[data-skin="minimal"] .sk-chip { background: transparent; color: var(--brand); padding: 0; letter-spacing: .12em; } /* Editorial: drop cap on the lead paragraph, serif rhythm */ .sk[data-skin="editorial"] .sk-hero-split__body { background: var(--sk-page); } .sk[data-skin="editorial"] .sk-article__body > p:first-of-type::first-letter { float: left; font-family: var(--font-heading); font-size: 3.4em; line-height: .82; padding: .06em .1em 0 0; color: var(--brand); } /* Broadsheet: hairline column rules */ .sk[data-skin="broadsheet"] .sk-grid--columns > .sk-card { padding-inline: 0 22px; border-right: 1px solid var(--sk-line); } .sk[data-skin="broadsheet"] .sk-grid--columns > .sk-card:nth-child(2n) { border-right: 0; padding-inline: 22px 0; } .sk[data-skin="broadsheet"] .sk-head { border-bottom-width: 3px; border-bottom-color: var(--sk-ink); } /* Card stack: tinted canvas so the white cards lift off it */ .sk[data-skin="cardstack"] { background: var(--sk-panel); } .sk[data-skin="cardstack"] .sk-header, .sk[data-skin="cardstack"] .sk-news--panel .sk-news__card { background: var(--sk-page); } .sk[data-skin="cardstack"] .sk-widget--panel { background: var(--sk-page); } /* Aurora: gradient accents on headings and buttons */ .sk[data-skin="aurora"] .sk-btn { background: linear-gradient(120deg, var(--brand), var(--accent)); } .sk[data-skin="aurora"] .sk-btn:hover { filter: brightness(1.06); background: linear-gradient(120deg, var(--brand), var(--accent)); } .sk[data-skin="aurora"] .sk-head__title { background: linear-gradient(100deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .sk[data-skin="aurora"] .sk-widget--panel { background: rgba(255, 255, 255, .72); backdrop-filter: blur(10px); } /* Studio: portrait imagery, no chrome around cards */ .sk[data-skin="studio"] .sk-grid--overlay { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sk[data-skin="studio"] .sk-card--overlay { min-height: 380px; } /* Mono: hard edges, thick rules, accent only on interaction */ .sk[data-skin="mono"] .sk-card--outline { border-width: 2px; } .sk[data-skin="mono"] .sk-btn { border-radius: 0; } .sk[data-skin="mono"] .sk-card__title a { background-image: linear-gradient(var(--accent), var(--accent)); } .sk[data-skin="mono"] .sk-card:hover .sk-card__title a { color: var(--accent); } /* Focus: one narrow reading column */ .sk[data-skin="focus"] .sk-grid--list .sk-card { grid-template-columns: minmax(0, 1fr); } .sk[data-skin="focus"] .sk-grid--list .sk-media { max-height: 320px; } /* Compact: dense rows, small thumbs */ .sk[data-skin="compact"] .sk-grid--list .sk-card { grid-template-columns: 132px minmax(0, 1fr); padding-block: 16px; gap: 16px; } .sk[data-skin="compact"] .sk-card__excerpt { display: none; } .sk[data-skin="compact"] .sk-card__foot { display: none; } /* --------------------------------------------------------------------------- 13. Responsive ------------------------------------------------------------------------ */ @media (max-width: 1199px) { .sk-layout, .sk-layout--sidebar-left { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; } .sk[data-skin="studio"] .sk-grid--overlay { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 991px) { .sk-nav { display: none; } .sk-burger { display: inline-flex; } .sk-layout, .sk-layout--sidebar-left { grid-template-columns: minmax(0, 1fr); gap: 44px; } .sk-layout--sidebar-left > .sk-main { order: 1; } .sk-layout--sidebar-left > .sk-aside { order: 2; } .sk-hero-feature { grid-template-columns: minmax(0, 1fr); } .sk-feature--tall { min-height: 340px; } .sk-hero-split { grid-template-columns: minmax(0, 1fr); } .sk-hero-split__media { min-height: 260px; } .sk-hero-banner__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; } .sk-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .sk-grid--magazine { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-news--classic .sk-news__inner, .sk-news--dark .sk-news__inner, .sk-news--bordered .sk-news__card { grid-template-columns: minmax(0, 1fr); } .sk-news--split .sk-news__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; } .sk-news--split .sk-news__rule { display: none; } .sk[data-skin="broadsheet"] .sk-grid--columns > .sk-card { border-right: 0; padding-inline: 0; } } @media (max-width: 767px) { .sk-section { padding-block: calc(var(--section-gap, 64px) * .62); } .sk-grid--cards, .sk-grid--columns, .sk-grid--overlay, .sk-grid--magazine { grid-template-columns: minmax(0, 1fr); } .sk[data-skin="studio"] .sk-grid--overlay { grid-template-columns: minmax(0, 1fr); } .sk-grid--list .sk-card { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; } .sk[data-skin="compact"] .sk-grid--list .sk-card { grid-template-columns: 96px minmax(0, 1fr); } .sk-slide { min-height: 340px; } .sk-topbar__inner { justify-content: center; } .sk-topbar__welcome { display: none; } .sk-footer__top { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 44px 32px; } .sk-footer__bottom { justify-content: center; text-align: center; } .sk-news__form { flex-direction: column; max-width: none; } .sk-news__form button { width: 100%; } .sk-news--inline .sk-news__inner { flex-direction: column; align-items: stretch; } } @media (max-width: 479px) { .sk-grid--list .sk-card { grid-template-columns: minmax(0, 1fr); } .sk-grid--list .sk-media { aspect-ratio: 16 / 9; } .sk-container { padding-inline: 16px; } } /* Respect a visitor's reduced-motion preference. */ @media (prefers-reduced-motion: reduce) { .sk *, .sk *::before, .sk *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------- 14. Contact page ----------------------------------------------------------------------------- The contact form still uses the original markup, so these rules bring it in line with the active skin rather than leaving it looking like a different site: same radii, same fields, same button, brand-coloured icons. ------------------------------------------------------------------------ */ .sk .tp-contact-area { padding-block: var(--section-gap, 64px); } .sk .tp-contact-wrapper, .sk .tp-contact-info-wrapper { background: var(--sk-page); border: 1px solid var(--sk-line); border-radius: var(--radius-lg, 10px); box-shadow: var(--card-shadow, none); padding: clamp(22px, 3vw, 34px); } .sk .tp-contact-title { font-size: 1.25rem; margin-bottom: 22px; padding-bottom: 14px; border-bottom: var(--rule-weight, 1px) solid var(--sk-line); } .sk .tp-contact-input input, .sk .tp-contact-input textarea { width: 100%; border: 1px solid var(--sk-line); border-radius: var(--radius, 6px); background: var(--sk-page); color: var(--sk-ink); padding: 12px 15px; font-size: .9rem; font-family: inherit; } .sk .tp-contact-input textarea { min-height: 150px; line-height: 1.6; } .sk .tp-contact-input input:focus, .sk .tp-contact-input textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--sk-focus); } .sk .tp-contact-input-title label { font-size: .78rem; color: var(--sk-ink-3); } /* In the original theme .tp-contact-btn is itself the black pill and the