/* =================================================================
STALWART × DU — blog2.css v1.0
Apple Newsroom–inspired stylesheet for Stalwart blog pages.
Design language: Apple Newsroom
— Pure white canvas, SF-style typography, generous whitespace
— Full-bleed hero image, ultra-clean single-column article body
— Minimal chrome, maximum content focus
— Black on white, accented only with brand colours where needed
HOW TO USE IN A NEW BLOG:
1. in
2. Update page-specific: , meta, article h1, body content
3. Swap hero image src and caption text
4. All layout, typography, components defined here
External deps (add in every blog <head>):
Fonts → https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap
Icons → https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css
================================================================= */
/* -----------------------------------------------------------------
1. BRAND TOKENS (Stalwart + du, used sparingly as Apple would)
----------------------------------------------------------------- */
:root {
/* Stalwart / du accent — used only for CTAs & hover states */
--brand-blue: #00aace; /* du cyan */
--brand-purple: #322b83; /* Stalwart purple */
--brand-violet: #6b3fa0;
--brand-pink: #c94b8b;
--brand-grad: linear-gradient(135deg, #00aace 0%, #322b83 55%, #c94b8b 100%);
/* Apple Newsroom neutrals */
--white: #ffffff;
--off-white: #f5f5f7; /* Apple's page bg */
--surface: #fbfbfd;
--border-light: #d2d2d7; /* Apple's hairline */
--text-primary: #1d1d1f; /* Apple's near-black */
--text-secondary: #424245;
--text-tertiary: #6e6e73; /* Apple's muted grey */
--text-label: #86868b; /* Apple's small-caps label colour */
--link-color: #0066cc; /* Apple's link blue */
/* Typography */
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
/* Spacing */
--max-article: 735px; /* Apple's single-column text width */
--max-page: 980px; /* Apple's overall content cap */
--max-wide: 1200px;
/* Radius */
--r-sm: 6px;
--r-md: 12px;
--r-lg: 18px;
/* Shadows — very soft, Apple-like */
--shadow-card: 0 2px 12px rgba(0,0,0,0.08);
--shadow-lift: 0 8px 32px rgba(0,0,0,0.12);
}
/* -----------------------------------------------------------------
2. RESET & BASE
----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 17px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
background: var(--white);
color: var(--text-primary);
line-height: 1.65;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding: 0; list-style: none; }
/* -----------------------------------------------------------------
3. READING PROGRESS BAR (subtle, brand gradient)
----------------------------------------------------------------- */
#read-progress {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0%;
background: var(--brand-grad);
z-index: 9999;
transition: width 0.1s linear;
}
/* -----------------------------------------------------------------
4. COPY TOAST
----------------------------------------------------------------- */
.copy-toast {
display: none;
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(8px);
background: var(--text-primary);
color: var(--white);
padding: 9px 20px;
border-radius: 30px;
font-size: 13px;
font-weight: 500;
z-index: 9999;
opacity: 0;
transition: opacity 0.25s, transform 0.25s;
pointer-events: none;
letter-spacing: 0.01em;
}
.copy-toast.show { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
/* -----------------------------------------------------------------
5. GLOBAL TOPBAR (minimal, Apple-inspired)
----------------------------------------------------------------- */
.newsroom-topbar {
background: linear-gradient(to right, #00aace, #322b83);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
color: rgba(255,255,255,0.8);
font-size: 12px;
padding: 8px 0;
text-align: center;
overflow: hidden;
max-height: 38px;
transition: max-height 0.3s ease, padding 0.3s ease;
letter-spacing: 0.01em;
}
.newsroom-topbar.hidden { max-height: 0; padding: 0; }
.newsroom-topbar a {
color: rgba(255,255,255,0.75);
margin: 0 14px;
transition: color 0.2s;
}
.newsroom-topbar a:hover { color: #fff; text-decoration: none; }
.newsroom-topbar i { margin-right: 5px; font-size: 11px; }
/* -----------------------------------------------------------------
6. NAVIGATION — Apple Newsroom style (white, thin, sticky)
----------------------------------------------------------------- */
.newsroom-nav {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255,255,255,0.92);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--border-light);
height: 52px;
display: flex;
align-items: center;
padding: 0 22px;
transition: box-shadow 0.3s;
}
.newsroom-nav.scrolled { box-shadow: 0 1px 0 rgba(0,0,0,0.1); }
.nav-inner {
max-width: var(--max-wide);
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo img { height: 50px; }
.nav-section-label {
font-size: 15px;
font-weight: 400;
color: var(--text-secondary);
letter-spacing: -0.01em;
}
.nav-section-label strong { font-weight: 600; color: var(--text-primary); }
.nav-right-links { display: flex; align-items: center; gap: 6px; }
.nav-right-links a {
font-size: 13px;
color: var(--text-secondary);
padding: 6px 12px;
border-radius: var(--r-sm);
transition: background 0.2s, color 0.2s;
font-weight: 400;
}
.nav-right-links a:hover { background: var(--off-white); color: var(--text-primary); text-decoration: none; }
.nav-cta-pill {
background: var(--brand-grad) !important;
color: #fff !important;
font-weight: 500 !important;
padding: 7px 16px !important;
border-radius: 30px !important;
font-size: 13px !important;
transition: opacity 0.2s !important;
}
.nav-cta-pill:hover { opacity: 0.88 !important; background: var(--brand-grad) !important; }
.nav-toggle {
display: none; background: none; border: none; cursor: pointer;
padding: 6px; color: var(--text-primary);
font-size: 18px;
}
/* -----------------------------------------------------------------
7. BREADCRUMB (Apple Newsroom style)
----------------------------------------------------------------- */
.article-breadcrumb {
max-width: var(--max-page);
margin: 0 auto;
padding: 18px 22px 0;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-label);
}
.article-breadcrumb a {
color: var(--text-label);
transition: color 0.2s;
}
.article-breadcrumb a:hover { color: var(--link-color); text-decoration: none; }
.article-breadcrumb .sep { font-size: 10px; opacity: 0.5; }
/* -----------------------------------------------------------------
8. ARTICLE HEADER — Apple Newsroom style
----------------------------------------------------------------- */
.article-header {
max-width: var(--max-article);
margin: 0 auto;
padding: 42px 22px 32px;
text-align: left;
}
.article-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.article-tag {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-label);
}
.article-date {
font-size: 13px;
color: var(--text-tertiary);
font-weight: 400;
}
.article-eyebrow-sep { color: var(--border-light); font-size: 11px; }
.article-header h1 {
font-size: clamp(28px, 4.5vw, 48px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--text-primary);
margin-bottom: 16px;
}
.article-header .article-deck {
font-size: 19px;
font-weight: 500;
color: #1d1d1f;
line-height: 1.45;
letter-spacing: .009em;
}
/* -----------------------------------------------------------------
9. HERO IMAGE — full-bleed, Apple Newsroom style
----------------------------------------------------------------- */
.article-hero {
width: 100%;
margin: 0 0 0 0;
position: relative;
background: var(--off-white);
overflow: hidden;
}
.article-hero img {
width: 100%;
max-height: 540px;
object-fit: cover;
display: block;
}
.article-hero-caption {
max-width: var(--max-article);
margin: 0 auto;
padding: 12px 22px 0;
font-size: 12px;
color: var(--text-tertiary);
line-height: 1.5;
font-style: italic;
}
/* Hero placeholder (when no real image) */
.hero-placeholder {
width: 100%; height: 480px;
display: flex; align-items: center; justify-content: center;
font-size: clamp(60px, 10vw, 100px);
background: url("https://www.stalwart.ae/image/broadband.jpg") center / cover no-repeat;;
position: relative; overflow: hidden;
}
.hero-placeholder::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 30% 60%, rgba(50,43,131,0.06) 0%, transparent 70%),
radial-gradient(ellipse at 70% 30%, rgba(0,170,206,0.06) 0%, transparent 70%);
}
/* -----------------------------------------------------------------
10. SHARE ROW — Apple Newsroom style (icon row above article body)
----------------------------------------------------------------- */
.share-row {
max-width: var(--max-article);
margin: 28px auto 0;
padding: 0 22px 24px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--border-light);
flex-wrap: wrap;
}
.share-row-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-label);
margin-right: 4px;
}
.share-icon-btn {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--border-light);
background: var(--white);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
color: var(--text-secondary);
text-decoration: none;
}
.share-icon-btn:hover { background: var(--off-white); border-color: #aaa; transform: scale(1.08); color: var(--text-primary); text-decoration: none; }
.share-icon-btn.copy-btn { font-size: 13px; }
/* Copy-link text button */
.share-copy-text {
font-size: 12px;
color: var(--link-color);
font-weight: 500;
cursor: pointer;
background: none;
border: none;
padding: 0;
margin-left: 4px;
letter-spacing: 0.01em;
transition: opacity 0.2s;
}
.share-copy-text:hover { opacity: 0.7; }
/* -----------------------------------------------------------------
11. ARTICLE BODY — Apple Newsroom single-column typography
----------------------------------------------------------------- */
.article-body {
max-width: var(--max-article);
width: 100%;
margin: 0 auto;
padding: 36px 22px 0;
}
/* Opening paragraph — slightly larger, like Apple's lead paragraph */
.article-body p {
font-size: 17px;
font-weight: 400;
line-height: 1.7;
color: #1d1d1f;
margin-bottom: 22px;
letter-spacing: -0.003em;
}
.article-body strong { color: var(--text-primary); font-weight: 600; }
.article-body em { font-style: italic; }
/* Section headings — Apple uses bold, slightly smaller than you'd expect */
.article-body h2 {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 44px 0 14px;
line-height: 1.2;
}
.article-body h3 {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
margin: 32px 0 10px;
line-height: 1.3;
}
/* Blockquote — Apple editorial pull-quote style */
.article-body blockquote {
margin: 34px 0;
padding: 0 0 0 20px;
border-left: 3px solid var(--border-light);
font-size: 19px;
font-weight: 300;
font-style: italic;
color: var(--text-secondary);
line-height: 1.55;
letter-spacing: -0.01em;
}
.article-body blockquote cite {
display: block;
margin-top: 12px;
font-size: 14px;
font-style: normal;
font-weight: 500;
color: var(--text-tertiary);
}
/* Links in body */
.article-body a {
color: var(--link-color);
text-decoration: none;
border-bottom: 1px solid rgba(0,102,204,0.25);
transition: border-color 0.2s;
}
.article-body a:hover { border-bottom-color: var(--link-color); text-decoration: none; }
/* Inline image (inside article) — Apple uses full-width with caption below */
.article-inline-img {
margin: 36px -22px;
position: relative;
}
.article-inline-img img {
width: 100%;
border-radius: 0;
display: block;
}
.article-inline-img figcaption {
padding: 10px 22px 0;
font-size: 12px;
color: var(--text-tertiary);
font-style: italic;
line-height: 1.5;
}
/* -----------------------------------------------------------------
12. APPLE-STYLE FEATURE LIST (clean, no bullets initially)
----------------------------------------------------------------- */
.article-body .feature-list-apple {
list-style: none; padding: 0; margin: 20px 0 26px;
}
.article-body .feature-list-apple li {
padding: 12px 0 12px 28px;
position: relative;
border-bottom: 1px solid var(--border-light);
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
}
.article-body .feature-list-apple li:last-child { border-bottom: none; }
.article-body .feature-list-apple li::before {
content: '';
position: absolute; left: 0; top: 18px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--brand-grad);
}
/* Simple bullet list */
.article-body .simple-list {
list-style: none; padding: 0; margin: 16px 0 24px; padding-left: 2px;
}
.article-body .simple-list li {
font-size: 16.5px;
color: var(--text-secondary);
line-height: 1.65;
margin-bottom: 9px;
padding-left: 20px;
position: relative;
}
.article-body .simple-list li::before {
content: '–';
position: absolute; left: 0;
color: var(--text-tertiary);
font-weight: 300;
}
/* -----------------------------------------------------------------
13. HIGHLIGHT / CALLOUT BOX (Apple uses subtle grey background)
----------------------------------------------------------------- */
.article-callout {
background: var(--off-white);
border-radius: var(--r-md);
padding: 26px 28px;
margin: 32px 0;
}
.article-callout p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--text-secondary); }
.article-callout p:first-of-type { font-size: 16px; font-weight: 400; }
.article-callout strong { color: var(--text-primary); }
/* Tip box with left border */
.article-tip {
border-left: 3px solid var(--brand-blue);
padding-left: 18px;
margin: 28px 0;
font-size: 15.5px;
color: var(--text-secondary);
line-height: 1.65;
}
.article-tip strong { color: var(--text-primary); }
/* -----------------------------------------------------------------
14. DATA TABLE — minimal, Apple style
----------------------------------------------------------------- */
.article-table-wrap { overflow-x: auto; margin: 28px 0; }
.article-table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.article-table thead th {
text-align: left;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-label);
padding: 10px 16px;
border-bottom: 2px solid var(--border-light);
}
.article-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--border-light);
color: var(--text-secondary);
font-size: 15px;
line-height: 1.5;
vertical-align: top;
}
.article-table td:first-child { font-weight: 500; color: var(--text-primary); }
.article-table tbody tr:last-child td { border-bottom: none; }
.article-table tbody tr:hover td { background: var(--off-white); }
/* -----------------------------------------------------------------
15. FAQ ACCORDION — Apple minimal style
----------------------------------------------------------------- */
.article-faq { margin: 36px 0; }
.faq-item-apple {
border-top: 1px solid var(--border-light);
}
.faq-item-apple:last-child { border-bottom: 1px solid var(--border-light); }
.faq-q-apple {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 16px 0;
font-size: 17px;
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
user-select: none;
letter-spacing: -0.01em;
transition: color 0.2s;
}
.faq-q-apple:hover { color: var(--link-color); }
.faq-q-apple i { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; transition: transform 0.3s; }
.faq-q-apple.open i { transform: rotate(180deg); }
.faq-a-apple {
font-size: 16px;
color: var(--text-secondary);
line-height: 1.65;
max-height: 0; overflow: hidden;
transition: max-height 0.35s ease, padding 0.3s ease;
padding: 0 0 0;
}
.faq-a-apple.open { max-height: 500px; padding: 0 0 18px; }
/* -----------------------------------------------------------------
16. NUMBERED STEPS — clean Apple style
----------------------------------------------------------------- */
.article-steps { counter-reset: step; margin: 28px 0; }
.article-step {
counter-increment: step;
display: flex;
gap: 18px;
margin-bottom: 22px;
align-items: flex-start;
}
.step-number {
flex-shrink: 0;
width: 32px; height: 32px; border-radius: 50%;
background: var(--brand-grad);
color: #fff; font-size: 14px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
margin-top: 2px;
content: counter(step);
}
.step-number::before { content: counter(step); }
.step-body strong {
display: block;
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.step-body p { margin: 0; font-size: 15.5px; color: var(--text-secondary); line-height: 1.6; }
/* -----------------------------------------------------------------
17. PRESS CONTACT BOX — Apple Newsroom style
----------------------------------------------------------------- */
.press-contact-section {
max-width: var(--max-article);
margin: 44px auto 0;
padding: 28px 22px;
border-top: 1px solid var(--border-light);
}
.press-contact-section h3 {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-label);
margin-bottom: 20px;
}
.press-contacts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.press-contact-card {
font-size: 14px;
line-height: 1.6;
}
.press-contact-card .pc-name { font-weight: 600; color: var(--text-primary); font-size: 15px; margin-bottom: 2px; }
.press-contact-card .pc-org { color: var(--text-tertiary); font-size: 13px; margin-bottom: 6px; }
.press-contact-card a { color: var(--link-color); font-size: 13px; display: block; }
/* -----------------------------------------------------------------
18. BOTTOM SHARE SECTION (Apple's "Share article")
----------------------------------------------------------------- */
.article-bottom-share {
max-width: var(--max-article);
margin: 0 auto;
padding: 28px 22px;
border-top: 1px solid var(--border-light);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.abs-label {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin-right: 4px;
}
/* -----------------------------------------------------------------
19. END-OF-ARTICLE CTA — Stalwart-branded, single clean button
----------------------------------------------------------------- */
.article-cta-section {
max-width: var(--max-article);
margin: 0 auto;
padding: 40px 22px;
text-align: center;
border-top: 1px solid var(--border-light);
}
.article-cta-section p {
font-size: 15px;
color: var(--text-tertiary);
margin-bottom: 18px;
font-size: 15px !important;
font-weight: 400 !important;
}
.btn-cta-apple {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--brand-grad);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 12px 28px;
border-radius: 980px;
border: none;
cursor: pointer;
letter-spacing: -0.01em;
transition: opacity 0.2s, transform 0.2s;
box-shadow: 0 4px 16px rgba(50,43,131,0.2);
}
.btn-cta-apple:hover { opacity: 0.88; transform: translateY(-1px); color: #fff; text-decoration: none; }
.btn-cta-apple i { font-size: 13px; }
/* -----------------------------------------------------------------
20. "MORE FROM NEWSROOM" / RELATED POSTS SECTION
----------------------------------------------------------------- */
.more-section {
background: var(--off-white);
padding: 56px 22px;
margin-top: 60px;
}
.more-inner {
max-width: var(--max-wide);
margin: 0 auto;
}
.more-section h2 {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin-bottom: 32px;
}
.more-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.more-card {
background: var(--white);
border-radius: var(--r-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.25s, transform 0.25s;
text-decoration: none;
}
.more-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); text-decoration: none; }
.more-card-thumb {
height: 180px;
overflow: hidden;
position: relative;
font-size: 52px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.more-card-thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.35s;
}
.more-card:hover .more-card-thumb img { transform: scale(1.04); }
.more-card-body { padding: 20px 22px 24px; flex: 1; }
.more-card-tag {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-label);
margin-bottom: 8px;
}
.more-card-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.35;
letter-spacing: -0.01em;
margin-bottom: 10px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.more-card-date { font-size: 12px; color: var(--text-tertiary); }
/* -----------------------------------------------------------------
21. SIDEBAR — Apple Newsroom has no traditional sidebar.
We use a slim right-column only on very wide screens.
Collapsed to nothing on ≤1024px.
----------------------------------------------------------------- */
.article-layout {
max-width: 100%;
margin: 0 auto;
padding: 0;
display: flex;
justify-content: center;
}
.article-layout > .article-body,
.article-layout > .article-header,
.article-layout > .share-row { /* these are full-width inside their own max-width wrapper */ }
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-title {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 4px;
}
.sp-date { font-size: 11px; color: var(--text-tertiary); }
/* Newsletter (sidebar) */
.sidebar-newsletter { }
.sidebar-newsletter p { font-size: 13px; color: var(--text-tertiary); margin-bottom: 12px; line-height: 1.5; }
.nl-input {
width: 100%; padding: 9px 12px;
border: 1px solid var(--border-light); border-radius: var(--r-sm);
font-size: 13.5px; font-family: var(--font-body); outline: none;
background: var(--white); color: var(--text-primary);
margin-bottom: 8px; transition: border-color 0.2s;
}
.nl-input:focus { border-color: var(--brand-blue); }
.nl-btn {
width: 100%; padding: 9px;
background: var(--text-primary); color: var(--white);
border: none; border-radius: var(--r-sm);
font-size: 13.5px; font-weight: 500; cursor: pointer;
font-family: var(--font-body);
transition: opacity 0.2s;
}
.nl-btn:hover { opacity: 0.8; }
/* -----------------------------------------------------------------
22. FOOTER — Apple Newsroom style (clean, dark)
----------------------------------------------------------------- */
.newsroom-footer {
background: #1d1d1f;
color: rgba(255,255,255,0.6);
font-size: 12px;
padding: 40px 22px 32px;
}
.footer-inner {
max-width: var(--max-wide);
margin: 0 auto;
}
.footer-top {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 22px;
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 22px;
flex-wrap: wrap;
gap: 16px;
}
.footer-logo-img { height: 50px; opacity: 0.85; }
.footer-social { display: flex; gap: 8px; }
.footer-soc-link {
width: 32px; height: 32px; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.15);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.6); font-size: 13px; text-decoration: none;
transition: border-color 0.2s, color 0.2s;
}
.footer-soc-link:hover { border-color: rgba(255,255,255,0.5); color: #fff; text-decoration: none; }
.footer-links-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px 40px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 22px;
}
.footer-col h5 {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(255,255,255,0.85);
margin-bottom: 12px;
}
.footer-col ul { }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul a {
color: rgba(255,255,255,0.55); font-size: 12px;
transition: color 0.2s; text-decoration: none;
}
.footer-col ul a:hover { color: rgba(255,255,255,0.9); text-decoration: none; }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 11.5px;
}
.footer-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom-links a {
color: rgba(255,255,255,0.5); text-decoration: none; font-size: 11.5px; transition: color 0.2s;
}
.footer-bottom-links a:hover { color: rgba(255,255,255,0.85); }
/* WhatsApp Float */
.whatsapp-float {
position: fixed; bottom: 260px; right: 26px;
width: 52px; height: 52px;
background: #25d366; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 16px rgba(37,211,102,0.4);
z-index: 900; transition: transform 0.2s;
text-decoration: none;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float i { color: #fff; font-size: 24px; }
/* -----------------------------------------------------------------
23. ANIMATIONS
----------------------------------------------------------------- */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.anim-fade-up { animation: fadeInUp 0.55s ease both; }
.anim-delay-1 { animation-delay: 0.08s; }
.anim-delay-2 { animation-delay: 0.16s; }
.anim-delay-3 { animation-delay: 0.24s; }
/* -----------------------------------------------------------------
24. RESPONSIVE
----------------------------------------------------------------- */
@media (max-width: 1100px) {
.article-layout { grid-template-columns: 1fr; }
.article-sidebar { display: none; } /* sidebar hides — content moves full-width */
.more-grid { grid-template-columns: repeat(2, 1fr); }
.footer-links-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
html { font-size: 16px; }
.article-header { padding: 28px 16px 22px; }
.article-hero img,
.hero-placeholder { max-height: 280px; min-height: 200px; }
.article-body { padding: 26px 16px 0; }
.article-inline-img { margin: 28px -16px; }
.article-inline-img figcaption { padding: 8px 16px 0; }
.article-hero-caption { padding: 10px 16px 0; }
.share-row, .article-bottom-share, .press-contact-section, .article-cta-section { padding-left: 16px; padding-right: 16px; }
.more-section { padding: 40px 16px; }
.more-grid { grid-template-columns: 1fr; }
.footer-links-grid { grid-template-columns: 1fr 1fr; }
.newsroom-nav { padding: 0 16px; }
.nav-right-links a:not(.nav-cta-pill) { display: none; }
.nav-toggle { display: block; }
.nav-links-mobile {
display: none; flex-direction: column;
position: absolute; top: 52px; left: 0; right: 0;
background: rgba(255,255,255,0.97); backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-light);
padding: 12px 0;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.nav-links-mobile.open { display: flex; }
.nav-links-mobile a {
display: block; padding: 11px 22px;
font-size: 15px; color: var(--text-secondary);
border-bottom: 1px solid var(--border-light);
}
.nav-links-mobile a:last-child { border-bottom: none; }
.article-breadcrumb { padding: 14px 16px 0; }
}
@media (max-width: 480px) {
.article-header h1 { font-size: 26px; }
.article-header .article-deck { font-size: 17px; }
.more-card-thumb { height: 140px; }
.footer-links-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
.press-contacts-grid { grid-template-columns: 1fr; }
}
/* =================================================================
STALWART × DU — blog2.css v1.0
Apple Newsroom–inspired stylesheet for Stalwart blog pages.
Design language: Apple Newsroom
— Pure white canvas, SF-style typography, generous whitespace
— Full-bleed hero image, ultra-clean single-column article body
— Minimal chrome, maximum content focus
— Black on white, accented only with brand colours where needed
HOW TO USE IN A NEW BLOG:
1. <link rel="stylesheet" href="blog2.css"> in <head>
2. Update page-specific: <title>, meta, article h1, body content
3. Swap hero image src and caption text
4. All layout, typography, components defined here
External deps (add in every blog <head>):
Fonts → https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap
Icons → https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css
================================================================= */
/* -----------------------------------------------------------------
1. BRAND TOKENS (Stalwart + du, used sparingly as Apple would)
----------------------------------------------------------------- */
:root {
/* Stalwart / du accent — used only for CTAs & hover states */
--brand-blue: #00aace; /* du cyan */
--brand-purple: #322b83; /* Stalwart purple */
--brand-violet: #6b3fa0;
--brand-pink: #c94b8b;
--brand-grad: linear-gradient(135deg, #00aace 0%, #322b83 55%, #c94b8b 100%);
/* Apple Newsroom neutrals */
--white: #ffffff;
--off-white: #f5f5f7; /* Apple's page bg */
--surface: #fbfbfd;
--border-light: #d2d2d7; /* Apple's hairline */
--text-primary: #1d1d1f; /* Apple's near-black */
--text-secondary: #424245;
--text-tertiary: #6e6e73; /* Apple's muted grey */
--text-label: #86868b; /* Apple's small-caps label colour */
--link-color: #0066cc; /* Apple's link blue */
/* Typography */
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
/* Spacing */
--max-article: 735px; /* Apple's single-column text width */
--max-page: 980px; /* Apple's overall content cap */
--max-wide: 1200px;
/* Radius */
--r-sm: 6px;
--r-md: 12px;
--r-lg: 18px;
/* Shadows — very soft, Apple-like */
--shadow-card: 0 2px 12px rgba(0,0,0,0.08);
--shadow-lift: 0 8px 32px rgba(0,0,0,0.12);
}
/* -----------------------------------------------------------------
2. RESET & BASE
----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 17px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
background: var(--white);
color: var(--text-primary);
line-height: 1.65;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding: 0; list-style: none; }
/* -----------------------------------------------------------------
3. READING PROGRESS BAR (subtle, brand gradient)
----------------------------------------------------------------- */
#read-progress {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0%;
background: var(--brand-grad);
z-index: 9999;
transition: width 0.1s linear;
}
/* -----------------------------------------------------------------
4. COPY TOAST
----------------------------------------------------------------- */
.copy-toast {
display: none;
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(8px);
background: var(--text-primary);
color: var(--white);
padding: 9px 20px;
border-radius: 30px;
font-size: 13px;
font-weight: 500;
z-index: 9999;
opacity: 0;
transition: opacity 0.25s, transform 0.25s;
pointer-events: none;
letter-spacing: 0.01em;
}
.copy-toast.show { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
/* -----------------------------------------------------------------
5. GLOBAL TOPBAR (minimal, Apple-inspired)
----------------------------------------------------------------- */
.newsroom-topbar {
background: linear-gradient(to right, #00aace, #322b83);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
color: rgba(255,255,255,0.8);
font-size: 12px;
padding: 8px 0;
text-align: center;
overflow: hidden;
max-height: 38px;
transition: max-height 0.3s ease, padding 0.3s ease;
letter-spacing: 0.01em;
}
.newsroom-topbar.hidden { max-height: 0; padding: 0; }
.newsroom-topbar a {
color: rgba(255,255,255,0.75);
margin: 0 14px;
transition: color 0.2s;
}
.newsroom-topbar a:hover { color: #fff; text-decoration: none; }
.newsroom-topbar i { margin-right: 5px; font-size: 11px; }
/* -----------------------------------------------------------------
6. NAVIGATION — Apple Newsroom style (white, thin, sticky)
----------------------------------------------------------------- */
.newsroom-nav {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255,255,255,0.92);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--border-light);
height: 52px;
display: flex;
align-items: center;
padding: 0 22px;
transition: box-shadow 0.3s;
}
.newsroom-nav.scrolled { box-shadow: 0 1px 0 rgba(0,0,0,0.1); }
.nav-inner {
max-width: var(--max-wide);
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo img { height: 50px; }
.nav-section-label {
font-size: 15px;
font-weight: 400;
color: var(--text-secondary);
letter-spacing: -0.01em;
}
.nav-section-label strong { font-weight: 600; color: var(--text-primary); }
.nav-right-links { display: flex; align-items: center; gap: 6px; }
.nav-right-links a {
font-size: 13px;
color: var(--text-secondary);
padding: 6px 12px;
border-radius: var(--r-sm);
transition: background 0.2s, color 0.2s;
font-weight: 400;
}
.nav-right-links a:hover { background: var(--off-white); color: var(--text-primary); text-decoration: none; }
.nav-cta-pill {
background: var(--brand-grad) !important;
color: #fff !important;
font-weight: 500 !important;
padding: 7px 16px !important;
border-radius: 30px !important;
font-size: 13px !important;
transition: opacity 0.2s !important;
}
.nav-cta-pill:hover { opacity: 0.88 !important; background: var(--brand-grad) !important; }
.nav-toggle {
display: none; background: none; border: none; cursor: pointer;
padding: 6px; color: var(--text-primary);
font-size: 18px;
}
/* -----------------------------------------------------------------
7. BREADCRUMB (Apple Newsroom style)
----------------------------------------------------------------- */
.article-breadcrumb {
max-width: var(--max-page);
margin: 0 auto;
padding: 18px 22px 0;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-label);
}
.article-breadcrumb a {
color: var(--text-label);
transition: color 0.2s;
}
.article-breadcrumb a:hover { color: var(--link-color); text-decoration: none; }
.article-breadcrumb .sep { font-size: 10px; opacity: 0.5; }
/* -----------------------------------------------------------------
8. ARTICLE HEADER — Apple Newsroom style
----------------------------------------------------------------- */
.article-header {
max-width: var(--max-article);
margin: 0 auto;
padding: 42px 22px 32px;
text-align: left;
}
.article-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.article-tag {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-label);
}
.article-date {
font-size: 13px;
color: var(--text-tertiary);
font-weight: 400;
}
.article-eyebrow-sep { color: var(--border-light); font-size: 11px; }
.article-header h1 {
font-size: clamp(28px, 4.5vw, 48px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--text-primary);
margin-bottom: 16px;
}
.article-header .article-deck {
font-size: 19px;
font-weight: 300;
color: var(--text-secondary);
line-height: 1.45;
letter-spacing: -0.01em;
}
/* -----------------------------------------------------------------
9. HERO IMAGE — full-bleed, Apple Newsroom style
----------------------------------------------------------------- */
.article-hero {
width: 100%;
margin: 0 0 0 0;
position: relative;
background: var(--off-white);
overflow: hidden;
}
.article-hero img {
width: 100%;
max-height: 540px;
object-fit: cover;
display: block;
}
.article-hero-caption {
max-width: var(--max-article);
margin: 0 auto;
padding: 12px 22px 0;
font-size: 12px;
color: var(--text-tertiary);
line-height: 1.5;
font-style: italic;
}
/* Hero placeholder (when no real image) */
.hero-placeholder {
width: 100%; height: 480px;
display: flex; align-items: center; justify-content: center;
font-size: clamp(60px, 10vw, 100px);
background: linear-gradient(160deg, #f0f4ff 0%, #e8f9fd 50%, #fdf0ff 100%);
position: relative; overflow: hidden;
}
.hero-placeholder::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 30% 60%, rgba(50,43,131,0.06) 0%, transparent 70%),
radial-gradient(ellipse at 70% 30%, rgba(0,170,206,0.06) 0%, transparent 70%);
}
/* -----------------------------------------------------------------
10. SHARE ROW — Apple Newsroom style (icon row above article body)
----------------------------------------------------------------- */
.share-row {
max-width: var(--max-article);
margin: 28px auto 0;
padding: 0 22px 24px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--border-light);
flex-wrap: wrap;
}
.share-row-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-label);
margin-right: 4px;
}
.share-icon-btn {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--border-light);
background: var(--white);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
color: var(--text-secondary);
text-decoration: none;
}
.share-icon-btn:hover { background: var(--off-white); border-color: #aaa; transform: scale(1.08); color: var(--text-primary); text-decoration: none; }
.share-icon-btn.copy-btn { font-size: 13px; }
/* Copy-link text button */
.share-copy-text {
font-size: 12px;
color: var(--link-color);
font-weight: 500;
cursor: pointer;
background: none;
border: none;
padding: 0;
margin-left: 4px;
letter-spacing: 0.01em;
transition: opacity 0.2s;
}
.share-copy-text:hover { opacity: 0.7; }
/* -----------------------------------------------------------------
11. ARTICLE BODY — Apple Newsroom single-column typography
----------------------------------------------------------------- */
.article-body {
max-width: var(--max-article);
margin: 0 auto;
padding: 36px 22px 0;
}
/* Opening paragraph — slightly larger, like Apple's lead paragraph */
.article-body p:first-of-type {
font-size: 20px;
font-weight: 300;
line-height: 1.55;
color: var(--text-primary);
letter-spacing: -0.01em;
margin-bottom: 26px;
}
.article-body p {
font-size: 17px;
font-weight: 400;
line-height: 1.7;
color: var(--text-secondary);
margin-bottom: 22px;
letter-spacing: -0.003em;
}
.article-body strong { color: var(--text-primary); font-weight: 600; }
.article-body em { font-style: italic; }
/* Section headings — Apple uses bold, slightly smaller than you'd expect */
.article-body h2 {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 44px 0 14px;
line-height: 1.2;
}
.article-body h3 {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
margin: 32px 0 10px;
line-height: 1.3;
}
/* Blockquote — Apple editorial pull-quote style */
.article-body blockquote {
margin: 34px 0;
padding: 0 0 0 20px;
border-left: 3px solid var(--border-light);
font-size: 19px;
font-weight: 300;
font-style: italic;
color: var(--text-secondary);
line-height: 1.55;
letter-spacing: -0.01em;
}
.article-body blockquote cite {
display: block;
margin-top: 12px;
font-size: 14px;
font-style: normal;
font-weight: 500;
color: var(--text-tertiary);
}
/* Links in body */
.article-body a {
color: var(--link-color);
text-decoration: none;
border-bottom: 1px solid rgba(0,102,204,0.25);
transition: border-color 0.2s;
}
.article-body a:hover { border-bottom-color: var(--link-color); text-decoration: none; }
/* Inline image (inside article) — Apple uses full-width with caption below */
.article-inline-img {
margin: 36px -22px;
position: relative;
}
.article-inline-img img {
width: 100%;
border-radius: 0;
display: block;
}
.article-inline-img figcaption {
padding: 10px 22px 0;
font-size: 12px;
color: var(--text-tertiary);
font-style: italic;
line-height: 1.5;
}
/* -----------------------------------------------------------------
12. APPLE-STYLE FEATURE LIST (clean, no bullets initially)
----------------------------------------------------------------- */
.article-body .feature-list-apple {
list-style: none; padding: 0; margin: 20px 0 26px;
}
.article-body .feature-list-apple li {
padding: 12px 0 12px 28px;
position: relative;
border-bottom: 1px solid var(--border-light);
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
}
.article-body .feature-list-apple li:last-child { border-bottom: none; }
.article-body .feature-list-apple li::before {
content: '';
position: absolute; left: 0; top: 18px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--brand-grad);
}
/* Simple bullet list */
.article-body .simple-list {
list-style: none; padding: 0; margin: 16px 0 24px; padding-left: 2px;
}
.article-body .simple-list li {
font-size: 16.5px;
color: var(--text-secondary);
line-height: 1.65;
margin-bottom: 9px;
padding-left: 20px;
position: relative;
}
.article-body .simple-list li::before {
content: '–';
position: absolute; left: 0;
color: var(--text-tertiary);
font-weight: 300;
}
/* -----------------------------------------------------------------
13. HIGHLIGHT / CALLOUT BOX (Apple uses subtle grey background)
----------------------------------------------------------------- */
.article-callout {
background: var(--off-white);
border-radius: var(--r-md);
padding: 26px 28px;
margin: 32px 0;
}
.article-callout p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--text-secondary); }
.article-callout p:first-of-type { font-size: 16px; font-weight: 400; }
.article-callout strong { color: var(--text-primary); }
/* Tip box with left border */
.article-tip {
border-left: 3px solid var(--brand-blue);
padding-left: 18px;
margin: 28px 0;
font-size: 15.5px;
color: var(--text-secondary);
line-height: 1.65;
}
.article-tip strong { color: var(--text-primary); }
/* -----------------------------------------------------------------
14. DATA TABLE — minimal, Apple style
----------------------------------------------------------------- */
.article-table-wrap { overflow-x: auto; margin: 28px 0; }
.article-table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.article-table thead th {
text-align: left;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-label);
padding: 10px 16px;
border-bottom: 2px solid var(--border-light);
}
.article-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--border-light);
color: var(--text-secondary);
font-size: 15px;
line-height: 1.5;
vertical-align: top;
}
.article-table td:first-child { font-weight: 500; color: var(--text-primary); }
.article-table tbody tr:last-child td { border-bottom: none; }
.article-table tbody tr:hover td { background: var(--off-white); }
/* -----------------------------------------------------------------
15. FAQ ACCORDION — Apple minimal style
----------------------------------------------------------------- */
.article-faq { margin: 36px 0; }
.faq-item-apple {
border-top: 1px solid var(--border-light);
}
.faq-item-apple:last-child { border-bottom: 1px solid var(--border-light); }
.faq-q-apple {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 16px 0;
font-size: 17px;
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
user-select: none;
letter-spacing: -0.01em;
transition: color 0.2s;
}
.faq-q-apple:hover { color: var(--link-color); }
.faq-q-apple i { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; transition: transform 0.3s; }
.faq-q-apple.open i { transform: rotate(180deg); }
.faq-a-apple {
font-size: 16px;
color: var(--text-secondary);
line-height: 1.65;
max-height: 0; overflow: hidden;
transition: max-height 0.35s ease, padding 0.3s ease;
padding: 0 0 0;
}
.faq-a-apple.open { max-height: 500px; padding: 0 0 18px; }
/* -----------------------------------------------------------------
16. NUMBERED STEPS — clean Apple style
----------------------------------------------------------------- */
.article-steps { counter-reset: step; margin: 28px 0; }
.article-step {
counter-increment: step;
display: flex;
gap: 18px;
margin-bottom: 22px;
align-items: flex-start;
}
.step-number {
flex-shrink: 0;
width: 32px; height: 32px; border-radius: 50%;
background: var(--brand-grad);
color: #fff; font-size: 14px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
margin-top: 2px;
content: counter(step);
}
.step-number::before { content: counter(step); }
.step-body strong {
display: block;
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.step-body p { margin: 0; font-size: 15.5px; color: var(--text-secondary); line-height: 1.6; }
/* -----------------------------------------------------------------
17. PRESS CONTACT BOX — Apple Newsroom style
----------------------------------------------------------------- */
.press-contact-section {
max-width: var(--max-article);
margin: 44px auto 0;
padding: 28px 22px;
border-top: 1px solid var(--border-light);
}
.press-contact-section h3 {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-label);
margin-bottom: 20px;
}
.press-contacts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.press-contact-card {
font-size: 14px;
line-height: 1.6;
}
.press-contact-card .pc-name { font-weight: 600; color: var(--text-primary); font-size: 15px; margin-bottom: 2px; }
.press-contact-card .pc-org { color: var(--text-tertiary); font-size: 13px; margin-bottom: 6px; }
.press-contact-card a { color: var(--link-color); font-size: 13px; display: block; }
/* -----------------------------------------------------------------
18. BOTTOM SHARE SECTION (Apple's "Share article")
----------------------------------------------------------------- */
.article-bottom-share {
max-width: var(--max-article);
margin: 0 auto;
padding: 28px 22px;
border-top: 1px solid var(--border-light);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.abs-label {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin-right: 4px;
}
/* -----------------------------------------------------------------
19. END-OF-ARTICLE CTA — Stalwart-branded, single clean button
----------------------------------------------------------------- */
.article-cta-section {
max-width: var(--max-article);
margin: 0 auto;
padding: 40px 22px;
text-align: center;
border-top: 1px solid var(--border-light);
}
.article-cta-section p {
font-size: 15px;
color: var(--text-tertiary);
margin-bottom: 18px;
font-size: 15px !important;
font-weight: 400 !important;
}
.btn-cta-apple {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--brand-grad);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 12px 28px;
border-radius: 980px;
border: none;
cursor: pointer;
letter-spacing: -0.01em;
transition: opacity 0.2s, transform 0.2s;
box-shadow: 0 4px 16px rgba(50,43,131,0.2);
}
.btn-cta-apple:hover { opacity: 0.88; transform: translateY(-1px); color: #fff; text-decoration: none; }
.btn-cta-apple i { font-size: 13px; }
/* -----------------------------------------------------------------
20. "MORE FROM NEWSROOM" / RELATED POSTS SECTION
----------------------------------------------------------------- */
.more-section {
background: var(--off-white);
padding: 56px 22px;
margin-top: 60px;
}
.more-inner {
max-width: var(--max-wide);
margin: 0 auto;
}
.more-section h2 {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin-bottom: 32px;
}
.more-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.more-card {
background: var(--white);
border-radius: var(--r-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.25s, transform 0.25s;
text-decoration: none;
}
.more-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); text-decoration: none; }
.more-card-thumb {
height: 180px;
overflow: hidden;
position: relative;
font-size: 52px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.more-card-thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.35s;
}
.more-card:hover .more-card-thumb img { transform: scale(1.04); }
.more-card-body { padding: 20px 22px 24px; flex: 1; }
.more-card-tag {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-label);
margin-bottom: 8px;
}
.more-card-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.35;
letter-spacing: -0.01em;
margin-bottom: 10px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.more-card-date { font-size: 12px; color: var(--text-tertiary); }
/* -----------------------------------------------------------------
21. SIDEBAR — Apple Newsroom has no traditional sidebar.
We use a slim right-column only on very wide screens.
Collapsed to nothing on ≤1024px.
----------------------------------------------------------------- */
.article-layout {
max-width: var(--max-wide);
margin: 0 auto;
padding: 0 22px;
display: grid;
grid-template-columns: var(--max-article) 1fr;
gap: 0 60px;
align-items: start;
}
.article-layout > .article-body,
.article-layout > .article-header,
.article-layout > .share-row { /* these are full-width inside their own max-width wrapper */ }
.article-sidebar {
position: sticky;
top: 72px;
padding-top: 42px;
}
.sidebar-section {
margin-bottom: 36px;
}
.sidebar-section h4 {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-label);
margin-bottom: 14px;
border-bottom: 1px solid var(--border-light);
padding-bottom: 8px;
}
.sidebar-contact-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--border-light);
font-size: 14px;
color: var(--text-secondary);
transition: color 0.2s;
text-decoration: none;
}
.sidebar-contact-link:last-child { border-bottom: none; }
.sidebar-contact-link:hover { color: var(--link-color); text-decoration: none; }
.sidebar-contact-link i { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.sidebar-contact-link.wa i { color: #25d366; }
.sidebar-contact-link.ph i { color: var(--brand-blue); }
.sidebar-contact-link.em i { color: var(--brand-pink); }
/* Sidebar recent posts */
.sidebar-post {
display: flex;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border-light);
text-decoration: none;
transition: opacity 0.2s;
}
.sidebar-post:last-child { border-bottom: none; }
.sidebar-post:hover { opacity: 0.72; }
.sp-thumb {
width: 52px; height: 52px; border-radius: var(--r-sm);
background: var(--off-white); flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 18px;
overflow: hidden;
}
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-title {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 4px;
}
.sp-date { font-size: 11px; color: var(--text-tertiary); }
/* Newsletter (sidebar) */
.sidebar-newsletter { }
.sidebar-newsletter p { font-size: 13px; color: var(--text-tertiary); margin-bottom: 12px; line-height: 1.5; }
.nl-input {
width: 100%; padding: 9px 12px;
border: 1px solid var(--border-light); border-radius: var(--r-sm);
font-size: 13.5px; font-family: var(--font-body); outline: none;
background: var(--white); color: var(--text-primary);
margin-bottom: 8px; transition: border-color 0.2s;
}
.nl-input:focus { border-color: var(--brand-blue); }
.nl-btn {
width: 100%; padding: 9px;
background: var(--text-primary); color: var(--white);
border: none; border-radius: var(--r-sm);
font-size: 13.5px; font-weight: 500; cursor: pointer;
font-family: var(--font-body);
transition: opacity 0.2s;
}
.nl-btn:hover { opacity: 0.8; }
/* -----------------------------------------------------------------
22. FOOTER — Apple Newsroom style (clean, dark)
----------------------------------------------------------------- */
.newsroom-footer {
background: #1d1d1f;
color: rgba(255,255,255,0.6);
font-size: 12px;
padding: 40px 22px 32px;
}
.footer-inner {
max-width: var(--max-wide);
margin: 0 auto;
}
.footer-top {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 22px;
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 22px;
flex-wrap: wrap;
gap: 16px;
}
.footer-logo-img { height: 50px; opacity: 1; }
.footer-social { display: flex; gap: 8px; }
.footer-soc-link {
width: 32px; height: 32px; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.15);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.6); font-size: 13px; text-decoration: none;
transition: border-color 0.2s, color 0.2s;
}
.footer-soc-link:hover { border-color: rgba(255,255,255,0.5); color: #fff; text-decoration: none; }
.footer-links-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px 40px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 22px;
}
.footer-col h5 {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(255,255,255,0.85);
margin-bottom: 12px;
}
.footer-col ul { }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul a {
color: rgba(255,255,255,0.55); font-size: 12px;
transition: color 0.2s; text-decoration: none;
}
.footer-col ul a:hover { color: rgba(255,255,255,0.9); text-decoration: none; }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 11.5px;
}
.footer-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom-links a {
color: rgba(255,255,255,0.5); text-decoration: none; font-size: 11.5px; transition: color 0.2s;
}
.footer-bottom-links a:hover { color: rgba(255,255,255,0.85); }
/* WhatsApp Float */
.whatsapp-float {
position: fixed; bottom: 26px; right: 26px;
width: 52px; height: 52px;
background: #25d366; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 16px rgba(37,211,102,0.4);
z-index: 900; transition: transform 0.2s;
text-decoration: none;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float i { color: #fff; font-size: 24px; }
/* -----------------------------------------------------------------
23. ANIMATIONS
----------------------------------------------------------------- */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.anim-fade-up { animation: fadeInUp 0.55s ease both; }
.anim-delay-1 { animation-delay: 0.08s; }
.anim-delay-2 { animation-delay: 0.16s; }
.anim-delay-3 { animation-delay: 0.24s; }
/* -----------------------------------------------------------------
24. RESPONSIVE
----------------------------------------------------------------- */
@media (max-width: 1100px) {
.article-layout { grid-template-columns: 1fr; }
.article-sidebar { display: none; } /* sidebar hides — content moves full-width */
.more-grid { grid-template-columns: repeat(2, 1fr); }
.footer-links-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
html { font-size: 16px; }
.article-header { padding: 28px 16px 22px; }
.article-hero img,
.hero-placeholder { max-height: 280px; min-height: 200px; }
.article-body { padding: 26px 16px 0; }
.article-inline-img { margin: 28px -16px; }
.article-inline-img figcaption { padding: 8px 16px 0; }
.article-hero-caption { padding: 10px 16px 0; }
.share-row, .article-bottom-share, .press-contact-section, .article-cta-section { padding-left: 16px; padding-right: 16px; }
.more-section { padding: 40px 16px; }
.more-grid { grid-template-columns: 1fr; }
.footer-links-grid { grid-template-columns: 1fr 1fr; }
.newsroom-nav { padding: 0 16px; }
.nav-right-links a:not(.nav-cta-pill) { display: none; }
.nav-toggle { display: block; }
.nav-links-mobile {
display: none; flex-direction: column;
position: absolute; top: 52px; left: 0; right: 0;
background: rgba(255,255,255,0.97); backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-light);
padding: 12px 0;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.nav-links-mobile.open { display: flex; }
.nav-links-mobile a {
display: block; padding: 11px 22px;
font-size: 15px; color: var(--text-secondary);
border-bottom: 1px solid var(--border-light);
}
.nav-links-mobile a:last-child { border-bottom: none; }
.article-breadcrumb { padding: 14px 16px 0; }
}
@media (max-width: 480px) {
.article-header h1 { font-size: 26px; }
.article-header .article-deck { font-size: 17px; }
.more-card-thumb { height: 140px; }
.footer-links-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
.press-contacts-grid { grid-template-columns: 1fr; }
}
/* =================================================================
NEWSROOM LANDING PAGE — Additional styles (appended to blog2.css)
Used by: newsroom.html / blogs.html
================================================================= */
/* -----------------------------------------------------------------
NR-1. SUBSCRIBE HERO BANNER (top of page, full-width)
----------------------------------------------------------------- */
.nr-subscribe-banner {
background: var(--off-white);
border-bottom: 1px solid var(--border-light);
padding: 40px 22px;
text-align: center;
}
.nr-subscribe-inner {
max-width: 600px;
margin: 0 auto;
}
.nr-subscribe-eyebrow {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-label);
margin-bottom: 10px;
}
.nr-subscribe-banner h2 {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin-bottom: 8px;
line-height: 1.2;
}
.nr-subscribe-banner p {
font-size: 16px;
color: var(--text-tertiary);
line-height: 1.5;
margin-bottom: 24px;
font-weight: 400;
}
.nr-subscribe-form {
display: flex;
gap: 10px;
max-width: 480px;
margin: 0 auto;
}
.nr-subscribe-form input[type="email"] {
flex: 1;
padding: 12px 16px;
border: 1px solid var(--border-light);
border-radius: 980px;
font-size: 15px;
font-family: var(--font-body);
color: var(--text-primary);
background: var(--white);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.nr-subscribe-form input[type="email"]:focus {
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(0,170,206,0.15);
}
.nr-subscribe-form button {
background: var(--text-primary);
color: var(--white);
border: none;
padding: 12px 22px;
border-radius: 980px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
font-family: var(--font-body);
white-space: nowrap;
transition: background 0.2s, transform 0.15s;
letter-spacing: -0.01em;
}
.nr-subscribe-form button:hover {
background: #3a3a3c;
transform: translateY(-1px);
}
.nr-subscribe-note {
font-size: 12px;
color: var(--text-label);
margin-top: 12px;
}
/* -----------------------------------------------------------------
NR-2. FILTER/CATEGORY TABS (Apple Newsroom category nav)
----------------------------------------------------------------- */
.nr-filter-bar {
position: sticky;
top: 52px;
z-index: 900;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-light);
padding: 0 22px;
}
.nr-filter-inner {
max-width: var(--max-wide);
margin: 0 auto;
display: flex;
align-items: center;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.nr-filter-inner::-webkit-scrollbar { display: none; }
.nr-filter-btn {
flex-shrink: 0;
padding: 14px 18px;
font-size: 14px;
font-weight: 500;
color: var(--text-tertiary);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
font-family: var(--font-body);
transition: color 0.2s, border-color 0.2s;
white-space: nowrap;
letter-spacing: -0.01em;
}
.nr-filter-btn:hover { color: var(--text-primary); }
.nr-filter-btn.active {
color: var(--text-primary);
border-bottom: 2px solid var(--text-primary);
font-weight: 600;
}
/* -----------------------------------------------------------------
NR-3. SECTION TITLES
----------------------------------------------------------------- */
.nr-section-title {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin-bottom: 28px;
line-height: 1.2;
}
.nr-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
}
.nr-view-all {
font-size: 14px;
font-weight: 500;
color: var(--link-color);
transition: opacity 0.2s;
}
.nr-view-all:hover { opacity: 0.7; text-decoration: none; }
/* -----------------------------------------------------------------
NR-4. LATEST NEWS — HERO FEATURED (top large card, Apple style)
----------------------------------------------------------------- */
.nr-latest-section {
max-width: var(--max-wide);
margin: 0 auto;
padding: 52px 22px 0;
}
/* Featured hero: large image left, text right (for biggest story) */
.nr-hero-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--off-white);
margin-bottom: 20px;
text-decoration: none;
transition: box-shadow 0.25s;
min-height: 340px;
}
.nr-hero-card:hover { box-shadow: var(--shadow-lift); text-decoration: none; }
.nr-hero-img {
position: relative;
overflow: hidden;
background: var(--off-white);
}
.nr-hero-img img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.4s ease;
}
.nr-hero-card:hover .nr-hero-img img { transform: scale(1.03); }
.nr-hero-img .nr-img-placeholder {
width: 100%; height: 100%; min-height: 340px;
display: flex; align-items: center; justify-content: center;
font-size: 80px;
}
.nr-hero-body {
padding: 36px 36px 32px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: var(--white);
}
.nr-hero-body .nr-card-tag {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-label);
margin-bottom: 10px;
}
.nr-hero-body h3 {
font-size: clamp(20px, 2.8vw, 30px);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1.2;
margin-bottom: 12px;
}
.nr-hero-body .nr-card-deck {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.55;
margin-bottom: 18px;
font-weight: 300;
}
.nr-card-meta {
font-size: 12px;
color: var(--text-label);
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.nr-card-meta i { font-size: 11px; margin-right: 3px; }
/* -----------------------------------------------------------------
NR-5. GRID OF CARDS (2-up, 3-up)
----------------------------------------------------------------- */
.nr-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.nr-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 20px;
}
/* Standard card */
.nr-card {
border-radius: var(--r-lg);
overflow: hidden;
background: var(--white);
display: flex;
flex-direction: column;
text-decoration: none;
transition: box-shadow 0.25s, transform 0.25s;
border: 1px solid var(--border-light);
}
.nr-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); text-decoration: none; }
.nr-card-img {
position: relative; overflow: hidden;
height: 200px; background: var(--off-white);
display: flex; align-items: center; justify-content: center;
font-size: 52px;
}
.nr-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.nr-card:hover .nr-card-img img { transform: scale(1.04); }
.nr-card-body {
padding: 20px 22px 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.nr-card-tag {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-label);
margin-bottom: 7px;
}
.nr-card h3 {
font-size: 17px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
letter-spacing: -0.01em;
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.nr-card .nr-card-meta { margin-top: auto; }
/* Compact list card (Apple's "More from Newsroom" row style) */
.nr-list-card {
display: flex;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid var(--border-light);
text-decoration: none;
align-items: center;
transition: opacity 0.2s;
}
.nr-list-card:first-child { border-top: 1px solid var(--border-light); }
.nr-list-card:hover { opacity: 0.72; text-decoration: none; }
.nr-list-thumb {
width: 80px; height: 80px; border-radius: var(--r-md);
flex-shrink: 0; overflow: hidden; background: var(--off-white);
display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.nr-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nr-list-body { flex: 1; }
.nr-list-tag {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-label);
margin-bottom: 5px;
}
.nr-list-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.35;
letter-spacing: -0.01em;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nr-list-date { font-size: 11px; color: var(--text-tertiary); }
/* -----------------------------------------------------------------
NR-6. DIVIDER SECTION WRAPPER
----------------------------------------------------------------- */
.nr-section {
max-width: var(--max-wide);
margin: 0 auto;
padding: 52px 22px 0;
}
.nr-section-divider {
border: none;
border-top: 1px solid var(--border-light);
margin: 52px 0 0;
}
/* -----------------------------------------------------------------
NR-7. STORIES SECTION (Apple's dark-ish featured editorial strip)
----------------------------------------------------------------- */
.nr-stories-section {
background: var(--off-white);
padding: 56px 22px;
margin-top: 52px;
}
.nr-stories-inner { max-width: var(--max-wide); margin: 0 auto; }
.nr-stories-header {
text-align: center;
margin-bottom: 10px;
}
.nr-stories-header h2 {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--text-primary);
}
.nr-stories-sub {
font-size: 16px;
color: var(--text-tertiary);
margin-bottom: 40px;
text-align: center;
font-weight: 300;
line-height: 1.5;
}
/* Big featured story card (dark overlay) */
.nr-stories-big {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
margin-bottom: 20px;
min-height: 380px;
display: flex;
align-items: flex-end;
text-decoration: none;
transition: box-shadow 0.25s;
}
.nr-stories-big:hover { box-shadow: var(--shadow-lift); text-decoration: none; }
.nr-stories-big-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.4s ease;
}
.nr-stories-big:hover .nr-stories-big-bg { transform: scale(1.03); }
.nr-stories-big-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
}
.nr-stories-big-body {
position: relative;
padding: 32px 32px 32px;
z-index: 2;
width: 100%;
}
.nr-stories-big-body .nr-card-tag {
color: rgba(255,255,255,0.75);
margin-bottom: 8px;
}
.nr-stories-big-body h3 {
font-size: clamp(22px, 3vw, 32px);
font-weight: 700;
color: #fff;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 8px;
}
.nr-stories-big-body .nr-card-meta { color: rgba(255,255,255,0.65); }
/* Stories 3-col small cards */
.nr-stories-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.nr-stories-card {
border-radius: var(--r-md);
overflow: hidden;
text-decoration: none;
display: flex;
flex-direction: column;
transition: transform 0.25s, box-shadow 0.25s;
position: relative;
min-height: 220px;
align-items: flex-end;
}
.nr-stories-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); text-decoration: none; }
.nr-stories-card-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.35s;
}
.nr-stories-card:hover .nr-stories-card-bg { transform: scale(1.05); }
.nr-stories-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
}
.nr-stories-card-body {
position: relative;
z-index: 2;
padding: 16px;
width: 100%;
margin-top: auto;
}
.nr-stories-card-body .nr-card-tag { color: rgba(255,255,255,0.7); margin-bottom: 5px; }
.nr-stories-card-body h4 {
font-size: 15px;
font-weight: 600;
color: #fff;
letter-spacing: -0.01em;
line-height: 1.3;
margin-bottom: 4px;
}
.nr-stories-card-body .nr-card-meta { color: rgba(255,255,255,0.6); font-size: 11px; }
/* -----------------------------------------------------------------
NR-8. "MORE FROM NEWSROOM" — compact 2-col list grid
----------------------------------------------------------------- */
.nr-more-section {
max-width: var(--max-wide);
margin: 0 auto;
padding: 52px 22px 80px;
}
.nr-more-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 48px;
}
.nr-more-col { }
/* -----------------------------------------------------------------
NR-9. SEARCH BAR (Apple Newsroom has search)
----------------------------------------------------------------- */
.nr-search-wrap {
max-width: var(--max-wide);
margin: 0 auto;
padding: 24px 22px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.nr-page-title {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--text-primary);
}
.nr-search-box {
display: flex;
align-items: center;
gap: 8px;
background: var(--off-white);
border: 1px solid var(--border-light);
border-radius: 980px;
padding: 8px 16px;
min-width: 200px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.nr-search-box:focus-within {
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(0,170,206,0.12);
background: var(--white);
}
.nr-search-box i { font-size: 13px; color: var(--text-tertiary); }
.nr-search-box input {
border: none; background: none; outline: none;
font-size: 14px; color: var(--text-primary);
font-family: var(--font-body); width: 160px;
}
.nr-search-box input::placeholder { color: var(--text-label); }
/* -----------------------------------------------------------------
NR-10. TOAST & ANIMATIONS
----------------------------------------------------------------- */
.nr-toast {
display: none;
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(8px);
background: var(--text-primary);
color: var(--white);
padding: 9px 20px;
border-radius: 30px;
font-size: 13px;
font-weight: 500;
z-index: 9999;
opacity: 0;
transition: opacity 0.25s, transform 0.25s;
pointer-events: none;
}
.nr-toast.show { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
/* -----------------------------------------------------------------
NR-11. RESPONSIVE — Newsroom landing page
----------------------------------------------------------------- */
@media (max-width: 1024px) {
.nr-grid-3 { grid-template-columns: repeat(2, 1fr); }
.nr-stories-grid { grid-template-columns: repeat(2, 1fr); }
.nr-more-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 768px) {
.nr-hero-card { grid-template-columns: 1fr; }
.nr-hero-img .nr-img-placeholder,
.nr-hero-img { min-height: 240px; }
.nr-hero-body { padding: 24px; }
.nr-hero-body h3 { font-size: 22px; }
.nr-grid-2,
.nr-grid-3 { grid-template-columns: 1fr; }
.nr-stories-grid { grid-template-columns: 1fr; }
.nr-stories-big { min-height: 280px; }
.nr-subscribe-form { flex-direction: column; gap: 8px; }
.nr-subscribe-form input[type="email"],
.nr-subscribe-form button { border-radius: var(--r-md); }
.nr-filter-bar { top: 52px; }
.nr-section,
.nr-latest-section,
.nr-more-section { padding-left: 16px; padding-right: 16px; }
.nr-search-wrap { padding-left: 16px; padding-right: 16px; }
.nr-subscribe-banner { padding: 32px 16px; }
.nr-stories-section { padding: 40px 16px; }
.nr-stories-card { min-height: 180px; }
.nr-page-title { font-size: 26px; }
}
@media (max-width: 480px) {
.nr-subscribe-banner h2 { font-size: 22px; }
.nr-list-thumb { width: 64px; height: 64px; }
.nr-list-title { font-size: 14px; }
.nr-section-title { font-size: 20px; }
.nr-stories-big { min-height: 240px; }
.nr-stories-big-body h3 { font-size: 20px; }
}