diff --git a/app/home/templates/home/sections/about-us.html b/app/home/templates/home/sections/about-us.html index 5209759..ffb525e 100644 --- a/app/home/templates/home/sections/about-us.html +++ b/app/home/templates/home/sections/about-us.html @@ -4,21 +4,18 @@
-

- ᜆᜓᜅ᜔ᜃᜓᜎ᜔ ᜐ ᜀᜋᜒᜈ᜔ -

-

What is PythonAsia?

+

What is PythonAsia?

-

+

The largest gathering of Python
developers in the Philippines with a
- global experience ▶ + global experience 🇵🇭🌎

-

+

PyCon is a volunteer-run, non-profit conference for the Python community, held worldwide since starting in the US. In the Philippines, PyCon PH has been organized annually since @@ -34,9 +31,9 @@

-
-

3 Days, Endless Possibilities

-

+

+

3 Days, Endless Possibilities

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.

@@ -45,45 +42,45 @@

3 Days, Endless Possibilities

-
+
- star +
-

World-Class Keynotes

-

+

World-Class Keynotes

+

From core contributors, startup founders, and AI pioneers.

-
+
- forum +
-

Multi-Track & Live Labs

-

+

Multi-Track & Live Labs

+

Covering AI/ML, data science, DevOps, and open source.

-
+
- code +
-

Hands-On Sprints

-

+

Hands-On Sprints

+

Code with maintainers (bring your laptop), then connect at our career expo & sponsor zone.

-
-

+

+

Join 200+ builders, students, and founders, for 48 hours of

-

+

Code, Coffee, and Collaboration.

diff --git a/app/home/templates/home/sections/announcement-section.html b/app/home/templates/home/sections/announcement-section.html index 9c769d9..2083dd6 100644 --- a/app/home/templates/home/sections/announcement-section.html +++ b/app/home/templates/home/sections/announcement-section.html @@ -7,12 +7,9 @@
-

- ano aN+ pykon -

-

+

Announcement -

+

-
+

2026

21

MAR

-

Lorem Ipsum Sit Dolor

-

+

Lorem Ipsum Sit Dolor

+

Limit to 5 lines only.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet. @@ -40,14 +37,14 @@

Lorem Ipsum Si

-
+

2026

22

MAR

-

Lorem Ipsum Sit Dolor

-

+

Lorem Ipsum Sit Dolor

+

Limit to 5 lines only.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet. @@ -57,14 +54,14 @@

Lorem Ipsum Si

-
+

2026

23

MAR

-

Lorem Ipsum Sit Dolor

-

+

Lorem Ipsum Sit Dolor

+

Limit to 5 lines only.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet. diff --git a/app/home/templates/home/sections/code-of-conduct.html b/app/home/templates/home/sections/code-of-conduct.html index cd54fd9..c092e50 100644 --- a/app/home/templates/home/sections/code-of-conduct.html +++ b/app/home/templates/home/sections/code-of-conduct.html @@ -4,15 +4,12 @@

-

- ᜊᜆᜐ᜔ ᜊᜆᜐ᜔ ᜊᜓᜑᜌ᜔ -

-

Code of Conduct

+

Code of Conduct

-

+

PyCon PH is a community conference intended for
collaboration in the developer community.

@@ -21,7 +18,7 @@

Code of
-

+

We value the participation of each member of the Python community and want all attendees to have an enjoyable and fulfilling experience. Accordingly, all attendees are @@ -31,7 +28,7 @@

Code of

-

+

To make clear what is expected, all delegates/attendees, speakers, exhibitors, organizers and volunteers at any PyCon event are required to conform to the following @@ -43,8 +40,8 @@

Code of
-

CONTACT INFORMATION

-

+

CONTACT INFORMATION

+

If you believe that someone is violating the code of conduct, or have any other concerns, please contact a member of the PyCon APAC 2025 Code of Conduct workgroup immediately. They can be reached by emailing coc@python.ph

@@ -52,8 +49,8 @@

-

LICENSE

-

+

LICENSE

+

This Code of Conduct is based on the PyCon US 2015 CoC, and is licensed under a Creative Commons Attribution 3.0 Unported License.

diff --git a/app/home/templates/home/sections/conference-at-a-glance.html b/app/home/templates/home/sections/conference-at-a-glance.html index c4c0ed9..860c3b5 100644 --- a/app/home/templates/home/sections/conference-at-a-glance.html +++ b/app/home/templates/home/sections/conference-at-a-glance.html @@ -4,7 +4,7 @@
-

Conference at a Glance

+

Conference at a Glance

@@ -12,20 +12,20 @@

Confere
-

MARCH 21-22,

-

SATURDAY-SUNDAY

+

MARCH 21-22,

+

SATURDAY-SUNDAY

Main Conference

-
+
check_circle Talks
-
+
check_circle Workshops
-
+
check_circle Lightning Talks
@@ -33,15 +33,15 @@

SATURDAY-SUNDAY

check_circle PyLadies Lunch
-
+
check_circle Open Spaces
-
+
check_circle Group Lunch
-
+
check_circle Career Mixer
@@ -51,15 +51,15 @@

SATURDAY-SUNDAY

-

MARCH 23,

-

SATURDAY

+

MARCH 23,

+

SATURDAY

-
+
check_circle Education Summit
-
+
check_circle Open Source Sprints
@@ -69,8 +69,8 @@

SATURDAY

-

Tickets Available

-

+

Tickets Available

+

Join us as we learn something new, teach something new, find opportunities, build cool things,
make friends, and geek out!

diff --git a/app/home/templates/home/sections/footer.html b/app/home/templates/home/sections/footer.html index 4b986cd..89cba41 100644 --- a/app/home/templates/home/sections/footer.html +++ b/app/home/templates/home/sections/footer.html @@ -6,12 +6,12 @@
- GET TICKETS - BECOME A SPONSOR + GET TICKETS + BECOME A SPONSOR
-

+

Message us at pycon@python.ph for questions and inquiries

@@ -35,7 +35,7 @@
-

+

This site is built using Django.

diff --git a/app/home/templates/home/sections/sponsor-section.html b/app/home/templates/home/sections/sponsor-section.html index 3c267f6..4f10c72 100644 --- a/app/home/templates/home/sections/sponsor-section.html +++ b/app/home/templates/home/sections/sponsor-section.html @@ -35,7 +35,7 @@

Organizer @@ -79,7 +79,7 @@

Institutional Sponsor @@ -100,7 +100,7 @@

Keystone Sponsor @@ -121,7 +121,7 @@

Titanium Sponsor @@ -142,7 +142,7 @@

Platinum Sponsor @@ -163,7 +163,7 @@

Gold Sponsor @@ -218,7 +218,7 @@

Silver Sponsor @@ -262,7 +262,7 @@

Community Partner @@ -317,7 +317,7 @@

Wellness Partnerr diff --git a/app/home/templates/home/sections/what-is-python-asia.html b/app/home/templates/home/sections/what-is-python-asia.html index faae0e6..b6f1dfc 100644 --- a/app/home/templates/home/sections/what-is-python-asia.html +++ b/app/home/templates/home/sections/what-is-python-asia.html @@ -4,12 +4,11 @@
-

ᜂᜅ᜔ ᜂᜐᜓᜇ᜔ ᜊᜌ᜔ᜊᜌᜒᜈ᜔

-

What is Python Asia?

-

+

What is Python Asia?

+

MAGIC HAPPENS WHEN PEOPLE COME TOGETHER TO ACHIEVE COMMON GOALS.

-

+

Magic happens when people come together to achieve common goals.

@@ -18,36 +17,36 @@

What is Python As
-

+

CALL FOR
SPONSORS

-

Submission deadline:

-

January 31, 2024

+

Submission deadline:

+

January 31, 2024

-

+

CALL FOR
VOLUNTEERS

-

Submission Deadline:

-

January 31, 2024

+

Submission Deadline:

+

January 31, 2024

-

+

INDIVIDUAL
SPONSORS

-

+

Individuals can also sponsor as patrons for any amount.

-

+

Look for "Individual Patron Sponsorship" at our ticketing page

diff --git a/app/home/templates/home/sections/when-where-section.html b/app/home/templates/home/sections/when-where-section.html index be4d05a..baa1612 100644 --- a/app/home/templates/home/sections/when-where-section.html +++ b/app/home/templates/home/sections/when-where-section.html @@ -10,8 +10,8 @@

WHEN? WHERE?

Malate, Manila

- - Apply for Student Lorem Ipsum + + Apply for Student Lorem Ipsum
diff --git a/app/home/templates/home/sections/why-python.html b/app/home/templates/home/sections/why-python.html index 9a460b4..f697e80 100644 --- a/app/home/templates/home/sections/why-python.html +++ b/app/home/templates/home/sections/why-python.html @@ -5,27 +5,26 @@
-

ᜂᜅ᜔ ᜂᜐᜓᜇ᜔ ᜊᜌ᜔ᜊᜌᜒᜈ᜔

-

Why Python?

+

Why Python?

-

+

We believe Python changes lives.

-

+

It gives everyday people the tools to create, solve problems, and share ideas with the world—while also powering industries from AI and data science to cloud computing and automation.

-

+

From students building their first websites, to small teams streamlining workflows, to researchers and companies tackling big challenges—Python is there.

-

+

Simple enough to start with, powerful enough to shape the future. And at PythonPH, we see it every day in our community: people learning, teaching, and creating together. diff --git a/static/css/app.css b/static/css/app.css index de07653..acb6e05 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -208,522 +208,576 @@ } @layer utilities { .menu { - display: flex; - width: fit-content; - flex-direction: column; - flex-wrap: wrap; - padding: calc(0.25rem * 2); - --menu-active-fg: var(--color-neutral-content); - --menu-active-bg: var(--color-neutral); - font-size: 0.875rem; - :where(li ul) { - position: relative; - margin-inline-start: calc(0.25rem * 4); - padding-inline-start: calc(0.25rem * 2); - white-space: nowrap; - &:before { - position: absolute; - inset-inline-start: calc(0.25rem * 0); - top: calc(0.25rem * 3); - bottom: calc(0.25rem * 3); - background-color: var(--color-base-content); - opacity: 10%; - width: var(--border); - content: ""; - } - } - :where(li > .menu-dropdown:not(.menu-dropdown-show)) { - display: none; - } - :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { - display: grid; - grid-auto-flow: column; - align-content: flex-start; - align-items: center; - gap: calc(0.25rem * 2); - border-radius: var(--radius-field); - padding-inline: calc(0.25rem * 3); - padding-block: calc(0.25rem * 1.5); - text-align: start; - transition-property: color, background-color, box-shadow; - transition-duration: 0.2s; - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); - grid-auto-columns: minmax(auto, max-content) auto max-content; - text-wrap: balance; - user-select: none; - } - :where(li > details > summary) { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; + @layer daisyui.component { + display: flex; + width: fit-content; + flex-direction: column; + flex-wrap: wrap; + padding: calc(0.25rem * 2); + --menu-active-fg: var(--color-neutral-content); + --menu-active-bg: var(--color-neutral); + font-size: 0.875rem; + :where(li ul) { + position: relative; + margin-inline-start: calc(0.25rem * 4); + padding-inline-start: calc(0.25rem * 2); + white-space: nowrap; + &:before { + position: absolute; + inset-inline-start: calc(0.25rem * 0); + top: calc(0.25rem * 3); + bottom: calc(0.25rem * 3); + background-color: var(--color-base-content); + opacity: 10%; + width: var(--border); + content: ""; + } } - &::-webkit-details-marker { + :where(li > .menu-dropdown:not(.menu-dropdown-show)) { display: none; } - } - :where(li > details > summary), :where(li > .menu-dropdown-toggle) { - &:after { - justify-self: flex-end; - display: block; - height: 0.375rem; - width: 0.375rem; - rotate: -135deg; - translate: 0 -1px; - transition-property: rotate, translate; + :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { + display: grid; + grid-auto-flow: column; + align-content: flex-start; + align-items: center; + gap: calc(0.25rem * 2); + border-radius: var(--radius-field); + padding-inline: calc(0.25rem * 3); + padding-block: calc(0.25rem * 1.5); + text-align: start; + transition-property: color, background-color, box-shadow; transition-duration: 0.2s; - content: ""; - transform-origin: 50% 50%; - box-shadow: 2px 2px inset; - pointer-events: none; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + grid-auto-columns: minmax(auto, max-content) auto max-content; + text-wrap: balance; + user-select: none; } - } - :where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { - rotate: 45deg; - translate: 0 1px; - } - :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn) { - &.menu-focus, &:focus-visible { - cursor: pointer; - background-color: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); - } - color: var(--color-base-content); + :where(li > details > summary) { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } + &::-webkit-details-marker { + display: none; + } } - } - :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) { - cursor: pointer; - background-color: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + :where(li > details > summary), :where(li > .menu-dropdown-toggle) { + &:after { + justify-self: flex-end; + display: block; + height: 0.375rem; + width: 0.375rem; + rotate: -135deg; + translate: 0 -1px; + transition-property: rotate, translate; + transition-duration: 0.2s; + content: ""; + transform-origin: 50% 50%; + box-shadow: 2px 2px inset; + pointer-events: none; + } } - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; + :where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { + rotate: 45deg; + translate: 0 1px; } - box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset; - } - :where(li:empty) { - background-color: var(--color-base-content); - opacity: 10%; - margin: 0.5rem 1rem; - height: 1px; - } - :where(li) { - position: relative; - display: flex; - flex-shrink: 0; - flex-direction: column; - flex-wrap: wrap; - align-items: stretch; - .badge { - justify-self: flex-end; + :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn) { + &.menu-focus, &:focus-visible { + cursor: pointer; + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + color: var(--color-base-content); + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } } - & > *:not(ul, .menu-title, details, .btn):active, & > *:not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active { + :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) { + cursor: pointer; + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } - color: var(--menu-active-fg); - background-color: var(--menu-active-bg); - background-size: auto, calc(var(--noise) * 100%); - background-image: none, var(--fx-noise); - &:not(&:active) { - box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg); - } + box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset; } - &.menu-disabled { - pointer-events: none; - color: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + :where(li:empty) { + background-color: var(--color-base-content); + opacity: 10%; + margin: 0.5rem 1rem; + height: 1px; + } + :where(li) { + position: relative; + display: flex; + flex-shrink: 0; + flex-direction: column; + flex-wrap: wrap; + align-items: stretch; + .badge { + justify-self: flex-end; + } + & > *:not(ul, .menu-title, details, .btn):active, & > *:not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + color: var(--menu-active-fg); + background-color: var(--menu-active-bg); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + &:not(&:active) { + box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg); + } + } + &.menu-disabled { + pointer-events: none; + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } } } - } - .dropdown:focus-within { - .menu-dropdown-toggle:after { - rotate: 45deg; - translate: 0 1px; + .dropdown:focus-within { + .menu-dropdown-toggle:after { + rotate: 45deg; + translate: 0 1px; + } } - } - .dropdown-content { - margin-top: calc(0.25rem * 2); - padding: calc(0.25rem * 2); - &:before { - display: none; + .dropdown-content { + margin-top: calc(0.25rem * 2); + padding: calc(0.25rem * 2); + &:before { + display: none; + } } } } .dropdown { - position: relative; - display: inline-block; - position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); - & > *:not(summary):focus { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; + @layer daisyui.component { + position: relative; + display: inline-block; + position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); + & > *:not(summary):focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } } - } - .dropdown-content { - position: absolute; - } - &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content { - display: none; - transform-origin: top; - opacity: 0%; - scale: 95%; - } - &[popover], .dropdown-content { - z-index: 999; - @media (prefers-reduced-motion: no-preference) { - animation: dropdown 0.2s; - transition-property: opacity, scale, display; - transition-behavior: allow-discrete; - transition-duration: 0.2s; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + .dropdown-content { + position: absolute; } - } - @starting-style { - &[popover], .dropdown-content { + &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content { + display: none; + transform-origin: top; + opacity: 0%; scale: 95%; - opacity: 0; } - } - &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { - > [tabindex]:first-child { - pointer-events: none; + &[popover], .dropdown-content { + z-index: 999; + @media (prefers-reduced-motion: no-preference) { + animation: dropdown 0.2s; + transition-property: opacity, scale, display; + transition-behavior: allow-discrete; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } } - .dropdown-content { - opacity: 100%; + @starting-style { + &[popover], .dropdown-content { + scale: 95%; + opacity: 0; + } } - } - &.dropdown-hover:hover { - .dropdown-content { - opacity: 100%; - scale: 100%; + &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { + > [tabindex]:first-child { + pointer-events: none; + } + .dropdown-content { + opacity: 100%; + } } - } - &:is(details) { - summary { - &::-webkit-details-marker { - display: none; + &.dropdown-hover:hover { + .dropdown-content { + opacity: 100%; + scale: 100%; } } - } - &.dropdown-open, &:focus, &:focus-within { - .dropdown-content { - scale: 100%; + &:is(details) { + summary { + &::-webkit-details-marker { + display: none; + } + } } - } - &:where([popover]) { - background: #0000; - } - &[popover] { - position: fixed; - color: inherit; - @supports not (position-area: bottom) { - margin: auto; - &.dropdown-open:not(:popover-open) { + &.dropdown-open, &:focus, &:focus-within { + .dropdown-content { + scale: 100%; + } + } + &:where([popover]) { + background: #0000; + } + &[popover] { + position: fixed; + color: inherit; + @supports not (position-area: bottom) { + margin: auto; + &.dropdown-open:not(:popover-open) { + display: none; + transform-origin: top; + opacity: 0%; + scale: 95%; + } + &::backdrop { + background-color: color-mix(in oklab, #000 30%, #0000); + } + } + &:not(.dropdown-open, :popover-open) { display: none; transform-origin: top; opacity: 0%; scale: 95%; } - &::backdrop { - background-color: color-mix(in oklab, #000 30%, #0000); - } - } - &:not(.dropdown-open, :popover-open) { - display: none; - transform-origin: top; - opacity: 0%; - scale: 95%; } } } .btn { :where(&) { - width: unset; - } - display: inline-flex; - flex-shrink: 0; - cursor: pointer; - flex-wrap: nowrap; - align-items: center; - justify-content: center; - gap: calc(0.25rem * 1.5); - text-align: center; - vertical-align: middle; - outline-offset: 2px; - webkit-user-select: none; - user-select: none; - padding-inline: var(--btn-p); - color: var(--btn-fg); - --tw-prose-links: var(--btn-fg); - height: var(--size); - font-size: var(--fontsize, 0.875rem); - font-weight: 600; - outline-color: var(--btn-color, var(--color-base-content)); - transition-property: color, background-color, border-color, box-shadow; - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); - transition-duration: 0.2s; - border-start-start-radius: var(--join-ss, var(--radius-field)); - border-start-end-radius: var(--join-se, var(--radius-field)); - border-end-start-radius: var(--join-es, var(--radius-field)); - border-end-end-radius: var(--join-ee, var(--radius-field)); - background-color: var(--btn-bg); - background-size: auto, calc(var(--noise) * 100%); - background-image: none, var(--btn-noise); - border-width: var(--border); - border-style: solid; - border-color: var(--btn-border); - text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15)); - touch-action: manipulation; - box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow); - --size: calc(var(--size-field, 0.25rem) * 10); - --btn-bg: var(--btn-color, var(--color-base-200)); - --btn-fg: var(--color-base-content); - --btn-p: 1rem; - --btn-border: var(--btn-bg); - @supports (color: color-mix(in lab, red, red)) { - --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); - } - --btn-shadow: 0 3px 2px -2px var(--btn-bg), - 0 4px 3px -2px var(--btn-bg); - @supports (color: color-mix(in lab, red, red)) { - --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), - 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); - } - --btn-noise: var(--fx-noise); - .prose & { - text-decoration-line: none; - } - @media (hover: hover) { - &:hover { - --btn-bg: var(--btn-color, var(--color-base-200)); - @supports (color: color-mix(in lab, red, red)) { - --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); - } + @layer daisyui.component { + width: unset; } } - &:focus-visible, &:has(:focus-visible) { - outline-width: 2px; - outline-style: solid; - isolation: isolate; - } - &:active:not(.btn-active) { - translate: 0 0.5px; + @layer daisyui.component { + display: inline-flex; + flex-shrink: 0; + cursor: pointer; + flex-wrap: nowrap; + align-items: center; + justify-content: center; + gap: calc(0.25rem * 1.5); + text-align: center; + vertical-align: middle; + outline-offset: 2px; + webkit-user-select: none; + user-select: none; + padding-inline: var(--btn-p); + color: var(--btn-fg); + --tw-prose-links: var(--btn-fg); + height: var(--size); + font-size: var(--fontsize, 0.875rem); + font-weight: 600; + outline-color: var(--btn-color, var(--color-base-content)); + transition-property: color, background-color, border-color, box-shadow; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + transition-duration: 0.2s; + border-start-start-radius: var(--join-ss, var(--radius-field)); + border-start-end-radius: var(--join-se, var(--radius-field)); + border-end-start-radius: var(--join-es, var(--radius-field)); + border-end-end-radius: var(--join-ee, var(--radius-field)); + background-color: var(--btn-bg); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--btn-noise); + border-width: var(--border); + border-style: solid; + border-color: var(--btn-border); + text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15)); + touch-action: manipulation; + box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow); + --size: calc(var(--size-field, 0.25rem) * 10); --btn-bg: var(--btn-color, var(--color-base-200)); + --btn-fg: var(--color-base-content); + --btn-p: 1rem; + --btn-border: var(--btn-bg); @supports (color: color-mix(in lab, red, red)) { - --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); + --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); } - --btn-border: var(--btn-color, var(--color-base-200)); + --btn-shadow: 0 3px 2px -2px var(--btn-bg), + 0 4px 3px -2px var(--btn-bg); @supports (color: color-mix(in lab, red, red)) { - --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); + --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), + 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); } - --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0); - } - &:is(:disabled, [disabled], .btn-disabled) { - &:not(.btn-link, .btn-ghost) { - background-color: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); - } - box-shadow: none; - } - pointer-events: none; - --btn-border: #0000; - --btn-noise: none; - --btn-fg: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); + --btn-noise: var(--fx-noise); + .prose & { + text-decoration-line: none; } @media (hover: hover) { &:hover { - pointer-events: none; - background-color: var(--color-neutral); + --btn-bg: var(--btn-color, var(--color-base-200)); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); } - --btn-border: #0000; - --btn-fg: var(--color-base-content); + } + } + &:focus-visible, &:has(:focus-visible) { + outline-width: 2px; + outline-style: solid; + isolation: isolate; + } + &:active:not(.btn-active) { + translate: 0 0.5px; + --btn-bg: var(--btn-color, var(--color-base-200)); + @supports (color: color-mix(in lab, red, red)) { + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); + } + --btn-border: var(--btn-color, var(--color-base-200)); + @supports (color: color-mix(in lab, red, red)) { + --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); + } + --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0); + } + &:is(input[type="checkbox"], input[type="radio"]) { + appearance: none; + &::after { + content: attr(aria-label); + } + } + &:where(input:checked:not(.filter .btn)) { + --btn-color: var(--color-primary); + --btn-fg: var(--color-primary-content); + isolation: isolate; + } + } + &:disabled { + @layer daisyui.modifier { + &:not(.btn-link, .btn-ghost) { + background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { - --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + box-shadow: none; + } + pointer-events: none; + --btn-border: #0000; + --btn-noise: none; + --btn-fg: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); + } + @media (hover: hover) { + &:hover { + pointer-events: none; + background-color: var(--color-neutral); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); + } + --btn-border: #0000; + --btn-fg: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); + } } } } } - &:is(input[type="checkbox"], input[type="radio"]) { - appearance: none; - &::after { - content: attr(aria-label); + &[disabled] { + @layer daisyui.modifier { + &:not(.btn-link, .btn-ghost) { + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + box-shadow: none; + } + pointer-events: none; + --btn-border: #0000; + --btn-noise: none; + --btn-fg: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); + } + @media (hover: hover) { + &:hover { + pointer-events: none; + background-color: var(--color-neutral); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); + } + --btn-border: #0000; + --btn-fg: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); + } + } + } } } - &:where(input:checked:not(.filter .btn)) { - --btn-color: var(--color-primary); - --btn-fg: var(--color-primary-content); - isolation: isolate; - } } .loading { - pointer-events: none; - display: inline-block; - aspect-ratio: 1 / 1; - background-color: currentcolor; - vertical-align: middle; - width: calc(var(--size-selector, 0.25rem) * 6); - mask-size: 100%; - mask-repeat: no-repeat; - mask-position: center; - mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); + @layer daisyui.component { + pointer-events: none; + display: inline-block; + aspect-ratio: 1 / 1; + background-color: currentcolor; + vertical-align: middle; + width: calc(var(--size-selector, 0.25rem) * 6); + mask-size: 100%; + mask-repeat: no-repeat; + mask-position: center; + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); + } } .steps { - display: inline-grid; - grid-auto-flow: column; - overflow: hidden; - overflow-x: auto; - counter-reset: step; - grid-auto-columns: 1fr; - .step { - display: grid; - grid-template-columns: repeat(1, minmax(0, 1fr)); - grid-template-columns: auto; - grid-template-rows: repeat(2, minmax(0, 1fr)); - grid-template-rows: 40px 1fr; - place-items: center; - text-align: center; - min-width: 4rem; - --step-bg: var(--color-base-300); - --step-fg: var(--color-base-content); - &:before { - top: calc(0.25rem * 0); - grid-column-start: 1; - grid-row-start: 1; - height: calc(0.25rem * 2); - width: 100%; - border: 1px solid; - color: var(--step-bg); - background-color: var(--step-bg); - --tw-content: ""; - content: var(--tw-content); - margin-inline-start: -100%; - } - > .step-icon, &:not(:has(.step-icon)):after { - content: counter(step); - counter-increment: step; - z-index: 1; - color: var(--step-fg); - background-color: var(--step-bg); - border: 1px solid var(--step-bg); - position: relative; - grid-column-start: 1; - grid-row-start: 1; + @layer daisyui.component { + display: inline-grid; + grid-auto-flow: column; + overflow: hidden; + overflow-x: auto; + counter-reset: step; + grid-auto-columns: 1fr; + .step { display: grid; - height: calc(0.25rem * 8); - width: calc(0.25rem * 8); + grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: auto; + grid-template-rows: repeat(2, minmax(0, 1fr)); + grid-template-rows: 40px 1fr; place-items: center; - place-self: center; - border-radius: calc(infinity * 1px); - } - &:first-child:before { - content: none; - } - &[data-content]:after { - content: attr(data-content); + text-align: center; + min-width: 4rem; + --step-bg: var(--color-base-300); + --step-fg: var(--color-base-content); + &:before { + top: calc(0.25rem * 0); + grid-column-start: 1; + grid-row-start: 1; + height: calc(0.25rem * 2); + width: 100%; + border: 1px solid; + color: var(--step-bg); + background-color: var(--step-bg); + --tw-content: ""; + content: var(--tw-content); + margin-inline-start: -100%; + } + > .step-icon, &:not(:has(.step-icon)):after { + content: counter(step); + counter-increment: step; + z-index: 1; + color: var(--step-fg); + background-color: var(--step-bg); + border: 1px solid var(--step-bg); + position: relative; + grid-column-start: 1; + grid-row-start: 1; + display: grid; + height: calc(0.25rem * 8); + width: calc(0.25rem * 8); + place-items: center; + place-self: center; + border-radius: calc(infinity * 1px); + } + &:first-child:before { + content: none; + } + &[data-content]:after { + content: attr(data-content); + } } } - .step-neutral { - + .step-neutral:before, &:after, > .step-icon { - --step-bg: var(--color-neutral); - --step-fg: var(--color-neutral-content); + @layer daisyui.modifier { + .step-neutral { + + .step-neutral:before, &:after, > .step-icon { + --step-bg: var(--color-neutral); + --step-fg: var(--color-neutral-content); + } } - } - .step-primary { - + .step-primary:before, &:after, > .step-icon { - --step-bg: var(--color-primary); - --step-fg: var(--color-primary-content); + .step-primary { + + .step-primary:before, &:after, > .step-icon { + --step-bg: var(--color-primary); + --step-fg: var(--color-primary-content); + } } - } - .step-secondary { - + .step-secondary:before, &:after, > .step-icon { - --step-bg: var(--color-secondary); - --step-fg: var(--color-secondary-content); + .step-secondary { + + .step-secondary:before, &:after, > .step-icon { + --step-bg: var(--color-secondary); + --step-fg: var(--color-secondary-content); + } } - } - .step-accent { - + .step-accent:before, &:after, > .step-icon { - --step-bg: var(--color-accent); - --step-fg: var(--color-accent-content); + .step-accent { + + .step-accent:before, &:after, > .step-icon { + --step-bg: var(--color-accent); + --step-fg: var(--color-accent-content); + } } - } - .step-info { - + .step-info:before, &:after, > .step-icon { - --step-bg: var(--color-info); - --step-fg: var(--color-info-content); + .step-info { + + .step-info:before, &:after, > .step-icon { + --step-bg: var(--color-info); + --step-fg: var(--color-info-content); + } } - } - .step-success { - + .step-success:before, &:after, > .step-icon { - --step-bg: var(--color-success); - --step-fg: var(--color-success-content); + .step-success { + + .step-success:before, &:after, > .step-icon { + --step-bg: var(--color-success); + --step-fg: var(--color-success-content); + } } - } - .step-warning { - + .step-warning:before, &:after, > .step-icon { - --step-bg: var(--color-warning); - --step-fg: var(--color-warning-content); + .step-warning { + + .step-warning:before, &:after, > .step-icon { + --step-bg: var(--color-warning); + --step-fg: var(--color-warning-content); + } } - } - .step-error { - + .step-error:before, &:after, > .step-icon { - --step-bg: var(--color-error); - --step-fg: var(--color-error-content); + .step-error { + + .step-error:before, &:after, > .step-icon { + --step-bg: var(--color-error); + --step-fg: var(--color-error-content); + } } } } .menu-horizontal { - display: inline-flex; - flex-direction: row; - & > li:not(.menu-title) > details > ul { - position: absolute; - margin-inline-start: calc(0.25rem * 0); - margin-top: calc(0.25rem * 4); - padding-block: calc(0.25rem * 2); - padding-inline-end: calc(0.25rem * 2); - } - & > li > details > ul { - &:before { - content: none; + @layer daisyui.modifier { + display: inline-flex; + flex-direction: row; + & > li:not(.menu-title) > details > ul { + position: absolute; + margin-inline-start: calc(0.25rem * 0); + margin-top: calc(0.25rem * 4); + padding-block: calc(0.25rem * 2); + padding-inline-end: calc(0.25rem * 2); + } + & > li > details > ul { + &:before { + content: none; + } + } + :where(& > li:not(.menu-title) > details > ul) { + border-radius: var(--radius-box); + background-color: var(--color-base-100); + box-shadow: 0 1px 3px 0 oklch(0% 0 0/0.1), 0 1px 2px -1px oklch(0% 0 0/0.1); } - } - :where(& > li:not(.menu-title) > details > ul) { - border-radius: var(--radius-box); - background-color: var(--color-base-100); - box-shadow: 0 1px 3px 0 oklch(0% 0 0/0.1), 0 1px 2px -1px oklch(0% 0 0/0.1); } } .navbar { - display: flex; - width: 100%; - align-items: center; - padding: 0.5rem; - min-height: 4rem; + @layer daisyui.component { + display: flex; + width: 100%; + align-items: center; + padding: 0.5rem; + min-height: 4rem; + } :where(&) { - position: relative; + @layer daisyui.modifier { + position: relative; + } } } .absolute { @@ -745,13 +799,15 @@ left: calc(var(--spacing) * 0); } .hero-content { - isolation: isolate; - display: flex; - max-width: 80rem; - align-items: center; - justify-content: center; - gap: calc(0.25rem * 4); - padding: calc(0.25rem * 4); + @layer daisyui.component { + isolation: isolate; + display: flex; + max-width: 80rem; + align-items: center; + justify-content: center; + gap: calc(0.25rem * 4); + padding: calc(0.25rem * 4); + } } .z-10 { z-index: 10; @@ -763,14 +819,16 @@ z-index: 1; } .hero { - display: grid; - width: 100%; - place-items: center; - background-size: cover; - background-position: center; - & > * { - grid-column-start: 1; - grid-row-start: 1; + @layer daisyui.component { + display: grid; + width: 100%; + place-items: center; + background-size: cover; + background-position: center; + & > * { + grid-column-start: 1; + grid-row-start: 1; + } } } .container { @@ -843,21 +901,27 @@ margin-bottom: calc(var(--spacing) * 20); } .navbar-end { - display: inline-flex; - align-items: center; - width: 50%; - justify-content: flex-end; + @layer daisyui.component { + display: inline-flex; + align-items: center; + width: 50%; + justify-content: flex-end; + } } .navbar-start { - display: inline-flex; - align-items: center; - width: 50%; - justify-content: flex-start; + @layer daisyui.component { + display: inline-flex; + align-items: center; + width: 50%; + justify-content: flex-start; + } } .navbar-center { - display: inline-flex; - align-items: center; - flex-shrink: 0; + @layer daisyui.component { + display: inline-flex; + align-items: center; + flex-shrink: 0; + } } .block { display: block; @@ -875,9 +939,11 @@ display: inline-block; } .btn-square { - padding-inline: calc(0.25rem * 0); - width: var(--size); - height: var(--size); + @layer daisyui.modifier { + padding-inline: calc(0.25rem * 0); + width: var(--size); + height: var(--size); + } } .h-5 { height: calc(var(--spacing) * 5); @@ -918,9 +984,6 @@ .w-32 { width: calc(var(--spacing) * 32); } - .w-40 { - width: calc(var(--spacing) * 40); - } .w-52 { width: calc(var(--spacing) * 52); } @@ -939,9 +1002,6 @@ .w-\[635px\] { width: 635px; } - .w-\[959\.82px\] { - width: 959.82px; - } .w-\[960px\] { width: 960px; } @@ -978,15 +1038,15 @@ .max-w-\[620px\] { max-width: 620px; } + .max-w-\[1112pv\] { + max-width: 1112pv; + } .max-w-\[1160px\] { max-width: 1160px; } .max-w-full { max-width: 100%; } - .max-w-md { - max-width: var(--container-md); - } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } @@ -1002,6 +1062,9 @@ .items-center { align-items: center; } + .items-end { + align-items: flex-end; + } .items-start { align-items: flex-start; } @@ -1077,26 +1140,21 @@ margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse))); } } - .space-x-4 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); - } - } .overflow-hidden { overflow: hidden; } .menu-sm { - :where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { - border-radius: var(--radius-field); - padding-inline: calc(0.25rem * 2.5); - padding-block: calc(0.25rem * 1); - font-size: 0.75rem; - } - .menu-title { - padding-inline: calc(0.25rem * 3); - padding-block: calc(0.25rem * 2); + @layer daisyui.modifier { + :where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { + border-radius: var(--radius-field); + padding-inline: calc(0.25rem * 2.5); + padding-block: calc(0.25rem * 1); + font-size: 0.75rem; + } + .menu-title { + padding-inline: calc(0.25rem * 3); + padding-block: calc(0.25rem * 2); + } } } .rounded-2xl { @@ -1105,6 +1163,9 @@ .rounded-3xl { border-radius: var(--radius-3xl); } + .rounded-\[12px\] { + border-radius: 12px; + } .rounded-\[24px\] { border-radius: 24px; } @@ -1128,8 +1189,8 @@ border-bottom-style: var(--tw-border-style); border-bottom-width: 4px; } - .bg-\[\#84400F\] { - background-color: #84400F; + .bg-\[\#B04301\] { + background-color: #B04301; } .bg-\[\#F4E6D4\] { background-color: #F4E6D4; @@ -1158,9 +1219,15 @@ background-color: color-mix(in oklab, var(--color-white) 50%, transparent); } } + .bg-\[url\(\'\/static\/img\/when-where-bg\.jpg\'\)\] { + background-image: url('/static/img/when-where-bg.jpg'); + } .bg-cover { background-size: cover; } + .bg-center { + background-position: center; + } .object-contain { object-fit: contain; } @@ -1179,6 +1246,9 @@ .p-\[20px\] { padding: 20px; } + .p-\[30px\] { + padding: 30px; + } .px-1 { padding-inline: calc(var(--spacing) * 1); } @@ -1215,6 +1285,15 @@ .pb-4 { padding-bottom: calc(var(--spacing) * 4); } + .pb-10 { + padding-bottom: calc(var(--spacing) * 10); + } + .pb-\[40\[x\]\] { + padding-bottom: 40[x]; + } + .pb-\[40px\] { + padding-bottom: 40px; + } .pb-\[56\.25\%\] { padding-bottom: 56.25%; } @@ -1329,6 +1408,9 @@ .text-\[\#F26D1D\] { color: #F26D1D; } + .text-\[\#FFA218\] { + color: #FFA218; + } .text-white { color: var(--color-white); } @@ -1354,23 +1436,25 @@ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .btn-ghost { - &:not(.btn-active, :hover, :active:focus, :focus-visible) { - --btn-shadow: ""; - --btn-bg: #0000; - --btn-border: #0000; - --btn-noise: none; - &:not(:disabled, [disabled], .btn-disabled) { - outline-color: currentcolor; - --btn-fg: currentColor; - } - } - @media (hover: none) { - &:hover:not(.btn-active, :active, :focus-visible, :disabled, [disabled], .btn-disabled) { + @layer daisyui.modifier { + &:not(.btn-active, :hover, :active:focus, :focus-visible) { --btn-shadow: ""; --btn-bg: #0000; --btn-border: #0000; --btn-noise: none; - --btn-fg: currentColor; + &:not(:disabled, [disabled], .btn-disabled) { + outline-color: currentcolor; + --btn-fg: currentColor; + } + } + @media (hover: none) { + &:hover:not(.btn-active, :active, :focus-visible, :disabled, [disabled], .btn-disabled) { + --btn-shadow: ""; + --btn-bg: #0000; + --btn-border: #0000; + --btn-noise: none; + --btn-fg: currentColor; + } } } } @@ -1390,8 +1474,10 @@ transition-duration: var(--tw-duration, var(--default-transition-duration)); } .btn-primary { - --btn-color: var(--color-primary); - --btn-fg: var(--color-primary-content); + @layer daisyui.modifier { + --btn-color: var(--color-primary); + --btn-fg: var(--color-primary-content); + } } .hover\:underline { &:hover { @@ -1429,6 +1515,11 @@ grid-template-columns: repeat(3, minmax(0, 1fr)); } } + .md\:grid-cols-4 { + @media (width >= 48rem) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + } .md\:text-4xl { @media (width >= 48rem) { font-size: var(--text-4xl); @@ -1441,11 +1532,6 @@ line-height: var(--tw-leading, var(--text-6xl--line-height)); } } - .lg\:block { - @media (width >= 64rem) { - display: block; - } - } .lg\:flex { @media (width >= 64rem) { display: flex; @@ -1468,8 +1554,10 @@ } .lg\:btn-wide { @media (width >= 64rem) { - width: 100%; - max-width: calc(0.25rem * 64); + @layer daisyui.modifier { + width: 100%; + max-width: calc(0.25rem * 64); + } } } .lg\:grid-cols-2 { @@ -1484,6 +1572,49 @@ } } } +@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap'); +@font-face { + font-family: 'bantayog'; + src: url('/static/fonts/Bantayog-Light.otf') format('opentype'); + font-weight: 300; + font-display: swap; +} +@font-face { + font-family: 'bantayog'; + src: url('/static/fonts/Bantayog-Regular.otf') format('opentype'); + font-weight: 400; + font-display: swap; +} +@font-face { + font-family: 'bantayog'; + src: url('/static/fonts/Bantayog-Semilight.otf') format('opentype'); + font-weight: 600; + font-display: swap; +} +@font-face { + font-family: 'niwanguno'; + src: url('/static/fonts/NiwangUno-Regular.otf') format('opentype'); + font-weight: 400; + font-display: swap; +} +@font-face { + font-family: 'td_pinoy'; + src: url('/static/fonts/TD_Pinoy.otf') format('opentype'); + font-weight: 500; + font-display: swap; +} +.font-bantayog { + font-family: 'bantayog', sans-serif; +} +.font-niwanguno { + font-family: 'niwanguno', sans-serif; +} +.font-td_pinoy { + font-family: 'td_pinoy', sans-serif; +} +.font-nunito { + font-family: 'Nunito', sans-serif; +} :root { --color-primary: #f26d1d; } diff --git a/static/img/vectors/conversation-icon.svg b/static/img/vectors/conversation-icon.svg new file mode 100644 index 0000000..8a68902 --- /dev/null +++ b/static/img/vectors/conversation-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/vectors/hands-on-icon.svg b/static/img/vectors/hands-on-icon.svg new file mode 100644 index 0000000..b3fa91b --- /dev/null +++ b/static/img/vectors/hands-on-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/img/vectors/star-icon.svg b/static/img/vectors/star-icon.svg new file mode 100644 index 0000000..eda4ee5 --- /dev/null +++ b/static/img/vectors/star-icon.svg @@ -0,0 +1,5 @@ + + + + +