/* Theme Name: TruShade Apex v2 Author: TruShade Window Films Description: Full custom WordPress theme for TruShade Window Films. Version: 6.1 Text Domain: trushade-apex */ /* ============================================================================ TruShade Apex — style.css ============================================================================ WHAT THIS FILE IS The entire visual design of the website. There is no CSS framework (no Bootstrap/Tailwind) and no build step — this one hand-written file is the whole design system. IMPORTANT: the comment block at the very top of this file is not decoration. WordPress READS it to identify the theme. The "Theme Name" line is what shows up under Appearance > Themes. Do not delete or move it. HOW IT IS LOADED functions.php enqueues this file, auto-versioned by its last-modified time so browsers always pick up edits. See the long note there before changing it. HOW THIS FILE IS ORGANIZED (in order) 1. Design tokens (CSS variables) + dark mode 2. Base / reset 3. Layout primitives (.container, .section) 4. Typography 5. Buttons 6. Site header + navigation 7. Hero sections 8. Section headings 9. Cards + grids 10. Film cards (Solutions page) 11. Two-column + dark feature blocks 12. Process steps + imagery 13. Featured project + reviews 14. Learning Center + long-form article text 15. Calls to action 16. Forms 17. Gallery 18. Footer 19. Responsive breakpoints NAMING NOTE: classes are plain and descriptive (.card, .film-card, .two-col). Markup in the page templates relies on these names, so renaming a class here means updating every template that uses it. ============================================================================ */ /* ============================================================================ 1. DESIGN TOKENS (CSS VARIABLES) + DARK MODE ============================================================================ Every color, radius and shadow is defined once here and referenced everywhere else as var(--name). Change a value here and it updates across the whole site. HOW DARK MODE WORKS (the whole mechanism in one place): JavaScript in header.php/footer.php sets or removes data-theme="dark" on the root element. The second block below re-declares a handful of these same variables under that attribute. Because every rule in this file uses the variables rather than hard-coded colors, flipping that one attribute restyles the entire site. No other CSS has to know dark mode exists. THE CRITICAL DISTINCTION — fixed colors vs. theme-aware colors: --midnight / --midnight2 NEVER change. They are used for sections that are ALREADY dark navy in light mode (the hero banner, .dark-box, .final-cta). If these flipped, those sections would turn white in dark mode and their white text would vanish. --ink / --surface / DO change. These are ordinary page text and card --page-bg / --soft / backgrounds, which must invert. --line / --graphite / --muted That split is why there is a separate --ink token instead of just reusing --midnight for text: the same navy was originally doing both jobs, and dark mode needed to change one use without changing the other. */ :root{ /* Fixed brand colors — identical in both light and dark mode */ --midnight:#0F172A; /* deep navy: dark section backgrounds */ --midnight2:#13233D; /* slightly lighter navy for gradients */ --blue:#1E4D8C; /* primary brand blue: buttons, links */ --blue2:#2563B3; /* brighter blue: hovers, small labels */ --white:#FFFFFF; --gold:#C8A96A; /* accent: checkmarks, review stars, glows */ --green:#2E7D32; /* success messages */ /* Theme-aware colors — the defaults below are the LIGHT mode values. They are overridden in the [data-theme="dark"] block underneath. */ --soft:#F8FAFC; /* subtle off-white section background (.bg-soft) */ --graphite:#334155; /* default body text */ --muted:#64748B; /* secondary/supporting text */ --line:#E2E8F0; /* borders and dividers */ /* Shape + depth */ --radius:18px; --shadow:0 18px 55px rgba(15,23,42,.12); /* Theme-aware tokens — these are the ones that flip in dark mode. --midnight/--midnight2 stay fixed navy always (used for decorative dark sections like hero/CTA blocks that are already dark in light mode). */ --ink:var(--midnight); /* headings + strong text */ --surface:#fff; /* cards, inputs, dropdowns — raised surfaces */ --page-bg:#fff; /* the page background itself */ } /* DARK MODE OVERRIDES. Only the theme-aware tokens are redefined. Everything else inherits from :root above, which is exactly why the navy sections stay navy. */ [data-theme="dark"]{ --ink:#F1F5F9; /* near-white headings */ --graphite:#CBD5E1; /* light gray body text */ --muted:#94A3B8; /* dimmer secondary text */ --surface:#16213A; /* cards sit slightly LIGHTER than the page, so they still read as raised — same depth cue as light mode */ --soft:#101A30; /* alternating section background */ --line:#28324A; /* borders, subtle against the dark background */ --page-bg:#0B1220; /* darkest layer: the page itself */ } /* ============================================================================ 2. BASE / RESET ============================================================================ */ /* border-box makes width include padding and border, so a 300px-wide box with padding is still 300px. Without it, padding is ADDED to the width and every layout calculation on the site would be off. */ *{box-sizing:border-box} /* Animates in-page anchor jumps instead of teleporting. */ html{scroll-behavior:smooth} /* The transition here is what makes the dark-mode switch fade rather than snap. */ body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--graphite);background:var(--page-bg);line-height:1.65;transition:background .2s ease,color .2s ease} /* Stops any image from overflowing its container; height:auto keeps aspect ratio. */ img{max-width:100%;height:auto} /* Links inherit their surrounding text color; each component colors its own. */ a{text-decoration:none;color:inherit} /* ============================================================================ 3. LAYOUT PRIMITIVES ============================================================================ */ /* The standard centered content column used by nearly every section. min() picks whichever is SMALLER: a 1180px max width on large screens, or the full viewport minus a 40px gutter on small ones. That single line handles both desktop capping and mobile side-padding. */ .container{width:min(1180px,calc(100% - 40px));margin:0 auto} /* Consistent vertical rhythm between page sections. */ .section{padding:105px 0} /* Applied to alternating sections for subtle visual separation. */ .bg-soft{background:var(--soft)} /* ============================================================================ 4. TYPOGRAPHY ============================================================================ */ /* Small uppercase eyebrow label sitting above most headings. */ .small-label{letter-spacing:.22em;text-transform:uppercase;font-size:.76rem;font-weight:900;color:var(--blue2)} /* Headings use Manrope; body uses Inter (both loaded in functions.php). */ h1,h2,h3{font-family:Manrope,Inter,sans-serif;color:var(--ink);margin:0;line-height:1.04} /* clamp(min, preferred, max) = fluid type. The middle value scales with the viewport width while the outer two stop it getting too small or too huge. This is why headings resize smoothly instead of jumping at breakpoints. The negative letter-spacing tightens large display text, which otherwise looks loosely spaced at big sizes. */ h1{font-size:clamp(3rem,7vw,6.7rem);letter-spacing:-.07em} h2{font-size:clamp(2.1rem,4vw,4rem);letter-spacing:-.05em} h3{font-size:1.35rem;letter-spacing:-.03em} p{margin:0;color:var(--graphite)} /* Intro paragraph style: larger, lighter, and width-capped for readability. */ .lead{font-size:1.15rem;color:var(--muted);max-width:780px} /* ============================================================================ 5. BUTTONS ============================================================================ .btn is the shared shape/size; a variant class supplies the colors. Usage: class="btn btn-primary" */ .btn-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center} /* min-height:54px keeps buttons comfortably tappable on touch screens. */ .btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 24px;border-radius:12px;font-weight:850;font-size:.95rem;transition:.25s ease;border:1px solid transparent} /* Primary: solid brand blue. The lift on hover is the site-wide hover pattern. */ .btn-primary{background:var(--blue);color:#fff;box-shadow:0 14px 30px rgba(30,77,140,.24)} .btn-primary:hover{background:var(--blue2);transform:translateY(-2px)} /* Secondary: for use ON dark backgrounds (hero sections) — hence white text and a translucent fill that lets the background show through. */ .btn-secondary{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.34);color:#fff} .btn-secondary:hover{background:var(--surface);color:var(--ink)} /* Light: for use on light backgrounds. */ .btn-light{background:var(--surface);border-color:var(--line);color:var(--ink)} .btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow)} /* ============================================================================ 6. SITE HEADER + NAVIGATION (markup lives in header.php) ============================================================================ */ /* position:sticky keeps the header visible while scrolling. z-index:50 keeps it above page content. The translucent background + backdrop blur creates the frosted-glass effect. */ .header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(226,232,240,.9)} /* Dark mode needs an explicit override here because the light value is a hard-coded rgba() (for the blur transparency) rather than a variable. */ [data-theme="dark"] .header{background:rgba(11,18,32,.92);border-bottom-color:rgba(40,50,74,.9)} .header-inner{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:28px} .logo-wrap img{width:150px;max-height:78px;object-fit:contain;display:block} /* Desktop nav — hidden under 1100px by the media query at the bottom. */ .nav{display:flex;align-items:center;gap:23px;font-weight:800;font-size:.92rem;color:var(--ink)} .nav a{opacity:.86}.nav a:hover{opacity:1;color:var(--blue)} /* Hamburger button — hidden by default, shown under 1100px. */ .mobile-toggle{display:none;flex-direction:column;justify-content:space-between;width:30px;height:22px;padding:0;border:0;background:transparent;cursor:pointer;z-index:60} /* Dark mode toggle button (the moon/sun circle). */ .theme-toggle{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:1.1rem;transition:.2s ease;flex-shrink:0} .theme-toggle:hover{border-color:var(--blue2)} .theme-toggle-icon{line-height:1;display:block} /* The three hamburger bars are three empty s drawn by CSS. */ .mobile-toggle span{display:block;width:100%;height:3px;border-radius:3px;background:var(--ink);transition:.25s ease} /* Hamburger → X animation. This keys off aria-expanded="true", which assets/mobile-nav.js sets when opening the menu. Driving the animation from the accessibility attribute means the visual state and the state announced to screen readers can never disagree. Bars 1 and 3 slide to the middle and rotate into a cross; bar 2 fades out. */ .mobile-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9.5px) rotate(45deg)} .mobile-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .mobile-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)} /* Mobile dropdown. Always in the HTML but display:none until JS adds .is-open. Positioned absolutely at top:100% so it hangs directly below the header. */ .mobile-nav{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(15,23,42,.12);padding:10px 24px 22px} .mobile-nav.is-open{display:flex} .mobile-nav a{padding:13px 0;font-weight:800;color:var(--ink);border-bottom:1px solid var(--line)} .mobile-nav a:last-child{border-bottom:0} .mobile-nav .btn{margin-top:14px} /* Stops the header's call-to-action button wrapping onto two lines. */ .header-cta{white-space:nowrap} /* ============================================================================ 7. HERO SECTIONS ============================================================================ .hero — the tall homepage hero .page-hero — the shorter banner on every interior page */ /* Two stacked backgrounds in one declaration: a navy gradient over a soft gold radial glow. The gradient uses near-opaque navy so text stays readable over the background image added by .hero:before below. */ .hero{position:relative;min-height:780px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(120deg,rgba(15,23,42,.99),rgba(15,23,42,.87) 52%,rgba(30,77,140,.78)),radial-gradient(circle at 80% 18%,rgba(200,169,106,.16),transparent 26%)} /* A pseudo-element holds the background image so its opacity can be lowered independently of the hero's text (opacity on the parent would fade the text). */ .hero:before{content:"";position:absolute;inset:0;background:url('assets/luxury-window-bg.svg');background-size:cover;background-position:center;opacity:.38} /* Lifts the content above the :before image layer. */ .hero .container{position:relative;z-index:2} .hero-content{max-width:800px} .hero h1{color:#fff;margin:24px 0 28px} .hero p{color:rgba(255,255,255,.84);font-size:1.18rem;max-width:690px;margin-bottom:34px} /* The row of trust points under the hero copy. */ .trust-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;color:rgba(255,255,255,.82);font-size:.92rem;font-weight:800} /* Gold checkmarks are generated in CSS, so the HTML stays clean text. */ .trust-row span:before{content:"✓";color:var(--gold);font-weight:900;margin-right:8px} /* Interior page banner. Uses the FIXED --midnight (not --ink) because it must stay dark in both themes — its text is hard-coded white. */ .page-hero{padding:125px 0;background:linear-gradient(135deg,var(--midnight),#132b4f);color:#fff;position:relative;overflow:hidden} /* Decorative gold circle bleeding off the top-right corner. overflow:hidden on the parent clips it. */ .page-hero:after{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:999px;background:rgba(200,169,106,.14)} .page-hero h1{color:#fff;max-width:900px} .page-hero p{color:rgba(255,255,255,.78);font-size:1.15rem;max-width:760px;margin-top:24px} /* ============================================================================ 8. SECTION HEADINGS ============================================================================ */ .section-head{max-width:820px;margin-bottom:46px} .section-head.center{text-align:center;margin-left:auto;margin-right:auto} .section-head p{font-size:1.08rem;margin-top:18px;color:var(--muted)} /* ============================================================================ 9. CARDS + GRIDS ============================================================================ Grid columns are set here for DESKTOP. The media queries at the bottom of the file reduce them to 2 columns, then 1, as the screen narrows. */ .card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .card-grid.five{grid-template-columns:repeat(5,1fr)} /* ============================================================================ 10. FILM CARDS (the product lineup on the Solutions page) ============================================================================ */ /* "Every film blocks 98%+ of harmful UV rays" pill. */ .uv-badge{display:inline-flex;align-items:center;gap:8px;background:#EEF3FA;border:1px solid #DCE6F2;color:var(--blue);font-size:.86rem;font-weight:800;padding:9px 18px;border-radius:999px;margin-top:18px} /* One .film-series block per product series (Elite, Signature, Reflective, Specialty). :last-child removes the trailing gap after the final series. */ .film-series{margin-bottom:44px} .film-series:last-child{margin-bottom:0} .film-series-head{margin-bottom:20px} .film-series-head h3{font-size:1.25rem} .film-series-head .small-label{margin-bottom:6px;display:block} /* 3 across by default; add class "four" for a four-film series. */ .film-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .film-grid.four{grid-template-columns:repeat(4,1fr)} /* An individual film card. The lift-on-hover matches the buttons and .card. */ .film-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px 22px;box-shadow:0 8px 22px rgba(15,23,42,.04);transition:.25s ease} .film-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(30,77,140,.2)} /* Top row: marketing name on the left, SunTek product code on the right. align-items:baseline lines up the two different text sizes by their letter baselines rather than their boxes. */ .film-card-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px} .film-name{font-weight:800;font-size:1rem;color:var(--ink)} .film-code{font-size:.7rem;color:var(--muted);font-weight:700;white-space:nowrap} /* The "best for" line — the plain-language reason to pick this film. */ .film-best{color:var(--blue2);font-weight:700;font-size:.86rem;margin-bottom:16px;line-height:1.4} /* Performance stat pills (VLT %, heat block %, glare cut %, etc.). flex-wrap lets them flow onto extra rows on narrow screens. */ .film-specs{display:flex;flex-wrap:wrap;gap:8px} .film-specs span{font-size:.74rem;color:var(--muted);background:#F5F7FA;border-radius:7px;padding:4px 9px} .film-specs span strong{color:var(--ink)} /* Warranty line, separated by a divider at the card's foot. */ .film-warranty{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:.74rem;color:var(--muted)} /* Generic content card used across most pages. min-height keeps a row of cards even when their text lengths differ. */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 25px;box-shadow:0 10px 28px rgba(15,23,42,.04);transition:.25s ease;min-height:235px} .card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(30,77,140,.25)} /* Rounded square holding a card's emoji icon. */ .icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(30,77,140,.09);color:var(--blue);font-size:1.45rem;margin-bottom:22px} .card p{font-size:.96rem;margin:12px 0 20px;color:var(--muted)} .card a{font-weight:900;color:var(--blue)} /* ============================================================================ 11. TWO-COLUMN LAYOUT + DARK FEATURE BLOCKS ============================================================================ */ /* Standard 50/50 split (text one side, image or dark box the other). Collapses to a single column under 1100px. */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} /* Navy callout panel. Uses FIXED --midnight so it stays dark in both themes — its text is hard-coded white. */ .dark-box{background:var(--midnight);border-radius:28px;padding:50px;color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden} .dark-box:before{content:"";position:absolute;width:260px;height:260px;border-radius:999px;right:-100px;top:-100px;background:rgba(200,169,106,.16)} .dark-box h2,.dark-box h3{color:#fff}.dark-box p{color:rgba(255,255,255,.78);margin-top:18px} /* Stacked list of feature rows. */ .feature-list{display:grid;gap:18px} .feature{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:23px 24px} .feature strong{display:block;color:var(--ink);font-family:Manrope;font-size:1.12rem;margin-bottom:6px} .feature span{color:var(--muted)} /* ============================================================================ 12. PROCESS STEPS + SPLIT IMAGERY ============================================================================ */ /* Five-across "The TruShade Method" row on the homepage. */ .process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px} .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:27px 22px;min-height:220px} /* Numbered circle. Fixed navy in both themes so the white numeral stays legible. */ .step-number{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--midnight);color:#fff;font-weight:900;margin-bottom:22px} .step p{margin-top:12px;color:var(--muted);font-size:.95rem} /* Rounded image panel used opposite text in .two-col sections. object-fit:cover fills the frame without distorting the photo. */ .split-visual{min-height:410px;border-radius:28px;box-shadow:var(--shadow);overflow:hidden} .split-visual img{width:100%;height:100%;min-height:410px;object-fit:cover;display:block} /* ============================================================================ 13. FEATURED PROJECT + REVIEWS ============================================================================ */ /* Full-width dark band. Note the nested overrides force white text on all children, since the section's own background is dark in BOTH themes. */ .featured{background:linear-gradient(135deg,var(--midnight),var(--midnight2));color:#fff} .featured h2,.featured h3{color:#fff}.featured p{color:rgba(255,255,255,.76)} /* Sits inside .featured, so its colors are translucent WHITE (not var-based) — it is always on a dark background. */ .project-card{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:28px} .project-visual{min-height:360px;border-radius:22px;border:1px solid rgba(255,255,255,.12);overflow:hidden} .project-visual img{width:100%;height:100%;min-height:360px;object-fit:cover;display:block} .meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px} .meta{border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:14px}.meta strong{display:block;color:#fff}.meta span{font-size:.86rem;color:rgba(255,255,255,.68)} /* Testimonial cards — these sit on a LIGHT background, so they use variables. */ .review-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .review{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:0 12px 34px rgba(15,23,42,.05)} .stars{color:var(--gold);letter-spacing:.1em;font-size:1.1rem;margin-bottom:16px}.review p{font-size:1.08rem;color:var(--ink)}.review strong{display:block;margin-top:20px;color:var(--blue)} /* ============================================================================ 14. LEARNING CENTER + LONG-FORM ARTICLE TEXT ============================================================================ */ /* Article preview cards on the Learning Center index. */ .learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .article-card{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:0 10px 30px rgba(15,23,42,.04)} /* Fixed-height image area so all cards in a row line up regardless of photo size. */ .article-image{height:190px;overflow:hidden} .article-image img{width:100%;height:100%;object-fit:cover;display:block} .article-body{padding:26px}.article-body p{margin-top:12px;color:var(--muted);font-size:.95rem}.article-body a{display:inline-block;margin-top:18px;color:var(--blue);font-weight:900} /* .prose = the body of a full article page (page-article-*.php). The 740px cap and taller line-height are readability settings: long lines of text are hard to track back to the start of the next line. */ .prose{max-width:740px} .prose p{margin-bottom:18px;font-size:1.03rem;line-height:1.75} .prose h2{font-size:1.55rem;margin-top:42px;margin-bottom:16px} .prose ul{margin:0 0 20px 22px;padding:0} .prose li{margin-bottom:10px;line-height:1.65;color:var(--graphite)} .prose .lead{margin-bottom:6px} /* ============================================================================ 15. CALLS TO ACTION ============================================================================ */ /* Large rounded navy panel closing most pages. Fixed navy in both themes. */ .final-cta{text-align:center;background:linear-gradient(135deg,var(--midnight),#10264a);color:#fff;border-radius:32px;padding:70px 30px;position:relative;overflow:hidden} .final-cta h2{color:#fff}.final-cta p{color:rgba(255,255,255,.78);margin:20px auto 32px;max-width:700px;font-size:1.1rem} /* ============================================================================ 16. FORMS (Contact + Schedule a Consultation pages) ============================================================================ */ .form-wrap{background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:36px} /* Success/error banners shown after a form submission. */ .notice-box{border-radius:12px;padding:14px 16px;margin-bottom:20px;font-weight:600;font-size:.95rem} .notice-success{background:#EAF6EC;border:1px solid var(--green);color:var(--green)} .notice-error{background:#FDECEC;border:1px solid #C0392B;color:#C0392B} .notice-error a{text-decoration:underline} /* The error banner's light-mode colors are hard-coded (not variables), so dark mode needs this explicit override or the pale pink would glare on a dark page. */ [data-theme="dark"] .notice-error{background:#3A1414;border-color:#E57373;color:#FF8A8A} /* Two-column form layout; .field.full spans both columns for wide inputs. */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{display:flex;flex-direction:column;gap:8px} .field.full{grid-column:1/-1} label{font-weight:850;color:var(--ink);font-size:.92rem} /* font:inherit makes inputs use the site font — browsers otherwise default form controls to their own system font, which looks out of place. */ input,select,textarea{border:1px solid var(--line);border-radius:12px;padding:14px 14px;font:inherit;color:var(--ink);background:var(--surface)} textarea{min-height:130px} button.btn{cursor:pointer} /* ============================================================================ 17. GALLERY ============================================================================ */ .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} /* Placeholder tiles until real project photos are added: a brand-colored gradient layered over a generic placeholder graphic. */ .gallery-item{min-height:250px;border-radius:24px;background:linear-gradient(135deg,rgba(30,77,140,.2),rgba(200,169,106,.14)),url('assets/project-placeholder.svg');background-size:cover;background-position:center;border:1px solid var(--line)} /* ============================================================================ 18. FOOTER (markup lives in footer.php) ============================================================================ */ /* Hard-coded near-black: the footer is intentionally dark in BOTH themes. */ .footer{padding:54px 0;background:#07111f;color:rgba(255,255,255,.72)} /* --------------------------------------------------------------------------- CRITICAL LAYOUT FIX — do not delete. --------------------------------------------------------------------------- Grid items default to min-width:auto, which lets wide content (long text, inputs, etc.) force the whole grid wider than its container on narrow screens — this line prevents that for every grid layout on the site. This caused a real bug: the Contact and Schedule pages overflowed ~20px horizontally on phones, producing sideways scrolling and cut-off content. The form inputs would not shrink below their natural width, so they pushed the grid wider than the screen. Setting min-width:0 lets grid children shrink properly. Applied to every grid on the site so the same bug cannot resurface elsewhere. */ .card-grid>*,.film-grid>*,.two-col>*,.feature-list>*,.process-grid>*,.project-card>*,.meta-grid>*,.review-grid>*,.learn-grid>*,.form-grid>*,.gallery-grid>*,.footer-grid>*{min-width:0} /* Footer link columns: a wider first column for the blurb, then three equal ones. */ .footer-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:34px}.footer strong{display:block;color:#fff;margin-bottom:14px;font-family:Manrope}.footer a{display:block;margin:8px 0;color:rgba(255,255,255,.7)}.footer a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:24px;font-size:.88rem;color:rgba(255,255,255,.52)} /* The Quote Builder link in the copyright bar. !important is needed to beat the ".footer a{display:block}" rule above so it sits inline with the copyright text. Deliberately low-contrast: it is an internal tool, not a customer link. */ .footer-tool-link{display:inline !important;margin:0 0 0 10px !important;color:rgba(255,255,255,.3);font-size:.8rem;text-decoration:none} .footer-tool-link:hover{color:rgba(255,255,255,.65)} /* ============================================================================ 19. RESPONSIVE BREAKPOINTS ============================================================================ This file is written desktop-first: the rules above are the desktop layout, and these blocks progressively simplify it for smaller screens. Two breakpoints only: max-width:1100px — tablets/small laptops: swap to the mobile nav, halve most grids max-width:640px — phones: collapse everything to a single column NOTE: the 1100px value is duplicated in assets/mobile-nav.js (which closes the menu when the window grows past it). Change one, change the other. */ @media(max-width:1100px){ /* Swap desktop nav for the hamburger; shrink the header slightly. */ .nav{display:none}.mobile-toggle{display:flex}.header-inner{min-height:82px} /* 4- and 5-across grids drop to 2 across. */ .card-grid,.card-grid.five,.process-grid,.film-grid,.film-grid.four{grid-template-columns:repeat(2,1fr)} /* Side-by-side layouts stack vertically. */ .two-col,.project-card,.review-grid,.learn-grid,.footer-grid,.gallery-grid{grid-template-columns:1fr} /* Rein in the fluid h1 so it does not dominate a small screen. */ h1{font-size:clamp(3rem,10vw,5rem)} } @media(max-width:640px){ /* Tighter gutters, shorter sections, smaller logo. .header-cta is hidden because the header runs out of room — the mobile menu repeats that button instead. .btn goes full-width, the standard mobile pattern for easy tapping. */ .container{width:min(100% - 28px,1180px)}.section{padding:74px 0}.hero{min-height:710px}.logo-wrap img{width:128px}.header-cta{display:none}.btn{width:100%} /* Everything remaining collapses to a single column. */ .card-grid,.card-grid.five,.process-grid,.meta-grid,.form-grid,.film-grid,.film-grid.four{grid-template-columns:1fr} }