hoy 11:25
wcm.zip
Archivo Zip
extract the zip folders and list the urls
Pegado text(334).txt
Documento
Wocomo SL | Address calle nord 12 | CIF: B67354290
Address
4, 2-7 Calle Sant Francisco, Cerdanyola Dell Valles
Barcelona, Spain
Email Us
support@wocomos.com
Open Hours
Monday - Friday
9:00AM - 05:00PM
Call Us
+34 662200488
Use this complete replacement footer. All internal links use the full https://www.wocomos.com/ URL.
Footer CSS
.footer {
margin-top: 100px;
padding-top: 70px;
color: #c6d1df;
background-color: #071526;
}
.footer .wrap {
width: min(1180px, calc(100% - 40px));
margin-inline: auto;
}
.footer-grid {
display: grid;
grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr;
gap: 65px;
}
.footer h2 {
margin: 0 0 20px;
color: #ffffff;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.footer p,
.footer address {
line-height: 1.7;
}
.footer address {
margin-bottom: 14px;
font-style: normal;
}
.footer-column > a {
display: block;
width: fit-content;
margin-block: 10px;
color: #c6d1df;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-column > a:hover {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 4px;
}
.footer-column > a:focus-visible,
.footer-logo:focus-visible,
.footer-socials a:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 4px;
}
/* Company logo */
.footer-logo {
display: inline-flex;
align-items: center;
gap: 12px;
color: #ffffff;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: 0.04em;
text-decoration: none;
}
.footer-logo img {
display: block;
width: 50px;
height: 50px;
object-fit: contain;
border-radius: 8px;
}
.footer-about > p {
max-width: 310px;
margin-top: 20px;
}
/* Social-media icons */
.footer-socials {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 25px;
}
.footer-socials a {
display: inline-flex;
width: 43px;
height: 43px;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
.footer-socials a:hover {
background-color: #1877f2;
border-color: #1877f2;
transform: translateY(-3px);
}
.footer-socials img {
display: block;
width: 21px;
height: 21px;
object-fit: contain;
}
/* Copyright section */
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 55px;
padding-block: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
font-size: 0.82rem;
}
/* Tablet */
@media (max-width: 980px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 45px;
}
}
/* Mobile */
@media (max-width: 640px) {
.footer {
margin-top: 70px;
padding-top: 55px;
}
.footer .wrap {
width: min(100% - 28px, 1180px);
}
.footer-grid {
grid-template-columns: 1fr;
gap: 38px;
}
.footer-bottom {
flex-direction: column;
margin-top: 40px;
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.footer a {
transition: none;
}
.footer-socials a:hover {
transform: none;
}
}
The social icons currently link to the official platform homepages. Replace those four URLs with WOCOMO’s exact Facebook, Instagram, X and LinkedIn profile URLs when available.
Generate new footer and add all, links the url here is the sample footer
Below is the corrected complete footer. I fixed the image URLs, corrected the WhatsApp link and alt text, added the internship page, and changed all WOCOMO links to absolute URLs.
Complete footer HTML
Footer CSS
.footer {
margin-top: 100px;
padding-top: 70px;
color: #c6d1df;
background-color: #071526;
}
.footer .wrap {
width: min(1180px, calc(100% - 40px));
margin-inline: auto;
}
.footer-grid {
display: grid;
grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr;
gap: 65px;
}
.footer h2 {
margin: 0 0 20px;
color: #ffffff;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.footer p,
.footer address {
line-height: 1.7;
}
.footer address {
margin-bottom: 15px;
font-style: normal;
}
.footer-column > a {
display: block;
width: fit-content;
margin-block: 10px;
color: #c6d1df;
text-decoration: none;
}
.footer-column > a:hover {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 4px;
}
.footer a:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 4px;
}
/* WOCOMO logo */
.footer-brand {
display: inline-flex;
align-items: center;
gap: 13px;
color: #ffffff;
font-size: 1.25rem;
letter-spacing: 0.04em;
text-decoration: none;
}
.footer-brand img {
display: block;
width: 55px;
height: 55px;
object-fit: contain;
border-radius: 8px;
}
.footer-about > p {
max-width: 310px;
margin-top: 20px;
}
/* Social-media icons */
.footer-social-images {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 25px;
}
.footer-social-images a {
display: inline-flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
.footer-social-images a:hover {
background-color: #1877f2;
border-color: #1877f2;
transform: translateY(-3px);
}
.footer-social-images a[title="WhatsApp"]:hover {
background-color: #25d366;
border-color: #25d366;
}
.footer-social-images a[title="Instagram"]:hover {
background-color: #e4405f;
border-color: #e4405f;
}
.footer-social-images a[title="X"]:hover {
background-color: #000000;
border-color: #ffffff;
}
.footer-social-images a[title="LinkedIn"]:hover {
background-color: #0a66c2;
border-color: #0a66c2;
}
.footer-social-images img {
display: block;
width: 23px;
height: 23px;
object-fit: contain;
}
/* Copyright */
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 55px;
padding-block: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
font-size: 0.82rem;
}
/* Tablet */
@media (max-width: 980px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 45px;
}
}
/* Mobile */
@media (max-width: 640px) {
.footer {
margin-top: 70px;
padding-top: 55px;
}
.footer .wrap {
width: min(100% - 28px, 1180px);
}
.footer-grid {
grid-template-columns: 1fr;
gap: 38px;
}
.footer-bottom {
flex-direction: column;
margin-top: 40px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.footer-social-images a {
transition: none;
}
.footer-social-images a:hover {
transform: none;
}
}
Facebook, Instagram and X currently link to their platform homepages because their WOCOMO profile URLs were not provided. LinkedIn and WhatsApp use the supplied WOCOMO details.
Pegado text(336).txt
Documento
Organize the css code
Ha pensado durante 1m 38s
The CSS has been organized, formatted and repaired.
Changes include:
Tailwind layers formatted clearly
Main website styles separated logically
Footer CSS placed in its own section
Responsive tablet and mobile rules organized
Reduced-motion accessibility rules preserved
Broken .cta-band .eyebrow and .footer connection repaired
Existing design values preserved
Pegado text(336).txt
Pegado text(336).txt
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
*,
:before,
:after,
::backdrop {
--tw-outline-style: solid;
--tw-blur: initial;
--tw-brightness: initial;
--tw-contrast: initial;
--tw-grayscale: initial;
--tw-hue-rotate: initial;
--tw-invert: initial;
--tw-opacity: initial;
--tw-saturate: initial;
--tw-sepia: initial;
--tw-drop-shadow: initial;
--tw-drop-shadow-color: initial;
--tw-drop-shadow-alpha: 100%;
--tw-drop-shadow-size: initial;
}
}
}
@layer theme {
:root,
:host {
--font-sans:
ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--spacing: 0.25rem;
--default-transition-duration: 0.15s;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
}
}
@layer base {
*,
:after,
:before,
::backdrop {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0;
}
::file-selector-button {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0;
}
html,
:host {
-webkit-text-size-adjust: 100%;
tab-size: 4;
line-height: 1.5;
font-family: var(
--default-font-family,
ui-sans-serif,
system-ui,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji"
);
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
-webkit-text-decoration: inherit;
-webkit-text-decoration: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp,
pre {
font-family: var(
--default-mono-font-family,
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
"Liberation Mono",
"Courier New",
monospace
);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(
--default-mono-font-variation-settings,
normal
);
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol,
ul,
menu {
list-style: none;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
vertical-align: middle;
display: block;
}
img,
video {
max-width: 100%;
height: auto;
}
button,
input,
select,
optgroup,
textarea {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
opacity: 1;
background-color: #0000;
border-radius: 0;
}
::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
opacity: 1;
background-color: #0000;
border-radius: 0;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not ((-webkit-appearance: -apple-pay-button))) or
(contain-intrinsic-size: 1px) {
::placeholder {
color: currentColor;
}
@supports (color: color-mix(in lab, red, red)) {
::placeholder {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit {
padding-block: 0;
}
::-webkit-datetime-edit-year-field {
padding-block: 0;
}
::-webkit-datetime-edit-month-field {
padding-block: 0;
}
::-webkit-datetime-edit-day-field {
padding-block: 0;
}
::-webkit-datetime-edit-hour-field {
padding-block: 0;
}
::-webkit-datetime-edit-minute-field {
padding-block: 0;
}
::-webkit-datetime-edit-second-field {
padding-block: 0;
}
::-webkit-datetime-edit-millisecond-field {
padding-block: 0;
}
::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button,
input:where([type="button"], [type="reset"], [type="submit"]) {
appearance: button;
}
::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button {
height: auto;
}
::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}
}
@layer components;
@layer utilities {
.visible {
visibility: visible;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.relative {
position: relative;
}
.static {
position: static;
}
.start {
inset-inline-start: var(--spacing);
}
.end {
inset-inline-end: var(--spacing);
}
.contents {
display: contents;
}
.flex {
display: flex;
}
.hidden {
display: none;
}
.table {
display: table;
}
.resize {
resize: both;
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,)
var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,)
var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.transition {
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to,
opacity,
box-shadow,
transform,
translate,
scale,
rotate,
filter,
-webkit-backdrop-filter,
backdrop-filter,
display,
content-visibility,
overlay,
pointer-events;
transition-timing-function: var(
--tw-ease,
var(--default-transition-timing-function)
);
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
}
:root {
--ink: #12243a;
--muted: #5d6c7e;
--blue: #1155d9;
--blue-dark: #0a3c9b;
--aqua: #18b7a0;
--orange: #f47b4d;
--cream: #f5f7fb;
--line: #dce4ee;
--white: #fff;
--shadow: 0 18px 55px #12243a1a;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
color: var(--ink);
background: #fff;
margin: 0;
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
Segoe UI,
sans-serif;
line-height: 1.65;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
}
button,
a,
input,
textarea,
select {
outline-offset: 4px;
}
:focus-visible {
outline: 3px solid #ffb21d;
}
.wrap {
width: min(1180px, 100% - 40px);
margin-inline: auto;
}
.skip-link {
z-index: 100;
background: #fff;
border-radius: 8px;
padding: 12px 18px;
position: fixed;
top: 12px;
left: 12px;
transform: translateY(-150%);
}
.skip-link:focus {
transform: none;
}
.utility {
color: #d8e4f4;
letter-spacing: 0.03em;
background: #0b1c32;
font-size: 0.77rem;
}
.utility .wrap {
justify-content: space-between;
align-items: center;
min-height: 34px;
display: flex;
}
.utility a {
color: #fff;
}
.site-header {
z-index: 50;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
background: #fffffff5;
border-bottom: 1px solid #dce4eee6;
position: sticky;
top: 0;
}
.nav-row {
justify-content: space-between;
align-items: center;
gap: 30px;
min-height: 82px;
display: flex;
}
.brand {
letter-spacing: 0.1em;
align-items: center;
gap: 11px;
font-size: 1.12rem;
font-weight: 900;
display: inline-flex;
}
.brand small {
color: var(--muted);
letter-spacing: 0.03em;
font-size: 0.62rem;
font-weight: 600;
display: block;
}
.brand-logo {
object-fit: contain;
border-radius: 10px;
width: 64px;
height: 33px;
display: block;
box-shadow: 0 4px 7px #1155d92e;
}
.nav {
align-items: center;
gap: 24px;
font-size: 0.9rem;
font-weight: 700;
display: flex;
}
.nav > a:not(.nav-cta):hover {
color: var(--blue);
}
.nav-cta {
color: #fff;
background: var(--blue);
border-radius: 8px;
padding: 12px 17px;
}
.menu-button {
border: 1px solid var(--line);
color: var(--ink);
background: #fff;
border-radius: 8px;
padding: 9px 12px;
font-weight: 800;
display: none;
}
.hero {
background: linear-gradient(135deg, #eef4ff 0%, #fbfdff 58%, #effbf8 100%);
position: relative;
overflow: hidden;
}
.hero:after {
content: "";
pointer-events: none;
border: 1px solid #1155d92e;
border-radius: 50%;
width: 430px;
height: 430px;
position: absolute;
bottom: -260px;
right: -180px;
box-shadow:
0 0 0 65px #1155d90a,
0 0 0 130px #1155d909;
}
.hero .wrap {
z-index: 1;
padding-block: 28px 90px;
position: relative;
}
.home-hero .wrap {
padding-top: 88px;
}
.hero-grid {
grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.75fr);
align-items: center;
gap: 80px;
display: grid;
}
.hero h1 {
letter-spacing: -0.055em;
max-width: 820px;
margin: 14px 0 22px;
font-size: clamp(2rem, 2vw, 2rem);
line-height: 0.98;
}
.hero:not(.home-hero) h1 {
font-size: clamp(2rem, 2vw, 3rem);
}
.company-hero h1 {
max-width: 900px;
}
.lead {
color: #42566e;
max-width: 760px;
margin: 0;
font-size: clamp(1.08rem, 2vw, 1.32rem);
line-height: 1.65;
}
.eyebrow {
color: var(--blue);
letter-spacing: 0.17em;
text-transform: uppercase;
margin: 0;
font-size: 0.75rem;
font-weight: 900;
}
.hero-actions {
align-items: center;
gap: 24px;
margin-top: 4px;
display: flex;
}
.button {
background: var(--blue);
color: #fff;
cursor: pointer;
border: 0;
border-radius: 8px;
justify-content: center;
align-items: center;
min-height: 50px;
padding: 12px 22px;
font-weight: 800;
display: inline-flex;
box-shadow: 0 10px 25px #1155d933;
}
.button:hover {
background: var(--blue-dark);
transform: translateY(-1px);
}
.text-link {
color: var(--blue);
font-weight: 800;
}
.signal-card {
color: #fff;
min-height: 290px;
box-shadow: var(--shadow);
background: linear-gradient(155deg, #0d2444, #1155d9);
border-radius: 28px 28px 8px;
flex-direction: column;
justify-content: flex-end;
padding: 42px;
display: flex;
position: relative;
overflow: hidden;
}
.signal-card:before {
content: "";
border: 1px solid #ffffff59;
border-radius: 50%;
width: 180px;
height: 180px;
position: absolute;
top: -50px;
right: -35px;
box-shadow:
0 0 0 35px #ffffff0f,
0 0 0 70px #ffffff0a;
}
.signal-card span {
color: #a9cffd;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 0.72rem;
font-weight: 900;
}
.signal-card strong {
margin: 10px 0;
font-size: 1.65rem;
line-height: 1.2;
}
.signal-card p {
color: #dbeaff;
margin: 0;
}
.breadcrumbs {
margin-bottom: 55px;
}
.breadcrumbs ol {
color: var(--muted);
flex-wrap: wrap;
gap: 7px;
margin: 0;
padding: 0;
font-size: 0.8rem;
list-style: none;
display: flex;
}
.breadcrumbs li + li:before {
content: "/";
color: #9aa8b8;
margin-right: 7px;
}
.breadcrumbs a:hover {
color: var(--blue);
}
.proof-strip {
color: #445970;
letter-spacing: 0.08em;
text-transform: uppercase;
border-top: 1px solid #cdd9e8;
grid-template-columns: repeat(4, 1fr);
margin-top: 76px;
padding-top: 25px;
font-size: 0.8rem;
font-weight: 800;
display: grid;
}
.orbit {
aspect-ratio: 1;
border: 1px solid #1155d940;
border-radius: 50%;
justify-self: center;
width: 400px;
position: relative;
box-shadow:
inset 0 0 0 62px #1155d909,
inset 0 0 0 125px #18b7a008;
}
.orbit:before {
content: "";
border: 1px dashed #1155d94d;
border-radius: 50%;
position: absolute;
inset: 20%;
}
.orbit-core {
color: #fff;
background: linear-gradient(145deg, var(--blue), #102f70);
box-shadow: var(--shadow);
border-radius: 50px 40px 15px;
place-items: center;
font-size: 2rem;
font-weight: 900;
display: grid;
position: absolute;
inset: 35%;
}
.orbit span {
border: 1px solid var(--line);
background: #fff;
border-radius: 99px;
padding: 7px 12px;
font-size: 0.75rem;
font-weight: 800;
position: absolute;
box-shadow: 0 7px 25px #12243a14;
}
.orbit span:first-of-type {
top: 4%;
left: 35%;
}
.orbit span:nth-of-type(2) {
top: 31%;
right: -7%;
}
.orbit span:nth-of-type(3) {
bottom: 10%;
right: 9%;
}
.orbit span:nth-of-type(4) {
bottom: 4%;
left: 10%;
}
.orbit span:nth-of-type(5) {
top: 30%;
left: -6%;
}
.section {
padding-block: 40px;
}
.section.tint {
background: var(--cream);
}
.section.dark {
color: #fff;
background: #0b1c32;
}
.section h2 {
letter-spacing: -0.04em;
margin: 10px 0 18px;
font-size: clamp(1.7rem, 2vw, 1.8rem);
line-height: 1.08;
}
.section h3 {
line-height: 1.25;
}
.section p {
color: var(--muted);
}
.dark p {
color: #b7c6d8;
}
.intro {
text-align: center;
max-width: 920px;
}
.intro .eyebrow {
text-align: center;
}
.intro > p:last-child {
max-width: 760px;
margin-inline: auto;
font-size: 1.1rem;
}
.split {
grid-template-columns: 0.75fr 1.25fr;
align-items: start;
gap: 100px;
display: grid;
}
.large-copy {
margin-top: 0;
font-size: 1.38rem;
line-height: 1.55;
color: var(--ink) !important;
}
.section-head {
grid-template-columns: 1.15fr 0.65fr;
align-items: end;
gap: 70px;
margin-bottom: 46px;
display: grid;
}
.section-head p:last-child {
margin-bottom: 4px;
}
.card-grid {
grid-template-columns: repeat(4, 1fr);
gap: 18px;
display: grid;
}
.feature-card {
border: 1px solid var(--line);
background: #fff;
border-radius: 14px;
min-height: 290px;
padding: 28px;
transition: all 0.2s;
}
.feature-card:hover {
box-shadow: var(--shadow);
transform: translateY(-4px);
}
.feature-card > span {
color: var(--blue);
font-size: 0.75rem;
font-weight: 900;
}
.feature-card h3 {
margin: 45px 0 13px;
font-size: 1.25rem;
}
.feature-card p {
font-size: 0.92rem;
}
.process {
border-top: 1px solid var(--line);
grid-template-columns: repeat(4, 1fr);
margin: 0;
padding: 0;
list-style: none;
display: grid;
}
.process li {
border-right: 1px solid var(--line);
padding: 28px 28px 0 0;
}
.process li + li {
padding-left: 28px;
}
.process li:last-child {
border-right: 0;
}
.process > li > span,
.home-process span {
color: var(--blue);
font-size: 0.73rem;
font-weight: 900;
}
.process h3 {
margin: 28px 0 10px;
}
.outcomes {
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
gap: 100px;
display: grid;
}
.outcomes ul {
padding: 0;
list-style: none;
}
.outcomes li {
border-bottom: 1px solid #ffffff24;
align-items: center;
gap: 16px;
padding: 18px 0;
font-size: 1.15rem;
font-weight: 800;
display: flex;
}
.outcomes li span {
color: #66e4ce;
}
.related-grid,
.hub-grid {
grid-template-columns: repeat(3, 1fr);
gap: 18px;
display: grid;
}
.related-grid > a,
.hub-grid > a {
border: 1px solid var(--line);
background: #fff;
border-radius: 14px;
flex-direction: column;
min-height: 245px;
padding: 28px;
transition: all 0.2s;
display: flex;
}
.related-grid > a:hover,
.hub-grid > a:hover {
box-shadow: var(--shadow);
border-color: #8fb5f5;
transform: translateY(-3px);
}
.related-grid span,
.hub-grid span {
color: var(--blue);
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 0.72rem;
font-weight: 900;
}
.related-grid h3,
.hub-grid h3 {
margin: 34px 0 5px;
font-size: 1.25rem;
}
.related-grid p,
.hub-grid p {
margin: 4px 0 20px;
}
.related-grid b,
.hub-grid b {
color: var(--blue);
margin-top: auto;
font-size: 0.88rem;
}
.hub-grid {
grid-template-columns: repeat(3, 1fr);
}
.faq {
grid-template-columns: 0.72fr 1.28fr;
gap: 90px;
display: grid;
}
.faq details {
border-top: 1px solid var(--line);
}
.faq details:last-child {
border-bottom: 1px solid var(--line);
}
.faq summary {
cursor: pointer;
padding: 22px 40px 22px 0;
font-weight: 800;
position: relative;
}
.faq summary:after {
content: "+";
color: var(--blue);
font-size: 1.35rem;
position: absolute;
right: 8px;
}
.faq details[open] summary:after {
content: "−";
}
.faq details p {
padding-right: 30px;
}
.value-row,
.home-process {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
display: grid;
}
.value-row article {
border-left: 3px solid var(--blue);
background: var(--cream);
padding: 30px;
}
.value-row b {
color: var(--blue);
}
.home-process {
grid-template-columns: repeat(4, 1fr);
margin-top: 40px;
padding: 0;
list-style: none;
}
.home-process li {
border: 1px solid #ffffff24;
border-radius: 12px;
padding: 28px;
}
.home-process h3 {
margin: 45px 0 10px;
}
.home-services {
grid-template-columns: repeat(6, 1fr);
gap: 18px;
display: grid;
}
.service-panel {
color: #fff;
background: #163968;
border-radius: 18px;
flex-direction: column;
grid-column: span 2;
min-height: 330px;
padding: 30px;
display: flex;
}
.service-panel:nth-child(4),
.service-panel:nth-child(5) {
grid-column: span 3;
}
.service-panel span {
color: #ffffffb3;
font-size: 0.72rem;
font-weight: 900;
}
.service-panel h3 {
margin: 50px 0 10px;
font-size: 1.6rem;
}
.service-panel p {
color: #ffffffc7;
}
.service-panel b {
margin-top: auto;
}
.panel-development {
background: #096c78;
}
.panel-marketing {
background: #a5432c;
}
.panel-systems {
background: #3b3f8c;
}
.panel-tourism {
background: #08735f;
}
.mini-grid {
grid-template-columns: 1fr 1fr;
gap: 10px 30px;
display: grid;
}
.mini-grid > div {
border-top: 1px solid var(--line);
}
.cta-band {
color: #fff;
background: linear-gradient(120deg, #1155d9, #102d68);
border-radius: 24px 24px 8px;
justify-content: space-between;
align-items: center;
gap: 55px;
margin-block: 95px;
padding: 55px;
display: flex;
}
.cta-band .eyebrow {
color: #9ec7ff;
}
/* ==========================================================
FOOTER
========================================================== */
.footer {
margin-top: 100px;
padding-top: 70px;
color: #c6d1df;
background-color: #071526;
}
.footer .wrap {
width: min(1180px, calc(100% - 40px));
margin-inline: auto;
}
.footer-grid {
display: grid;
grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr;
gap: 65px;
}
.footer h2 {
margin: 0 0 20px;
color: #ffffff;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.footer p,
.footer address {
line-height: 1.7;
}
.footer address {
margin-bottom: 15px;
font-style: normal;
}
.footer-column > a {
display: block;
width: fit-content;
margin-block: 10px;
color: #c6d1df;
text-decoration: none;
}
.footer-column > a:hover {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 4px;
}
.footer a:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 4px;
}
/* WOCOMO logo */
.footer-brand {
display: inline-flex;
align-items: center;
gap: 13px;
color: #ffffff;
font-size: 1.25rem;
letter-spacing: 0.04em;
text-decoration: none;
}
.footer-brand img {
display: block;
width: 55px;
height: 55px;
object-fit: contain;
border-radius: 8px;
}
.footer-about > p {
max-width: 310px;
margin-top: 20px;
}
/* Social-media icons */
.footer-social-images {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 25px;
}
.footer-social-images a {
display: inline-flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
.footer-social-images a:hover {
background-color: #1877f2;
border-color: #1877f2;
transform: translateY(-3px);
}
.footer-social-images a[title="WhatsApp"]:hover {
background-color: #25d366;
border-color: #25d366;
}
.footer-social-images a[title="Instagram"]:hover {
background-color: #e4405f;
border-color: #e4405f;
}
.footer-social-images a[title="X"]:hover {
background-color: #000000;
border-color: #ffffff;
}
.footer-social-images a[title="LinkedIn"]:hover {
background-color: #0a66c2;
border-color: #0a66c2;
}
.footer-social-images img {
display: block;
width: 23px;
height: 23px;
object-fit: contain;
}
/* Copyright */
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 55px;
padding-block: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
font-size: 0.82rem;
}
/* Tablet */
@media (max-width: 980px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 45px;
}
}
/* Mobile */
@media (max-width: 640px) {
.footer {
margin-top: 70px;
padding-top: 55px;
}
.footer .wrap {
width: min(100% - 28px, 1180px);
}
.footer-grid {
grid-template-columns: 1fr;
gap: 38px;
}
.footer-bottom {
flex-direction: column;
margin-top: 40px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.footer-social-images a {
transition: none;
}
.footer-social-images a:hover {
transform: none;
}
}
