/** * YostakaMM visual refresh (2026) * - Typography: Plus Jakarta Sans (headings) + DM Sans (UI/body), via Google Fonts * - Day mode: add class `yostakamm-day` on (enabled on all main pages) * - Dark mode: remove `yostakamm-day` from to restore the previous dark palette * Loaded after assets/sass/style.css */ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..700;1,9..40,400..700&family=Plus+Jakarta+Sans:ital,wght@0,500..800;1,500..800&display=swap"); :root { --ymm-accent: #e11d48; --ymm-accent-deep: #9f1239; --ymm-accent-glow: rgba(225, 29, 72, 0.35); --ymm-gold: #fbbf24; --ymm-radius-btn: 14px; --ymm-radius-card: 16px; } /* Default (no class) = dark surfaces; pages use html.yostakamm-day to opt into light */ html { --ymm-bg-hero: #0c0f14; --ymm-bg-section: #12151c; --ymm-bg-elevated: #181c26; --ymm-text-muted: #a8b0bd; --ymm-border: rgba(255, 255, 255, 0.08); --ymm-shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.35); --ymm-heading-on-dark: #fff; } html.yostakamm-day { --ymm-bg-hero: #f1f5f9; --ymm-bg-section: #ffffff; --ymm-bg-elevated: #f8fafc; --ymm-text-muted: #64748b; --ymm-border: rgba(15, 23, 42, 0.1); --ymm-shadow-soft: 0 12px 40px rgba(15, 23, 42, 0.08); --ymm-heading-on-dark: #0f172a; } /* --- Full-page preloader (legacy theme.css uses flat #202020 + old accent spin) --- */ html.yostakamm-day .preloader { background: linear-gradient(168deg, #f8fafc 0%, #e8eef5 42%, #f1f5f9 100%) !important; } html:not(.yostakamm-day) .preloader { background: radial-gradient(ellipse 90% 55% at 50% 18%, rgba(225, 29, 72, 0.14) 0%, transparent 52%), linear-gradient(168deg, #0c0f14 0%, #141820 100%) !important; } .preloader #particles-background, .preloader #particles-foreground { display: none !important; } html.yostakamm-day .preloader .loader-circle { box-shadow: inset 0 0 0 2px rgba(15, 23, 42, 0.1) !important; } html.yostakamm-day .preloader .loader-line-mask .loader-line { box-shadow: inset 0 0 0 2px rgba(225, 29, 72, 0.5) !important; } html:not(.yostakamm-day) .preloader .loader-circle { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08) !important; } html:not(.yostakamm-day) .preloader .loader-line-mask .loader-line { box-shadow: inset 0 0 0 2px rgba(251, 113, 133, 0.55) !important; } html.yostakamm-day .preloader .vertical-centered-box .content img { filter: drop-shadow(0 6px 16px rgba(15, 23, 42, 0.1)); } @media (prefers-reduced-motion: reduce) { .preloader .loader-line-mask { animation: none !important; -webkit-animation: none !important; opacity: 0.65; } } /* --- Typography (global) --- */ body, button, input, select, textarea, .wpo-site-header #navbar > ul > li > a { font-family: "DM Sans", "Inter", system-ui, sans-serif !important; } h1, h2, h3, h4, h5, h6 { font-family: "Plus Jakarta Sans", "Futura PT", "Inter", system-ui, sans-serif !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ HERO — dark (homepage only has .static-hero) ============================================================ */ html:not(.yostakamm-day) .wpo-hero-slider, html:not(.yostakamm-day) .wpo-hero-style-3, html:not(.yostakamm-day) .static-hero { background: radial-gradient(ellipse 100% 70% at 75% 15%, rgba(225, 29, 72, 0.14) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 10% 80%, rgba(251, 191, 36, 0.06) 0%, transparent 45%), linear-gradient(168deg, var(--ymm-bg-hero) 0%, #141820 40%, var(--ymm-bg-hero) 100%) !important; } html:not(.yostakamm-day) .wpo-hero-slider .slide-inner:before, html:not(.yostakamm-day) .wpo-hero-slider .hero-inner:before, html:not(.yostakamm-day) .wpo-hero-style-3 .slide-inner:before, html:not(.yostakamm-day) .wpo-hero-style-3 .hero-inner:before, html:not(.yostakamm-day) .static-hero .slide-inner:before, html:not(.yostakamm-day) .static-hero .hero-inner:before { background: linear-gradient(95deg, rgba(12, 15, 20, 0.92) 0%, rgba(12, 15, 20, 0.45) 50%, transparent 85%) !important; opacity: 1 !important; } html:not(.yostakamm-day) .static-hero .slide-inner .slide-content .slide-title h2 span, html:not(.yostakamm-day) .static-hero .hero-inner .slide-content .slide-title h2 span, html:not(.yostakamm-day) .wpo-hero-slider .hero-inner .slide-content .slide-title h2 span, html:not(.yostakamm-day) .wpo-hero-slider .slide-inner .slide-content .slide-title h2 span { color: var(--ymm-gold) !important; text-shadow: 0 0 40px rgba(251, 191, 36, 0.25); } html:not(.yostakamm-day) .static-hero .slide-inner .slide-content .slide-sub-title h5, html:not(.yostakamm-day) .static-hero .hero-inner .slide-content .slide-sub-title h5, html:not(.yostakamm-day) .wpo-hero-slider .hero-inner .slide-content .slide-sub-title h5 { color: var(--ymm-accent) !important; } html:not(.yostakamm-day) .static-hero .slide-inner .slide-content .slide-text p, html:not(.yostakamm-day) .static-hero .hero-inner .slide-content .slide-text p { color: var(--ymm-text-muted) !important; } /* --- HERO — day: split layout + light canvas --- */ html.yostakamm-day .static-hero.ymm-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr); grid-template-rows: 1fr; align-items: center; column-gap: clamp(1rem, 4vw, 3.5rem); width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); padding-block: clamp(3rem, 8vw, 5.5rem); height: auto !important; min-height: clamp(580px, 88vh, 920px) !important; background: radial-gradient(ellipse 80% 60% at 90% 20%, rgba(225, 29, 72, 0.08) 0%, transparent 55%), radial-gradient(ellipse 50% 50% at 10% 90%, rgba(59, 130, 246, 0.06) 0%, transparent 50%), linear-gradient(180deg, #f8fafc 0%, var(--ymm-bg-hero) 55%, #eef2f7 100%) !important; } html.yostakamm-day .static-hero.ymm-hero .hero-container { position: relative !important; width: 100% !important; height: auto !important; left: auto !important; top: auto !important; grid-column: 1; grid-row: 1; z-index: 2; } html.yostakamm-day .static-hero.ymm-hero .hero-inner { position: relative !important; width: 100% !important; height: auto !important; left: auto !important; top: auto !important; display: block !important; padding: 0 !important; z-index: 2; } html.yostakamm-day .static-hero.ymm-hero .hero-inner:before { display: none !important; } html.yostakamm-day .static-hero.ymm-hero .static-hero-right { position: relative !important; grid-column: 2; grid-row: 1; inset: auto !important; transform: none !important; max-width: 100% !important; width: min(100%, 440px) !important; height: auto !important; justify-self: center; z-index: 2; } html.yostakamm-day .static-hero.ymm-hero .shape-1, html.yostakamm-day .static-hero.ymm-hero .shape-2, html.yostakamm-day .static-hero.ymm-hero .shape-3, html.yostakamm-day .static-hero.ymm-hero .line-shape-1, html.yostakamm-day .static-hero.ymm-hero .line-shape-2 { grid-column: 1 / -1; grid-row: 1; z-index: 0; pointer-events: none; opacity: 0.45; } html.yostakamm-day .static-hero.ymm-hero .wpo-static-hero-inner { max-width: 36rem; margin-inline: 0; padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem); background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: calc(var(--ymm-radius-card) + 4px); box-shadow: var(--ymm-shadow-soft), 0 1px 0 rgba(255, 255, 255, 0.9) inset; } html.yostakamm-day .static-hero.ymm-hero .ymm-hero-eyebrow { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ymm-accent) !important; } html.yostakamm-day .static-hero.ymm-hero .slide-title { padding-top: 0 !important; } html.yostakamm-day .static-hero.ymm-hero .slide-title h2 { color: var(--ymm-heading-on-dark) !important; font-weight: 800 !important; letter-spacing: -0.03em; } html.yostakamm-day .static-hero.ymm-hero .slide-title h2 span { color: #b45309 !important; text-shadow: none !important; font-weight: 700 !important; } html.yostakamm-day .static-hero.ymm-hero .slide-sub-title h5 { color: var(--ymm-accent) !important; } html.yostakamm-day .static-hero.ymm-hero .slide-text p { color: var(--ymm-text-muted) !important; } html.yostakamm-day .static-hero.ymm-hero .slide-btn { display: flex; flex-wrap: wrap; gap: 0.75rem; } @media (max-width: 991px) { html.yostakamm-day .static-hero.ymm-hero { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0 !important; padding-block: 6rem 2.5rem; text-align: center; } html.yostakamm-day .static-hero.ymm-hero .hero-container, html.yostakamm-day .static-hero.ymm-hero .static-hero-right { grid-column: 1; } html.yostakamm-day .static-hero.ymm-hero .hero-container { grid-row: 1; } html.yostakamm-day .static-hero.ymm-hero .static-hero-right { grid-row: 2; margin-top: 1rem; } html.yostakamm-day .static-hero.ymm-hero .wpo-static-hero-inner { margin-inline: auto; text-align: center; } html.yostakamm-day .static-hero.ymm-hero .slide-btn { justify-content: center; } } /* --- Header --- */ .wpo-header-style-1 .wpo-site-header .sticky-header.sticky-on, .wpo-header-style-2 .wpo-site-header .sticky-header.sticky-on { background: rgba(12, 15, 20, 0.88) !important; -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--ymm-border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } html.yostakamm-day .wpo-header-style-1 .wpo-site-header .sticky-header.sticky-on, html.yostakamm-day .wpo-header-style-2 .wpo-site-header .sticky-header.sticky-on { background: rgba(255, 255, 255, 0.92) !important; border-bottom: 1px solid var(--ymm-border); box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06); } .wpo-header-style-2 .wpo-site-header { background: var(--ymm-bg-hero) !important; } html.yostakamm-day .wpo-header-style-1 .wpo-site-header #navbar > ul > li > a, html.yostakamm-day .wpo-header-style-2 .wpo-site-header #navbar > ul > li > a { color: #1e293b !important; } html.yostakamm-day .wpo-header-style-1 .navbar-brand.site-logo, html.yostakamm-day .wpo-header-style-2 .navbar-brand.site-logo { color: #0f172a !important; } html.yostakamm-day .wpo-site-header #navbar > ul > li > a:hover { color: var(--ymm-accent) !important; } @media (max-width: 991px) { html.yostakamm-day .wpo-site-header #navbar { background: #ffffff !important; box-shadow: 4px 0 32px rgba(15, 23, 42, 0.12); } html.yostakamm-day .wpo-site-header #navbar > ul > li a { color: #1e293b !important; } html.yostakamm-day .wpo-site-header #navbar > ul > li a:hover, html.yostakamm-day .wpo-site-header #navbar > ul > li a.active { color: var(--ymm-accent) !important; } html.yostakamm-day .wpo-site-header #navbar > ul .menu-item-has-children > a { color: #475569 !important; } html.yostakamm-day .wpo-site-header .menu-close { color: #1e293b !important; } } /* --- Primary buttons --- */ .theme-btn, .view-cart-btn { background: linear-gradient(135deg, var(--ymm-accent) 0%, var(--ymm-accent-deep) 100%) !important; border-radius: var(--ymm-radius-btn) !important; box-shadow: 0 4px 18px var(--ymm-accent-glow); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .theme-btn:after, .view-cart-btn:after { border-radius: var(--ymm-radius-btn) !important; background: linear-gradient(135deg, #f43f5e 0%, var(--ymm-accent) 100%) !important; } .theme-btn:hover, .view-cart-btn:hover, .theme-btn:focus, .view-cart-btn:focus { background: linear-gradient(135deg, #f43f5e 0%, var(--ymm-accent) 100%) !important; box-shadow: 0 6px 24px rgba(225, 29, 72, 0.45); transform: translateY(-1px); } .wpo-header-style-1 .wpo-site-header .header-right .theme-btn, .wpo-header-style-1 .wpo-site-header .header-right .view-cart-btn, .wpo-header-style-2 .wpo-site-header .header-right .theme-btn, .wpo-header-style-2 .wpo-site-header .header-right .view-cart-btn { border-radius: var(--ymm-radius-btn) !important; } .wpo-header-style-1 .wpo-site-header .header-right .theme-btn:after, .wpo-header-style-1 .wpo-site-header .header-right .view-cart-btn:after, .wpo-header-style-2 .wpo-site-header .header-right .theme-btn:after, .wpo-header-style-2 .wpo-site-header .header-right .view-cart-btn:after { border-radius: var(--ymm-radius-btn) !important; } .theme-btn-s2 { border-color: var(--ymm-accent) !important; border-radius: var(--ymm-radius-btn) !important; } .theme-btn-s2:hover, .theme-btn-s2:focus { background: linear-gradient(135deg, var(--ymm-accent) 0%, var(--ymm-accent-deep) 100%) !important; } /* --- Section backgrounds --- */ .wpo-about-area, .wpo-about-area-s2 { background: var(--ymm-bg-section) !important; } .wpo-testimonial-section { background: var(--ymm-bg-elevated) !important; } .wpo-testimonial-section .left-shape { background: rgba(0, 0, 0, 0.2) !important; } html.yostakamm-day .wpo-testimonial-section .left-shape { background: rgba(148, 163, 184, 0.15) !important; } .wpo-pricing-section { background: var(--ymm-bg-section) !important; } .wpo-blog-section { background: var(--ymm-bg-elevated) !important; } .wpo-service-area, .wpo-service-area-s2 { background: var(--ymm-bg-section) !important; } html.yostakamm-day .wpo-service-area .wpo-service-wrap .nav-tabs .nav-item .nav-link, html.yostakamm-day .wpo-service-area-s2 .wpo-service-wrap .nav-tabs .nav-item .nav-link { background: #f1f5f9 !important; color: #334155 !important; border-color: transparent !important; } html.yostakamm-day .wpo-service-area .wpo-service-wrap .nav-tabs .nav-item .nav-link.active, html.yostakamm-day .wpo-service-area-s2 .wpo-service-wrap .nav-tabs .nav-item .nav-link.active { background: #ffffff !important; border: 2px solid var(--ymm-border) !important; color: var(--ymm-accent) !important; } html.yostakamm-day .wpo-service-area .wpo-service-wrap .wpo-service-item, html.yostakamm-day .wpo-service-area-s2 .wpo-service-wrap .wpo-service-item { background: #ffffff !important; border: 1px solid var(--ymm-border) !important; box-shadow: var(--ymm-shadow-soft); } html.yostakamm-day .wpo-service-area .wpo-service-wrap .wpo-service-item h2, html.yostakamm-day .wpo-service-area-s2 .wpo-service-wrap .wpo-service-item h2, html.yostakamm-day .wpo-service-area .wpo-service-wrap .wpo-service-item p, html.yostakamm-day .wpo-service-area-s2 .wpo-service-wrap .wpo-service-item p { color: #334155 !important; } html.yostakamm-day .wpo-service-area .wpo-service-wrap .wpo-service-item .icon, html.yostakamm-day .wpo-service-area-s2 .wpo-service-wrap .wpo-service-item .icon { background: #f1f5f9 !important; } html.yostakamm-day .wpo-service-area .wpo-section-title h2, html.yostakamm-day .wpo-service-area-s2 .wpo-section-title h2 { color: #0f172a !important; } html.yostakamm-day .wpo-service-area .wpo-section-title p, html.yostakamm-day .wpo-service-area-s2 .wpo-section-title p { color: var(--ymm-text-muted) !important; } html:not(.yostakamm-day) .wpo-service-area .wpo-section-title h2, html:not(.yostakamm-day) .wpo-service-area-s2 .wpo-section-title h2 { color: #f8fafc !important; } html:not(.yostakamm-day) .wpo-service-area .wpo-section-title p, html:not(.yostakamm-day) .wpo-service-area-s2 .wpo-section-title p { color: #94a3b8 !important; } html.yostakamm-day .wpo-service-single-area { background: var(--ymm-bg-elevated) !important; } html.yostakamm-day .partners-section { background: var(--ymm-bg-elevated) !important; } html.yostakamm-day .partners-section .partners-slider .grid img { filter: grayscale(35%); opacity: 0.92; } /* --- About cards --- */ .wpo-about-area .wpo-about-exprience-wrap .wpo-about-exprience, .wpo-about-area-s2 .wpo-about-exprience-wrap .wpo-about-exprience { background: linear-gradient(165deg, rgba(30, 34, 48, 0.95) 0%, rgba(18, 21, 28, 0.98) 100%) !important; border: 1px solid var(--ymm-border); border-radius: var(--ymm-radius-card) !important; box-shadow: var(--ymm-shadow-soft); } html.yostakamm-day .wpo-about-area .wpo-about-exprience-wrap .wpo-about-exprience, html.yostakamm-day .wpo-about-area-s2 .wpo-about-exprience-wrap .wpo-about-exprience { background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%) !important; } .wpo-about-area .wpo-about-exprience-wrap .wpo-about-exprience h2, .wpo-about-area-s2 .wpo-about-exprience-wrap .wpo-about-exprience h2 { color: var(--ymm-accent) !important; } html.yostakamm-day .wpo-about-area .wpo-about-exprience-wrap .wpo-about-exprience span, html.yostakamm-day .wpo-about-area-s2 .wpo-about-exprience-wrap .wpo-about-exprience span { color: #334155 !important; } /* About: “99% client satisfaction” — solid card, stacked type (fixes dark pseudo + cramped flex) */ .wpo-about-area .wpo-about-exprience-wrap .client.ymm-satisfaction, .wpo-about-area-s2 .wpo-about-exprience-wrap .client.ymm-satisfaction { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 0.35rem !important; max-width: 280px !important; padding: 1.15rem 1.35rem !important; background: linear-gradient(165deg, #ffffff 0%, #f1f5f9 100%) !important; border: 1px solid rgba(15, 23, 42, 0.12) !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important; } .wpo-about-area .wpo-about-exprience-wrap .client.ymm-satisfaction:before, .wpo-about-area .wpo-about-exprience-wrap .client.ymm-satisfaction:after, .wpo-about-area-s2 .wpo-about-exprience-wrap .client.ymm-satisfaction:before, .wpo-about-area-s2 .wpo-about-exprience-wrap .client.ymm-satisfaction:after { display: none !important; } html:not(.yostakamm-day) .wpo-about-area .wpo-about-exprience-wrap .client.ymm-satisfaction, html:not(.yostakamm-day) .wpo-about-area-s2 .wpo-about-exprience-wrap .client.ymm-satisfaction { background: linear-gradient(165deg, #343b4a 0%, #232a36 100%) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important; } .wpo-about-area .wpo-about-exprience-wrap .client.ymm-satisfaction h3, .wpo-about-area-s2 .wpo-about-exprience-wrap .client.ymm-satisfaction h3 { flex-basis: auto !important; margin-right: 0 !important; margin-bottom: 0 !important; font-size: clamp(2.25rem, 4vw, 2.85rem) !important; line-height: 1.05 !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: var(--ymm-accent) !important; } .wpo-about-area .wpo-about-exprience-wrap .client.ymm-satisfaction h3 .odometer, .wpo-about-area-s2 .wpo-about-exprience-wrap .client.ymm-satisfaction h3 .odometer { color: inherit !important; } .wpo-about-area .wpo-about-exprience-wrap .client.ymm-satisfaction p, .wpo-about-area-s2 .wpo-about-exprience-wrap .client.ymm-satisfaction p { flex-basis: auto !important; margin: 0 !important; font-size: 0.78rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #64748b !important; line-height: 1.4 !important; max-width: 14rem; } html:not(.yostakamm-day) .wpo-about-area .wpo-about-exprience-wrap .client.ymm-satisfaction p, html:not(.yostakamm-day) .wpo-about-area-s2 .wpo-about-exprience-wrap .client.ymm-satisfaction p { color: #cbd5e1 !important; } @media (max-width: 575px) { .wpo-about-area .wpo-about-exprience-wrap .client.ymm-satisfaction, .wpo-about-area-s2 .wpo-about-exprience-wrap .client.ymm-satisfaction { position: relative !important; bottom: auto !important; right: auto !important; left: auto !important; margin-top: 1rem !important; max-width: 100% !important; } } .wpo-about-area .wpo-about-title p, .wpo-about-area-s2 .wpo-about-title p { color: var(--ymm-text-muted) !important; } html.yostakamm-day .wpo-about-area .wpo-about-title h2, html.yostakamm-day .wpo-about-area-s2 .wpo-about-title h2 { color: #0f172a !important; } .wpo-about-area .wpo-about-funfact .grid .grid-inner, .wpo-about-area-s2 .wpo-about-funfact .grid .grid-inner { border-radius: 12px; border: 1px solid var(--ymm-border); background: rgba(255, 255, 255, 0.02); transition: border-color 0.2s ease, background 0.2s ease; } html.yostakamm-day .wpo-about-area .wpo-about-funfact .grid .grid-inner, html.yostakamm-day .wpo-about-area-s2 .wpo-about-funfact .grid .grid-inner { background: #ffffff; } .wpo-about-area .wpo-about-funfact .grid .grid-inner:hover, .wpo-about-area-s2 .wpo-about-funfact .grid .grid-inner:hover { border-color: rgba(225, 29, 72, 0.35); background: rgba(225, 29, 72, 0.06); } html.yostakamm-day .wpo-about-area .wpo-about-funfact .grid .grid-inner h3, html.yostakamm-day .wpo-about-area-s2 .wpo-about-funfact .grid .grid-inner h3 { color: var(--ymm-accent) !important; } html.yostakamm-day .wpo-about-area .wpo-about-funfact .grid .grid-inner p, html.yostakamm-day .wpo-about-area-s2 .wpo-about-funfact .grid .grid-inner p { color: #64748b !important; } /* --- Hero stat pill --- */ .static-hero .static-hero-right .project { border-radius: var(--ymm-radius-card) !important; box-shadow: var(--ymm-shadow-soft); border: 1px solid rgba(0, 0, 0, 0.06); } /* --- Pricing cards --- */ .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item { border-radius: var(--ymm-radius-card); border: 1px solid var(--ymm-border); overflow: hidden; box-shadow: var(--ymm-shadow-soft); transition: transform 0.25s ease, border-color 0.25s ease; } html.yostakamm-day .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item { background: #ffffff; } .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item:hover { transform: translateY(-4px); border-color: rgba(225, 29, 72, 0.4); } html.yostakamm-day .wpo-pricing-section .wpo-section-title h2, html.yostakamm-day .wpo-pricing-section .wpo-section-title p { color: #0f172a !important; } /* --- Blog + section titles (day) --- */ html.yostakamm-day .wpo-blog-section .wpo-section-title h2, html.yostakamm-day .wpo-blog-section .wpo-section-title p, html.yostakamm-day .wpo-blog-section .wpo-blog-text h2 a { color: #0f172a !important; } html.yostakamm-day .wpo-blog-section .wpo-blog-text { background: #fff; } html.yostakamm-day .wpo-section-title h2, html.yostakamm-day .wpo-section-title-s2 h2 { color: #0f172a !important; } html.yostakamm-day .wpo-section-title p, html.yostakamm-day .wpo-section-title-s2 p { color: var(--ymm-text-muted) !important; } /* --- Testimonials (day: quote text) --- */ html.yostakamm-day .wpo-testimonial-section .wpo-section-title h2, html.yostakamm-day .wpo-testimonial-section .wpo-section-title p { color: #0f172a !important; } html.yostakamm-day .wpo-testimonial-section .wpo-testimonial-wrap .wpo-testimonial-item .wpo-testimonial-text h4 { color: #0f172a !important; } html.yostakamm-day .wpo-testimonial-section .wpo-testimonial-wrap .wpo-testimonial-item .wpo-testimonial-text p { color: #475569 !important; } html.yostakamm-day .wpo-testimonial-section .wpo-testimonial-wrap .wpo-testimonial-item .wpo-testimonial-text .wpo-testimonial-text-btm h3 { color: #0f172a !important; } html.yostakamm-day .wpo-testimonial-section .wpo-testimonial-wrap .wpo-testimonial-item .wpo-testimonial-text .wpo-testimonial-text-btm h3 span { color: #64748b !important; } html.yostakamm-day .wpo-testimonial-section .testimonial-right .point-bg { opacity: 0.35; } /* --- Pricing (day: price copy + borders) --- */ html.yostakamm-day .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .wpo-pricing-text h2 { color: #0f172a !important; } html.yostakamm-day .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .wpo-pricing-text h2 span { color: #64748b !important; } html.yostakamm-day .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .wpo-pricing-text p { color: var(--ymm-text-muted) !important; border-bottom-color: rgba(15, 23, 42, 0.12) !important; } html.yostakamm-day .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text ul li { color: #475569 !important; } html.yostakamm-day .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a { border-color: rgba(225, 29, 72, 0.35) !important; color: var(--ymm-accent) !important; } /* --- Day: primary buttons + Themify arrow (explicit; avoids font/inherit glitches) --- */ html.yostakamm-day .theme-btn:before, html.yostakamm-day .view-cart-btn:before { color: #fff !important; font-family: "themify" !important; } html.yostakamm-day .theme-btn:hover:before, html.yostakamm-day .view-cart-btn:hover:before, html.yostakamm-day .theme-btn:focus:before, html.yostakamm-day .view-cart-btn:focus:before { color: #fff !important; } /* --- Day: testimonial carousel arrows (Slick) --- */ html.yostakamm-day .wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow { display: inline-flex !important; align-items: center; justify-content: center; line-height: 1 !important; width: 48px !important; height: 48px !important; background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.12) !important; color: #334155 !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } html.yostakamm-day .wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow:before { font-family: "themify" !important; font-size: 15px !important; line-height: 1 !important; color: #334155 !important; opacity: 1 !important; } html.yostakamm-day .wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow:hover, html.yostakamm-day .wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow:focus { background: var(--ymm-accent) !important; border-color: transparent !important; color: #fff !important; } html.yostakamm-day .wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow:hover:before, html.yostakamm-day .wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow:focus:before { color: #fff !important; } html.yostakamm-day .wpo-testimonial-section .wpo-testimonial-wrap .slick-dots li button { background: #cbd5e1 !important; } html.yostakamm-day .wpo-testimonial-section .wpo-testimonial-wrap .slick-dots li.slick-active button { background: var(--ymm-accent) !important; } /* --- Day: blog / news carousel (Owl) + card meta --- */ html.yostakamm-day .wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"] { background: #ffffff !important; color: #334155 !important; border: 1px solid rgba(15, 23, 42, 0.12) !important; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08); line-height: 58px !important; } html.yostakamm-day .wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"] i { color: inherit !important; } html.yostakamm-day .wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"].owl-next:hover, html.yostakamm-day .wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"].owl-prev:hover { background: var(--ymm-accent) !important; color: #fff !important; border-color: transparent !important; } html.yostakamm-day .wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text ul li { background: #e2e8f0 !important; color: #475569 !important; } html.yostakamm-day .wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text h2 a:hover { color: var(--ymm-accent) !important; } html.yostakamm-day .wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text a.details { color: var(--ymm-accent) !important; } html.yostakamm-day .wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text a.details:before { color: var(--ymm-accent) !important; } html.yostakamm-day .wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text a.details:hover { color: var(--ymm-accent-deep) !important; } /* Mobile drawer: submenu chevron */ @media (max-width: 991px) { html.yostakamm-day .wpo-site-header #navbar > ul .menu-item-has-children > a:before { color: #94a3b8 !important; } } /* --- Footer --- */ .wpo-site-footer, .wpo-site-footer-s2 { background-color: #0a0c10 !important; border-top: 1px solid var(--ymm-border); } html.yostakamm-day .wpo-site-footer, html.yostakamm-day .wpo-site-footer-s2 { background-color: #f1f5f9 !important; } html.yostakamm-day .wpo-site-footer .lower-footer .copyright, html.yostakamm-day .wpo-site-footer-s2 .lower-footer .copyright { color: #64748b !important; } html.yostakamm-day .wpo-site-footer .lower-footer .row .separator, html.yostakamm-day .wpo-site-footer-s2 .lower-footer .row .separator { background: var(--ymm-border) !important; } .wpo-site-footer .upper-contact-area .contact-grids, .wpo-site-footer-s2 .upper-contact-area .contact-grids { background: linear-gradient(135deg, var(--ymm-accent) 0%, #be123c 100%) !important; border-radius: var(--ymm-radius-card); box-shadow: 0 12px 40px var(--ymm-accent-glow); } .wpo-section-title h2, .wpo-section-title-s2 h2 { letter-spacing: -0.02em; } /* --- Facebook vouch block (separate from blog; was nested incorrectly) --- */ .ymm-fb-vouch { background: var(--ymm-bg-elevated); position: relative; overflow: visible; } .ymm-fb-vouch .wpo-section-title p { max-width: 36rem; margin-left: auto; margin-right: auto; } .ymm-fb-vouch-frame { margin-top: 1.75rem; margin-left: auto; margin-right: auto; width: fit-content; max-width: 100%; padding: 0; border-radius: calc(var(--ymm-radius-card) + 4px); overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; box-shadow: var(--ymm-shadow-soft); border: 1px solid var(--ymm-border); background: #ffffff; line-height: 0; } html:not(.yostakamm-day) .ymm-fb-vouch-frame { background: #1a1d24; } /* Match Facebook plugin (width=550 in embed URL). Height ~900px — enough for this post without a large empty tail. */ .ymm-fb-vouch-iframe { width: 550px; max-width: none; height: 900px; min-height: 900px; display: block; margin: 0; } @media (max-width: 575px) { .ymm-fb-vouch-frame { padding-bottom: 6px; } } /* --- Latest news: static cards (replaces empty Owl “Future Content”) --- */ .ymm-news-section .ymm-news-grid { position: relative; z-index: 2; margin-top: 0.5rem; } .ymm-news-card { height: 100%; display: flex; flex-direction: column; border-radius: var(--ymm-radius-card); overflow: hidden; border: 1px solid var(--ymm-border); box-shadow: var(--ymm-shadow-soft); background: #ffffff; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } html:not(.yostakamm-day) .ymm-news-card { background: linear-gradient(180deg, #2c2c2c 0%, #222 100%); border-color: rgba(255, 255, 255, 0.08); } .ymm-news-card:hover { transform: translateY(-3px); border-color: rgba(225, 29, 72, 0.35); box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12); } html:not(.yostakamm-day) .ymm-news-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } .ymm-news-grid .wpo-blog-img { margin-bottom: 0 !important; aspect-ratio: 16 / 10; flex-shrink: 0; } .ymm-news-grid .wpo-blog-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ymm-news-grid .wpo-blog-item .wpo-blog-text { padding: 1.25rem 1.35rem 1.5rem !important; flex: 1; display: flex; flex-direction: column; } .ymm-news-grid .wpo-blog-item .wpo-blog-text h2 { margin-top: 0.5rem !important; margin-bottom: 0.75rem !important; font-size: 1.15rem !important; line-height: 1.35 !important; } .ymm-news-grid .wpo-blog-item .wpo-blog-text a.details { margin-top: auto; align-self: flex-start; } html.yostakamm-day .ymm-news-grid .wpo-blog-item .wpo-blog-text h2 a { color: #0f172a !important; } html:not(.yostakamm-day) .ymm-news-grid .wpo-blog-item .wpo-blog-text h2 a { color: #fff !important; } html:not(.yostakamm-day) .ymm-news-grid .wpo-blog-item .wpo-blog-text ul li { background: #3c3c3c !important; color: #f1f5f9 !important; } html.yostakamm-day .ymm-news-section .wpo-section-title p { color: var(--ymm-text-muted) !important; } /* --- Inner pages: guides, calculator, payments (wpo-service-single-area) — day --- */ html.yostakamm-day .wpo-service-single-area h1, html.yostakamm-day .wpo-service-single-area h2, html.yostakamm-day .wpo-service-single-area h3, html.yostakamm-day .wpo-service-single-area h4, html.yostakamm-day .wpo-service-single-area h5, html.yostakamm-day .wpo-service-single-area h6 { color: #0f172a !important; } html.yostakamm-day .wpo-service-single-area p, html.yostakamm-day .wpo-service-single-area li, html.yostakamm-day .wpo-service-single-area td, html.yostakamm-day .wpo-service-single-area th, html.yostakamm-day .wpo-service-single-area .list-widget, html.yostakamm-day .wpo-service-single-area .list-widget p { color: #475569 !important; } html.yostakamm-day .wpo-service-single-area a:not(.theme-btn):not(.btn) { color: var(--ymm-accent) !important; } html.yostakamm-day .wpo-service-single-area .wpo-section-title h2 { color: #0f172a !important; } html.yostakamm-day .wpo-service-single-area .wpo-section-title p { color: var(--ymm-text-muted) !important; } html.yostakamm-day .wpo-service-single-area .wpo-service-single-title h3 { color: #0f172a !important; } html:not(.yostakamm-day) .wpo-service-single-area .wpo-service-single-title h3 { color: #f8fafc !important; } html.yostakamm-day .wpo-service-single-area .form-control, html.yostakamm-day .wpo-service-single-area select, html.yostakamm-day .wpo-service-single-area input[type="text"], html.yostakamm-day .wpo-service-single-area input[type="number"], html.yostakamm-day .wpo-service-single-area textarea { color: #0f172a !important; background-color: #ffffff !important; border-color: rgba(15, 23, 42, 0.18) !important; } html.yostakamm-day .wpo-service-single-area .ymm-field-hint, html.yostakamm-day .wpo-service-single-area small.form-text { color: #64748b !important; } html.yostakamm-day .wpo-service-single-area #result h4, html.yostakamm-day .wpo-service-single-area #result h4 strong { color: #0f172a !important; } html.yostakamm-day .wpo-service-single-area #result p { color: #475569 !important; } html.yostakamm-day .wpo-service-single-area #payment-suggestion p, html.yostakamm-day .wpo-service-single-area #payment-suggestion li { color: #475569 !important; } html.yostakamm-day .wpo-service-single-area #payment-suggestion a { color: var(--ymm-accent) !important; } html.yostakamm-day .wpo-service-single-area .btn-primary { background: linear-gradient(135deg, var(--ymm-accent) 0%, var(--ymm-accent-deep) 100%) !important; border: none !important; color: #fff !important; } /* Inner pages — night (no yostakamm-day): keep list body readable on charcoal */ html:not(.yostakamm-day) .wpo-service-single-area .list-widget ul li, html:not(.yostakamm-day) .wpo-service-single-area p, html:not(.yostakamm-day) .wpo-service-single-area li { color: #d1d5db !important; } /* --- Supported games & similar: wpo-work-area (day) --- */ html.yostakamm-day .wpo-work-area, html.yostakamm-day .wpo-work-area-s2 { background: var(--ymm-bg-section) !important; } html.yostakamm-day .wpo-work-area .wpo-work-wrap .wpo-work-item, html.yostakamm-day .wpo-work-area-s2 .wpo-work-wrap .wpo-work-item { background: #ffffff !important; border: 1px solid var(--ymm-border) !important; box-shadow: var(--ymm-shadow-soft); } html.yostakamm-day .wpo-work-area .wpo-work-wrap .wpo-work-item ul li.date, html.yostakamm-day .wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.date { color: #0f172a !important; } html.yostakamm-day .wpo-work-area .wpo-work-wrap .wpo-work-item ul li.date span, html.yostakamm-day .wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.date span { color: #64748b !important; } html.yostakamm-day .wpo-work-area .wpo-work-wrap .wpo-work-item ul li.position h3, html.yostakamm-day .wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.position h3 { color: #0f172a !important; } html.yostakamm-day .wpo-work-area .wpo-work-wrap .wpo-work-item ul li.position span, html.yostakamm-day .wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.position span { color: #64748b !important; } html.yostakamm-day .wpo-work-area .wpo-work-wrap .wpo-work-item ul li.link a, html.yostakamm-day .wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.link a { color: var(--ymm-accent) !important; } html.yostakamm-day .wpo-work-area .wpo-section-title h2, html.yostakamm-day .wpo-work-area-s2 .wpo-section-title h2 { color: #0f172a !important; } html.yostakamm-day .wpo-work-area .wpo-section-title p, html.yostakamm-day .wpo-work-area-s2 .wpo-section-title p { color: var(--ymm-text-muted) !important; } /* --- “NEW” badge (supported games) — replaces inline red --- */ .wpo-work-area .ymm-badge-new, .wpo-work-area-s2 .ymm-badge-new { display: inline-block; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 6px; background: linear-gradient(135deg, var(--ymm-accent) 0%, var(--ymm-accent-deep) 100%); color: #fff !important; vertical-align: middle; } html:not(.yostakamm-day) .wpo-work-area, html:not(.yostakamm-day) .wpo-work-area-s2 { background: var(--ymm-bg-section) !important; } html:not(.yostakamm-day) .wpo-work-area .wpo-work-wrap .wpo-work-item, html:not(.yostakamm-day) .wpo-work-area-s2 .wpo-work-wrap .wpo-work-item { background: #161a22 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } html:not(.yostakamm-day) .wpo-work-area .wpo-work-wrap .wpo-work-item ul li.date, html:not(.yostakamm-day) .wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.date, html:not(.yostakamm-day) .wpo-work-area .wpo-work-wrap .wpo-work-item ul li.position h3, html:not(.yostakamm-day) .wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.position h3 { color: #f8fafc !important; } html:not(.yostakamm-day) .wpo-work-area .wpo-work-wrap .wpo-work-item ul li.date span, html:not(.yostakamm-day) .wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.date span, html:not(.yostakamm-day) .wpo-work-area .wpo-work-wrap .wpo-work-item ul li.position span, html:not(.yostakamm-day) .wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.position span { color: #94a3b8 !important; } html:not(.yostakamm-day) .wpo-work-area .wpo-work-wrap .wpo-work-item ul li.link a, html:not(.yostakamm-day) .wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.link a { color: #fda4af !important; } html:not(.yostakamm-day) .wpo-work-area .wpo-section-title h2, html:not(.yostakamm-day) .wpo-work-area-s2 .wpo-section-title h2 { color: #f8fafc !important; } html:not(.yostakamm-day) .wpo-work-area .wpo-section-title p, html:not(.yostakamm-day) .wpo-work-area-s2 .wpo-section-title p { color: #94a3b8 !important; } /* --- Guide: table of contents, CTA, callout (Gmail / Facebook / contract) --- */ .ymm-guide-toc { margin: 1rem 0 1.25rem; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--ymm-border); background: rgba(241, 245, 249, 0.85); } html:not(.yostakamm-day) .ymm-guide-toc { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); } .ymm-guide-toc__title { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ymm-accent); margin: 0 0 0.5rem; } .ymm-guide-toc ul { margin: 0; padding: 0 0 0 1.1rem; color: var(--ymm-text-muted); font-size: 0.9rem; } .ymm-guide-toc a { font-weight: 600; color: var(--ymm-heading-on-dark) !important; } .ymm-guide-toc a:hover { color: var(--ymm-accent) !important; } html.yostakamm-day .ymm-guide-toc a { color: #0f172a !important; } .ymm-guide-cta { background: linear-gradient(135deg, rgba(225, 29, 72, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%); border-top: 1px solid var(--ymm-border); border-bottom: 1px solid var(--ymm-border); } .ymm-guide-cta__inner { max-width: 36rem; margin: 0 auto; text-align: center; padding: 1.5rem 1rem; } .ymm-guide-cta__inner h2 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 1.35rem; margin-bottom: 0.5rem; color: var(--ymm-heading-on-dark) !important; } .ymm-guide-cta__inner p { color: var(--ymm-text-muted); margin-bottom: 1rem; } .ymm-guide-callout { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 12px; border-left: 4px solid #fbbf24; background: rgba(254, 243, 199, 0.55); color: #0f172a !important; } html:not(.yostakamm-day) .ymm-guide-callout { background: rgba(251, 191, 36, 0.12); color: #f8fafc !important; border-left-color: #fbbf24; } .ymm-trust-note { background: var(--ymm-bg-section) !important; border-top: 1px solid var(--ymm-border); } .ymm-trust-note .ymm-trust-note__list { max-width: 40rem; margin: 0 auto; padding: 0 1rem 2rem; color: #475569; } html:not(.yostakamm-day) .ymm-trust-note .ymm-trust-note__list { color: #cbd5e1; } .ymm-trust-note .ymm-trust-note__list li { margin-bottom: 0.5rem; } html.yostakamm-day .ymm-trust-note .wpo-section-title h2 { color: #0f172a !important; } html.yostakamm-day .ymm-trust-note .wpo-section-title p { color: var(--ymm-text-muted) !important; } html:not(.yostakamm-day) .ymm-trust-note .wpo-section-title h2 { color: #f8fafc !important; } html:not(.yostakamm-day) .ymm-trust-note .wpo-section-title p { color: #94a3b8 !important; } /* --- Guide / article pages: wpo-blog-pg-section (Gmail, Facebook guides) --- */ html.yostakamm-day .wpo-blog-pg-section { background: var(--ymm-bg-section) !important; } html.yostakamm-day .wpo-blog-pg-section .wpo-blog-content { background: #ffffff; border: 1px solid var(--ymm-border); border-radius: var(--ymm-radius-card); box-shadow: var(--ymm-shadow-soft); padding: clamp(1rem, 3vw, 1.75rem); overflow: hidden; } html.yostakamm-day .wpo-blog-pg-section .entry-media { margin-bottom: 1rem; } html.yostakamm-day .wpo-blog-pg-section .entry-media img { border-radius: 14px; width: 100%; height: auto; display: block; } html.yostakamm-day .wpo-blog-pg-section .entry-meta ul li, html.yostakamm-day .wpo-blog-pg-section .entry-meta ul li a { color: #64748b !important; } html.yostakamm-day .wpo-blog-pg-section .entry-details header h1 { color: #0f172a !important; } html.yostakamm-day .wpo-blog-pg-section .entry-details header p { color: #475569 !important; } html.yostakamm-day .wpo-blog-pg-section .wpo-service-single-area { background: transparent !important; } html.yostakamm-day .wpo-blog-pg-section .wpo-service-single-wrap { margin-bottom: 1rem; } html.yostakamm-day .wpo-blog-pg-section .wpo-service-single-item.list-widget { background: #f8fafc !important; border: 1px solid var(--ymm-border) !important; border-radius: 14px !important; padding: 1.15rem 1.25rem !important; } html.yostakamm-day .wpo-blog-pg-section .wpo-service-single-item.list-widget h2 { color: #0f172a !important; font-size: 1.2rem !important; margin-top: 0 !important; } html.yostakamm-day .wpo-blog-pg-section .wpo-service-single-item.list-widget p, html.yostakamm-day .wpo-blog-pg-section .wpo-service-single-item.list-widget li { color: #475569 !important; } html:not(.yostakamm-day) .wpo-blog-pg-section { background: var(--ymm-bg-section) !important; } html:not(.yostakamm-day) .wpo-blog-pg-section .wpo-blog-content { background: linear-gradient(168deg, #1a1e28 0%, #141820 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--ymm-radius-card); box-shadow: var(--ymm-shadow-soft); padding: clamp(1rem, 3vw, 1.75rem); } html:not(.yostakamm-day) .wpo-blog-pg-section .entry-details header h1, html:not(.yostakamm-day) .wpo-blog-pg-section .wpo-service-single-item.list-widget h2 { color: #f8fafc !important; } html:not(.yostakamm-day) .wpo-blog-pg-section .entry-details header p, html:not(.yostakamm-day) .wpo-blog-pg-section .wpo-service-single-item.list-widget p, html:not(.yostakamm-day) .wpo-blog-pg-section .wpo-service-single-item.list-widget li { color: #cbd5e1 !important; } html:not(.yostakamm-day) .wpo-blog-pg-section .wpo-service-single-area { background: transparent !important; } html:not(.yostakamm-day) .wpo-blog-pg-section .wpo-service-single-item.list-widget { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 14px !important; } /* --- Contract page: wpo-project-single-area --- */ html.yostakamm-day .wpo-project-single-area { background: var(--ymm-bg-elevated) !important; } html.yostakamm-day .wpo-project-single-area .wpo-section-title h2 { color: #0f172a !important; } html.yostakamm-day .wpo-project-single-area .wpo-section-title p { color: var(--ymm-text-muted) !important; } html.yostakamm-day .wpo-project-single-wrap .wpo-project-single-item.list-widget, html.yostakamm-day .wpo-project-single-wrap > .wpo-project-single-item:not(.wpo-project-single-gallery) { background: #ffffff !important; border: 1px solid var(--ymm-border) !important; border-radius: var(--ymm-radius-card); box-shadow: var(--ymm-shadow-soft); padding: 1.25rem !important; margin-bottom: 1rem; } html.yostakamm-day .wpo-project-single-wrap .wpo-project-single-item h3, html.yostakamm-day .wpo-project-single-wrap .wpo-project-single-title h3 { color: #0f172a !important; } html.yostakamm-day .wpo-project-single-wrap .wpo-project-single-item p, html.yostakamm-day .wpo-project-single-wrap .wpo-project-single-item li { color: #475569 !important; } html.yostakamm-day .wpo-project-single-wrap .wpo-project-single-item-quote { background: linear-gradient(135deg, rgba(225, 29, 72, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%) !important; border: 1px solid var(--ymm-border) !important; border-radius: 14px !important; padding: 1.25rem !important; } html.yostakamm-day .wpo-project-single-wrap .wpo-project-single-item-quote p { color: #334155 !important; } html.yostakamm-day .wpo-project-single-wrap .wpo-project-single-item-quote span { color: var(--ymm-accent) !important; } html.yostakamm-day .wpo-project-single-gallery { margin-bottom: 1rem; } html.yostakamm-day .wpo-project-single-gallery .wpo-p-details-img img { border-radius: 12px; border: 1px solid var(--ymm-border); } html.yostakamm-day .wpo-project-single-area > .container > .row > .col-lg-12 > .wpo-service-single-item { background: #ffffff !important; border: 1px solid var(--ymm-border); border-radius: var(--ymm-radius-card); box-shadow: var(--ymm-shadow-soft); padding: 1.35rem 1.25rem 1.5rem; margin-bottom: 1.25rem; } html.yostakamm-day .wpo-project-single-area > .container > .row > .col-lg-12 > .wpo-service-single-item .wpo-section-title h2 { color: #0f172a !important; } html.yostakamm-day .wpo-project-single-area > .container > .row > .col-lg-12 > .wpo-service-single-item .wpo-section-title p { color: var(--ymm-text-muted) !important; } html:not(.yostakamm-day) .wpo-project-single-area > .container > .row > .col-lg-12 > .wpo-service-single-item { background: #161a22 !important; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--ymm-radius-card); padding: 1.35rem 1.25rem 1.5rem; margin-bottom: 1.25rem; } html:not(.yostakamm-day) .wpo-project-single-area > .container > .row > .col-lg-12 > .wpo-service-single-item .wpo-section-title h2 { color: #f8fafc !important; } html:not(.yostakamm-day) .wpo-project-single-area > .container > .row > .col-lg-12 > .wpo-service-single-item .wpo-section-title p { color: #94a3b8 !important; } html:not(.yostakamm-day) .wpo-project-single-area { background: var(--ymm-bg-section) !important; } html:not(.yostakamm-day) .wpo-project-single-wrap .wpo-project-single-item.list-widget, html:not(.yostakamm-day) .wpo-project-single-wrap > .wpo-project-single-item:not(.wpo-project-single-gallery) { background: #161a22 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } html:not(.yostakamm-day) .wpo-project-single-wrap .wpo-project-single-item h3, html:not(.yostakamm-day) .wpo-project-single-wrap .wpo-project-single-item p, html:not(.yostakamm-day) .wpo-project-single-wrap .wpo-project-single-item li { color: #e2e8f0 !important; } html:not(.yostakamm-day) .wpo-project-single-wrap .wpo-project-single-item-quote p { color: #cbd5e1 !important; } /* How it works — dark cards if day class removed */ html:not(.yostakamm-day) .wpo-service-area .wpo-service-wrap .wpo-service-item, html:not(.yostakamm-day) .wpo-service-area-s2 .wpo-service-wrap .wpo-service-item { background: #161a22 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } html:not(.yostakamm-day) .wpo-service-area .wpo-service-wrap .wpo-service-item h2, html:not(.yostakamm-day) .wpo-service-area-s2 .wpo-service-wrap .wpo-service-item h2, html:not(.yostakamm-day) .wpo-service-area .wpo-service-wrap .wpo-service-item p, html:not(.yostakamm-day) .wpo-service-area-s2 .wpo-service-wrap .wpo-service-item p { color: #e2e8f0 !important; } /* --- Standalone 404 (uses same stylesheets; minimal shell) --- */ body.ymm-page-404 { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1rem; background: var(--ymm-bg-elevated); } html.yostakamm-day body.ymm-page-404 { background: var(--ymm-bg-elevated); } body.ymm-page-404 h1 { font-size: clamp(3rem, 10vw, 5rem); font-weight: 800; color: var(--ymm-accent); margin-bottom: 0.5rem; } body.ymm-page-404 p { font-size: 1.125rem; color: var(--ymm-text-muted); max-width: 28rem; } body.ymm-page-404 a { color: var(--ymm-accent); font-weight: 600; } /* --- Accessibility --- */ a:focus-visible, button:focus-visible, .theme-btn:focus-visible, .navbar-toggler:focus-visible { outline: 2px solid var(--ymm-accent); outline-offset: 3px; } /* ============================================================ Fee calculator — futuristic / friendly card (fee-calculator page) ============================================================ */ .wpo-service-single-area .ymm-calc-shell { position: relative; margin: 1.5rem auto 2rem; } .wpo-service-single-area .ymm-calc-card { position: relative; border-radius: 22px; padding: 2px; background: linear-gradient( 135deg, rgba(225, 29, 72, 0.55) 0%, rgba(251, 191, 36, 0.35) 45%, rgba(99, 102, 241, 0.45) 100% ); box-shadow: var(--ymm-shadow-soft), 0 0 0 1px var(--ymm-border); } html.yostakamm-day .wpo-service-single-area .ymm-calc-card { box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1), 0 0 0 1px var(--ymm-border); } .wpo-service-single-area .ymm-calc-card__glow { position: absolute; inset: -30%; background: radial-gradient(circle at 30% 20%, rgba(225, 29, 72, 0.12) 0%, transparent 45%), radial-gradient(circle at 80% 70%, rgba(99, 102, 241, 0.1) 0%, transparent 40%); pointer-events: none; z-index: 0; border-radius: 28px; } .wpo-service-single-area .ymm-calc-card__inner { position: relative; z-index: 1; border-radius: 20px; padding: 1.5rem 1.35rem 1.65rem; background: var(--ymm-bg-elevated); backdrop-filter: blur(12px); } html:not(.yostakamm-day) .wpo-service-single-area .ymm-calc-card__inner { background: linear-gradient(165deg, #161a22 0%, #12151c 100%); } .wpo-service-single-area .ymm-calc-eyebrow { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ymm-accent); margin: 0 0 0.35rem; } .wpo-service-single-area .ymm-calc-rate-pill { display: inline-block; font-size: 0.75rem; line-height: 1.35; padding: 0.35rem 0.65rem; border-radius: 999px; margin: 0 0 1rem; background: rgba(225, 29, 72, 0.1); color: var(--ymm-text-muted); border: 1px solid rgba(225, 29, 72, 0.2); } html:not(.yostakamm-day) .wpo-service-single-area .ymm-calc-rate-pill { background: rgba(225, 29, 72, 0.12); color: #cbd5e1; border-color: rgba(255, 255, 255, 0.08); } .wpo-service-single-area .ymm-calc-field { margin-bottom: 0.85rem; } .wpo-service-single-area .ymm-calc-field--half { flex: 1; min-width: 0; } .wpo-service-single-area .ymm-calc-row { display: flex; gap: 0.75rem; flex-wrap: wrap; } .wpo-service-single-area .ymm-calc-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--ymm-heading-on-dark); } .wpo-service-single-area .ymm-calc-input, .wpo-service-single-area .ymm-calc-select { width: 100%; margin-top: 0; border-radius: 12px !important; padding: 0.65rem 0.85rem !important; font-size: 1rem !important; transition: border-color 0.2s, box-shadow 0.2s; } .wpo-service-single-area .ymm-calc-input:focus, .wpo-service-single-area .ymm-calc-select:focus { border-color: var(--ymm-accent) !important; box-shadow: 0 0 0 3px var(--ymm-accent-glow) !important; outline: none; } .wpo-service-single-area .ymm-calc-select--emphasis { border-width: 2px !important; border-color: rgba(251, 191, 36, 0.65) !important; background: linear-gradient(180deg, rgba(254, 252, 232, 0.95) 0%, #fff 100%) !important; } html:not(.yostakamm-day) .wpo-service-single-area .ymm-calc-select--emphasis { background: linear-gradient(180deg, #1e222b 0%, #161a22 100%) !important; border-color: rgba(251, 191, 36, 0.45) !important; color: #f1f5f9 !important; } .wpo-service-single-area .ymm-calc-warn { font-size: 0.78rem; margin: 0.4rem 0 0; color: #b45309; } html:not(.yostakamm-day) .wpo-service-single-area .ymm-calc-warn { color: #fcd34d; } .wpo-service-single-area .ymm-calc-btn { width: 100%; margin-top: 0.5rem !important; padding: 0.75rem 1rem !important; border-radius: var(--ymm-radius-btn) !important; font-weight: 700 !important; letter-spacing: 0.02em; box-shadow: 0 4px 20px var(--ymm-accent-glow); } .wpo-service-single-area .ymm-calc-btn:disabled { opacity: 0.75; cursor: wait; } .wpo-service-single-area .ymm-calc-disclaimer { font-size: 0.72rem; line-height: 1.45; color: var(--ymm-text-muted); margin: 0.85rem 0 0; } .wpo-service-single-area .ymm-calc-result h4 { font-size: 1.15rem; margin-bottom: 0.35rem; } .wpo-service-single-area .ymm-calc-breakdown { font-size: 0.85rem; line-height: 1.5; margin: 0; color: var(--ymm-text-muted); } .wpo-service-single-area .ymm-calc-extra { color: var(--ymm-accent); font-weight: 600; } html:not(.yostakamm-day) .wpo-service-single-area .ymm-calc-result h4, html:not(.yostakamm-day) .wpo-service-single-area .ymm-calc-result h4 strong { color: #f8fafc !important; } html:not(.yostakamm-day) .wpo-service-single-area .ymm-calc-breakdown { color: #94a3b8 !important; } .wpo-service-single-area .ymm-calc-pay { margin-top: 1rem; } /* --- Calculator: suggested payments (match card aesthetic) --- */ .wpo-service-single-area .ymm-pay-card { position: relative; margin-top: 0.5rem; border-radius: 18px; padding: 2px; background: linear-gradient( 140deg, rgba(225, 29, 72, 0.35) 0%, rgba(99, 102, 241, 0.28) 55%, rgba(251, 191, 36, 0.25) 100% ); box-shadow: 0 10px 36px rgba(15, 23, 42, 0.06); } html:not(.yostakamm-day) .wpo-service-single-area .ymm-pay-card { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } .wpo-service-single-area .ymm-pay-card__accent { position: absolute; inset: 0; border-radius: 18px; opacity: 0.5; background: radial-gradient(circle at 0% 0%, rgba(225, 29, 72, 0.15) 0%, transparent 42%); pointer-events: none; } .wpo-service-single-area .ymm-pay-card__body { position: relative; border-radius: 16px; padding: 1.1rem 1.15rem 1.15rem; background: var(--ymm-bg-elevated); } html:not(.yostakamm-day) .wpo-service-single-area .ymm-pay-card__body { background: linear-gradient(168deg, #1a1e28 0%, #141820 100%); } .wpo-service-single-area .ymm-pay-eyebrow { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ymm-accent); margin: 0 0 0.25rem; } .wpo-service-single-area .ymm-pay-title { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 1.05rem; font-weight: 700; margin: 0 0 0.75rem; color: var(--ymm-heading-on-dark); } .wpo-service-single-area .ymm-pay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .wpo-service-single-area .ymm-pay-item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.35rem 0.75rem; padding: 0.55rem 0.65rem; border-radius: 12px; border: 1px solid var(--ymm-border); background: rgba(255, 255, 255, 0.45); transition: border-color 0.2s, background 0.2s; } html:not(.yostakamm-day) .wpo-service-single-area .ymm-pay-item { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } .wpo-service-single-area .ymm-pay-item--preferred { border-color: rgba(225, 29, 72, 0.35); background: rgba(225, 29, 72, 0.06); } html:not(.yostakamm-day) .wpo-service-single-area .ymm-pay-item--preferred { border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.06); } .wpo-service-single-area .ymm-pay-item a { font-weight: 600; font-size: 0.9rem; color: var(--ymm-heading-on-dark) !important; text-decoration: none; } .wpo-service-single-area .ymm-pay-item a:hover { color: var(--ymm-accent) !important; } .wpo-service-single-area .ymm-pay-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.45rem; border-radius: 999px; background: linear-gradient(135deg, var(--ymm-accent) 0%, var(--ymm-accent-deep) 100%); color: #fff !important; } html.yostakamm-day .wpo-service-single-area #payment-suggestion .ymm-pay-item a { color: #0f172a !important; } html.yostakamm-day .wpo-service-single-area #payment-suggestion .ymm-pay-item a:hover { color: var(--ymm-accent) !important; } html:not(.yostakamm-day) .wpo-service-single-area #payment-suggestion .ymm-pay-item a { color: #f1f5f9 !important; } html:not(.yostakamm-day) .wpo-service-single-area #payment-suggestion .ymm-pay-item a:hover { color: #fda4af !important; }