/*
Theme Name: sveznam.ba — Coming soon
Theme URI: https://sveznam.ba/
Author: StorsenDigital
Author URI: https://storsendigital.com/
Description: Coming-soon page for sveznam.ba. First generated by STORSEN/Domene/tools/generate.py.
Version: 1.0.1
Requires at least: 5.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sveznam-ba
*/

/* layout: orbit · font: sora · mode: light · hue: 60 */

@font-face {
	font-family: "CS Display";
	src: url("assets/fonts/sora-latin-ext-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "CS Display";
	src: url("assets/fonts/sora-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bg: #FAFAF5;
	--ink: #24240F;
	--accent: #71711E;
	--on-accent: #FFFFFF;
	--muted: color-mix(in srgb, var(--ink) 70%, transparent);
	--display: "CS Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--w: 700;
	--ls: -0.03em;
	--lh: 1.04;
	--fs: min(120px, max(16.85cqi, min(56px, 22.68cqi)));
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
	min-height: 100vh;
	min-height: 100svh;
	background: var(--bg);
	color: var(--ink);
	font: 400 17px/1.6 var(--body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
.cs { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.cs-main { container-type: inline-size; position: relative; z-index: 2; width: 100%; }
.cs-label {
	font-family: var(--display);
	font-weight: var(--w);
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--accent);
}
.cs-domain {
	font-family: var(--display);
	font-weight: var(--w);
	font-size: var(--fs);
	line-height: var(--lh);
	letter-spacing: var(--ls);
}
.cs-domain > span { white-space: nowrap; }
.cs-domain .cs-tld { color: var(--accent); }
.cs-lead { color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); max-width: 34em; }

/* StorsenDigital signature — the same on every site, the only crimson */
.sd {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: 14px;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 1;
	color: var(--muted);
	text-decoration: none;
}
.sd svg { width: 13px; height: 13px; flex: none; fill: #CC1227; }
.sd b { font-weight: 600; }
.sd:hover, .sd:focus-visible { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
	.cs-in { animation: cs-in .9s cubic-bezier(.2, .7, .2, 1) both; }
	.cs-domain.cs-in { animation-delay: .08s; }
	.cs-lead.cs-in { animation-delay: .16s; }
	@keyframes cs-in { from { opacity: 0; transform: translateY(14px); } }
}

.cs { display: flex; align-items: center; padding: 72px clamp(20px, 6vw, 96px) 88px; }
.cs .cs-main { width: 60%; }
.cs-label { margin-bottom: 24px; }
.cs-lead { margin-top: 24px; }
.cs-domain .cs-tld { color: var(--accent); }
.cs-art { position: absolute; z-index: 1; right: -10vmin; top: 50%; width: min(78vmin, 680px); height: auto; transform: translateY(-50%); }
.cs-art circle { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.cs-art .o1 { stroke-opacity: .25; }
.cs-art .o2 { stroke-opacity: .45; stroke-dasharray: 4 8; }
.cs-art .o3 { stroke-opacity: .7; }
.cs-art .o4 { fill: var(--accent); stroke: none; }
.cs-art .o5 { fill: var(--accent); stroke: none; }
@media (max-width: 800px) {
	.cs { align-items: flex-end; }
	.cs .cs-main { width: 100%; }
	.cs-art { top: -14vmin; right: -24vmin; width: 92vmin; transform: none; opacity: .5; }
}