:root {
--c-primary: #0033A0;
--c-secondary: #C8102E;
--c-accent: #FFD100;
--c-bg: #F4F6F8;
--c-surface: #FFFFFF;
--c-text-primary: #1A1D20;
--c-text-sec: #59626A;
--font-heading: 'Oswald', sans-serif;
--font-body: 'Inter', sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
overflow-x: hidden;
width: 100%;
}
body {
font-family: var(--font-body);
color: var(--c-text-primary);
background-color: var(--c-bg);
line-height: 1.6;
font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.5em;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.sportinmotionn_container {
width: 100%;
padding: 0 16px;
margin: 0 auto;
}
@media(min-width: 768px) {
.sportinmotionn_container { padding: 0 24px; }
}
@media(min-width: 1200px) {
.sportinmotionn_container { max-width: 1200px; padding: 0; }
}
.sportinmotionn_btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
font-family: var(--font-heading);
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
border: none;
transition: transform 0.2s, background 0.3s;
min-width: 44px;
min-height: 44px;
text-align: center;
}
.sportinmotionn_btn:active {
transform: scale(0.96);
}
.sportinmotionn_btn_primary {
background-color: var(--c-primary);
color: #FFFFFF;
}
.sportinmotionn_btn_primary:hover {
background-color: #002277;
background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
background-size: 200% 100%;
animation: shimmer 1.5s infinite linear;
}
.sportinmotionn_btn_outline {
background: transparent;
color: var(--c-primary);
border: 2px solid var(--c-primary);
}
.sportinmotionn_btn_outline:hover {
background: var(--c-primary);
color: #FFFFFF;
}
.sportinmotionn_btn_full {
width: 100%;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.5s ease, transform 0.5s ease;
will-change: transform, opacity;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.sportinmotionn_header {
position: sticky;
top: 0;
z-index: 100;
background: var(--c-surface);
border-bottom: 1px solid rgba(0,0,0,0.05);
transition: backdrop-filter 0.3s, box-shadow 0.3s, background 0.3s;
}
.sportinmotionn_header.header--scrolled {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(14px);
box-shadow: 0 2px 24px rgba(0,0,0,0.12);
}
.sportinmotionn_header_inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 16px;
max-width: 1200px;
margin: 0 auto;
}
.sportinmotionn_logo {
display: flex;
align-items: center;
height: 44px;
}
.sportinmotionn_logo img {
height: 32px;
}
.sportinmotionn_menu {
display: none;
background: var(--c-surface);
}
.sportinmotionn_menu.is-open {
display: flex;
flex-direction: column;
position: absolute;
top: 64px;
left: 0;
right: 0;
padding: 16px;
border-bottom: 1px solid #ddd;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.sportinmotionn_navlink {
padding: 12px;
font-weight: 600;
position: relative;
text-transform: uppercase;
font-family: var(--font-heading);
color: var(--c-text-primary);
}
.sportinmotionn_burger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
background: none;
border: none;
cursor: pointer;
gap: 5px;
}
.sportinmotionn_burger_line {
width: 24px;
height: 2px;
background: var(--c-text-primary);
transition: 0.3s;
}
.sportinmotionn_header_actions {
display: flex;
align-items: center;
gap: 12px;
}
.sportinmotionn_auth_link {
font-weight: 600;
padding: 8px;
font-size: 0.9rem;
}
.sportinmotionn_cart_icon {
position: relative;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--c-text-primary);
}
.sportinmotionn_cart_badge {
position: absolute;
top: 2px;
right: 0;
background: var(--c-secondary);
color: #fff;
font-size: 11px;
font-weight: 700;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.5); background: var(--c-accent); }
100% { transform: scale(1); }
}
@media(min-width: 768px) {
.sportinmotionn_burger { display: none; }
.sportinmotionn_menu {
display: flex;
flex-direction: row;
position: static;
padding: 0;
box-shadow: none;
border: none;
background: transparent;
gap: 24px;
}
.sportinmotionn_navlink::after {
content: '';
position: absolute;
bottom: 4px;
left: 0;
width: 0;
height: 2px;
background: var(--c-accent);
transition: width 0.2s ease;
}
.sportinmotionn_navlink:hover::after {
width: 100%;
}
}
.sportinmotionn_hero {
position: relative;
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 64px 16px;
overflow: hidden;
}
.sportinmotionn_hero_bg_image {
background: url('assets/images/sportinmotionn-hero-stadium-bg.webp') center/cover no-repeat;
}
.sportinmotionn_hero_overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 51, 160, 0.7), rgba(26, 29, 32, 0.9));
}
.sportinmotionn_hero_content {
position: relative;
z-index: 10;
max-width: 800px;
color: #fff;
}
.sportinmotionn_hero_title {
font-size: clamp(2rem, 6vw, 4.5rem);
margin-bottom: 16px;
text-transform: uppercase;
}
.sportinmotionn_hero_subtitle {
font-size: clamp(1rem, 2vw, 1.2rem);
margin-bottom: 32px;
opacity: 0.9;
}
.sportinmotionn_hero_trust {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 32px;
color: var(--c-accent);
}
.sportinmotionn_section {
padding: 64px 0;
}
.sportinmotionn_bg_surface { background: var(--c-surface); }
.sportinmotionn_bg_background { background: var(--c-bg); }
.sportinmotionn_section_title {
font-size: clamp(1.8rem, 4vw, 2.5rem);
text-align: center;
margin-bottom: 40px;
text-transform: uppercase;
}
.sportinmotionn_category_grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.sportinmotionn_category_card {
background: var(--c-primary);
color: #fff;
padding: 32px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 4px;
transition: transform 0.3s;
}
.sportinmotionn_category_card:hover {
transform: translateY(-4px);
background: #002277;
}
.sportinmotionn_cat_label {
font-family: var(--font-heading);
font-size: 1.5rem;
text-transform: uppercase;
margin-bottom: 8px;
}
.sportinmotionn_cat_desc {
font-size: 0.9rem;
opacity: 0.8;
}
@media(min-width: 481px) {
.sportinmotionn_category_grid { grid-template-columns: 1fr 1fr; }
}
@media(min-width: 768px) {
.sportinmotionn_category_grid { grid-template-columns: repeat(4, 1fr); }
}
.sportinmotionn_product_grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media(min-width: 481px) {
.sportinmotionn_product_grid { grid-template-columns: 1fr 1fr; }
}
@media(min-width: 768px) {
.sportinmotionn_product_grid { grid-template-columns: repeat(3, 1fr); }
}
@media(min-width: 1200px) {
.sportinmotionn_product_grid { grid-template-columns: repeat(4, 1fr); }
}
.sportinmotionn_product_card {
background: var(--c-surface);
border-radius: 4px;
overflow: hidden;
position: relative;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
transition: box-shadow 0.22s;
}
.sportinmotionn_product_card:hover {
box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}
.sportinmotionn_prod_img_wrap {
position: relative;
overflow: hidden;
aspect-ratio: 4/5;
display: block;
}
.sportinmotionn_prod_img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.sportinmotionn_product_card:hover .sportinmotionn_prod_img {
transform: scale(1.07);
}
.sportinmotionn_prod_badge {
position: absolute;
top: 12px;
left: 12px;
background: var(--c-secondary);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
padding: 4px 8px;
text-transform: uppercase;
}
.sportinmotionn_wishlist_btn {
position: absolute;
top: 12px;
right: 12px;
background: #fff;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
color: var(--c-text-sec);
transition: color 0.2s;
}
.sportinmotionn_wishlist_btn.is-active {
color: var(--c-secondary);
}
@keyframes heartBounce {
0% { transform: scale(1); }
50% { transform: scale(1.45); }
100% { transform: scale(1); }
}
.sportinmotionn_prod_info {
padding: 16px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.sportinmotionn_prod_cat {
font-size: 0.75rem;
color: var(--c-text-sec);
text-transform: uppercase;
margin-bottom: 4px;
}
.sportinmotionn_prod_name {
font-family: var(--font-heading);
font-size: 1.1rem;
color: var(--c-text-primary);
margin-bottom: 8px;
flex-grow: 1;
display: block;
}
.sportinmotionn_prod_desc {
font-size: 0.85rem;
color: var(--c-text-sec);
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sportinmotionn_prod_price {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 16px;
}
.sportinmotionn_btn_add {
width: 100%;
background: var(--c-primary);
color: #fff;
border: none;
padding: 10px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
opacity: 0.9;
transition: opacity 0.2s, background 0.2s;
}
.sportinmotionn_btn_add:hover {
opacity: 1;
background: #002277;
}
.sportinmotionn_trust_row {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.sportinmotionn_trust_item {
background: var(--c-bg);
padding: 24px;
text-align: center;
font-weight: 700;
font-family: var(--font-heading);
text-transform: uppercase;
font-size: 0.9rem;
border: 1px solid rgba(0,0,0,0.05);
}
@media(min-width: 481px) { .sportinmotionn_trust_row { grid-template-columns: 1fr 1fr; } }
@media(min-width: 768px) { .sportinmotionn_trust_row { grid-template-columns: repeat(4, 1fr); } }
.sportinmotionn_brand_story_split {
display: flex;
flex-direction: column;
gap: 32px;
background: var(--c-surface);
padding: 24px;
border-radius: 4px;
}
@media(min-width: 768px) {
.sportinmotionn_brand_story_split {
flex-direction: row;
align-items: center;
padding: 48px;
}
.sportinmotionn_story_image, .sportinmotionn_story_content {
flex: 1;
}
}
.sportinmotionn_story_image img {
border-radius: 4px;
}
.sportinmotionn_story_content h2 { text-align: left; margin-bottom: 24px; }
.sportinmotionn_story_content p { margin-bottom: 16px; }
.sportinmotionn_steps_flow {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media(min-width: 768px) { .sportinmotionn_steps_flow { grid-template-columns: repeat(3, 1fr); } }
.sportinmotionn_step {
text-align: center;
padding: 24px;
background: var(--c-bg);
border-top: 4px solid var(--c-accent);
}
.sportinmotionn_step_title { font-size: 1.2rem; margin-bottom: 12px; }
.sportinmotionn_step_desc { font-size: 0.9rem; color: var(--c-text-sec); }
.sportinmotionn_testimonials_grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media(min-width: 768px) { .sportinmotionn_testimonials_grid { grid-template-columns: 1fr 1fr; } }
.sportinmotionn_testimonial_card {
background: var(--c-surface);
padding: 24px;
border-left: 4px solid var(--c-secondary);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.sportinmotionn_stars { color: var(--c-accent); margin-bottom: 12px; font-size: 1.2rem; }
.sportinmotionn_testimonial_card p { font-style: italic; margin-bottom: 16px; font-size: 0.95rem; }
.sportinmotionn_test_author { font-weight: 600; font-size: 0.85rem; color: var(--c-text-sec); }
.sportinmotionn_articles_grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media(min-width: 768px) { .sportinmotionn_articles_grid { grid-template-columns: repeat(3, 1fr); } }
.sportinmotionn_article_card {
background: var(--c-bg);
padding: 24px;
border: 1px solid rgba(0,0,0,0.05);
}
.sportinmotionn_article_title { font-size: 1.2rem; margin-bottom: 16px; color: var(--c-primary); }
.sportinmotionn_article_card p { font-size: 0.9rem; margin-bottom: 12px; }
.sportinmotionn_tips_grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media(min-width: 768px) { .sportinmotionn_tips_grid { grid-template-columns: repeat(2, 1fr); } }
.sportinmotionn_tip_item {
background: var(--c-surface);
padding: 16px 24px;
border-left: 3px solid var(--c-accent);
}
.sportinmotionn_tip_title { margin-bottom: 8px; font-size: 1.1rem; }
.sportinmotionn_tip_item p { font-size: 0.9rem; color: var(--c-text-sec); }
.sportinmotionn_faq_accordion { max-width: 800px; margin: 0 auto; }
.sportinmotionn_faq_item {
margin-bottom: 8px;
border: 1px solid rgba(0,0,0,0.1);
background: var(--c-surface);
}
.sportinmotionn_faq_btn {
width: 100%;
text-align: left;
padding: 16px;
background: none;
border: none;
font-weight: 700;
font-family: var(--font-heading);
font-size: 1.1rem;
cursor: pointer;
position: relative;
}
.sportinmotionn_faq_btn::after {
content: '+';
position: absolute;
right: 16px;
font-size: 1.5rem;
line-height: 1;
}
.sportinmotionn_faq_item.is-open .sportinmotionn_faq_btn::after { content: '-'; }
.sportinmotionn_faq_content {
padding: 0 16px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.sportinmotionn_faq_item.is-open .sportinmotionn_faq_content {
padding: 0 16px 16px;
max-height: 500px;
}
.sportinmotionn_megablock {
background: var(--c-surface);
padding: 32px 24px;
box-shadow: 0 4px 24px rgba(0,0,0,0.05);
}
@media(min-width: 768px) { .sportinmotionn_megablock { padding: 64px; } }
.sportinmotionn_mega_intro p {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 40px;
color: var(--c-primary);
}
.sportinmotionn_mega_section { margin-bottom: 48px; }
.sportinmotionn_mega_section h3 {
font-size: 1.8rem;
margin-bottom: 24px;
color: var(--c-text-primary);
border-bottom: 2px solid var(--c-bg);
padding-bottom: 8px;
}
.sportinmotionn_mega_section p { margin-bottom: 16px; }
.sportinmotionn_mega_row {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 48px;
background: var(--c-bg);
padding: 24px;
}
@media(min-width: 768px) { .sportinmotionn_mega_row { grid-template-columns: 1fr 1fr; } }
.sportinmotionn_mega_col h4 { margin-bottom: 12px; }
.sportinmotionn_newsletter {
background: var(--c-primary);
color: #fff;
padding: 64px 0;
text-align: center;
}
.sportinmotionn_newsletter_inner { max-width: 600px; margin: 0 auto; }
.sportinmotionn_newsletter h3 { font-size: 2rem; margin-bottom: 16px; }
.sportinmotionn_newsletter p { margin-bottom: 24px; opacity: 0.9; }
.sportinmotionn_newsletter_form {
display: flex;
flex-direction: column;
gap: 12px;
}
@media(min-width: 480px) {
.sportinmotionn_newsletter_form { flex-direction: row; }
}
.sportinmotionn_newsletter_form input {
flex-grow: 1;
padding: 12px 16px;
border: none;
font-family: var(--font-body);
font-size: 16px;
}
.sportinmotionn_newsletter_form .sportinmotionn_btn {
background: var(--c-accent);
color: var(--c-text-primary);
}
.sportinmotionn_newsletter_form .sportinmotionn_btn:hover { background: #e5bc00; animation: none; }
.sportinmotionn_footer {
background: #1A1D20;
color: #B5C2DE;
padding: 64px 0 24px;
font-size: 0.9rem;
}
.sportinmotionn_footer_grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
margin-bottom: 48px;
}
@media(min-width: 768px) { .sportinmotionn_footer_grid { grid-template-columns: repeat(4, 1fr); } }
.sportinmotionn_footer_title {
color: #fff;
font-size: 1.1rem;
margin-bottom: 24px;
text-transform: uppercase;
}
.sportinmotionn_footer_link {
display: block;
margin-bottom: 12px;
color: #B5C2DE;
transition: color 0.2s;
padding: 4px 0;
}
.sportinmotionn_footer_link:hover { color: var(--c-accent); }
.sportinmotionn_footer_identity { margin-bottom: 16px; }
.sportinmotionn_footer_return_note {
margin-top: 24px;
font-size: 0.8rem;
opacity: 0.7;
}
.sportinmotionn_footer_bottom {
text-align: center;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 24px;
font-size: 0.8rem;
}
.sportinmotionn_main_page { padding: 40px 0; min-height: 60vh; }
.sportinmotionn_page_title { font-size: 2.5rem; text-transform: uppercase; margin-bottom: 24px; }
.sportinmotionn_breadcrumb { font-size: 0.9rem; color: var(--c-text-sec); margin-bottom: 24px; }
.sportinmotionn_shop_layout {
display: flex;
flex-direction: column;
gap: 32px;
}
@media(min-width: 768px) {
.sportinmotionn_shop_layout { flex-direction: row; }
.sportinmotionn_shop_sidebar { width: 250px; flex-shrink: 0; position: sticky; top: 80px; align-self: flex-start; }
.sportinmotionn_shop_content { flex-grow: 1; }
}
.sportinmotionn_sidebar_title { margin-bottom: 16px; font-size: 1.2rem; }
.sportinmotionn_filter_list { list-style: none; }
.sportinmotionn_filter_list li { margin-bottom: 8px; }
.sportinmotionn_filter_btn {
background: none;
border: none;
font-family: var(--font-body);
font-size: 1rem;
color: var(--c-text-sec);
cursor: pointer;
text-align: left;
width: 100%;
padding: 4px 0;
}
.sportinmotionn_filter_btn.is-active { color: var(--c-primary); font-weight: 600; }
.sportinmotionn_shop_header_row {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
@media(min-width: 480px) {
.sportinmotionn_shop_header_row { flex-direction: row; justify-content: space-between; align-items: center; }
}
.sportinmotionn_sort_control select {
padding: 8px 12px;
font-size: 16px;
border: 1px solid #ddd;
font-family: var(--font-body);
}
.sportinmotionn_product_detail_split {
display: flex;
flex-direction: column;
gap: 32px;
}
@media(min-width: 768px) {
.sportinmotionn_product_detail_split { flex-direction: row; }
.sportinmotionn_detail_gallery { width: 50%; }
.sportinmotionn_detail_info { width: 50%; }
}
.sportinmotionn_main_img_wrap {
background: var(--c-surface);
margin-bottom: 16px;
border: 1px solid rgba(0,0,0,0.05);
}
.sportinmotionn_main_img_wrap img { width: 100%; }
.sportinmotionn_thumb_strip {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
@media(min-width: 480px) { .sportinmotionn_thumb_strip { grid-template-columns: repeat(4, 1fr); } }
.sportinmotionn_thumb {
cursor: pointer;
border: 2px solid transparent;
opacity: 0.7;
transition: 0.2s;
}
.sportinmotionn_thumb:hover, .sportinmotionn_thumb.is-active {
opacity: 1;
border-color: var(--c-primary);
}
.sportinmotionn_detail_title { font-size: 2rem; margin-bottom: 8px; }
.sportinmotionn_detail_price { font-size: 1.8rem; font-weight: 700; color: var(--c-primary); margin-bottom: 16px; }
.sportinmotionn_detail_badge {
display: inline-block;
background: var(--c-secondary);
color: #fff;
padding: 4px 8px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 16px;
}
.sportinmotionn_detail_short { font-size: 1.1rem; margin-bottom: 24px; font-weight: 600; }
.sportinmotionn_detail_full { margin-bottom: 24px; }
.sportinmotionn_detail_tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.sportinmotionn_tag { background: var(--c-bg); padding: 4px 12px; font-size: 0.8rem; border-radius: 16px; }
.sportinmotionn_detail_stock { font-weight: 600; margin-bottom: 24px; }
.sportinmotionn_add_large { font-size: 1.2rem; padding: 16px; margin-bottom: 16px; }
.sportinmotionn_detail_meta { font-size: 0.85rem; color: var(--c-text-sec); }
.sportinmotionn_cart_layout {
display: flex;
flex-direction: column;
gap: 32px;
}
@media(min-width: 768px) {
.sportinmotionn_cart_layout { flex-direction: row; }
.sportinmotionn_cart_items { width: 65%; }
.sportinmotionn_cart_summary { width: 35%; position: sticky; top: 80px; align-self: flex-start; }
}
.sportinmotionn_cart_item_row {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
background: var(--c-surface);
margin-bottom: 16px;
border: 1px solid rgba(0,0,0,0.05);
}
@media(min-width: 480px) {
.sportinmotionn_cart_item_row { flex-direction: row; align-items: center; }
}
.sportinmotionn_cart_img { width: 80px; height: 100px; object-fit: cover; }
.sportinmotionn_cart_details { flex-grow: 1; }
.sportinmotionn_cart_name { font-weight: 700; font-family: var(--font-heading); font-size: 1.1rem; margin-bottom: 4px; }
.sportinmotionn_cart_price { color: var(--c-primary); font-weight: 600; }
.sportinmotionn_cart_controls { display: flex; align-items: center; gap: 12px; }
.sportinmotionn_qty_btn { width: 32px; height: 32px; border: 1px solid #ddd; background: #fff; cursor: pointer; }
.sportinmotionn_qty_val { font-weight: 600; }
.sportinmotionn_cart_remove { background: none; border: none; color: var(--c-secondary); cursor: pointer; text-decoration: underline; font-size: 0.9rem; padding: 8px; }
.sportinmotionn_cart_summary {
background: var(--c-surface);
padding: 24px;
border: 1px solid rgba(0,0,0,0.05);
}
.sportinmotionn_summary_title { margin-bottom: 24px; font-size: 1.5rem; }
.sportinmotionn_summary_row { display: flex; justify-content: space-between; margin-bottom: 12px; }
.sportinmotionn_total_row { font-size: 1.3rem; font-weight: 700; margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--c-bg); }
.sportinmotionn_shipping_progress { margin: 16px 0; }
.sportinmotionn_shipping_progress p { font-size: 0.85rem; margin-bottom: 8px; }
.sportinmotionn_progress_bar { height: 8px; background: var(--c-bg); border-radius: 4px; overflow: hidden; }
.sportinmotionn_progress_fill { height: 100%; background: var(--c-accent); transition: width 0.3s; width: 0%; }
.sportinmotionn_cart_trust { margin-top: 16px; font-size: 0.8rem; color: var(--c-text-sec); text-align: center; }
.sportinmotionn_account_tabs { display: flex; gap: 16px; margin-bottom: 32px; border-bottom: 2px solid var(--c-bg); }
.sportinmotionn_tab_btn {
background: none;
border: none;
padding: 12px 24px;
font-family: var(--font-heading);
font-size: 1.2rem;
cursor: pointer;
color: var(--c-text-sec);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
}
.sportinmotionn_tab_btn.is-active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.sportinmotionn_tab_content { display: none; }
.sportinmotionn_tab_content.is-active { display: block; }
.sportinmotionn_form { max-width: 500px; }
.sportinmotionn_form_row { display: flex; flex-direction: column; gap: 16px; }
@media(min-width: 480px) { .sportinmotionn_form_row { flex-direction: row; } .sportinmotionn_form_group { flex: 1; } }
.sportinmotionn_form_group { margin-bottom: 16px; }
.sportinmotionn_form_group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; }
.sportinmotionn_form_group input, .sportinmotionn_form_group select, .sportinmotionn_form_group textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
font-family: var(--font-body);
font-size: 16px;
}
.sportinmotionn_dashboard_grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media(min-width: 768px) { .sportinmotionn_dashboard_grid { grid-template-columns: 2fr 1fr; } }
.sportinmotionn_dash_panel { background: var(--c-surface); padding: 24px; border: 1px solid rgba(0,0,0,0.05); }
.sportinmotionn_dash_title { margin-bottom: 24px; }
.sportinmotionn_empty_state { padding: 32px; text-align: center; background: var(--c-bg); color: var(--c-text-sec); }
.sportinmotionn_content_block { max-width: 800px; margin: 0 auto; }
.sportinmotionn_content_block h3 { margin-top: 32px; margin-bottom: 16px; }
.sportinmotionn_content_block p { margin-bottom: 16px; }
.sportinmotionn_contact_grid {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
}
@media(min-width: 768px) { .sportinmotionn_contact_grid { grid-template-columns: 1fr 1fr; } }
.sportinmotionn_contact_info { background: var(--c-surface); padding: 32px; }
.sportinmotionn_contact_form_wrapper { background: var(--c-surface); padding: 32px; }
.sportinmotionn_mt_small { margin-top: 16px; }
.sportinmotionn_mt_medium { margin-top: 32px; }
.sportinmotionn_mt_large { margin-top: 64px; }
.sportinmotionn_mb_small { margin-bottom: 16px; }
.sportinmotionn_mb_medium { margin-bottom: 32px; }
.sportinmotionn_text_center { text-align: center; }
.sportinmotionn_toast_container {
position: fixed;
bottom: 24px;
right: 24px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 1000;
}
.sportinmotionn_toast {
background: #1A1D20;
color: #fff;
padding: 16px 24px;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
transform: translateX(110%);
animation: slideInRight 0.27s ease-out forwards;
}
.sportinmotionn_toast.fade-out {
opacity: 0;
transition: opacity 0.2s;
}
@keyframes slideInRight {
to { transform: translateX(0); }
}
.sportinmotionn_modal_overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
}
.sportinmotionn_modal_overlay.is-open {
display: flex;
opacity: 1;
}
.sportinmotionn_modal_panel {
background: var(--c-surface);
width: calc(100% - 32px);
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
padding: 32px;
position: relative;
transform: translateY(56px);
transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
.sportinmotionn_modal_overlay.is-open .sportinmotionn_modal_panel {
transform: translateY(0);
}
.sportinmotionn_modal_close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
font-size: 2rem;
line-height: 1;
cursor: pointer;
color: var(--c-text-sec);
padding: 4px;
}
.sportinmotionn_modal_title { margin-bottom: 24px; text-align: center; }
.sportinmotionn_error_msg {
color: var(--c-secondary);
font-size: 0.85rem;
margin-top: 4px;
display: none;
}
.sportinmotionn_success_icon {
width: 64px;
height: 64px;
margin: 0 auto 16px;
}
.sportinmotionn_success_icon svg {
width: 100%;
height: 100%;
stroke: var(--c-primary);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.sportinmotionn_success_icon path {
stroke-dasharray: 40;
stroke-dashoffset: 40;
}
.sportinmotionn_modal_overlay.is-open .sportinmotionn_success_icon path {
animation: drawCheck 0.5s 0.2s forwards;
}
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.sportinmotionn_order_summary_box {
background: var(--c-bg);
padding: 16px;
margin-bottom: 24px;
text-align: left;
font-weight: 600;
}
.sportinmotionn_chat_widget {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 900;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.sportinmotionn_chat_toggle {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--c-primary);
color: #fff;
border: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.27s;
}
.sportinmotionn_chat_toggle svg { width: 28px; height: 28px; transition: transform 0.3s; }
.sportinmotionn_chat_widget.is-open .sportinmotionn_chat_toggle { transform: scale(0.9); }
.sportinmotionn_chat_widget.is-open .sportinmotionn_chat_toggle svg { transform: rotate(45deg); }
.sportinmotionn_chat_panel {
width: calc(100vw - 32px);
max-width: 360px;
background: var(--c-surface);
box-shadow: 0 4px 24px rgba(0,0,0,0.15);
border-radius: 8px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.27s ease-out, opacity 0.2s;
}
.sportinmotionn_chat_widget.is-open .sportinmotionn_chat_panel {
max-height: 380px;
opacity: 1;
}
.sportinmotionn_chat_header {
background: var(--c-primary);
color: #fff;
padding: 16px;
font-family: var(--font-heading);
font-size: 1.1rem;
}
.sportinmotionn_chat_body {
padding: 16px;
height: 250px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
background: var(--c-bg);
}
.sportinmotionn_chat_msg {
max-width: 80%;
padding: 10px 14px;
border-radius: 16px;
font-size: 0.9rem;
}
.sportinmotionn_chat_msg.bot {
background: #e2e8f0;
color: var(--c-text-primary);
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.sportinmotionn_chat_msg.user {
background: var(--c-primary);
color: #fff;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.sportinmotionn_chat_input_area {
display: flex;
padding: 12px;
background: var(--c-surface);
border-top: 1px solid #ddd;
}
.sportinmotionn_chat_input_area input {
flex-grow: 1;
border: 1px solid #ccc;
padding: 8px 12px;
border-radius: 20px;
font-family: var(--font-body);
font-size: 16px;
outline: none;
}
.sportinmotionn_chat_input_area input:focus {
border-color: var(--c-primary);
box-shadow: 0 0 0 2px rgba(0,51,160,0.2);
}
.sportinmotionn_chat_input_area button {
background: none;
border: none;
color: var(--c-primary);
font-weight: 700;
padding: 0 12px;
cursor: pointer;
}
.sportinmotionn_cookie_banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #1A1D20;
color: #fff;
padding: 16px;
z-index: 1500;
display: flex;
flex-direction: column;
gap: 16px;
transform: translateY(100%);
transition: transform 0.36s ease-out;
}
.sportinmotionn_cookie_banner.is-visible {
transform: translateY(0);
}
@media(min-width: 768px) {
.sportinmotionn_cookie_banner {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 24px 48px;
}
}
.sportinmotionn_cookie_text { font-size: 0.9rem; }
.sportinmotionn_cookie_text a { text-decoration: underline; color: var(--c-accent); }
.sportinmotionn_cookie_actions button {
background: var(--c-accent);
color: var(--c-text-primary);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal, .sportinmotionn_modal_panel, .sportinmotionn_toast, .sportinmotionn_cookie_banner {
transition: none;
transform: none !important;
opacity: 1 !important;
}
}