/* ========================================================= Toš skupina — začasna stran (coming soon) Plain HTML/CSS/JS, no build step, no dependencies. Design reference: 1920x1080 desktop / 375x1572 mobile ========================================================= */ /* ---------- Fonts ---------------------------------------------------- These are the variable fonts shipped in the design package, subset to latin + latin-ext and converted to woff2 — no static instance is baked in, so the browser interpolates the weight exactly as Illustrator did. Names use wght 500 (Medium), the banner italic uses wght 400 (Regular). -------------------------------------------------------------------- */ @font-face { font-family: "Crimson Pro"; src: url("assets/fonts/crimson-pro-variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Crimson Pro"; src: url("assets/fonts/crimson-pro-italic-variable.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("assets/fonts/open-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { --navy: #262c44; /* hero background */ --navy-deep: #1b2138; /* embossed mark (fallback) */ --ink: #2a3254; /* banner text, rules, separator */ --text: #000000; /* contact text (black in the artboard) */ --cream: #f6efd4; /* marquee band */ --white: #ffffff; --hero-h: clamp(300px, 41vh, 520px); --band-h: 100px; --rule: 2px solid var(--ink); /* artboard strokes are 2 px */ --marquee-speed: 90; /* px per second (read by main.js) */ /* type: exact artboard values (Crimson Pro Medium 22 / Open Sans 17, baselines 22 px apart, 68 px from one company block to the next) */ --fs-name: 22px; --fs-meta: 17px; --leading: 22px; /* baseline-to-baseline inside one block */ --meta-nudge: 1px; /* the two fonts sit differently in the line box */ --entry-gap: 23px; /* Weight — confirmed by the designer and matching the .ai file: Crimson Pro Medium 500 for the company names, Regular 400 for the banner. */ --w-name: 500; --w-banner: 400; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img { display: block; max-width: 100%; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, p { margin: 0; } body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--white); color: var(--text); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* ========================================================= HERO — letterpress mockup image, SVG fallback underneath ========================================================= */ .hero { flex: 0 0 auto; height: var(--hero-h); background-color: var(--navy); background-image: url("assets/img/hero-desktop.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; display: grid; place-items: center; overflow: hidden; } /* Fallback is hidden unless gets .no-hero-img (set by main.js on image error) */ .hero__fallback { display: none; text-align: center; } .no-hero-img .hero { background-image: none; } .no-hero-img .hero::before { /* subtle paper grain so the flat navy does not look empty */ content: ""; position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); } .no-hero-img .hero { position: relative; } .no-hero-img .hero__fallback { display: block; position: relative; } .hero__mark { width: clamp(150px, 13vw, 260px); height: auto; margin: 0 auto; filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, .10)) drop-shadow(0 -1px 1px rgba(0, 0, 0, .6)); } .hero__sub { display: block; margin-top: .9em; color: var(--navy-deep); font-size: clamp(11px, .85vw, 15px); font-weight: 400; letter-spacing: .62em; text-indent: .62em; /* compensate trailing letter-spacing */ text-transform: uppercase; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .12)); } /* ========================================================= MARQUEE — endless rolling banner, CSS-driven Track holds two identical groups; animating to -50% lands exactly one group over, so the loop is seamless. ========================================================= */ .marquee { flex: 0 0 auto; height: var(--band-h); background: var(--cream); display: flex; align-items: center; overflow: hidden; -webkit-mask-image: none; } .marquee__track { display: flex; width: max-content; will-change: transform; animation: marquee-scroll var(--marquee-duration, 26s) linear infinite; } .marquee__group { display: flex; flex: 0 0 auto; } .marquee__item { display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; } .marquee__text { font-family: "Crimson Pro", Georgia, "Times New Roman", serif; font-style: italic; font-weight: var(--w-banner); font-size: 39px; line-height: 1; color: var(--ink); } .marquee__sep { flex: 0 0 auto; width: 11px; height: 8px; margin: 0 58px; /* spacing on both sides = item pitch */ background: var(--ink); } @keyframes marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* ========================================================= CONTACTS Each column is a full-height grid cell, so the vertical rules run the whole way down as they do in the artboard; the text block itself is centred inside its cell. ========================================================= */ .contacts { flex: 1 1 auto; display: flex; align-items: center; min-height: 0; padding: 40px 0; border-top: var(--rule); /* rule directly under the banner */ /* the two vertical rules are painted on the section itself, so they run its full height while the text blocks stay vertically centred */ background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)); background-size: 2px 100%, 2px 100%; background-position: 33.3333% 0, 66.6667% 0; background-repeat: no-repeat; } .contacts__inner { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; } .col { display: grid; align-content: start; justify-content: center; gap: var(--entry-gap); padding: 0 28px; } .entry__name { font-family: "Crimson Pro", Georgia, "Times New Roman", serif; font-weight: var(--w-name); font-size: var(--fs-name); line-height: var(--leading); } .entry__meta { margin-top: var(--meta-nudge); font-size: var(--fs-meta); line-height: var(--leading); } .entry__meta .sep { padding: 0 2px; } .social { display: flex; gap: 16px; } .social img { width: 30px; height: 30px; } .social a:hover { text-decoration: none; opacity: .65; } /* ========================================================= PARTNER LOGO STRIP ========================================================= */ .partners { flex: 0 0 auto; border-top: var(--rule); padding: 26px 40px; } .partners__list { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1590px; margin: 0 auto; } .partners__item img { height: auto; } /* widths taken from the artboard so each logo keeps its optical size */ .partners__item--tos img { width: 145px; } .partners__item--kdl img { width: 94px; } .partners__item--noon img { width: 110px; } .partners__item--bsl img { width: 106px; } .partners__item--parking img { width: 124px; } .partners__item--artos img { width: 125px; } /* ========================================================= MOBILE — single breakpoint ========================================================= */ @media (max-width: 900px) { :root { --hero-h: min(442px, 54vh); /* mobile artboard values */ --fs-name: 20.29px; --fs-meta: 14.76px; --leading: 20.3px; --meta-nudge: 1px; --entry-gap: 21.1px; --pad-x: 46px; /* artboard inset; lines the text up with the logo strip */ } .hero { background-image: url("assets/img/hero-mobile.webp"); } .hero__mark { width: 168px; } .contacts__inner { grid-template-columns: 1fr; } .contacts { padding: 0; background-image: none; } .col { width: 100%; justify-content: stretch; padding: 28px 24px 30px var(--pad-x); /* right side trimmed: text is left-aligned */ } .contacts__inner > .col:nth-child(2) { border-top: var(--rule); padding-bottom: 0; } .contacts__inner > .col:nth-child(3) { padding-top: 22px; } .partners { padding: 44px var(--pad-x) 40px; } .partners__list { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; align-items: center; gap: 44px 20px; /* vrstice logotipov potrebujejo zrak, kot v predlogi */ } .partners__item img { width: auto; } .partners__item--tos img { width: 130px; } .partners__item--kdl img { width: 88px; } .partners__item--noon img { width: 100px; } .partners__item--bsl img { width: 96px; } .partners__item--parking img { width: 112px; } .partners__item--artos img { width: 112px; } } /* the mobile artboard keeps the banner at the same 39 px, so no override here */ /* ========================================================= HI-DPI HERO The mockup is a fine paper grain, so `cover` scaling it up on a retina screen is what makes it look soft. These serve the 2x crop (exported 1:1 from the artboard) to any display that needs it. ========================================================= */ /* A 2896 px browser window on a 1x display needs ~2900 px of image, not 1920 — which is why a DPR-only rule left the hero soft. These pick by width as well. */ @media (min-width: 1500px) { .hero { background-image: url("assets/img/hero-desktop-1440.webp"); } } @media (min-width: 2200px), (min-resolution: 1.5dppx) { .hero { background-image: url("assets/img/hero-desktop-2x.webp"); } } @media (max-width: 900px) and (min-resolution: 1.5dppx) { .hero { background-image: url("assets/img/hero-mobile-2x.webp"); } } @media (max-width: 900px) and (min-resolution: 2.5dppx) { .hero { background-image: url("assets/img/hero-mobile-3x.webp"); } }