/* * ============================================================================ * bootstrap-theme-gatw.css * Glass at Work — Bootstrap 5 Theme Override * ============================================================================ * * * BRAND COLOURS — TWO SOURCE COLOURS ONLY * ───────────────────────────────────────── * Blue: #3f7bb6 (mid steel-blue — buttons, links, UI accents) * Green: #6ea800 (darker lime-green — WCAG AA on white, CTA bar) * All other colour tokens are computed shades of these two. * To rebrand: change --gatw-blue and --gatw-green only. * ============================================================================ */ /* ============================================================================ 1. BRAND COLOUR TOKENS ============================================================================ */ :root { --header-total-height: 90px; /* Main header height — change this one value if header changes */ /* ────────────────────────────────────────────────────────────────────── * BLUE — source: #3f7bb6 * RGB: 63, 123, 182 * ────────────────────────────────────────────────────────────────────── */ --gatw-blue: #3f7bb6; /* base — buttons, links, borders */ --gatw-blue-dark: #2d5f91; /* hover on light bg (-15% L) */ --gatw-blue-darker: #1c3d5e; /* active / pressed (-30% L) */ --gatw-blue-light: #6699c8; /* icons on dark bg (+12% L) */ --gatw-blue-lighter: #9fbedd; /* subtle accents (+25% L) */ --gatw-blue-50: rgba(63, 123, 182, 0.50); --gatw-blue-20: rgba(63, 123, 182, 0.20); --gatw-blue-12: rgba(63, 123, 182, 0.12); --gatw-blue-06: rgba(63, 123, 182, 0.06); /* ────────────────────────────────────────────────────────────────────── * GREEN — source: #6ea800 * RGB: 110, 168, 0 — darker lime, WCAG AA contrast on white * ────────────────────────────────────────────────────────────────────── */ --gatw-green: #6ea800; /* base — CTA bar, action elements */ --gatw-green-dark: #537e00; /* hover / text on white (-20% L) */ --gatw-green-darker: #375400; /* active / pressed (-35% L) */ --gatw-green-light: #93c826; /* lighter fill (+15% L) */ --gatw-green-lighter: #c4e07a; /* pale tint backgrounds (+35% L) */ --gatw-green-pale: #f2f9e0; /* near-white green bg */ --gatw-green-20: rgba(110, 168, 0, 0.20); --gatw-green-12: rgba(110, 168, 0, 0.12); --gatw-green-06: rgba(110, 168, 0, 0.06); /* ────────────────────────────────────────────────────────────────────── * LOGO PINK — logo mark only, never use in UI * ────────────────────────────────────────────────────────────────────── */ --gatw-pink: #e91e8c; /* ────────────────────────────────────────────────────────────────────── * NEUTRALS * ────────────────────────────────────────────────────────────────────── */ --gatw-ink: #141618; /* dark section backgrounds */ --gatw-ink-mid: #1e2124; /* dark section card backgrounds */ --gatw-ink-soft: #252a2e; /* dark section hover states */ --gatw-page-bg: #f8f9fa; /* body background */ --gatw-surface: #ffffff; /* card / panel surface */ --gatw-surface-2: #f0f2f5; /* inset / secondary surface */ --gatw-surface-3: #e4e7ec; /* inset / secondary surface */ --gatw-surface-4: #d6dae2; /* inset / secondary surface */ --gatw-border-light: #e2e5ea; /* default borders */ --gatw-border-mid: #cdd1d8; /* stronger borders, dividers */ --gatw-text-dark: #1a1d21; /* headings */ --gatw-text-body: #4a5260; /* body copy */ --gatw-text-muted: #8a93a2; /* captions, meta */ /* Star ratings */ --gatw-star: #f5a623; /* ────────────────────────────────────────────────────────────────────── * FONTS * ────────────────────────────────────────────────────────────────────── */ --gatw-font-display: 'Barlow Condensed', sans-serif; --gatw-font-body: 'Barlow', sans-serif; --gatw-font-mono: 'DM Mono', monospace; /* ── Override Bootstrap 5 CSS custom properties ── */ --bs-blue: var(--gatw-blue); --bs-green: var(--gatw-green); --bs-yellow: var(--gatw-star); --bs-body-color: var(--gatw-text-body); --bs-body-bg: var(--gatw-page-bg); --bs-emphasis-color: var(--gatw-text-dark); --bs-secondary-color: var(--gatw-text-muted); --bs-border-color: var(--gatw-border-light); /* ── PRIMARY = brand blue ── */ --bs-primary: var(--gatw-blue); --bs-primary-rgb: 63, 123, 182; --bs-primary-bg-subtle: var(--gatw-blue-06); --bs-primary-border-subtle: var(--gatw-blue-20); --bs-primary-text-emphasis: var(--gatw-blue-darker); /* ── SECONDARY = neutral mid-grey ── */ --bs-secondary: #6c757d; --bs-secondary-rgb: 108, 117, 125; --bs-secondary-bg-subtle: #f0f2f5; --bs-secondary-border-subtle: var(--gatw-border-mid); --bs-secondary-text-emphasis: var(--gatw-text-body); /* ── SUCCESS = brand green ── */ --bs-success: var(--gatw-green); --bs-success-rgb: 110, 168, 0; --bs-success-bg-subtle: var(--gatw-green-06); --bs-success-border-subtle: var(--gatw-green-20); --bs-success-text-emphasis: var(--gatw-green-darker); /* ── DANGER = warm red (standard Bootstrap, not overridden) ── */ --bs-danger: #dc3545; --bs-danger-rgb: 220, 53, 69; --bs-danger-bg-subtle: #fff0f1; --bs-danger-border-subtle: rgba(220, 53, 69, 0.25); --bs-danger-text-emphasis: #a71d2a; /* ── WARNING = star amber ── */ --bs-warning: var(--gatw-star); --bs-warning-rgb: 245, 166, 35; --bs-warning-bg-subtle: rgba(245, 166, 35, 0.10); --bs-warning-border-subtle: rgba(245, 166, 35, 0.30); --bs-warning-text-emphasis: #8a5700; /* ── INFO = blue-light (teal) ── */ --bs-info: var(--gatw-blue-light); --bs-info-rgb: 102, 153, 200; --bs-info-bg-subtle: rgba(102, 153, 200, 0.10); --bs-info-border-subtle: rgba(102, 153, 200, 0.30); --bs-info-text-emphasis: var(--gatw-blue-darker); /* ── LIGHT = page background ── */ --bs-light: var(--gatw-surface-2); --bs-light-rgb: 240, 242, 245; --bs-light-bg-subtle: var(--gatw-page-bg); --bs-light-border-subtle: var(--gatw-border-light); --bs-light-text-emphasis: var(--gatw-text-body); /* ── DARK = ink ── */ --bs-dark: var(--gatw-text-dark); --bs-dark-rgb: 26, 29, 33; --bs-dark-bg-subtle: rgba(26, 29, 33, 0.08); --bs-dark-border-subtle: rgba(26, 29, 33, 0.20); --bs-dark-text-emphasis: var(--gatw-ink); /* Typography */ --bs-font-sans-serif: var(--gatw-font-body); --bs-body-font-family: var(--gatw-font-body); --bs-body-font-weight: 400; --bs-body-font-size: 0.9rem; --bs-body-line-height: 1.75; --bs-heading-color: var(--gatw-text-dark); /* Links */ --bs-link-color: var(--gatw-blue); --bs-link-color-rgb: 63, 123, 182; --bs-link-hover-color: var(--gatw-blue-dark); --bs-link-decoration: none; --bs-link-hover-decoration: underline; /* Border radius */ --bs-border-radius: 8px; --bs-border-radius-sm: 5px; --bs-border-radius-lg: 12px; --bs-border-radius-xl: 16px; --bs-border-radius-pill: 50rem; /* Shadows */ --bs-box-shadow-sm: 0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05); --bs-box-shadow: 0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05); --bs-box-shadow-lg: 0 8px 28px rgba(0,0,0,0.11), 0 4px 10px rgba(0,0,0,0.06); /* Card */ --bs-card-border-color: var(--gatw-border-light); --bs-card-border-radius: var(--bs-border-radius); --bs-card-box-shadow: var(--bs-box-shadow-sm); --bs-card-bg: var(--gatw-surface); --bs-card-cap-bg: var(--gatw-surface-2); /* Form */ --bs-border-color-translucent: rgba(0,0,0,0.1); --bs-form-control-bg: var(--gatw-surface); --bs-form-control-border-color: var(--gatw-border-mid); /* Badge */ --bs-badge-font-size: 0.62em; --bs-badge-font-weight: 400; --bs-badge-border-radius: 4px; /* Table */ --bs-table-border-color: var(--gatw-border-light); --bs-table-striped-bg: rgba(63, 123, 182, 0.03); --bs-table-hover-bg: rgba(63, 123, 182, 0.06); /* Custom striped table — e.g. a "danger" themed table */ .table-striped-danger { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(220, 53, 69, 0.06); --bs-table-hover-bg: rgba(220, 53, 69, 0.10); } /* Green / success themed stripes */ .table-striped-success { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(110, 168, 0, 0.06); --bs-table-hover-bg: rgba(110, 168, 0, 0.10); } /* Neutral / grey stripes */ .table-striped-neutral { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(0, 0, 0, 0.02); --bs-table-hover-bg: rgba(0, 0, 0, 0.07); } /* Accordion */ --bs-accordion-border-color: var(--gatw-border-light); --bs-accordion-btn-color: var(--gatw-text-dark); --bs-accordion-btn-bg: var(--gatw-surface); --bs-accordion-active-color: var(--gatw-blue-dark); --bs-accordion-active-bg: var(--gatw-blue-06); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem var(--gatw-blue-20); /* Breadcrumb */ --bs-breadcrumb-divider-color: var(--gatw-border-mid); --bs-breadcrumb-active-color: var(--gatw-text-muted); --bs-breadcrumb-item-active-color: var(--gatw-text-muted); /* Pagination */ --bs-pagination-color: var(--gatw-blue); --bs-pagination-border-color: var(--gatw-border-light); --bs-pagination-hover-color: var(--gatw-blue-dark); --bs-pagination-hover-bg: var(--gatw-blue-06); --bs-pagination-hover-border-color: var(--gatw-blue); --bs-pagination-active-bg: var(--gatw-blue); --bs-pagination-active-border-color:var(--gatw-blue); --bs-pagination-disabled-color: var(--gatw-text-muted); /* Tooltip */ --bs-tooltip-bg: var(--gatw-ink-mid); --bs-popover-border-color: var(--gatw-border-light); /* Navbar */ --bs-navbar-padding-y: 0.75rem; --bs-nav-link-color: var(--gatw-text-body); --bs-nav-link-hover-color: var(--gatw-blue); /* * FLUID TYPOGRAPHY OVERRIDES * clamp(MINIMUM size on mobile, PREFERRED scaling size, MAXIMUM size on desktop) */ --bs-h1-font-size: clamp(2.0rem, 6vw, 3.1rem); /* Max matches your old .f30 */ --bs-h2-font-size: clamp(1.6rem, 5vw, 2.6rem); /* Max matches your old .f25 */ --bs-h3-font-size: clamp(1.4rem, 4vw, 2.1rem); --bs-h4-font-size: clamp(1.2rem, 3vw, 1.6rem); --bs-h5-font-size: clamp(1.1rem, 2vw, 1.3rem); --bs-h6-font-size: clamp(1.0rem, 1.5vw, 1.1rem); } html { overflow-x: hidden; } body { min-height: 100vh; } .body-wrap { min-height: 100vh; } /* ============================================================================ 2. TYPOGRAPHY OVERRIDES ============================================================================ */ /* Headings — Barlow Condensed, uppercase, tight tracking */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gatw-text-dark); line-height: 1.1; } /* Display sizes — even wider condensed */ .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.0; } /* Lead text */ .lead { font-family: 'Barlow', sans-serif; font-weight: 300; font-size: 1rem; color: var(--gatw-text-body); line-height: 1.8; } /* Small / muted */ .text-muted { color: var(--gatw-text-body) !important; font-weight: 400; } /* Mono labels — used for eyebrows, tags, meta */ small, .small { font-family: 'Barlow', sans-serif; font-weight: 300; } /* Blockquote */ blockquote, .blockquote { font-style: italic; color: var(--gatw-text-body); border-left: 3px solid var(--gatw-blue); padding-left: 1rem; } /* Code */ code { color: var(--gatw-blue-dark); background: rgba(52,152,219,0.08); padding: 0.15em 0.4em; border-radius: 3px; } /* ── Primary (blue) background utilities ── */ .bg-primary-base { background-color: var(--gatw-blue) !important; color: #fff; } .bg-primary-dark { background-color: var(--gatw-blue-dark) !important; color: #fff; } .bg-primary-darker { background-color: var(--gatw-blue-darker) !important; color: #fff; } .bg-primary-light { background-color: var(--gatw-blue-light) !important; color: #fff; } .bg-primary-lighter { background-color: var(--gatw-blue-lighter)!important; color: var(--gatw-blue-darker); } .bg-primary-50 { background-color: var(--gatw-blue-50) !important; } .bg-primary-20 { background-color: var(--gatw-blue-20) !important; } .bg-primary-12 { background-color: var(--gatw-blue-12) !important; } .bg-primary-06 { background-color: var(--gatw-blue-06) !important; } /* ── Success (green) background utilities ── */ .bg-success-base { background-color: var(--gatw-green) !important; color: #fff; } .bg-success-dark { background-color: var(--gatw-green-dark) !important; color: #fff; } .bg-success-darker { background-color: var(--gatw-green-darker) !important; color: #fff; } .bg-success-light { background-color: var(--gatw-green-light) !important; color: #fff; } .bg-success-lighter { background-color: var(--gatw-green-lighter)!important; color: var(--gatw-green-darker); } .bg-success-pale { background-color: var(--gatw-green-pale) !important; color: var(--gatw-green-darker); } .bg-success-20 { background-color: var(--gatw-green-20) !important; } .bg-success-12 { background-color: var(--gatw-green-12) !important; } .bg-success-06 { background-color: var(--gatw-green-06) !important; } /* ============================================================================ 3. BUTTONS ============================================================================ */ /* All buttons — Barlow Condensed, uppercase, wider tracking, vertically centred */ .btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; border-radius: var(--bs-border-radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: 7px; line-height: 1; vertical-align: middle; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:disabled, .btn.disabled { transform: none; } /* Primary — blue */ .btn-primary { background-color: var(--gatw-blue); border-color: var(--gatw-blue); color: #fff; } .btn-primary:hover, .btn-primary:focus { background-color: var(--gatw-blue-dark); border-color: var(--gatw-blue-dark); color: #fff; box-shadow: 0 4px 18px rgba(63, 123, 182, 0.50), 0 1px 4px rgba(63, 123, 182, 0.30); } /* Success — green */ .btn-success { background-color: var(--gatw-green); border-color: var(--gatw-green); color: #fff; } .btn-success:hover, .btn-success:focus { background-color: var(--gatw-green-dark); border-color: var(--gatw-green-dark); color: #fff; box-shadow: 0 4px 18px rgba(110, 168, 0, 0.50), 0 1px 4px rgba(110, 168, 0, 0.30); } /* Warning — amber */ .btn-warning { background-color: var(--gatw-star); border-color: var(--gatw-star); color: #fff; } .btn-warning:hover, .btn-warning:focus { background-color: #d4890a; border-color: #d4890a; color: #fff; box-shadow: 0 4px 18px rgba(245, 166, 35, 0.50), 0 1px 4px rgba(245, 166, 35, 0.30); } /* Danger — red */ .btn-danger { background-color: #dc3545; border-color: #dc3545; color: #fff; } .btn-danger:hover, .btn-danger:focus { background-color: #a71d2a; border-color: #a71d2a; color: #fff; box-shadow: 0 4px 18px rgba(220, 53, 69, 0.50), 0 1px 4px rgba(220, 53, 69, 0.30); } /* Info — blue-light */ .btn-info { background-color: var(--gatw-blue-light); border-color: var(--gatw-blue-light); color: var(--gatw-blue-darker); } .btn-info:hover, .btn-info:focus { background-color: var(--gatw-blue); border-color: var(--gatw-blue); color: #fff; box-shadow: 0 4px 18px rgba(102, 153, 200, 0.55), 0 1px 4px rgba(102, 153, 200, 0.35); } /* Secondary — grey */ .btn-secondary { background-color: #6c757d; border-color: #6c757d; color: #fff; } .btn-secondary:hover, .btn-secondary:focus { background-color: #545b62; border-color: #545b62; color: #fff; box-shadow: 0 4px 18px rgba(108, 117, 125, 0.40), 0 1px 4px rgba(108, 117, 125, 0.25); } /* Dark */ .btn-dark { background-color: var(--gatw-text-dark); border-color: var(--gatw-text-dark); color: #fff; } .btn-dark:hover, .btn-dark:focus { background-color: var(--gatw-ink); border-color: var(--gatw-ink); color: #fff; box-shadow: 0 4px 18px rgba(26, 29, 33, 0.55), 0 1px 4px rgba(26, 29, 33, 0.40); } /* Light */ .btn-light { background-color: var(--gatw-surface-2); border-color: var(--gatw-border-mid); color: var(--gatw-text-dark); } .btn-light:hover, .btn-light:focus { background-color: var(--gatw-border-light); border-color: var(--gatw-border-mid); color: var(--gatw-text-dark); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } /* Brand — pink (logo colour promoted to UI variant) */ .btn-brand { background-color: var(--gatw-pink); border-color: var(--gatw-pink); color: #fff; } .btn-brand:hover, .btn-brand:focus { background-color: #c2157a; border-color: #c2157a; color: #fff; box-shadow: 0 4px 18px rgba(233, 30, 140, 0.50), 0 1px 4px rgba(233, 30, 140, 0.30); } .btn-outline-brand { color: var(--gatw-pink); border-color: var(--gatw-pink); background: transparent; } .btn-outline-brand:hover { background-color: var(--gatw-pink); border-color: var(--gatw-pink); color: #fff; box-shadow: 0 4px 18px rgba(233, 30, 140, 0.40); } /* Outline variants — glows on hover */ .btn-outline-primary { color: var(--gatw-blue); border-color: var(--gatw-blue); background: transparent; } .btn-outline-primary:hover { background-color: var(--gatw-blue); border-color: var(--gatw-blue); color: #fff; box-shadow: 0 4px 18px rgba(63, 123, 182, 0.45); } .btn-outline-success { color: var(--gatw-green-dark); border-color: var(--gatw-green); background: transparent; } .btn-outline-success:hover { background-color: var(--gatw-green); border-color: var(--gatw-green); color: #fff; box-shadow: 0 4px 18px rgba(110, 168, 0, 0.45); } .btn-outline-warning { color: #8a5700; border-color: var(--gatw-star); background: transparent; } .btn-outline-warning:hover { background-color: var(--gatw-star); border-color: var(--gatw-star); color: #fff; box-shadow: 0 4px 18px rgba(245, 166, 35, 0.45); } .btn-outline-danger { color: #dc3545; border-color: #dc3545; background: transparent; } .btn-outline-danger:hover { background-color: #dc3545; border-color: #dc3545; color: #fff; box-shadow: 0 4px 18px rgba(220, 53, 69, 0.45); } .btn-outline-info { color: var(--gatw-blue); border-color: var(--gatw-blue-light); background: transparent; } .btn-outline-info:hover { background-color: var(--gatw-blue-light); border-color: var(--gatw-blue-light); color: var(--gatw-blue-darker); box-shadow: 0 4px 18px rgba(107, 190, 222, 0.45); } .btn-outline-secondary { color: var(--gatw-text-muted); border-color: var(--gatw-border-mid); background: transparent; } .btn-outline-secondary:hover { background-color: var(--gatw-surface-2); border-color: var(--gatw-border-mid); color: var(--gatw-text-dark); box-shadow: 0 4px 10px rgba(0,0,0,0.10); transform: none; } .btn-outline-dark { color: var(--gatw-text-dark); border-color: var(--gatw-text-dark); background: transparent; } .btn-outline-dark:hover { background-color: var(--gatw-text-dark); border-color: var(--gatw-text-dark); color: #fff; box-shadow: 0 4px 18px rgba(26, 29, 33, 0.45); } /* * ── ACTIVE / PRESSED / FOCUS-VISIBLE STATE OVERRIDES ─────────────────────── * Bootstrap 5 hardcodes its own blue in :active, .active, :focus-visible and * .show > .btn.dropdown-toggle — these override our custom colours on press. * Every variant must be explicitly re-stated here to win the specificity war. * ─────────────────────────────────────────────────────────────────────────── */ /* Primary */ .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle, .btn-primary:focus-visible { background-color: var(--gatw-blue-darker) !important; border-color: var(--gatw-blue-darker) !important; color: #fff !important; box-shadow: 0 0 0 0.2rem var(--gatw-blue-20) !important; } /* Success */ .btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle, .btn-success:focus-visible { background-color: var(--gatw-green-darker) !important; border-color: var(--gatw-green-darker) !important; color: #fff !important; box-shadow: 0 0 0 0.2rem var(--gatw-green-20) !important; } /* Warning */ .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle, .btn-warning:focus-visible { background-color: #a36508 !important; border-color: #a36508 !important; color: #fff !important; box-shadow: 0 0 0 0.2rem rgba(245,166,35,0.30) !important; } /* Danger */ .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle, .btn-danger:focus-visible { background-color: #8b1521 !important; border-color: #8b1521 !important; color: #fff !important; box-shadow: 0 0 0 0.2rem rgba(220,53,69,0.30) !important; } /* Info */ .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle, .btn-info:focus-visible { background-color: var(--gatw-blue-dark) !important; border-color: var(--gatw-blue-dark) !important; color: #fff !important; box-shadow: 0 0 0 0.2rem var(--gatw-blue-20) !important; } /* Secondary */ .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle, .btn-secondary:focus-visible { background-color: #3d4246 !important; border-color: #3d4246 !important; color: #fff !important; box-shadow: 0 0 0 0.2rem rgba(108,117,125,0.30) !important; } /* Dark */ .btn-dark:active, .btn-dark.active, .show > .btn-dark.dropdown-toggle, .btn-dark:focus-visible { background-color: var(--gatw-ink) !important; border-color: var(--gatw-ink) !important; color: #fff !important; box-shadow: 0 0 0 0.2rem rgba(26,29,33,0.30) !important; } /* Light */ .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle, .btn-light:focus-visible { background-color: var(--gatw-border-mid) !important; border-color: var(--gatw-border-mid) !important; color: var(--gatw-text-dark) !important; box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.12) !important; } /* Brand */ .btn-brand:active, .btn-brand.active, .show > .btn-brand.dropdown-toggle, .btn-brand:focus-visible { background-color: var(--gatw-pink-darker) !important; border-color: var(--gatw-pink-darker) !important; color: #fff !important; box-shadow: 0 0 0 0.2rem var(--gatw-pink-20) !important; } /* Outline — primary */ .btn-outline-primary:active, .btn-outline-primary.active, .show > .btn-outline-primary.dropdown-toggle, .btn-outline-primary:focus-visible { background-color: var(--gatw-blue-darker) !important; border-color: var(--gatw-blue-darker) !important; color: #fff !important; box-shadow: 0 0 0 0.2rem var(--gatw-blue-20) !important; } /* Outline — success */ .btn-outline-success:active, .btn-outline-success.active, .show > .btn-outline-success.dropdown-toggle, .btn-outline-success:focus-visible { background-color: var(--gatw-green-darker) !important; border-color: var(--gatw-green-darker) !important; color: #fff !important; box-shadow: 0 0 0 0.2rem var(--gatw-green-20) !important; } /* Outline — warning */ .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning:focus-visible { background-color: #a36508 !important; border-color: #a36508 !important; color: #fff !important; box-shadow: 0 0 0 0.2rem rgba(245,166,35,0.30) !important; } /* Outline — danger */ .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger:focus-visible { background-color: #8b1521 !important; border-color: #8b1521 !important; color: #fff !important; box-shadow: 0 0 0 0.2rem rgba(220,53,69,0.30) !important; } /* Outline — info */ .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info:focus-visible { background-color: var(--gatw-blue-dark) !important; border-color: var(--gatw-blue-dark) !important; color: #fff !important; box-shadow: 0 0 0 0.2rem var(--gatw-blue-20) !important; } /* Outline — brand */ .btn-outline-brand:active, .btn-outline-brand.active, .btn-outline-brand:focus-visible { background-color: var(--gatw-pink-darker) !important; border-color: var(--gatw-pink-darker) !important; color: #fff !important; box-shadow: 0 0 0 0.2rem var(--gatw-pink-20) !important; } .card { border: 1px solid var(--gatw-border-light); border-radius: var(--bs-border-radius); box-shadow: var(--bs-box-shadow-sm); background: var(--gatw-surface); transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s; } /* Hover lift — opt-in with .card-hover */ .card-hover:hover { box-shadow: var(--bs-box-shadow); transform: translateY(-2px); border-color: var(--gatw-blue); } .card-header { background: var(--gatw-surface-2); border-bottom: 1px solid var(--gatw-border-light); font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.88rem; color: var(--gatw-text-dark); } .card-footer { background: var(--gatw-surface-2); border-top: 1px solid var(--gatw-border-light); } /* Blue top-accent card */ .card-accent-blue { border-top: 3px solid var(--gatw-blue) !important; } /* Green top-accent card */ .card-accent-green { border-top: 3px solid var(--gatw-green) !important; } /* Full BS variant set — top accent */ .card-accent-primary { border-top: 3px solid var(--gatw-blue) !important; } .card-accent-success { border-top: 3px solid var(--gatw-green) !important; } .card-accent-warning { border-top: 3px solid var(--gatw-star) !important; } .card-accent-danger { border-top: 3px solid #dc3545 !important; } .card-accent-info { border-top: 3px solid var(--gatw-blue-light) !important; } .card-accent-secondary { border-top: 3px solid #6c757d !important; } .card-accent-dark { border-top: 3px solid var(--gatw-text-dark) !important; } .card-accent-brand { border-top: 3px solid var(--gatw-pink) !important; } /* Left-accent variants — full BS set */ .card-accent-left-primary { border-left: 3px solid var(--gatw-blue) !important; } .card-accent-left-success { border-left: 3px solid var(--gatw-green) !important; } .card-accent-left-warning { border-left: 3px solid var(--gatw-star) !important; } .card-accent-left-danger { border-left: 3px solid #dc3545 !important; } .card-accent-left-info { border-left: 3px solid var(--gatw-blue-light) !important; } .card-accent-left-secondary { border-left: 3px solid #6c757d !important; } .card-accent-left-dark { border-left: 3px solid var(--gatw-text-dark) !important; } .card-accent-left-brand { border-left: 3px solid var(--gatw-pink) !important; } /* Prevent uninitialized swiper carousels from leaking background images on load */ .swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; flex-wrap: nowrap; overflow: hidden; } .swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) { display: none !important; } /* ============================================================================ 4b. BESPOKE SECTION BACKGROUNDS Each variant has its own tinted bg + glow border, matching the BS colour. Usage:
...
============================================================================ */ /* * Shared structure — all section-* variants use the same base pattern: * subtle tinted background, coloured top border/glow line, soft radial * glow from the top-centre that fades into the page background. */ /* ── Primary / Blue ── */ .section-primary { background: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(63,123,182,0.14) 0%, transparent 70%), var(--gatw-page-bg); border-top: 2px solid rgba(63,123,182,0.40); position: relative; } .section-primary::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 60%; height: 3px; background: linear-gradient(90deg, transparent, rgba(63,123,182,0.80), transparent); border-radius: 0 0 3px 3px; } /* ── Success / Green ── */ .section-success { background: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(110,168,0,0.14) 0%, transparent 70%), var(--gatw-page-bg); border-top: 2px solid rgba(110,168,0,0.40); position: relative; } .section-success::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 60%; height: 3px; background: linear-gradient(90deg, transparent, rgba(110,168,0,0.80), transparent); border-radius: 0 0 3px 3px; } /* ── Warning / Amber ── */ .section-warning { background: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(245,166,35,0.12) 0%, transparent 70%), var(--gatw-page-bg); border-top: 2px solid rgba(245,166,35,0.40); position: relative; } .section-warning::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 60%; height: 3px; background: linear-gradient(90deg, transparent, rgba(245,166,35,0.80), transparent); border-radius: 0 0 3px 3px; } /* ── Danger / Red ── */ .section-danger { background: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(220,53,69,0.10) 0%, transparent 70%), var(--gatw-page-bg); border-top: 2px solid rgba(220,53,69,0.40); position: relative; } .section-danger::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 60%; height: 3px; background: linear-gradient(90deg, transparent, rgba(220,53,69,0.80), transparent); border-radius: 0 0 3px 3px; } /* ── Info / Blue-light ── */ .section-info { background: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(107,190,222,0.14) 0%, transparent 70%), var(--gatw-page-bg); border-top: 2px solid rgba(107,190,222,0.40); position: relative; } .section-info::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 60%; height: 3px; background: linear-gradient(90deg, transparent, rgba(107,190,222,0.80), transparent); border-radius: 0 0 3px 3px; } /* ── Brand / Pink ── */ .section-brand { background: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(233,30,140,0.10) 0%, transparent 70%), var(--gatw-page-bg); border-top: 2px solid rgba(233,30,140,0.40); position: relative; } .section-brand::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 60%; height: 3px; background: linear-gradient(90deg, transparent, rgba(233,30,140,0.80), transparent); border-radius: 0 0 3px 3px; } /* ── Dark — inverted variant for any colour ── */ .section-dark-primary { background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(63,123,182,0.18) 0%, transparent 65%), var(--gatw-ink); } .section-dark-brand { background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(233,30,140,0.18) 0%, transparent 65%), var(--gatw-ink); } /* ============================================================================ 4c. BRAND / PINK COLOUR ADDITIONS Pink is the logo colour — now also available as a full UI variant. ============================================================================ */ /* Brand colour tokens */ :root { --gatw-pink-dark: #c2157a; /* hover state */ --gatw-pink-darker: #8f0e5a; /* active / text on white */ --gatw-pink-light: #ef56ad; /* lighter shade */ --gatw-pink-lighter: #f8b0d8; /* very light */ --gatw-pink-20: rgba(233, 30, 140, 0.20); --gatw-pink-12: rgba(233, 30, 140, 0.12); --gatw-pink-06: rgba(233, 30, 140, 0.06); } /* Text */ .text-brand { color: var(--gatw-pink) !important; } .text-brand-dark { color: var(--gatw-pink-darker) !important; } /* Background */ .bg-brand { background-color: var(--gatw-pink) !important; color: #fff; } .bg-brand-subtle { background-color: var(--gatw-pink-06) !important; } /* Border */ .border-brand { border-color: var(--gatw-pink) !important; } /* Badge */ .badge.bg-brand { background-color: var(--gatw-pink) !important; color: #fff; } .badge.bg-brand-subtle { background-color: var(--gatw-pink-12) !important; color: var(--gatw-pink-darker) !important; border: 1px solid var(--gatw-pink-20); } /* Alert */ .alert-brand { background: var(--gatw-pink-06); border-color: var(--gatw-pink-20); color: var(--gatw-pink-darker); } /* Link */ a.link-brand { color: var(--gatw-pink); } a.link-brand:hover { color: var(--gatw-pink-dark); } /* ============================================================================ 5. FORMS & INPUTS ============================================================================ */ .form-control, .form-select { font-family: 'Barlow', sans-serif; font-weight: 400; font-size: 0.88rem; border-color: var(--gatw-border-mid); border-radius: var(--bs-border-radius-sm); color: var(--gatw-text-dark); background-color: var(--gatw-surface); transition: border-color 0.2s, box-shadow 0.2s; } .form-control:focus, .form-select:focus { border-color: var(--gatw-blue); box-shadow: 0 0 0 0.2rem rgba(52,152,219,0.18); outline: none; } .form-control::placeholder { color: var(--gatw-text-muted); } .form-label { font-family: 'DM Mono', monospace; font-weight: 300; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gatw-text-muted); margin-bottom: 6px; } .form-check-input:checked { background-color: var(--gatw-blue); border-color: var(--gatw-blue); } .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(52,152,219,0.18); } /* Range slider */ .form-range::-webkit-slider-thumb { background: var(--gatw-blue); } .form-range::-moz-range-thumb { background: var(--gatw-blue); } .form-range::-webkit-slider-runnable-track { background: var(--gatw-border-mid); } /* ============================================================================ 6. BADGES ============================================================================ */ .badge { font-family: 'DM Mono', monospace; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.6em; border-radius: 3px; padding: 4px 8px; /* Fix vertical alignment — inline-flex centres text regardless of surrounding size */ display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; line-height: 1; } /* Subtle badge variants — text on tinted bg */ .badge.bg-primary-subtle { background: rgba(52,152,219,0.12) !important; color: var(--gatw-blue-dark) !important; border: 1px solid rgba(52,152,219,0.25); } .badge.bg-success-subtle { background: rgba(110,168,0,0.12) !important; color: var(--gatw-green-dark) !important; border: 1px solid rgba(110,168,0,0.25); } /* Installed Nationwide pill */ .badge-location { background: var(--gatw-blue); color: #fff; font-family: 'DM Mono', monospace; font-weight: 300; font-size: 0.58em; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 4px; padding: 5px 10px; } /* ============================================================================ 7. ALERTS ============================================================================ */ .alert { border-radius: var(--bs-border-radius-sm); font-size: 0.86rem; border-width: 1px; } .alert-primary { background: rgba(52,152,219,0.08); border-color: rgba(52,152,219,0.25); color: var(--gatw-blue-dark); } .alert-success { background: rgba(110,168,0,0.08); border-color: rgba(110,168,0,0.25); color: var(--gatw-green-dark); } .alert-warning { background: rgba(245,166,35,0.10); border-color: rgba(245,166,35,0.3); color: #8a6200; } /* ============================================================================ 8. NAVBAR ============================================================================ */ .navbar { background: var(--gatw-surface); border-bottom: 1px solid var(--gatw-border-light); box-shadow: var(--bs-box-shadow-sm); } .navbar-brand { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.4rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gatw-text-dark); } .navbar-nav .nav-link { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gatw-text-body); padding: 8px 14px; transition: color 0.2s; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--gatw-blue); } /* Dropdown */ .dropdown-menu { border: 1px solid var(--gatw-border-light); border-radius: var(--bs-border-radius-sm); box-shadow: var(--bs-box-shadow); font-size: 0.86rem; } .dropdown-item { font-family: 'Barlow', sans-serif; font-weight: 300; color: var(--gatw-text-body); padding: 8px 16px; transition: background 0.15s, color 0.15s; } .dropdown-item:hover { background: rgba(52,152,219,0.06); color: var(--gatw-blue); } .dropdown-item.active, .dropdown-item:active { background: var(--gatw-blue); color: #fff; } .dropdown-divider { border-color: var(--gatw-border-light); } /* ============================================================================ 9. ACCORDION ============================================================================ */ .accordion-button { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gatw-text-dark); background: var(--gatw-surface); border-left: 3px solid transparent; transition: border-color 0.2s, background 0.2s, color 0.2s; } .accordion-button:not(.collapsed) { color: var(--gatw-blue); background: rgba(52,152,219,0.05); border-left-color: var(--gatw-blue); box-shadow: none; } .accordion-button::after { /* keep Bootstrap's chevron icon, just recolour */ filter: none; } .accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(52,152,219,0.2); } .accordion-item { border-color: var(--gatw-border-light); } .accordion-body { font-family: 'Barlow', sans-serif; font-weight: 300; font-size: 0.88rem; color: var(--gatw-text-body); line-height: 1.8; } /* ============================================================================ 10. BREADCRUMB ============================================================================ */ .breadcrumb { font-family: 'DM Mono', monospace; font-weight: 300; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0; } .breadcrumb-item a { color: var(--gatw-text-muted); text-decoration: none; transition: color 0.2s; } .breadcrumb-item a:hover { color: var(--gatw-blue); } .breadcrumb-item.active { color: var(--gatw-text-muted); } .breadcrumb-item + .breadcrumb-item::before { color: var(--gatw-border-mid); } /* ============================================================================ 11. PAGINATION ============================================================================ */ .page-link { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--gatw-blue); border-color: var(--gatw-border-light); transition: background 0.2s, border-color 0.2s, color 0.2s; } .page-link:hover { color: var(--gatw-blue-dark); background: rgba(52,152,219,0.08); border-color: var(--gatw-blue); } .page-item.active .page-link { background: var(--gatw-blue); border-color: var(--gatw-blue); color: #fff; } /* ============================================================================ 12. TABLES ============================================================================ */ .table { font-family: 'Barlow', sans-serif; font-weight: 300; font-size: 0.88rem; color: var(--gatw-text-body); --bs-table-border-color: var(--gatw-border-light); } .table thead th { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gatw-text-dark); border-bottom: 2px solid var(--gatw-border-mid); background: var(--gatw-surface-2); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(52,152,219,0.03); } .table-hover > tbody > tr:hover > * { background-color: rgba(52,152,219,0.06); } /* ============================================================================ 13. LIST GROUPS ============================================================================ */ .list-group-item { border-color: var(--gatw-border-light); font-family: 'Barlow', sans-serif; font-weight: 300; font-size: 0.88rem; color: var(--gatw-text-body); transition: background 0.15s, color 0.15s; } .list-group-item.active { background: var(--gatw-blue); border-color: var(--gatw-blue); color: #fff; } .list-group-item-action:hover { background: rgba(52,152,219,0.06); color: var(--gatw-blue); } /* ============================================================================ 14. PROGRESS BARS ============================================================================ */ .progress { background: var(--gatw-border-light); border-radius: 3px; height: 6px; } .progress-bar { background: var(--gatw-blue); border-radius: 3px; } .progress-bar.bg-success { background: var(--gatw-green) !important; } /* ============================================================================ 15. MODALS ============================================================================ */ .modal-header { border-bottom: 1px solid var(--gatw-border-light); background: var(--gatw-surface-2); } .modal-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gatw-text-dark); } .modal-footer { border-top: 1px solid var(--gatw-border-light); background: var(--gatw-surface-2); } .modal-content { border: 1px solid var(--gatw-border-light); border-radius: var(--bs-border-radius); box-shadow: var(--bs-box-shadow-lg); } /* ============================================================================ 16. TOOLTIPS & POPOVERS ============================================================================ */ .tooltip-inner { background: var(--gatw-ink-mid); font-family: 'DM Mono', monospace; font-weight: 300; font-size: 0.68rem; letter-spacing: 0.08em; border-radius: 3px; } .popover { border: 1px solid var(--gatw-border-light); box-shadow: var(--bs-box-shadow); border-radius: var(--bs-border-radius-sm); } .popover-header { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--gatw-surface-2); border-bottom: 1px solid var(--gatw-border-light); } /* ============================================================================ 17. UTILITY OVERRIDES ============================================================================ */ /* Ensure Bootstrap text colour utils use brand palette */ .text-primary { color: var(--gatw-blue) !important; } .text-success { color: var(--gatw-green) !important; } .text-warning { color: var(--gatw-star) !important; } .text-dark { color: var(--gatw-text-dark) !important; } .text-secondary { color: var(--gatw-text-muted)!important; } /* Background utilities */ .bg-primary { background-color: var(--gatw-blue) !important; } .bg-success { background-color: var(--gatw-green) !important; } .bg-light { background-color: var(--gatw-surface-2) !important; } .bg-warning { background-color: var(--bs-warning) !important; } .bg-white { background-color: var(--gatw-surface) !important; } .bg-body { background-color: var(--gatw-page-bg) !important; } /* Border utilities */ .border-primary { border-color: var(--gatw-blue) !important; } .border-success { border-color: var(--gatw-green) !important; } .border-light { border-color: var(--gatw-border-light) !important; } /* Rounded */ .rounded { border-radius: var(--bs-border-radius) !important; } .rounded-sm { border-radius: var(--bs-border-radius-sm) !important; } .rounded-lg { border-radius: var(--bs-border-radius-lg) !important; } /* ============================================================================ 18. PAGE BODY ============================================================================ */ body { background-color: var(--gatw-page-bg); color: var(--gatw-text-body); font-family: 'Barlow', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Section backgrounds */ .section-light { background: var(--gatw-page-bg); } .section-white { background: var(--gatw-surface); } .section-dark { background: var(--gatw-ink); color: var(--gatw-surface-2); } .section-blue-tint { background: rgba(52,152,219,0.05); } /* ============================================================================ 19. CUSTOM COMPONENT CLASSES (new — no Bootstrap equivalent) ============================================================================ */ /* * .gatw-eyebrow * Small DM Mono label with leading line — used above section headings. * Usage:
Who We Work For
*/ .gatw-eyebrow { font-family: 'DM Mono', monospace; font-weight: 400; font-size: 0.8rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gatw-blue); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; } .gatw-eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: var(--gatw-blue); flex-shrink: 0; } /* * .gatw-section-rule * Horizontal rule with blue accent on left — used under section headings. */ .gatw-section-rule { height: 2px; background: var(--gatw-border-light); position: relative; margin: 0 0 1.5rem; border-radius: 1px; border: none; } .gatw-section-rule::after { content: ''; position: absolute; left: 0; top: 0; width: 40px; height: 2px; background: var(--gatw-blue); border-radius: 1px; } /* * .gatw-pill-tag * DM Mono tag/pill — used for category, location, and nearby search tags. */ .gatw-pill-tag { display: inline-block; font-family: 'DM Mono', monospace; font-weight: 300; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gatw-blue); background: rgba(52,152,219,0.08); border: 1px solid rgba(52,152,219,0.2); border-radius: 3px; padding: 4px 11px; text-decoration: none; white-space: nowrap; transition: border-color 0.2s, background 0.2s, color 0.2s; } .gatw-pill-tag:hover { border-color: var(--gatw-blue); background: rgba(52,152,219,0.15); color: var(--gatw-blue-dark); } /* * .gatw-star-rating * Star rating colour — apply to or containing star icons. */ .gatw-star-rating { color: var(--gatw-star); } /* * .gatw-verdict-badge * "Client Verdict" label on review cards. */ .gatw-verdict-badge { display: inline-block; font-family: 'DM Mono', monospace; font-weight: 300; font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gatw-blue-dark); background: rgba(52,152,219,0.10); border: 1px solid rgba(52,152,219,0.25); border-radius: 2px; padding: 4px 10px; } /* * .hover-lift * Generic hover lift — apply to any interactive element. */ .hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-lift:hover { transform: translateY(-2px); box-shadow: var(--bs-box-shadow) !important; } /* Half-step columns (x.5) for all breakpoints */ @media (min-width: 576px) { .col-sm-1-5 { flex: 0 0 auto; width: 12.500000%; } /* 1.5/12 */ .col-sm-2-5 { flex: 0 0 auto; width: 20.833333%; } /* 2.5/12 */ .col-sm-3-5 { flex: 0 0 auto; width: 29.166667%; } /* 3.5/12 */ .col-sm-4-5 { flex: 0 0 auto; width: 37.500000%; } /* 4.5/12 */ .col-sm-5-5 { flex: 0 0 auto; width: 45.833333%; } /* 5.5/12 */ .col-sm-6-5 { flex: 0 0 auto; width: 54.166667%; } /* 6.5/12 */ .col-sm-7-5 { flex: 0 0 auto; width: 62.500000%; } /* 7.5/12 */ .col-sm-8-5 { flex: 0 0 auto; width: 70.833333%; } /* 8.5/12 */ .col-sm-9-5 { flex: 0 0 auto; width: 79.166667%; } /* 9.5/12 */ .col-sm-10-5 { flex: 0 0 auto; width: 87.500000%; } /* 10.5/12 */ .col-sm-11-5 { flex: 0 0 auto; width: 95.833333%; } /* 11.5/12 */ } @media (min-width: 768px) { .col-md-1-5 { flex: 0 0 auto; width: 12.500000%; } /* 1.5/12 */ .col-md-2-5 { flex: 0 0 auto; width: 20.833333%; } /* 2.5/12 */ .col-md-3-5 { flex: 0 0 auto; width: 29.166667%; } /* 3.5/12 */ .col-md-4-5 { flex: 0 0 auto; width: 37.500000%; } /* 4.5/12 */ .col-md-5-5 { flex: 0 0 auto; width: 45.833333%; } /* 5.5/12 */ .col-md-6-5 { flex: 0 0 auto; width: 54.166667%; } /* 6.5/12 */ .col-md-7-5 { flex: 0 0 auto; width: 62.500000%; } /* 7.5/12 */ .col-md-8-5 { flex: 0 0 auto; width: 70.833333%; } /* 8.5/12 */ .col-md-9-5 { flex: 0 0 auto; width: 79.166667%; } /* 9.5/12 */ .col-md-10-5 { flex: 0 0 auto; width: 87.500000%; } /* 10.5/12 */ .col-md-11-5 { flex: 0 0 auto; width: 95.833333%; } /* 11.5/12 */ } @media (min-width: 992px) { .col-lg-1-5 { flex: 0 0 auto; width: 12.500000%; } /* 1.5/12 */ .col-lg-2-5 { flex: 0 0 auto; width: 20.833333%; } /* 2.5/12 */ .col-lg-3-5 { flex: 0 0 auto; width: 29.166667%; } /* 3.5/12 */ .col-lg-4-5 { flex: 0 0 auto; width: 37.500000%; } /* 4.5/12 */ .col-lg-5-5 { flex: 0 0 auto; width: 45.833333%; } /* 5.5/12 */ .col-lg-6-5 { flex: 0 0 auto; width: 54.166667%; } /* 6.5/12 */ .col-lg-7-5 { flex: 0 0 auto; width: 62.500000%; } /* 7.5/12 */ .col-lg-8-5 { flex: 0 0 auto; width: 70.833333%; } /* 8.5/12 */ .col-lg-9-5 { flex: 0 0 auto; width: 79.166667%; } /* 9.5/12 */ .col-lg-10-5 { flex: 0 0 auto; width: 87.500000%; } /* 10.5/12 */ .col-lg-11-5 { flex: 0 0 auto; width: 95.833333%; } /* 11.5/12 */ } @media (min-width: 1200px) { .col-xl-1-5 { flex: 0 0 auto; width: 12.500000%; } /* 1.5/12 */ .col-xl-2-5 { flex: 0 0 auto; width: 20.833333%; } /* 2.5/12 */ .col-xl-3-5 { flex: 0 0 auto; width: 29.166667%; } /* 3.5/12 */ .col-xl-4-5 { flex: 0 0 auto; width: 37.500000%; } /* 4.5/12 */ .col-xl-5-5 { flex: 0 0 auto; width: 45.833333%; } /* 5.5/12 */ .col-xl-6-5 { flex: 0 0 auto; width: 54.166667%; } /* 6.5/12 */ .col-xl-7-5 { flex: 0 0 auto; width: 62.500000%; } /* 7.5/12 */ .col-xl-8-5 { flex: 0 0 auto; width: 70.833333%; } /* 8.5/12 */ .col-xl-9-5 { flex: 0 0 auto; width: 79.166667%; } /* 9.5/12 */ .col-xl-10-5 { flex: 0 0 auto; width: 87.500000%; } /* 10.5/12 */ .col-xl-11-5 { flex: 0 0 auto; width: 95.833333%; } /* 11.5/12 */ } @media (min-width: 1400px) { .col-xxl-1-5 { flex: 0 0 auto; width: 12.500000%; } /* 1.5/12 */ .col-xxl-2-5 { flex: 0 0 auto; width: 20.833333%; } /* 2.5/12 */ .col-xxl-3-5 { flex: 0 0 auto; width: 29.166667%; } /* 3.5/12 */ .col-xxl-4-5 { flex: 0 0 auto; width: 37.500000%; } /* 4.5/12 */ .col-xxl-5-5 { flex: 0 0 auto; width: 45.833333%; } /* 5.5/12 */ .col-xxl-6-5 { flex: 0 0 auto; width: 54.166667%; } /* 6.5/12 */ .col-xxl-7-5 { flex: 0 0 auto; width: 62.500000%; } /* 7.5/12 */ .col-xxl-8-5 { flex: 0 0 auto; width: 70.833333%; } /* 8.5/12 */ .col-xxl-9-5 { flex: 0 0 auto; width: 79.166667%; } /* 9.5/12 */ .col-xxl-10-5 { flex: 0 0 auto; width: 87.500000%; } /* 10.5/12 */ .col-xxl-11-5 { flex: 0 0 auto; width: 95.833333%; } /* 11.5/12 */ } /* ============================================================================ 20. DARK SECTION OVERRIDES ============================================================================ */ /* * Apply .section-dark to any
or
for the dark blueprint look. * Child elements inherit inverted colours automatically. */ .section-dark { background: var(--gatw-ink); color: #d8dde3; position: relative; overflow: hidden; } /* Blueprint grid overlay */ .section-dark::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(63,123,182,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(63,123,182,0.10) 1px, transparent 1px), linear-gradient(rgba(63,123,182,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(63,123,182,0.04) 1px, transparent 1px); background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px; pointer-events: none; z-index: 0; } .section-dark > * { position: relative; z-index: 1; } .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6 { color: #eef1f4; } .section-dark .text-muted { color: #7a8694 !important; } .section-dark .card { background: var(--gatw-ink-mid); border-color: #2e3236; } .section-dark .gatw-pill-tag { border-color: #2e3236; color: var(--gatw-blue-electric); background: rgba(33,150,196,0.10); } .section-dark .gatw-pill-tag:hover { border-color: var(--gatw-blue); background: rgba(33,150,196,0.18); color: #eef1f4; } /* * .section-navy — deep navy from Image 3 hero. * Use for hero / product pricing sections. */ .section-navy { background: var(--gatw-navy); color: #c8d6e0; position: relative; overflow: hidden; } .section-navy::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(33,150,196,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(33,150,196,0.08) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; } .section-navy > * { position: relative; z-index: 1; } .section-navy h1, .section-navy h2, .section-navy h3 { color: #ffffff; } .section-navy .text-muted { color: #7a96a8 !important; } /* ============================================================================ 21. HEADLINE FONT — Fraunces ============================================================================ */ /* * .gatw-headline * ────────────── * Bold optical-size variable serif for hero display text. * Contrasts deliberately with the condensed sans used everywhere else. * * USE ON: hero H1s, large pricing displays, marketing landing sections. * DO NOT use on: UI labels, nav, cards, body copy, buttons. * * Examples: *

Instant pricing for your project

* font-family: var(--gatw-font-headline); */ .gatw-headline { font-family: var(--gatw-font-headline); font-weight: 700; font-style: normal; letter-spacing: -0.02em; line-height: 1.05; color: #ffffff; } .gatw-headline span { color: var(--gatw-blue-electric); font-style: italic; /* Fraunces has beautiful optical italic */ } /* Scale at different sizes */ .gatw-headline--xl { font-size: clamp(2.8rem, 6vw, 5.5rem); font-weight: 900; } .gatw-headline--lg { font-size: clamp(2rem, 4vw, 3.6rem); } .gatw-headline--md { font-size: clamp(1.5rem, 3vw, 2.4rem); } /* On light backgrounds */ .gatw-headline--dark { color: var(--gatw-text-dark); } .gatw-headline--dark span { color: var(--gatw-blue); font-style: italic; } .cart.table-alt { background-color: var(--gatw-blue-06); } .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background-color: transparent; } .form-floating > label::after { background-color: transparent !important; } /* ============================================================================ 22. BUTTON FIXES ============================================================================ */ /* * Vertical alignment fix for all .btn * Bootstrap uses line-height which can push text off-centre. * Flex alignment guarantees pixel-perfect centering at all sizes. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; /* remove line-height influence on height */ vertical-align: middle; } /* * .btn-add-to-basket * The split "Add to Basket [cart icon]" button from Image 1. * Two visually distinct segments — label + icon divider. */ .btn-add-to-basket { display: inline-flex; align-items: stretch; padding: 0; background: var(--gatw-blue); border-color: var(--gatw-blue); border-radius: var(--bs-border-radius-sm); overflow: hidden; font-family: var(--gatw-font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; text-decoration: none; transition: background 0.2s, border-color 0.2s, transform 0.15s; cursor: pointer; border: 1px solid var(--gatw-blue); } .btn-add-to-basket:hover { background: var(--gatw-blue-dark); border-color: var(--gatw-blue-dark); color: #fff; transform: translateY(-1px); } .btn-add-to-basket__label { display: flex; align-items: center; padding: 14px 24px; line-height: 1; } .btn-add-to-basket__icon { display: flex; align-items: center; justify-content: center; padding: 14px 18px; background: rgba(0,0,0,0.15); /* darker divider panel */ border-left: 1px solid rgba(255,255,255,0.15); line-height: 1; font-size: 1.1rem; } /* * .gatw-qty-bar * The green QTY + Add to Basket bar from Image 1. */ .gatw-qty-bar { background: var(--gatw-green); border-radius: var(--bs-border-radius-sm); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .gatw-qty-bar__label { font-family: var(--gatw-font-display); font-weight: 700; font-size: 0.88rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.9); flex-shrink: 0; } .gatw-qty-bar__input { width: 68px; border: none; border-radius: 4px; padding: 8px 10px; font-family: var(--gatw-font-body); font-weight: 400; font-size: 1rem; text-align: center; background: #fff; color: var(--gatw-text-dark); } .gatw-qty-bar__note { background: var(--gatw-green); text-align: center; padding: 8px 20px; font-size: 0.84rem; color: rgba(255,255,255,0.92); border-radius: 0 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm); margin-top: -1px; } /* ============================================================================ 23. SITE HEADER ============================================================================ */ /* * .gatw-header * ──────────── * Based on Image 4: clean white, logo left, contact+stars centre, nav right. * Two-tier: main bar + secondary announcement strip. * * Suggested HTML structure: * *
*
*
[logo] [contact+stars] [nav]
*
*
*
[badge] [text] [project count]
*
*
*/ .gatw-header { position: sticky; top: 0; z-index: 1040; background: var(--gatw-surface); box-shadow: 0 1px 0 var(--gatw-border-light), 0 2px 8px rgba(0,0,0,0.05); } /* Top colour accent line */ .gatw-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gatw-blue) 0%, var(--gatw-blue-light) 50%, var(--gatw-green) 100%); } .gatw-header__main { padding: 12px 0; display: flex; align-items: center; } /* Contact + star block divider */ .gatw-header__divider { width: 1px; height: 36px; background: var(--gatw-border-mid); margin: 0 20px; flex-shrink: 0; } /* Phone / email in header */ .gatw-header__contact { font-family: var(--gatw-font-body); font-weight: 400; font-size: 0.88rem; color: var(--gatw-text-dark); text-decoration: none; display: flex; align-items: center; gap: 6px; } .gatw-header__contact:hover { color: var(--gatw-blue); } /* Star block */ .gatw-header__stars { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .gatw-header__stars-row { display: flex; align-items: center; gap: 6px; } .gatw-header__stars-score { font-family: var(--gatw-font-body); font-weight: 600; font-size: 0.9rem; color: var(--gatw-text-dark); } .gatw-header__stars-sub { font-family: var(--gatw-font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gatw-text-muted); } /* Products button */ .gatw-header__products-btn { font-family: var(--gatw-font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--gatw-text-dark); color: #fff; border: none; border-radius: 5px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background 0.2s; text-decoration: none; } .gatw-header__products-btn:hover { background: var(--gatw-blue); color: #fff; } /* Secondary strip — inspiration bar */ .gatw-header__strip { background: var(--gatw-surface-2); border-top: 1px solid var(--gatw-border-light); padding: 7px 0; display: flex; align-items: center; } .gatw-header__strip-badge { display: inline-block; font-family: var(--gatw-font-mono); font-weight: 400; font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gatw-blue); border: 1px solid var(--gatw-blue); border-radius: 3px; padding: 3px 8px; margin-right: 10px; flex-shrink: 0; } .gatw-header__strip-text { font-family: var(--gatw-font-body); font-weight: 300; font-size: 0.84rem; color: var(--gatw-text-body); } .gatw-header__strip-text strong { font-weight: 600; color: var(--gatw-text-dark); } .gatw-header__project-count { display: inline-flex; align-items: center; gap: 8px; font-family: var(--gatw-font-body); font-weight: 400; font-size: 0.84rem; color: var(--gatw-blue-mid); text-decoration: none; transition: color 0.2s; } .gatw-header__project-count:hover { color: var(--gatw-blue-dark); } /* Avatar group (overlapping circles) */ .gatw-avatar-group { display: flex; align-items: center; } .gatw-avatar-group img { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--gatw-surface); object-fit: cover; margin-left: -8px; } .gatw-avatar-group img:first-child { margin-left: 0; } /* ============================================================================ 24. PROJECT CARD — .gatw-project-card ============================================================================ */ /* * Based on Image 2 — the project listing card. * Features: image top, wishlist heart, image count, name + stars, * location + price + date, review quote, "View Project" button. * * Usage: *
*
[img] [heart] [count]
*
...
*
View Project
*
*/ .gatw-project-card { background: var(--gatw-surface); border: 1px solid var(--gatw-border-light); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04); overflow: hidden; transition: box-shadow 0.25s, transform 0.25s; display: flex; flex-direction: column; } .gatw-project-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.06); transform: translateY(-3px); } /* Image area */ .gatw-project-card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--gatw-surface-2); flex-shrink: 0; } .gatw-project-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.5s ease; } .gatw-project-card:hover .gatw-project-card__img-wrap img { transform: scale(1.04); } /* Wishlist heart — top right */ .gatw-project-card__heart { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.92); backdrop-filter: blur(4px); border: 1px solid var(--gatw-border-light); display: flex; align-items: center; justify-content: center; color: var(--gatw-text-muted); font-size: 0.9rem; cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; z-index: 2; } .gatw-project-card__heart:hover, .gatw-project-card__heart.active { color: #e53e3e; background: #fff; border-color: #e53e3e; } /* Image count badge — bottom right */ .gatw-project-card__count { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); color: #fff; font-family: var(--gatw-font-mono); font-size: 0.6rem; font-weight: 300; letter-spacing: 0.1em; padding: 4px 8px; border-radius: 5px; display: inline-flex; align-items: center; gap: 5px; z-index: 2; } /* Card body */ .gatw-project-card__body { padding: 16px 18px 12px; flex: 1; } /* Name + stars row */ .gatw-project-card__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .gatw-project-card__name { font-family: var(--gatw-font-body); font-weight: 600; font-size: 1rem; color: var(--gatw-blue-mid); text-decoration: none; line-height: 1.2; transition: color 0.2s; } .gatw-project-card__name:hover { color: var(--gatw-blue-dark); } .gatw-project-card__stars { color: var(--gatw-star); font-size: 0.9rem; white-space: nowrap; flex-shrink: 0; } /* Meta — location, price, date */ .gatw-project-card__meta { display: flex; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--gatw-text-body); margin-bottom: 4px; flex-wrap: wrap; } .gatw-project-card__meta i { color: var(--gatw-text-muted); font-size: 0.75rem; } .gatw-project-card__price-date { font-size: 0.82rem; color: var(--gatw-text-body); margin-bottom: 12px; } /* Review snippet */ .gatw-project-card__review { font-size: 0.84rem; color: var(--gatw-text-body); font-style: italic; line-height: 1.65; position: relative; padding-left: 0; } .gatw-project-card__review::before { content: '\201C\201C'; /* double open-quotes as decorative element */ font-family: Georgia, serif; font-size: 1.4rem; line-height: 1; color: var(--gatw-border-mid); display: inline; margin-right: 4px; vertical-align: -0.2em; } /* Footer button */ .gatw-project-card__footer { padding: 0 18px 18px; } .gatw-project-card__btn { display: block; width: 100%; padding: 10px; text-align: center; font-family: var(--gatw-font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gatw-blue); background: transparent; border: 1px solid var(--gatw-blue); border-radius: 6px; text-decoration: none; transition: background 0.2s, color 0.2s; } .gatw-project-card__btn:hover { background: var(--gatw-blue); color: #fff; } /* ============================================================================ swiper ============================================================================ */ .swiper-pagination-bullet { background: var(--gatw-border-mid); opacity: 0.9; } .swiper-pagination-bullet-active { background: var(--gatw-blue); opacity: 1; } .swiper-lazy-preloader { display: none !important; } /* Swiper nav button colour — matches brand blue */ .swiper-button-next, .swiper-button-prev { --swiper-navigation-color: var(--gatw-blue); } /* Swiper scrollbar */ .swiper-scrollbar-drag { background: var(--gatw-blue); } /* ============================================================================ 25. BESPOKE HERO / SECTION BACKGROUNDS ============================================================================ Each variant comes in two flavours: .bg-hero-{colour} — solid tinted base + radial glow, NO grid .bg-hero-{colour}.bg-grid — same + subtle dot/line grid overlay Usage:
← optional glow orb
...
Add .bg-grid for the grid pattern:
Animation helpers: .anim-hero-in — fade + rise on load (heading) .anim-fade-up — delayed fade + rise (sub-content) .anim-fade-up-2 — further delayed (CTAs / third element) Eyebrow dot: ============================================================================ */ /* ── Shared structure for all hero backgrounds ───────────────────────────── */ [class*="bg-hero-"] { position: relative; overflow: hidden; } /* Grid overlay — opt in with .bg-grid */ [class*="bg-hero-"].bg-grid::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* All direct children sit above the grid/glow pseudo-elements */ [class*="bg-hero-"] > * { position: relative; z-index: 1; } /* * .hero-glow * Place as first child inside bg-hero-* to get the off-centre radial bloom. * Position and size can be overridden per-use with inline style. */ .hero-glow { position: absolute; pointer-events: none; z-index: 0; /* default position — override per section as needed */ right: -60px; top: -80px; width: 560px; height: 560px; } /* ── Keyframe animations ─────────────────────────────────────────────────── */ @keyframes gatw-heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes gatw-fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes gatw-pulseDot { 0%, 100% { box-shadow: 0 0 0 3px var(--dot-color, rgba(255,255,255,0.20)); } 50% { box-shadow: 0 0 0 7px var(--dot-color, rgba(255,255,255,0.08)); } } .anim-hero-in { animation: gatw-heroIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .anim-fade-up { animation: gatw-fadeUp 0.6s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both; } .anim-fade-up-2 { animation: gatw-fadeUp 0.6s 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; } /* ── Eyebrow dot ─────────────────────────────────────────────────────────── */ .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; animation: gatw-pulseDot 2.2s ease-in-out infinite; } /* Static brightness increase (e.g., 20% brighter) */ .img-brighter { filter: brightness(1.1); } /* Or, if you want it to brighten on hover (very common for galleries/sliders) */ .img-brighten-on-hover { transition: filter 0.3s ease; /* Smooth transition */ } .img-brighten-on-hover:hover { filter: brightness(1.15); /* 15% brighter on hover */ } /* ──────────────────────────────────────────────────────────────────────────── PRIMARY — steel blue #3f7bb6 Dark base: #1a3457 Grid: rgba(255,255,255,0.04) ─────────────────────────────────────────────────────────────────────────── */ .bg-hero-primary { background-color: #1a3457; color: #dce8f5; } .bg-hero-primary .hero-glow { background: radial-gradient(circle at 55% 45%, rgba(63,123,182,0.35) 0%, transparent 65%); } .bg-hero-primary.bg-grid::before { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 44px 44px; } .bg-hero-primary h1, .bg-hero-primary h2, .bg-hero-primary h3 { color: #ffffff; } .bg-hero-primary .text-muted { color: #8aaccf !important; } .bg-hero-primary .eyebrow-dot { background: var(--gatw-blue-light); --dot-color: rgba(102,153,200,0.30); } /* ──────────────────────────────────────────────────────────────────────────── SUCCESS — dark lime #6ea800 Dark base: #2a3e00 Grid: rgba(255,255,255,0.04) ─────────────────────────────────────────────────────────────────────────── */ .bg-hero-success { background-color: #2a3e00; color: #d4eda0; } .bg-hero-success .hero-glow { background: radial-gradient(circle at 55% 45%, rgba(110,168,0,0.38) 0%, transparent 65%); } .bg-hero-success.bg-grid::before { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 44px 44px; } .bg-hero-success h1, .bg-hero-success h2, .bg-hero-success h3 { color: #e8f5c0; } .bg-hero-success .text-muted { color: #8faa50 !important; } .bg-hero-success .eyebrow-dot { background: var(--gatw-green-light); --dot-color: rgba(147,200,38,0.30); } /* ──────────────────────────────────────────────────────────────────────────── WARNING — amber #f5a623 Dark base: #5c3800 Grid: rgba(255,255,255,0.04) ─────────────────────────────────────────────────────────────────────────── */ .bg-hero-warning { background-color: #5c3800; color: #ffd98a; } .bg-hero-warning .hero-glow { background: radial-gradient(circle at 55% 45%, rgba(245,166,35,0.38) 0%, transparent 65%); } .bg-hero-warning.bg-grid::before { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 44px 44px; } .bg-hero-warning h1, .bg-hero-warning h2, .bg-hero-warning h3 { color: #fff3d0; } .bg-hero-warning .text-muted { color: #c08840 !important; } .bg-hero-warning .eyebrow-dot { background: #ffd580; --dot-color: rgba(245,166,35,0.35); } /* ──────────────────────────────────────────────────────────────────────────── DANGER — red #dc3545 Dark base: #4a0a0f Grid: rgba(255,255,255,0.04) ─────────────────────────────────────────────────────────────────────────── */ .bg-hero-danger { background-color: #4a0a0f; color: #f5b8bc; } .bg-hero-danger .hero-glow { background: radial-gradient(circle at 55% 45%, rgba(220,53,69,0.38) 0%, transparent 65%); } .bg-hero-danger.bg-grid::before { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 44px 44px; } .bg-hero-danger h1, .bg-hero-danger h2, .bg-hero-danger h3 { color: #ffe0e3; } .bg-hero-danger .text-muted { color: #c06068 !important; } .bg-hero-danger .eyebrow-dot { background: #f07880; --dot-color: rgba(220,53,69,0.35); } /* ──────────────────────────────────────────────────────────────────────────── INFO — blue-light #6699c8 Dark base: #162840 Grid: rgba(255,255,255,0.04) ─────────────────────────────────────────────────────────────────────────── */ .bg-hero-info { background-color: #162840; color: #b8d4ee; } .bg-hero-info .hero-glow { background: radial-gradient(circle at 55% 45%, rgba(102,153,200,0.38) 0%, transparent 65%); } .bg-hero-info.bg-grid::before { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 44px 44px; } .bg-hero-info h1, .bg-hero-info h2, .bg-hero-info h3 { color: #e0edf8; } .bg-hero-info .text-muted { color: #7a9ec0 !important; } .bg-hero-info .eyebrow-dot { background: var(--gatw-blue-lighter); --dot-color: rgba(102,153,200,0.30); } /* ──────────────────────────────────────────────────────────────────────────── BRAND — pink #e91e8c Dark base: #46012a Grid: rgba(255,255,255,0.04) ─────────────────────────────────────────────────────────────────────────── */ .bg-hero-brand { background-color: #46012a; color: #f5b0d8; } .bg-hero-brand .hero-glow { background: radial-gradient(circle at 55% 45%, rgba(233,30,140,0.38) 0%, transparent 65%); } .bg-hero-brand.bg-grid::before { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 44px 44px; } .bg-hero-brand h1, .bg-hero-brand h2, .bg-hero-brand h3 { color: #fde0f0; } .bg-hero-brand .text-muted { color: #c06090 !important; } .bg-hero-brand .eyebrow-dot { background: var(--gatw-pink-light); --dot-color: rgba(233,30,140,0.30); } /* ──────────────────────────────────────────────────────────────────────────── DARK — ink #141618 Same as section-dark but with glow support and no blueprint grid by default. ─────────────────────────────────────────────────────────────────────────── */ .bg-hero-dark { background-color: var(--gatw-ink); color: #c8d0da; } .bg-hero-dark .hero-glow { background: radial-gradient(circle at 55% 45%, rgba(63,123,182,0.22) 0%, transparent 65%); } .bg-hero-dark.bg-grid::before { background-image: linear-gradient(rgba(63,123,182,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(63,123,182,0.10) 1px, transparent 1px), linear-gradient(rgba(63,123,182,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(63,123,182,0.04) 1px, transparent 1px); background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px; } .bg-hero-dark h1, .bg-hero-dark h2, .bg-hero-dark h3 { color: #eef1f4; } .bg-hero-dark .text-muted { color: #6a7585 !important; } .bg-hero-dark .eyebrow-dot { background: var(--gatw-blue-light); --dot-color: rgba(102,153,200,0.25); } /* ──────────────────────────────────────────────────────────────────────────── SECONDARY — neutral dark #2a2e34 Subtle grey-tone base for general content sections. ─────────────────────────────────────────────────────────────────────────── */ .bg-hero-secondary { background-color: #2a2e34; color: #c0c6d0; } .bg-hero-secondary .hero-glow { background: radial-gradient(circle at 55% 45%, rgba(108,117,125,0.30) 0%, transparent 65%); } .bg-hero-secondary.bg-grid::before { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 44px 44px; } .bg-hero-secondary h1, .bg-hero-secondary h2, .bg-hero-secondary h3 { color: #e8eaed; } .bg-hero-secondary .text-muted { color: #7a8290 !important; } .bg-hero-secondary .eyebrow-dot { background: #909aaa; --dot-color: rgba(108,117,125,0.30); } /* ──────────────────────────────────────────────────────────────────────────── LIGHT VARIANTS — for above-the-fold sections on white/light pages. These use the light section-* approach (page-bg tint) rather than dark bases, with a stronger glow and tinted grid for visual interest. ─────────────────────────────────────────────────────────────────────────── */ /* Light Primary */ .bg-hero-primary-light { background-color: #e8f0fa; color: var(--gatw-text-body); } .bg-hero-primary-light .hero-glow { background: radial-gradient(circle at 55% 45%, rgba(63,123,182,0.18) 0%, transparent 60%); } .bg-hero-primary-light.bg-grid::before { background-image: linear-gradient(rgba(63,123,182,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(63,123,182,0.07) 1px, transparent 1px); background-size: 44px 44px; } .bg-hero-primary-light h1, .bg-hero-primary-light h2, .bg-hero-primary-light h3 { color: var(--gatw-blue-darker); } .bg-hero-primary-light .eyebrow-dot { background: var(--gatw-blue); --dot-color: rgba(63,123,182,0.25); } /* Light Success */ .bg-hero-success-light { background-color: #e8f5d0; color: var(--gatw-text-body); } .bg-hero-success-light .hero-glow { background: radial-gradient(circle at 55% 45%, rgba(110,168,0,0.18) 0%, transparent 60%); } .bg-hero-success-light.bg-grid::before { background-image: linear-gradient(rgba(110,168,0,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(110,168,0,0.07) 1px, transparent 1px); background-size: 44px 44px; } .bg-hero-success-light h1, .bg-hero-success-light h2, .bg-hero-success-light h3 { color: var(--gatw-green-darker); } .bg-hero-success-light .eyebrow-dot { background: var(--gatw-green); --dot-color: rgba(110,168,0,0.25); } /* Light Brand */ .bg-hero-brand-light { background-color: #fde8f2; color: var(--gatw-text-body); } .bg-hero-brand-light .hero-glow { background: radial-gradient(circle at 55% 45%, rgba(233,30,140,0.14) 0%, transparent 60%); } .bg-hero-brand-light.bg-grid::before { background-image: linear-gradient(rgba(233,30,140,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(233,30,140,0.06) 1px, transparent 1px); background-size: 44px 44px; } .bg-hero-brand-light h1, .bg-hero-brand-light h2, .bg-hero-brand-light h3 { color: var(--gatw-pink-darker); } .bg-hero-brand-light .eyebrow-dot { background: var(--gatw-pink); --dot-color: rgba(233,30,140,0.22); } /* ──────────────────────────────────────────────────────────────────────────── UTILITY helpers used inside bg-hero-* sections ─────────────────────────────────────────────────────────────────────────── */ /* Smooth colour transition on hover (used for links/eyebrow text in dark sections) */ .hover-text-white { transition: color 0.2s ease; } .hover-text-white:hover { color: #ffffff !important; } /* Barlow Condensed shorthand */ .font-barlow { font-family: 'Barlow Condensed', sans-serif; letter-spacing: -0.02em; } /* Mono label shorthand */ .font-mono-label { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; } /* ============================================================================ END ============================================================================ */ /* ============================================================================ GATW — Utility & Component Library ============================================================================ Append to or @import after bootstrap-theme-gatw.css. All legacy --main-* variables remapped to --gatw-* tokens. ============================================================================ */ /* ============================================================================ 1. BASE ELEMENT RESETS ============================================================================ */ a { text-decoration: none; } a:hover { cursor: pointer; } img:hover { opacity: 1; } /* ============================================================================ 2. LAYOUT & POSITION UTILITIES ============================================================================ */ .block, .display-block { display: block; } .inline { display: inline; } .hide { display: none; } .absolute { position: absolute; } .relative { position: relative; } /* ============================================================================ 3. WIDTH UTILITIES (Bootstrap covers 25/50/75/100 — these fill the gaps) ============================================================================ */ .w-10 { width: 10% !important; } .w-20 { width: 20% !important; } .w-30 { width: 30% !important; } .w-40 { width: 40% !important; } .w-60 { width: 60% !important; } .w-70 { width: 70% !important; } .w-80 { width: 80% !important; } .w-90 { width: 90% !important; } /* ============================================================================ 4. TYPOGRAPHY UTILITIES ============================================================================ */ /* ── Letter spacing ── */ .ls-02 { letter-spacing: 0.02em; } .ls-1 { letter-spacing: 0.05em; } .ls-2 { letter-spacing: 0.10em; } .ls-3 { letter-spacing: 0.15em; } .ls-wide { letter-spacing: 0.20em; } /* ── Font sizes (.f01 – .f30 in 0.1rem steps) ── */ .f01 { font-size: 0.2rem !important; } .f02 { font-size: 0.3rem !important; } .f03 { font-size: 0.4rem !important; } .f04 { font-size: 0.5rem !important; } .f05 { font-size: 0.6rem !important; } .f06 { font-size: 0.7rem !important; } .f07 { font-size: 0.8rem !important; } .f08 { font-size: 0.9rem !important; } .f09 { font-size: 1.0rem !important; } .f10 { font-size: 1.1rem !important; } .f11 { font-size: 1.2rem !important; } .f12 { font-size: 1.3rem !important; } .f13 { font-size: 1.4rem !important; } .f14 { font-size: 1.5rem !important; } .f15 { font-size: 1.6rem !important; } .f16 { font-size: 1.7rem !important; } .f17 { font-size: 1.8rem !important; } .f18 { font-size: 1.9rem !important; } .f19 { font-size: 2.0rem !important; } .f20 { font-size: 2.1rem !important; } .f21 { font-size: 2.2rem !important; } .f22 { font-size: 2.3rem !important; } .f23 { font-size: 2.4rem !important; } .f24 { font-size: 2.5rem !important; } .f25 { font-size: 2.6rem !important; } .f26 { font-size: 2.7rem !important; } .f27 { font-size: 2.8rem !important; } .f28 { font-size: 2.9rem !important; } .f29 { font-size: 3.0rem !important; } .f30 { font-size: 3.1rem !important; } /* ── Line heights ── */ .lh-05 { line-height: 0.5 !important; } .lh-10 { line-height: 1.0 !important; } .lh-11 { line-height: 1.1 !important; } .lh-12 { line-height: 1.2 !important; } .lh-13 { line-height: 1.3 !important; } .lh-14 { line-height: 1.4 !important; } .lh-20 { line-height: 2.0 !important; } /* ── Font weights ── */ .fweight200, .fw200 { font-weight: 200 !important; } .fweight300, .fw300 { font-weight: 300 !important; } .fweight400, .fw400, .normal { font-weight: 400 !important; } .fweight500, .fw500 { font-weight: 500 !important; } .fweight600, .fw600 { font-weight: 600 !important; } .fweight700, .fw700 { font-weight: 700 !important; } .fweight800, .fw800, .bold { font-weight: 800 !important; } /* ── Text transform & style ── */ .nowrap { white-space: nowrap; } .italic { font-style: italic; } .caps { text-transform: capitalize !important; } .uppercase, .upper { text-transform: uppercase !important; } /* ============================================================================ 5. OPACITY UTILITIES ============================================================================ */ .opacity-90 { opacity: 0.90; } .opacity-85 { opacity: 0.85; } .opacity-80 { opacity: 0.80; } .opacity-75 { opacity: 0.75; } .opacity-70 { opacity: 0.70; } .opacity-50 { opacity: 0.50; } /* ============================================================================ 6. GENERAL COMPONENTS ============================================================================ */ /* ── Required field marker ── */ .required { color: #dc3545; } .required i { color: #dc3545; font-size: 0.5rem; } /* ── No rounded corners on child images ── */ .no-rounding img { border-radius: 0; } /* ── Responsive circle image (aspect-ratio 1:1, cropped) ── */ .circle-responsive { position: relative; width: 100%; height: 0; padding: 100% 0 0; border-radius: 50%; overflow: hidden; border: 1px solid var(--gatw-border-mid); } .circle-responsive img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* ============================================================================ 7. STAR RATINGS ============================================================================ */ /* Colour aliases using GATW tokens */ .star-green { color: var(--gatw-star) !important; } .star-gold { color: var(--gatw-star) !important; } .star-white { color: #ffffff !important; } /* Star rating container */ .star-rating { display: inline-flex; align-items: center; line-height: 1; vertical-align: middle; color: var(--gatw-star); } /* Material Icons inside star ratings */ .star-rating .material-icons-outlined { display: block; line-height: 1; margin: 0; padding: 0; overflow: hidden; } /* Size variants */ .star-rating.sm .material-icons-outlined { font-size: 12px; width: 10px; height: 12px; letter-spacing: -2px; } .star-rating.md .material-icons-outlined { font-size: 16px; width: 14px; height: 16px; letter-spacing: -2px; } .star-rating.lg .material-icons-outlined { font-size: 20px; width: 18px; height: 20px; letter-spacing: -2px; } /* Material Symbols Outlined base reset */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; } /* Global guard for standalone header/footer icons outside of star ratings */ .material-icons, :not(.star-rating) > .material-icons-outlined { display: inline-block; vertical-align: middle; width: 24px; /* Standard default icon box size */ height: 24px; /* Standard default icon box size */ overflow: hidden; /* Clips text ligatures like 'chat_bubble_outline' */ white-space: nowrap; /* Forces text onto a single hidden line */ } img { opacity: 0; transition: opacity 0.4s ease; } img.loaded { opacity: 1; } /* ============================================================================ GLOBAL PROGRESSIVE IMAGE-ISOLATED SHIMMER SYSTEM ============================================================================ */ /* 1. Apply the baseline shimmer tracking directly to the image frame element */ .swiper-slide img { background: #f0f0f0 linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important; background-size: 200% 100% !important; background-repeat: no-repeat !important; /* Keep the shimmer moving continuously on the base layer so progressive 4G rows decode directly over an active tracking track instead of a white box */ animation: skeleton-shimmer 1.5s infinite linear !important; transition: filter 0.5s ease, transform 0.5s ease, background-color 0.6s ease; } /* 2. Isolated Pre-Load Modifiers (Blur and Scale Bounds) */ .swiper-slide img:not(.loaded) { filter: blur(8px); transform: scale(1.03); } /* 3. Safe Reveal: Let the image settle smoothly without flashing white */ .swiper-slide img.loaded { filter: blur(0); transform: scale(1); /* Transitions the underlying background to transparent over a soft cushion window. Opaque images will instantly hide the shimmer with their own pixels, while transparent graphics fade clean without a harsh snap. */ background-color: rgba(255, 255, 255, 0) !important; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================================ 9. DISCOUNT & PRICING COMPONENTS ============================================================================ */ /* Hidden by default — JS shows these when a discount is active */ .AutoDiscountSmallBox, .AutoDiscountBoxOuter, .AutoDiscountBoxOuterMultiItem { display: none; } /* Single-item discount bar — amber/warning */ .AutoDiscountBox { font-weight: 400; color: var(--gatw-text-dark) !important; text-transform: none; background-color: var(--gatw-star); } /* Multi-item basket discount bar — red/danger */ .AutoDiscountBoxMultiItem { font-weight: 400; color: #ffffff !important; text-transform: none; text-align: left; background-color: #dc3545; } /* Sidebar discount strip */ .AutoDiscountBoxSide { padding: 3px 0 !important; font-weight: 400; color: #ffffff !important; text-transform: none; text-align: left; line-height: 1em; background-color: #dc3545; } /* ============================================================================ 10. PROGRESS / PRICE LOADERS ============================================================================ */ /* * Animated progress stripe — shared keyframe. * Used by both .filterloader and .priceloader. */ @keyframes gatw-stripe { 0% { background-position: -150% 0, -150% 0; } 66% { background-position: 250% 0, -150% 0; } 100% { background-position: 250% 0, 250% 0; } } /* Filter / category loading bar */ .filterloader { display: none; height: 5px; width: 100%; --c: no-repeat linear-gradient(var(--gatw-text-dark) 0 0); background: var(--c), var(--c), var(--gatw-border-mid); background-size: 60% 100%; animation: gatw-stripe 3s infinite; } /* Pricing bar outer track — green background, always visible */ .priceloader-outer { height: 3px; width: 100%; background: var(--gatw-green); } /* Pricing bar animated stripe — shown while price recalculates */ .priceloader { display: none; height: 3px; width: 100%; --c: no-repeat linear-gradient(var(--gatw-green-dark) 0 0); background: var(--c), var(--c), var(--gatw-green); background-size: 60% 100%; animation: gatw-stripe 3s infinite; } /* ============================================================================ 11. HERO PRICE BAR (product page QTY + Add to Basket area) ============================================================================ */ /* * .hero-price — the main green Add to Basket strip. * Overriding background here means all child elements (price, button) sit * on the brand green. The .priceloader-outer sits above this as a 3px line. */ .hero-price { background: var(--gatw-green); color: var(--gatw-text-dark); } /* * Single/multi discount notification bars. * Shown conditionally by JS — hidden by default in section 9 above. */ .AutoDiscountBox { background: var(--gatw-green-light); color: var(--gatw-text-dark) !important; } .AutoDiscountBoxMultiItem { background: var(--gatw-green-light); color: var(--gatw-text-dark) !important; } /* ============================================================================ 12. LAYOUT SELECTOR (product configurator) ============================================================================ */ /* * .mtmLayout — unselected layout thumbnail. * .mtmLayoutSelected — the currently active layout. * Greyscale + opacity give a clear visual hierarchy without a border. */ .mtmLayout img { opacity: 0.50; filter: grayscale(100%); transition: opacity 0.25s ease, filter 0.25s ease; } .mtmLayout:hover img { opacity: 0.80; filter: grayscale(40%); } .mtmLayoutSelected img { opacity: 1; filter: grayscale(0%); } .swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) { display: none; } /* ============================================================================ END ============================================================================ */ /* --- ICON SYSTEM (unchanged) --- */ .icon-gaw { display: inline-block; width: 1em; height: 1em; min-width: 1em; min-height: 1em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; vertical-align: middle; } .icon-gaw-single { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Cline x1='8' y1='8' x2='16' y2='16' opacity='0.5' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Cline x1='8' y1='8' x2='16' y2='16' opacity='0.5' /%3E%3C/svg%3E"); } .icon-gaw-double { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='14' height='14' rx='2' /%3E%3Crect x='3' y='7' width='14' height='14' rx='2' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='14' height='14' rx='2' /%3E%3Crect x='3' y='7' width='14' height='14' rx='2' /%3E%3C/svg%3E"); } .icon-gaw-tbar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Cline x1='3' y1='9' x2='21' y2='9' /%3E%3Cline x1='3' y1='15' x2='21' y2='15' /%3E%3Cline x1='9' y1='3' x2='9' y2='21' /%3E%3Cline x1='15' y1='3' x2='15' y2='21' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Cline x1='3' y1='9' x2='21' y2='9' /%3E%3Cline x1='3' y1='15' x2='21' y2='15' /%3E%3Cline x1='9' y1='3' x2='9' y2='21' /%3E%3Cline x1='15' y1='3' x2='15' y2='21' /%3E%3C/svg%3E"); } .icon-gaw-tbar-double { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- Unlined Rear Panel (stationary) --%3E%3Crect x='7' y='3' width='14' height='14' rx='2' /%3E%3C!-- Lined Front Panel, now shifted to 2,7 (shifted down 1) --%3E%3Crect x='2' y='7' width='14' height='14' rx='2' /%3E%3C!-- Grid Lines attached to the shifted front panel (all y coords shifted +1) --%3E%3Cline x1='2' y1='12' x2='16' y2='12' /%3E%3Cline x1='2' y1='17' x2='16' y2='17' /%3E%3Cline x1='7' y1='7' x2='7' y2='21' /%3E%3Cline x1='12' y1='7' x2='12' y2='21' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- Unlined Rear Panel (stationary) --%3E%3Crect x='7' y='3' width='14' height='14' rx='2' /%3E%3C!-- Lined Front Panel, now shifted to 2,7 (shifted down 1) --%3E%3Crect x='2' y='7' width='14' height='14' rx='2' /%3E%3C!-- Grid Lines attached to the shifted front panel (all y coords shifted +1) --%3E%3Cline x1='2' y1='12' x2='16' y2='12' /%3E%3Cline x1='2' y1='17' x2='16' y2='17' /%3E%3Cline x1='7' y1='7' x2='7' y2='21' /%3E%3Cline x1='12' y1='7' x2='12' y2='21' /%3E%3C/svg%3E"); } .icon-gaw-ibar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Cline x1='9' y1='3' x2='9' y2='21' /%3E%3Cline x1='15' y1='3' x2='15' y2='21' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Cline x1='9' y1='3' x2='9' y2='21' /%3E%3Cline x1='15' y1='3' x2='15' y2='21' /%3E%3C/svg%3E"); } .icon-gaw-fire { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.48 12.35c-1.57-4.08-7.16-4.3-5.81-10.23c0.1-0.44-0.37-0.78-0.75-0.55C9.29 3.71 6.68 8 8.87 13.62c0.18 0.46-0.36 0.89-0.75 0.59c-1.81-1.37-2-3.34-1.84-4.75c0.06-0.52-0.62-0.77-0.91-0.34C4.68 10.29 4 11.68 4 13.1c0 4.42 3.58 8 8 8s8-3.58 8-8C20 12.83 19.96 12.58 19.48 12.35z' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.48 12.35c-1.57-4.08-7.16-4.3-5.81-10.23c0.1-0.44-0.37-0.78-0.75-0.55C9.29 3.71 6.68 8 8.87 13.62c0.18 0.46-0.36 0.89-0.75 0.59c-1.81-1.37-2-3.34-1.84-4.75c0.06-0.52-0.62-0.77-0.91-0.34C4.68 10.29 4 11.68 4 13.1c0 4.42 3.58 8 8 8s8-3.58 8-8C20 12.83 19.96 12.58 19.48 12.35z' /%3E%3C/svg%3E"); } .icon-gaw-projects { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Ccircle cx='8.5' cy='8.5' r='1.5' /%3E%3Cpath d='M21 15l-5-5L5 21' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Ccircle cx='8.5' cy='8.5' r='1.5' /%3E%3Cpath d='M21 15l-5-5L5 21' /%3E%3C/svg%3E"); } .icon-gaw-manifestation { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Ccircle cx='8' cy='12' r='1' /%3E%3Ccircle cx='12' cy='12' r='1' /%3E%3Ccircle cx='16' cy='12' r='1' /%3E%3Cline x1='3' y1='8' x2='21' y2='8' opacity='0.5' /%3E%3Cline x1='3' y1='16' x2='21' y2='16' opacity='0.5' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Ccircle cx='8' cy='12' r='1' /%3E%3Ccircle cx='12' cy='12' r='1' /%3E%3Ccircle cx='16' cy='12' r='1' /%3E%3Cline x1='3' y1='8' x2='21' y2='8' opacity='0.5' /%3E%3Cline x1='3' y1='16' x2='21' y2='16' opacity='0.5' /%3E%3C/svg%3E"); } .icon-gaw-contact { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Cpath d='M21 6l-9 7l-9-7' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Cpath d='M21 6l-9 7l-9-7' /%3E%3C/svg%3E"); } .icon-gaw-commercial { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16' /%3E%3Cpath d='M9 7h6 M9 11h6 M9 15h6' /%3E%3Cline x1='3' y1='21' x2='21' y2='21' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16' /%3E%3Cpath d='M9 7h6 M9 11h6 M9 15h6' /%3E%3Cline x1='3' y1='21' x2='21' y2='21' /%3E%3C/svg%3E"); } .icon-gaw-domestic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' /%3E%3Cpath d='M9 22V12h6v10' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' /%3E%3Cpath d='M9 22V12h6v10' /%3E%3C/svg%3E"); } .icon-gaw-frameless { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Cpath d='M10 5L5 10 M19 5L5 19' opacity='0.4' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Cpath d='M10 5L5 10 M19 5L5 19' opacity='0.4' /%3E%3C/svg%3E"); } .icon-gaw-single-door { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18' /%3E%3Cpath d='M7 21V6a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v15' /%3E%3Cpath d='M14.5 12v3' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18' /%3E%3Cpath d='M7 21V6a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v15' /%3E%3Cpath d='M14.5 12v3' /%3E%3C/svg%3E"); } .icon-gaw-double-doors { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18' /%3E%3Cpath d='M5 21V6a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v15' /%3E%3Cpath d='M12 5v16' /%3E%3Cpath d='M10.5 12v3 M13.5 12v3' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18' /%3E%3Cpath d='M5 21V6a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v15' /%3E%3Cpath d='M12 5v16' /%3E%3Cpath d='M10.5 12v3 M13.5 12v3' /%3E%3C/svg%3E"); } .icon-gaw-star { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2' /%3E%3C/svg%3E"); } .icon-gaw-door { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18' /%3E%3Cpath d='M7 21V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v17' /%3E%3Cpath d='M14.5 12v2' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18' /%3E%3Cpath d='M7 21V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v17' /%3E%3Cpath d='M14.5 12v2' /%3E%3C/svg%3E"); }