/* GENERATED by scripts/build-theme.py on 2026-08-19 — DO NOT EDIT. Sources: assets/tokens.css + theme/assets/css/overrides.css Edit those and re-run the script. */ /* GENERATED by scripts/build-fonts.py — do not edit. Every face the Figma file resolves to, including the ones that appear only inside styleOverrideTable runs (italic display cuts, Montserrat Medium). Family names match Figma verbatim. */ @font-face { font-family: "IM Fell DW Pica SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/imfell-dwpica-sc-400-latin.woff2") format("woff2"); } @font-face { font-family: "IM Fell DW Pica"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/imfell-dwpica-400-latin.woff2") format("woff2"); } @font-face { font-family: "IM FELL English"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/imfell-english-400-latin.woff2") format("woff2"); } @font-face { font-family: "IM FELL English"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/imfell-english-400i-latin.woff2") format("woff2"); } @font-face { font-family: "IM FELL French Canon"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/imfell-frenchcanon-400-latin.woff2") format("woff2"); } @font-face { font-family: "IM FELL Double Pica"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/imfell-doublepica-400-latin.woff2") format("woff2"); } @font-face { font-family: "IM FELL Double Pica"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/imfell-doublepica-400i-latin.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/montserrat-300-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/montserrat-300-latin.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400-latin.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-500-latin.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cormorant-garamond-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cormorant-garamond-700-latin.woff2") format("woff2"); } @font-face { font-family: "Cormorant SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-sc-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Cormorant SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-sc-400-latin.woff2") format("woff2"); } /* Polish diacritics for the IM Fell cuts, which have none except ó/Ó. TWO of them on purpose: the SC fallback keeps all-caps headings consistent, the roman one keeps running text lowercase. Using the SC face for prose renders ą/ć/ę as small capitals. size-adjust matches IM Fell's metrics (cap 0.702em, x-height 0.441em). */ @font-face { font-family: "IM Fell PL Fallback"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-sc-400-latin-ext.woff2") format("woff2"); unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C; size-adjust: 113%; } @font-face { font-family: "IM Fell PL Fallback Roman"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-400-latin-ext.woff2") format("woff2"); unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C; size-adjust: 114%; } /* ========================================================================= Design tokens — Kot bez wyobraźni / Sroki za ogon Extracted from Figma file zkgF9koyLNTisnq00ApCkY, 2026-08-14. SINGLE SOURCE OF TRUTH. Consumed by BOTH: - the static portfolio (srokizaogon.pl) - the Hummingbird child theme (kotbezwyobrazni.pl) If this file ever forks into two copies, the two domains will visibly drift apart. Import it; don't duplicate it. The Figma file publishes no styles or components, so every value below was read off individual nodes and counted. Usage counts are noted so a later reader can tell a deliberate token from a one-off. ========================================================================= */ :root { /* --- Core palette --------------------------------------------------- */ /* Counted across the 6 desktop frames + the shared footer. */ --c-black: #000000; /* 68 uses — dominant text colour */ --c-white: #ffffff; /* 49 uses */ --c-ink: #0e1301; /* 21 uses — near-black with a green cast */ --c-icon: #1e1e1e; /* 16 uses — every VECTOR "Icon" stroke */ --c-sage: #7b927d; /* 13 uses — the one true brand accent */ --c-paper: #f4ede7; /* 6 uses — warm off-white page ground */ /* --- Per-page accents ------------------------------------------------ The design themes each page with its own accent + background tint. Section headings take the accent; block backgrounds take the tint. Keep this structure — it is deliberate, not noise. */ --c-accent-warsztaty: #975cef; /* 7 uses: "dla kogo?", "voucher"… */ --c-tint-warsztaty: #dec8ff; --c-accent-fotografia: #8c0c0c; /* 5 uses: "co otrzymasz?" etc. */ --c-tint-fotografia: #f8e8e8; --c-accent-o-mnie: #8c0c0c; /* was #860909 in Figma — see note */ --c-tint-o-mnie: #ffd9d9; --c-tint-opieka: #d7feda; /* mint; no distinct accent found */ --c-tint-warm: #ffe3a6; /* shared: fotografia + opieka */ /* NOTE: Figma has #860909 on "małgorzata gawlik" (o mnie) and #8c0c0c on the fotografia headings. A 6-unit difference across one channel is hand-drift, not intent — unified to #8c0c0c here. Revert if Gosia says otherwise. EXCLUDED: #d9d9d9 — a single Figma-default placeholder rectangle ("Rectangle 21", warsztaty). Not a token. */ /* --- Semantic aliases ------------------------------------------------- Prefer these in components; swap the mapping, not every call site. */ --c-text: var(--c-black); --c-text-muted: var(--c-ink); --c-bg: var(--c-paper); --c-bg-alt: var(--c-white); --c-accent: var(--c-sage); /* per-page override via [data-page] */ --c-rule: var(--c-ink); /* --- Typography ------------------------------------------------------- Two real families. Everything else in the file is a stray — see the note at the bottom. */ /* IM Fell DW Pica SC — the face Gosia chose. Decision confirmed 2026-08-15 with the tradeoff understood and accepted: IM Fell has NO Polish diacritics except ó/Ó. It is missing all 16 of ą ć ę ł ń ś ź ż Ą Ć Ę Ł Ń Ś Ź Ż, and 19 of its 71 text nodes (27%) contain at least one — including the homepage CTA "skontaktuj się ze mną". Browsers fall back PER GLYPH, so those words render in two faces at once. "IM Fell PL Fallback" is Cormorant SC scoped by unicode-range to exactly those 16 characters, with size-adjust:113% so they match IM Fell's cap height (0.702em vs 0.625em) instead of sitting visibly small. It is defined in site.css and in the theme's overrides.css. Do not remove it — without it the size mismatch is obvious. */ --f-display: "IM Fell DW Pica SC", "IM Fell PL Fallback", "Cormorant SC", Georgia, serif; --f-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; /* IM Fell DW Pica ROMAN — the non-small-caps cut, for the long intro paragraph on each page. Those 8 nodes report fontFamily "Inter" with fontPostScriptName: null, which is Figma saying it could NOT resolve the real font and is substituting Inter to display it. Confirmed by Gosia as IM Fell DW Pica regular. Same cap height as the SC cut (0.702em), so the Polish fallback needs the ROMAN variant though — the small-caps fallback used by --f-display renders ą/ć/ę as small capitals, which is invisible in all-caps headings but glaring in running text. */ --f-prose: "IM Fell DW Pica", "IM Fell PL Fallback Roman", "Cormorant Garamond", Georgia, serif; /* Line heights are Figma "auto" throughout: ~1.22 for Montserrat, 1.25 for the display face. No manual overrides found. */ --lh-display: 1.25; --lh-body: 1.22; --ls-normal: 0; /* letterSpacing is 0 on every single text node */ /* Type scale, in the sizes actually used (px in Figma → rem here at 16px root). Counts show which are load-bearing. */ --t-hero: 8rem; /* 128px — IM Fell English, 1 use (see note) */ --t-h1: 2.5rem; /* 40px — display, 13 uses */ --t-h2: 2rem; /* 32px — display, 2 uses */ --t-h3: 1.5rem; /* 24px — display, 49 uses ← most common */ --t-body-lg: 1.5rem; /* 24px — body, 5 uses */ --t-body: 1.25rem; /* 20px — body, 18 uses ← default body */ --t-body-sm: 1.125rem; /* 18px — body, 7 uses */ --t-caption: 1rem; /* 16px — body 300, 1 use */ --t-fine: 0.9375rem; /* 15px — body, 1 use */ --w-light: 300; --w-regular: 400; /* --- Spacing ---------------------------------------------------------- Sparse: the file leans on absolute positioning, so only auto-layout frames yield real numbers. Treat as a starting rhythm, not gospel. */ --s-gap: 10px; /* itemSpacing, 50 uses — the only gap value */ --s-pad: 12px; /* padding, 176 uses — dominant */ --s-pad-lg: 29px; /* padding, 12 uses */ /* --- Radii ------------------------------------------------------------ 46px on ~54px-tall elements is a pill in practice; 90px likewise on larger blocks. Expressed by intent rather than literal value. */ --r-pill: 999px; /* was 46px (50 uses) / 90px (20 uses) */ --r-soft: 67px; /* 3 uses */ /* --- Elevation -------------------------------------------------------- None. Zero visible effects across all seven frames. The design is completely flat — do not add shadows "to help". */ } /* --- Per-page accent switching ----------------------------------------- Set data-page on ; components read var(--c-accent) unchanged. */ [data-page="warsztaty"] { --c-accent: var(--c-accent-warsztaty); --c-tint: var(--c-tint-warsztaty); } [data-page="fotografia"] { --c-accent: var(--c-accent-fotografia); --c-tint: var(--c-tint-fotografia); } [data-page="o-mnie"] { --c-accent: var(--c-accent-o-mnie); --c-tint: var(--c-tint-o-mnie); } [data-page="opieka"] { --c-accent: var(--c-sage); --c-tint: var(--c-tint-opieka); } /* ========================================================================= STRAY STYLES — flagged, deliberately NOT tokenised. These appear a handful of times each and look like leftovers rather than design intent. Confirm with Gosia before honouring any of them: Inter 400 24/29 — 8 uses. Figma's default UI font. Almost certainly unstyled text that was never set to Montserrat. IM Fell English 400 — 3 uses (20px, 22px, and one 128px). A *different* IM Fell cut from the SC face used everywhere else. IM Fell Double Pica 400 — 1 use, 22px. Third IM Fell variant. Cormorant Garamond 700 — 1 use, 36px. Unrelated family entirely. The 128px IM Fell English node is the only large display type in the file, so --t-hero above is provisional: if that node turns out to be a stray too, the real display ceiling is --t-h1 (40px). ========================================================================= */ /* ========================================================================= FONT LICENSING — all clear, all self-hostable. IM Fell DW Pica SC Igino Marini, 2007 — SIL Open Font License 1.1 Montserrat SIL Open Font License 1.1 Inter SIL Open Font License 1.1 Cormorant Garamond SIL Open Font License 1.1 Every family in the file is OFL and available from Google Fonts, so web embedding is permitted for commercial use. Self-host the woff2 files rather than hotlinking Google — fewer requests, no third-party origin, and it keeps the store's cookie/consent story simple under GDPR. OFL requires shipping the licence text alongside the font files. ========================================================================= */ /* ========================================================================= Kot bez wyobraźni — child theme overrides for Hummingbird. This file is CONCATENATED after assets/tokens.css into the built custom.css. Do not restate token values here; use var(--c-*) / var(--f-*) so the store and srokizaogon.pl cannot drift apart. WHY custom.css and not theme.css: PrestaShop resolves theme assets by first match across [child theme, parent theme, base] (classes/assets/AbstractAssetManager.php). Shipping assets/css/theme.css in the child would REPLACE Hummingbird's 358 KB stylesheet rather than extend it, and the store would lose all of its styling. custom.css is registered separately at priority 1000, i.e. after theme.css — the correct override slot. ========================================================================= */ /* @font-face rules are prepended from assets/fonts.css at build time. */ /* --- map the brand tokens onto Bootstrap 5.3.3 -------------------------- Hummingbird is stock Bootstrap, so almost everything can be restyled by redefining Bootstrap's own custom properties rather than fighting its selectors. Overriding at :root cascades to every component. */ :root { --bs-body-bg: var(--c-paper); --bs-body-color: var(--c-text); --bs-emphasis-color: var(--c-ink); --bs-secondary-color: var(--c-ink); --bs-body-font-family: var(--f-body); --bs-body-font-weight: 300; --bs-body-font-size: 1.0625rem; --bs-body-line-height: var(--lh-body); --bs-primary: var(--c-sage); --bs-link-color: var(--c-ink); --bs-link-hover-color: var(--c-sage); --bs-border-color: var(--c-rule); /* Bootstrap colours anchors with rgba(var(--bs-link-color-rgb), ...) — the RGB TRIPLET, not the hex variable. Overriding only --bs-link-color leaves every link Hummingbird's blue (#0b69f6). These triplets must be kept in step with the hex tokens above; they are the same colours. --c-sage #7b927d -> 123,146,125 --c-ink #0e1301 -> 14,19,1 */ --bs-primary-rgb: 123, 146, 125; --bs-link-color-rgb: 14, 19, 1; --bs-link-hover-color-rgb: 123, 146, 125; --bs-heading-color: var(--c-ink); /* The design is completely flat — zero effects across all seven Figma frames. Neutralise Bootstrap's shadows rather than adding to them. */ --bs-box-shadow: none; --bs-box-shadow-sm: none; --bs-box-shadow-lg: none; /* carried over from the parent theme's custom.css, now token-driven */ --body-bg: var(--c-paper); } body { background: var(--c-bg); } /* --- typography ---------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .product-title, .page-title, .card-title { font-family: var(--f-display); font-weight: var(--w-regular); line-height: var(--lh-display); color: var(--c-ink); text-wrap: balance; } h1, .h1, .page-title { font-size: var(--t-h1); } h2, .h2 { font-size: var(--t-h2); } h3, .h3 { font-size: var(--t-h3); } .prose-serif, .cms-content .rte-content > p:first-of-type { font-family: var(--f-prose); } /* --- buttons: pill, flat, sage ------------------------------------------- */ .btn { --bs-btn-border-radius: var(--r-pill); --bs-btn-font-family: var(--f-display); --bs-btn-box-shadow: none; font-size: var(--t-body-sm); } .btn-primary { --bs-btn-color: var(--c-paper); --bs-btn-bg: var(--c-sage); --bs-btn-border-color: var(--c-sage); --bs-btn-hover-color: var(--c-paper); --bs-btn-hover-bg: var(--c-ink); --bs-btn-hover-border-color: var(--c-ink); --bs-btn-active-color: var(--c-paper); --bs-btn-active-bg: var(--c-ink); --bs-btn-active-border-color: var(--c-ink); --bs-btn-disabled-color: var(--c-paper); --bs-btn-disabled-bg: var(--c-sage); --bs-btn-disabled-border-color: var(--c-sage); } .btn-outline-primary { --bs-btn-color: var(--c-ink); --bs-btn-border-color: var(--c-ink); --bs-btn-hover-color: var(--c-paper); --bs-btn-hover-bg: var(--c-ink); --bs-btn-hover-border-color: var(--c-ink); } /* --- surfaces: flat, hairline rules -------------------------------------- */ .card, .modal-content, .dropdown-menu, .accordion-item, .form-control, .form-select, .input-group-text { box-shadow: none; border-color: var(--c-rule); background-color: var(--c-bg-alt); } .card { --bs-card-bg: var(--c-bg-alt); } /* --- header / footer ----------------------------------------------------- */ .header-nav, .header-top, .footer { background: var(--c-bg); } #header .logo { max-height: 60px; width: auto; } /* --- product listing ----------------------------------------------------- */ .product-miniature .product-title a, .product-miniature .product-title a:hover, .product-title a { font-family: var(--f-display); color: var(--c-ink); text-decoration: none; } .product-miniature .product-title a:hover { color: var(--c-sage); } .breadcrumb a { color: var(--c-ink); } .product-price-and-shipping .price, .product-price .current-price { font-family: var(--f-body); color: var(--c-ink); } /* ========================================================================= Carried over from themes/hummingbird/assets/css/custom.css. Those edits were made directly in the PARENT theme and would be lost the next time Hummingbird is updated. Structural fixes are reproduced verbatim; the colour choices there (--bs-primary #dd9661, red #cd0a0a buttons) are deliberately NOT carried, because the palette now comes from tokens.css. Once this child theme is live, delete the overrides from the parent's custom.css so there is only one place to look. ========================================================================= */ /* an_* modules: footer layout */ .copyright-col-left, .copyright-col-right, .an_trust_badges-container ul, .an_copyright a p { margin-bottom: 15px; align-self: baseline; min-height: 15px; } .an_trust_badges-list { position: absolute; right: 3%; } .an_copyright { position: absolute; left: 3%; } .footer .container { max-width: 100%; padding: 0 5% 0; } @media (max-width: 767px) { .copyright-col-left, .copyright-col-right { width: 100%; min-height: 35px; margin-bottom: 0; } .an_copyright a p { padding-top: 7px; margin-bottom: 0; } .footer { padding-bottom: 0; } .copyright-container .row { flex-direction: column-reverse; } .an_trust_badges-list, .an_copyright { left: 3%; } } .anut-block { background: var(--c-tint-warm); } .anut-block .cls-1 { fill: var(--c-icon); } /* Social icons kept in their brand colours — those are the platforms' own identities, not ours, so they are not tokenised. */ .social-icon-spotify svg { color: #1db954; } .social-icon-youtube svg { color: #ff0000; } .social-icon-instagram svg { color: #fe4a11; } .social-icon-discord svg { color: #5865f2; } /* Product flags: semantic colour, deliberately separate from the brand accent */ .product-flags .discount { color: var(--c-white); background: var(--c-accent-fotografia); } .product-flags .badge:not(.discount) { background-color: var(--c-sage); color: var(--c-white); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* --- footer: every title and every line of text in black ------------------ Hummingbird paints the footer from Bootstrap's body/secondary colours and its link triplet, so a plain `color` is not enough on its own — the states Bootstrap computes with rgba(var(--bs-link-color-rgb), …) would stay blue. Both are set here, scoped to the footer. ------------------------------------------------------------------------- */ #footer, .footer { --bs-body-color: var(--c-black); --bs-secondary-color: var(--c-black); --bs-tertiary-color: var(--c-black); --bs-emphasis-color: var(--c-black); --bs-link-color: var(--c-black); --bs-link-hover-color: var(--c-black); --bs-link-color-rgb: 0, 0, 0; --bs-link-hover-color-rgb: 0, 0, 0; --bs-heading-color: var(--c-black); color: var(--c-black); } #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer .h1, #footer .h2, #footer .h3, #footer .h4, #footer .h5, #footer .h6, #footer .footer-block__title, #footer .block-contact-title, #footer p, #footer li, #footer span, #footer address, #footer dt, #footer dd, #footer .text-body-secondary, #footer .text-muted, #footer .text-secondary, #footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer .cms-page-link, #footer .an_copyright a p { color: var(--c-black); } /* Bootstrap's colour utilities are declared !important, so the newsletter's small print keeps its grey unless matched in kind. */ #footer .text-body-secondary, #footer .text-secondary, #footer .text-muted { color: var(--c-black) !important; }