/*
Theme Name: Flame Solren
Theme URI: https://flamesolren.com
Author: Flame Solren Private Limited
Description: Custom block theme for Flame Solren — solar EPC for residential, commercial and industrial customers. Built on the FSPL brand system (navy / solar orange / green).
Version: 2.0.1
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flamesolren
*/
/* ---------- Base polish ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; max-width: 100%; }
a, button, .wp-block-button__link, .wp-element-button { cursor: pointer; }
:focus-visible {
outline: 3px solid #0b3b57;
outline-offset: 2px;
border-radius: 4px;
}
::selection { background: #e1740c; color: #fff; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* Entrance animations stay clipped to their own section. */
main .wp-block-group.alignfull { overflow: clip; }
/* ---------- Header ---------- */
.fspl-header {
position: sticky; top: 0; z-index: 100;
background: #ffffff; border-bottom: 1px solid #e1e8e4;
}
.fspl-topbar {
background: #0b3b57; color: #cfe0ea; font-size: 0.85rem;
}
.fspl-topbar a { color: #ffffff; text-decoration: none; }
.fspl-topbar a:hover { color: #e1740c; }
.fspl-nav a {
color: #1e2a2f; text-decoration: none; font-family: "Lexend", sans-serif;
font-weight: 500; font-size: 0.95rem; padding: 0.4rem 0; position: relative;
}
.fspl-nav a:hover, .fspl-nav a.is-active { color: #0b3b57; }
.fspl-nav a.is-active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: #e1740c;
}
.fspl-logo img { height: 44px; width: auto; display: block; }
.fspl-nav-desktop { display: flex; gap: 1.9rem; align-items: center; }
.fspl-burger { display: none; }
@media (max-width: 880px) {
.fspl-nav-desktop { display: none; }
.fspl-burger { display: inline-flex; }
.fspl-header .wp-block-buttons { display: none; } /* CTA duplicated inside the mobile nav drawer */
}
@media (max-width: 480px) {
.fspl-topbar a:first-child { font-size: 0.8rem; }
}
/* Mobile nav drawer (progressive-enhancement, no JS framework) */
.fspl-mobile-nav { display: none; flex-direction: column; padding: 1rem 1.2rem 1.5rem; border-top: 1px solid #e1e8e4; }
.fspl-mobile-nav.is-open { display: flex; }
.fspl-mobile-nav a { padding: 0.6rem 0; color: #1e2a2f; text-decoration: none; font-family: "Lexend", sans-serif; font-weight: 500; border-bottom: 1px solid #eef3ee; }
/* ---------- Hero ---------- */
.fspl-hero {
position: relative; overflow: hidden;
background: linear-gradient(135deg, #062a3d 0%, #0b3b57 55%, #135078 130%);
color: #ffffff;
}
.fspl-hero::before {
content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
background-image:
radial-gradient(circle at 82% 18%, rgba(225,116,12,0.35), transparent 42%),
radial-gradient(circle at 12% 82%, rgba(60,122,69,0.35), transparent 45%);
}
.fspl-hero-grid { position: absolute; inset: 0; opacity: 0.12; pointer-events: none;
background-image: linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
.fspl-hero .eyebrow { display:inline-flex; align-items:center; gap:0.5rem; background: rgba(225,116,12,0.16); color:#ffcf9e; border:1px solid rgba(225,116,12,0.4); padding:0.35rem 0.9rem; border-radius:999px; font-family:"Lexend",sans-serif; font-size:0.8rem; letter-spacing:0.03em; }
.fspl-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); margin: 1rem 0 1rem; }
.fspl-hero h1 .accent { color: #ffb15c; }
.fspl-hero p.lede { font-size: 1.15rem; color: #cfe0ea; max-width: 46ch; }
/* Heroes use FLOW inner groups (18-07 re-rail): every hero text block shares the
same left edge as the page's body content — archives ride the alignwide grid
rail, content pages ride the 1200px post-content rail, blog singles ride the
700px article rail. Flow layout never auto-centers, so no margin hacks needed;
the eyebrow just needs to be a block so it stacks above the title. */
.fspl-hero .fspl-eyebrow-light {
display: block;
margin-bottom: 0.6rem;
}
/* ---------- Stat strip (real numbers, no animated-counter fragility) ---------- */
.fspl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.fspl-stats > div { text-align: center; }
.fspl-stats strong { display:block; font-family:"Lexend",sans-serif; font-weight:700; font-size: clamp(1.6rem, 3vw, 2.3rem); color:#ffffff; }
.fspl-stats span { color:#a9c2d1; font-size:0.9rem; text-transform:uppercase; letter-spacing:0.05em; }
@media (max-width: 640px) { .fspl-stats { grid-template-columns: 1fr; gap: 0.8rem; } }
/* light-surface variant of the stat strip (used on inner pages) */
.fspl-stats.on-light strong { color:#0b3b57; }
.fspl-stats.on-light span { color:#5c6470; }
/* ---------- Section utility ---------- */
.fspl-eyebrow-light { color:#e1740c; font-family:"Lexend",sans-serif; font-weight:600; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; }
.fspl-section-surface { background: #f5f8f5; }
/* ---------- Cards ---------- */
.fspl-card {
background:#ffffff; border:1px solid #e1e8e4; border-radius:14px; padding:1.6rem;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
/* no height:100% — as a flex-column child it resolves against the stretched
column and blows up (the contact-page 910px-card bug); grid rows already
equal-height cards automatically */
}
.fspl-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11,59,87,0.10); border-color:#cfe0ea; }
.fspl-card .icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#eef3ee; margin-bottom:1rem; font-size:1.4rem; }
.fspl-card h3 { margin: 0 0 0.5rem; font-size:1.15rem; }
.fspl-card p { color:#5c6470; margin:0; font-size:0.95rem; }
/* Solution cards (Residential / Commercial / Industrial) */
.fspl-solution-card { position:relative; border-radius:16px; overflow:hidden; color:#fff; min-height:280px; display:flex; flex-direction:column; justify-content:flex-end; padding:1.8rem; }
.fspl-solution-card::before { content:""; position:absolute; inset:0; }
.fspl-solution-card.residential::before { background: linear-gradient(160deg, rgba(11,59,87,0.75), rgba(11,59,87,0.94)), linear-gradient(135deg,#135078,#0b3b57); }
.fspl-solution-card.commercial::before { background: linear-gradient(160deg, rgba(60,122,69,0.75), rgba(60,122,69,0.94)), linear-gradient(135deg,#4a9457,#3c7a45); }
.fspl-solution-card.industrial::before { background: linear-gradient(160deg, rgba(225,116,12,0.78), rgba(154,79,8,0.94)), linear-gradient(135deg,#e1740c,#9a4f08); }
.fspl-solution-card.utility::before { background: linear-gradient(160deg, rgba(30,42,47,0.78), rgba(6,42,61,0.94)), linear-gradient(135deg,#2f5d52,#062a3d); }
.fspl-solution-card > * { position:relative; z-index:1; }
.fspl-solution-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@media (max-width: 1080px) { .fspl-solution-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px) { .fspl-solution-grid { grid-template-columns:1fr; } }
.fspl-solution-card h3 { margin:0 0 0.4rem; font-size:1.4rem; }
.fspl-solution-card p { margin:0 0 1rem; opacity:0.92; }
.fspl-solution-card a { color:#fff; font-family:"Lexend",sans-serif; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:0.4rem; }
.fspl-solution-card a:hover { text-decoration: underline; }
/* ---------- Project cards ---------- */
.fspl-project-card { border:1px solid #e1e8e4; border-radius:14px; overflow:hidden; background:#fff; transition: box-shadow 180ms ease, transform 180ms ease; }
.fspl-project-card:hover { box-shadow: 0 14px 30px rgba(11,59,87,0.10); transform: translateY(-3px); }
.fspl-project-thumb { aspect-ratio: 4/3; background: linear-gradient(135deg,#0b3b57,#135078); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.55); font-family:"Lexend",sans-serif; font-size:0.85rem; text-align:center; padding:1rem; }
.fspl-project-body { padding:1.2rem 1.3rem 1.4rem; }
.fspl-project-type { display:inline-block; font-size:0.72rem; font-family:"Lexend",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; padding:0.2rem 0.6rem; border-radius:999px; margin-bottom:0.6rem; }
.fspl-project-type.residential { background:#e7eef3; color:#0b3b57; }
.fspl-project-type.commercial { background:#e9f2ea; color:#3c7a45; }
.fspl-project-type.industrial { background:#fcece0; color:#9a4f08; }
.fspl-project-body h3 { margin:0 0 0.4rem; font-size:1.1rem; }
.fspl-project-meta { display:flex; flex-wrap:wrap; gap:0.4rem 1rem; font-size:0.85rem; color:#5c6470; margin-top:0.6rem; }
.fspl-project-meta strong { color:#1e2a2f; }
/* Sample-data badge — must be unmistakable this is placeholder, not a real claim */
.fspl-sample-badge {
display:inline-flex; align-items:center; gap:0.35rem; background:#fff3cd; color:#8a6100;
border:1px solid #f0d78a; padding:0.2rem 0.6rem; border-radius:999px; font-size:0.72rem;
font-family:"Lexend",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
position:absolute; top:0.7rem; left:0.7rem; z-index:2;
}
.fspl-project-thumb { position:relative; }
/* ---------- Testimonials ---------- */
.fspl-testimonial { background:#fff; border:1px solid #e1e8e4; border-radius:14px; padding:1.6rem; /* height:100% removed — same flex-column blowup as .fspl-card; grid rows equalise automatically */ }
.fspl-testimonial .stars { color:#e1740c; letter-spacing:0.1em; margin-bottom:0.6rem; }
.fspl-testimonial p.quote { color:#33414a; font-style:italic; margin:0 0 1rem; }
.fspl-testimonial .who { display:flex; align-items:center; gap:0.7rem; }
.fspl-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#0b3b57,#135078); color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Lexend",sans-serif; font-weight:600; font-size:0.95rem; flex-shrink:0; }
.fspl-testimonial .who strong { display:block; font-size:0.92rem; }
.fspl-testimonial .who span { font-size:0.82rem; color:#5c6470; }
/* ---------- Founder / Director card ---------- */
.fspl-director { display:flex; gap:2rem; align-items:flex-start; flex-wrap:wrap; }
.fspl-director .photo { width:180px; height:180px; border-radius:16px; background:linear-gradient(135deg,#0b3b57,#3c7a45); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-family:"Lexend",sans-serif; font-weight:700; font-size:2.4rem; }
.fspl-director .copy { flex:1; min-width:260px; }
.fspl-pending-note { display:block; box-sizing:border-box; margin-top:0.8rem; font-size:0.82rem; color:#8a6100; background:#fff9eb; border:1px dashed #f0d78a; padding:0.5rem 0.8rem; border-radius:8px; }
/* ---------- Calculator ---------- */
.fspl-calc-tabs { display:flex; gap:0.6rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.fspl-calc-tab { background:#eef3ee; border:1px solid #e1e8e4; color:#1e2a2f; font-family:"Lexend",sans-serif; font-weight:600; font-size:0.92rem; padding:0.7rem 1.3rem; border-radius:10px; cursor:pointer; }
.fspl-calc-tab.active { background:#0b3b57; color:#fff; border-color:#0b3b57; }
.fspl-calc-panel { display:none; }
.fspl-calc-panel.active { display:block; }
.fspl-calc-grid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap:2rem; align-items:flex-start; }
@media (max-width: 880px) { .fspl-calc-grid { grid-template-columns: 1fr; } }
.fspl-calc-form label { display:block; font-family:"Lexend",sans-serif; font-weight:600; font-size:0.88rem; margin: 1rem 0 0.4rem; color:#1e2a2f; }
.fspl-calc-form label:first-child { margin-top: 0; }
.fspl-calc-form input[type="number"], .fspl-calc-form select {
width:100%; padding:0.65rem 0.8rem; border:1px solid #cfd8d4; border-radius:8px; font-size:1rem; font-family: inherit;
background:#fff;
}
.fspl-calc-form .radio-row { display:flex; gap:0.8rem; flex-wrap:wrap; }
.fspl-calc-form .radio-row label { display:flex; align-items:center; gap:0.4rem; font-weight:500; margin:0; background:#f5f8f5; border:1px solid #e1e8e4; padding:0.5rem 0.9rem; border-radius:8px; cursor:pointer; }
.fspl-calc-form .radio-row input { width:auto; }
.fspl-calc-results { background:linear-gradient(160deg,#0b3b57,#135078); color:#fff; border-radius:16px; padding:1.8rem; position:sticky; top:6rem; }
.fspl-calc-results h4 { color:#a9c2d1; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.06em; margin:0 0 1.2rem; }
.fspl-result-row { display:flex; justify-content:space-between; align-items:baseline; padding:0.7rem 0; border-bottom:1px solid rgba(255,255,255,0.14); }
.fspl-result-row:last-child { border-bottom:none; }
.fspl-result-row .label { color:#cfe0ea; font-size:0.9rem; }
.fspl-result-row .value { font-family:"Lexend",sans-serif; font-weight:700; font-size:1.25rem; }
.fspl-result-row.highlight .value { color:#ffb15c; }
.fspl-calc-disclaimer { font-size:0.78rem; color:#5c6470; margin-top:1.2rem; }
.fspl-calc-source { font-size:0.75rem; color:#8ea6b3; margin-top:1rem; }
/* ---------- Facts strip ---------- */
.fspl-facts { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; margin:1.5rem 0; }
.fspl-facts > div { background:#f5f8f5; border:1px solid #e1e8e4; border-radius:10px; padding:0.9rem 1.1rem; }
.fspl-facts strong { display:block; font-family:"Lexend",sans-serif; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:#0b3b57; margin-bottom:0.25rem; }
.fspl-facts span { font-size:0.95rem; color:#1e2a2f; }
@media (max-width: 700px) { .fspl-facts { grid-template-columns: 1fr; } }
/* ---------- FAQ ---------- */
.wp-block-details { border:1.5px solid #e1e8e4; border-radius:10px; padding:0.9rem 1.2rem; margin-bottom:0.8rem; transition:border-color 180ms ease; }
.wp-block-details[open] { border-color:#0b3b57; }
.wp-block-details summary { font-family:"Lexend",sans-serif; font-weight:500; color:#0b3b57; cursor:pointer; }
.wp-block-details summary:hover { color:#e1740c; }
.wp-block-details p { margin:0.7rem 0 0; color:#5c6470; }
/* ---------- Footer ---------- */
.fspl-footer { background:#062a3d; color:#a9c2d1; }
.fspl-footer h3 { color:#fff; font-size:1rem; margin-bottom:0.9rem; }
.fspl-footer a { color:#a9c2d1; text-decoration:none; }
.fspl-footer a:hover { color:#e1740c; }
.fspl-footer .socials a { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08); display:inline-flex; align-items:center; justify-content:center; margin-right:0.5rem; }
.fspl-footer .socials a:hover { background:#e1740c; color:#fff; }
.fspl-footer-bottom { border-top:1px solid rgba(255,255,255,0.1); font-size:0.85rem; color:#7c93a1; }
/* ---------- WhatsApp + call floating buttons ---------- */
.fspl-float-actions { position:fixed; right:max(1.2rem, env(safe-area-inset-right)); bottom:max(1.2rem, env(safe-area-inset-bottom)); z-index:110; display:flex; flex-direction:column; gap:0.7rem; }
.fspl-float-actions a { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,0.2); transition:transform 180ms ease; }
.fspl-float-actions a:hover { transform:scale(1.08); }
.fspl-whatsapp-btn { background:#25D366; }
.fspl-call-btn { background:#0b3b57; }
/* ---------- Readable article column ----------
REMOVED in the Blueprint port (12-08-2026): this v1 rule clamped EVERY
top-level section of every default-template page to a 660px centred column,
crushing the Blueprint's full-bleed bands. Article measure is now set inline
by the [fspl_bp_article] wrapper (width:660px on the text column only). */
/* ---------- Blog card grid ---------- */
.fspl-blog-card { border:1px solid #e1e8e4; border-radius:14px; overflow:hidden; background:#fff; transition: box-shadow 180ms ease, transform 180ms ease; height:100%; display:flex; flex-direction:column; }
.fspl-blog-card:hover { box-shadow:0 14px 30px rgba(11,59,87,0.1); transform:translateY(-3px); }
.fspl-blog-thumb { aspect-ratio: 16/10; background:linear-gradient(135deg,#3c7a45,#0b3b57); }
.fspl-blog-body { padding:1.2rem 1.3rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.fspl-blog-body .cat { font-size:0.72rem; font-family:"Lexend",sans-serif; font-weight:600; text-transform:uppercase; color:#e1740c; margin-bottom:0.5rem; }
.fspl-blog-body h3 { margin:0 0 0.5rem; font-size:1.05rem; }
.fspl-blog-body p { color:#5c6470; font-size:0.9rem; margin:0; flex:1; }
.fspl-blog-body .meta { font-size:0.8rem; color:#8ea0a8; margin-top:0.8rem; }
/* ---------- Culture gallery placeholder tiles ---------- */
.fspl-gallery-tile { aspect-ratio:1; border-radius:12px; background:linear-gradient(135deg,#eef3ee,#e1e8e4); display:flex; align-items:center; justify-content:center; color:#8ea0a8; font-size:0.8rem; text-align:center; padding:0.8rem; }
/* ---------- Career CTA ---------- */
.fspl-career-cta { background:linear-gradient(135deg,#0b3b57,#135078); border-radius:20px; padding:3rem 2rem; text-align:center; color:#fff; }
.fspl-career-cta a.wp-block-button__link { background:#e1740c; }
/* ---------- Forms (Contact Form 7 — contact page + home connect) ---------- */
.wpcf7 { max-width: 640px; }
.fspl-form-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.3rem;
}
.fspl-form-grid label {
display: flex; flex-direction: column; gap: 0.4rem;
font-family: "Lexend", sans-serif; font-weight: 500; font-size: 0.92rem; color: #0b3b57;
}
/* message textarea spans both columns */
.fspl-form-grid label:has(textarea) { grid-column: 1 / -1; }
@media (max-width: 700px) { .fspl-form-grid { grid-template-columns: 1fr; } }
.wpcf7, .wpcf7 * { box-sizing: border-box; }
/* Block-template shortcode rendering autop-injects stray /
into the form
(the home form path; page-content forms stay clean). Stray
s become EMPTY
GRID CELLS that shove fields diagonal — neutralise them structurally. */
.fspl-form-grid > p { display: contents; }
.fspl-form-grid br { display: none; }
.wpcf7 form > p { margin: 0; }
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
width: 100%; padding: 0.75rem 0.95rem;
border: 1.5px solid #dce3e0; border-radius: 10px;
background: #fff; color: #1e2a2f;
font-family: "Source Sans 3", sans-serif; font-size: 1rem; line-height: 1.4;
transition: border-color 160ms ease, box-shadow 160ms ease;
appearance: none; -webkit-appearance: none;
}
.wpcf7 select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230b3b57' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.4rem;
}
.wpcf7 textarea { min-height: 140px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
outline: none; border-color: #0b3b57; box-shadow: 0 0 0 3px rgba(11,59,87,0.12);
}
.wpcf7 ::placeholder { color: #9aa5a0; }
.wpcf7 input[type="submit"] {
margin-top: 1.3rem; cursor: pointer;
background: #e1740c; color: #fff; border: none; border-radius: 8px;
padding: 0.85rem 2rem;
font-family: "Lexend", sans-serif; font-weight: 600; font-size: 1rem;
transition: background 160ms ease, transform 160ms ease;
}
.wpcf7 input[type="submit"]:hover { background: #c4630a; transform: translateY(-1px); }
.wpcf7-spinner { margin: 0 0 0 12px; }
/* validation + response states */
.wpcf7-not-valid { border-color: #c0392b !important; }
.wpcf7-not-valid-tip { color: #c0392b; font-size: 0.85rem; font-weight: 400; margin-top: 0.2rem; }
.wpcf7 form .wpcf7-response-output {
margin: 1.4rem 0 0; padding: 0.85rem 1.1rem; border-radius: 10px;
border: 1.5px solid #dce3e0; font-size: 0.95rem;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #3c7a45; background: #e9f2ea; color: #2c5a33; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { border-color: #c0392b; background: #fdf0ee; color: #96281b; }
/* home "Connect With Us" — form sits on navy band, keep the card white */
.fspl-connect-card .wpcf7 { max-width: none; }
.fspl-connect-card {
background: #fff; border-radius: 16px; padding: 2rem;
box-shadow: 0 18px 44px rgba(4,24,36,0.35);
}
/* ---------- Responsive grid utilities (replace inline grid styles that never stacked on mobile) ---------- */
.fspl-grid-2, .fspl-grid-3, .fspl-grid-4 { display: grid; gap: 1.4rem; }
.fspl-grid-2 { grid-template-columns: repeat(2, 1fr); }
.fspl-grid-3 { grid-template-columns: repeat(3, 1fr); }
.fspl-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) {
.fspl-grid-3, .fspl-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.fspl-grid-2, .fspl-grid-3, .fspl-grid-4 { grid-template-columns: 1fr; }
}
/* ---------- Director cards (3 co-founders) ---------- */
.fspl-director-card { text-align: center; }
.fspl-director-card .photo {
width: 110px; height: 110px; border-radius: 50%;
background: linear-gradient(135deg, #0b3b57, #3c7a45);
display: flex; align-items: center; justify-content: center;
color: #fff; font-family: "Lexend", sans-serif; font-weight: 700; font-size: 1.9rem;
margin: 0 auto 1rem;
}
.fspl-director-card h3 { margin: 0 0 0.2rem; }
.fspl-director-card .role { color: #5c6470; font-weight: 600; font-size: 0.92rem; margin: 0; }
/* ---------- Header search ---------- */
.fspl-search { position: relative; }
.fspl-search summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center;
color: #1e2a2f; padding: 0.4rem 0.2rem;
}
.fspl-search summary::-webkit-details-marker { display: none; }
.fspl-search summary:hover { color: #e1740c; }
.fspl-search[open] summary { color: #0b3b57; }
.fspl-search form {
position: absolute; right: 0; top: calc(100% + 0.8rem); z-index: 120;
display: flex; gap: 0.5rem; background: #fff; padding: 0.7rem;
border: 1px solid #e1e8e4; border-radius: 12px;
box-shadow: 0 16px 40px rgba(11,59,87,0.16); width: 330px;
}
.fspl-search input[type="search"] {
flex: 1; border: 1.5px solid #dce3e0; border-radius: 8px; padding: 0.55rem 0.8rem;
font-family: "Source Sans 3", sans-serif; font-size: 0.95rem; box-sizing: border-box; min-width: 0;
}
.fspl-search input[type="search"]:focus { outline: none; border-color: #0b3b57; }
.fspl-search button, .fspl-mobile-search button {
background: #e1740c; color: #fff; border: none; border-radius: 8px; padding: 0.55rem 1rem;
font-family: "Lexend", sans-serif; font-weight: 600; cursor: pointer;
}
.fspl-mobile-search { display: flex; gap: 0.5rem; padding: 0.4rem 0 0.9rem; }
.fspl-mobile-search input[type="search"] {
flex: 1; border: 1.5px solid #dce3e0; border-radius: 8px; padding: 0.55rem 0.8rem;
font-size: 0.95rem; box-sizing: border-box; min-width: 0;
}
/* ---------- Suryon cross-promo banner (search results + products page) ---------- */
.fspl-suryon-promo {
display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
background: linear-gradient(120deg, #f2f7f7 0%, #ffffff 70%);
border: 1.5px solid #cfe0e1; border-left: 5px solid #008088;
border-radius: 14px; padding: 1.4rem 1.6rem; margin-bottom: 2rem;
box-sizing: border-box;
}
.fspl-suryon-promo img { flex-shrink: 0; height: auto; }
.fspl-suryon-promo .copy { flex: 1; min-width: 240px; }
.fspl-suryon-promo h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.fspl-suryon-promo p { margin: 0; color: #5c6470; font-size: 0.95rem; }
.fspl-suryon-promo .actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.fspl-suryon-promo .actions .ghost { font-size: 0.9rem; color: #0b3b57; }
/* ---------- Search results ---------- */
.fspl-search-result {
border: 1px solid #e1e8e4; border-radius: 12px; padding: 1.2rem 1.4rem; margin-bottom: 1rem;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.fspl-search-result:hover { border-color: #cfe0ea; box-shadow: 0 8px 22px rgba(11,59,87,0.08); }
.fspl-search-result h3 { margin: 0 0 0.3rem; font-size: 1.15rem; }
.fspl-search-result h3 a { text-decoration: none; }
.fspl-search-result p { margin: 0; color: #5c6470; font-size: 0.95rem; }
/* Hero illustration (inline SVG, decorative) */
.fspl-hero-art { display: block; width: min(340px, 100%); margin: 0 auto 0.8rem; }
@media (max-width: 880px) { .fspl-hero-art { display: none; } } /* keep mobile hero tight */
/* Nav crowding after the search icon joined: never wrap labels, tighten gap first */
.fspl-nav a { white-space: nowrap; }
@media (max-width: 1500px) { .fspl-nav-desktop { gap: 1.2rem; } }
@media (max-width: 1200px) { .fspl-nav-desktop { gap: 0.9rem; } .fspl-nav a { font-size: 0.9rem; } }