/* ========================================================================== TECHVACO — vizuální styl nad šablonou inPage AURORA Petrolejová modrá + jantarový akcent + technická typografie -------------------------------------------------------------------------- Všechny barvy a fonty jsou definované jednou v :root níže. Pokud budete chtít odstín změnit, stačí upravit hodnotu proměnné na jednom místě — projeví se všude, kde se používá. DŮLEŽITÉ OMEZENÍ: CSS umí stylovat jen prvky, které v HTML stránky reálně existují. Nemůže vytvořit nový obsah (např. teaser bloky na úvodní stránce) — ty je nutné přidat přes editor inPage. Nasazení: vložte tento soubor ZA obsah stávajícího /styl/1/, aby měl při stejné specificitě přednost. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Public+Sans:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap'); /* Pozn.: pokud @import v poli Vlastní CSS nefunguje, přidejte v administraci do Vzhled → Vlastní kód do místo něj: */ :root{ /* --- barvy --- */ --color-primary: #0E7C9E; /* základní petrolejová modrá */ --color-primary-hover: #0A4A5E; /* tmavší modrá — hover/focus/active */ --color-primary-active: #08324a; /* nejtmavší — border u aktivního stavu */ --color-primary-light: #87BECF; /* světlý tón — focus rámeček formulářů */ --color-primary-pale: #9EDCE6; /* světlý tón — odkazy na tmavém pozadí */ --color-accent: #E8871E; /* jantarová — akcentní linky */ --color-heading: #0A4A5E; /* barva nadpisů */ --color-border: #D6E0E8; /* jemné okraje karet */ /* stíny odvozené z primární barvy (RGB kvůli rgba()) */ --color-primary-rgb: 14, 124, 158; --shadow-focus: rgba(var(--color-primary-rgb), .25); --shadow-focus-wide: rgba(var(--color-primary-rgb), .4); --shadow-card-hover: rgba(10, 74, 94, .35); /* --- fonty --- */ --font-heading: 'Oswald', sans-serif; --font-body: 'Public Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* přepis proměnných samotné šablony AURORA/Bootstrap, ať je vše navázané */ --bs-primary: var(--color-primary); --bs-primary-rgb: var(--color-primary-rgb); --bs-font-sans-serif: var(--font-body); } /* -------------------------------------------------------------------------- A) Nadpisy -------------------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6, .motto__title, .category__title, .product-item__title, .product-page__title, .article-item__title, .footer__heading{ font-family:var(--font-heading); letter-spacing:.01em; color:var(--color-heading); } .motto__title{ color:#fff; text-transform:uppercase; } /* -------------------------------------------------------------------------- B) Odkazy -------------------------------------------------------------------------- */ a, .eshop-menu__link--button, button.navbar__menu-link{ color:var(--color-primary); } a:hover, .eshop-menu__link--button:hover, button.navbar__menu-link:hover{ color:var(--color-primary-hover); } .link-primary{color:var(--color-primary);} .link-primary:hover, .link-primary:focus{color:var(--color-primary-hover);} .border-primary{border-color:var(--color-primary) !important;} /* -------------------------------------------------------------------------- C) Tlačítka -------------------------------------------------------------------------- */ .btn-primary, .comment__reply, .add-comment__button--submit, .product-page__cart-button, .cart-button, .promo-code__submit, .account-button, .minicart__button-cart, .search-form__search-button, .locked__submit, .motto__button-link{ color:#fff; background-color:var(--color-primary); border-color:var(--color-primary); font-family:var(--font-heading); text-transform:uppercase; letter-spacing:.03em; font-weight:500; clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); border-radius:0; } .btn-primary:hover, .comment__reply:hover, .add-comment__button--submit:hover, .product-page__cart-button:hover, .cart-button:hover, .promo-code__submit:hover, .account-button:hover, .minicart__button-cart:hover, .search-form__search-button:hover, .locked__submit:hover, .motto__button-link:hover, .btn-primary:focus, .motto__button-link:focus, .btn-primary:active, .motto__button-link:active{ color:#fff; background-color:var(--color-primary-hover); border-color:var(--color-primary-active); } .btn-primary:focus, .motto__button-link:focus{ box-shadow:0 0 0 .25rem var(--shadow-focus-wide); } .btn-outline-primary, .product-item__cart-button, .cart-button--outline, .cart-button--back, .minicart__button-close, .eshop-filters__submit, .btn-secondary, .btn-default, .navbar__search-button{ color:var(--color-primary); border-color:var(--color-primary); font-family:var(--font-heading); text-transform:uppercase; letter-spacing:.03em; font-weight:500; } .btn-outline-primary:hover, .product-item__cart-button:hover, .cart-button--outline:hover, .cart-button--back:hover, .minicart__button-close:hover, .eshop-filters__submit:hover, .btn-secondary:hover, .btn-default:hover, .navbar__search-button:hover, .btn-outline-primary:active, .product-item__cart-button:active, .cart-button--outline:active, .cart-button--back:active, .minicart__button-close:active, .eshop-filters__submit:active, .btn-secondary:active, .btn-default:active, .navbar__search-button:active{ color:#fff; background-color:var(--color-primary); border-color:var(--color-primary); } /* -------------------------------------------------------------------------- D) Formuláře -------------------------------------------------------------------------- */ .form-control:focus, .add-comment__input:focus, .cart-form__input:focus, .promo-code__input:focus, .account-form__input:focus, .search-form__input:focus, .user-form__input:focus, .locked__input:focus, .navbar__search-input:focus{ border-color:var(--color-primary-light); box-shadow:0 0 0 .25rem var(--shadow-focus); } .form-check-input:checked, .cart-form__check-input:checked, .search-form__form-check-input:checked, .user-form__checkbox-input:checked, .form-check-input:indeterminate{ background-color:var(--color-primary); border-color:var(--color-primary); } .form-range::-webkit-slider-thumb{background-color:var(--color-primary);} .form-range::-moz-range-thumb{background-color:var(--color-primary);} /* -------------------------------------------------------------------------- E) Hlavička -------------------------------------------------------------------------- */ .header{ border-bottom:3px solid var(--color-accent); } .navbar__menu-link{ font-family:var(--font-heading); text-transform:uppercase; font-size:.85rem; letter-spacing:.03em; } .navbar__menu-item.active>.navbar__menu-link{color:var(--color-primary);} .navbar__menu-item.active{border-color:var(--color-primary);} .navbar__cart-items{background-color:var(--color-primary);} /* -------------------------------------------------------------------------- F) Hero / motto (#motive) -------------------------------------------------------------------------- */ #motive{position:relative;} #motive::before{ content:""; position:absolute;inset:0;z-index:1; background:linear-gradient(115deg, rgba(10,74,94,.85) 0%, rgba(10,74,94,.55) 45%, rgba(var(--color-primary-rgb),.25) 100%); pointer-events:none; } #motive .motto{position:relative;z-index:2;} /* -------------------------------------------------------------------------- G) Breadcrumb pruh na podstránkách -------------------------------------------------------------------------- */ .breadcrumb{ background-color:var(--color-primary-hover); padding-top:1.25rem; padding-bottom:1.25rem; } .breadcrumb__link{ color:var(--color-primary-pale); font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; } .breadcrumb__link:hover{color:#fff;} .breadcrumb__current{ color:#fff; font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; } /* -------------------------------------------------------------------------- H) Karty produktů a kategorií -------------------------------------------------------------------------- */ .product-item{ border-radius:0; border-color:var(--color-border); transition:transform .18s ease, box-shadow .18s ease; } .product-item:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -12px var(--shadow-card-hover); border-color:var(--color-primary); } .product-item__title{ font-size:1.05rem; letter-spacing:.01em; } .category__img-wrapper{border-radius:0;} .product-item__icon, .category__icon{color:var(--color-primary);} /* -------------------------------------------------------------------------- I) Patička -------------------------------------------------------------------------- */ .footer{ border-top:3px solid var(--color-accent); } .footer__heading{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--color-heading); } /* -------------------------------------------------------------------------- J) Kontaktní sekce — sociální ikony -------------------------------------------------------------------------- */ .section-contact .social-link:hover, .section-contact .social-icons>.section-cell-item a:hover, .section-contact .social-icons>.section-cell-item .eshop-menu__link--button:hover, .section-contact .social-icons>.section-cell-item button.navbar__menu-link:hover, .section-contact .social-fb:hover,.section-contact .social-fb:focus, .section-contact .social-tw:hover,.section-contact .social-tw:focus, .section-contact .social-instagram:hover,.section-contact .social-instagram:focus, .section-contact .social-tripadvisor:hover,.section-contact .social-tripadvisor:focus, .section-contact .social-youtube:hover,.section-contact .social-youtube:focus, .section-contact .social-icons .section-cell-item:hover, .section-cell-item:hover, .section-cell-item[class*=social]:hover, [class*=social]:hover{ background-color:var(--color-primary); border-color:var(--color-primary); color:#fff; } /* -------------------------------------------------------------------------- K) Cookies lišta -------------------------------------------------------------------------- */ .cookies{background-color:var(--color-primary-hover);color:#fff;} .cookies__link:hover, .cookies__link:focus{background-color:var(--color-primary);color:#fff;} /* -------------------------------------------------------------------------- L) Ikony, ceny, drobnosti -------------------------------------------------------------------------- */ .cart-table__empty-icon, .cart-table__label-icon, .cart-table__delivery-button{color:var(--color-primary);} .locked__icon-wrapper{border-color:var(--color-primary);} .locked__icon{color:var(--color-primary);} .payment-options__link:hover, .payment-options__link:focus{border-color:var(--color-primary);} blockquote, .article-item-wrapper blockquote{border-left-color:var(--color-primary);} /* ========================================================================== CO TOTO CSS NEUMÍ DOŘEŠIT (nutný zásah v editoru inPage) -------------------------------------------------------------------------- 1) "Teaser" bloky na úvodní stránce odkazující na podstránky — nový obsah, ne styl. Přidejte je v editoru inPage, nebo mi potvrďte, že inPage má "vlastní HTML" blok, a připravím kód. 2) Velký nadpis a popisek nad breadcrumb pruhem na podstránkách — breadcrumb sám jsem stylizoval (bod G výše), ale text nad ním je obsah stránky, ne CSS. 3) Cokoliv vykreslené jako obrázek/SVG ikona mimo tento CSS soubor. ========================================================================== */