/* * Siwar - global stylesheet * * Every selector is scoped under .siwar-site (added to ) and every class * carries the siwar- prefix. Nothing here can reach WooCommerce, Elementor, * plugin widgets, the admin bar or embedded third-party UI. * * The one deliberate exception is .siwar-formwrap, which styles the fields of * whichever form plugin the site uses. That is scoped to the CTA container * only, so a form rendered anywhere else on the site is untouched. */ /* ---------------------------------------------------------------- tokens - */ .siwar-site { --siwar-accent: #0030ff; --siwar-bg: #06070a; --siwar-bg-soft: #08090f; --siwar-bg-card: #0c0c10; --siwar-ink: #ececef; --siwar-head: #f4f4f6; --siwar-soft: #c9c9d1; --siwar-muted: #a2a2ab; --siwar-dim: #8b8b95; --siwar-line-1: rgba(236, 236, 239, 0.07); --siwar-line-2: rgba(236, 236, 239, 0.09); --siwar-line-3: rgba(236, 236, 239, 0.1); --siwar-line-4: rgba(236, 236, 239, 0.14); --siwar-line-5: rgba(236, 236, 239, 0.16); --siwar-line-6: rgba(236, 236, 239, 0.18); --siwar-display: "Alexandria", sans-serif; --siwar-body: "IBM Plex Sans Arabic", "Alexandria", sans-serif; --siwar-mono: "IBM Plex Mono", monospace; --siwar-ease: cubic-bezier(0.16, 1, 0.3, 1); --siwar-pad: clamp(20px, 5vw, 64px); --siwar-wrap: 1440px; --siwar-spot: 340px; --siwar-mx: 50%; --siwar-my: 38%; --siwar-sep: 26px; --siwar-sepn: 7px; /* Language switches. Arabic is the default state. */ --siwar-ar-i: inline; --siwar-en-i: none; --siwar-lh-d: 1.32; --siwar-ls-d: 0em; --siwar-lh-b: 2; --siwar-hatch: repeating-linear-gradient( 135deg, rgba(236, 236, 239, 0.055) 0 6px, rgba(236, 236, 239, 0) 6px 16px ); } .siwar-site.siwar-lang-en { --siwar-ar-i: none; --siwar-en-i: inline; --siwar-lh-d: 1.06; --siwar-ls-d: -0.035em; --siwar-lh-b: 1.7; } /* ------------------------------------------------------------------ base - */ html.siwar-html { overflow-x: clip; } body.siwar-site { margin: 0; background: var(--siwar-bg); color: var(--siwar-ink); font-family: var(--siwar-body); -webkit-font-smoothing: antialiased; } body.siwar-site.siwar-lang-en { font-family: var(--siwar-display); } .siwar-site ::selection { background: var(--siwar-accent); color: #fff; } .siwar-root { position: relative; min-height: 100vh; box-sizing: border-box; } .siwar-root *, .siwar-root *::before, .siwar-root *::after { box-sizing: border-box; } .siwar-root a { color: var(--siwar-ink); text-decoration: none; transition: color 0.3s; } .siwar-root a:hover, .siwar-root a:focus-visible { color: var(--siwar-accent); } .siwar-root :focus-visible { outline: 2px solid var(--siwar-accent); outline-offset: 3px; } .siwar-root img, .siwar-root svg { max-width: 100%; } .siwar-root p { text-wrap: pretty; } /* Language spans. */ .siwar-ar { display: var(--siwar-ar-i); } .siwar-en { display: var(--siwar-en-i); } .siwar-t { display: inline; } .siwar-screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .siwar-skip-link { position: absolute; inset-inline-start: -9999px; top: 8px; z-index: 300; padding: 12px 20px; background: var(--siwar-accent); color: #fff; border-radius: 999px; font-size: 14px; } .siwar-skip-link:focus { inset-inline-start: 16px; color: #fff; } /* -------------------------------------------------------------- keyframes - */ @keyframes siwarMarqA { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes siwarMarqB { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes siwarBloom { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2); } } @keyframes siwarDrift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -13px, 0); } } @keyframes siwarPulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } } @keyframes siwarHint { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } } @keyframes siwarFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------- ambience - */ .siwar-spot, .siwar-noise, .siwar-vignette { position: fixed; inset: 0; pointer-events: none; } .siwar-spot { z-index: 1; background: radial-gradient( circle var(--siwar-spot) at var(--siwar-mx) var(--siwar-my), color-mix(in srgb, var(--siwar-accent) 16%, transparent), transparent 68% ); } .siwar-noise { z-index: 44; background: var(--siwar-noise); opacity: 0.05; mix-blend-mode: overlay; } .siwar-vignette { z-index: 43; background: radial-gradient(125% 92% at 50% 0%, transparent 44%, rgba(0, 0, 0, 0.55) 100%); } /* ----------------------------------------------------------------- cursor - */ .siwar-cursor, .siwar-cursor-dot { position: fixed; left: 0; top: 0; pointer-events: none; display: none; will-change: transform; } .siwar-has-cursor.siwar-cursor-on .siwar-cursor, .siwar-has-cursor.siwar-cursor-on .siwar-cursor-dot { display: block; } .siwar-cursor { z-index: 220; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 1px solid rgba(236, 236, 239, 0.45); border-radius: 50%; transition: width 0.25s var(--siwar-ease), height 0.25s var(--siwar-ease), margin 0.25s var(--siwar-ease), background-color 0.25s, border-color 0.25s; } .siwar-cursor.is-wide { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--siwar-accent); background-color: color-mix(in srgb, var(--siwar-accent) 14%, transparent); } .siwar-cursor-dot { z-index: 221; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--siwar-accent); } /* --------------------------------------------------------- scroll progress - */ .siwar-progress { position: fixed; top: 0; inset-inline: 0; height: 2px; z-index: 80; pointer-events: none; background: rgba(236, 236, 239, 0.06); } .siwar-progress__bar { height: 100%; width: 100%; transform-origin: right center; transform: scaleX(0); background: var(--siwar-accent); } .siwar-lang-en .siwar-progress__bar { transform-origin: left center; } /* ------------------------------------------------------------------- mark - */ /* * The Siwar mark is one SVG drawn twice, each copy clipped to one half of the * diagonal cut, then pushed apart by --siwar-msep. Closing the gap is the * brand's core gesture, so it is a reusable component rather than a one-off. */ .siwar-mark { position: relative; display: block; aspect-ratio: 294 / 220; flex: none; } .siwar-mark__half { position: absolute; inset: 0; } .siwar-mark__half::before { content: ""; position: absolute; inset: 0; background: var(--siwar-mark-white) center / 100% 100% no-repeat; } .siwar-mark--blue .siwar-mark__half::before { background-image: var(--siwar-mark-blue); } .siwar-mark--glow .siwar-mark__half::before { filter: drop-shadow(0 0 26px color-mix(in srgb, var(--siwar-accent) 65%, transparent)) drop-shadow(0 0 80px color-mix(in srgb, var(--siwar-accent) 40%, transparent)); } .siwar-mark__half--a { clip-path: polygon(216.7% -107.3%, -106.9% 207.1%, -224.5% -9.3%, 99.1% -323.7%); transform: translate(calc(var(--siwar-msep, 0%) * -1), calc(var(--siwar-msepy, 0%) * -1)); } .siwar-mark__half--b { clip-path: polygon(216.7% -107.3%, -106.9% 207.1%, 10.7% 423.5%, 334.3% 109.1%); transform: translate(var(--siwar-msep, 0%), var(--siwar-msepy, 0%)); } .siwar-mark--eased .siwar-mark__half { transition: transform 1.5s var(--siwar-ease); } .siwar-mark--quick .siwar-mark__half { transition: transform 0.8s var(--siwar-ease); } /* -------------------------------------------------------------------- nav - */ .siwar-nav { position: fixed; top: 0; inset-inline: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 78px; padding: 0 clamp(18px, 4vw, 56px); background: rgba(6, 7, 10, 0); border-bottom: 1px solid rgba(236, 236, 239, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: background-color 0.45s ease, border-color 0.45s ease, backdrop-filter 0.45s ease; } .siwar-nav.is-stuck { background: rgba(6, 7, 10, 0.78); border-bottom-color: var(--siwar-line-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .siwar-nav__brand { display: flex; align-items: center; gap: 12px; direction: ltr; } .siwar-nav__brand .siwar-mark { width: 31px; --siwar-msep: var(--siwar-sepn, 7px); --siwar-msepy: calc(var(--siwar-sepn, 7px) * 0.5); } .siwar-nav__wordmark, .siwar-nav__logo { display: block; height: 15px; width: auto; opacity: 0.95; } .siwar-nav__logo { height: 24px; } .siwar-nav__center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); margin: 0; padding: 0; list-style: none; } /* The list may come from wp_nav_menu() or from the built-in fallback, so the layout is attached to the container rather than to a class we control. */ .siwar-nav__center ul { display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); margin: 0; padding: 0; list-style: none; } .siwar-nav__center li { list-style: none; margin: 0; } .siwar-nav__center a { font-size: 14px; color: var(--siwar-dim); white-space: nowrap; } .siwar-nav__center a:hover, .siwar-nav__center .current-menu-item > a, .siwar-nav__center .current_page_item > a, .siwar-nav__center .current-menu-parent > a, .siwar-nav__center .current-siwar-item > a { color: var(--siwar-ink); } .siwar-nav__actions { display: flex; align-items: center; gap: 12px; } .siwar-lang { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 3px; background: transparent; border: 1px solid var(--siwar-line-4); border-radius: 999px; cursor: pointer; direction: ltr; } .siwar-lang__opt { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; color: var(--siwar-dim); transition: background-color 0.3s, color 0.3s; } .siwar-lang__opt--en { font-family: var(--siwar-mono); font-size: 11px; letter-spacing: 0.06em; } .siwar-lang__opt.is-on { background: var(--siwar-accent); color: #fff; } .siwar-burger { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; width: 32px; padding: 0; background: transparent; border: 0; cursor: pointer; } .siwar-burger span { display: block; height: 1px; background: var(--siwar-ink); } .siwar-burger span:first-child { width: 26px; } .siwar-burger span:last-child { width: 17px; } /* ---------------------------------------------------------------- overlay - */ .siwar-overlay { position: fixed; inset: 0; z-index: 150; display: none; background: rgba(4, 5, 7, 0.97); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } .siwar-overlay.is-open { display: block; animation: siwarFade 0.4s var(--siwar-ease) both; } .siwar-overlay__close { position: absolute; top: 26px; inset-inline-start: clamp(18px, 4vw, 56px); width: 44px; height: 44px; background: transparent; border: 1px solid var(--siwar-line-4); border-radius: 50%; color: var(--siwar-ink); font-size: 17px; cursor: pointer; z-index: 2; } .siwar-overlay__grid { position: relative; height: 100%; display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; padding: 0 clamp(20px, 6vw, 110px); } .siwar-overlay__links { display: flex; flex-direction: column; gap: clamp(4px, 1vw, 10px); margin: 0; padding: 0; list-style: none; } .siwar-overlay__links li { list-style: none; margin: 0; } .siwar-overlay__links a { font-family: var(--siwar-display); font-weight: 700; font-size: clamp(32px, 5vw, 68px); line-height: var(--siwar-lh-d); letter-spacing: var(--siwar-ls-d); } .siwar-overlay__links li:last-child > a { color: var(--siwar-accent); } .siwar-overlay__aside { display: flex; flex-direction: column; gap: 20px; border-inline-start: 1px solid var(--siwar-line-2); padding-inline-start: clamp(20px, 3vw, 48px); } .siwar-overlay__list { display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; color: var(--siwar-dim); margin: 0; padding: 0; list-style: none; } .siwar-overlay__list a { color: var(--siwar-dim); } .siwar-overlay__contact { display: inline-flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--siwar-dim); direction: ltr; unicode-bidi: isolate; } /* ------------------------------------------------------------------- type - */ .siwar-mono { display: inline-flex; font-family: var(--siwar-mono); direction: ltr; unicode-bidi: isolate; font-size: 10px; letter-spacing: 0.22em; color: var(--siwar-dim); } .siwar-ltr { direction: ltr; unicode-bidi: isolate; } .siwar-h1 { margin: 0; font-family: var(--siwar-display); font-weight: 700; font-size: clamp(38px, 6.2vw, 96px); line-height: var(--siwar-lh-d); letter-spacing: var(--siwar-ls-d); color: var(--siwar-head); text-wrap: balance; } .siwar-h2 { margin: 0; font-family: var(--siwar-display); font-weight: 700; font-size: clamp(32px, 4.6vw, 66px); line-height: var(--siwar-lh-d); letter-spacing: var(--siwar-ls-d); color: var(--siwar-head); } .siwar-h3 { margin: 0; font-family: var(--siwar-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 48px); line-height: var(--siwar-lh-d); letter-spacing: var(--siwar-ls-d); color: var(--siwar-head); } .siwar-lede { margin: 0; max-width: 58ch; font-size: clamp(15px, 1.2vw, 19px); line-height: var(--siwar-lh-b); color: var(--siwar-muted); } .siwar-text { font-size: 15px; line-height: var(--siwar-lh-b); color: var(--siwar-muted); } /* ---------------------------------------------------------------- layout - */ .siwar-main { position: relative; z-index: 2; } .siwar-section { position: relative; padding: clamp(90px, 11vw, 170px) var(--siwar-pad); border-top: 1px solid var(--siwar-line-1); } .siwar-section--flush { padding-inline: 0; } .siwar-section--top { padding: clamp(130px, 14vw, 200px) var(--siwar-pad) clamp(70px, 8vw, 110px); border-top: 0; } .siwar-section--tight { padding: clamp(60px, 8vw, 120px) var(--siwar-pad); } .siwar-wrap { max-width: var(--siwar-wrap); margin: 0 auto; } .siwar-headrow { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 26px; } .siwar-eyebrow { display: flex; align-items: center; gap: 12px; } .siwar-eyebrow__num { display: inline-flex; font-family: var(--siwar-mono); direction: ltr; unicode-bidi: isolate; font-size: 10px; letter-spacing: 0.22em; color: var(--siwar-accent); } .siwar-eyebrow__rule { width: 40px; height: 1px; background: var(--siwar-accent); opacity: 0.55; } .siwar-eyebrow__label { font-size: 13px; color: var(--siwar-muted); } .siwar-more { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--siwar-muted); } .siwar-more__rule { width: 26px; height: 1px; background: var(--siwar-accent); transition: width 0.5s var(--siwar-ease); } .siwar-more:hover .siwar-more__rule { width: 44px; } /* Bordered cell grids: the 1px gap is the parent background showing through. */ .siwar-cells { display: grid; gap: 1px; background: var(--siwar-line-2); border: 1px solid var(--siwar-line-2); } .siwar-cells > * { background: var(--siwar-bg); padding: clamp(22px, 2.4vw, 32px); } .siwar-cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .siwar-cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .siwar-cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .siwar-split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: start; } .siwar-split--wide { grid-template-columns: 1.15fr 0.85fr; } .siwar-split--narrow { grid-template-columns: 0.9fr 1.1fr; } .siwar-split--even { grid-template-columns: 1fr 1fr; } /* --------------------------------------------------------------- buttons - */ .siwar-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border: 0; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: transform 0.4s var(--siwar-ease), box-shadow 0.4s, border-color 0.35s, opacity 0.3s; } .siwar-btn--primary { background: var(--siwar-accent); color: #fff; box-shadow: 0 12px 40px color-mix(in srgb, var(--siwar-accent) 40%, transparent); } .siwar-btn--primary:hover, .siwar-btn--primary:focus-visible { color: #fff; } .siwar-btn--ghost { background: transparent; border: 1px solid var(--siwar-line-6); color: var(--siwar-ink); padding: 0 24px; } .siwar-btn--ghost:hover, .siwar-btn--ghost:focus-visible { border-color: var(--siwar-accent); color: var(--siwar-ink); } .siwar-btn__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .siwar-pill { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border: 1px solid var(--siwar-line-4); border-radius: 999px; font-size: 14px; color: var(--siwar-soft); transition: border-color 0.3s, background-color 0.3s; } .siwar-pill:hover, .siwar-pill:focus-visible { border-color: var(--siwar-accent); background-color: color-mix(in srgb, var(--siwar-accent) 14%, transparent); color: var(--siwar-soft); } .siwar-arrowdot { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--siwar-line-5); border-radius: 50%; color: var(--siwar-muted); flex: none; transition: border-color 0.35s, background-color 0.35s; } .siwar-arrowdot span { width: 12px; height: 1px; background: currentColor; } /* ------------------------------------------------------------ placeholder - */ .siwar-ph { position: relative; border: 1px solid var(--siwar-line-3); overflow: hidden; background: var(--siwar-hatch), var(--siwar-bg-card); display: grid; place-items: center; } .siwar-ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient( 80% 60% at 75% 20%, color-mix(in srgb, var(--siwar-accent) 22%, transparent), transparent 70% ); } .siwar-ph__label { position: relative; font-family: var(--siwar-mono); direction: ltr; font-size: 10px; letter-spacing: 0.2em; color: var(--siwar-dim); text-align: center; padding: 0 20px; } .siwar-ph img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; grid-area: 1 / 1; } .siwar-ph--4x5 { aspect-ratio: 4 / 5; } .siwar-ph--16x10 { aspect-ratio: 16 / 10; } .siwar-ph--16x11 { aspect-ratio: 16 / 11; } /* -------------------------------------------------------------- blog card - */ .siwar-blogcard { display: flex; flex-direction: column; } .siwar-blogcard__meta { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 12.5px; color: var(--siwar-dim); } .siwar-blogcard__cat { color: var(--siwar-accent); } .siwar-blogcard__sep { opacity: 0.5; } .siwar-blogcard__title { display: block; margin: 12px 0 0; font-family: var(--siwar-display); font-weight: 500; font-size: 18.5px; line-height: 1.6; color: var(--siwar-head); } .siwar-bloggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); } /* ------------------------------------------------------------ service card - */ .siwar-svccard { position: relative; display: block; background: var(--siwar-bg); min-height: 310px; overflow: hidden; } .siwar-svccard__gap { position: absolute; inset: 0; transition: transform 0.8s var(--siwar-ease); } .siwar-svccard__gap--a { clip-path: polygon(0 0, 100% 0, 100% 34%, 0 84%); background: linear-gradient(165deg, color-mix(in srgb, var(--siwar-accent) 13%, transparent), transparent 62%); transform: translate3d(0, -10px, 0); } .siwar-svccard__gap--b { clip-path: polygon(0 84%, 100% 34%, 100% 100%, 0 100%); background: linear-gradient(15deg, color-mix(in srgb, var(--siwar-accent) 13%, transparent), transparent 62%); transform: translate3d(0, 10px, 0); } .siwar-svccard__seam { position: absolute; inset: 0; clip-path: polygon(0 84%, 100% 34%, 100% 34.5%, 0 84.5%); background: var(--siwar-accent); opacity: 0.55; transition: opacity 0.6s ease; } .siwar-svccard:hover .siwar-svccard__gap, .siwar-svccard:focus-visible .siwar-svccard__gap { transform: translate3d(0, 0, 0); } .siwar-svccard:hover .siwar-svccard__seam, .siwar-svccard:focus-visible .siwar-svccard__seam { opacity: 0; } .siwar-svccard:hover .siwar-mark, .siwar-svccard:focus-visible .siwar-mark { --siwar-msep: 0%; --siwar-msepy: 0%; } .siwar-svccard:hover .siwar-more__rule, .siwar-svccard:focus-visible .siwar-more__rule { width: 44px; } .siwar-svccard__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; min-height: 310px; padding: clamp(24px, 2.6vw, 38px); } .siwar-svccard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .siwar-svccard__top .siwar-mark { width: 26px; --siwar-msep: 7.06%; --siwar-msepy: 12.98%; } .siwar-svccard__title { font-family: var(--siwar-display); font-weight: 700; font-size: clamp(20px, 2vw, 27px); line-height: 1.5; color: var(--siwar-head); } .siwar-svccard__kicker { font-size: 13.5px; line-height: 1.9; color: var(--siwar-muted); } .siwar-svccard__more { margin-top: auto; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--siwar-soft); } .siwar-svcgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--siwar-line-2); border: 1px solid var(--siwar-line-2); } /* Service index rows. */ .siwar-svcrow { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(14px, 3vw, 44px); align-items: center; padding: clamp(26px, 3vw, 44px) 0; border-bottom: 1px solid var(--siwar-line-3); transition: padding-inline-start 0.5s var(--siwar-ease); } .siwar-svcrow:hover, .siwar-svcrow:focus-visible { padding-inline-start: 18px; color: var(--siwar-ink); } .siwar-svcrow:hover .siwar-arrowdot, .siwar-svcrow:focus-visible .siwar-arrowdot { border-color: var(--siwar-accent); background-color: color-mix(in srgb, var(--siwar-accent) 20%, transparent); } .siwar-svcrow__names { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(10px, 2vw, 26px); } .siwar-svcrow__title { font-family: var(--siwar-display); font-weight: 600; font-size: clamp(22px, 3vw, 44px); line-height: 1.45; color: var(--siwar-head); } .siwar-svcrow__kicker { font-size: 14px; color: var(--siwar-dim); } .siwar-svclist { border-top: 1px solid var(--siwar-line-3); } /* -------------------------------------------------------------------- CTA - */ .siwar-cta { position: relative; padding: clamp(90px, 11vw, 160px) var(--siwar-pad) clamp(70px, 8vw, 110px); border-top: 1px solid var(--siwar-line-1); overflow: hidden; } .siwar-cta__glow { position: absolute; left: 50%; top: 30%; width: min(1100px, 120vw); height: min(1100px, 120vw); transform: translate(-50%, -50%); background: radial-gradient( 50% 50% at 50% 50%, color-mix(in srgb, var(--siwar-accent) 30%, transparent), transparent 66% ); filter: blur(40px); opacity: 0.3; transition: opacity 1.4s ease; pointer-events: none; } .siwar-cta.is-visible .siwar-cta__glow { opacity: 0.8; } .siwar-cta__bloom { position: absolute; left: 50%; top: 30%; width: 520px; height: 520px; transform: translate(-50%, -50%) scale(0.6); border-radius: 50%; background: radial-gradient( 50% 50% at 50% 50%, color-mix(in srgb, var(--siwar-accent) 70%, transparent), transparent 62% ); opacity: 0; pointer-events: none; mix-blend-mode: screen; } .siwar-cta__head { position: relative; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; } .siwar-cta__head .siwar-mark { width: min(240px, 48vw); --siwar-msep: 7.06%; --siwar-msepy: 12.98%; } .siwar-cta.is-visible .siwar-cta__head .siwar-mark { --siwar-msep: 0%; --siwar-msepy: 0%; } .siwar-cta__label { display: inline-flex; font-family: var(--siwar-mono); direction: ltr; unicode-bidi: isolate; font-size: 10px; letter-spacing: 0.26em; color: var(--siwar-accent); opacity: 0; transition: opacity 1s ease 0.5s; } .siwar-cta.is-visible .siwar-cta__label { opacity: 1; } .siwar-cta__title { margin: 0; font-family: var(--siwar-display); font-weight: 700; font-size: clamp(36px, 6.4vw, 100px); line-height: var(--siwar-lh-d); letter-spacing: var(--siwar-ls-d); color: var(--siwar-head); text-wrap: balance; } .siwar-cta__intro { margin: 0; max-width: 52ch; font-size: clamp(15px, 1.2vw, 18px); line-height: var(--siwar-lh-b); color: var(--siwar-muted); } /* ------------------------------------------------------------- form gate - */ .siwar-gate { position: relative; max-width: 920px; margin: clamp(46px, 5vw, 76px) auto 0; } .siwar-gate__half { position: absolute; inset: -1px; z-index: 3; pointer-events: none; border: 1px solid rgba(236, 236, 239, 0.12); opacity: 0; transform: translate(0, 0); transition: transform 1.2s var(--siwar-ease), opacity 0.5s ease; } .siwar-gate__half--a { clip-path: polygon(0 0, 100% 0, 100% 42%, 0 92%); background: linear-gradient(160deg, color-mix(in srgb, var(--siwar-accent) 22%, var(--siwar-bg-soft)), var(--siwar-bg-soft)); } .siwar-gate__half--b { clip-path: polygon(0 92%, 100% 42%, 100% 100%, 0 100%); background: linear-gradient(20deg, color-mix(in srgb, var(--siwar-accent) 22%, var(--siwar-bg-soft)), var(--siwar-bg-soft)); } .siwar-gate.is-closing .siwar-gate__half { opacity: 1; } .siwar-gate.is-closing .siwar-gate__half--a { transform: translate(0, -24%); } .siwar-gate.is-closing .siwar-gate__half--b { transform: translate(0, 24%); } .siwar-gate.is-closed .siwar-gate__half--a, .siwar-gate.is-closed .siwar-gate__half--b { transform: translate(0, 0); opacity: 1; } .siwar-gate__done { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; opacity: 0; transition: opacity 0.8s ease 0.6s; } .siwar-gate.is-closed .siwar-gate__done { display: flex; opacity: 1; } .siwar-gate.is-closed .siwar-gate__body { opacity: 0; } .siwar-gate__done-title { font-family: var(--siwar-display); font-weight: 700; font-size: clamp(24px, 3vw, 40px); line-height: var(--siwar-lh-d); color: var(--siwar-head); } .siwar-gate__done-text { font-size: 15px; color: var(--siwar-muted); } .siwar-gate__body { position: relative; border: 1px solid var(--siwar-line-3); background: rgba(236, 236, 239, 0.015); padding: clamp(22px, 3vw, 42px); transition: opacity 0.6s ease; } .siwar-gate__legend { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .siwar-gate__legend .siwar-mono { letter-spacing: 0.2em; } .siwar-gate__legend-sep { opacity: 0.4; } .siwar-gate__legend-text { font-size: 12.5px; color: var(--siwar-muted); } .siwar-gate__fallback { display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: var(--siwar-lh-b); color: var(--siwar-muted); } .siwar-gate__fallback a { font-size: 20px; direction: ltr; unicode-bidi: isolate; align-self: flex-start; } /* * Form plugin styling. * * Scoped to .siwar-formwrap, which only ever wraps the CTA form. A Contact * Form 7 or WPForms form placed anywhere else on the site keeps its own look. */ .siwar-formwrap input[type="text"], .siwar-formwrap input[type="email"], .siwar-formwrap input[type="tel"], .siwar-formwrap input[type="url"], .siwar-formwrap input[type="number"], .siwar-formwrap select, .siwar-formwrap textarea { width: 100%; padding: 0 18px; height: 52px; background: transparent; border: 0; border-bottom: 1px solid var(--siwar-line-5); color: var(--siwar-ink); font-family: inherit; font-size: 15px; outline: 0; border-radius: 0; transition: border-color 0.3s; } .siwar-formwrap textarea { height: auto; padding: 16px 18px; line-height: 1.9; resize: vertical; } .siwar-formwrap input:focus, .siwar-formwrap select:focus, .siwar-formwrap textarea:focus { border-bottom-color: var(--siwar-accent); } .siwar-formwrap input::placeholder, .siwar-formwrap textarea::placeholder { color: var(--siwar-dim); opacity: 1; } .siwar-formwrap label { display: block; font-size: 12.5px; color: var(--siwar-muted); margin-bottom: 6px; } .siwar-formwrap input[type="submit"], .siwar-formwrap button[type="submit"] { display: inline-flex; align-items: center; gap: 10px; width: auto; height: 52px; padding: 0 30px; margin-top: 26px; border: 0; border-radius: 999px; background: var(--siwar-accent); color: #fff; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: transform 0.35s var(--siwar-ease), box-shadow 0.35s, opacity 0.3s; } .siwar-formwrap input[type="submit"]:hover, .siwar-formwrap button[type="submit"]:hover { box-shadow: 0 12px 40px color-mix(in srgb, var(--siwar-accent) 40%, transparent); } .siwar-formwrap input[type="checkbox"], .siwar-formwrap input[type="radio"] { width: auto; height: auto; accent-color: var(--siwar-accent); } /* ----------------------------------------------------------------- footer - */ .siwar-footer { position: relative; z-index: 2; padding: clamp(60px, 7vw, 100px) var(--siwar-pad) 40px; border-top: 1px solid var(--siwar-line-1); } .siwar-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--siwar-line-1); } .siwar-footer__brand { display: flex; flex-direction: column; gap: 20px; } .siwar-footer__logo { display: block; height: 24px; width: auto; opacity: 0.9; align-self: flex-start; } .siwar-footer__blurb { margin: 0; max-width: 34ch; font-size: 13.5px; line-height: 1.95; color: var(--siwar-muted); } .siwar-footer__social { display: flex; flex-wrap: wrap; gap: 9px; } .siwar-footer__social a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--siwar-line-4); border-radius: 50%; font-family: var(--siwar-mono); font-size: 10px; color: var(--siwar-muted); transition: border-color 0.3s, color 0.3s; } .siwar-footer__social a:hover { border-color: var(--siwar-accent); color: var(--siwar-ink); } .siwar-footer__col { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; } .siwar-footer__col-title { display: inline-flex; font-family: var(--siwar-mono); direction: ltr; unicode-bidi: isolate; font-size: 10px; letter-spacing: 0.2em; color: var(--siwar-dim); margin-bottom: 2px; } .siwar-footer__col li, .siwar-footer__legal li, .siwar-overlay__list li { list-style: none; margin: 0; } .siwar-footer__col a { font-size: 14px; color: var(--siwar-soft); } .siwar-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: 12px; color: var(--siwar-dim); } .siwar-footer__made { display: flex; align-items: center; gap: 8px; } .siwar-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--siwar-accent); flex: none; } /* ------------------------------------------------------------ page basics - */ .siwar-prose { max-width: 72ch; font-size: clamp(15px, 1.15vw, 18px); line-height: var(--siwar-lh-b); color: var(--siwar-muted); } .siwar-prose h2, .siwar-prose h3, .siwar-prose h4 { font-family: var(--siwar-display); color: var(--siwar-head); line-height: 1.45; margin: 2em 0 0.6em; } .siwar-prose h2 { font-size: clamp(24px, 2.6vw, 36px); } .siwar-prose h3 { font-size: clamp(20px, 2vw, 27px); } .siwar-prose a { color: var(--siwar-accent); text-decoration: underline; text-underline-offset: 4px; } .siwar-prose blockquote { margin: 2em 0; padding-inline-start: 24px; border-inline-start: 2px solid var(--siwar-accent); color: var(--siwar-soft); } .siwar-prose img, .siwar-prose figure { max-width: 100%; height: auto; } .siwar-prose code, .siwar-prose pre { font-family: var(--siwar-mono); font-size: 0.9em; background: rgba(236, 236, 239, 0.05); } .siwar-prose pre { padding: 20px; overflow-x: auto; border: 1px solid var(--siwar-line-2); } .siwar-prose ul, .siwar-prose ol { padding-inline-start: 1.4em; } .siwar-prose table { width: 100%; border-collapse: collapse; } .siwar-prose th, .siwar-prose td { padding: 12px; border: 1px solid var(--siwar-line-2); text-align: start; } .siwar-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12.5px; color: var(--siwar-dim); } .siwar-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11px; color: var(--siwar-dim); } .siwar-crumbs a { color: var(--siwar-dim); } .siwar-crumbs__sep { opacity: 0.4; } .siwar-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(40px, 5vw, 70px); } .siwar-pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--siwar-line-4); border-radius: 999px; font-family: var(--siwar-mono); font-size: 12px; color: var(--siwar-muted); transition: border-color 0.3s, background-color 0.3s, color 0.3s; } .siwar-pagination .page-numbers.current, .siwar-pagination .page-numbers:hover { border-color: var(--siwar-accent); background: color-mix(in srgb, var(--siwar-accent) 16%, transparent); color: var(--siwar-ink); } .siwar-search { display: flex; gap: 10px; max-width: 520px; } .siwar-search__field { flex: 1; height: 52px; padding: 0 18px; background: transparent; border: 0; border-bottom: 1px solid var(--siwar-line-5); color: var(--siwar-ink); font-family: inherit; font-size: 15px; outline: 0; border-radius: 0; transition: border-color 0.3s; } .siwar-search__field:focus { border-bottom-color: var(--siwar-accent); } /* ------------------------------------------------------------ page header - */ .siwar-pagehead__title { margin: 26px 0 0; max-width: 20ch; } .siwar-pagehead__lede { margin: 24px 0 0; max-width: 56ch; font-size: clamp(15px, 1.15vw, 18px); line-height: var(--siwar-lh-b); color: var(--siwar-muted); } /* --------------------------------------------------------------- reveals - */ .siwar-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.9s var(--siwar-ease), transform 0.9s var(--siwar-ease); } .siwar-reveal.is-in, .siwar-no-js .siwar-reveal { opacity: 1; transform: none; } /* ----------------------------------------------------------- 404 / empty - */ .siwar-empty { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; max-width: 60ch; } .siwar-empty .siwar-mark { width: min(200px, 44vw); --siwar-msep: 7.06%; --siwar-msepy: 12.98%; } /* ------------------------------------------------------------- responsive - */ @media (max-width: 1100px) { .siwar-split--wide, .siwar-split--narrow, .siwar-split--even, .siwar-cells--2, .siwar-overlay__grid { grid-template-columns: 1fr; } .siwar-cells--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .siwar-nav__center { display: none; } .siwar-footer__top { grid-template-columns: 1fr 1fr; } .siwar-overlay__grid { align-content: center; gap: 40px; } } @media (max-width: 760px) { .siwar-svcgrid, .siwar-bloggrid, .siwar-cells--3, .siwar-cells--4, .siwar-footer__top { grid-template-columns: 1fr; } .siwar-overlay__aside { display: none; } .siwar-nav { height: 68px; } .siwar-svcrow { grid-template-columns: auto 1fr; } .siwar-svcrow .siwar-arrowdot { display: none; } } @media (prefers-reduced-motion: reduce) { .siwar-root *, .siwar-root *::before, .siwar-root *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .siwar-reveal { opacity: 1; transform: none; } } /* Pointer devices only: the custom cursor and hover-driven reveals are meaningless on touch, and hiding the real cursor there is an accessibility problem rather than a flourish. */ @media (hover: none), (pointer: coarse) { .siwar-cursor, .siwar-cursor-dot, .siwar-spot { display: none !important; } } /* ============================================================== utilities - */ /* * A deliberately small set of spacing and measure helpers. They exist so the * templates stay free of inline style attributes, which is what makes a * Content Security Policy with a strict style-src possible on this theme. */ .siwar-mt-24 { margin-top: 24px; } .siwar-mt-56 { margin-top: clamp(36px, 4vw, 56px); } .siwar-mt-70 { margin-top: clamp(40px, 5vw, 70px); } .siwar-mb-24 { margin-bottom: 24px; } .siwar-measure-16 { max-width: 16ch; } .siwar-measure-20 { max-width: 20ch; } .siwar-measure-22 { max-width: 22ch; } .siwar-measure-24 { max-width: 24ch; } .siwar-measure-34 { max-width: 34ch; } .siwar-h2--lead { margin-top: 24px; max-width: 24ch; } .siwar-section--list { padding-top: 0; padding-bottom: clamp(80px, 10vw, 150px); border-top: 0; } .siwar-section--noline { border-top: 0; } .siwar-footer__bottom .siwar-mono { letter-spacing: 0.16em; } .siwar-footer__legal { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; } .siwar-footer__legal a { color: var(--siwar-dim); } /* --------------------------------------------------- shared stat display - */ .siwar-svchero__back { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--siwar-dim); } .siwar-svchero__back span[aria-hidden] { width: 22px; height: 1px; background: currentColor; } .siwar-svcstats { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); margin-top: clamp(36px, 4vw, 56px); padding-top: 26px; border-top: 1px solid var(--siwar-line-2); } .siwar-svcstat { display: flex; flex-direction: column; gap: 8px; } .siwar-svcstat__value { font-family: var(--siwar-display); font-weight: 700; font-size: clamp(26px, 3vw, 42px); line-height: 1.15; color: var(--siwar-head); direction: ltr; unicode-bidi: isolate; } .siwar-svcstat__label { font-size: 13px; color: var(--siwar-dim); } /* ------------------------------------------------------------- work cards - */ .siwar-workcard a { display: block; color: inherit; } .siwar-workcard a:hover { color: inherit; } .siwar-workcard__media { position: relative; display: block; } .siwar-workcard--grid { width: auto; } /* -------------------------------------------------------- featured post - */ .siwar-feature__inner { align-items: center; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--siwar-line-2); color: inherit; gap: clamp(24px, 4vw, 56px); } .siwar-feature__inner:hover { color: inherit; } .siwar-feature__title { margin: 16px 0 0; max-width: 24ch; font-family: var(--siwar-display); font-weight: 700; font-size: clamp(24px, 3vw, 44px); line-height: var(--siwar-lh-d); letter-spacing: var(--siwar-ls-d); color: var(--siwar-head); } .siwar-feature__text { margin: 16px 0 0; max-width: 52ch; font-size: 15px; line-height: var(--siwar-lh-b); color: var(--siwar-muted); } .siwar-bloggrid--spaced { margin-top: clamp(40px, 5vw, 64px); } /* -------------------------------------------------------------- about - */ .siwar-about__story p { max-width: 62ch; } .siwar-about__belief { margin: 12px 0 0; font-size: 15.5px; line-height: 1.85; color: var(--siwar-soft); } .siwar-about__caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: 16px; font-size: 13px; color: var(--siwar-dim); } .siwar-about__room-name { margin-top: 14px; font-family: var(--siwar-display); font-weight: 500; font-size: 19px; color: var(--siwar-ink); } .siwar-about__room-text { margin: 10px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--siwar-muted); } /* ------------------------------------------------------------- contact - */ .siwar-contact__details { display: flex; flex-direction: column; gap: 22px; padding-top: 10px; } .siwar-contact__item { display: flex; flex-direction: column; gap: 6px; } .siwar-contact__item .siwar-mono { letter-spacing: 0.2em; } .siwar-contact__item a { font-size: 18px; direction: ltr; unicode-bidi: isolate; align-self: flex-start; } .siwar-contact__value { font-size: 16px; color: var(--siwar-soft); } /* --------------------------------------------------------- testimonials - */ .siwar-quote { margin: 0; display: flex; flex-direction: column; gap: 20px; height: 100%; } .siwar-quote__text { margin: 0; font-family: var(--siwar-display); font-weight: 500; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.7; color: var(--siwar-soft); } .siwar-quote__by { display: flex; flex-direction: column; gap: 4px; margin-top: auto; } .siwar-quote__name { font-size: 14px; color: var(--siwar-ink); } .siwar-quote__role { font-size: 13px; color: var(--siwar-dim); } /* ------------------------------------------------------- hero imagery - */ .siwar-post__hero, .siwar-project__hero { display: block; width: 100%; height: auto; border: 1px solid var(--siwar-line-3); } /* ------------------------------------------------- bilingual body blocks - */ .siwar-ar-block { display: var(--siwar-ar-i, block); } .siwar-en-block { display: var(--siwar-en-i, none); } /* The language custom properties resolve to `inline`, which is wrong for a block of prose, so restate them for these two containers. */ .siwar-site .siwar-ar-block { display: block; } .siwar-site .siwar-en-block { display: none; } .siwar-site.siwar-lang-en .siwar-ar-block { display: none; } .siwar-site.siwar-lang-en .siwar-en-block { display: block; } /* ------------------------------------------------------------- comments - */ .siwar-comments__list { list-style: none; margin: 0 0 40px; padding: 0; } .siwar-comments .comment-body { padding: 20px 0; border-bottom: 1px solid var(--siwar-line-2); } .siwar-comments .children { list-style: none; padding-inline-start: 24px; } .siwar-gate__admin-note { margin: 8px 0 0; font-size: 13px; color: var(--siwar-dim); } .siwar-404 .siwar-empty { gap: 26px; } /* Optional "Built by" line, switched on from the Siwar dashboard. */ .siwar-footer__credit { font-size: 12px; color: var(--siwar-dim); } .siwar-footer__credit a { color: var(--siwar-dim); border-bottom: 1px solid rgba(236, 236, 239, 0.2); padding-bottom: 1px; } .siwar-footer__credit a:hover { color: var(--siwar-accent); border-bottom-color: var(--siwar-accent); } /* ============================================================ brief form - */ /* * The form from the original design. The chips are real radio inputs with the * control visually hidden, so keyboard navigation, focus and form semantics all * work while the appearance stays exactly as drawn. */ .siwar-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; } .siwar-chip { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border: 1px solid var(--siwar-line-4); border-radius: 999px; background: transparent; color: var(--siwar-ink); font-size: 14px; cursor: pointer; transition: border-color 0.3s, background-color 0.3s, transform 0.3s var(--siwar-ease); } .siwar-chip:hover { border-color: color-mix(in srgb, var(--siwar-accent) 60%, transparent); } .siwar-chip__input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; } .siwar-chip:has(.siwar-chip__input:checked) { border-color: var(--siwar-accent); background-color: color-mix(in srgb, var(--siwar-accent) 18%, transparent); transform: translateY(-2px); } .siwar-chip:has(.siwar-chip__input:focus-visible) { outline: 2px solid var(--siwar-accent); outline-offset: 3px; } /* :has() is widely supported, but a browser without it must still show the selected state — hence this second, equivalent rule on the label text. */ .siwar-chip__input:checked ~ .siwar-chip__label { color: #fff; } .siwar-chip__label { pointer-events: none; } .siwar-brief__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .siwar-brief__field { width: 100%; height: 52px; padding: 0 18px; background: transparent; border: 0; border-bottom: 1px solid var(--siwar-line-5); border-radius: 0; color: var(--siwar-ink); font-family: inherit; font-size: 15px; outline: 0; transition: border-color 0.3s; } /* * A box outline around a field that only has a bottom border reads as a bug. * The focus indicator is a thicker accent underline instead — a clear, * non-colour-only change that still meets the contrast requirement. */ .siwar-brief__field:focus, .siwar-brief__field:focus-visible { outline: none; border-bottom-color: var(--siwar-accent); box-shadow: inset 0 -1px 0 0 var(--siwar-accent); } .siwar-brief__field.is-invalid { border-bottom-color: #ff6b6b; } .siwar-brief__field::placeholder { color: var(--siwar-dim); opacity: 1; } .siwar-brief__textarea { height: auto; margin-top: 16px; padding: 16px 18px; line-height: 1.9; resize: vertical; } /* The honeypot. Kept out of the layout and out of the accessibility tree, but not display:none — some bots skip fields that are display:none. */ .siwar-brief__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .siwar-brief__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; } .siwar-brief__progress { display: flex; align-items: center; gap: 12px; } .siwar-brief__mark { width: 26px; --siwar-msep: 7.06%; --siwar-msepy: 12.98%; } .siwar-brief__progress-text { font-size: 12.5px; color: var(--siwar-dim); } .siwar-brief__error { margin: 18px 0 0; font-size: 14px; color: #ff8f8f; } .siwar-brief__note { margin: 16px 0 0; font-size: 13px; color: var(--siwar-dim); } .siwar-btn.is-busy { opacity: 0.5; pointer-events: none; } .siwar-brief { position: relative; } @media (max-width: 760px) { .siwar-brief__grid { grid-template-columns: 1fr; } .siwar-brief__foot { flex-direction: column; align-items: stretch; } .siwar-brief__foot .siwar-btn { justify-content: center; } } /* Footer widgets. Hidden unless switched on in the dashboard, but styled to match when they are, so the area never looks like a different website. */ .siwar-footer__widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(28px, 4vw, 64px); padding: clamp(32px, 4vw, 48px) 0 0; } .siwar-widget__title { display: inline-flex; font-family: var(--siwar-mono); direction: ltr; unicode-bidi: isolate; font-size: 10px; letter-spacing: 0.2em; color: var(--siwar-dim); margin-bottom: 14px; text-transform: uppercase; } .siwar-widget ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .siwar-widget li { list-style: none; font-size: 14px; color: var(--siwar-soft); } .siwar-widget a { color: var(--siwar-soft); } .siwar-widget a:hover { color: var(--siwar-accent); }