Каріна Захараш
Wedding Photographer
JS removes `.ds-preloader` or adds `.is-loaded` after window.load.
============================================================ */
.ds-preloader {
position: fixed;
inset: 0;
z-index: var(--ds-z-preloader);
background: var(--ds-bg);
display: flex;
align-items: center;
justify-content: center;
transition:
opacity var(--ds-dur-slow) var(--ds-ease-standard),
visibility 0s linear var(--ds-dur-slow);
}
.ds-preloader.is-loaded {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.ds-preloader-mark {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ds-space-4);
}
.ds-preloader-name {
font-family: var(--ds-font-display);
font-size: var(--ds-text-h2);
font-weight: var(--ds-fw-light);
letter-spacing: var(--ds-tracking-wide);
color: var(--ds-text);
opacity: 0;
transform: translateY(12px);
animation: dsPreloaderFadeIn var(--ds-dur-slower) var(--ds-ease-decelerate) 80ms forwards;
}
.ds-preloader-name em {
font-style: italic;
color: var(--ds-accent);
}
.ds-preloader-line {
display: block;
width: 0;
height: 1px;
background: var(--ds-accent);
animation: dsPreloaderLine 1100ms var(--ds-ease-luxury) 240ms forwards;
}
.ds-preloader-meta {
font-family: var(--ds-font-body);
font-size: var(--ds-text-micro);
font-weight: var(--ds-fw-medium);
letter-spacing: var(--ds-tracking-eyebrow);
text-transform: uppercase;
color: var(--ds-text-muted);
opacity: 0;
animation: dsPreloaderFadeIn var(--ds-dur-slow) var(--ds-ease-decelerate) 600ms forwards;
}
@keyframes dsPreloaderFadeIn {
to { opacity: 1; transform: translateY(0); }
}
@keyframes dsPreloaderLine {
to { width: 96px; }
}
/* ============================================================
5. UTILITY ANIMATIONS — subtle, optional
============================================================ */
/* Scroll-down indicator (gentle bob) */
.ds-scroll-indicator {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--ds-space-2);
font-family: var(--ds-font-body);
font-size: var(--ds-text-micro);
letter-spacing: var(--ds-tracking-eyebrow);
text-transform: uppercase;
color: var(--ds-text-muted);
animation: dsScrollBob 2.6s var(--ds-ease-standard) infinite;
}
.ds-scroll-indicator::after {
content: "";
width: 1px;
height: 32px;
background: linear-gradient(
180deg,
var(--ds-accent) 0%,
transparent 100%
);
}
@keyframes dsScrollBob {
0%, 100% { transform: translateY(0); opacity: 0.7; }
50% { transform: translateY(6px); opacity: 1; }
}
/* Soft pulse — for "now booking" badges */
.ds-pulse {
position: relative;
}
.ds-pulse::after {
content: "";
position: absolute;
inset: -4px;
border-radius: inherit;
border: 1px solid var(--ds-accent);
opacity: 0;
animation: dsPulse 2.4s var(--ds-ease-standard) infinite;
}
@keyframes dsPulse {
0% { transform: scale(0.9); opacity: 0.6; }
100% { transform: scale(1.15); opacity: 0; }
}
/* Underline draw on hover (links) */
.ds-link-draw {
position: relative;
display: inline-block;
color: inherit;
}
.ds-link-draw::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background: var(--ds-accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--ds-dur-slow) var(--ds-ease-luxury);
}
.ds-link-draw:hover::after,
.ds-link-draw:focus-visible::after {
transform: scaleX(1);
}
/* Image parallax wrapper (JS sets --parallax-y from scroll) */
.ds-parallax {
overflow: hidden;
}
.ds-parallax-inner {
transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.08);
will-change: transform;
}
/* ============================================================
5b. SCREEN-READER ONLY UTILITY
Visually hides an element while keeping it in the a11y tree.
.sr-only-focusable:focus reveals the element at top-left.
============================================================ */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.sr-only-focusable:focus {
position: fixed;
top: 0;
left: 0;
width: auto;
height: auto;
padding: 8px 16px;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
background: var(--ds-ink, #1a1612);
color: var(--ds-bone, #f4f0e8);
font-family: var(--ds-font-body, sans-serif);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
border: 0;
outline: 2px solid var(--ds-gold-600, #9b7f53);
outline-offset: 0;
z-index: 99999;
}
/* ============================================================
5c. GLOBAL FOCUS-VISIBLE RING
One rule to cover all interactive elements.
Gold ring (#9b7f53 = ds-gold-600) on 2px offset — AA on all
site backgrounds. Pairs with outline: none removal in style.css.
============================================================ */
:focus-visible {
outline: 2px solid var(--ds-gold-600, #9b7f53);
outline-offset: 2px;
}
/* When browser doesn't support :focus-visible, suppress default
only on elements that have explicit :focus styles already.
We do NOT suppress focus globally — only where the gold ring
serves as replacement. */
.booking-form .form-group input:focus,
.booking-form .form-group textarea:focus,
.booking-form .form-group select:focus,
.form-input:focus,
.admin-service-card input:focus,
.admin-service-card textarea:focus,
.admin-testimonial-card input:focus,
.admin-testimonial-card textarea:focus,
.admin-settings-section input:focus,
.admin-about-section textarea:focus,
.admin-about-section input:focus {
outline: none; /* border-color change in style.css is the visible indicator */
}
/* ============================================================
6. REDUCED MOTION — neutralize everything cleanly
Each pattern above has a fallback here. We keep `is-visible`
end-states intact so content is always readable.
============================================================ */
@media (prefers-reduced-motion: reduce) {
[class*="ds-reveal"] {
opacity: 1;
transform: none;
clip-path: none;
transition: none;
}
.ds-photo-card-img img,
.ds-photo-card-overlay,
.ds-photo-card::before,
.ds-photo-card-caption {
transition: none;
}
.ds-photo-card:hover .ds-photo-card-img img,
.ds-photo-card:focus-visible .ds-photo-card-img img {
transform: none;
}
.ds-photo-card-caption {
transform: none;
opacity: 1;
background: linear-gradient(
0deg,
rgba(44, 36, 28, 0.65),
rgba(44, 36, 28, 0) 80%
);
padding-top: var(--ds-space-9);
}
.ds-cursor-dot,
.ds-cursor-ring { display: none; }
.ds-has-cursor,
.ds-has-cursor a,
.ds-has-cursor button { cursor: auto; }
.ds-preloader { transition: opacity 1ms linear, visibility 0s linear 1ms; }
.ds-preloader-name,
.ds-preloader-line,
.ds-preloader-meta {
animation: none;
opacity: 1;
transform: none;
width: 96px;
}
.ds-scroll-indicator,
.ds-pulse::after,
.ds-kinetic-word,
.ds-kinetic-char {
animation: none;
transition: none;
transform: none;
opacity: 1;
}
.ds-link-draw::after { transform: scaleX(1); }
.ds-parallax-inner {
transform: none;
}
*,
*::before,
*::after {
animation-duration: 1ms;
animation-iteration-count: 1;
transition-duration: 1ms;
scroll-behavior: auto;
}
}