/* ============================================================ Best Break Bulk — corporate restyle (deep navy + steel) Loaded LAST in , after design.min.css / kweb.css / flag-icons. Overrides only via the cascade; design.min.css is left untouched. ============================================================ */ :root{ --c-navy:#0A2540; --c-navy2:#103a63; --c-steel:#1B6EC2; --c-accent:#18A0FB; --c-surface:#F5F7FA; --c-muted:#5B6B7B; --c-border:#E2E8F0; --radius:5px; --shadow-sm:0 1px 2px rgba(10,37,64,.06),0 1px 3px rgba(10,37,64,.10); --shadow-md:0 4px 12px rgba(10,37,64,.10),0 2px 4px rgba(10,37,64,.06); --maxw:1040px; } /* ===== BASE / TYPOGRAPHY ===== */ body{ font-family:"Roboto",-apple-system,"Segoe UI",Arial,sans-serif; font-size:15px; line-height:1.6; color:var(--c-navy); background:var(--c-surface); } p,li,td,dd{ color:var(--c-navy); } .text-muted,.c-gray,.c-grey{ color:var(--c-muted)!important; } h1,h2,h3,h4,h5,h6{ color:var(--c-navy); font-weight:700; letter-spacing:-.01em; line-height:1.25; } h1{ font-size:30px; } h2{ font-size:25px; } h3{ font-size:21px; } h4{ font-size:18px; } hr{ border-top:1px solid var(--c-border); } /* ===== LINKS ===== */ a{ color:var(--c-steel); transition:color .15s ease; } a:hover,a:focus{ color:var(--c-accent); text-decoration:none; } /* ===== BUTTONS (Material sets hover border-color:transparent -> re-assert) ===== */ .btn{ border-radius:var(--radius); font-weight:500; letter-spacing:.01em; box-shadow:none; transition:background-color .15s,box-shadow .15s,border-color .15s,color .15s; } .btn-primary,.btn-primary:focus{ background-color:var(--c-steel)!important; border-color:var(--c-steel)!important; color:#fff!important; } .btn-primary:hover,.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{ background-color:var(--c-accent)!important; border-color:var(--c-accent)!important; color:#fff!important; box-shadow:var(--shadow-md); } .btn-lg{ padding:12px 28px; font-size:16px; border-radius:var(--radius); } .btn-default{ border-radius:var(--radius); } /* ===== CONTENT CARD (base/content.xslt) ===== */ .card{ border-radius:var(--radius); box-shadow:var(--shadow-sm); border:1px solid var(--c-border); margin-bottom:28px; background:#fff; } .card-header.ch-alt:not([class*=bgm-]){ background:#fff; border-bottom:1px solid var(--c-border); color:var(--c-navy); font-size:21px; font-weight:700; padding:18px 30px; border-radius:var(--radius) var(--radius) 0 0; } .card-body.card-padding{ padding:28px 30px; } /* readability: constrain the MAIN content area (card pages AND blog/feed pages) to a centered max-width; header/hero/CTA/footer stay full-width. The content wrapper is always the first .container-fluid right after the header. */ .header_container + .container-fluid{ max-width:var(--maxw); margin-left:auto; margin-right:auto; } /* ===== CTA "Get a Quote" band (.alert.alert-order, inline #3570ba) ===== */ /* constrain the CTA wrapper to the content container width (matches .header_container + .container-fluid) */ .container-fluid.m-t-25.m-b-25{ max-width:var(--maxw); margin-left:auto; margin-right:auto; } .alert.alert-order{ background:linear-gradient(135deg,var(--c-navy),var(--c-steel))!important; color:#fff!important; border:0!important; border-radius:var(--radius); box-shadow:var(--shadow-md); padding:18px 26px; } .alert.alert-order,.alert.alert-order *{ color:#fff; } .alert-order .btn-primary,.alert-order .btn-primary:focus{ background:#fff!important; color:var(--c-navy)!important; border-color:#fff!important; } .alert-order .btn-primary:hover{ background:var(--c-accent)!important; color:#fff!important; border-color:var(--c-accent)!important; } /* kill the inline steel plate baked into the textblock span; balance text(left) + button(right), v-centered */ .alert.alert-order .row{ display:flex; flex-wrap:wrap; align-items:center; margin:0; } .alert.alert-order .textblock p{ margin:0; } .alert.alert-order .textblock span{ background:transparent!important; background-color:transparent!important; color:#fff!important; font-size:18px!important; font-weight:600; line-height:1.35; } .alert.alert-order>.row>.col-sm-7{ text-align:left; } .alert.alert-order>.row>.col-sm-5{ text-align:right; padding-top:0!important; } .alert-order .btn-lg{ white-space:nowrap; padding:9px 22px; font-size:14px; } @media (max-width:768px){ .alert.alert-order>.row>.col-sm-7, .alert.alert-order>.row>.col-sm-5{ text-align:center; } .alert.alert-order>.row>.col-sm-5{ padding-top:14px!important; } .alert.alert-order{ padding:16px 18px; } .alert.alert-order .textblock span{ font-size:16px!important; } } /* ===== FOOTER bands (.bg-primary; band #1 inline #2ea1fb) ===== */ .bg-primary{ background-color:var(--c-navy)!important; color:#fff; } .bg-primary .navbar-nav>li>a,.bg-primary .navbar-nav>li>a:focus{ color:#fff; } .bg-primary .navbar-nav>li>a:hover{ color:var(--c-accent); background:transparent; } .bg-primary .c-white,.bg-primary a.c-white{ color:#fff!important; } .bg-primary a.c-white:hover{ color:var(--c-accent)!important; } .bg-primary .c-black,.bg-primary a.c-black{ color:#cdd7e2!important; } /* cross-site links readable on navy */ .bg-primary a.c-black:hover{ color:#fff!important; } .social-buttons a{ opacity:.92; transition:opacity .15s; } .social-buttons a:hover{ opacity:1; } /* ===== FORMS ===== */ .form-control{ border-radius:var(--radius); } .form-control:focus{ border-color:var(--c-steel)!important; box-shadow:inset 0 1px 1px rgba(0,0,0,.04),0 0 0 3px rgba(27,110,194,.15)!important; } .input-group-addon{ background:var(--c-surface); color:var(--c-steel); border-radius:var(--radius) 0 0 var(--radius); } /* ===== MODALS (#orderModal, #modal_lang stay light) ===== */ /* defensive: the language/country list lives in a modal — never let it render in-flow at the bottom of the page (e.g. if Bootstrap's .modal{display:none} fails to apply). Bootstrap sets inline display:block when the globe opens it, which overrides this. */ .modal:not(.in){ display:none; } .modal-content{ border-radius:var(--radius); box-shadow:0 10px 40px rgba(10,37,64,.25); border:0; } .modal-header{ background:var(--c-navy); border-bottom:0; border-radius:var(--radius) var(--radius) 0 0; padding:18px 26px; } .modal-header .modal-title,.modal-header h4{ color:#fff; font-weight:700; } .modal-header .close{ color:#fff; opacity:.8; text-shadow:none; } .modal-footer{ background:var(--c-surface); border-top:1px solid var(--c-border); } .modal-footer .btn-link{ color:var(--c-steel); } /* ===== HEADER: sticky navy topbar (wordmark + menu + language), CSS burger on mobile ===== */ .header_container{ background:transparent; } .bbb-topbar{ position:sticky; top:0; z-index:1030; background:linear-gradient(180deg,#0c2c4d 0%,var(--c-navy) 100%); box-shadow:0 2px 16px rgba(8,24,44,.30); border-bottom:1px solid rgba(255,255,255,.06); } .bbb-topbar .container-fluid{ padding:0; } .bbb-bar{ display:flex; align-items:center; gap:22px; max-width:1180px; margin:0 auto; padding:0 24px; min-height:62px; } /* logo: the existing Kiev Shipping Ltd emblem (images/default/logo.svg) */ .bbb-logo{ display:flex; align-items:center; flex:0 0 auto; text-decoration:none; } .bbb-logo:hover,.bbb-logo:focus{ text-decoration:none; } .bbb-logo img{ height:50px; width:auto; display:block; } /* nav cluster pushed right */ .bbb-nav{ display:flex; align-items:center; margin-left:auto; } .bbb-menu.navbar-nav{ display:flex; margin:0; float:none; } .bbb-menu.navbar-nav>li{ float:none; position:relative; } .bbb-menu.navbar-nav>li>a, .bbb-menu.navbar-nav>li>a.c-black{ color:rgba(255,255,255,.82)!important; background:transparent!important; font-weight:600; font-size:14px; padding:21px 15px; position:relative; transition:color .15s; } .bbb-menu.navbar-nav>li>a:hover, .bbb-menu.navbar-nav>li>a:focus, .bbb-menu.navbar-nav>li.active>a, .bbb-menu.navbar-nav>li.active>a.c-black, .bbb-menu.navbar-nav>li.open>a{ color:#fff!important; background:transparent!important; } .bbb-menu.navbar-nav>li>a:after{ content:""; position:absolute; left:15px; right:15px; bottom:14px; height:2px; background:var(--c-accent); border-radius:2px; transform:scaleX(0); transition:transform .18s; } .bbb-menu.navbar-nav>li>a:hover:after, .bbb-menu.navbar-nav>li.active>a:after{ transform:scaleX(1); } .bbb-menu.navbar-nav .caret{ color:rgba(255,255,255,.55); margin-left:7px; } .bbb-menu .dropdown-menu{ background:#fff; border:0; border-radius:8px; box-shadow:0 12px 30px rgba(8,24,44,.22); padding:8px 0; margin-top:0; } .bbb-menu .dropdown-menu>li>a,.bbb-menu .dropdown-menu>li>a.c-black{ color:var(--c-navy)!important; padding:9px 20px; font-size:14px; } .bbb-menu .dropdown-menu>li>a:hover{ background:var(--c-surface); color:var(--c-steel)!important; } /* DESKTOP submenus: open on hover as a floating white box; override Material's ".navbar-nav .open .dropdown-menu{position:static;background:transparent;border:0}" glitch */ @media (min-width:769px){ .bbb-menu.navbar-nav>li{ position:relative; } .bbb-menu .dropdown-menu{ position:absolute!important; top:100%; left:0; float:none!important; display:none; min-width:230px; margin:0!important; background:#fff!important; border:0!important; border-radius:8px; box-shadow:0 12px 30px rgba(8,24,44,.22)!important; padding:8px 0!important; } .bbb-menu.navbar-nav>li:hover>.dropdown-menu, .bbb-menu.navbar-nav>li.open>.dropdown-menu{ display:block!important; } .bbb-menu .dropdown-menu>li{ float:none!important; width:auto; } .bbb-menu .dropdown-menu>li>a, .bbb-menu .dropdown-menu>li>a.c-black{ position:static!important; display:block; white-space:nowrap; padding:9px 22px!important; line-height:1.45; color:var(--c-navy)!important; background:transparent!important; } .bbb-menu .dropdown-menu>li>a:hover{ background:var(--c-surface)!important; color:var(--c-steel)!important; } } /* language pill */ .bbb-lang{ display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; margin-left:14px; padding:7px 15px; border:1px solid rgba(255,255,255,.22); border-radius:30px; color:#fff!important; font-weight:600; font-size:13px; white-space:nowrap; text-decoration:none; transition:background .15s,border-color .15s; } .bbb-lang:hover,.bbb-lang:focus{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.42); color:#fff!important; text-decoration:none; } .bbb-lang .zmdi{ font-size:16px; } /* burger (hidden on desktop) */ .bbb-nav-toggle{ display:none; } .bbb-burger{ display:none; } /* per-page hero banner: bg image (pageMedia) + navy overlay + page title bottom-left */ .bbb-pagehero{ position:relative; min-height:300px; display:flex; align-items:flex-end; background-color:var(--c-navy); background-size:cover; background-position:center 40%; } .bbb-pagehero:before{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(90deg, rgba(8,28,52,.82) 0%, rgba(8,28,52,.45) 52%, rgba(8,28,52,.12) 100%), linear-gradient(180deg, rgba(10,37,64,.5) 0%, rgba(10,37,64,0) 38%, rgba(8,28,52,.45) 100%); } .bbb-pagehero-inner{ position:relative; z-index:1; width:100%; max-width:1180px; margin:0 auto; padding:0 24px 32px; } .bbb-pagehero-title{ display:block; color:#fff; font-size:34px; font-weight:800; line-height:1.15; letter-spacing:-.01em; margin:0; } /* ===== BREADCRUMB (chevron separators, home icon, subtle) ===== */ .breadcrumb{ display:inline-flex; flex-wrap:wrap; align-items:center; background:transparent!important; border:0!important; padding:0; margin:6px 0 20px!important; font-size:14px; line-height:1.2; } .breadcrumb>li{ display:inline-flex; align-items:center; } .breadcrumb>li>a{ color:var(--c-muted); font-weight:500; display:inline-flex; align-items:center; transition:color .15s; } .breadcrumb>li>a:hover{ color:var(--c-steel); } .breadcrumb>.active{ color:var(--c-navy); font-weight:600; } .breadcrumb>li+li:before{ content:"\203A"; color:#aebccd; font-size:15px; line-height:1; padding:0 9px; } .bbb-bc-home{ font-size:15px; margin-right:5px; color:var(--c-steel); } .breadcrumb>li:first-child>a:hover .bbb-bc-home{ color:var(--c-accent); } /* ===== HOMEPAGE HERO (header.xslt, homepage only) — image-backed, left-aligned ===== */ .bbb-hero{ position:relative; min-height:520px; display:flex; align-items:center; background-color:var(--c-navy); background-size:cover; background-position:center 42%; } .bbb-hero:before{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(90deg, rgba(8,28,52,.88) 0%, rgba(8,28,52,.55) 45%, rgba(8,28,52,.18) 100%), linear-gradient(180deg, rgba(10,37,64,.55) 0%, rgba(10,37,64,0) 30%); } .bbb-hero-inner{ position:relative; z-index:1; width:100%; max-width:1180px; margin:0 auto; padding:64px 24px; } .bbb-hero-logo{ position:absolute; right:24px; top:50%; transform:translateY(-50%); height:172px; width:auto; filter:drop-shadow(0 8px 26px rgba(0,0,0,.55)); } @media (max-width:980px){ .bbb-hero-logo{ display:none; } } .bbb-hero-eyebrow{ color:var(--c-accent); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px; } .bbb-hero-title{ color:#fff; font-size:46px; font-weight:800; line-height:1.1; letter-spacing:-.01em; margin:0 0 18px; max-width:640px; } .bbb-hero-sub{ color:#cdd9e8; font-size:18px; line-height:1.55; margin:0 0 30px; max-width:560px; } .bbb-hero-cta{ display:flex; flex-wrap:wrap; gap:14px; } .bbb-hero .btn-primary,.bbb-hero .btn-primary:focus{ background:#fff!important; color:var(--c-navy)!important; border-color:#fff!important; } .bbb-hero .btn-primary:hover{ background:var(--c-accent)!important; color:#fff!important; border-color:var(--c-accent)!important; } .bbb-hero .bbb-btn-ghost,.bbb-hero .bbb-btn-ghost:focus{ background:transparent; color:#fff!important; border:1.5px solid rgba(255,255,255,.5); } .bbb-hero .bbb-btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff!important; } /* brand chip (used once header.xslt adds an always-visible nav logo) */ .bbb-brand{ display:inline-block; padding:7px 14px; margin:8px 0; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); } .bbb-brand img{ height:40px; width:auto; display:block; } /* ===== BLOG / ARTICLE LIST ===== Feed list rows are div[record].col-sm-12; gallery items are .col-sm-3 -> NOT affected. */ [record].col-sm-12{ background:#fff; border:1px solid var(--c-border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:16px; margin-bottom:16px; transition:box-shadow .15s ease, transform .15s ease; } [record].col-sm-12:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); } [record].col-sm-12>.row{ display:flex; align-items:flex-start; gap:18px; margin:0; } [record].col-sm-12>.row>[class*=col-]{ float:none; padding:0; width:auto; } [record].col-sm-12>.row>[class*=col-]:first-child{ flex:0 0 170px; } [record].col-sm-12>.row>[class*=col-]:last-child{ flex:1 1 auto; min-width:0; } [record].col-sm-12 img{ width:170px!important; height:120px; object-fit:cover; border-radius:var(--radius); display:block; } [record].col-sm-12 a.f-700{ font-size:18px; line-height:1.3; } [record].col-sm-12 a.f-700 .c-black{ color:var(--c-navy)!important; } [record].col-sm-12 a.f-700:hover .c-black{ color:var(--c-steel)!important; } [record].col-sm-12 .c-gray{ font-size:13px; color:var(--c-muted)!important; margin-top:4px; } [record].col-sm-12 .m-t-10{ color:var(--c-muted); line-height:1.55; } /* ===== PORTFOLIO (childs.xslt card grid) ===== */ .bbb-pf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; } .bbb-pf-card{ display:flex; flex-direction:column; gap:10px; padding:20px; background:#fff; border:1px solid var(--c-border); border-radius:var(--radius); box-shadow:var(--shadow-sm); color:var(--c-navy); text-decoration:none; transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .bbb-pf-card:hover,.bbb-pf-card:focus{ text-decoration:none; box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--c-steel); } .bbb-pf-ico{ font-size:24px; line-height:1; color:var(--c-steel); } .bbb-pf-name{ flex:1 1 auto; font-weight:600; font-size:15px; line-height:1.4; color:var(--c-navy); } .bbb-pf-desc{ font-size:13px; color:var(--c-muted); line-height:1.5; } .bbb-pf-go{ margin-top:2px; color:var(--c-steel); font-size:20px; line-height:1; } .bbb-pf-card:hover .bbb-pf-go,.bbb-pf-card:hover .bbb-pf-ico{ color:var(--c-accent); } @media (max-width:768px){ .bbb-pf-grid{ grid-template-columns:1fr; gap:14px; } .bbb-pf-card{ padding:16px; } } /* ===== GALLERY (default/gallery.content.xml — portfolio detail pages, etc.) ===== col-sm-3 floats with uneven native image heights made rows misalign; force uniform thumbnails. */ .gallery-item{ margin-bottom:16px; } .gallery-item>a{ display:block; line-height:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--c-border); } .gallery-item img,.gallery-item img.thumbnail{ width:100%!important; height:170px!important; object-fit:cover; display:block; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; transition:transform .25s ease; } .gallery-item>a:hover img{ transform:scale(1.05); } @media (max-width:768px){ .gallery-item img,.gallery-item img.thumbnail{ height:140px!important; } } /* ===== TEXT CONTENT typography (textblock pages: about/chartering/bulk/… ) ===== Scoped to .header_container + .container-fluid .textblock so it never touches the CTA (.alert-order .textblock), header, footer or the gallery photo grid. */ .header_container + .container-fluid .textblock{ color:#2A3B4D; font-size:15.5px; line-height:1.72; } .header_container + .container-fluid .textblock > *:first-child{ margin-top:0; } .header_container + .container-fluid .textblock p{ margin:0 0 16px; } /* readable text column (780px); figures/images are exempt so they can go full width */ .header_container + .container-fluid .textblock p, .header_container + .container-fluid .textblock h1, .header_container + .container-fluid .textblock h2, .header_container + .container-fluid .textblock h3, .header_container + .container-fluid .textblock ul, .header_container + .container-fluid .textblock ol, .header_container + .container-fluid .textblock blockquote, .header_container + .container-fluid .textblock dl{ max-width:780px; } /* lead: the first paragraph after the page H1 */ .header_container + .container-fluid .textblock h1 + p{ font-size:18px; line-height:1.6; color:#33475b; font-weight:400; margin-bottom:22px; } /* headings */ .header_container + .container-fluid .textblock h1{ font-size:29px; line-height:1.2; margin:0 0 18px; } .header_container + .container-fluid .textblock h2{ font-size:21px; line-height:1.3; margin:34px 0 14px; padding-left:14px; border-left:3px solid var(--c-steel); } .header_container + .container-fluid .textblock h3{ font-size:18px; line-height:1.3; margin:30px 0 12px; padding-left:13px; border-left:3px solid var(--c-steel); } /* bullet lists -> steel chevron (CSS triangle, font-independent) */ .header_container + .container-fluid .textblock ul{ list-style:none; margin:0 0 18px; padding-left:2px; } .header_container + .container-fluid .textblock ul li{ position:relative; padding-left:26px; margin-bottom:10px; line-height:1.6; } .header_container + .container-fluid .textblock ul li::before{ content:""; position:absolute; left:5px; top:8px; width:0; height:0; border-style:solid; border-width:4px 0 4px 6px; border-color:transparent transparent transparent var(--c-steel); } /* ordered lists: keep numbers but spaced */ .header_container + .container-fluid .textblock ol{ margin:0 0 18px; padding-left:22px; } .header_container + .container-fluid .textblock ol li{ margin-bottom:10px; } /* links inside content (contacts tel/mailto) */ .header_container + .container-fluid .textblock a{ color:var(--c-steel); border-bottom:1px solid rgba(27,110,194,.3); } .header_container + .container-fluid .textblock a:hover{ color:var(--c-accent); border-bottom-color:var(--c-accent); } /* emphasis + rule */ .header_container + .container-fluid .textblock strong,.header_container + .container-fluid .textblock b{ color:var(--c-navy); font-weight:700; } .header_container + .container-fluid .textblock hr{ margin:28px 0; border:0; border-top:1px solid var(--c-border); } /* richer content (blog articles): pull-quote + responsive images */ .header_container + .container-fluid .textblock blockquote{ margin:20px 0; padding:12px 18px; border-left:3px solid var(--c-steel); background:var(--c-surface); color:#33475b; font-style:italic; border-radius:0 var(--radius) var(--radius) 0; } .header_container + .container-fluid .textblock blockquote p:last-child{ margin-bottom:0; } .header_container + .container-fluid .textblock img{ max-width:100%; height:auto; border-radius:var(--radius); } .header_container + .container-fluid .textblock p > img{ display:block; margin:4px 0 16px; } /* figures (e.g. types-cargo-ships): break out to the full card width, edge-to-edge, styled caption */ .header_container + .container-fluid .textblock figure{ margin:30px -30px; } .header_container + .container-fluid .textblock figure img{ width:100%; height:auto; display:block; border-radius:0; } .header_container + .container-fluid .textblock figcaption{ text-align:center; font-size:13px; color:var(--c-muted); font-style:italic; padding:10px 30px 0; } /* trailing signature block (Kiev Shipping Ltd / slogan) */ .header_container + .container-fluid .textblock > p:last-child{ margin-top:26px; padding-top:18px; border-top:1px solid var(--c-border); color:var(--c-muted); } .header_container + .container-fluid .textblock > p:last-child strong{ color:var(--c-navy); } @media (max-width:768px){ .header_container + .container-fluid .textblock p, .header_container + .container-fluid .textblock h1, .header_container + .container-fluid .textblock h2, .header_container + .container-fluid .textblock h3, .header_container + .container-fluid .textblock ul, .header_container + .container-fluid .textblock ol, .header_container + .container-fluid .textblock blockquote{ max-width:none; } .header_container + .container-fluid .textblock h1 + p{ font-size:16.5px; } .header_container + .container-fluid .textblock h2{ margin-top:26px; } /* figures full-bleed to the mobile card padding (18px) */ .header_container + .container-fluid .textblock figure{ margin:22px -18px; } .header_container + .container-fluid .textblock figcaption{ padding:8px 18px 0; } } /* ===== ENQUIRY / CONTACT FORM (sectioned: labelled boxed fields + icon section heads) ===== */ .bbb-form{ max-width:820px; } .bbb-form-note{ color:var(--c-muted); font-size:14px; line-height:1.6; margin:0 0 24px; } .bbb-fs{ border:0; margin:0; padding:0; min-width:0; } .bbb-fs + .bbb-fs{ margin-top:30px; padding-top:26px; border-top:1px solid var(--c-border); } .bbb-fs-h{ display:flex; align-items:center; gap:11px; width:auto; border:0; margin:0 0 16px; font-size:15px; font-weight:700; color:var(--c-navy); text-transform:uppercase; letter-spacing:.04em; } .bbb-fs-h .zmdi{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; flex:0 0 30px; border-radius:7px; background:rgba(27,110,194,.10); color:var(--c-steel); font-size:16px; } .bbb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; } .bbb-field{ display:flex; flex-direction:column; min-width:0; } .bbb-field--wide{ grid-column:1 / -1; } .bbb-field label{ font-size:13px; font-weight:600; color:var(--c-navy); margin-bottom:6px; line-height:1.35; } .bbb-field .req{ color:var(--c-accent); font-weight:700; } .bbb-form .form-control{ border:1.5px solid #bcc8d8; border-radius:var(--radius); background:#fff; padding:9px 12px; font-size:14px; color:var(--c-navy); height:auto; box-shadow:none; } .bbb-form .form-control:hover{ border-color:#9fb0c6; } .bbb-form .form-control:focus{ border-color:var(--c-steel)!important; box-shadow:0 0 0 3px rgba(27,110,194,.15)!important; } .bbb-form textarea.form-control{ min-height:84px; resize:vertical; line-height:1.5; } .bbb-submit{ margin-top:30px; } .bbb-form .btn-primary{ padding:13px 36px; font-size:15px; font-weight:600; } .bbb-form .btn-primary .zmdi{ margin-left:8px; font-size:17px; vertical-align:-2px; } @media (max-width:768px){ .bbb-grid{ grid-template-columns:1fr; gap:14px; } .bbb-form .btn-primary{ width:100%; } } /* ===== FOOTER (modern: brand/tagline/contacts/social | menu columns; thin bottom bar) ===== */ .bbb-footer{ background:var(--c-navy); color:rgba(255,255,255,.72); padding:48px 0 0; } .bbb-footer .container{ max-width:1140px; } .bbb-foot-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; padding-bottom:36px; } .bbb-foot-brand{ flex:1 1 280px; max-width:330px; } .bbb-foot-logo{ display:inline-block; background:#fff; border-radius:var(--radius); padding:8px 14px; line-height:0; } .bbb-foot-logo img{ height:40px; width:auto; display:block; } .bbb-foot-tag{ color:rgba(255,255,255,.7); font-size:14px; line-height:1.6; margin:16px 0 8px; } .bbb-foot-since{ color:#fff; font-weight:600; font-size:14px; margin:0 0 16px; } .bbb-foot-contact{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; } .bbb-foot-contact a{ color:rgba(255,255,255,.85); font-size:14px; } .bbb-foot-contact a:hover{ color:var(--c-accent); } .bbb-foot-contact .zmdi{ color:var(--c-accent); margin-right:6px; } .bbb-foot-social{ display:flex; gap:12px; } .bbb-foot-social a{ opacity:.85; transition:opacity .15s; } .bbb-foot-social a:hover{ opacity:1; } .bbb-foot-menu{ flex:1 1 620px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:34px; } .bbb-foot-col{ display:flex; flex-direction:column; gap:8px; min-width:130px; } .bbb-foot-col .bbb-foot-h{ color:#fff!important; font-weight:600; font-size:14px; margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; font-size:12px; opacity:.95; } .bbb-foot-col .bbb-foot-l{ color:rgba(255,255,255,.62)!important; font-size:13px; line-height:1.4; } .bbb-foot-col .bbb-foot-l:hover,.bbb-foot-col .bbb-foot-h:hover{ color:var(--c-accent)!important; } .bbb-foot-contacts .bbb-foot-l .zmdi{ color:var(--c-accent); margin-right:7px; width:14px; text-align:center; } .bbb-foot-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:18px 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; } .bbb-foot-copy{ color:rgba(255,255,255,.55); font-size:13px; } .bbb-foot-cross{ display:flex; flex-wrap:wrap; gap:18px; } .bbb-foot-cross a{ color:rgba(255,255,255,.6); font-size:13px; } .bbb-foot-cross a:hover{ color:#fff; } /* ===== MOBILE ===== */ @media (max-width:768px){ .header_container + .container-fluid{ max-width:100%; } .card-body.card-padding{ padding:20px 18px; } .card-header.ch-alt:not([class*=bgm-]){ padding:16px 18px; font-size:19px; } .bbb-bar{ flex-wrap:wrap; min-height:56px; padding:0 14px; gap:0; } .bbb-logo{ flex:1 1 auto; padding:7px 0; } .bbb-logo img{ height:42px; } /* burger */ .bbb-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; margin-left:auto; cursor:pointer; } .bbb-burger span{ display:block; width:24px; height:2px; margin-left:auto; background:#fff; border-radius:2px; transition:transform .2s,opacity .2s; } .bbb-nav-toggle:checked ~ .bbb-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .bbb-nav-toggle:checked ~ .bbb-burger span:nth-child(2){ opacity:0; } .bbb-nav-toggle:checked ~ .bbb-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* collapsible nav */ .bbb-nav{ flex:1 1 100%; margin-left:0; flex-direction:column; align-items:stretch; max-height:0; overflow:hidden; transition:max-height .3s ease; } .bbb-nav-toggle:checked ~ .bbb-nav{ max-height:82vh; overflow:auto; -webkit-overflow-scrolling:touch; padding-bottom:10px; } .bbb-menu.navbar-nav{ flex-direction:column; width:100%; } .bbb-menu.navbar-nav>li{ width:100%; } .bbb-menu.navbar-nav>li>a, .bbb-menu.navbar-nav>li>a.c-black{ padding:13px 6px!important; border-top:1px solid rgba(255,255,255,.08); white-space:normal; } .bbb-menu.navbar-nav>li>a:after{ display:none; } .bbb-menu .dropdown-menu{ display:block; position:static; float:none; box-shadow:none; border-radius:0; background:rgba(255,255,255,.04); padding:0; } .bbb-menu .dropdown-menu>li>a,.bbb-menu .dropdown-menu>li>a.c-black{ color:rgba(255,255,255,.72)!important; padding:11px 6px 11px 22px!important; } .bbb-menu .dropdown-menu>li>a:hover{ background:rgba(255,255,255,.07); color:#fff!important; } .bbb-lang{ margin:12px 6px 4px; align-self:flex-start; } .bbb-pagehero{ min-height:210px; } .bbb-pagehero:before{ background:linear-gradient(180deg, rgba(8,28,52,.35) 0%, rgba(8,28,52,.8) 100%); } .bbb-pagehero-inner{ padding:0 18px 22px; } .bbb-pagehero-title{ font-size:24px; } .bbb-hero{ min-height:430px; } .bbb-hero:before{ background:linear-gradient(180deg, rgba(8,28,52,.45) 0%, rgba(8,28,52,.85) 100%); } .bbb-hero-inner{ padding:44px 18px; } .bbb-hero-title{ font-size:30px; } .bbb-hero-sub{ font-size:16px; } .bbb-hero-cta .btn{ flex:1 1 auto; text-align:center; } .alert.alert-order{ padding:22px; } [record].col-sm-12>.row{ gap:12px; } [record].col-sm-12>.row>[class*=col-]:first-child{ flex:0 0 96px; } [record].col-sm-12 img{ width:96px!important; height:72px; } [record].col-sm-12 a.f-700{ font-size:16px; } }